Fix session counter, add SystemNotice

Author: sarahsturgeon

web/frontend/src/components/SystemNotice.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    export let message: string;
+</script>
+
+<div class="px-4 py-2">
+    <div class="bg-indigo-900/25 border border-indigo-500/40 rounded-lg px-4 py-3 max-w-md flex items-start gap-3">
+        <img src="/favicon.png" alt="" class="w-8 h-8 rounded shrink-0 mt-0.5" />
+        <div>
+            <p class="text-indigo-300 text-xs font-semibold">glua.dev</p>
+            <p class="text-gray-200 text-sm mt-0.5">{message}</p>
+        </div>
+    </div>
+</div>

web/frontend/src/lib/socket.ts

@@ -36,6 +36,9 @@ export function attachMessageHandler(socket: WebSocket, virtualConsole: VirtualC
         case "SESSION_CLOSED":
           sessionState.set("closed");
           break;
+        case "SYSTEM_NOTICE":
+          virtualConsole.mountSystemNotice(msg.payload.message);
+          break;
         case "CONTEXT_UPDATE":
           sessionMetadata.set(msg.payload);
           break;

web/frontend/src/lib/virtual-console.ts

@@ -1,5 +1,7 @@
 import AnsiUp from "ansi_up";
+import { mount } from "svelte";
 import { get } from "svelte/store";
+import SystemNotice from "../components/SystemNotice.svelte";
 import { scriptMap, viewingScript } from "./stores";
 
 /** Scrollable, ANSI-rendered log output backed by a plain div. */
@@ -81,6 +83,18 @@ export class VirtualConsole {
     };
   }
 
