Refactor, simplify console.svelte

sarahsturgeon · sarahsturgeon · commit 385743035271 · 2026-04-14T16:05:29.000-07:00
diff --git a/web/frontend/src/components/Console.svelte b/web/frontend/src/components/Console.svelte
@@ -5,6 +5,7 @@
     import { sessionState, scriptMap } from "../lib/stores";
     import { VirtualConsole } from "../lib/virtual-console";
     import { attachMessageHandler } from "../lib/socket";
+    import { ReconnectionController } from "../lib/reconnection";
     import StatusPanel from "./StatusPanel.svelte";
     import SessionEndedCard from "./SessionEndedCard.svelte";
 
@@ -34,22 +35,17 @@
     $: inactive = $sessionState === "closed" || $sessionState === "readonly";
 
     let cleanClose = false;
-    let reconnectAttempts = 0;
-    const MAX_RECONNECT_ATTEMPTS = 5;
-    const RECONNECT_MESSAGES = [
-        "Connection lost. Trying to reconnect...",
-        "still trying...",
-        "hang tight, one more try...",
-        "still no luck, trying again...",
-        "last try...",
-    ];
-
-    let reconnectLine: ReturnType<VirtualConsole["addSpinnerLine"]> | null = null;
     let virtualConsole: VirtualConsole;
