feat(frontend): update sessions page for enhanced health monitoring

- Add new status badges: starting, probing, unhealthy
- Show tunnel error only when tunnel_status is unreachable
- Show app error badge with status code for error_response
- Add collapsible probe output section for diagnostics
- Update health polling to check all active instances
- Only show Recreate Tunnel button for unreachable tunnels

apps/web/src/pages/sessions.tsx

@@ -40,8 +40,18 @@ export const SessionsPage = () => {
 
   const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
   const [stopConfirmId, setStopConfirmId] = useState<string | null>(null);
-  const [tunnelHealth, setTunnelHealth] = useState<Record<string, { healthy: boolean; status_code: number | null; error?: string }>>({});
+  const [tunnelHealth, setTunnelHealth] = useState<Record<string, {
+    healthy: boolean;
+    container_status: string;
+    container_health: string | null;
+    tunnel_status: string;
+    tunnel_status_code: number | null;
+    probe_status: string;
+    last_probe_output: string | null;
+    error: string | null;
+  }>>({});
   const [recreatingId, setRecreatingId] = useState<string | null>(null);
+  const [expandedProbeId, setExpandedProbeId] = useState<string | null>(null);
 
   const loadSessions = useCallback(async () => {
     setStatus("loading");
@@ -86,13 +96,13 @@ export const SessionsPage = () => {
     void loadToolTypes();
   }, []);
 
-  // Poll tunnel health every 30 seconds for running instances
+  // Poll health every 30 seconds for active instances
   useEffect(() => {
     const checkHealth = async () => {
-      const runningSessions = sessions.filter(
-        (s) => s.status === "running" && s.url
+      const activeSessions = sessions.filter(
+        (s) => ["running", "starting", "unhealthy", "probing"].includes(s.status)
       );
-      for (const session of runningSessions) {
+      for (const session of activeSessions) {
         try {
           const health = await checkInstanceHealth(
             session.project_id,
@@ -106,7 +116,14 @@ export const SessionsPage = () => {
         } catch {
           setTunnelHealth((prev) => ({
             ...prev,
-            [session.id]: { healthy: false, status_code: null, error: "check failed" },
+            [session.id]: {
+              healthy: false,
+              container_status: "unknown",
+              tunnel_status: "unreachable",
+              tunnel_status_code: null,
+              probe_status: "unknown",
+              error: "check failed",
+            },
           }));
         }
       }
@@ -135,7 +152,7 @@ export const SessionsPage = () => {
   }, [selectedProject]);
 
   const activeSessions = useMemo(
-    () => sessions.filter((s) => ["running", "building", "pending"].includes(s.status)),
+    () => sessions.filter((s) => ["running", "building", "pending", "starting", "probing", "unhealthy"].includes(s.status)),
     [sessions]
   );
 
@@ -328,9 +345,35 @@ export const SessionsPage = () => {
                         </p>
                       )}
                       <span className={`status-badge ${session.status}`}>{session.status}</span>
-                      {tunnelHealth[session.id] && !tunnelHealth[session.id].healthy && (
+                      {session.status === "starting" && (
+                        <span className="status-badge starting">starting...</span>
+                      )}
+                      {session.status === "probing" && (
+                        <span className="status-badge probing">checking...</span>
+                      )}
+                      {tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
                         <span className="status-badge error">tunnel error</span>
                       )}
+                      {tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "error_response" && (
+                        <span className="status-badge warning">app error ({tunnelHealth[session.id].tunnel_status_code})</span>
+                      )}
+                      {tunnelHealth[session.id]?.last_probe_output && (
+                        <div className="probe-output-section">
+                          <button
+                            className="probe-toggle"
+                            onClick={() => setExpandedProbeId(expandedProbeId === session.id ? null : session.id)}
+                            type="button"
+                          >
+                            <Icon name="info" size="sm" />
+                            {expandedProbeId === session.id ? "Hide probe output" : "Show probe output"}
+                          </button>
+                          {expandedProbeId === session.id && (
+                            <pre className="probe-output">
+                              {tunnelHealth[session.id].last_probe_output}
+                            </pre>
+                          )}
+                        </div>
+                      )}
                     </div>
                     <div className="session-actions">
                       {session.url ? (
@@ -353,7 +396,7 @@ export const SessionsPage = () => {
                           Open
                         </button>
                       )}
-                      {tunnelHealth[session.id] && !tunnelHealth[session.id].healthy && (
+                      {tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
                         <button
                           className="secondary-button small"
                           onClick={() => void handleRecreateTunnel(session)}