+  mountSystemNotice(message: string) {
+    const wasAtBottom = this.isAtBottom;
+    const target = document.createElement("div");
+    this.container.appendChild(target);
+    mount(SystemNotice, { target, props: { message } });
+    if (wasAtBottom) {
+      requestAnimationFrame(() => {
+        this.container.scrollTop = this.container.scrollHeight;
+      });
+    }
+  }
+
   addScriptLink(name: string) {
     const wasAtBottom = this.isAtBottom;
     const el = document.createElement("div");

web/scripts/deploy-prod.mjs

@@ -8,7 +8,7 @@ import { dirname, join } from "node:path";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const GRACE_SECONDS = 15;
-const ALERT_MESSAGE = `\u001b[33m*** glua.dev is deploying an update in ${GRACE_SECONDS}s — your session will briefly disconnect. Start a new one if it doesn't come back. ***\u001b[0m`;
+const ALERT_MESSAGE = `⚠️ We're pushing an update in ${GRACE_SECONDS}s — your session will be closed, sorry about that 🥀 You'll still be able to view its logs afterward, and you can start a new session anytime!`;
 
 function run(command, args) {
   return new Promise((resolve, reject) => {
@@ -21,6 +21,9 @@ function run(command, args) {
   });
 }
 
+console.log(`[deploy-prod] building frontend…`);
+await run("npm", ["run", "build"]);
+
 console.log(`[deploy-prod] broadcasting heads-up to active sessions…`);
 try {
   await run("node", [join(__dirname, "prod-alert.mjs"), ALERT_MESSAGE]);

web/shared/protocol.ts

@@ -12,6 +12,9 @@ export type ServerMessage =
   // Starts or updates the session countdown bar
   | { type: "SESSION_TIMER"; payload: SessionTimerPayload }
   | { type: "SESSION_CLOSED" }
+  // An out-of-band message from glua.dev itself (deploy notices, ops broadcasts)
+  // rendered as a styled card rather than a raw log line
+  | { type: "SYSTEM_NOTICE"; payload: { message: string } }
   // Branch/version info the agent reports on boot
   | { type: "CONTEXT_UPDATE"; payload: SessionMetadata }
   // A script the user just ran — surfaced inline in the console as a clickable link

web/src/queue/manager.ts

@@ -1,7 +1,7 @@
 import { DurableObject } from "cloudflare:workers";
 import type { SessionType } from "@glua/shared";
 import { MAX_SESSIONS_PER_IP, VALID_SESSION_TYPES } from "@glua/shared";
-import { CAPACITY, QUEUE_TIMING } from "../constants";
+import { CAPACITY, QUEUE_TIMING, SESSION_TIMING } from "../constants";
 import type { Env } from "../env";
 import { type CapacitySnapshot, notify, OBS_CONTEXT_HEADER, parseContext } from "../observability";
 import { hashIP } from "../utils";
@@ -15,7 +15,9 @@ import {
   stripResolvedPrefix,
   stripSessionPrefix,
 } from "./storage-keys";
-import type { QueueEntry, ResolvedTicket } from "./types";
+import type { ActiveSession, QueueEntry, ResolvedTicket } from "./types";
+
+const STALE_SESSION_CUTOFF = SESSION_TIMING.hardLimit + 60_000;
 
 /**
  * Global singleton that manages session allocation and the waiting queue
@@ -27,24 +29,25 @@ import type { QueueEntry, ResolvedTicket } from "./types";
  * Keyed as `idFromName("global-queue")` — there's exactly one of these
  */
 export class SessionManager extends DurableObject<Env> {
-  private activeSessions: Map<string, SessionType>;
-  private sessionIPs: Map<string, string>;
+  private activeSessions: Map<string, ActiveSession>;
   private waitingQueue: QueueEntry[];
   private resolvedTickets: Map<string, ResolvedTicket>;
 
   constructor(ctx: DurableObjectState, env: Env) {
     super(ctx, env);
     this.activeSessions = new Map();
-    this.sessionIPs = new Map();
     this.waitingQueue = [];
     this.resolvedTickets = new Map();
 
     ctx.blockConcurrencyWhile(async () => {
-      const stored = await ctx.storage.list<{ type: SessionType; ip: string }>({ prefix: SESSION_PREFIX });
+      const stored = await ctx.storage.list<Partial<ActiveSession>>({ prefix: SESSION_PREFIX });
       for (const [key, value] of stored) {
         const sessionId = stripSessionPrefix(key);
-        this.activeSessions.set(sessionId, value.type);
-        this.sessionIPs.set(sessionId, value.ip);
+        this.activeSessions.set(sessionId, {
+          type: (value.type ?? "public") as SessionType,
+          ip: value.ip ?? "unknown",
+          createdAt: value.createdAt ?? 0,
+        });
       }
 
       const now = Date.now();
@@ -115,10 +118,11 @@ export class SessionManager extends DurableObject<Env> {
       return Response.json({ error: "Missing 'message' string in body" }, { status: 400 });
     }
 
+    this.pruneStaleSessions();
     const entries = Array.from(this.activeSessions.entries());
     const results = await Promise.allSettled(
-      entries.map(async ([sessionId, type]) => {
-        const binding = this.bindingForType(type);
+      entries.map(async ([sessionId, entry]) => {
+        const binding = this.bindingForType(entry.type);
         if (!binding) return;
         const stub = binding.get(binding.idFromName(sessionId));
         await stub.fetch("http://do/internal/broadcast", {
@@ -246,11 +250,11 @@ export class SessionManager extends DurableObject<Env> {
 
   private async handleSessionClosed(request: Request): Promise<Response> {
     const { sessionId } = await request.json<{ sessionId: string }>();
-    const closedType = this.activeSessions.get(sessionId);
+    const closedEntry = this.activeSessions.get(sessionId);
     await this.removeSession(sessionId);
 
-    if (closedType) {
-      const idx = this.waitingQueue.findIndex((w) => w.sessionType === closedType);
+    if (closedEntry) {
+      const idx = this.waitingQueue.findIndex((w) => w.sessionType === closedEntry.type);
       if (idx !== -1) {
         const nextInLine = this.waitingQueue.splice(idx, 1)[0];
         const newSessionId = crypto.randomUUID();
@@ -275,9 +279,11 @@ export class SessionManager extends DurableObject<Env> {
       return Response.json({ status: "not-found" }, { status: 404 });
     }
 
-    if (this.activeSessions.has(sessionId)) {
-      const sessionType = this.activeSessions.get(sessionId)!;
-      return Response.json({ status: "active", sessionType });
+    this.pruneStaleSessions();
+
+    const active = this.activeSessions.get(sessionId);
+    if (active) {
+      return Response.json({ status: "active", sessionType: active.type });
     }
 
     const logKey = `sessions/${sessionId}/logs.log`;
@@ -306,26 +312,28 @@ export class SessionManager extends DurableObject<Env> {
 
   private activeSessionCountForIP(ip: string): number {
     let count = 0;
-    for (const [sessionId, sessionIp] of this.sessionIPs) {
-      if (sessionIp === ip && this.activeSessions.has(sessionId)) count++;
+    for (const entry of this.activeSessions.values()) {
+      if (entry.ip === ip) count++;
     }
     return count;
   }
 
   private activeCountForType(type: string): number {
     let count = 0;
-    for (const t of this.activeSessions.values()) {
-      if (t === type) count++;
+    for (const entry of this.activeSessions.values()) {
+      if (entry.type === type) count++;
     }
     return count;
   }
 
   private hasCapacity(type: SessionType): boolean {
+    this.pruneStaleSessions();
     const max = CAPACITY.maxPerType[type] ?? 2;
     return this.activeCountForType(type) < max && this.activeSessions.size < CAPACITY.maxTotal;
   }
 
   private snapshotFor(branch: string): CapacitySnapshot {
+    this.pruneStaleSessions();
     return {
       branch,
       branchUsed: this.activeCountForType(branch),
@@ -336,17 +344,29 @@ export class SessionManager extends DurableObject<Env> {
     };
   }
 
+  private pruneStaleSessions(): void {
+    const cutoff = Date.now() - STALE_SESSION_CUTOFF;
+    const stale: string[] = [];
+    for (const [sessionId, entry] of this.activeSessions) {
+      if (entry.createdAt < cutoff) stale.push(sessionId);
+    }
+    if (stale.length === 0) return;
+    for (const sessionId of stale) {
+      this.activeSessions.delete(sessionId);
+    }
+    this.notifyAsync(this.ctx.storage.delete(stale.map(sessionKey)).then(() => undefined));
+  }
+
   // ── Storage helpers ──
 
   private async persistSession(sessionId: string, type: SessionType, ip: string) {
-    this.activeSessions.set(sessionId, type);
-    this.sessionIPs.set(sessionId, ip);
-    await this.ctx.storage.put(sessionKey(sessionId), { type, ip });
+    const entry: ActiveSession = { type, ip, createdAt: Date.now() };
+    this.activeSessions.set(sessionId, entry);
+    await this.ctx.storage.put(sessionKey(sessionId), entry);
   }
 
   private async removeSession(sessionId: string) {
     this.activeSessions.delete(sessionId);
-    this.sessionIPs.delete(sessionId);
     await this.ctx.storage.delete(sessionKey(sessionId));
   }
 

web/src/queue/types.ts

@@ -12,3 +12,9 @@ export interface ResolvedTicket {
   sessionType: SessionType;
   createdAt: number;
 }
+
+export interface ActiveSession {
+  type: SessionType;
+  ip: string;
+  createdAt: number;
+}

web/src/session/base.ts

@@ -185,7 +185,7 @@ export class BaseSession extends Container<Env> {
     if (typeof body.message !== "string" || body.message.length === 0) {
       return new Response("Missing message", { status: 400 });
     }
-    this.broadcast({ type: "LOGS", payload: [body.message] });
+    this.broadcast({ type: "SYSTEM_NOTICE", payload: { message: body.message } });
     return new Response("ok");
   }
 
@@ -278,10 +278,10 @@ export class BaseSession extends Container<Env> {
 
     if (isDeployRollout) {
       this.broadcast({
-        type: "LOGS",
-        payload: [
-          "\u001b[33m*** We just pushed an update to glua.dev. We can't hot-swap running sessions (yet), so yours had to be closed — sorry about that 🥀 Start a new one to pick up where you left off! ***\u001b[0m",
-        ],
+        type: "SYSTEM_NOTICE",
+        payload: {
+          message: "We just pushed an update to glua.dev. We can't hot-swap running sessions (yet), so yours had to be closed — sorry about that 🥀 Start a new one to pick up where you left off!",
+        },
       });
       await this.closeSession("deploy_rollout");
       return;