Fix connection status: auto-reconnect terminals, accurate indicator

- On socket disconnect: mark all sessions as disconnected
- On socket reconnect: auto re-create all terminal PTY sessions
- Header status: online (green), reconnecting (yellow pulse), offline (red)
- No longer shows "online" when terminals are actually dead

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/Header.tsx

@@ -1,7 +1,24 @@
 import { useTerminalStore } from "~/stores/terminalStore";
 
 export default function Header() {
-  const connected = useTerminalStore((s) => s.socketConnected);
+  const socketConnected = useTerminalStore((s) => s.socketConnected);
+  const sessions = useTerminalStore((s) => s.sessions);
+
+  // Check if any session is actually connected (PTY alive)
+  const hasActiveSessions = Object.values(sessions).some(
+    (s) => s.status === "connected" || s.status === "connecting"
+  );
+
+  // online = socket connected AND at least one session alive
+  // reconnecting = socket connected but all sessions dead (just reconnected)
+  // offline = socket disconnected
+  const status = !socketConnected
+    ? "offline"
+    : hasActiveSessions
+      ? "online"
+      : Object.keys(sessions).length > 0
+        ? "reconnecting"
+        : "online";
 
   return (
     <header className="flex items-center justify-between px-3 py-1.5 bg-[#0d0d1a] border-b border-gray-800 shrink-0">
@@ -11,10 +28,22 @@ export default function Header() {
       </div>
       <div className="flex items-center gap-2">
         <span
-          className={`w-2 h-2 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
+          className={`w-2 h-2 rounded-full ${
+            status === "online"
+              ? "bg-green-500"
+              : status === "reconnecting"
+                ? "bg-yellow-500 animate-pulse"
+                : "bg-red-500"
+          }`}
         />
-        <span className={`text-xs ${connected ? "text-green-500" : "text-red-400"}`}>
-          {connected ? "online" : "offline"}
+        <span className={`text-xs ${
+          status === "online"
+            ? "text-green-500"
+            : status === "reconnecting"
+              ? "text-yellow-500"
+              : "text-red-400"
+        }`}>
+          {status}
         </span>
       </div>
     </header>

app/stores/terminalStore.ts

@@ -48,8 +48,37 @@ export const useTerminalStore = create<TerminalState>((set, get) => ({
 
     const socket = getSocket();
 
-    socket.on("connect", () => set({ socketConnected: true }));
-    socket.on("disconnect", () => set({ socketConnected: false }));
+    socket.on("connect", () => {
+      set({ socketConnected: true });
+
+      // On reconnect, re-create all existing sessions (server killed PTYs on disconnect)
+      const { sessions } = get();
+      for (const session of Object.values(sessions)) {
+        if (session.status === "disconnected" || session.status === "error") {
+          socket.emit("create_terminal", {
+            sessionId: session.id,
+            cwd: get().defaultCwd || undefined,
+          });
+          set({
+            sessions: {
+              ...get().sessions,
+              [session.id]: { ...get().sessions[session.id], status: "connecting" },
+            },
+          });
+        }
+      }
+    });
+
+    socket.on("disconnect", () => {
+      set({ socketConnected: false });
+      // Mark all sessions as disconnected
+      const { sessions } = get();
+      const updated: Record<string, typeof sessions[string]> = {};
+      for (const [id, session] of Object.entries(sessions)) {
+        updated[id] = { ...session, status: "disconnected" };
+      }
+      set({ sessions: updated });
+    });
 
     socket.on("terminal_ready", (data: { sessionId: string }) => {
       const { sessions } = get();