feat: add styles and polish for unified session list components

- Add CSS styles for SessionCard and SessionList components
- Add responsive styles for mobile viewport
- Fix TypeScript errors (remove unused port property)
- Fix ESLint errors (remove unused imports and variables)

Refs: session-list-overhaul tasks 5-6

.stoneforge/.dashboard-opened

@@ -1,2 +1,2 @@
-130078
+262629
-1779618546909
+1779624255076

apps/web/src/components/session-card.tsx

@@ -110,9 +110,6 @@ export function SessionCard({
               </a>
             </p>
           )}
-          {session.port && session.status === "running" && (
-            <p className="muted session-card-meta">Port: {session.port}</p>
-          )}
           {session.created_at && (
             <p className="muted session-card-meta">
               Created: {new Date(session.created_at).toLocaleDateString()}

apps/web/src/pages/dashboard.tsx

@@ -11,7 +11,6 @@ import type { Project } from "../types";
 import { Icon } from "../components/icon";
 import { CreateSessionForm } from "../components/create-session-form";
 import { SessionList } from "../components/session-list";
-import { SessionCard } from "../components/session-card";
 
 type HomeStatus = "loading" | "ready" | "error";
 
@@ -125,11 +124,6 @@ export const HomePage = () => {
     [safeSessions]
   );
 
-  const recentSessions = useMemo(
-    () => safeSessions.filter((session) => ["stopped", "error"].includes(session.status)).slice(0, 5),
-    [safeSessions]
-  );
-
   const handleCreateSuccess = async (instance: { id: string }) => {
     await updateUserConfig({ last_session_id: instance.id });
     setSelectedProject("");

apps/web/src/pages/sessions.tsx

@@ -238,15 +238,6 @@ export const SessionsPage = () => {
     }
   };
 
-  const handleResumeLast = async () => {
-    if (!lastSession) return;
-    // Find the project and repo IDs
-    const project = projects.find((p) => p.name === lastSession.project_name);
-    if (project) {
-      navigate(`/projects/${project.id}`);
-    }
-  };
-
   return (
     <section className="stack sessions-page">
       <div className="page-header">

apps/web/src/styles.css

@@ -2730,6 +2730,115 @@ a.nav-item,
   gap: var(--space-2);
 }
 
+/* Session Card - Unified Component */
+.session-card-content {
+  flex: 1;
+}
+
+.session-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.session-card-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+.session-card-title h4 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.session-card-status-badges {
+  display: flex;
+  gap: var(--space-1);
+  flex-wrap: wrap;
+}
+
+.session-card-meta {
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.session-card-meta .icon {
+  margin-right: var(--space-1);
+  vertical-align: text-bottom;
+}
+
+.session-card-url {
+  margin: var(--space-1) 0;
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.session-card-url a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.session-card-url a:hover {
+  text-decoration: underline;
+}
+
+.session-card-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-border);
+}
+
+/* Session List - Unified Component */
+.session-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.session-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.session-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.session-group-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+/* Action labels - hidden on mobile */
+.action-label {
+  margin-left: var(--space-1);
+}
+
+@media (max-width: 640px) {
+  .action-label {
+    display: none;
+  }
+
+  .session-card-actions {
+    gap: var(--space-1);
+  }
+
+  .session-card-actions button,
+  .session-card-actions a {
+    padding: var(--space-1);
+  }
+}
+
 .recent-sessions-section {
   margin-bottom: var(--space-6);
 }

openspec/changes/session-list-overhaul/tasks.md

@@ -35,10 +35,10 @@
 
 ## 5. Styles and Polish
 
-- [ ] 5.1 Add CSS styles for SessionCard layout (responsive grid)
+- [x] 5.1 Add CSS styles for SessionCard layout (responsive grid)
-- [ ] 5.2 Add CSS styles for action buttons (icon vs text based on viewport)
+- [x] 5.2 Add CSS styles for action buttons (icon vs text based on viewport)
-- [ ] 5.3 Style status indicators and badges
+- [x] 5.3 Style status indicators and badges
-- [ ] 5.4 Ensure consistent spacing and typography
+- [x] 5.4 Ensure consistent spacing and typography
 - [ ] 5.5 Test responsive layout on mobile viewport
 
 ## 6. Testing and Verification
@@ -49,5 +49,5 @@
 - [ ] 6.4 Test confirmation dialogs
 - [ ] 6.5 Test empty states
 - [ ] 6.6 Test responsive layout
-- [ ] 6.7 Run TypeScript compilation
+- [x] 6.7 Run TypeScript compilation
-- [ ] 6.8 Run ESLint
+- [x] 6.8 Run ESLint