feat: implement unified session list components

- Add SessionCard component with status indicators, actions, and confirmation dialogs
- Add SessionList component with grouping (active/recent) and filtering
- Refactor dashboard.tsx to use unified components
- Refactor sessions.tsx to use unified components
- Remove duplicated session rendering logic from both pages

Refs: session-list-overhaul tasks 1-4

apps/web/src/pages/dashboard.tsx

@@ -10,6 +10,8 @@ import { updateUserConfig } from "../api/settings";
 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";
 
@@ -31,8 +33,6 @@ export const HomePage = () => {
   const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
   const [selectedProject, setSelectedProject] = useState("");
   const [actionBusy, setActionBusy] = useState<string | null>(null);
-  const [stopConfirmId, setStopConfirmId] = useState<string | null>(null);
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
   const [tunnelHealth, setTunnelHealth] = useState<Record<string, InstanceHealth>>({});
   const safeSessions = Array.isArray(sessions) ? sessions : [];
 
@@ -149,12 +149,7 @@ export const HomePage = () => {
   };
 
   const handleStop = async (session: SessionView) => {
-    if (stopConfirmId !== session.id) {
-      setStopConfirmId(session.id);
-      return;
-    }
     setActionBusy(session.id);
-    setStopConfirmId(null);
     try {
       await stopInstance(session.project_id, session.repository_id, session.id);
       await loadHome();
@@ -164,12 +159,7 @@ export const HomePage = () => {
   };
 
   const handleDelete = async (session: SessionView) => {
-    if (deleteConfirmId !== session.id) {
-      setDeleteConfirmId(session.id);
-      return;
-    }
     setActionBusy(session.id);
-    setDeleteConfirmId(null);
     try {
       await deleteInstance(session.project_id, session.repository_id, session.id);
       setSessions((prev) => prev.filter((s) => s.id !== session.id));
@@ -190,6 +180,16 @@ export const HomePage = () => {
     }
   };
 
+  const handleStart = async (session: SessionView) => {
+    setActionBusy(session.id);
+    try {
+      await startInstance(session.project_id, session.repository_id, session.id);
+      await loadHome();
+    } finally {
+      setActionBusy(null);
+    }
+  };
+
   return (
     <section className="stack home-page">
       <header className="home-hero card">
@@ -237,74 +237,20 @@ export const HomePage = () => {
             <div className="page-header">
               <div>
                 <p className="eyebrow">Open sessions</p>
-                <h2>{activeSessions.length}</h2>
+                <h2>{safeSessions.filter((s) => ["running", "building", "pending", "starting", "probing", "unhealthy"].includes(s.status)).length}</h2>
               </div>
             </div>
-            {activeSessions.length === 0 ? (
-              <p className="muted">No active sessions right now.</p>
-            ) : (
-              <div className="home-session-grid">
-                {activeSessions.map((session) => {
-                  const health = tunnelHealth[session.id];
-                  const isUnhealthy = health && !health.healthy;
-                  return (
-                    <article className="card session-card" key={session.id}>
-                      <div className="stack-sm">
-                        <div className="row row-tight">
-                          <h3>{session.display_name}</h3>
-                          <div className="row row-tight">
-                            {isUnhealthy && (
-                              <span className="status-badge error" title={health.error || "unhealthy"}>!</span>
-                            )}
-                            <span className={`status-badge ${session.status}`}>{session.status}</span>
-                          </div>
-                        </div>
-                        <p className="muted">{session.project_name} · {session.repository_name}</p>
-                        <p className="muted">{session.tool_type_name}</p>
-                      </div>
-                      <div className="session-actions">
-                        <button className="secondary-button small" type="button" onClick={() => handleOpen(session)}>
-                          <Icon name="external" size="sm" />
-                          Open
-                        </button>
-                        <button className="ghost-button small" type="button" onClick={() => void handleRecreateTunnel(session)} disabled={actionBusy === session.id}>
-                          <Icon name="refresh" size="sm" />
-                          Tunnel
-                        </button>
-                        {stopConfirmId === session.id ? (
-                          <div className="stop-confirm-inline">
-                            <span className="confirm-text">Stop?</span>
-                            <button className="ghost-button small danger-text" type="button" onClick={() => void handleStop(session)} disabled={actionBusy === session.id}>
-                              <Icon name="stop" size="sm" /> Stop
-                            </button>
-                            <button className="ghost-button small" type="button" onClick={() => setStopConfirmId(null)}>Cancel</button>
-                          </div>
-                        ) : (
-                          <button className="ghost-button small" type="button" onClick={() => void handleStop(session)} disabled={actionBusy === session.id}>
-                            <Icon name="stop" size="sm" />
-                            Stop
-                          </button>
-                        )}
-                        {deleteConfirmId === session.id ? (
-                          <div className="delete-confirm-inline">
-                            <span className="confirm-text">Delete?</span>
-                            <button className="ghost-button small danger-text" type="button" onClick={() => void handleDelete(session)} disabled={actionBusy === session.id}>
-                              <Icon name="delete" size="sm" /> Delete
-                            </button>
-                            <button className="ghost-button small" type="button" onClick={() => setDeleteConfirmId(null)}>Cancel</button>
-                          </div>
-                        ) : (
-                          <button className="ghost-button small danger-text" type="button" onClick={() => void handleDelete(session)} disabled={actionBusy === session.id}>
-                            <Icon name="delete" size="sm" />
-                            Delete
-                          </button>
-                        )}
-                      </div>
-                    </article>
-                  );
-                })}
-              </div>
-            )}
+            <SessionList
+              sessions={safeSessions}
+              onOpen={handleOpen}
+              onStop={handleStop}
+              onDelete={handleDelete}
+              onRecreateTunnel={handleRecreateTunnel}
+              actionBusyId={actionBusy}
+              tunnelHealth={tunnelHealth}
+              showGrouping={false}
+              emptyMessage="No active sessions right now."
+            />
           </section>
 
           <section className="card stack home-section">
@@ -350,25 +296,24 @@ export const HomePage = () => {
             />
           </section>
 
-          {recentSessions.length > 0 && (
+          {safeSessions.filter((s) => ["stopped", "error"].includes(s.status)).length > 0 && (
             <section className="card stack home-section">
               <div className="page-header">
                 <div>
                   <p className="eyebrow">Recent sessions</p>
-                  <h2>{recentSessions.length}</h2>
+                  <h2>{safeSessions.filter((s) => ["stopped", "error"].includes(s.status)).length}</h2>
                 </div>
               </div>
-              <div className="recent-sessions-list">
-                {recentSessions.map((session) => (
-                  <article className="recent-session-item" key={session.id}>
-                    <div className="recent-session-info">
-                      <span className="recent-session-name">{session.display_name}</span>
-                      <span className="muted">{session.project_name} · {session.tool_type_name}</span>
-                    </div>
-                    <button className="ghost-button small" type="button" onClick={() => handleOpen(session)}>Open</button>
-                  </article>
-                ))}
-              </div>
+              <SessionList
+                sessions={safeSessions}
+                onOpen={handleOpen}
+                onStart={handleStart}
+                onDelete={handleDelete}
+                actionBusyId={actionBusy}
+                showGrouping={false}
+                maxRecent={5}
+                emptyMessage="No recent sessions."
+              />
             </section>
           )}
         </>