+    let reconnection: ReconnectionController;
     let unsubscribeSessionState: (() => void) | null = null;
 
     onMount(() => {
         virtualConsole = new VirtualConsole(outputContainer);
+        reconnection = new ReconnectionController(
+            virtualConsole,
+            () => socket ? new URL(socket.url).searchParams.get("session") : null,
+            () => attemptReconnect(),
+        );
 
         unsubscribeSessionState = sessionState.subscribe((state) => {
             if (state === "closed" && !cleanClose && socket) {
@@ -70,7 +66,7 @@
 
     onDestroy(() => {
         unsubscribeSessionState?.();
-        reconnectLine?.remove();
+        reconnection?.dispose();
     });
 
     function renderReadonlySession() {
@@ -103,11 +99,7 @@
         attachMessageHandler(socket, virtualConsole);
 
         socket.onopen = () => {
-            if (reconnectAttempts > 0) {
-                reconnectLine?.finalize("\u001b[32mReconnected.\u001b[0m");
-                reconnectLine = null;
-                reconnectAttempts = 0;
-            } else {
+            if (reconnection.handleOpen() === "initial") {
                 virtualConsole.addLines(["\u001b[32mConnection established. Waiting for session...\u001b[0m"]);
                 sessionState.set("provisioning");
             }
@@ -117,95 +109,39 @@
 
         socket.onclose = async (event: CloseEvent) => {
             if (cleanClose || event.code === 1000) {
-                reconnectLine?.remove();
-                reconnectLine = null;
+                reconnection.handleCleanClose();
                 virtualConsole.addLines(["\u001b[90mConnection closed.\u001b[0m"]);
-                sessionState.set("closed");
-                commandInput.disabled = true;
-                appendEndedCard(outputContainer);
+                markSessionEnded();
                 return;
             }
 
-            // A close with code != 1000 could be genuine network trouble (reconnect)
-            // or the server having already ended the session (race between the
-            // SESSION_CLOSED message and the WS close frame). Ask the server which
-            // it is before committing to a reconnect storm
-            const closeReason = await getServerSideCloseReason();
-            if (closeReason !== null) {
+            const result = await reconnection.handleAbnormalClose();
+            if (result === "ended") {
                 cleanClose = true;
-                reconnectLine?.remove();
-                reconnectLine = null;
-                virtualConsole.addLines([messageForCloseReason(closeReason)]);
-                sessionState.set("closed");
-                commandInput.disabled = true;
-                appendEndedCard(outputContainer);
-                return;
-            }
-
-            if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
-                reconnectAttempts++;
-                const delay = Math.min(1000 * Math.pow(2, reconnectAttempts - 1), 10000);
-                const label = RECONNECT_MESSAGES[Math.min(reconnectAttempts - 1, RECONNECT_MESSAGES.length - 1)];
-                const labelWithCount = `${label} \u001b[90m(${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})\u001b[0m`;
-                if (!reconnectLine) {
-                    reconnectLine = virtualConsole.addSpinnerLine(labelWithCount);
-                } else {
-                    reconnectLine.update(labelWithCount);
-                }
-                setTimeout(() => attemptReconnect(), delay);
-            } else {
-                reconnectLine?.finalize("\u001b[31mCouldn't reconnect. The session may have ended.\u001b[0m");
-                reconnectLine = null;
-                sessionState.set("closed");
-                commandInput.disabled = true;
-                appendEndedCard(outputContainer);
+                markSessionEnded();
             }
         };
 
         socket.onerror = (err) => {
-            // Suppress the noisy per-attempt error during reconnect — the spinner line
-            // already tells the user we're retrying
-            if (reconnectAttempts > 0) return;
+            if (reconnection.isReconnecting) return;
             console.error("WebSocket error:", err);
             virtualConsole.addLines(["\u001b[31mWebSocket connection error.\u001b[0m"]);
         };
     }
 
+    function markSessionEnded() {
+        sessionState.set("closed");
+        commandInput.disabled = true;
+        appendEndedCard(outputContainer);
+    }
+
     function attemptReconnect() {
         if (!socket || cleanClose || $sessionState === "closed") return;
         const wsUrl = socket.url;
         socket = new WebSocket(wsUrl);
         setupSocket();
     }
 
-    function messageForCloseReason(reason: string): string {
-        switch (reason) {
-            case "timer_expired": return "\u001b[33mSession expired.\u001b[0m";
-            case "deploy_rollout": return "\u001b[33mSession ended — we pushed an update.\u001b[0m";
-            case "clean": return "\u001b[90mSession ended.\u001b[0m";
-            case "agent_shutdown":
-            case "container_stopped":
-            case "container_error":
-                return "\u001b[31mSession ended unexpectedly.\u001b[0m";
-            default: return "\u001b[90mSession ended.\u001b[0m";
-        }
-    }
-
-    async function getServerSideCloseReason(): Promise<string | null> {
-        if (!socket) return null;
-        const sessionId = new URL(socket.url).searchParams.get("session");
-        if (!sessionId) return null;
-        try {
-            const res = await fetch(`/api/session-status?session=${sessionId}`);
-            if (!res.ok) return "";
-            const data = await res.json();
-            if (data?.status === "active") return null;
-            return data?.metadata?.closeReason ?? "";
-        } catch {
-            return null;
-        }
-    }
-
     function endSession() {
         if (socket?.readyState === WebSocket.OPEN) {
             socket.send(JSON.stringify({ type: "CLOSE_SESSION" }));
diff --git a/web/frontend/src/lib/reconnection.ts b/web/frontend/src/lib/reconnection.ts
@@ -0,0 +1,108 @@
+import type { CloseReason } from "@glua/shared";
+import type { VirtualConsole } from "./virtual-console";
+
+const MAX_ATTEMPTS = 5;
+
+const RETRY_MESSAGES = [
+  "Connection lost. Trying to reconnect...",
+  "still trying...",
+  "hang tight, one more try...",
+  "still no luck, trying again...",
+  "last try...",
+];
+
+export type AbnormalCloseResult = "ended" | "retrying";
+
+export class ReconnectionController {
+  private attempts = 0;
+  private line: ReturnType<VirtualConsole["addSpinnerLine"]> | null = null;
+
+  constructor(
+    private readonly virtualConsole: VirtualConsole,
+    private readonly getSessionId: () => string | null,
+    private readonly retry: () => void,
+  ) {}
+
+  get isReconnecting(): boolean {
+    return this.attempts > 0;
+  }
+
+  handleOpen(): "initial" | "reconnected" {
+    if (this.attempts > 0) {
+      this.line?.finalize("\u001b[32mReconnected.\u001b[0m");
+      this.line = null;
+      this.attempts = 0;
+      return "reconnected";
+    }
+    return "initial";
+  }
+
+  handleCleanClose(): void {
+    this.line?.remove();
+    this.line = null;
+  }
+
+  async handleAbnormalClose(): Promise<AbnormalCloseResult> {
+    const reason = await this.fetchCloseReason();
+    if (reason !== null) {
+      this.line?.remove();
+      this.line = null;
+      this.virtualConsole.addLines([messageForCloseReason(reason)]);
+      return "ended";
+    }
+
+    if (this.attempts < MAX_ATTEMPTS) {
+      this.attempts++;
+      const delay = Math.min(1000 * 2 ** (this.attempts - 1), 10000);
+      const label = RETRY_MESSAGES[Math.min(this.attempts - 1, RETRY_MESSAGES.length - 1)];
+      const text = `${label} \u001b[90m(${this.attempts}/${MAX_ATTEMPTS})\u001b[0m`;
+      if (this.line) {
+        this.line.update(text);
+      } else {
+        this.line = this.virtualConsole.addSpinnerLine(text);
+      }
+      setTimeout(() => this.retry(), delay);
+      return "retrying";
+    }
+
+    this.line?.finalize("\u001b[31mCouldn't reconnect. The session may have ended.\u001b[0m");
+    this.line = null;
+    return "ended";
+  }
+
+  dispose(): void {
+    this.line?.remove();
+    this.line = null;
+  }
+
+  private async fetchCloseReason(): Promise<string | null> {
+    const sessionId = this.getSessionId();
+    if (!sessionId) return null;
+    try {
+      const res = await fetch(`/api/session-status?session=${sessionId}`);
+      if (!res.ok) return "";
+      const data = await res.json();
+      if (data?.status === "active") return null;
+      return data?.metadata?.closeReason ?? "";
+    } catch {
+      return null;
+    }
+  }
+}
+
+function messageForCloseReason(reason: string): string {
+  const known = reason as CloseReason;
+  switch (known) {
+    case "timer_expired": return "\u001b[33mSession expired.\u001b[0m";
+    case "deploy_rollout": return "\u001b[33mSession ended — we pushed an update.\u001b[0m";
+    case "clean": return "\u001b[90mSession ended.\u001b[0m";
+    case "agent_shutdown":
+    case "container_stopped":
+    case "container_error":
+    case "container_start_failed":
+    case "agent_ws_close":
+    case "agent_ws_error":
+      return "\u001b[31mSession ended unexpectedly.\u001b[0m";
+    default: return "\u001b[90mSession ended.\u001b[0m";
+  }
+}
diff --git a/web/shared/protocol.ts b/web/shared/protocol.ts
@@ -32,13 +32,24 @@ export type AgentMessage =
   | { type: "METADATA"; payload: AgentMetadataPayload }
   | { type: "AGENT_SHUTDOWN" };
 
+export type CloseReason =
+  | "clean"
+  | "timer_expired"
+  | "agent_shutdown"
+  | "container_stopped"
+  | "container_error"
+  | "container_start_failed"
+  | "agent_ws_close"
+  | "agent_ws_error"
+  | "deploy_rollout";
+
 export interface SessionMetadata {
   branch: string;
   gameVersion: string;
   containerTag: string;
   startedAt: number;
   endedAt?: number;
-  closeReason?: string;
+  closeReason?: CloseReason;
 }
 
 export interface SessionTimerPayload {
diff --git a/web/src/observability/types.ts b/web/src/observability/types.ts
@@ -1,13 +1,6 @@
-export type CloseReason =
-  | "clean"
-  | "timer_expired"
-  | "agent_shutdown"
-  | "container_stopped"
-  | "container_error"
-  | "container_start_failed"
-  | "agent_ws_close"
-  | "agent_ws_error"
-  | "deploy_rollout";
+import type { CloseReason } from "@glua/shared";
+
+export type { CloseReason };
 
 export interface RequestContext {
   ip: string;
diff --git a/web/src/queue/manager.ts b/web/src/queue/manager.ts
@@ -171,7 +171,7 @@ export class SessionManager extends DurableObject<Env> {
       // CF always populates this header in production — getting here means
       // either an unusual proxy setup or a Cloudflare bug. Either way it
       // breaks our per-IP rate limiting, so we want to know about it
-      this.ctx.waitUntil(
+      this.notifyAsync(
         notify.warning(this.env, {
           title: "Missing CF-Connecting-IP",
           description: "A request reached SessionManager without a CF-Connecting-IP header — per-IP rate limiting is disabled for this session",
@@ -183,7 +183,7 @@ export class SessionManager extends DurableObject<Env> {
 
     if (clientIP !== "unknown" && this.activeSessionCountForIP(clientIP) >= MAX_SESSIONS_PER_IP) {
       const obsContext = parseContext(request.headers.get(OBS_CONTEXT_HEADER));
-      this.ctx.waitUntil(
+      this.notifyAsync(
         notify.warning(this.env, {
           title: "IP rate limit hit",
           description: `Tried to open a **${sessionType}** session past the per-IP limit of **${MAX_SESSIONS_PER_IP}**.`,
@@ -208,7 +208,7 @@ export class SessionManager extends DurableObject<Env> {
 
     const obsContext = parseContext(request.headers.get(OBS_CONTEXT_HEADER));
     if (obsContext) {
-      this.ctx.waitUntil(
+      this.notifyAsync(
         notify.queueEntered(this.env, {
           sessionType,
           position,
@@ -300,6 +300,10 @@ export class SessionManager extends DurableObject<Env> {
 
   // ── Capacity tracking ──
 
+  private notifyAsync(promise: Promise<unknown>): void {
+    this.ctx.waitUntil(promise);
+  }
+
   private activeSessionCountForIP(ip: string): number {
     let count = 0;
     for (const [sessionId, sessionIp] of this.sessionIPs) {
diff --git a/web/src/session/base.ts b/web/src/session/base.ts
