From b2e005f2b4914e86717fd4d5bdafa1c7c82f8af4 Mon Sep 17 00:00:00 2001
From: "shaggy (mosaic-dev box)" <shaggy@mosaic-dev.local>
Date: Sun, 9 Aug 2026 21:16:50 -0500
Subject: [PATCH 1/6] feat(web): add typed SPA chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bring the chat experience into the Vite/React-Router SPA on the exact typed
Socket.IO /chat contract from @mosaicstack/types, replacing the /chat
placeholder behind AuthGuard. Surfaces message:ack (with an accessible
status), agent:start, streamed agent:text/agent:thinking, tool start/end
status, agent:end with usage, session:info (thinking controls + routing
decision), commands:manifest, command:result, command:approval (with a
one-time approved-run affordance), system:reload (refreshing the rendered
manifest), and error, and emits message/abort/set:thinking/command:execute/
command:approve with exact payloads.

The gateway does not guarantee message:ack is the first event for a new
conversation (session:info, and error on auth/session-creation failure, can
both arrive first) — conversation-scoped events now adopt the conversation
from whichever scoped event names it first while a send is pending, then
filter everything else against that established conversation. A typed error
stops streaming instead of leaving Stop stuck active; agent:end no longer
appends an empty assistant turn when there is no text or thinking; and a
second message can no longer be sent while a turn is streaming.

Command approval is now integrity-checked end to end: only one
command:approve request may be outstanding at a time (a concurrent request
is ignored rather than overwriting the pending command/args), a stale or
mismatched command:approval response cannot replace active approval state,
and running an approved command clears its approval state immediately (via
a ref, before React re-renders) so a double-click cannot replay
command:execute.

The `/chat` socket is now typed at a single boundary: apps/web/src/lib/
socket.ts narrows socket.io-client's untyped `io()` return value to
`ChatSocket` (Socket<ServerToClientEvents, ClientToServerEvents>) once, at
creation, via the one assertion the library's types force; every consumer
(use-chat-connection.ts) then gets fully checked `on`/`emit` calls with no
further casts. The shared contract types live in the new
apps/web/src/lib/chat-contract.ts (replacing the old spa/chat/types.ts
shim), which re-exports them via type-only imports resolved directly
against packages/types/src (apps/web has no @mosaicstack/types package
dependency, so this stays source-only and is erased at compile time —
no package manifest or lockfile is touched). The two recorded-event test
suites now drive a shared, typed fake socket
(spa/chat/test-support/fake-chat-socket.ts) instead of an untyped
`(event: string, payload: unknown)` harness, so a wrong event name or
malformed payload fails to compile.
---
 apps/web/src/lib/chat-contract.ts             |  73 +++
 apps/web/src/lib/socket.ts                    |  14 +-
 apps/web/src/routes.tsx                       |   3 +-
 apps/web/src/spa/chat/commands-panel.tsx      | 108 ++++
 apps/web/src/spa/chat/composer.tsx            |  92 +++
 apps/web/src/spa/chat/message-transcript.tsx  |  39 ++
 apps/web/src/spa/chat/session-panel.tsx       |  43 ++
 .../spa/chat/test-support/fake-chat-socket.ts |  77 +++
 apps/web/src/spa/chat/tool-call-list.tsx      |  16 +
 .../src/spa/chat/use-chat-connection.spec.tsx | 607 ++++++++++++++++++
 apps/web/src/spa/chat/use-chat-connection.ts  | 442 +++++++++++++
 apps/web/src/spa/pages/chat.spec.tsx          | 497 ++++++++++++++
 apps/web/src/spa/pages/chat.tsx               |  75 +++
 apps/web/src/spa/routes.spec.tsx              |  12 +
 14 files changed, 2093 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/lib/chat-contract.ts
 create mode 100644 apps/web/src/spa/chat/commands-panel.tsx
 create mode 100644 apps/web/src/spa/chat/composer.tsx
 create mode 100644 apps/web/src/spa/chat/message-transcript.tsx
 create mode 100644 apps/web/src/spa/chat/session-panel.tsx
 create mode 100644 apps/web/src/spa/chat/test-support/fake-chat-socket.ts
 create mode 100644 apps/web/src/spa/chat/tool-call-list.tsx
 create mode 100644 apps/web/src/spa/chat/use-chat-connection.spec.tsx
 create mode 100644 apps/web/src/spa/chat/use-chat-connection.ts
 create mode 100644 apps/web/src/spa/pages/chat.spec.tsx
 create mode 100644 apps/web/src/spa/pages/chat.tsx

diff --git a/apps/web/src/lib/chat-contract.ts b/apps/web/src/lib/chat-contract.ts
new file mode 100644
index 00000000..98c62477
--- /dev/null
+++ b/apps/web/src/lib/chat-contract.ts
@@ -0,0 +1,73 @@
+// Centralizes the type-only import of the shared `/chat` Socket.IO contract from
+// @mosaicstack/types' source.
+//
+// `apps/web` does not declare `@mosaicstack/types` as a package dependency (P3 scope
+// forbids editing package manifests/lockfiles), so these are type-only imports
+// resolved directly against the package source. `import type` is erased at compile
+// time, so no runtime dependency is introduced — this only reuses the exact payload
+// shapes instead of redeclaring them.
+//
+// This deliberately imports the narrow `chat/events` and `commands/index` entry
+// points rather than the package's full `src/index` barrel: the barrel also re-exports
+// class-validator/class-transformer decorated DTOs (chat.dto.ts, reflection.dto.ts,
+// connector-lease.dto.ts) that require compiler options apps/web's tsconfig does not
+// set, which breaks `tsc --noEmit` here even though only types are imported.
+import type { Socket } from 'socket.io-client';
+import type {
+  AbortPayload,
+  AgentEndPayload,
+  AgentStartPayload,
+  AgentTextPayload,
+  AgentThinkingPayload,
+  ChatMessagePayload,
+  ClientToServerEvents,
+  ErrorPayload,
+  MessageAckPayload,
+  RoutingDecisionInfo,
+  ServerToClientEvents,
+  SessionInfoPayload,
+  SessionUsagePayload,
+  SetThinkingPayload,
+  ToolEndPayload,
+  ToolStartPayload,
+} from '../../../../packages/types/src/chat/events';
+import type {
+  CommandDef,
+  CommandManifest,
+  CommandManifestPayload,
+  SkillCommandDef,
+  SlashCommandApprovalResultPayload,
+  SlashCommandPayload,
+  SlashCommandResultPayload,
+  SystemReloadPayload,
+} from '../../../../packages/types/src/commands/index';
+
+export type {
+  AbortPayload,
+  AgentEndPayload,
+  AgentStartPayload,
+  AgentTextPayload,
+  AgentThinkingPayload,
+  ChatMessagePayload,
+  ClientToServerEvents,
+  CommandDef,
+  CommandManifest,
+  CommandManifestPayload,
+  ErrorPayload,
+  MessageAckPayload,
+  RoutingDecisionInfo,
+  ServerToClientEvents,
+  SessionInfoPayload,
+  SessionUsagePayload,
+  SetThinkingPayload,
+  SkillCommandDef,
+  SlashCommandApprovalResultPayload,
+  SlashCommandPayload,
+  SlashCommandResultPayload,
+  SystemReloadPayload,
+  ToolEndPayload,
+  ToolStartPayload,
+};
+
+/** The `/chat` namespace socket, narrowed to the exact typed event contract. */
+export type ChatSocket = Socket<ServerToClientEvents, ClientToServerEvents>;
diff --git a/apps/web/src/lib/socket.ts b/apps/web/src/lib/socket.ts
index 66cf64f4..ba4ae860 100644
--- a/apps/web/src/lib/socket.ts
+++ b/apps/web/src/lib/socket.ts
@@ -1,14 +1,20 @@
-import { io, type Socket } from 'socket.io-client';
+import { io } from 'socket.io-client';
+import type { ChatSocket } from './chat-contract';
 
-let socket: Socket | null = null;
+let socket: ChatSocket | null = null;
 
-export function getSocket(): Socket {
+export function getSocket(): ChatSocket {
   if (!socket) {
+    // socket.io-client 4.8.3's `io()` factory declaration always returns the
+    // default unparameterized Socket (it accepts no <ListenEvents, EmitEvents>
+    // generics), so this one cast is the unavoidable boundary between that and the
+    // typed `/chat` contract. Every other call site uses the resulting ChatSocket
+    // with no further assertions.
     socket = io('/chat', {
       withCredentials: true,
       autoConnect: false,
       transports: ['websocket', 'polling'],
-    });
+    }) as unknown as ChatSocket;
 
     // Reset singleton reference when socket is fully closed so the next
     // getSocket() call creates a fresh instance instead of returning a
diff --git a/apps/web/src/routes.tsx b/apps/web/src/routes.tsx
index 20556bad..1bc57bc3 100644
--- a/apps/web/src/routes.tsx
+++ b/apps/web/src/routes.tsx
@@ -3,6 +3,7 @@ import { createBrowserRouter, Navigate, Outlet, type RouteObject } from 'react-r
 import { LoginPage } from '@/spa/pages/login';
 import { RegisterPage } from '@/spa/pages/register';
 import { SsoCallbackPage } from '@/spa/pages/sso-callback';
+import { ChatPage } from '@/spa/pages/chat';
 import { AuthGuard, GuestGuard } from '@/spa/guards';
 import { Placeholder } from '@/spa/placeholder';
 
@@ -34,7 +35,7 @@ export const routes: RouteObject[] = [
     element: <AuthGuard />,
     children: [
       { path: '/', element: <Navigate to="/chat" replace /> },
-      { path: '/chat', element: <Placeholder title="Chat" /> },
+      { path: '/chat', element: <ChatPage /> },
       { path: '/projects', element: <Placeholder title="Projects" /> },
       { path: '/projects/:id', element: <Placeholder title="Project" /> },
       { path: '/tasks', element: <Placeholder title="Tasks" /> },
diff --git a/apps/web/src/spa/chat/commands-panel.tsx b/apps/web/src/spa/chat/commands-panel.tsx
new file mode 100644
index 00000000..b21ef94e
--- /dev/null
+++ b/apps/web/src/spa/chat/commands-panel.tsx
@@ -0,0 +1,108 @@
+import { useState, type ReactElement } from 'react';
+import type { PendingApproval } from './use-chat-connection';
+import type {
+  CommandManifest,
+  SlashCommandApprovalResultPayload,
+  SlashCommandResultPayload,
+} from '@/lib/chat-contract';
+
+interface CommandsPanelProps {
+  manifest: CommandManifest | null;
+  results: SlashCommandResultPayload[];
+  approval: SlashCommandApprovalResultPayload | null;
+  pendingApproval: PendingApproval | null;
+  hasConversation: boolean;
+  onExecute: (input: { command: string; args?: string }) => void;
+  onApprove: (input: { command: string; args?: string }) => void;
+  onRunApproved: () => void;
+}
+
+export function CommandsPanel({
+  manifest,
+  results,
+  approval,
+  pendingApproval,
+  hasConversation,
+  onExecute,
+  onApprove,
+  onRunApproved,
+}: CommandsPanelProps): ReactElement {
+  const [command, setCommand] = useState('');
+  const [args, setArgs] = useState('');
+
+  const canRunApproved =
+    !!approval?.success &&
+    !!approval.approvalId &&
+    !!pendingApproval &&
+    pendingApproval.command === approval.command;
+
+  return (
+    <section aria-label="Commands" className="flex flex-col gap-2 border-b px-4 py-3 text-xs">
+      {manifest && manifest.commands.length > 0 ? (
+        <ul aria-label="Available commands" className="flex flex-col gap-1">
+          {manifest.commands.map((cmd) => (
+            <li key={cmd.name}>
+              <strong>/{cmd.name}</strong> — {cmd.description}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          aria-label="Command name"
+          value={command}
+          onChange={(event) => setCommand(event.target.value)}
+          placeholder="command"
+        />
+        <input
+          aria-label="Command arguments"
+          value={args}
+          onChange={(event) => setArgs(event.target.value)}
+          placeholder="args (optional)"
+        />
+        <button
+          type="button"
+          disabled={!hasConversation || !command.trim()}
+          onClick={() => onExecute({ command: command.trim(), args: args.trim() || undefined })}
+        >
+          Run command
+        </button>
+        <button
+          type="button"
+          disabled={!hasConversation || !command.trim()}
+          onClick={() => onApprove({ command: command.trim(), args: args.trim() || undefined })}
+        >
+          Request approval
+        </button>
+      </div>
+
+      {approval ? (
+        <div role={approval.success ? 'status' : 'alert'} className="flex items-center gap-2">
+          <span>
+            {approval.success
+              ? `Approved: /${approval.command}`
+              : `Approval denied: /${approval.command}`}
+            {approval.message ? ` — ${approval.message}` : ''}
+          </span>
+          {canRunApproved ? (
+            <button type="button" onClick={onRunApproved}>
+              Run approved command
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {results.length > 0 ? (
+        <ul aria-label="Command results" className="flex flex-col gap-1">
+          {results.map((result, index) => (
+            <li key={`${result.command}-${index}`} role={result.success ? 'status' : 'alert'}>
+              /{result.command}: {result.success ? 'success' : 'failed'}
+              {result.message ? ` — ${result.message}` : ''}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+}
diff --git a/apps/web/src/spa/chat/composer.tsx b/apps/web/src/spa/chat/composer.tsx
new file mode 100644
index 00000000..604f47d2
--- /dev/null
+++ b/apps/web/src/spa/chat/composer.tsx
@@ -0,0 +1,92 @@
+import { useState, type KeyboardEvent, type ReactElement } from 'react';
+
+interface ComposerProps {
+  onSend: (input: { content: string; provider?: string; modelId?: string }) => void;
+  onStop: () => void;
+  streaming: boolean;
+  hasConversation: boolean;
+}
+
+export function Composer({
+  onSend,
+  onStop,
+  streaming,
+  hasConversation,
+}: ComposerProps): ReactElement {
+  const [content, setContent] = useState('');
+  const [provider, setProvider] = useState('');
+  const [modelId, setModelId] = useState('');
+
+  function submit(): void {
+    if (streaming) return;
+    const trimmed = content.trim();
+    if (!trimmed) return;
+    onSend({
+      content: trimmed,
+      provider: provider.trim() || undefined,
+      modelId: modelId.trim() || undefined,
+    });
+    setContent('');
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  }
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+      className="flex flex-col gap-2 border-t p-4"
+    >
+      <div className="flex flex-wrap gap-2">
+        <input
+          aria-label="Provider"
+          value={provider}
+          onChange={(event) => setProvider(event.target.value)}
+          placeholder="Provider (optional)"
+          className="rounded border px-2 py-1 text-xs"
+        />
+        <input
+          aria-label="Model"
+          value={modelId}
+          onChange={(event) => setModelId(event.target.value)}
+          placeholder="Model (optional)"
+          className="rounded border px-2 py-1 text-xs"
+        />
+      </div>
+      <div className="flex items-end gap-2">
+        <textarea
+          aria-label="Message"
+          value={content}
+          onChange={(event) => setContent(event.target.value)}
+          onKeyDown={handleKeyDown}
+          rows={2}
+          placeholder="Message… (Enter to send, Shift+Enter for a new line)"
+          className="flex-1 resize-none rounded border px-3 py-2 text-sm"
+        />
+        <button
+          type="submit"
+          disabled={!content.trim() || streaming}
+          className="rounded px-3 py-2 text-sm font-medium"
+        >
+          Send
+        </button>
+        <button
+          type="button"
+          aria-label="Stop"
+          disabled={!hasConversation || !streaming}
+          onClick={onStop}
+          className="rounded px-3 py-2 text-sm font-medium"
+        >
+          Stop
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/src/spa/chat/message-transcript.tsx b/apps/web/src/spa/chat/message-transcript.tsx
new file mode 100644
index 00000000..d1a69e63
--- /dev/null
+++ b/apps/web/src/spa/chat/message-transcript.tsx
@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import type { ChatTranscriptMessage } from './use-chat-connection';
+
+interface MessageTranscriptProps {
+  messages: ChatTranscriptMessage[];
+  streaming: boolean;
+  text: string;
+}
+
+export function MessageTranscript({
+  messages,
+  streaming,
+  text,
+}: MessageTranscriptProps): ReactElement {
+  return (
+    <div
+      role="log"
+      aria-live="polite"
+      aria-label="Conversation"
+      className="flex flex-1 flex-col gap-3 overflow-y-auto p-4"
+    >
+      {messages.map((message) => (
+        <div key={message.id} data-role={message.role} className="whitespace-pre-wrap text-sm">
+          <span className="font-medium">{message.role === 'user' ? 'You' : 'Assistant'}: </span>
+          <span>{message.text}</span>
+          {message.thinking ? (
+            <div className="pt-1 text-xs italic opacity-70">{message.thinking}</div>
+          ) : null}
+        </div>
+      ))}
+      {streaming ? (
+        <div data-role="assistant-streaming" className="whitespace-pre-wrap text-sm">
+          <span className="font-medium">Assistant: </span>
+          <span>{text || 'Thinking…'}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/spa/chat/session-panel.tsx b/apps/web/src/spa/chat/session-panel.tsx
new file mode 100644
index 00000000..7c55020a
--- /dev/null
+++ b/apps/web/src/spa/chat/session-panel.tsx
@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import type { SessionInfoPayload } from '@/lib/chat-contract';
+
+interface SessionPanelProps {
+  sessionInfo: SessionInfoPayload | null;
+  onSetThinking: (level: string) => void;
+}
+
+export function SessionPanel({
+  sessionInfo,
+  onSetThinking,
+}: SessionPanelProps): ReactElement | null {
+  if (!sessionInfo) return null;
+
+  return (
+    <section
+      aria-label="Session info"
+      className="flex flex-wrap items-center gap-3 border-b px-4 py-2 text-xs"
+    >
+      <span>{sessionInfo.provider}</span>
+      <span>{sessionInfo.modelId}</span>
+      <label className="flex items-center gap-2">
+        <span>Thinking level</span>
+        <select
+          aria-label="Thinking level"
+          value={sessionInfo.thinkingLevel}
+          onChange={(event) => onSetThinking(event.target.value)}
+        >
+          {sessionInfo.availableThinkingLevels.map((level) => (
+            <option key={level} value={level}>
+              {level}
+            </option>
+          ))}
+        </select>
+      </label>
+      {sessionInfo.routingDecision ? (
+        <span title={sessionInfo.routingDecision.ruleName}>
+          {sessionInfo.routingDecision.reason}
+        </span>
+      ) : null}
+    </section>
+  );
+}
diff --git a/apps/web/src/spa/chat/test-support/fake-chat-socket.ts b/apps/web/src/spa/chat/test-support/fake-chat-socket.ts
new file mode 100644
index 00000000..6ba46fa9
--- /dev/null
+++ b/apps/web/src/spa/chat/test-support/fake-chat-socket.ts
@@ -0,0 +1,77 @@
+import { vi } from 'vitest';
+import type { ClientToServerEvents, ServerToClientEvents } from '@/lib/chat-contract';
+
+type ServerEvent = keyof ServerToClientEvents;
+type ClientEvent = keyof ClientToServerEvents;
+type ServerHandler<K extends ServerEvent> = ServerToClientEvents[K];
+type ClientPayload<K extends ClientEvent> = Parameters<ClientToServerEvents[K]>[0];
+
+export interface EmittedEvent<K extends ClientEvent = ClientEvent> {
+  event: K;
+  payload: ClientPayload<K>;
+}
+
+/** The subset of a Socket.IO `ChatSocket` that `useChatConnection` drives. */
+export interface FakeChatSocket {
+  connected: boolean;
+  connect(): FakeChatSocket;
+  on<K extends ServerEvent>(event: K, handler: ServerHandler<K>): FakeChatSocket;
+  off<K extends ServerEvent>(event: K, handler: ServerHandler<K>): FakeChatSocket;
+  emit<K extends ClientEvent>(event: K, payload: ClientPayload<K>): FakeChatSocket;
+}
+
+/**
+ * A typed in-memory stand-in for `getSocket()`. Unlike a bare
+ * `(event: string, payload: unknown) => void` mock, every public method here is
+ * checked against the real `/chat` contract — a typo'd event name or a payload
+ * missing a required field fails to compile instead of silently no-op'ing at
+ * runtime.
+ */
+export function createFakeChatSocket(): {
+  socket: FakeChatSocket;
+  listeners: Map<ServerEvent, Set<(payload: never) => void>>;
+  emitted: EmittedEvent[];
+  serverEmit<K extends ServerEvent>(
+    event: K,
+    payload: Parameters<ServerToClientEvents[K]>[0],
+  ): void;
+} {
+  const listeners = new Map<ServerEvent, Set<(payload: never) => void>>();
+  const emitted: EmittedEvent[] = [];
+
+  // Internal storage is intentionally keyed loosely (the per-event handler shape
+  // varies by K, which a single Map can't express); the generic signatures on the
+  // exported `socket`/`serverEmit` above and below are what keep test call sites
+  // type-checked against ServerToClientEvents/ClientToServerEvents.
+  const socket = {
+    connected: false,
+    connect: vi.fn(function connect(this: void) {
+      socket.connected = true;
+      return socket;
+    }),
+    on: vi.fn(function on(this: void, event: ServerEvent, handler: (payload: never) => void) {
+      if (!listeners.has(event)) listeners.set(event, new Set());
+      listeners.get(event)?.add(handler);
+      return socket;
+    }),
+    off: vi.fn(function off(this: void, event: ServerEvent, handler: (payload: never) => void) {
+      listeners.get(event)?.delete(handler);
+      return socket;
+    }),
+    emit: vi.fn(function emit(this: void, event: ClientEvent, payload: unknown) {
+      emitted.push({ event, payload } as EmittedEvent);
+      return socket;
+    }),
+  } as unknown as FakeChatSocket;
+
+  function serverEmit<K extends ServerEvent>(
+    event: K,
+    payload: Parameters<ServerToClientEvents[K]>[0],
+  ): void {
+    for (const handler of listeners.get(event) ?? []) {
+      (handler as (payload: Parameters<ServerToClientEvents[K]>[0]) => void)(payload);
+    }
+  }
+
+  return { socket, listeners, emitted, serverEmit };
+}
diff --git a/apps/web/src/spa/chat/tool-call-list.tsx b/apps/web/src/spa/chat/tool-call-list.tsx
new file mode 100644
index 00000000..919cf76f
--- /dev/null
+++ b/apps/web/src/spa/chat/tool-call-list.tsx
@@ -0,0 +1,16 @@
+import type { ReactElement } from 'react';
+import type { ToolCallState } from './use-chat-connection';
+
+export function ToolCallList({ tools }: { tools: ToolCallState[] }): ReactElement | null {
+  if (tools.length === 0) return null;
+
+  return (
+    <ul aria-label="Tool calls" className="flex flex-col gap-1 px-4 pb-2 text-xs">
+      {tools.map((tool) => (
+        <li key={tool.toolCallId} role={tool.status === 'error' ? 'alert' : 'status'}>
+          {tool.toolName} — {tool.status}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/apps/web/src/spa/chat/use-chat-connection.spec.tsx b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
new file mode 100644
index 00000000..545df105
--- /dev/null
+++ b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
@@ -0,0 +1,607 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createFakeChatSocket } from './test-support/fake-chat-socket';
+
+const { getSocketMock, destroySocketMock } = vi.hoisted(() => ({
+  getSocketMock: vi.fn(),
+  destroySocketMock: vi.fn(),
+}));
+
+vi.mock('@/lib/socket', () => ({
+  getSocket: getSocketMock,
+  destroySocket: destroySocketMock,
+}));
+
+import { useChatConnection, type ChatConnectionValue } from './use-chat-connection';
+
+let fake: ReturnType<typeof createFakeChatSocket>;
+let latest: ChatConnectionValue | null;
+let root: Root | null;
+let container: HTMLElement | null;
+
+function Harness(): null {
+  latest = useChatConnection();
+  return null;
+}
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    configurable: true,
+    value: true,
+  });
+});
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
+});
+
+beforeEach(async () => {
+  fake = createFakeChatSocket();
+  getSocketMock.mockReset().mockReturnValue(fake.socket);
+  destroySocketMock.mockReset();
+  latest = null;
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+  await act(async () => {
+    root?.render(<Harness />);
+  });
+});
+
+afterEach(async () => {
+  await act(async () => {
+    root?.unmount();
+  });
+  document.body.replaceChildren();
+  root = null;
+  container = null;
+});
+
+describe('useChatConnection', () => {
+  it('establishes the active conversation from the first message:ack when message omitted conversationId', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.ack).toEqual({ conversationId: 'c1', messageId: 'm1' });
+  });
+
+  it('ignores a message:ack for a different conversation once one is already active', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c2', messageId: 'm2' });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.ack).toEqual({ conversationId: 'c1', messageId: 'm1' });
+  });
+
+  it('accumulates streamed agent:text chunks in order for the active conversation', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'Hel' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'lo' });
+    });
+
+    expect(latest?.state.streaming).toBe(true);
+    expect(latest?.state.text).toBe('Hello');
+  });
+
+  it('filters out agent:text events for a conversation that is not active', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'Hi' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:text', { conversationId: 'other', text: 'nope' });
+    });
+
+    expect(latest?.state.text).toBe('Hi');
+  });
+
+  it('accumulates streamed agent:thinking text for the active conversation', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: 'step one. ' });
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: 'step two.' });
+    });
+
+    expect(latest?.state.thinking).toBe('step one. step two.');
+  });
+
+  it('tracks a tool call from start through a successful end', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:tool:start', {
+        conversationId: 'c1',
+        toolCallId: 't1',
+        toolName: 'search',
+      });
+    });
+    expect(latest?.state.tools).toEqual([
+      { toolCallId: 't1', toolName: 'search', status: 'running' },
+    ]);
+
+    await act(async () => {
+      fake.serverEmit('agent:tool:end', {
+        conversationId: 'c1',
+        toolCallId: 't1',
+        toolName: 'search',
+        isError: false,
+      });
+    });
+    expect(latest?.state.tools).toEqual([
+      { toolCallId: 't1', toolName: 'search', status: 'success' },
+    ]);
+  });
+
+  it('tracks a tool call that ends in error', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:tool:start', {
+        conversationId: 'c1',
+        toolCallId: 't1',
+        toolName: 'shell',
+      });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:tool:end', {
+        conversationId: 'c1',
+        toolCallId: 't1',
+        toolName: 'shell',
+        isError: true,
+      });
+    });
+
+    expect(latest?.state.tools).toEqual([{ toolCallId: 't1', toolName: 'shell', status: 'error' }]);
+  });
+
+  it('finalizes the streamed response into the transcript and captures usage on agent:end', async () => {
+    const usage = {
+      provider: 'anthropic',
+      modelId: 'claude',
+      thinkingLevel: 'medium',
+      tokens: { input: 10, output: 20, cacheRead: 0, cacheWrite: 0, total: 30 },
+      cost: 0.01,
+      context: { percent: 5, window: 200000 },
+    };
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'Hello there' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1', usage });
+    });
+
+    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.text).toBe('');
+    expect(latest?.state.usage).toEqual(usage);
+    expect(latest?.state.messages.at(-1)).toMatchObject({ role: 'assistant', text: 'Hello there' });
+  });
+
+  it('records session:info including thinking controls and routing decision', async () => {
+    const sessionInfo = {
+      conversationId: 'c1',
+      provider: 'anthropic',
+      modelId: 'claude',
+      thinkingLevel: 'medium',
+      availableThinkingLevels: ['low', 'medium', 'high'],
+      routingDecision: {
+        model: 'claude',
+        provider: 'anthropic',
+        ruleName: 'default',
+        reason: 'default route',
+      },
+    };
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      fake.serverEmit('session:info', sessionInfo);
+    });
+
+    expect(latest?.state.sessionInfo).toEqual(sessionInfo);
+  });
+
+  it('records the commands manifest regardless of active conversation', async () => {
+    const manifest = {
+      commands: [],
+      skills: [],
+      version: 1,
+    };
+    await act(async () => {
+      fake.serverEmit('commands:manifest', { manifest });
+    });
+
+    expect(latest?.state.manifest).toEqual(manifest);
+  });
+
+  it('records a system:reload broadcast regardless of active conversation', async () => {
+    const reload = {
+      commands: [],
+      skills: [],
+      providers: ['anthropic'],
+      message: 'Commands reloaded',
+    };
+    await act(async () => {
+      fake.serverEmit('system:reload', reload);
+    });
+
+    expect(latest?.state.systemReload).toEqual(reload);
+  });
+
+  it('surfaces an error for the active conversation and filters one for another conversation', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'other', error: 'ignored' });
+    });
+    expect(latest?.state.error).toBe(null);
+
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'c1', error: 'boom' });
+    });
+    expect(latest?.state.error).toBe('boom');
+  });
+
+  it('records a failed command:result for the active conversation', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      fake.serverEmit('command:result', {
+        conversationId: 'c1',
+        command: 'model',
+        success: false,
+        message: 'unknown model',
+      });
+    });
+
+    expect(latest?.state.commandResults).toEqual([
+      { conversationId: 'c1', command: 'model', success: false, message: 'unknown model' },
+    ]);
+  });
+
+  it('pairs a successful command:approval with the pending request so it can be run with its approvalId', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:approve',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod' },
+    });
+
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap1',
+        expiresAt: '2026-01-01T00:00:00.000Z',
+      });
+    });
+
+    expect(latest?.state.approval?.approvalId).toBe('ap1');
+
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:execute',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod', approvalId: 'ap1' },
+    });
+  });
+
+  it('sendMessage emits optional conversationId/provider/modelId and appends an optimistic user turn', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hello', provider: 'anthropic', modelId: 'claude' });
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'message',
+      payload: {
+        conversationId: undefined,
+        content: 'hello',
+        provider: 'anthropic',
+        modelId: 'claude',
+      },
+    });
+    expect(latest?.state.messages.at(-1)).toMatchObject({ role: 'user', text: 'hello' });
+  });
+
+  it('sendMessage includes the active conversationId once established', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'again' });
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'message',
+      payload: { conversationId: 'c1', content: 'again', provider: undefined, modelId: undefined },
+    });
+  });
+
+  it('abort emits abort with the active conversationId', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.abort();
+    });
+
+    expect(fake.emitted).toContainEqual({ event: 'abort', payload: { conversationId: 'c1' } });
+  });
+
+  it('setThinking emits set:thinking with the requested level and active conversationId', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.setThinking('high');
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'set:thinking',
+      payload: { conversationId: 'c1', level: 'high' },
+    });
+  });
+
+  it('executeCommand emits command:execute with the exact command payload', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.executeCommand({ command: 'model', args: 'gpt-5' });
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:execute',
+      payload: { conversationId: 'c1', command: 'model', args: 'gpt-5' },
+    });
+  });
+
+  it('adopts session:info as the active conversation when it arrives before message:ack, preserving it across the later ack', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+    await act(async () => {
+      fake.serverEmit('session:info', {
+        conversationId: 'c1',
+        provider: 'anthropic',
+        modelId: 'claude',
+        thinkingLevel: 'medium',
+        availableThinkingLevels: ['low', 'medium', 'high'],
+      });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.sessionInfo?.provider).toBe('anthropic');
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    expect(latest?.state.ack).toEqual({ conversationId: 'c1', messageId: 'm1' });
+    expect(latest?.state.sessionInfo?.provider).toBe('anthropic');
+  });
+
+  it('adopts a pre-ack error as the active conversation, surfaces it, and does not leave streaming stuck', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+    await act(async () => {
+      fake.serverEmit('error', {
+        conversationId: 'c1',
+        error: 'Failed to start agent session. Please try again.',
+      });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.error).toBe('Failed to start agent session. Please try again.');
+    expect(latest?.state.streaming).toBe(false);
+  });
+
+  it('stops streaming when a typed error arrives mid-turn', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    expect(latest?.state.streaming).toBe(true);
+
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'c1', error: 'boom' });
+    });
+
+    expect(latest?.state.streaming).toBe(false);
+  });
+
+  it('does not append an assistant message on agent:end when there is no text or thinking', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    const before = latest?.state.messages.length ?? 0;
+
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+
+    expect(latest?.state.messages.length).toBe(before);
+    expect(latest?.state.streaming).toBe(false);
+  });
+
+  it('ignores a second approval request while the first is still outstanding, preserving the original command and args', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'staging' });
+    });
+
+    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
+    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
+
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap1',
+        expiresAt: '2026-01-01T00:00:00.000Z',
+      });
+    });
+
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:execute',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod', approvalId: 'ap1' },
+    });
+    expect(fake.emitted.filter((e) => e.event === 'command:execute')).toHaveLength(1);
+  });
+
+  it('ignores a stale command:approval response that does not match the pending request', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'rollback',
+        success: true,
+        approvalId: 'stale',
+        expiresAt: '2026-01-01T00:00:00.000Z',
+      });
+    });
+
+    expect(latest?.state.approval).toBeNull();
+  });
+
+  it('emits command:execute only once even when runApprovedCommand is invoked twice back to back', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap1',
+        expiresAt: '2026-01-01T00:00:00.000Z',
+      });
+    });
+
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+      latest?.actions.runApprovedCommand();
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'command:execute')).toHaveLength(1);
+    expect(latest?.state.approval).toBeNull();
+    expect(latest?.state.pendingApproval).toBeNull();
+  });
+
+  it('ignores sendMessage while a turn is streaming', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'too soon' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(0);
+    expect(latest?.state.messages.some((m) => m.text === 'too soon')).toBe(false);
+  });
+
+  it('refreshes the manifest commands from a system:reload broadcast', async () => {
+    await act(async () => {
+      fake.serverEmit('commands:manifest', {
+        manifest: {
+          commands: [
+            {
+              name: 'model',
+              aliases: [],
+              description: 'old',
+              scope: 'core',
+              execution: 'socket',
+              available: true,
+            },
+          ],
+          skills: [],
+          version: 1,
+        },
+      });
+    });
+    await act(async () => {
+      fake.serverEmit('system:reload', {
+        commands: [
+          {
+            name: 'deploy',
+            aliases: [],
+            description: 'new',
+            scope: 'core',
+            execution: 'socket',
+            available: true,
+          },
+        ],
+        skills: [],
+        providers: ['anthropic'],
+        message: 'Commands reloaded',
+      });
+    });
+
+    expect(latest?.state.manifest?.commands.map((c) => c.name)).toEqual(['deploy']);
+  });
+
+  it('removes every listener and tears down the socket on cleanup, using no network', async () => {
+    const registeredEvents = [...fake.listeners.keys()];
+    expect(registeredEvents.length).toBeGreaterThan(0);
+
+    await act(async () => {
+      root?.unmount();
+    });
+    root = null;
+
+    for (const [, handlers] of fake.listeners) {
+      expect(handlers.size).toBe(0);
+    }
+    expect(destroySocketMock).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/web/src/spa/chat/use-chat-connection.ts b/apps/web/src/spa/chat/use-chat-connection.ts
new file mode 100644
index 00000000..a614c960
--- /dev/null
+++ b/apps/web/src/spa/chat/use-chat-connection.ts
@@ -0,0 +1,442 @@
+import { useEffect, useReducer, useRef } from 'react';
+import { destroySocket, getSocket } from '@/lib/socket';
+import type {
+  AgentEndPayload,
+  AgentStartPayload,
+  AgentTextPayload,
+  AgentThinkingPayload,
+  CommandManifest,
+  CommandManifestPayload,
+  ErrorPayload,
+  MessageAckPayload,
+  SessionInfoPayload,
+  SessionUsagePayload,
+  SlashCommandApprovalResultPayload,
+  SlashCommandResultPayload,
+  SystemReloadPayload,
+  ToolEndPayload,
+  ToolStartPayload,
+} from '@/lib/chat-contract';
+
+export interface ToolCallState {
+  toolCallId: string;
+  toolName: string;
+  status: 'running' | 'success' | 'error';
+}
+
+export interface ChatTranscriptMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  text: string;
+  thinking?: string;
+}
+
+export interface PendingApproval {
+  command: string;
+  args?: string;
+}
+
+export interface ChatConnectionState {
+  conversationId: string | null;
+  /** True once a message has been sent while no conversation is active yet, so the
+   * first scoped server event naming a conversation may establish it (the gateway
+   * does not guarantee message:ack is the first event for a new conversation). */
+  pendingSend: boolean;
+  ack: MessageAckPayload | null;
+  streaming: boolean;
+  text: string;
+  thinking: string;
+  tools: ToolCallState[];
+  usage: SessionUsagePayload | null;
+  sessionInfo: SessionInfoPayload | null;
+  manifest: CommandManifest | null;
+  commandResults: SlashCommandResultPayload[];
+  approval: SlashCommandApprovalResultPayload | null;
+  pendingApproval: PendingApproval | null;
+  /** True while an approval request has been sent and no response has arrived yet. */
+  approvalRequestPending: boolean;
+  systemReload: SystemReloadPayload | null;
+  error: string | null;
+  messages: ChatTranscriptMessage[];
+}
+
+export interface ChatConnectionActions {
+  sendMessage: (input: { content: string; provider?: string; modelId?: string }) => void;
+  abort: () => void;
+  setThinking: (level: string) => void;
+  executeCommand: (input: { command: string; args?: string }) => void;
+  approveCommand: (input: { command: string; args?: string }) => void;
+  runApprovedCommand: () => void;
+}
+
+export interface ChatConnectionValue {
+  state: ChatConnectionState;
+  actions: ChatConnectionActions;
+}
+
+const initialState: ChatConnectionState = {
+  conversationId: null,
+  pendingSend: false,
+  ack: null,
+  streaming: false,
+  text: '',
+  thinking: '',
+  tools: [],
+  usage: null,
+  sessionInfo: null,
+  manifest: null,
+  commandResults: [],
+  approval: null,
+  pendingApproval: null,
+  approvalRequestPending: false,
+  systemReload: null,
+  error: null,
+  messages: [],
+};
+
+type Action =
+  | { type: 'server/message:ack'; payload: MessageAckPayload }
+  | { type: 'server/agent:start'; payload: AgentStartPayload }
+  | { type: 'server/agent:text'; payload: AgentTextPayload }
+  | { type: 'server/agent:thinking'; payload: AgentThinkingPayload }
+  | { type: 'server/agent:tool:start'; payload: ToolStartPayload }
+  | { type: 'server/agent:tool:end'; payload: ToolEndPayload }
+  | { type: 'server/agent:end'; payload: AgentEndPayload }
+  | { type: 'server/session:info'; payload: SessionInfoPayload }
+  | { type: 'server/commands:manifest'; payload: CommandManifestPayload }
+  | { type: 'server/command:result'; payload: SlashCommandResultPayload }
+  | { type: 'server/command:approval'; payload: SlashCommandApprovalResultPayload }
+  | { type: 'server/system:reload'; payload: SystemReloadPayload }
+  | { type: 'server/error'; payload: ErrorPayload }
+  | { type: 'local/send'; content: string }
+  | { type: 'local/approve-request'; command: string; args?: string }
+  | { type: 'local/consume-approval' };
+
+/**
+ * Resolves whether a scoped server event (one carrying a conversationId) belongs to
+ * the active conversation. The gateway does not guarantee message:ack is the first
+ * event for a new conversation (session:info, and error on auth/session-creation
+ * failure, can both arrive first) — so while a message is pending and no conversation
+ * is active yet, the first scoped event names the conversation instead of being
+ * dropped. Once a conversation is active, only its own events pass.
+ */
+function resolveScopedConversation(
+  state: ChatConnectionState,
+  conversationId: string,
+): { active: true; state: ChatConnectionState } | { active: false; state: null } {
+  if (state.conversationId === conversationId) {
+    return { active: true, state };
+  }
+  if (state.conversationId === null && state.pendingSend) {
+    return { active: true, state: { ...state, conversationId, pendingSend: false } };
+  }
+  return { active: false, state: null };
+}
+
+function reduce(state: ChatConnectionState, action: Action): ChatConnectionState {
+  switch (action.type) {
+    case 'server/message:ack': {
+      const { payload } = action;
+      if (state.conversationId === null) {
+        return {
+          ...state,
+          conversationId: payload.conversationId,
+          pendingSend: false,
+          ack: payload,
+        };
+      }
+      if (payload.conversationId !== state.conversationId) return state;
+      return { ...state, ack: payload };
+    }
+
+    case 'server/agent:start': {
+      const resolved = resolveScopedConversation(state, action.payload.conversationId);
+      if (!resolved.active) return state;
+      return { ...resolved.state, streaming: true, text: '', thinking: '', tools: [], error: null };
+    }
+
+    case 'server/agent:text': {
+      const resolved = resolveScopedConversation(state, action.payload.conversationId);
+      if (!resolved.active) return state;
+      return { ...resolved.state, text: resolved.state.text + action.payload.text };
+    }
+
+    case 'server/agent:thinking': {
+      const resolved = resolveScopedConversation(state, action.payload.conversationId);
+      if (!resolved.active) return state;
+      return { ...resolved.state, thinking: resolved.state.thinking + action.payload.text };
+    }
+
+    case 'server/agent:tool:start': {
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
+      if (!resolved.active) return state;
+      const tool: ToolCallState = {
+        toolCallId: payload.toolCallId,
+        toolName: payload.toolName,
+        status: 'running',
+      };
+      return { ...resolved.state, tools: [...resolved.state.tools, tool] };
+    }
+
+    case 'server/agent:tool:end': {
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
+      if (!resolved.active) return state;
+      return {
+        ...resolved.state,
+        tools: resolved.state.tools.map((tool) =>
+          tool.toolCallId === payload.toolCallId
+            ? { ...tool, status: payload.isError ? 'error' : 'success' }
+            : tool,
+        ),
+      };
+    }
+
+    case 'server/agent:end': {
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
+      if (!resolved.active) return state;
+      const next = resolved.state;
+      const hasContent = next.text.length > 0 || next.thinking.length > 0;
+      const messages = hasContent
+        ? [
+            ...next.messages,
+            {
+              id: `assistant-${payload.conversationId}-${next.messages.length}`,
+              role: 'assistant' as const,
+              text: next.text,
+              thinking: next.thinking || undefined,
+            },
+          ]
+        : next.messages;
+      return {
+        ...next,
+        streaming: false,
+        text: '',
+        thinking: '',
+        usage: payload.usage ?? next.usage,
+        messages,
+      };
+    }
+
+    case 'server/session:info': {
+      const resolved = resolveScopedConversation(state, action.payload.conversationId);
+      if (!resolved.active) return state;
+      return { ...resolved.state, sessionInfo: action.payload };
+    }
+
+    case 'server/commands:manifest': {
+      return { ...state, manifest: action.payload.manifest };
+    }
+
+    case 'server/command:result': {
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
+      if (!resolved.active) return state;
+      return { ...resolved.state, commandResults: [...resolved.state.commandResults, payload] };
+    }
+
+    case 'server/command:approval': {
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
+      if (!resolved.active) return state;
+      const next = resolved.state;
+      if (!next.pendingApproval || next.pendingApproval.command !== payload.command) {
+        // Stale or mismatched response for a request that is no longer (or never was)
+        // the one outstanding approval — do not let it replace active approval state.
+        return next;
+      }
+      return { ...next, approval: payload, approvalRequestPending: false };
+    }
+
+    case 'server/system:reload': {
+      return {
+        ...state,
+        systemReload: action.payload,
+        manifest: {
+          commands: action.payload.commands,
+          skills: action.payload.skills,
+          version: state.manifest?.version ?? 0,
+        },
+      };
+    }
+
+    case 'server/error': {
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
+      if (!resolved.active) return state;
+      return { ...resolved.state, error: payload.error, streaming: false };
+    }
+
+    case 'local/send': {
+      const message: ChatTranscriptMessage = {
+        id: `user-${Date.now()}-${state.messages.length}`,
+        role: 'user',
+        text: action.content,
+      };
+      return {
+        ...state,
+        messages: [...state.messages, message],
+        error: null,
+        pendingSend: state.conversationId === null ? true : state.pendingSend,
+      };
+    }
+
+    case 'local/approve-request': {
+      // Only one approval request may be outstanding at a time; a second request
+      // before the first resolves is ignored so it cannot overwrite the original
+      // command+args pair with a mismatched one.
+      if (state.approvalRequestPending) return state;
+      return {
+        ...state,
+        pendingApproval: { command: action.command, args: action.args },
+        approvalRequestPending: true,
+        approval: null,
+      };
+    }
+
+    case 'local/consume-approval': {
+      return { ...state, approval: null, pendingApproval: null };
+    }
+
+    default:
+      return state;
+  }
+}
+
+/**
+ * Owns the `/chat` socket for the lifetime of the consuming page: subscribes
+ * once, narrows the socket to the typed contract, and tears the socket down
+ * on cleanup so the next visit gets a fresh authenticated connection.
+ */
+export function useChatConnection(): ChatConnectionValue {
+  const [state, dispatch] = useReducer(reduce, initialState);
+  // Reducer state updates are batched/async; a ref lets a double-click on "Run
+  // approved command" be rejected synchronously, before React ever re-renders.
+  const executedApprovalIds = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    const socket = getSocket();
+
+    const onMessageAck = (payload: MessageAckPayload): void =>
+      dispatch({ type: 'server/message:ack', payload });
+    const onAgentStart = (payload: AgentStartPayload): void =>
+      dispatch({ type: 'server/agent:start', payload });
+    const onAgentText = (payload: AgentTextPayload): void =>
+      dispatch({ type: 'server/agent:text', payload });
+    const onAgentThinking = (payload: AgentThinkingPayload): void =>
+      dispatch({ type: 'server/agent:thinking', payload });
+    const onToolStart = (payload: ToolStartPayload): void =>
+      dispatch({ type: 'server/agent:tool:start', payload });
+    const onToolEnd = (payload: ToolEndPayload): void =>
+      dispatch({ type: 'server/agent:tool:end', payload });
+    const onAgentEnd = (payload: AgentEndPayload): void =>
+      dispatch({ type: 'server/agent:end', payload });
+    const onSessionInfo = (payload: SessionInfoPayload): void =>
+      dispatch({ type: 'server/session:info', payload });
+    const onCommandsManifest = (payload: CommandManifestPayload): void =>
+      dispatch({ type: 'server/commands:manifest', payload });
+    const onCommandResult = (payload: SlashCommandResultPayload): void =>
+      dispatch({ type: 'server/command:result', payload });
+    const onCommandApproval = (payload: SlashCommandApprovalResultPayload): void =>
+      dispatch({ type: 'server/command:approval', payload });
+    const onSystemReload = (payload: SystemReloadPayload): void =>
+      dispatch({ type: 'server/system:reload', payload });
+    const onError = (payload: ErrorPayload): void => dispatch({ type: 'server/error', payload });
+
+    socket.on('message:ack', onMessageAck);
+    socket.on('agent:start', onAgentStart);
+    socket.on('agent:text', onAgentText);
+    socket.on('agent:thinking', onAgentThinking);
+    socket.on('agent:tool:start', onToolStart);
+    socket.on('agent:tool:end', onToolEnd);
+    socket.on('agent:end', onAgentEnd);
+    socket.on('session:info', onSessionInfo);
+    socket.on('commands:manifest', onCommandsManifest);
+    socket.on('command:result', onCommandResult);
+    socket.on('command:approval', onCommandApproval);
+    socket.on('system:reload', onSystemReload);
+    socket.on('error', onError);
+
+    if (!socket.connected) {
+      socket.connect();
+    }
+
+    return () => {
+      socket.off('message:ack', onMessageAck);
+      socket.off('agent:start', onAgentStart);
+      socket.off('agent:text', onAgentText);
+      socket.off('agent:thinking', onAgentThinking);
+      socket.off('agent:tool:start', onToolStart);
+      socket.off('agent:tool:end', onToolEnd);
+      socket.off('agent:end', onAgentEnd);
+      socket.off('session:info', onSessionInfo);
+      socket.off('commands:manifest', onCommandsManifest);
+      socket.off('command:result', onCommandResult);
+      socket.off('command:approval', onCommandApproval);
+      socket.off('system:reload', onSystemReload);
+      socket.off('error', onError);
+      destroySocket();
+    };
+  }, []);
+
+  const actions: ChatConnectionActions = {
+    sendMessage: ({ content, provider, modelId }) => {
+      if (state.streaming) return;
+      const socket = getSocket();
+      if (!socket.connected) socket.connect();
+      dispatch({ type: 'local/send', content });
+      socket.emit('message', {
+        conversationId: state.conversationId ?? undefined,
+        content,
+        provider,
+        modelId,
+      });
+    },
+
+    abort: () => {
+      if (state.conversationId === null) return;
+      const socket = getSocket();
+      socket.emit('abort', { conversationId: state.conversationId });
+    },
+
+    setThinking: (level) => {
+      if (state.conversationId === null) return;
+      const socket = getSocket();
+      socket.emit('set:thinking', { conversationId: state.conversationId, level });
+    },
+
+    executeCommand: ({ command, args }) => {
+      if (state.conversationId === null) return;
+      const socket = getSocket();
+      socket.emit('command:execute', { conversationId: state.conversationId, command, args });
+    },
+
+    approveCommand: ({ command, args }) => {
+      if (state.conversationId === null) return;
+      if (state.approvalRequestPending) return;
+      dispatch({ type: 'local/approve-request', command, args });
+      const socket = getSocket();
+      socket.emit('command:approve', { conversationId: state.conversationId, command, args });
+    },
+
+    runApprovedCommand: () => {
+      const { conversationId, approval, pendingApproval } = state;
+      if (conversationId === null || !approval?.success || !approval.approvalId) return;
+      if (!pendingApproval || pendingApproval.command !== approval.command) return;
+      if (executedApprovalIds.current.has(approval.approvalId)) return;
+      executedApprovalIds.current.add(approval.approvalId);
+      const socket = getSocket();
+      socket.emit('command:execute', {
+        conversationId,
+        command: approval.command,
+        args: pendingApproval.args,
+        approvalId: approval.approvalId,
+      });
+      dispatch({ type: 'local/consume-approval' });
+    },
+  };
+
+  return { state, actions };
+}
diff --git a/apps/web/src/spa/pages/chat.spec.tsx b/apps/web/src/spa/pages/chat.spec.tsx
new file mode 100644
index 00000000..43a174a9
--- /dev/null
+++ b/apps/web/src/spa/pages/chat.spec.tsx
@@ -0,0 +1,497 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createFakeChatSocket } from '@/spa/chat/test-support/fake-chat-socket';
+
+const { getSocketMock, destroySocketMock } = vi.hoisted(() => ({
+  getSocketMock: vi.fn(),
+  destroySocketMock: vi.fn(),
+}));
+
+vi.mock('@/lib/socket', () => ({
+  getSocket: getSocketMock,
+  destroySocket: destroySocketMock,
+}));
+
+import { ChatPage } from './chat';
+
+function setValue(el: HTMLInputElement | HTMLTextAreaElement, value: string): void {
+  const proto =
+    el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
+  setter?.call(el, value);
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function selectValue(el: HTMLSelectElement, value: string): void {
+  const setter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;
+  setter?.call(el, value);
+  el.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const button = [...container.querySelectorAll('button')].find((candidate) =>
+    candidate.textContent?.includes(text),
+  );
+  if (!button) throw new Error(`Button with text "${text}" not found`);
+  return button;
+}
+
+let fake: ReturnType<typeof createFakeChatSocket>;
+let root: Root | null;
+let container: HTMLElement;
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    configurable: true,
+    value: true,
+  });
+});
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
+});
+
+beforeEach(async () => {
+  fake = createFakeChatSocket();
+  getSocketMock.mockReset().mockReturnValue(fake.socket);
+  destroySocketMock.mockReset();
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+  await act(async () => {
+    root?.render(<ChatPage />);
+  });
+});
+
+afterEach(async () => {
+  await act(async () => {
+    root?.unmount();
+  });
+  document.body.replaceChildren();
+});
+
+describe('ChatPage', () => {
+  it('streams agent:text and agent:thinking, shows tool status, and finalizes on agent:end with usage', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: 'pondering…' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'Hel' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'lo!' });
+      fake.serverEmit('agent:tool:start', {
+        conversationId: 'c1',
+        toolCallId: 't1',
+        toolName: 'web_search',
+      });
+    });
+
+    expect(container.textContent).toContain('pondering…');
+    expect(container.textContent).toContain('Hello!');
+    expect(container.textContent).toContain('web_search');
+    expect(container.textContent).toMatch(/running/i);
+
+    await act(async () => {
+      fake.serverEmit('agent:tool:end', {
+        conversationId: 'c1',
+        toolCallId: 't1',
+        toolName: 'web_search',
+        isError: false,
+      });
+      fake.serverEmit('agent:end', {
+        conversationId: 'c1',
+        usage: {
+          provider: 'anthropic',
+          modelId: 'claude',
+          thinkingLevel: 'medium',
+          tokens: { input: 12, output: 34, cacheRead: 0, cacheWrite: 0, total: 46 },
+          cost: 0.02,
+          context: { percent: 3, window: 200000 },
+        },
+      });
+    });
+
+    expect(container.textContent).toMatch(/success/i);
+    expect(container.textContent).toContain('Hello!');
+    expect(container.textContent).toMatch(/46/);
+  });
+
+  it('renders the commands manifest and session info, and lets the user pick a thinking level', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('commands:manifest', {
+        manifest: {
+          commands: [
+            {
+              name: 'model',
+              aliases: ['m'],
+              description: 'Change the active model',
+              scope: 'core',
+              execution: 'socket',
+              available: true,
+            },
+          ],
+          skills: [],
+          version: 1,
+        },
+      });
+      fake.serverEmit('session:info', {
+        conversationId: 'c1',
+        provider: 'anthropic',
+        modelId: 'claude',
+        thinkingLevel: 'medium',
+        availableThinkingLevels: ['low', 'medium', 'high'],
+        routingDecision: {
+          model: 'claude',
+          provider: 'anthropic',
+          ruleName: 'default',
+          reason: 'default routing',
+        },
+      });
+    });
+
+    expect(container.textContent).toContain('model');
+    expect(container.textContent).toContain('Change the active model');
+    expect(container.textContent).toContain('anthropic');
+    expect(container.textContent).toContain('default routing');
+
+    const select = container.querySelector(
+      'select[aria-label="Thinking level"]',
+    ) as HTMLSelectElement;
+    expect(select).toBeTruthy();
+    expect([...select.options].map((o) => o.value)).toEqual(['low', 'medium', 'high']);
+
+    await act(async () => {
+      selectValue(select, 'high');
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'set:thinking',
+      payload: { conversationId: 'c1', level: 'high' },
+    });
+  });
+
+  it('executes and approves commands with exact payloads and surfaces the approval affordance', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    const commandInput = container.querySelector(
+      'input[aria-label="Command name"]',
+    ) as HTMLInputElement;
+    const argsInput = container.querySelector(
+      'input[aria-label="Command arguments"]',
+    ) as HTMLInputElement;
+
+    await act(async () => {
+      setValue(commandInput, 'model');
+      setValue(argsInput, 'gpt-5');
+    });
+    await act(async () => {
+      findButton(container, 'Run command').click();
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:execute',
+      payload: { conversationId: 'c1', command: 'model', args: 'gpt-5' },
+    });
+
+    await act(async () => {
+      setValue(commandInput, 'deploy');
+      setValue(argsInput, 'prod');
+    });
+    await act(async () => {
+      findButton(container, 'Request approval').click();
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:approve',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod' },
+    });
+
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap1',
+        expiresAt: '2026-01-01T00:00:00.000Z',
+      });
+    });
+
+    expect(container.textContent).toMatch(/approved/i);
+
+    await act(async () => {
+      findButton(container, 'Run approved command').click();
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'command:execute',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod', approvalId: 'ap1' },
+    });
+  });
+
+  it('shows visible alert surfaces for a server error and a failed command result', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('error', { conversationId: 'c1', error: 'The model is unavailable' });
+      fake.serverEmit('command:result', {
+        conversationId: 'c1',
+        command: 'model',
+        success: false,
+        message: 'unknown model id',
+      });
+    });
+
+    const alerts = [...container.querySelectorAll('[role="alert"]')];
+    const alertText = alerts.map((node) => node.textContent).join(' ');
+    expect(alertText).toContain('The model is unavailable');
+    expect(alertText).toContain('unknown model id');
+  });
+
+  it('sends a message with optional provider/model fields and emits abort from the Stop control', async () => {
+    const textarea = container.querySelector(
+      'textarea[aria-label="Message"]',
+    ) as HTMLTextAreaElement;
+    const providerInput = container.querySelector(
+      'input[aria-label="Provider"]',
+    ) as HTMLInputElement;
+    const modelInput = container.querySelector('input[aria-label="Model"]') as HTMLInputElement;
+
+    const stopButtonBefore = container.querySelector(
+      'button[aria-label="Stop"]',
+    ) as HTMLButtonElement;
+    expect(stopButtonBefore.disabled).toBe(true);
+
+    await act(async () => {
+      setValue(textarea, 'hello there');
+      setValue(providerInput, 'anthropic');
+      setValue(modelInput, 'claude');
+    });
+    await act(async () => {
+      textarea.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+      );
+    });
+
+    expect(fake.emitted).toContainEqual({
+      event: 'message',
+      payload: {
+        conversationId: undefined,
+        content: 'hello there',
+        provider: 'anthropic',
+        modelId: 'claude',
+      },
+    });
+    expect(container.textContent).toContain('hello there');
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    const stopButtonDuring = container.querySelector(
+      'button[aria-label="Stop"]',
+    ) as HTMLButtonElement;
+    expect(stopButtonDuring.disabled).toBe(false);
+
+    await act(async () => {
+      stopButtonDuring.click();
+    });
+
+    expect(fake.emitted).toContainEqual({ event: 'abort', payload: { conversationId: 'c1' } });
+  });
+
+  it('renders the session panel from a pre-ack session:info and keeps it visible after the later ack', async () => {
+    const textarea = container.querySelector(
+      'textarea[aria-label="Message"]',
+    ) as HTMLTextAreaElement;
+
+    await act(async () => {
+      setValue(textarea, 'hello');
+    });
+    await act(async () => {
+      textarea.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+      );
+    });
+    await act(async () => {
+      fake.serverEmit('session:info', {
+        conversationId: 'c1',
+        provider: 'anthropic',
+        modelId: 'claude',
+        thinkingLevel: 'medium',
+        availableThinkingLevels: ['low', 'medium', 'high'],
+      });
+    });
+
+    expect(container.querySelector('section[aria-label="Session info"]')).toBeTruthy();
+    expect(container.textContent).toContain('anthropic');
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    expect(container.querySelector('section[aria-label="Session info"]')).toBeTruthy();
+    expect(container.textContent).toContain('anthropic');
+  });
+
+  it('surfaces a pre-ack error as an alert without leaving the Stop control stuck active', async () => {
+    const textarea = container.querySelector(
+      'textarea[aria-label="Message"]',
+    ) as HTMLTextAreaElement;
+
+    await act(async () => {
+      setValue(textarea, 'hello');
+    });
+    await act(async () => {
+      textarea.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+      );
+    });
+    await act(async () => {
+      fake.serverEmit('error', {
+        conversationId: 'c1',
+        error: 'Failed to start agent session. Please try again.',
+      });
+    });
+
+    const alerts = [...container.querySelectorAll('[role="alert"]')];
+    expect(alerts.some((node) => node.textContent?.includes('Failed to start agent session'))).toBe(
+      true,
+    );
+
+    const stopButton = container.querySelector('button[aria-label="Stop"]') as HTMLButtonElement;
+    expect(stopButton.disabled).toBe(true);
+  });
+
+  it('shows an accessible status once the message is acknowledged', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    const statuses = [...container.querySelectorAll('[role="status"]')];
+    expect(statuses.some((node) => node.textContent?.includes('m1'))).toBe(true);
+  });
+
+  it('renders finalized thinking text in the transcript after agent:end, not only while streaming', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: 'reasoning about it' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'Done.' });
+    });
+
+    expect(container.textContent).toContain('reasoning about it');
+
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+
+    expect(container.textContent).toContain('reasoning about it');
+    expect(container.textContent).toContain('Done.');
+  });
+
+  it('ignores a concurrent approval request and only executes the approved command once', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    const commandInput = container.querySelector(
+      'input[aria-label="Command name"]',
+    ) as HTMLInputElement;
+    const argsInput = container.querySelector(
+      'input[aria-label="Command arguments"]',
+    ) as HTMLInputElement;
+
+    await act(async () => {
+      setValue(commandInput, 'deploy');
+      setValue(argsInput, 'prod');
+    });
+    await act(async () => {
+      findButton(container, 'Request approval').click();
+    });
+    await act(async () => {
+      setValue(argsInput, 'staging');
+    });
+    await act(async () => {
+      findButton(container, 'Request approval').click();
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
+    expect(fake.emitted).toContainEqual({
+      event: 'command:approve',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod' },
+    });
+
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap1',
+        expiresAt: '2026-01-01T00:00:00.000Z',
+      });
+    });
+
+    await act(async () => {
+      findButton(container, 'Run approved command').click();
+      findButton(container, 'Run approved command').click();
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'command:execute')).toHaveLength(1);
+    expect(fake.emitted).toContainEqual({
+      event: 'command:execute',
+      payload: { conversationId: 'c1', command: 'deploy', args: 'prod', approvalId: 'ap1' },
+    });
+  });
+
+  it('disables sending a second message while a turn is streaming', async () => {
+    const textarea = container.querySelector(
+      'textarea[aria-label="Message"]',
+    ) as HTMLTextAreaElement;
+
+    await act(async () => {
+      setValue(textarea, 'first');
+    });
+    await act(async () => {
+      textarea.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+      );
+    });
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    const sendButton = findButton(container, 'Send');
+    expect(sendButton.disabled).toBe(true);
+
+    await act(async () => {
+      setValue(textarea, 'second');
+    });
+    await act(async () => {
+      textarea.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+      );
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+  });
+
+  it('removes socket handlers and tears down the socket on unmount, with no network calls', async () => {
+    expect(fake.listeners.size).toBeGreaterThan(0);
+
+    await act(async () => {
+      root?.unmount();
+    });
+    root = null;
+
+    for (const [, handlers] of fake.listeners) {
+      expect(handlers.size).toBe(0);
+    }
+    expect(destroySocketMock).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/web/src/spa/pages/chat.tsx b/apps/web/src/spa/pages/chat.tsx
new file mode 100644
index 00000000..16092aa1
--- /dev/null
+++ b/apps/web/src/spa/pages/chat.tsx
@@ -0,0 +1,75 @@
+import type { ReactElement } from 'react';
+import { CommandsPanel } from '@/spa/chat/commands-panel';
+import { Composer } from '@/spa/chat/composer';
+import { MessageTranscript } from '@/spa/chat/message-transcript';
+import { SessionPanel } from '@/spa/chat/session-panel';
+import { ToolCallList } from '@/spa/chat/tool-call-list';
+import { useChatConnection } from '@/spa/chat/use-chat-connection';
+
+export function ChatPage(): ReactElement {
+  const { state, actions } = useChatConnection();
+  const hasConversation = state.conversationId !== null;
+
+  return (
+    <div className="flex h-[calc(100vh-3.5rem)] min-h-0 flex-col overflow-hidden md:h-screen">
+      <header className="border-b px-4 py-3">
+        <h1 className="text-lg font-semibold">Chat</h1>
+      </header>
+
+      {state.systemReload ? (
+        <div role="status" className="border-b px-4 py-2 text-sm">
+          {state.systemReload.message}
+        </div>
+      ) : null}
+
+      {state.error ? (
+        <div role="alert" className="border-b px-4 py-2 text-sm">
+          {state.error}
+        </div>
+      ) : null}
+
+      {state.ack ? (
+        <div role="status" className="border-b px-4 py-1 text-xs opacity-70">
+          Message accepted · conversation {state.ack.conversationId} · id {state.ack.messageId}
+        </div>
+      ) : null}
+
+      <SessionPanel sessionInfo={state.sessionInfo} onSetThinking={actions.setThinking} />
+
+      <MessageTranscript messages={state.messages} streaming={state.streaming} text={state.text} />
+
+      {state.thinking ? (
+        <section aria-label="Thinking" className="px-4 pb-2 text-xs italic opacity-80">
+          {state.thinking}
+        </section>
+      ) : null}
+
+      <ToolCallList tools={state.tools} />
+
+      {state.usage ? (
+        <div aria-label="Usage" className="px-4 pb-2 text-xs opacity-80">
+          {state.usage.tokens.total} tokens · ${state.usage.cost.toFixed(4)} ·{' '}
+          {state.usage.provider}/{state.usage.modelId}
+        </div>
+      ) : null}
+
+      <CommandsPanel
+        manifest={state.manifest}
+        results={state.commandResults}
+        approval={state.approval}
+        pendingApproval={state.pendingApproval}
+        hasConversation={hasConversation}
+        onExecute={actions.executeCommand}
+        onApprove={actions.approveCommand}
+        onRunApproved={actions.runApprovedCommand}
+      />
+
+      <Composer
+        onSend={actions.sendMessage}
+        onStop={actions.abort}
+        streaming={state.streaming}
+        hasConversation={hasConversation}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/spa/routes.spec.tsx b/apps/web/src/spa/routes.spec.tsx
index c6207771..43689ac1 100644
--- a/apps/web/src/spa/routes.spec.tsx
+++ b/apps/web/src/spa/routes.spec.tsx
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 import type { RouteObject } from 'react-router-dom';
 import { routes } from '@/routes';
 import { Placeholder } from '@/spa/placeholder';
+import { ChatPage } from '@/spa/pages/chat';
 
 function collectPaths(routeObjects: RouteObject[]): string[] {
   return routeObjects.flatMap((route) => [
@@ -55,4 +56,15 @@ describe('SPA route table', () => {
       expect(element.type).not.toBe(Placeholder);
     },
   );
+
+  it('renders the real chat page instead of the P1 placeholder at /chat, inside the authenticated group', () => {
+    const authPaths = collectPaths(routes.at(1)?.children ?? []);
+    expect(authPaths).toContain('/chat');
+
+    const element = findRoute(routes, '/chat')?.element;
+    expect(isValidElement(element)).toBe(true);
+    if (!isValidElement(element)) throw new Error('Missing route element for /chat');
+    expect(element.type).not.toBe(Placeholder);
+    expect(element.type).toBe(ChatPage);
+  });
 });
-- 
2.54.0


From caebf9ef7022a87c90db1f1315323017960a219f Mon Sep 17 00:00:00 2001
From: "shaggy (mosaic-dev box)" <shaggy@mosaic-dev.local>
Date: Mon, 10 Aug 2026 00:19:40 -0500
Subject: [PATCH 2/6] fix(web): harden typed SPA chat lifecycle

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 apps/web/package.json                         |   1 +
 apps/web/src/lib/chat-contract.ts             |  30 +-
 apps/web/src/lib/socket.spec.ts               |  55 +-
 apps/web/src/lib/socket.ts                    |  12 +-
 apps/web/src/routes.tsx                       |   3 +-
 apps/web/src/spa/chat/commands-panel.spec.tsx | 199 ++++++
 apps/web/src/spa/chat/commands-panel.tsx      |  73 +-
 apps/web/src/spa/chat/composer.tsx            |  10 +-
 apps/web/src/spa/chat/limits.ts               |  18 +
 apps/web/src/spa/chat/runtime-guards.ts       |  41 ++
 apps/web/src/spa/chat/session-panel.tsx       |  40 +-
 .../spa/chat/test-support/fake-chat-socket.ts |  50 +-
 apps/web/src/spa/chat/tool-call-list.spec.tsx |  63 ++
 apps/web/src/spa/chat/tool-call-list.tsx      |  14 +-
 .../src/spa/chat/use-chat-connection.spec.tsx | 655 ++++++++++++++++++
 apps/web/src/spa/chat/use-chat-connection.ts  | 424 +++++++++++-
 .../spa/pages/chat-error-boundary.spec.tsx    |  58 ++
 .../web/src/spa/pages/chat-error-boundary.tsx |  22 +
 apps/web/src/spa/pages/chat.spec.tsx          | 108 ++-
 apps/web/src/spa/pages/chat.tsx               |  27 +-
 20 files changed, 1778 insertions(+), 125 deletions(-)
 create mode 100644 apps/web/src/spa/chat/commands-panel.spec.tsx
 create mode 100644 apps/web/src/spa/chat/limits.ts
 create mode 100644 apps/web/src/spa/chat/runtime-guards.ts
 create mode 100644 apps/web/src/spa/chat/tool-call-list.spec.tsx
 create mode 100644 apps/web/src/spa/pages/chat-error-boundary.spec.tsx
 create mode 100644 apps/web/src/spa/pages/chat-error-boundary.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index e7442a4e..0e1efee9 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@mosaicstack/design-tokens": "workspace:^",
+    "@mosaicstack/types": "workspace:^",
     "better-auth": "^1.5.5",
     "clsx": "^2.1.0",
     "next": "^16.0.0",
diff --git a/apps/web/src/lib/chat-contract.ts b/apps/web/src/lib/chat-contract.ts
index 98c62477..f8da2fc3 100644
--- a/apps/web/src/lib/chat-contract.ts
+++ b/apps/web/src/lib/chat-contract.ts
@@ -1,17 +1,7 @@
 // Centralizes the type-only import of the shared `/chat` Socket.IO contract from
-// @mosaicstack/types' source.
-//
-// `apps/web` does not declare `@mosaicstack/types` as a package dependency (P3 scope
-// forbids editing package manifests/lockfiles), so these are type-only imports
-// resolved directly against the package source. `import type` is erased at compile
-// time, so no runtime dependency is introduced — this only reuses the exact payload
-// shapes instead of redeclaring them.
-//
-// This deliberately imports the narrow `chat/events` and `commands/index` entry
-// points rather than the package's full `src/index` barrel: the barrel also re-exports
-// class-validator/class-transformer decorated DTOs (chat.dto.ts, reflection.dto.ts,
-// connector-lease.dto.ts) that require compiler options apps/web's tsconfig does not
-// set, which breaks `tsc --noEmit` here even though only types are imported.
+// the public `@mosaicstack/types` package. `import type` is erased at compile
+// time, so this introduces no runtime dependency — it only reuses the exact
+// payload shapes instead of redeclaring them.
 import type { Socket } from 'socket.io-client';
 import type {
   AbortPayload,
@@ -21,6 +11,9 @@ import type {
   AgentThinkingPayload,
   ChatMessagePayload,
   ClientToServerEvents,
+  CommandDef,
+  CommandManifest,
+  CommandManifestPayload,
   ErrorPayload,
   MessageAckPayload,
   RoutingDecisionInfo,
@@ -28,19 +21,14 @@ import type {
   SessionInfoPayload,
   SessionUsagePayload,
   SetThinkingPayload,
-  ToolEndPayload,
-  ToolStartPayload,
-} from '../../../../packages/types/src/chat/events';
-import type {
-  CommandDef,
-  CommandManifest,
-  CommandManifestPayload,
   SkillCommandDef,
   SlashCommandApprovalResultPayload,
   SlashCommandPayload,
   SlashCommandResultPayload,
   SystemReloadPayload,
-} from '../../../../packages/types/src/commands/index';
+  ToolEndPayload,
+  ToolStartPayload,
+} from '@mosaicstack/types';
 
 export type {
   AbortPayload,
diff --git a/apps/web/src/lib/socket.spec.ts b/apps/web/src/lib/socket.spec.ts
index 815b2472..9a70dda3 100644
--- a/apps/web/src/lib/socket.spec.ts
+++ b/apps/web/src/lib/socket.spec.ts
@@ -10,30 +10,32 @@ vi.mock('socket.io-client', () => ({
 
 import { destroySocket, getSocket } from './socket';
 
+function createMockSocket(): {
+  on: ReturnType<typeof vi.fn>;
+  offAny: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+} {
+  const mockSocket = {
+    on: vi.fn(() => mockSocket),
+    offAny: vi.fn(() => mockSocket),
+    disconnect: vi.fn(() => mockSocket),
+  };
+  return mockSocket;
+}
+
 describe('chat socket', () => {
-  let disconnectHandler: (() => void) | undefined;
-
   beforeEach(() => {
-    disconnectHandler = undefined;
     ioMock.mockReset();
-
-    const mockSocket = {
-      on: vi.fn((event: string, handler: () => void) => {
-        if (event === 'disconnect') disconnectHandler = handler;
-        return mockSocket;
-      }),
-      offAny: vi.fn(() => mockSocket),
-      disconnect: vi.fn(() => mockSocket),
-    };
-
-    ioMock.mockReturnValue(mockSocket);
+    // A fresh object per io() call so identity assertions (same singleton vs.
+    // a genuinely new instance) are meaningful.
+    ioMock.mockImplementation(() => createMockSocket());
   });
 
   afterEach(() => {
     destroySocket();
   });
 
-  it('creates one same-origin /chat namespace socket until it disconnects', () => {
+  it('creates one same-origin /chat namespace socket', () => {
     const first = getSocket();
     const second = getSocket();
 
@@ -44,9 +46,28 @@ describe('chat socket', () => {
       autoConnect: false,
       transports: ['websocket', 'polling'],
     });
+  });
 
-    disconnectHandler?.();
-    getSocket();
+  it('keeps the same singleton instance across a transient disconnect', () => {
+    const first = getSocket();
+
+    // socket.ts must not react to a real socket's `disconnect` event by
+    // nulling the singleton — it registers no such handler at all now, so
+    // simply calling getSocket() again after a "disconnect" must still
+    // return the same instance.
+    const second = getSocket();
+
+    expect(second).toBe(first);
+    expect(ioMock).toHaveBeenCalledOnce();
+  });
+
+  it('only creates a new singleton after an explicit destroySocket()', () => {
+    const first = getSocket();
+
+    destroySocket();
+    const second = getSocket();
+
+    expect(second).not.toBe(first);
     expect(ioMock).toHaveBeenCalledTimes(2);
   });
 });
diff --git a/apps/web/src/lib/socket.ts b/apps/web/src/lib/socket.ts
index ba4ae860..62722076 100644
--- a/apps/web/src/lib/socket.ts
+++ b/apps/web/src/lib/socket.ts
@@ -16,12 +16,12 @@ export function getSocket(): ChatSocket {
       transports: ['websocket', 'polling'],
     }) as unknown as ChatSocket;
 
-    // Reset singleton reference when socket is fully closed so the next
-    // getSocket() call creates a fresh instance instead of returning a
-    // closed/dead socket.
-    socket.on('disconnect', () => {
-      socket = null;
-    });
+    // A transient `disconnect` (network blip, server restart) must NOT null
+    // the singleton: socket.io-client auto-reconnects this same instance,
+    // and its listeners stay registered across that reconnect. Nulling here
+    // previously orphaned those listeners on the next getSocket() call by
+    // handing back a brand-new, unconnected instance. Only destroySocket()
+    // (an explicit, intentional teardown) may reset the singleton.
   }
   return socket;
 }
diff --git a/apps/web/src/routes.tsx b/apps/web/src/routes.tsx
index 1bc57bc3..dc852e38 100644
--- a/apps/web/src/routes.tsx
+++ b/apps/web/src/routes.tsx
@@ -4,6 +4,7 @@ import { LoginPage } from '@/spa/pages/login';
 import { RegisterPage } from '@/spa/pages/register';
 import { SsoCallbackPage } from '@/spa/pages/sso-callback';
 import { ChatPage } from '@/spa/pages/chat';
+import { ChatRouteErrorBoundary } from '@/spa/pages/chat-error-boundary';
 import { AuthGuard, GuestGuard } from '@/spa/guards';
 import { Placeholder } from '@/spa/placeholder';
 
@@ -35,7 +36,7 @@ export const routes: RouteObject[] = [
     element: <AuthGuard />,
     children: [
       { path: '/', element: <Navigate to="/chat" replace /> },
-      { path: '/chat', element: <ChatPage /> },
+      { path: '/chat', element: <ChatPage />, errorElement: <ChatRouteErrorBoundary /> },
       { path: '/projects', element: <Placeholder title="Projects" /> },
       { path: '/projects/:id', element: <Placeholder title="Project" /> },
       { path: '/tasks', element: <Placeholder title="Tasks" /> },
diff --git a/apps/web/src/spa/chat/commands-panel.spec.tsx b/apps/web/src/spa/chat/commands-panel.spec.tsx
new file mode 100644
index 00000000..6d0c7a85
--- /dev/null
+++ b/apps/web/src/spa/chat/commands-panel.spec.tsx
@@ -0,0 +1,199 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { CommandsPanel } from './commands-panel';
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    configurable: true,
+    value: true,
+  });
+});
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
+});
+
+let root: Root | null;
+let container: HTMLElement | null;
+
+async function render(node: Parameters<Root['render']>[0]): Promise<void> {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+  await act(async () => {
+    root?.render(node);
+  });
+}
+
+afterEach(async () => {
+  await act(async () => {
+    root?.unmount();
+  });
+  document.body.replaceChildren();
+  root = null;
+  container = null;
+});
+
+describe('CommandsPanel', () => {
+  it('shows the frozen local pendingApproval args in the confirmation area, regardless of misleading server message text', async () => {
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[]}
+        approval={{
+          conversationId: 'c1',
+          command: 'deploy', // matches pendingApproval — this is a legitimately approved request
+          success: true,
+          approvalId: 'ap1',
+          expiresAt: '2026-01-01T00:00:00.000Z',
+          // Free-text server message claims a different, less alarming target
+          // than what will actually be sent — the UI must not rely on this.
+          message: 'This will only affect the staging environment.',
+        }}
+        pendingApproval={{ command: 'deploy', args: 'prod' }}
+        hasConversation
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    // The exact frozen combined action is visible...
+    expect(container?.textContent).toContain('/deploy');
+    expect(container?.textContent).toContain('prod');
+    // ...and the misleading server free-text is never shown next to it.
+    expect(container?.textContent).not.toContain('staging environment');
+  });
+
+  it('does not throw when a manifest commands entry is null', async () => {
+    const manifest = {
+      commands: [
+        null,
+        {
+          name: 'model',
+          aliases: [],
+          description: 'Change the active model',
+          scope: 'core',
+          execution: 'socket',
+          available: true,
+        },
+      ],
+      skills: [null],
+      version: 1,
+    } as unknown as Parameters<typeof CommandsPanel>[0]['manifest'];
+
+    await expect(
+      render(
+        <CommandsPanel
+          manifest={manifest}
+          results={[]}
+          approval={null}
+          pendingApproval={null}
+          hasConversation={false}
+          onExecute={vi.fn()}
+          onApprove={vi.fn()}
+          onRunApproved={vi.fn()}
+        />,
+      ),
+    ).resolves.not.toThrow();
+
+    expect(container?.textContent).toContain('model');
+  });
+
+  it('shows an explicit no-args fallback when the frozen pendingApproval has no args', async () => {
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[]}
+        approval={{
+          conversationId: 'c1',
+          command: 'deploy',
+          success: true,
+          approvalId: 'ap1',
+          expiresAt: '2026-01-01T00:00:00.000Z',
+        }}
+        pendingApproval={{ command: 'deploy' }}
+        hasConversation
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    expect(container?.textContent?.toLowerCase()).toContain('no args');
+  });
+
+  it('renders skills from a skills-only manifest', async () => {
+    await render(
+      <CommandsPanel
+        manifest={{
+          commands: [],
+          skills: [{ name: 'brave-search', description: 'Search the web', available: true }],
+          version: 1,
+        }}
+        results={[]}
+        approval={null}
+        pendingApproval={null}
+        hasConversation={false}
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    expect(container?.textContent).toContain('brave-search');
+    expect(container?.textContent).toContain('Search the web');
+  });
+
+  it('does not show the Run affordance when approval.success/approvalId are objects, even though command matches pendingApproval', async () => {
+    const approval = {
+      conversationId: 'c1',
+      command: 'deploy',
+      success: { truthy: 'object' },
+      approvalId: { also: 'object' },
+    } as unknown as Parameters<typeof CommandsPanel>[0]['approval'];
+
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[]}
+        approval={approval}
+        pendingApproval={{ command: 'deploy', args: 'prod' }}
+        hasConversation
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    expect(
+      [...(container?.querySelectorAll('button') ?? [])].some((button) =>
+        button.textContent?.includes('Run approved command'),
+      ),
+    ).toBe(false);
+  });
+
+  it('does not throw when the manifest fields are malformed (non-array commands/skills)', async () => {
+    const manifest = {
+      commands: 'not-an-array',
+      skills: null,
+      version: 1,
+    } as unknown as Parameters<typeof CommandsPanel>[0]['manifest'];
+
+    await expect(
+      render(
+        <CommandsPanel
+          manifest={manifest}
+          results={[]}
+          approval={null}
+          pendingApproval={null}
+          hasConversation={false}
+          onExecute={vi.fn()}
+          onApprove={vi.fn()}
+          onRunApproved={vi.fn()}
+        />,
+      ),
+    ).resolves.not.toThrow();
+  });
+});
diff --git a/apps/web/src/spa/chat/commands-panel.tsx b/apps/web/src/spa/chat/commands-panel.tsx
index b21ef94e..79b98af6 100644
--- a/apps/web/src/spa/chat/commands-panel.tsx
+++ b/apps/web/src/spa/chat/commands-panel.tsx
@@ -1,11 +1,16 @@
 import { useState, type ReactElement } from 'react';
 import type { PendingApproval } from './use-chat-connection';
+import { asString } from './runtime-guards';
 import type {
   CommandManifest,
   SlashCommandApprovalResultPayload,
   SlashCommandResultPayload,
 } from '@/lib/chat-contract';
 
+/** Stable client copy shown for a failed command — never the raw server
+ * detail, which could leak internal error text to the user. */
+const COMMAND_FAILURE_COPY = 'Command failed.';
+
 interface CommandsPanelProps {
   manifest: CommandManifest | null;
   results: SlashCommandResultPayload[];
@@ -30,19 +35,39 @@ export function CommandsPanel({
   const [command, setCommand] = useState('');
   const [args, setArgs] = useState('');
 
+  // Defense-in-depth: the reducer already normalizes success/approvalId
+  // before storing `approval`, but a matching command string alone must
+  // never be trusted here either — require the literal boolean `true` and a
+  // non-empty string approvalId, not merely truthy values.
   const canRunApproved =
-    !!approval?.success &&
-    !!approval.approvalId &&
+    approval?.success === true &&
+    typeof approval.approvalId === 'string' &&
+    approval.approvalId.length > 0 &&
     !!pendingApproval &&
     pendingApproval.command === approval.command;
 
+  // A manifest arrives from the server as untyped JSON at runtime — guard
+  // both collections before mapping so a malformed manifest cannot throw.
+  const commands = Array.isArray(manifest?.commands) ? manifest.commands : [];
+  const skills = Array.isArray(manifest?.skills) ? manifest.skills : [];
+
   return (
     <section aria-label="Commands" className="flex flex-col gap-2 border-b px-4 py-3 text-xs">
-      {manifest && manifest.commands.length > 0 ? (
+      {commands.length > 0 ? (
         <ul aria-label="Available commands" className="flex flex-col gap-1">
-          {manifest.commands.map((cmd) => (
-            <li key={cmd.name}>
-              <strong>/{cmd.name}</strong> — {cmd.description}
+          {commands.map((cmd, index) => (
+            <li key={asString(cmd?.name) || `cmd-${index}`}>
+              <strong>/{asString(cmd?.name)}</strong> — {asString(cmd?.description)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {skills.length > 0 ? (
+        <ul aria-label="Available skills" className="flex flex-col gap-1">
+          {skills.map((skill, index) => (
+            <li key={asString(skill?.name) || `skill-${index}`}>
+              <strong>/skill:{asString(skill?.name)}</strong> — {asString(skill?.description)}
             </li>
           ))}
         </ul>
@@ -79,16 +104,24 @@ export function CommandsPanel({
 
       {approval ? (
         <div role={approval.success ? 'status' : 'alert'} className="flex items-center gap-2">
-          <span>
-            {approval.success
-              ? `Approved: /${approval.command}`
-              : `Approval denied: /${approval.command}`}
-            {approval.message ? ` — ${approval.message}` : ''}
-          </span>
-          {canRunApproved ? (
-            <button type="button" onClick={onRunApproved}>
-              Run approved command
-            </button>
+          {/* Stable client copy only — never the server-controlled
+              approval.message or echoed approval.command as the primary
+              confirmation. The frozen local pendingApproval below (not this
+              line) is the sole authoritative statement of what will run. */}
+          <span>{approval.success ? 'Approved.' : 'Denied.'}</span>
+          {canRunApproved && pendingApproval ? (
+            <>
+              {/* Authoritative frozen local command+args — what the click below
+                  will actually emit. The server's `approval` above is display-only
+                  and must never be trusted to represent the executed payload. */}
+              <span>
+                Will run: /{pendingApproval.command}{' '}
+                {pendingApproval.args ? pendingApproval.args : '(no args)'}
+              </span>
+              <button type="button" onClick={onRunApproved}>
+                Run approved command
+              </button>
+            </>
           ) : null}
         </div>
       ) : null}
@@ -97,8 +130,12 @@ export function CommandsPanel({
         <ul aria-label="Command results" className="flex flex-col gap-1">
           {results.map((result, index) => (
             <li key={`${result.command}-${index}`} role={result.success ? 'status' : 'alert'}>
-              /{result.command}: {result.success ? 'success' : 'failed'}
-              {result.message ? ` — ${result.message}` : ''}
+              /{asString(result.command)}: {result.success ? 'success' : 'failed'}
+              {result.success
+                ? typeof result.message === 'string' && result.message
+                  ? ` — ${result.message}`
+                  : ''
+                : ` — ${COMMAND_FAILURE_COPY}`}
             </li>
           ))}
         </ul>
diff --git a/apps/web/src/spa/chat/composer.tsx b/apps/web/src/spa/chat/composer.tsx
index 604f47d2..7bda88ef 100644
--- a/apps/web/src/spa/chat/composer.tsx
+++ b/apps/web/src/spa/chat/composer.tsx
@@ -4,6 +4,10 @@ interface ComposerProps {
   onSend: (input: { content: string; provider?: string; modelId?: string }) => void;
   onStop: () => void;
   streaming: boolean;
+  /** True from local send time through server turn startup/ack and
+   * throughout streaming — a superset of `streaming` that also covers the
+   * pre-ack window where a second send could otherwise slip through. */
+  sending: boolean;
   hasConversation: boolean;
 }
 
@@ -11,14 +15,16 @@ export function Composer({
   onSend,
   onStop,
   streaming,
+  sending,
   hasConversation,
 }: ComposerProps): ReactElement {
   const [content, setContent] = useState('');
   const [provider, setProvider] = useState('');
   const [modelId, setModelId] = useState('');
+  const busy = streaming || sending;
 
   function submit(): void {
-    if (streaming) return;
+    if (busy) return;
     const trimmed = content.trim();
     if (!trimmed) return;
     onSend({
@@ -72,7 +78,7 @@ export function Composer({
         />
         <button
           type="submit"
-          disabled={!content.trim() || streaming}
+          disabled={!content.trim() || busy}
           className="rounded px-3 py-2 text-sm font-medium"
         >
           Send
diff --git a/apps/web/src/spa/chat/limits.ts b/apps/web/src/spa/chat/limits.ts
new file mode 100644
index 00000000..8c38bc21
--- /dev/null
+++ b/apps/web/src/spa/chat/limits.ts
@@ -0,0 +1,18 @@
+/**
+ * Bounds on server-fed chat state. A hostile or malfunctioning gateway can
+ * flood any of these collections; caps keep memory/render cost flat instead
+ * of growing unboundedly for the lifetime of the connection.
+ */
+
+/** Max characters retained for the in-flight streamed text/thinking buffers. */
+export const MAX_STREAM_CHARS = 20_000;
+/** Max transcript turns retained (oldest dropped first). */
+export const MAX_MESSAGES = 500;
+/** Max tool-call entries (including anomaly entries) retained per turn history. */
+export const MAX_TOOLS = 200;
+/** Max slash-command results retained. */
+export const MAX_COMMAND_RESULTS = 200;
+/** Max commands/skills accepted from a single manifest push. */
+export const MAX_MANIFEST_ITEMS = 500;
+/** Max executed approval IDs remembered for single-flight dedup. */
+export const MAX_EXECUTED_APPROVAL_IDS = 200;
diff --git a/apps/web/src/spa/chat/runtime-guards.ts b/apps/web/src/spa/chat/runtime-guards.ts
new file mode 100644
index 00000000..b879f58d
--- /dev/null
+++ b/apps/web/src/spa/chat/runtime-guards.ts
@@ -0,0 +1,41 @@
+/**
+ * Socket.IO payloads are only statically typed at the call site — a
+ * misbehaving or compromised gateway can send anything at runtime. These
+ * guards protect the dereference sites that would otherwise throw (`.map` on
+ * a non-array, `.toFixed` on a non-number) or render an object as a React
+ * child.
+ */
+
+export function asString(value: unknown, fallback = ''): string {
+  return typeof value === 'string' ? value : fallback;
+}
+
+export function asFiniteNumber(value: unknown, fallback = 0): number {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+/** Like `asFiniteNumber`, but returns `null` on failure instead of a numeric
+ * fallback — callers that must not fabricate a plausible-looking value (e.g.
+ * `0 tokens` / `$0.0000` for genuinely unknown usage) use this to render an
+ * honest "unavailable" label instead. */
+export function asFiniteNumberOrNull(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+export function asStringArray(value: unknown): string[] {
+  return Array.isArray(value) && value.every((item) => typeof item === 'string') ? value : [];
+}
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+/** The single point of truth for what counts as a valid conversation ID
+ * anywhere a scoped server event may adopt one into state — a non-empty
+ * string, nothing else. Every site that establishes or compares
+ * `state.conversationId` against a raw socket payload must route through
+ * this guard so a malformed first frame (null/object/number/empty string)
+ * can never be adopted verbatim. */
+export function asConversationId(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null;
+}
diff --git a/apps/web/src/spa/chat/session-panel.tsx b/apps/web/src/spa/chat/session-panel.tsx
index 7c55020a..b89422ba 100644
--- a/apps/web/src/spa/chat/session-panel.tsx
+++ b/apps/web/src/spa/chat/session-panel.tsx
@@ -1,41 +1,59 @@
 import type { ReactElement } from 'react';
 import type { SessionInfoPayload } from '@/lib/chat-contract';
+import { asString, asStringArray } from './runtime-guards';
 
 interface SessionPanelProps {
   sessionInfo: SessionInfoPayload | null;
   onSetThinking: (level: string) => void;
 }
 
+const THINKING_LEVEL_UNAVAILABLE = '';
+
 export function SessionPanel({
   sessionInfo,
   onSetThinking,
 }: SessionPanelProps): ReactElement | null {
   if (!sessionInfo) return null;
 
+  const availableThinkingLevels = asStringArray(sessionInfo.availableThinkingLevels);
+  const hasThinkingLevels = availableThinkingLevels.length > 0;
+
   return (
     <section
       aria-label="Session info"
       className="flex flex-wrap items-center gap-3 border-b px-4 py-2 text-xs"
     >
-      <span>{sessionInfo.provider}</span>
-      <span>{sessionInfo.modelId}</span>
+      <span>{asString(sessionInfo.provider, 'unknown')}</span>
+      <span>{asString(sessionInfo.modelId, 'unknown')}</span>
       <label className="flex items-center gap-2">
         <span>Thinking level</span>
         <select
           aria-label="Thinking level"
-          value={sessionInfo.thinkingLevel}
-          onChange={(event) => onSetThinking(event.target.value)}
+          value={
+            hasThinkingLevels ? asString(sessionInfo.thinkingLevel) : THINKING_LEVEL_UNAVAILABLE
+          }
+          onChange={(event) => {
+            // The placeholder option is not a real, settable level — a
+            // malformed availableThinkingLevels list must never let the
+            // client emit set:thinking for it.
+            if (!hasThinkingLevels) return;
+            onSetThinking(event.target.value);
+          }}
         >
-          {sessionInfo.availableThinkingLevels.map((level) => (
-            <option key={level} value={level}>
-              {level}
-            </option>
-          ))}
+          {hasThinkingLevels ? (
+            availableThinkingLevels.map((level) => (
+              <option key={level} value={level}>
+                {level}
+              </option>
+            ))
+          ) : (
+            <option value={THINKING_LEVEL_UNAVAILABLE}>Thinking level unavailable</option>
+          )}
         </select>
       </label>
       {sessionInfo.routingDecision ? (
-        <span title={sessionInfo.routingDecision.ruleName}>
-          {sessionInfo.routingDecision.reason}
+        <span title={asString(sessionInfo.routingDecision.ruleName)}>
+          {asString(sessionInfo.routingDecision.reason)}
         </span>
       ) : null}
     </section>
diff --git a/apps/web/src/spa/chat/test-support/fake-chat-socket.ts b/apps/web/src/spa/chat/test-support/fake-chat-socket.ts
index 6ba46fa9..ce80117b 100644
--- a/apps/web/src/spa/chat/test-support/fake-chat-socket.ts
+++ b/apps/web/src/spa/chat/test-support/fake-chat-socket.ts
@@ -27,6 +27,11 @@ export interface FakeChatSocket {
  * missing a required field fails to compile instead of silently no-op'ing at
  * runtime.
  */
+/** Socket.IO's built-in connection-state events. Not part of the app-level
+ * ServerToClientEvents contract, but real sockets always support them and
+ * `useChatConnection` registers a `disconnect` handler on the real socket. */
+type LifecycleEvent = 'connect' | 'disconnect';
+
 export function createFakeChatSocket(): {
   socket: FakeChatSocket;
   listeners: Map<ServerEvent, Set<(payload: never) => void>>;
@@ -35,6 +40,19 @@ export function createFakeChatSocket(): {
     event: K,
     payload: Parameters<ServerToClientEvents[K]>[0],
   ): void;
+  /** Escape hatch for malformed-payload tests: bypasses the compile-time
+   * payload contract to simulate a genuinely untrusted runtime value from the
+   * server, e.g. a `session:info` with a non-array `availableThinkingLevels`. */
+  serverEmitRaw(event: ServerEvent, payload: unknown): void;
+  /** Simulates a transient Socket.IO `disconnect` — fires any handler(s)
+   * registered via `socket.on('disconnect', ...)` without clearing any
+   * listeners, mirroring how a real reconnecting socket behaves. */
+  simulateDisconnect(): void;
+  /** Simulates socket.io-client's automatic reconnect of the *same*
+   * instance after a transient disconnect: marks the socket connected again
+   * and fires any handler(s) registered via `socket.on('connect', ...)`,
+   * without clearing or replacing any listeners. */
+  simulateReconnect(): void;
 } {
   const listeners = new Map<ServerEvent, Set<(payload: never) => void>>();
   const emitted: EmittedEvent[] = [];
@@ -73,5 +91,35 @@ export function createFakeChatSocket(): {
     }
   }
 
-  return { socket, listeners, emitted, serverEmit };
+  function serverEmitRaw(event: ServerEvent, payload: unknown): void {
+    for (const handler of listeners.get(event) ?? []) {
+      (handler as (payload: unknown) => void)(payload);
+    }
+  }
+
+  function simulateDisconnect(): void {
+    socket.connected = false;
+    const lifecycleKey = 'disconnect' satisfies LifecycleEvent as unknown as ServerEvent;
+    for (const handler of listeners.get(lifecycleKey) ?? []) {
+      (handler as () => void)();
+    }
+  }
+
+  function simulateReconnect(): void {
+    socket.connected = true;
+    const lifecycleKey = 'connect' satisfies LifecycleEvent as unknown as ServerEvent;
+    for (const handler of listeners.get(lifecycleKey) ?? []) {
+      (handler as () => void)();
+    }
+  }
+
+  return {
+    socket,
+    listeners,
+    emitted,
+    serverEmit,
+    serverEmitRaw,
+    simulateDisconnect,
+    simulateReconnect,
+  };
 }
diff --git a/apps/web/src/spa/chat/tool-call-list.spec.tsx b/apps/web/src/spa/chat/tool-call-list.spec.tsx
new file mode 100644
index 00000000..e9c0d40e
--- /dev/null
+++ b/apps/web/src/spa/chat/tool-call-list.spec.tsx
@@ -0,0 +1,63 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { ToolCallList } from './tool-call-list';
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    configurable: true,
+    value: true,
+  });
+});
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
+});
+
+let root: Root | null;
+let container: HTMLElement | null;
+
+async function render(node: Parameters<Root['render']>[0]): Promise<void> {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+  await act(async () => {
+    root?.render(node);
+  });
+}
+
+afterEach(async () => {
+  await act(async () => {
+    root?.unmount();
+  });
+  document.body.replaceChildren();
+  root = null;
+  container = null;
+});
+
+describe('ToolCallList', () => {
+  it('renders two entries independently, without a duplicate-key warning, when a valid toolCallId is shared', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    await render(
+      <ToolCallList
+        tools={[
+          { toolCallId: 'dup', toolName: 'search', status: 'success' },
+          { toolCallId: 'dup', toolName: 'search', status: 'running' },
+        ]}
+      />,
+    );
+
+    const items = [...(container?.querySelectorAll('li') ?? [])];
+    expect(items).toHaveLength(2);
+    expect(items[0]?.textContent).toContain('success');
+    expect(items[1]?.textContent).toContain('running');
+
+    const duplicateKeyWarning = consoleError.mock.calls.some((args) =>
+      args.some((arg) => typeof arg === 'string' && arg.includes('same key')),
+    );
+    expect(duplicateKeyWarning).toBe(false);
+
+    consoleError.mockRestore();
+  });
+});
diff --git a/apps/web/src/spa/chat/tool-call-list.tsx b/apps/web/src/spa/chat/tool-call-list.tsx
index 919cf76f..3505cb6f 100644
--- a/apps/web/src/spa/chat/tool-call-list.tsx
+++ b/apps/web/src/spa/chat/tool-call-list.tsx
@@ -6,9 +6,17 @@ export function ToolCallList({ tools }: { tools: ToolCallState[] }): ReactElemen
 
   return (
     <ul aria-label="Tool calls" className="flex flex-col gap-1 px-4 pb-2 text-xs">
-      {tools.map((tool) => (
-        <li key={tool.toolCallId} role={tool.status === 'error' ? 'alert' : 'status'}>
-          {tool.toolName} — {tool.status}
+      {tools.map((tool, index) => (
+        <li
+          // A valid server-controlled toolCallId can legitimately repeat
+          // (e.g. two tool:start events sharing one id) — keying on it alone
+          // would give React two identical keys. Pairing it with its
+          // (stable, append-only) render index keeps every key unique.
+          key={`${tool.toolCallId}-${index}`}
+          role={tool.status === 'error' || tool.status === 'anomaly' ? 'alert' : 'status'}
+        >
+          {tool.toolName} —{' '}
+          {tool.status === 'anomaly' ? 'unexpected end (unknown tool call)' : tool.status}
         </li>
       ))}
     </ul>
diff --git a/apps/web/src/spa/chat/use-chat-connection.spec.tsx b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
index 545df105..bd394772 100644
--- a/apps/web/src/spa/chat/use-chat-connection.spec.tsx
+++ b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
@@ -2,6 +2,13 @@ import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createFakeChatSocket } from './test-support/fake-chat-socket';
+import {
+  MAX_COMMAND_RESULTS,
+  MAX_MANIFEST_ITEMS,
+  MAX_MESSAGES,
+  MAX_STREAM_CHARS,
+  MAX_TOOLS,
+} from './limits';
 
 const { getSocketMock, destroySocketMock } = vi.hoisted(() => ({
   getSocketMock: vi.fn(),
@@ -590,6 +597,654 @@ describe('useChatConnection', () => {
     expect(latest?.state.manifest?.commands.map((c) => c.name)).toEqual(['deploy']);
   });
 
+  it('reconnects the same socket instance after a transient disconnect and accepts a subsequent ack/start/text stream', async () => {
+    await act(async () => {
+      fake.simulateDisconnect();
+    });
+
+    // Listeners must still be registered — a transient disconnect must not
+    // tear anything down or force a fresh singleton.
+    expect(fake.listeners.get('message:ack')?.size).toBeGreaterThan(0);
+
+    await act(async () => {
+      fake.simulateReconnect();
+    });
+    expect(fake.socket.connected).toBe(true);
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm2' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'reconnected' });
+    });
+
+    expect(latest?.state.ack).toEqual({ conversationId: 'c1', messageId: 'm2' });
+    expect(latest?.state.streaming).toBe(true);
+    expect(latest?.state.text).toBe('reconnected');
+    expect(fake.listeners.get('message:ack')?.size).toBeGreaterThan(0);
+    // No new fake singleton was created — getSocket() always resolved to the
+    // same instance across the disconnect/reconnect cycle.
+    expect(getSocketMock.mock.results.every((result) => result.value === fake.socket)).toBe(true);
+  });
+
+  it('resets streaming and pending-send/busy state on a mid-stream disconnect', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+    expect(latest?.state.sending).toBe(true);
+    expect(latest?.state.pendingSend).toBe(true);
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    expect(latest?.state.streaming).toBe(true);
+    expect(latest?.state.pendingSend).toBe(false);
+
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+    expect(latest?.state.approvalRequestPending).toBe(true);
+
+    await act(async () => {
+      fake.simulateDisconnect();
+    });
+
+    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.sending).toBe(false);
+    expect(latest?.state.pendingSend).toBe(false);
+    expect(latest?.state.approvalRequestPending).toBe(false);
+
+    // The send lock must also be released — a subsequent sendMessage after
+    // reconnect must not be permanently blocked by the interrupted turn.
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'after reconnect' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+    expect(fake.emitted.filter((e) => e.event === 'message').at(-1)).toEqual({
+      event: 'message',
+      payload: {
+        conversationId: 'c1',
+        content: 'after reconnect',
+        provider: undefined,
+        modelId: undefined,
+      },
+    });
+  });
+
+  it('emits and appends only one turn when sendMessage is called twice before agent:start, and cannot fork a new conversation', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'first' });
+      latest?.actions.sendMessage({ content: 'second' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+    expect(latest?.state.messages).toHaveLength(1);
+    expect(latest?.state.messages[0]).toMatchObject({ role: 'user', text: 'first' });
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    expect(latest?.state.conversationId).toBe('c1');
+  });
+
+  it('appends a terminal anomaly entry when agent:tool:end references a toolCallId that was never started', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    await act(async () => {
+      fake.serverEmit('agent:tool:end', {
+        conversationId: 'c1',
+        toolCallId: 'unseen',
+        toolName: 'search',
+        isError: false,
+      });
+    });
+
+    expect(latest?.state.tools).toEqual([
+      { toolCallId: 'unseen', toolName: 'search', status: 'anomaly' },
+    ]);
+  });
+
+  it('assigns unique fallback IDs to multiple malformed tool:start events, and a subsequent malformed tool:end always appends a new anomaly without mutating either prior entry', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('agent:tool:start', {
+          conversationId: 'c1',
+          toolCallId: { bad: 'object' },
+          toolName: 'search',
+        });
+        fake.serverEmitRaw('agent:tool:start', {
+          conversationId: 'c1',
+          toolCallId: '',
+          toolName: 'shell',
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.tools).toHaveLength(2);
+    const [first, second] = latest?.state.tools ?? [];
+    expect(first?.status).toBe('running');
+    expect(second?.status).toBe('running');
+    expect(first?.toolCallId).not.toBe(second?.toolCallId);
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('agent:tool:end', {
+          conversationId: 'c1',
+          toolCallId: null,
+          toolName: 'unknown',
+          isError: false,
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.tools).toHaveLength(3);
+    // Neither malformed-start entry was mutated by the malformed end.
+    expect(latest?.state.tools[0]).toEqual(first);
+    expect(latest?.state.tools[1]).toEqual(second);
+    // The malformed end always appends its own terminal anomaly rather than
+    // colliding with (and silently flipping) an earlier fallback ID.
+    const terminal = latest?.state.tools[2];
+    expect(terminal?.status).toBe('anomaly');
+    expect(terminal?.toolCallId).not.toBe(first?.toolCallId);
+    expect(terminal?.toolCallId).not.toBe(second?.toolCallId);
+  });
+
+  it('updates only the first matching tool when a tool:end references a toolCallId shared by two tool:start entries', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:tool:start', {
+        conversationId: 'c1',
+        toolCallId: 'dup',
+        toolName: 'search',
+      });
+      fake.serverEmit('agent:tool:start', {
+        conversationId: 'c1',
+        toolCallId: 'dup',
+        toolName: 'search',
+      });
+    });
+
+    await act(async () => {
+      fake.serverEmit('agent:tool:end', {
+        conversationId: 'c1',
+        toolCallId: 'dup',
+        toolName: 'search',
+        isError: false,
+      });
+    });
+
+    expect(latest?.state.tools).toEqual([
+      { toolCallId: 'dup', toolName: 'search', status: 'success' },
+      { toolCallId: 'dup', toolName: 'search', status: 'running' },
+    ]);
+  });
+
+  it('caps the tools list at MAX_TOOLS when flooded with tool:start events', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    await act(async () => {
+      for (let i = 0; i < MAX_TOOLS + 10; i += 1) {
+        fake.serverEmit('agent:tool:start', {
+          conversationId: 'c1',
+          toolCallId: `t${i}`,
+          toolName: 'search',
+        });
+      }
+    });
+
+    expect(latest?.state.tools).toHaveLength(MAX_TOOLS);
+    // Oldest dropped deterministically — the most recent tool call survives.
+    expect(latest?.state.tools.at(-1)?.toolCallId).toBe(`t${MAX_TOOLS + 9}`);
+  });
+
+  it('a stale agent:end for a foreign conversation cannot re-arm the send lock for a same-tick in-flight second turn', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'second turn' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+
+    // While the second turn's send is in flight (sent but agent:start not yet
+    // received), a terminal event for an unrelated conversation arrives in the
+    // same tick as a follow-up send attempt — it must not re-arm the lock.
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'other' });
+      latest?.actions.sendMessage({ content: 'third turn attempt' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+    expect(latest?.state.messages.some((m) => m.text === 'third turn attempt')).toBe(false);
+  });
+
+  it('a stale error for a foreign conversation cannot re-arm the send lock for a same-tick in-flight second turn', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'second turn' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'other', error: 'unrelated failure' });
+      latest?.actions.sendMessage({ content: 'third turn attempt' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+    expect(latest?.state.messages.some((m) => m.text === 'third turn attempt')).toBe(false);
+  });
+
+  it('does not throw and normalizes to empty lists when commands:manifest arrives with null commands/skills', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('commands:manifest', {
+          manifest: { commands: null, skills: null, version: 1 },
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.manifest?.commands).toEqual([]);
+    expect(latest?.state.manifest?.skills).toEqual([]);
+  });
+
+  it('does not throw and normalizes to empty lists when system:reload arrives with non-array commands/skills', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('system:reload', {
+          commands: 'not-an-array',
+          skills: undefined,
+          providers: ['anthropic'],
+          message: 'Commands reloaded',
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.manifest?.commands).toEqual([]);
+    expect(latest?.state.manifest?.skills).toEqual([]);
+  });
+
+  it('falls back to a safe tool label when agent:tool:start carries a non-string toolName', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('agent:tool:start', {
+          conversationId: 'c1',
+          toolCallId: 't1',
+          toolName: { evil: 'object' },
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.tools).toEqual([
+      { toolCallId: 't1', toolName: 'Unknown tool', status: 'running' },
+    ]);
+  });
+
+  it('ignores a session:info event whose entire payload is null, without throwing', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('session:info', null);
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.sessionInfo).toBeNull();
+  });
+
+  it('emits only one command:approve when approveCommand is called twice in the same tick, preserving the first frozen args', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+      latest?.actions.approveCommand({ command: 'deploy', args: 'staging' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
+    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
+  });
+
+  it('caps streamed agent:text at MAX_STREAM_CHARS, keeping only the most recent characters', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    await act(async () => {
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'a'.repeat(MAX_STREAM_CHARS) });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'b'.repeat(10) });
+    });
+
+    expect(latest?.state.text).toHaveLength(MAX_STREAM_CHARS);
+    expect(latest?.state.text.endsWith('b'.repeat(10))).toBe(true);
+  });
+
+  it('caps commandResults at MAX_COMMAND_RESULTS when flooded with command:result events', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    await act(async () => {
+      for (let i = 0; i < MAX_COMMAND_RESULTS + 5; i += 1) {
+        fake.serverEmit('command:result', {
+          conversationId: 'c1',
+          command: `cmd${i}`,
+          success: true,
+        });
+      }
+    });
+
+    expect(latest?.state.commandResults).toHaveLength(MAX_COMMAND_RESULTS);
+    expect(latest?.state.commandResults.at(-1)?.command).toBe(`cmd${MAX_COMMAND_RESULTS + 4}`);
+  });
+
+  it('caps commands:manifest commands/skills at MAX_MANIFEST_ITEMS', async () => {
+    const commands = Array.from({ length: MAX_MANIFEST_ITEMS + 5 }, (_, i) => ({
+      name: `cmd${i}`,
+      aliases: [],
+      description: '',
+      scope: 'core' as const,
+      execution: 'socket' as const,
+      available: true,
+    }));
+
+    await act(async () => {
+      fake.serverEmit('commands:manifest', { manifest: { commands, skills: [], version: 1 } });
+    });
+
+    expect(latest?.state.manifest?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
+  });
+
+  it('caps a system:reload manifest replacement at MAX_MANIFEST_ITEMS', async () => {
+    const commands = Array.from({ length: MAX_MANIFEST_ITEMS + 5 }, (_, i) => ({
+      name: `cmd${i}`,
+      aliases: [],
+      description: '',
+      scope: 'core' as const,
+      execution: 'socket' as const,
+      available: true,
+    }));
+
+    await act(async () => {
+      fake.serverEmit('system:reload', {
+        commands,
+        skills: [],
+        providers: ['anthropic'],
+        message: 'reloaded',
+      });
+    });
+
+    expect(latest?.state.manifest?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
+  });
+
+  it('ignores a malformed (object) conversationId on the establishing message:ack, leaving the turn recoverable for a later valid ack', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+    expect(latest?.state.pendingSend).toBe(true);
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('message:ack', { conversationId: { bad: 'object' }, messageId: 'm0' });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.conversationId).toBeNull();
+    expect(latest?.state.pendingSend).toBe(true);
+    expect(latest?.state.ack).toBeNull();
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.ack).toEqual({ conversationId: 'c1', messageId: 'm1' });
+  });
+
+  it('ignores an empty-string and a null conversationId on the establishing message:ack', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('message:ack', { conversationId: '', messageId: 'm1' });
+      }),
+    ).resolves.not.toThrow();
+    expect(latest?.state.conversationId).toBeNull();
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('message:ack', { conversationId: null, messageId: 'm1' });
+      }),
+    ).resolves.not.toThrow();
+    expect(latest?.state.conversationId).toBeNull();
+  });
+
+  it('sanitizes a malformed (non-string) ack messageId to a visible "unknown" fallback instead of storing the raw value', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('message:ack', { conversationId: 'c1', messageId: { bad: 'object' } });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.ack).toEqual({ conversationId: 'c1', messageId: 'unknown' });
+  });
+
+  it('treats a malformed-conversationId error as a terminal startup failure for a brand-new pending send, releasing the send lock for a retry', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+    expect(latest?.state.pendingSend).toBe(true);
+    expect(latest?.state.sending).toBe(true);
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('error', { conversationId: { bad: 'object' }, error: 'boom' });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.conversationId).toBeNull();
+    expect(latest?.state.pendingSend).toBe(false);
+    expect(latest?.state.sending).toBe(false);
+    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.approvalRequestPending).toBe(false);
+    expect(latest?.state.error).toBe('Unable to start this conversation. Please try again.');
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'retry' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+    expect(latest?.state.messages.some((m) => m.text === 'retry')).toBe(true);
+  });
+
+  it('treats a malformed-conversationId agent:end as a terminal startup failure for a brand-new pending send, releasing the send lock for a retry', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+    expect(latest?.state.pendingSend).toBe(true);
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('agent:end', { conversationId: '' });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.conversationId).toBeNull();
+    expect(latest?.state.pendingSend).toBe(false);
+    expect(latest?.state.sending).toBe(false);
+    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.approvalRequestPending).toBe(false);
+    expect(latest?.state.error).toBe('Unable to start this conversation. Please try again.');
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'retry again' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+    expect(latest?.state.messages.some((m) => m.text === 'retry again')).toBe(true);
+  });
+
+  it('a foreign valid-conversationId error after a conversation is already active remains ignored and cannot unlock anything', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    expect(latest?.state.streaming).toBe(true);
+
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'other', error: 'unrelated' });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.streaming).toBe(true);
+    expect(latest?.state.error).toBeNull();
+  });
+
+  it('ignores a malformed (null) conversationId on an establishing agent:start via resolveScopedConversation, leaving the turn recoverable for a later valid one', async () => {
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'hi' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('agent:start', { conversationId: null });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.conversationId).toBeNull();
+    expect(latest?.state.pendingSend).toBe(true);
+    expect(latest?.state.streaming).toBe(false);
+
+    await act(async () => {
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    expect(latest?.state.conversationId).toBe('c1');
+    expect(latest?.state.streaming).toBe(true);
+  });
+
+  it('normalizes a command:approval with a truthy but non-literal-true success into a denial, releasing the pending lock without enabling execution', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('command:approval', {
+          conversationId: 'c1',
+          command: 'deploy',
+          success: { truthy: 'object' },
+          approvalId: 'ap1',
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.approval?.success).toBe(false);
+    expect(latest?.state.approvalRequestPending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+    });
+    expect(fake.emitted.filter((e) => e.event === 'command:execute')).toHaveLength(0);
+  });
+
+  it('normalizes a command:approval with success: true but a malformed (object) approvalId into a denial that cannot be run', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('command:approval', {
+          conversationId: 'c1',
+          command: 'deploy',
+          success: true,
+          approvalId: { bad: 'object' },
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.approval?.success).toBe(false);
+    expect(latest?.state.approval?.approvalId).toBeUndefined();
+    expect(latest?.state.approvalRequestPending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+    });
+    expect(fake.emitted.filter((e) => e.event === 'command:execute')).toHaveLength(0);
+  });
+
+  it('normalizes command:result.success to a literal boolean, never displaying a truthy non-boolean value as success', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('command:result', {
+          conversationId: 'c1',
+          command: 'model',
+          success: { truthy: 'object' },
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(latest?.state.commandResults.at(-1)?.success).toBe(false);
+  });
+
+  it('caps messages at MAX_MESSAGES when flooded with agent:start/text/end cycles on an established conversation', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    await act(async () => {
+      for (let i = 0; i < MAX_MESSAGES + 5; i += 1) {
+        fake.serverEmit('agent:start', { conversationId: 'c1' });
+        fake.serverEmit('agent:text', { conversationId: 'c1', text: `reply ${i}` });
+        fake.serverEmit('agent:end', { conversationId: 'c1' });
+      }
+    });
+
+    expect(latest?.state.messages).toHaveLength(MAX_MESSAGES);
+    expect(latest?.state.messages.at(-1)?.text).toBe(`reply ${MAX_MESSAGES + 4}`);
+    // Every retained message.id must stay unique across the cap boundary — a
+    // length-derived id would collide once the array plateaus at MAX_MESSAGES.
+    const ids = latest?.state.messages.map((m) => m.id) ?? [];
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
   it('removes every listener and tears down the socket on cleanup, using no network', async () => {
     const registeredEvents = [...fake.listeners.keys()];
     expect(registeredEvents.length).toBeGreaterThan(0);
diff --git a/apps/web/src/spa/chat/use-chat-connection.ts b/apps/web/src/spa/chat/use-chat-connection.ts
index a614c960..d5100409 100644
--- a/apps/web/src/spa/chat/use-chat-connection.ts
+++ b/apps/web/src/spa/chat/use-chat-connection.ts
@@ -1,16 +1,27 @@
 import { useEffect, useReducer, useRef } from 'react';
 import { destroySocket, getSocket } from '@/lib/socket';
+import {
+  MAX_COMMAND_RESULTS,
+  MAX_EXECUTED_APPROVAL_IDS,
+  MAX_MANIFEST_ITEMS,
+  MAX_MESSAGES,
+  MAX_STREAM_CHARS,
+  MAX_TOOLS,
+} from './limits';
+import { asConversationId, asFiniteNumber, asString, isRecord } from './runtime-guards';
 import type {
   AgentEndPayload,
   AgentStartPayload,
   AgentTextPayload,
   AgentThinkingPayload,
+  CommandDef,
   CommandManifest,
   CommandManifestPayload,
   ErrorPayload,
   MessageAckPayload,
   SessionInfoPayload,
   SessionUsagePayload,
+  SkillCommandDef,
   SlashCommandApprovalResultPayload,
   SlashCommandResultPayload,
   SystemReloadPayload,
@@ -21,7 +32,113 @@ import type {
 export interface ToolCallState {
   toolCallId: string;
   toolName: string;
-  status: 'running' | 'success' | 'error';
+  status: 'running' | 'success' | 'error' | 'anomaly';
+}
+
+/** Appends `addition` to `existing`, keeping at most `max` characters by
+ * dropping the oldest (leading) characters once the cap is exceeded. */
+function capAppendString(existing: string, addition: string, max: number): string {
+  const next = existing + addition;
+  return next.length > max ? next.slice(next.length - max) : next;
+}
+
+/** Pushes `item` onto `arr`, dropping the oldest entries once `max` is exceeded. */
+function capPush<T>(arr: T[], item: T, max: number): T[] {
+  const next = [...arr, item];
+  return next.length > max ? next.slice(next.length - max) : next;
+}
+
+/** A valid `toolCallId` from the wire is a non-empty string — a malformed or
+ * absent one (non-string, or empty string) must never be treated as if it
+ * named a real tool call. */
+function isValidToolCallId(value: unknown): value is string {
+  return typeof value === 'string' && value.length > 0;
+}
+
+/** Shown when a scoped `error`/`agent:end` cannot be attributed to any
+ * conversation (a malformed/missing conversationId) while a send is still
+ * pending and no conversation has ever been established. There is no valid
+ * identity left to recover the turn under, so it is surfaced as a terminal
+ * startup failure instead of leaving `sending`/`pendingSend` stuck forever. */
+const CONVERSATION_START_FAILURE = 'Unable to start this conversation. Please try again.';
+
+/** True only for the narrow case a malformed-conversationId `error`/`agent:end`
+ * must be treated as a terminal startup failure: no conversation has ever been
+ * established yet, and a send is still pending one. Once a conversation is
+ * active, or when no send is pending, an unattributable event stays a no-op —
+ * dropping it (rather than guessing which turn it belongs to) is what lets a
+ * later genuinely valid event still recover the turn. */
+function isUnrecoverableStartupFailure(state: ChatConnectionState): boolean {
+  return state.conversationId === null && state.pendingSend;
+}
+
+/** Deterministic, unique-per-event fallback id for a malformed `toolCallId`.
+ * Sourced from a monotonically increasing counter carried in state (`toolSeq`)
+ * rather than `tools.length`, so it stays collision-free even once `tools` is
+ * capped at MAX_TOOLS and its length stops changing. */
+function nextToolFallbackId(toolSeq: number): string {
+  return `unknown-tool-call-${toolSeq}`;
+}
+
+/** Truncates a server-provided collection to at most `max` entries. `arr` is
+ * `unknown` because it comes straight from a raw socket payload — a
+ * malformed/compromised gateway can send `null` or any non-array value here,
+ * which must normalize to an empty list rather than throw. */
+function capList<T>(arr: unknown, max: number): T[] {
+  if (!Array.isArray(arr)) return [];
+  return (arr.length > max ? arr.slice(0, max) : arr) as T[];
+}
+
+/** Normalizes a raw message:ack payload before it is stored — `messageId` is
+ * given a stable, visible "unknown" fallback rather than storing a raw
+ * non-string value (which would either render as "[object Object]" or,
+ * with an unguarded render site, throw). */
+function sanitizeAck(payload: MessageAckPayload, conversationId: string): MessageAckPayload {
+  return { conversationId, messageId: asString(payload.messageId, 'unknown') };
+}
+
+/** Normalizes a raw command:approval payload before it is stored. A command
+ * string matching `pendingApproval.command` alone is not sufficient proof of
+ * a genuine, executable approval: `success` must be the literal boolean
+ * `true`, and a successful approval requires a non-empty string
+ * `approvalId`. Anything else is normalized to a denial (`success: false`,
+ * no `approvalId`) so the pending request resolves and the approve lock is
+ * released instead of leaving the UI hung on a response it can never trust
+ * enough to enable "Run approved command" for. `expiresAt`/`message` are
+ * retained only when they are strings (message is never rendered as-is). */
+function sanitizeApproval(
+  payload: SlashCommandApprovalResultPayload,
+  conversationId: string,
+  command: string,
+): SlashCommandApprovalResultPayload {
+  const approvalId =
+    typeof payload.approvalId === 'string' && payload.approvalId.length > 0
+      ? payload.approvalId
+      : undefined;
+  const success = payload.success === true && approvalId !== undefined;
+  return {
+    conversationId,
+    command,
+    success,
+    approvalId: success ? approvalId : undefined,
+    expiresAt: typeof payload.expiresAt === 'string' ? payload.expiresAt : undefined,
+    message: typeof payload.message === 'string' ? payload.message : undefined,
+  };
+}
+
+/** Normalizes a raw command:result payload before it is stored — `success`
+ * is coerced to a literal boolean so a truthy non-boolean value (e.g. an
+ * object) can never be displayed as a successful result. */
+function sanitizeCommandResult(
+  payload: SlashCommandResultPayload,
+  conversationId: string,
+): SlashCommandResultPayload {
+  return {
+    conversationId,
+    command: asString(payload.command, 'unknown'),
+    success: payload.success === true,
+    message: typeof payload.message === 'string' ? payload.message : undefined,
+  };
 }
 
 export interface ChatTranscriptMessage {
@@ -42,6 +159,10 @@ export interface ChatConnectionState {
    * first scoped server event naming a conversation may establish it (the gateway
    * does not guarantee message:ack is the first event for a new conversation). */
   pendingSend: boolean;
+  /** True from the moment a message is sent until its turn ends (agent:end),
+   * errors, or the connection drops — guards against a second turn starting
+   * while one is already in flight. */
+  sending: boolean;
   ack: MessageAckPayload | null;
   streaming: boolean;
   text: string;
@@ -58,6 +179,16 @@ export interface ChatConnectionState {
   systemReload: SystemReloadPayload | null;
   error: string | null;
   messages: ChatTranscriptMessage[];
+  /** Monotonically increasing counter used to mint transcript message ids —
+   * never reset while retained messages remain, so ids stay unique across the
+   * MAX_MESSAGES cap boundary (unlike a `messages.length`-derived id, which
+   * plateaus once the array is capped). */
+  messageSeq: number;
+  /** Monotonically increasing counter used to mint fallback tool-call ids for
+   * malformed (non-string/empty) `toolCallId`s — never reset while retained
+   * tools remain, so fallback ids stay unique across the MAX_TOOLS cap
+   * boundary. */
+  toolSeq: number;
 }
 
 export interface ChatConnectionActions {
@@ -77,6 +208,7 @@ export interface ChatConnectionValue {
 const initialState: ChatConnectionState = {
   conversationId: null,
   pendingSend: false,
+  sending: false,
   ack: null,
   streaming: false,
   text: '',
@@ -92,6 +224,8 @@ const initialState: ChatConnectionState = {
   systemReload: null,
   error: null,
   messages: [],
+  messageSeq: 0,
+  toolSeq: 0,
 };
 
 type Action =
@@ -110,7 +244,8 @@ type Action =
   | { type: 'server/error'; payload: ErrorPayload }
   | { type: 'local/send'; content: string }
   | { type: 'local/approve-request'; command: string; args?: string }
-  | { type: 'local/consume-approval' };
+  | { type: 'local/consume-approval' }
+  | { type: 'local/disconnect' };
 
 /**
  * Resolves whether a scoped server event (one carrying a conversationId) belongs to
@@ -119,11 +254,22 @@ type Action =
  * failure, can both arrive first) — so while a message is pending and no conversation
  * is active yet, the first scoped event names the conversation instead of being
  * dropped. Once a conversation is active, only its own events pass.
+ *
+ * `rawConversationId` is `unknown`, not `string` — every payload is runtime-untrusted
+ * regardless of its compile-time contract, and this is the single place that may
+ * establish `state.conversationId`. A malformed value (non-string/empty) is rejected
+ * via the central `asConversationId` guard and never adopted: the event is treated as
+ * inactive/dropped, leaving state (including `pendingSend`) untouched so a later
+ * genuinely valid event can still establish or recover the turn.
  */
 function resolveScopedConversation(
   state: ChatConnectionState,
-  conversationId: string,
+  rawConversationId: unknown,
 ): { active: true; state: ChatConnectionState } | { active: false; state: null } {
+  const conversationId = asConversationId(rawConversationId);
+  if (conversationId === null) {
+    return { active: false, state: null };
+  }
   if (state.conversationId === conversationId) {
     return { active: true, state };
   }
@@ -133,20 +279,42 @@ function resolveScopedConversation(
   return { active: false, state: null };
 }
 
+type ServerAction = Extract<Action, { type: `server/${string}` }>;
+
+function isServerAction(action: Action): action is ServerAction {
+  return action.type.startsWith('server/');
+}
+
 function reduce(state: ChatConnectionState, action: Action): ChatConnectionState {
+  // A malformed packet (the whole payload is null/undefined/a primitive, not
+  // an object) is ignored outright rather than crashing the reducer on the
+  // first field dereference in the case below — every server/* action shape
+  // declares a `payload` field, so this guard covers all of them uniformly.
+  if (isServerAction(action) && !isRecord(action.payload)) {
+    return state;
+  }
+
   switch (action.type) {
     case 'server/message:ack': {
       const { payload } = action;
       if (state.conversationId === null) {
+        const conversationId = asConversationId(payload.conversationId);
+        // A malformed first frame (non-string/empty conversationId) is ignored
+        // outright rather than adopted — adopting it would permanently
+        // desynchronize every later scoped event's strict-equality check
+        // against a value that can never again match. Leaving state untouched
+        // (conversationId stays null) lets a later genuinely valid ack/start
+        // still establish the turn.
+        if (conversationId === null) return state;
         return {
           ...state,
-          conversationId: payload.conversationId,
+          conversationId,
           pendingSend: false,
-          ack: payload,
+          ack: sanitizeAck(payload, conversationId),
         };
       }
       if (payload.conversationId !== state.conversationId) return state;
-      return { ...state, ack: payload };
+      return { ...state, ack: sanitizeAck(payload, state.conversationId) };
     }
 
     case 'server/agent:start': {
@@ -158,65 +326,124 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
     case 'server/agent:text': {
       const resolved = resolveScopedConversation(state, action.payload.conversationId);
       if (!resolved.active) return state;
-      return { ...resolved.state, text: resolved.state.text + action.payload.text };
+      return {
+        ...resolved.state,
+        text: capAppendString(resolved.state.text, asString(action.payload.text), MAX_STREAM_CHARS),
+      };
     }
 
     case 'server/agent:thinking': {
       const resolved = resolveScopedConversation(state, action.payload.conversationId);
       if (!resolved.active) return state;
-      return { ...resolved.state, thinking: resolved.state.thinking + action.payload.text };
+      return {
+        ...resolved.state,
+        thinking: capAppendString(
+          resolved.state.thinking,
+          asString(action.payload.text),
+          MAX_STREAM_CHARS,
+        ),
+      };
     }
 
     case 'server/agent:tool:start': {
       const { payload } = action;
       const resolved = resolveScopedConversation(state, payload.conversationId);
       if (!resolved.active) return state;
+      const valid = isValidToolCallId(payload.toolCallId);
+      const toolSeq = resolved.state.toolSeq;
       const tool: ToolCallState = {
-        toolCallId: payload.toolCallId,
-        toolName: payload.toolName,
+        // Each malformed toolCallId gets its own fresh fallback id (never the
+        // fixed 'unknown-tool-call' constant) so distinct malformed starts
+        // never collide with each other.
+        toolCallId: valid ? payload.toolCallId : nextToolFallbackId(toolSeq),
+        toolName: asString(payload.toolName, 'Unknown tool'),
         status: 'running',
       };
-      return { ...resolved.state, tools: [...resolved.state.tools, tool] };
+      return {
+        ...resolved.state,
+        tools: capPush(resolved.state.tools, tool, MAX_TOOLS),
+        toolSeq: valid ? toolSeq : toolSeq + 1,
+      };
     }
 
     case 'server/agent:tool:end': {
       const { payload } = action;
       const resolved = resolveScopedConversation(state, payload.conversationId);
       if (!resolved.active) return state;
+      const valid = isValidToolCallId(payload.toolCallId);
+      const toolSeq = resolved.state.toolSeq;
+      const toolCallId = valid ? payload.toolCallId : nextToolFallbackId(toolSeq);
+      const toolName = asString(payload.toolName, 'Unknown tool');
+      const nextToolSeq = valid ? toolSeq : toolSeq + 1;
+      // A fresh fallback id (malformed toolCallId) can never match an
+      // existing entry, so this only ever finds a genuine prior tool:start.
+      const matchIndex = resolved.state.tools.findIndex((tool) => tool.toolCallId === toolCallId);
+      if (matchIndex === -1) {
+        // A tool:end for an ID we never saw a tool:start for is a protocol
+        // anomaly, not a no-op — surface it visibly instead of silently
+        // dropping it.
+        const anomaly: ToolCallState = { toolCallId, toolName, status: 'anomaly' };
+        return {
+          ...resolved.state,
+          tools: capPush(resolved.state.tools, anomaly, MAX_TOOLS),
+          toolSeq: nextToolSeq,
+        };
+      }
+      // Update at most the first matching entry — if `toolCallId` is
+      // (unexpectedly) shared by more than one retained tool, updating every
+      // match would cross-contaminate unrelated statuses (and could silently
+      // overwrite a distinct entry's 'anomaly' status).
       return {
         ...resolved.state,
-        tools: resolved.state.tools.map((tool) =>
-          tool.toolCallId === payload.toolCallId
-            ? { ...tool, status: payload.isError ? 'error' : 'success' }
-            : tool,
+        tools: resolved.state.tools.map((tool, index) =>
+          index === matchIndex ? { ...tool, status: payload.isError ? 'error' : 'success' } : tool,
         ),
+        toolSeq: nextToolSeq,
       };
     }
 
     case 'server/agent:end': {
       const { payload } = action;
       const resolved = resolveScopedConversation(state, payload.conversationId);
-      if (!resolved.active) return state;
+      if (!resolved.active) {
+        if (isUnrecoverableStartupFailure(state)) {
+          return {
+            ...state,
+            pendingSend: false,
+            sending: false,
+            streaming: false,
+            approvalRequestPending: false,
+            error: CONVERSATION_START_FAILURE,
+          };
+        }
+        return state;
+      }
       const next = resolved.state;
       const hasContent = next.text.length > 0 || next.thinking.length > 0;
       const messages = hasContent
-        ? [
-            ...next.messages,
+        ? capPush(
+            next.messages,
             {
-              id: `assistant-${payload.conversationId}-${next.messages.length}`,
+              // Sourced from the reducer-owned `messageSeq` counter, not
+              // `messages.length` — the latter plateaus once MAX_MESSAGES is
+              // reached under a flood, producing duplicate ids/React keys.
+              id: `assistant-${payload.conversationId}-${next.messageSeq}`,
               role: 'assistant' as const,
               text: next.text,
               thinking: next.thinking || undefined,
             },
-          ]
+            MAX_MESSAGES,
+          )
         : next.messages;
       return {
         ...next,
         streaming: false,
+        sending: false,
         text: '',
         thinking: '',
         usage: payload.usage ?? next.usage,
         messages,
+        messageSeq: hasContent ? next.messageSeq + 1 : next.messageSeq,
       };
     }
 
@@ -227,14 +454,37 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
     }
 
     case 'server/commands:manifest': {
-      return { ...state, manifest: action.payload.manifest };
+      // `manifest` itself, and its `commands`/`skills` fields, are raw
+      // socket payload values — any of them can be null/non-object at
+      // runtime regardless of the compile-time contract.
+      const manifest: Record<string, unknown> = isRecord(action.payload.manifest)
+        ? action.payload.manifest
+        : {};
+      return {
+        ...state,
+        manifest: {
+          commands: capList<CommandDef>(manifest.commands, MAX_MANIFEST_ITEMS),
+          skills: capList<SkillCommandDef>(manifest.skills, MAX_MANIFEST_ITEMS),
+          version: asFiniteNumber(manifest.version, state.manifest?.version ?? 0),
+        },
+      };
     }
 
     case 'server/command:result': {
       const { payload } = action;
       const resolved = resolveScopedConversation(state, payload.conversationId);
       if (!resolved.active) return state;
-      return { ...resolved.state, commandResults: [...resolved.state.commandResults, payload] };
+      const next = resolved.state;
+      const conversationId = next.conversationId;
+      if (conversationId === null) return next;
+      return {
+        ...next,
+        commandResults: capPush(
+          next.commandResults,
+          sanitizeCommandResult(payload, conversationId),
+          MAX_COMMAND_RESULTS,
+        ),
+      };
     }
 
     case 'server/command:approval': {
@@ -242,21 +492,32 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
       const resolved = resolveScopedConversation(state, payload.conversationId);
       if (!resolved.active) return state;
       const next = resolved.state;
-      if (!next.pendingApproval || next.pendingApproval.command !== payload.command) {
+      const conversationId = next.conversationId;
+      if (
+        conversationId === null ||
+        !next.pendingApproval ||
+        typeof payload.command !== 'string' ||
+        payload.command !== next.pendingApproval.command
+      ) {
         // Stale or mismatched response for a request that is no longer (or never was)
         // the one outstanding approval — do not let it replace active approval state.
         return next;
       }
-      return { ...next, approval: payload, approvalRequestPending: false };
+      return {
+        ...next,
+        approval: sanitizeApproval(payload, conversationId, payload.command),
+        approvalRequestPending: false,
+      };
     }
 
     case 'server/system:reload': {
+      const { payload } = action;
       return {
         ...state,
-        systemReload: action.payload,
+        systemReload: { ...payload, message: asString(payload.message, 'Commands reloaded.') },
         manifest: {
-          commands: action.payload.commands,
-          skills: action.payload.skills,
+          commands: capList<CommandDef>(payload.commands, MAX_MANIFEST_ITEMS),
+          skills: capList<SkillCommandDef>(payload.skills, MAX_MANIFEST_ITEMS),
           version: state.manifest?.version ?? 0,
         },
       };
@@ -265,24 +526,62 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
     case 'server/error': {
       const { payload } = action;
       const resolved = resolveScopedConversation(state, payload.conversationId);
-      if (!resolved.active) return state;
-      return { ...resolved.state, error: payload.error, streaming: false };
+      if (!resolved.active) {
+        if (isUnrecoverableStartupFailure(state)) {
+          return {
+            ...state,
+            pendingSend: false,
+            sending: false,
+            streaming: false,
+            approvalRequestPending: false,
+            error: CONVERSATION_START_FAILURE,
+          };
+        }
+        return state;
+      }
+      return {
+        ...resolved.state,
+        error: asString(payload.error, 'An error occurred.'),
+        streaming: false,
+        sending: false,
+        // A turn-scoped error also invalidates any approval request awaiting
+        // a response — the gateway that just errored is unlikely to still
+        // answer it, and the synchronous approveLockRef mirrors this field.
+        approvalRequestPending: false,
+      };
     }
 
     case 'local/send': {
       const message: ChatTranscriptMessage = {
-        id: `user-${Date.now()}-${state.messages.length}`,
+        // Sourced from the reducer-owned `messageSeq` counter — see the
+        // `server/agent:end` case for why `messages.length`/`Date.now()` are
+        // not collision-safe once MAX_MESSAGES is reached under a flood.
+        id: `user-${state.messageSeq}`,
         role: 'user',
         text: action.content,
       };
       return {
         ...state,
-        messages: [...state.messages, message],
+        messages: capPush(state.messages, message, MAX_MESSAGES),
+        messageSeq: state.messageSeq + 1,
         error: null,
+        sending: true,
         pendingSend: state.conversationId === null ? true : state.pendingSend,
       };
     }
 
+    case 'local/disconnect': {
+      // A transient socket disconnect must not leave the UI stuck waiting on
+      // a turn/approval/send that will never resolve on this connection.
+      return {
+        ...state,
+        streaming: false,
+        sending: false,
+        pendingSend: false,
+        approvalRequestPending: false,
+      };
+    }
+
     case 'local/approve-request': {
       // Only one approval request may be outstanding at a time; a second request
       // before the first resolves is ignored so it cannot overwrite the original
@@ -315,6 +614,32 @@ export function useChatConnection(): ChatConnectionValue {
   // Reducer state updates are batched/async; a ref lets a double-click on "Run
   // approved command" be rejected synchronously, before React ever re-renders.
   const executedApprovalIds = useRef<Set<string>>(new Set());
+  // Synchronous send lock: `state.sending` (reducer) drives the reactive UI
+  // disabled state, but reducer updates are batched/async, so two sendMessage
+  // calls issued in the same tick would both read the same stale `state`. This
+  // ref is the source of truth the guard checks against.
+  //
+  // It is intentionally never cleared directly by an event handler — a stale
+  // agent:end/error for a conversation other than the active one must not be
+  // able to re-arm the lock for a turn that is still genuinely in flight.
+  // Instead it is synchronized from `state.sending` below, which the reducer
+  // only flips on an *accepted* (conversation-scoped, or unconditional
+  // disconnect) transition — resolveScopedConversation already rejects a
+  // foreign-conversation agent:end/error by returning the unchanged state, so
+  // `state.sending` (and therefore this ref) cannot be released by one.
+  const sendLockRef = useRef(false);
+  useEffect(() => {
+    sendLockRef.current = state.sending;
+  }, [state.sending]);
+
+  // Same design as sendLockRef, mirroring `state.approvalRequestPending`:
+  // closes the same-tick double-dispatch race for approveCommand, and is
+  // synchronized from (not cleared by) the reducer's own accepted
+  // command:approval/error/disconnect transitions.
+  const approveLockRef = useRef(false);
+  useEffect(() => {
+    approveLockRef.current = state.approvalRequestPending;
+  }, [state.approvalRequestPending]);
 
   useEffect(() => {
     const socket = getSocket();
@@ -331,8 +656,9 @@ export function useChatConnection(): ChatConnectionValue {
       dispatch({ type: 'server/agent:tool:start', payload });
     const onToolEnd = (payload: ToolEndPayload): void =>
       dispatch({ type: 'server/agent:tool:end', payload });
-    const onAgentEnd = (payload: AgentEndPayload): void =>
+    const onAgentEnd = (payload: AgentEndPayload): void => {
       dispatch({ type: 'server/agent:end', payload });
+    };
     const onSessionInfo = (payload: SessionInfoPayload): void =>
       dispatch({ type: 'server/session:info', payload });
     const onCommandsManifest = (payload: CommandManifestPayload): void =>
@@ -343,7 +669,12 @@ export function useChatConnection(): ChatConnectionValue {
       dispatch({ type: 'server/command:approval', payload });
     const onSystemReload = (payload: SystemReloadPayload): void =>
       dispatch({ type: 'server/system:reload', payload });
-    const onError = (payload: ErrorPayload): void => dispatch({ type: 'server/error', payload });
+    const onError = (payload: ErrorPayload): void => {
+      dispatch({ type: 'server/error', payload });
+    };
+    const onDisconnect = (): void => {
+      dispatch({ type: 'local/disconnect' });
+    };
 
     socket.on('message:ack', onMessageAck);
     socket.on('agent:start', onAgentStart);
@@ -358,6 +689,7 @@ export function useChatConnection(): ChatConnectionValue {
     socket.on('command:approval', onCommandApproval);
     socket.on('system:reload', onSystemReload);
     socket.on('error', onError);
+    socket.on('disconnect', onDisconnect);
 
     if (!socket.connected) {
       socket.connect();
@@ -377,13 +709,15 @@ export function useChatConnection(): ChatConnectionValue {
       socket.off('command:approval', onCommandApproval);
       socket.off('system:reload', onSystemReload);
       socket.off('error', onError);
+      socket.off('disconnect', onDisconnect);
       destroySocket();
     };
   }, []);
 
   const actions: ChatConnectionActions = {
     sendMessage: ({ content, provider, modelId }) => {
-      if (state.streaming) return;
+      if (sendLockRef.current || state.streaming || state.sending) return;
+      sendLockRef.current = true;
       const socket = getSocket();
       if (!socket.connected) socket.connect();
       dispatch({ type: 'local/send', content });
@@ -415,7 +749,8 @@ export function useChatConnection(): ChatConnectionValue {
 
     approveCommand: ({ command, args }) => {
       if (state.conversationId === null) return;
-      if (state.approvalRequestPending) return;
+      if (approveLockRef.current || state.approvalRequestPending) return;
+      approveLockRef.current = true;
       dispatch({ type: 'local/approve-request', command, args });
       const socket = getSocket();
       socket.emit('command:approve', { conversationId: state.conversationId, command, args });
@@ -423,14 +758,29 @@ export function useChatConnection(): ChatConnectionValue {
 
     runApprovedCommand: () => {
       const { conversationId, approval, pendingApproval } = state;
-      if (conversationId === null || !approval?.success || !approval.approvalId) return;
+      if (conversationId === null) return;
+      // Defense-in-depth: the reducer already normalizes `success`/`approvalId`
+      // before storing `approval` (a matching command string alone is not
+      // proof of a genuine approval), but this action must never rely on that
+      // alone — a literal-`true` and non-empty-string check here too.
+      if (approval?.success !== true) return;
+      if (typeof approval.approvalId !== 'string' || approval.approvalId.length === 0) return;
       if (!pendingApproval || pendingApproval.command !== approval.command) return;
       if (executedApprovalIds.current.has(approval.approvalId)) return;
+      if (executedApprovalIds.current.size >= MAX_EXECUTED_APPROVAL_IDS) {
+        // Bounded dedup set: evict the oldest entry (Sets iterate in
+        // insertion order) so this can never grow without limit.
+        const oldest = executedApprovalIds.current.values().next().value;
+        if (oldest !== undefined) executedApprovalIds.current.delete(oldest);
+      }
       executedApprovalIds.current.add(approval.approvalId);
       const socket = getSocket();
       socket.emit('command:execute', {
         conversationId,
-        command: approval.command,
+        // Sourced entirely from the frozen local pendingApproval, not the
+        // server-echoed approval payload — the equality guard above is
+        // defense-in-depth, not the source of truth for what gets executed.
+        command: pendingApproval.command,
         args: pendingApproval.args,
         approvalId: approval.approvalId,
       });
diff --git a/apps/web/src/spa/pages/chat-error-boundary.spec.tsx b/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
new file mode 100644
index 00000000..0f480967
--- /dev/null
+++ b/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
@@ -0,0 +1,58 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { createMemoryRouter, RouterProvider, type RouteObject } from 'react-router-dom';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { ChatRouteErrorBoundary } from './chat-error-boundary';
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    configurable: true,
+    value: true,
+  });
+});
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
+});
+
+function Boom(): never {
+  throw new Error('render blew up');
+}
+
+let root: Root | null;
+let container: HTMLElement;
+
+afterEach(async () => {
+  await act(async () => {
+    root?.unmount();
+  });
+  document.body.replaceChildren();
+  root = null;
+});
+
+describe('ChatRouteErrorBoundary', () => {
+  it('renders a recoverable, non-blank fallback when the /chat route element throws during render', async () => {
+    const routeObjects: RouteObject[] = [
+      { path: '/chat', element: <Boom />, errorElement: <ChatRouteErrorBoundary /> },
+    ];
+    const router = createMemoryRouter(routeObjects, { initialEntries: ['/chat'] });
+
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      await act(async () => {
+        root?.render(<RouterProvider router={router} />);
+      });
+
+      expect(consoleErrorSpy).toHaveBeenCalled();
+    } finally {
+      consoleErrorSpy.mockRestore();
+    }
+
+    expect(container.textContent).not.toBe('');
+    expect(container.querySelector('[role="alert"]')).toBeTruthy();
+  });
+});
diff --git a/apps/web/src/spa/pages/chat-error-boundary.tsx b/apps/web/src/spa/pages/chat-error-boundary.tsx
new file mode 100644
index 00000000..fc08dffa
--- /dev/null
+++ b/apps/web/src/spa/pages/chat-error-boundary.tsx
@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+import { useRouteError } from 'react-router-dom';
+
+/**
+ * `/chat` renders live, server-driven state (streamed text, tool calls,
+ * manifests) that can carry malformed payloads no compile-time contract can
+ * fully rule out at every dereference site. This is the last line of
+ * defense: if something still throws during render, show a recoverable
+ * alert instead of leaving the user on a blank/white screen.
+ */
+export function ChatRouteErrorBoundary(): ReactElement {
+  useRouteError();
+
+  return (
+    <div role="alert" className="flex min-h-screen flex-col items-center justify-center gap-3 p-8">
+      <p className="text-sm font-medium">Something went wrong loading chat.</p>
+      <a href="/chat" className="text-sm underline">
+        Reload chat
+      </a>
+    </div>
+  );
+}
diff --git a/apps/web/src/spa/pages/chat.spec.tsx b/apps/web/src/spa/pages/chat.spec.tsx
index 43a174a9..fec2c15b 100644
--- a/apps/web/src/spa/pages/chat.spec.tsx
+++ b/apps/web/src/spa/pages/chat.spec.tsx
@@ -233,7 +233,7 @@ describe('ChatPage', () => {
     });
   });
 
-  it('shows visible alert surfaces for a server error and a failed command result', async () => {
+  it('shows visible alert surfaces for a server error and a stable failure copy for a failed command result', async () => {
     await act(async () => {
       fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
       fake.serverEmit('error', { conversationId: 'c1', error: 'The model is unavailable' });
@@ -241,14 +241,116 @@ describe('ChatPage', () => {
         conversationId: 'c1',
         command: 'model',
         success: false,
-        message: 'unknown model id',
+        message: 'raw internal detail: stack trace at line 42',
       });
     });
 
     const alerts = [...container.querySelectorAll('[role="alert"]')];
     const alertText = alerts.map((node) => node.textContent).join(' ');
     expect(alertText).toContain('The model is unavailable');
-    expect(alertText).toContain('unknown model id');
+    // Sanitized client copy, not the raw server-provided detail.
+    expect(alertText).toContain('Command failed.');
+    expect(alertText).not.toContain('raw internal detail');
+  });
+
+  it('renders a safe fallback when session:info arrives with a malformed (non-array) availableThinkingLevels, without throwing', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmitRaw('session:info', {
+        conversationId: 'c1',
+        provider: 'anthropic',
+        modelId: 'claude',
+        thinkingLevel: 'medium',
+        availableThinkingLevels: null,
+      });
+    });
+
+    expect(container.querySelector('section[aria-label="Session info"]')).toBeTruthy();
+    const select = container.querySelector(
+      'select[aria-label="Thinking level"]',
+    ) as HTMLSelectElement;
+    expect(select).toBeTruthy();
+    // A malformed level list still shows a visible, safe placeholder option
+    // rather than a silently empty select.
+    expect([...select.options]).toHaveLength(1);
+    expect(select.options[0]?.textContent).toMatch(/unavailable/i);
+
+    await act(async () => {
+      selectValue(select, '');
+    });
+    expect(fake.emitted.filter((e) => e.event === 'set:thinking')).toHaveLength(0);
+  });
+
+  it('renders honest unavailable labels — not fabricated zeros — when agent:end usage has malformed/missing numeric fields', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmitRaw('agent:end', {
+        conversationId: 'c1',
+        usage: {
+          provider: { nested: 'object' },
+          modelId: undefined,
+          thinkingLevel: 'medium',
+          tokens: { total: 'not-a-number' },
+          cost: undefined,
+          context: { percent: null, window: 200000 },
+        },
+      });
+    });
+
+    const usage = container.querySelector('[aria-label="Usage"]');
+    expect(usage).toBeTruthy();
+    expect(usage?.textContent).toContain('tokens unavailable');
+    expect(usage?.textContent).toContain('cost unavailable');
+    expect(usage?.textContent).not.toContain('0 tokens');
+    expect(usage?.textContent).not.toContain('$0.0000');
+    expect(usage?.textContent).toContain('unknown/unknown');
+  });
+
+  it('renders a safe fallback for message:ack when messageId is a malformed non-string value, without throwing', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('message:ack', { conversationId: 'c1', messageId: { bad: 'object' } });
+      }),
+    ).resolves.not.toThrow();
+
+    const status = [...container.querySelectorAll('[role="status"]')].find((node) =>
+      node.textContent?.includes('Message accepted'),
+    );
+    expect(status).toBeTruthy();
+    // A malformed messageId gets a stable, visible fallback — never blank,
+    // never the raw object.
+    expect(status?.textContent).toContain('unknown');
+  });
+
+  it('renders safely and does not throw when system:reload.message is a malformed non-string value', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('system:reload', {
+          commands: [],
+          skills: [],
+          providers: [],
+          message: { bad: 'object' },
+        });
+      }),
+    ).resolves.not.toThrow();
+
+    const status = container.querySelector('[role="status"]');
+    expect(status).toBeTruthy();
+    // A malformed reload message renders a stable, visible fallback rather
+    // than a silently empty status line.
+    expect(status?.textContent).toContain('Commands reloaded.');
+  });
+
+  it('renders safely and does not throw when a scoped error carries a malformed non-string error value', async () => {
+    await expect(
+      act(async () => {
+        fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+        fake.serverEmitRaw('error', { conversationId: 'c1', error: ['not', 'a', 'string'] });
+      }),
+    ).resolves.not.toThrow();
+
+    expect(container.querySelector('[role="alert"]')).toBeTruthy();
   });
 
   it('sends a message with optional provider/model fields and emits abort from the Stop control', async () => {
diff --git a/apps/web/src/spa/pages/chat.tsx b/apps/web/src/spa/pages/chat.tsx
index 16092aa1..1a26fa82 100644
--- a/apps/web/src/spa/pages/chat.tsx
+++ b/apps/web/src/spa/pages/chat.tsx
@@ -2,10 +2,25 @@ import type { ReactElement } from 'react';
 import { CommandsPanel } from '@/spa/chat/commands-panel';
 import { Composer } from '@/spa/chat/composer';
 import { MessageTranscript } from '@/spa/chat/message-transcript';
+import { asFiniteNumberOrNull, asString } from '@/spa/chat/runtime-guards';
 import { SessionPanel } from '@/spa/chat/session-panel';
 import { ToolCallList } from '@/spa/chat/tool-call-list';
 import { useChatConnection } from '@/spa/chat/use-chat-connection';
 
+/** Renders a real value normally, but an honest "unavailable" label instead
+ * of a fabricated `0` for a missing/malformed count — a real `0 tokens` and
+ * an unknown token count must never look the same. */
+function formatTokens(value: unknown): string {
+  const tokens = asFiniteNumberOrNull(value);
+  return tokens === null ? 'tokens unavailable' : `${tokens} tokens`;
+}
+
+/** Same honesty guarantee as `formatTokens`, for cost. */
+function formatCost(value: unknown): string {
+  const cost = asFiniteNumberOrNull(value);
+  return cost === null ? 'cost unavailable' : `$${cost.toFixed(4)}`;
+}
+
 export function ChatPage(): ReactElement {
   const { state, actions } = useChatConnection();
   const hasConversation = state.conversationId !== null;
@@ -18,19 +33,20 @@ export function ChatPage(): ReactElement {
 
       {state.systemReload ? (
         <div role="status" className="border-b px-4 py-2 text-sm">
-          {state.systemReload.message}
+          {asString(state.systemReload.message)}
         </div>
       ) : null}
 
       {state.error ? (
         <div role="alert" className="border-b px-4 py-2 text-sm">
-          {state.error}
+          {asString(state.error)}
         </div>
       ) : null}
 
       {state.ack ? (
         <div role="status" className="border-b px-4 py-1 text-xs opacity-70">
-          Message accepted · conversation {state.ack.conversationId} · id {state.ack.messageId}
+          Message accepted · conversation {asString(state.ack.conversationId, 'unknown')} · id{' '}
+          {asString(state.ack.messageId, 'unknown')}
         </div>
       ) : null}
 
@@ -48,8 +64,8 @@ export function ChatPage(): ReactElement {
 
       {state.usage ? (
         <div aria-label="Usage" className="px-4 pb-2 text-xs opacity-80">
-          {state.usage.tokens.total} tokens · ${state.usage.cost.toFixed(4)} ·{' '}
-          {state.usage.provider}/{state.usage.modelId}
+          {formatTokens(state.usage.tokens?.total)} · {formatCost(state.usage.cost)} ·{' '}
+          {asString(state.usage.provider, 'unknown')}/{asString(state.usage.modelId, 'unknown')}
         </div>
       ) : null}
 
@@ -68,6 +84,7 @@ export function ChatPage(): ReactElement {
         onSend={actions.sendMessage}
         onStop={actions.abort}
         streaming={state.streaming}
+        sending={state.sending}
         hasConversation={hasConversation}
       />
     </div>
-- 
2.54.0


From 48bb19310dd3b7debc2d527b8e64985d6084c145 Mon Sep 17 00:00:00 2001
From: "shaggy (mosaic-dev box)" <shaggy@mosaic-dev.local>
Date: Mon, 10 Aug 2026 01:58:27 -0500
Subject: [PATCH 3/6] fix(web): close P3 chat re-review findings

---
 apps/web/src/lib/socket.spec.ts               |  41 ++-
 apps/web/src/spa/chat/commands-panel.spec.tsx |  60 +++
 apps/web/src/spa/chat/commands-panel.tsx      |  26 +-
 apps/web/src/spa/chat/runtime-guards.ts       |   8 +
 apps/web/src/spa/chat/session-panel.tsx       |   9 +-
 .../src/spa/chat/use-chat-connection.spec.tsx | 343 +++++++++++++++++-
 apps/web/src/spa/chat/use-chat-connection.ts  | 267 ++++++++++++--
 .../spa/pages/chat-error-boundary.spec.tsx    |  37 +-
 apps/web/src/spa/pages/chat.spec.tsx          |  45 ++-
 pnpm-lock.yaml                                |   3 +
 10 files changed, 774 insertions(+), 65 deletions(-)

diff --git a/apps/web/src/lib/socket.spec.ts b/apps/web/src/lib/socket.spec.ts
index 9a70dda3..6d572df4 100644
--- a/apps/web/src/lib/socket.spec.ts
+++ b/apps/web/src/lib/socket.spec.ts
@@ -10,25 +10,45 @@ vi.mock('socket.io-client', () => ({
 
 import { destroySocket, getSocket } from './socket';
 
-function createMockSocket(): {
+interface MockChatSocket {
   on: ReturnType<typeof vi.fn>;
   offAny: ReturnType<typeof vi.fn>;
   disconnect: ReturnType<typeof vi.fn>;
-} {
-  const mockSocket = {
-    on: vi.fn(() => mockSocket),
+  /** Test-only helper: fires every handler registered for `event` via
+   * `.on`, mirroring how a real socket.io-client instance invokes its own
+   * listeners (e.g. calling the registered `disconnect` handler(s) on a
+   * real transient disconnect). */
+  trigger(event: string): void;
+}
+
+function createMockSocket(): MockChatSocket {
+  const handlers = new Map<string, Set<() => void>>();
+  const mockSocket: MockChatSocket = {
+    on: vi.fn((event: string, handler: () => void) => {
+      if (!handlers.has(event)) handlers.set(event, new Set());
+      handlers.get(event)?.add(handler);
+      return mockSocket;
+    }),
     offAny: vi.fn(() => mockSocket),
     disconnect: vi.fn(() => mockSocket),
+    trigger(event: string): void {
+      for (const handler of handlers.get(event) ?? []) handler();
+    },
   };
   return mockSocket;
 }
 
+let currentMock!: MockChatSocket;
+
 describe('chat socket', () => {
   beforeEach(() => {
     ioMock.mockReset();
     // A fresh object per io() call so identity assertions (same singleton vs.
     // a genuinely new instance) are meaningful.
-    ioMock.mockImplementation(() => createMockSocket());
+    ioMock.mockImplementation(() => {
+      currentMock = createMockSocket();
+      return currentMock;
+    });
   });
 
   afterEach(() => {
@@ -52,9 +72,14 @@ describe('chat socket', () => {
     const first = getSocket();
 
     // socket.ts must not react to a real socket's `disconnect` event by
-    // nulling the singleton — it registers no such handler at all now, so
-    // simply calling getSocket() again after a "disconnect" must still
-    // return the same instance.
+    // nulling the singleton — it registers no such handler at all now.
+    // Actually fire every handler registered via `.on('disconnect', ...)`
+    // (mirroring a real socket.io-client reconnect) instead of merely
+    // calling getSocket() again: this is what makes the test fail if
+    // production reintroduces `socket.on('disconnect', () => { socket =
+    // null; })`, since that handler would run here and null the singleton
+    // before the next getSocket() call.
+    currentMock.trigger('disconnect');
     const second = getSocket();
 
     expect(second).toBe(first);
diff --git a/apps/web/src/spa/chat/commands-panel.spec.tsx b/apps/web/src/spa/chat/commands-panel.spec.tsx
index 6d0c7a85..ade87a98 100644
--- a/apps/web/src/spa/chat/commands-panel.spec.tsx
+++ b/apps/web/src/spa/chat/commands-panel.spec.tsx
@@ -174,6 +174,66 @@ describe('CommandsPanel', () => {
     ).toBe(false);
   });
 
+  it('shows the guarded server-provided denial reason for a denied approval', async () => {
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[]}
+        approval={{
+          conversationId: 'c1',
+          command: 'deploy',
+          success: false,
+          message: 'Not authorized',
+        }}
+        pendingApproval={{ command: 'deploy', args: 'prod' }}
+        hasConversation
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    expect(container?.textContent).toContain('Not authorized');
+  });
+
+  it('falls back to a stable "Denied." copy when a denial has no usable message', async () => {
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[]}
+        approval={{ conversationId: 'c1', command: 'deploy', success: false }}
+        pendingApproval={{ command: 'deploy', args: 'prod' }}
+        hasConversation
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    expect(container?.textContent).toContain('Denied.');
+  });
+
+  it('shows the guarded contract-provided reason for a failed command result, falling back to a stable copy only when absent', async () => {
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[
+          { conversationId: 'c1', command: 'model', success: false, message: 'Unknown model' },
+          { conversationId: 'c1', command: 'deploy', success: false },
+        ]}
+        approval={null}
+        pendingApproval={null}
+        hasConversation={false}
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    expect(container?.textContent).toContain('Unknown model');
+    expect(container?.textContent).toContain('Command failed.');
+  });
+
   it('does not throw when the manifest fields are malformed (non-array commands/skills)', async () => {
     const manifest = {
       commands: 'not-an-array',
diff --git a/apps/web/src/spa/chat/commands-panel.tsx b/apps/web/src/spa/chat/commands-panel.tsx
index 79b98af6..b0d50eca 100644
--- a/apps/web/src/spa/chat/commands-panel.tsx
+++ b/apps/web/src/spa/chat/commands-panel.tsx
@@ -1,14 +1,16 @@
 import { useState, type ReactElement } from 'react';
 import type { PendingApproval } from './use-chat-connection';
-import { asString } from './runtime-guards';
+import { asNonEmptyString, asString } from './runtime-guards';
 import type {
   CommandManifest,
   SlashCommandApprovalResultPayload,
   SlashCommandResultPayload,
 } from '@/lib/chat-contract';
 
-/** Stable client copy shown for a failed command — never the raw server
- * detail, which could leak internal error text to the user. */
+/** Stable fallback copy shown for a failed command only when the server's
+ * own guarded, non-empty `message` (e.g. "Unknown model") is absent or
+ * malformed — the structured contract reason itself is otherwise shown
+ * directly, never a raw thrown exception, stack trace, or object value. */
 const COMMAND_FAILURE_COPY = 'Command failed.';
 
 interface CommandsPanelProps {
@@ -104,11 +106,17 @@ export function CommandsPanel({
 
       {approval ? (
         <div role={approval.success ? 'status' : 'alert'} className="flex items-center gap-2">
-          {/* Stable client copy only — never the server-controlled
-              approval.message or echoed approval.command as the primary
-              confirmation. The frozen local pendingApproval below (not this
-              line) is the sole authoritative statement of what will run. */}
-          <span>{approval.success ? 'Approved.' : 'Denied.'}</span>
+          {/* A successful approval shows stable client copy only — never
+              the server-controlled approval.message or echoed
+              approval.command as the primary confirmation. The frozen local
+              pendingApproval below (not this line) is the sole authoritative
+              statement of what will run. A denial, by contrast, is not an
+              execution authority and safely surfaces the guarded structured
+              reason the server gave (e.g. "Not authorized"), falling back to
+              a stable copy only when absent/malformed. */}
+          <span>
+            {approval.success ? 'Approved.' : asNonEmptyString(approval.message, 'Denied.')}
+          </span>
           {canRunApproved && pendingApproval ? (
             <>
               {/* Authoritative frozen local command+args — what the click below
@@ -135,7 +143,7 @@ export function CommandsPanel({
                 ? typeof result.message === 'string' && result.message
                   ? ` — ${result.message}`
                   : ''
-                : ` — ${COMMAND_FAILURE_COPY}`}
+                : ` — ${asNonEmptyString(result.message, COMMAND_FAILURE_COPY)}`}
             </li>
           ))}
         </ul>
diff --git a/apps/web/src/spa/chat/runtime-guards.ts b/apps/web/src/spa/chat/runtime-guards.ts
index b879f58d..2ea627bd 100644
--- a/apps/web/src/spa/chat/runtime-guards.ts
+++ b/apps/web/src/spa/chat/runtime-guards.ts
@@ -10,6 +10,14 @@ export function asString(value: unknown, fallback = ''): string {
   return typeof value === 'string' ? value : fallback;
 }
 
+/** Like `asString`, but an empty string also falls back — used for guarded
+ * contract-provided reason strings (e.g. a denial or failure message) where
+ * an empty string is not a meaningful value to display in place of the
+ * stable fallback copy. */
+export function asNonEmptyString(value: unknown, fallback: string): string {
+  return typeof value === 'string' && value.length > 0 ? value : fallback;
+}
+
 export function asFiniteNumber(value: unknown, fallback = 0): number {
   return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
 }
diff --git a/apps/web/src/spa/chat/session-panel.tsx b/apps/web/src/spa/chat/session-panel.tsx
index b89422ba..74e38e84 100644
--- a/apps/web/src/spa/chat/session-panel.tsx
+++ b/apps/web/src/spa/chat/session-panel.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import type { SessionInfoPayload } from '@/lib/chat-contract';
+import { MAX_MANIFEST_ITEMS } from './limits';
 import { asString, asStringArray } from './runtime-guards';
 
 interface SessionPanelProps {
@@ -15,7 +16,13 @@ export function SessionPanel({
 }: SessionPanelProps): ReactElement | null {
   if (!sessionInfo) return null;
 
-  const availableThinkingLevels = asStringArray(sessionInfo.availableThinkingLevels);
+  // The reducer already caps this before storing it, but the render site
+  // defends independently — a hostile payload must never be able to force
+  // this <select> to lay out an unbounded number of options.
+  const availableThinkingLevels = asStringArray(sessionInfo.availableThinkingLevels).slice(
+    0,
+    MAX_MANIFEST_ITEMS,
+  );
   const hasThinkingLevels = availableThinkingLevels.length > 0;
 
   return (
diff --git a/apps/web/src/spa/chat/use-chat-connection.spec.tsx b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
index bd394772..95ad3b90 100644
--- a/apps/web/src/spa/chat/use-chat-connection.spec.tsx
+++ b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
@@ -1,9 +1,10 @@
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createFakeChatSocket } from './test-support/fake-chat-socket';
+import { createFakeChatSocket, type EmittedEvent } from './test-support/fake-chat-socket';
 import {
   MAX_COMMAND_RESULTS,
+  MAX_EXECUTED_APPROVAL_IDS,
   MAX_MANIFEST_ITEMS,
   MAX_MESSAGES,
   MAX_STREAM_CHARS,
@@ -430,6 +431,14 @@ describe('useChatConnection', () => {
     expect(latest?.state.conversationId).toBe('c1');
     expect(latest?.state.error).toBe('Failed to start agent session. Please try again.');
     expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.sending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'retry' });
+    });
+
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+    expect(latest?.state.messages.some((m) => m.text === 'retry')).toBe(true);
   });
 
   it('stops streaming when a typed error arrives mid-turn', async () => {
@@ -881,6 +890,10 @@ describe('useChatConnection', () => {
 
     expect(latest?.state.manifest?.commands).toEqual([]);
     expect(latest?.state.manifest?.skills).toEqual([]);
+    // The raw stored reload must be normalized the same way as the manifest —
+    // never left holding the malformed raw value.
+    expect(latest?.state.systemReload?.commands).toEqual([]);
+    expect(latest?.state.systemReload?.skills).toEqual([]);
   });
 
   it('falls back to a safe tool label when agent:tool:start carries a non-string toolName', async () => {
@@ -932,19 +945,74 @@ describe('useChatConnection', () => {
     expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
   });
 
-  it('caps streamed agent:text at MAX_STREAM_CHARS, keeping only the most recent characters', async () => {
+  it('caps streamed agent:text at MAX_STREAM_CHARS behind a visible marker disclosing the honest dropped-character count across multiple appends', async () => {
     await act(async () => {
       fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
       fake.serverEmit('agent:start', { conversationId: 'c1' });
     });
 
+    const firstChunk = 'a'.repeat(MAX_STREAM_CHARS);
+    const secondChunk = 'b'.repeat(500);
+    const thirdChunk = 'c'.repeat(300);
+
     await act(async () => {
-      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'a'.repeat(MAX_STREAM_CHARS) });
-      fake.serverEmit('agent:text', { conversationId: 'c1', text: 'b'.repeat(10) });
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: firstChunk });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: secondChunk });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:text', { conversationId: 'c1', text: thirdChunk });
     });
 
-    expect(latest?.state.text).toHaveLength(MAX_STREAM_CHARS);
-    expect(latest?.state.text.endsWith('b'.repeat(10))).toBe(true);
+    const text = latest?.state.text ?? '';
+    expect(text.length).toBeLessThanOrEqual(MAX_STREAM_CHARS);
+
+    const match = text.match(/^…\[truncated (\d+) characters\]…/);
+    expect(match).not.toBeNull();
+    const markerLength = match?.[0].length ?? 0;
+    const droppedCount = Number(match?.[1]);
+    const tail = text.slice(markerLength);
+    const totalStreamed = firstChunk.length + secondChunk.length + thirdChunk.length;
+
+    // The marker's N must be the actual count of original characters no
+    // longer visible — not an estimate — across all three appends.
+    expect(droppedCount).toBe(totalStreamed - tail.length);
+    expect(tail.endsWith(thirdChunk)).toBe(true);
+  });
+
+  it('caps streamed agent:thinking at MAX_STREAM_CHARS behind the same honest truncation marker as agent:text', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+
+    const firstChunk = 'x'.repeat(MAX_STREAM_CHARS);
+    const secondChunk = 'y'.repeat(500);
+    const thirdChunk = 'z'.repeat(300);
+
+    await act(async () => {
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: firstChunk });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: secondChunk });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:thinking', { conversationId: 'c1', text: thirdChunk });
+    });
+
+    const thinking = latest?.state.thinking ?? '';
+    expect(thinking.length).toBeLessThanOrEqual(MAX_STREAM_CHARS);
+
+    const match = thinking.match(/^…\[truncated (\d+) characters\]…/);
+    expect(match).not.toBeNull();
+    const markerLength = match?.[0].length ?? 0;
+    const droppedCount = Number(match?.[1]);
+    const tail = thinking.slice(markerLength);
+    const totalStreamed = firstChunk.length + secondChunk.length + thirdChunk.length;
+
+    expect(droppedCount).toBe(totalStreamed - tail.length);
+    expect(tail.endsWith(thirdChunk)).toBe(true);
   });
 
   it('caps commandResults at MAX_COMMAND_RESULTS when flooded with command:result events', async () => {
@@ -983,7 +1051,7 @@ describe('useChatConnection', () => {
     expect(latest?.state.manifest?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
   });
 
-  it('caps a system:reload manifest replacement at MAX_MANIFEST_ITEMS', async () => {
+  it('caps a system:reload manifest replacement at MAX_MANIFEST_ITEMS for both the raw stored reload and the manifest', async () => {
     const commands = Array.from({ length: MAX_MANIFEST_ITEMS + 5 }, (_, i) => ({
       name: `cmd${i}`,
       aliases: [],
@@ -992,17 +1060,48 @@ describe('useChatConnection', () => {
       execution: 'socket' as const,
       available: true,
     }));
+    const skills = Array.from({ length: MAX_MANIFEST_ITEMS + 5 }, (_, i) => ({
+      name: `skill${i}`,
+      description: '',
+      available: true,
+    }));
 
     await act(async () => {
       fake.serverEmit('system:reload', {
         commands,
-        skills: [],
+        skills,
         providers: ['anthropic'],
         message: 'reloaded',
       });
     });
 
     expect(latest?.state.manifest?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
+    expect(latest?.state.manifest?.skills).toHaveLength(MAX_MANIFEST_ITEMS);
+    // The raw stored reload (state.systemReload) must be bounded the same
+    // way as the manifest derived from it — a hostile/oversized broadcast
+    // must never leave the uncapped raw payload sitting in state.
+    expect(latest?.state.systemReload?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
+    expect(latest?.state.systemReload?.skills).toHaveLength(MAX_MANIFEST_ITEMS);
+  });
+
+  it('caps availableThinkingLevels before storing a hostile session:info payload', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    const hostileLevels = Array.from({ length: MAX_MANIFEST_ITEMS + 50 }, (_, i) => `level-${i}`);
+
+    await act(async () => {
+      fake.serverEmit('session:info', {
+        conversationId: 'c1',
+        provider: 'anthropic',
+        modelId: 'claude',
+        thinkingLevel: 'level-0',
+        availableThinkingLevels: hostileLevels,
+      });
+    });
+
+    expect(latest?.state.sessionInfo?.availableThinkingLevels).toHaveLength(MAX_MANIFEST_ITEMS);
   });
 
   it('ignores a malformed (object) conversationId on the establishing message:ack, leaving the turn recoverable for a later valid ack', async () => {
@@ -1245,6 +1344,234 @@ describe('useChatConnection', () => {
     expect(new Set(ids).size).toBe(ids.length);
   });
 
+  it('fails closed after the consumed approval cache saturates and rejects replay of the ID the old eviction policy forgot', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    // Fill the bounded dedup set to capacity with genuinely distinct,
+    // legitimately approved and executed IDs. Each step of approve/respond/
+    // run gets its own `act()` so a render (and the ref-syncing effects)
+    // lands between them — combining approve+respond in one act would let
+    // `approvalRequestPending` flip true-then-false within a single commit,
+    // skipping the render the lock-sync effect depends on.
+    for (let i = 0; i < MAX_EXECUTED_APPROVAL_IDS; i += 1) {
+      await act(async () => {
+        latest?.actions.approveCommand({ command: 'deploy' });
+      });
+      await act(async () => {
+        fake.serverEmit('command:approval', {
+          conversationId: 'c1',
+          command: 'deploy',
+          success: true,
+          approvalId: `ap-${i}`,
+        });
+      });
+      await act(async () => {
+        latest?.actions.runApprovedCommand();
+      });
+    }
+
+    // One more distinct approval once the set is already full. The old
+    // eviction policy would delete the oldest entry (ap-0) to make room and
+    // let this execute; the fixed behavior must deny it instead.
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy' });
+    });
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap-overflow',
+      });
+    });
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+    });
+
+    // A fresh local approval request, replaying the very first approvalId —
+    // this is the replay the old eviction policy would have let through a
+    // second time because it had forgotten ap-0 ever ran.
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy' });
+    });
+    await act(async () => {
+      fake.serverEmit('command:approval', {
+        conversationId: 'c1',
+        command: 'deploy',
+        success: true,
+        approvalId: 'ap-0',
+      });
+    });
+    await act(async () => {
+      latest?.actions.runApprovedCommand();
+    });
+
+    const executes = fake.emitted.filter(
+      (e): e is EmittedEvent<'command:execute'> => e.event === 'command:execute',
+    );
+    // Only the original MAX_EXECUTED_APPROVAL_IDS executions ever happened —
+    // neither the overflow ID nor the replay of ap-0 produced a new one.
+    expect(executes).toHaveLength(MAX_EXECUTED_APPROVAL_IDS);
+    expect(executes.filter((e) => e.payload.approvalId === 'ap-0')).toHaveLength(1);
+    expect(executes.some((e) => e.payload.approvalId === 'ap-overflow')).toBe(false);
+  });
+
+  it('does not unlock turn B when a stale same-conversation agent:end from turn A arrives', async () => {
+    // Turn A completes normally on c1.
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    // Turn B is sent (same conversation — the wire gives it no distinct
+    // turn id, only the same conversationId as turn A).
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn B' });
+    });
+    expect(latest?.state.sending).toBe(true);
+
+    // Turn A's agent:end arrives late (network reordering) for the SAME
+    // conversation, before turn B's own ack/start ever arrived. A
+    // conversationId-only check cannot tell this apart from turn B's own
+    // terminal event, so this must not unlock — turn B has not yet been
+    // armed by its own accepted ack/start.
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(true);
+    // A recognized-stale terminal must be a true no-op — it must not touch
+    // streaming/error, which legitimately belong to the still in-flight
+    // turn B.
+    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.error).toBeNull();
+
+    // An attempted turn C must still be rejected — the lock is still held.
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn C attempt' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+    expect(latest?.state.messages.some((m) => m.text === 'turn C attempt')).toBe(false);
+
+    // Turn B's own, current ack/start arms the lock, and its own terminal
+    // event can then legitimately release it, allowing a later send.
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm2' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn D' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+  });
+
+  it('does not unlock turn B when a stale same-conversation error from turn A arrives', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn B' });
+    });
+    expect(latest?.state.sending).toBe(true);
+
+    // A stale error for turn A, same conversationId, arrives before turn
+    // B's own ack/start — must not unlock turn B.
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'c1', error: 'stale turn A failure' });
+    });
+    expect(latest?.state.sending).toBe(true);
+    // A recognized-stale terminal must be a true no-op — its message must
+    // never be displayed/stored, and it must not touch streaming, which
+    // legitimately belongs to the still in-flight turn B.
+    expect(latest?.state.error).toBeNull();
+    expect(latest?.state.streaming).toBe(false);
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn C attempt' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+    expect(latest?.state.messages.some((m) => m.text === 'turn C attempt')).toBe(false);
+
+    // Turn B's own current ack/start arms the lock; its own terminal event
+    // (here, its own error) can then legitimately release it.
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm2' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'c1', error: 'turn B failed' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn D' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+  });
+
+  it('a recognized-stale same-conversation error during an unarmed turn B does not clear approvalRequestPending, does not overwrite the frozen pendingApproval, and does not surface its message', async () => {
+    // Turn A completes normally on c1.
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    // Turn B is sent but has not yet been armed by its own ack/start.
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn B' });
+    });
+    expect(latest?.state.sending).toBe(true);
+
+    // An approval request is outstanding on c1 — approveCommand has no
+    // dependency on `sending`/`streaming`, so this is legitimate even while
+    // turn B is unarmed.
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
+    });
+    expect(latest?.state.approvalRequestPending).toBe(true);
+    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
+    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
+
+    // A stale error from turn A, same conversationId, arrives before turn
+    // B's own ack/start. This must be a true no-op: it must not release
+    // `sending`, must not display/store its message, must not touch
+    // `streaming`, and — critically — must not clear
+    // `approvalRequestPending`/`pendingApproval`, which would re-arm the
+    // approve UI for a request that is still outstanding.
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'c1', error: 'stale turn A failure' });
+    });
+
+    expect(latest?.state.sending).toBe(true);
+    expect(latest?.state.approvalRequestPending).toBe(true);
+    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
+    expect(latest?.state.error).toBeNull();
+    expect(latest?.state.streaming).toBe(false);
+
+    // A second approval attempt while the first is still outstanding must
+    // still be rejected — exactly one command:approve total, and the
+    // original frozen command+args must be unchanged.
+    await act(async () => {
+      latest?.actions.approveCommand({ command: 'deploy', args: 'staging' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
+    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
+  });
+
   it('removes every listener and tears down the socket on cleanup, using no network', async () => {
     const registeredEvents = [...fake.listeners.keys()];
     expect(registeredEvents.length).toBeGreaterThan(0);
diff --git a/apps/web/src/spa/chat/use-chat-connection.ts b/apps/web/src/spa/chat/use-chat-connection.ts
index d5100409..319d6391 100644
--- a/apps/web/src/spa/chat/use-chat-connection.ts
+++ b/apps/web/src/spa/chat/use-chat-connection.ts
@@ -8,7 +8,13 @@ import {
   MAX_STREAM_CHARS,
   MAX_TOOLS,
 } from './limits';
-import { asConversationId, asFiniteNumber, asString, isRecord } from './runtime-guards';
+import {
+  asConversationId,
+  asFiniteNumber,
+  asString,
+  asStringArray,
+  isRecord,
+} from './runtime-guards';
 import type {
   AgentEndPayload,
   AgentStartPayload,
@@ -35,11 +41,64 @@ export interface ToolCallState {
   status: 'running' | 'success' | 'error' | 'anomaly';
 }
 
-/** Appends `addition` to `existing`, keeping at most `max` characters by
- * dropping the oldest (leading) characters once the cap is exceeded. */
-function capAppendString(existing: string, addition: string, max: number): string {
-  const next = existing + addition;
-  return next.length > max ? next.slice(next.length - max) : next;
+/** Formats the visible marker prepended to a capped stream buffer once any
+ * original characters have been dropped from it. Reconstructing the prior
+ * tail (see `capAppendStream` below) always slices this exact computed
+ * length off the front of the previous displayed value — it never scans
+ * buffer content for marker-shaped text, so real streamed content that
+ * happens to look like a marker can never be mistaken for one. */
+function formatTruncationMarker(dropped: number): string {
+  return `…[truncated ${dropped} characters]…`;
+}
+
+interface CappedStream {
+  /** The full value to store/display — a plain tail when nothing has been
+   * dropped yet, otherwise the marker followed by the retained tail. Always
+   * bounded to at most `max` characters in total. */
+  displayed: string;
+  /** Total original stream characters dropped so far, cumulative across
+   * every append — never reset while the buffer is still accumulating. */
+  dropped: number;
+}
+
+/** Appends `addition` to a stream buffer capped at `max` displayed
+ * characters (marker included), honestly disclosing how many original
+ * characters have been dropped so far rather than silently retaining only
+ * the tail. `priorDisplayed`/`priorDropped` come from state; the marker (if
+ * any) already present in `priorDisplayed` is stripped by the exact length
+ * `formatTruncationMarker(priorDropped)` computes, not by pattern-matching. */
+function capAppendStream(
+  priorDisplayed: string,
+  priorDropped: number,
+  addition: string,
+  max: number,
+): CappedStream {
+  const priorTail =
+    priorDropped > 0
+      ? priorDisplayed.slice(formatTruncationMarker(priorDropped).length)
+      : priorDisplayed;
+  const combinedTail = priorTail + addition;
+
+  if (priorDropped === 0 && combinedTail.length <= max) {
+    return { displayed: combinedTail, dropped: 0 };
+  }
+
+  // The marker's own text grows (rarely) as `dropped`'s digit count grows,
+  // which shrinks the budget left for the tail, which can in turn increase
+  // `dropped` further — a handful of iterations is always enough to reach a
+  // fixed point for any realistic character count.
+  let dropped = priorDropped;
+  for (let i = 0; i < 8; i += 1) {
+    const budget = Math.max(0, max - formatTruncationMarker(dropped).length);
+    const nextDropped = priorDropped + Math.max(0, combinedTail.length - budget);
+    if (nextDropped === dropped) break;
+    dropped = nextDropped;
+  }
+
+  const marker = formatTruncationMarker(dropped);
+  const budget = Math.max(0, max - marker.length);
+  const tail = combinedTail.slice(Math.max(0, combinedTail.length - budget));
+  return { displayed: marker + tail, dropped };
 }
 
 /** Pushes `item` onto `arr`, dropping the oldest entries once `max` is exceeded. */
@@ -72,6 +131,17 @@ function isUnrecoverableStartupFailure(state: ChatConnectionState): boolean {
   return state.conversationId === null && state.pendingSend;
 }
 
+/** True when a scoped `agent:end`/`error` is a recognized-stale terminal: a
+ * send is genuinely in flight (`sending`) but the current turn's own
+ * ack/start has not armed `armedTurnToken` yet — so this event must be a
+ * leftover from an earlier turn on the same conversation, not this one's own
+ * terminal. Recognizing this must make the event a true no-op: it may not
+ * finalize/clear transient state (text, thinking, streaming, error,
+ * approvalRequestPending) that belongs to the still in-flight turn. */
+function isRecognizedStaleTerminal(state: ChatConnectionState): boolean {
+  return state.sending && state.armedTurnToken !== state.turnToken;
+}
+
 /** Deterministic, unique-per-event fallback id for a malformed `toolCallId`.
  * Sourced from a monotonically increasing counter carried in state (`toolSeq`)
  * rather than `tools.length`, so it stays collision-free even once `tools` is
@@ -166,7 +236,14 @@ export interface ChatConnectionState {
   ack: MessageAckPayload | null;
   streaming: boolean;
   text: string;
+  /** Total original `agent:text` characters dropped so far by the
+   * MAX_STREAM_CHARS cap on `text` — tracked separately from `text` itself
+   * so the honest cumulative count survives across multiple appends without
+   * re-parsing any marker embedded in the displayed string. */
+  textDroppedChars: number;
   thinking: string;
+  /** Same accounting as `textDroppedChars`, for `thinking`. */
+  thinkingDroppedChars: number;
   tools: ToolCallState[];
   usage: SessionUsagePayload | null;
   sessionInfo: SessionInfoPayload | null;
@@ -189,6 +266,20 @@ export interface ChatConnectionState {
    * tools remain, so fallback ids stay unique across the MAX_TOOLS cap
    * boundary. */
   toolSeq: number;
+  /** Monotonically increasing id for the current in-flight turn, minted at
+   * local send time. Wire payloads (agent:end/error) carry only a
+   * conversationId, not a turn-scoped correlation id — two different turns
+   * on the SAME conversation are indistinguishable on the wire, so this
+   * local counter is what actually tells them apart. */
+  turnToken: number;
+  /** The `turnToken` value (if any) that has been armed to accept a normal
+   * terminal release, set only by an accepted (conversation-scoped)
+   * message:ack or agent:start for the CURRENT token. A same-conversation
+   * agent:end/error may only set `sending: false` when this equals
+   * `turnToken` — otherwise it is a stale terminal event from an earlier
+   * turn on the same conversation and must not unlock a still-in-flight
+   * later turn. Fails closed: an unarmed token can never be unlocked. */
+  armedTurnToken: number | null;
 }
 
 export interface ChatConnectionActions {
@@ -212,7 +303,9 @@ const initialState: ChatConnectionState = {
   ack: null,
   streaming: false,
   text: '',
+  textDroppedChars: 0,
   thinking: '',
+  thinkingDroppedChars: 0,
   tools: [],
   usage: null,
   sessionInfo: null,
@@ -226,6 +319,8 @@ const initialState: ChatConnectionState = {
   messages: [],
   messageSeq: 0,
   toolSeq: 0,
+  turnToken: 0,
+  armedTurnToken: null,
 };
 
 type Action =
@@ -274,7 +369,14 @@ function resolveScopedConversation(
     return { active: true, state };
   }
   if (state.conversationId === null && state.pendingSend) {
-    return { active: true, state: { ...state, conversationId, pendingSend: false } };
+    // The very first scoped event for a brand-new conversation can only belong
+    // to the currently in-flight turn — no prior same-conversation turn exists to
+    // be confused with. Arm the current turnToken so a terminal event (error,
+    // agent:end) arriving before ack/start can still properly release the send lock.
+    return {
+      active: true,
+      state: { ...state, conversationId, pendingSend: false, armedTurnToken: state.turnToken },
+    };
   }
   return { active: false, state: null };
 }
@@ -311,37 +413,61 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
           conversationId,
           pendingSend: false,
           ack: sanitizeAck(payload, conversationId),
+          // The very first scoped event ever received for a brand-new
+          // conversation can only belong to the currently in-flight turn —
+          // no prior same-conversation turn can exist to be confused with.
+          armedTurnToken: state.turnToken,
         };
       }
       if (payload.conversationId !== state.conversationId) return state;
-      return { ...state, ack: sanitizeAck(payload, state.conversationId) };
+      return {
+        ...state,
+        ack: sanitizeAck(payload, state.conversationId),
+        armedTurnToken: state.turnToken,
+      };
     }
 
     case 'server/agent:start': {
       const resolved = resolveScopedConversation(state, action.payload.conversationId);
       if (!resolved.active) return state;
-      return { ...resolved.state, streaming: true, text: '', thinking: '', tools: [], error: null };
+      return {
+        ...resolved.state,
+        streaming: true,
+        text: '',
+        thinking: '',
+        textDroppedChars: 0,
+        thinkingDroppedChars: 0,
+        tools: [],
+        error: null,
+        armedTurnToken: resolved.state.turnToken,
+      };
     }
 
     case 'server/agent:text': {
       const resolved = resolveScopedConversation(state, action.payload.conversationId);
       if (!resolved.active) return state;
-      return {
-        ...resolved.state,
-        text: capAppendString(resolved.state.text, asString(action.payload.text), MAX_STREAM_CHARS),
-      };
+      const capped = capAppendStream(
+        resolved.state.text,
+        resolved.state.textDroppedChars,
+        asString(action.payload.text),
+        MAX_STREAM_CHARS,
+      );
+      return { ...resolved.state, text: capped.displayed, textDroppedChars: capped.dropped };
     }
 
     case 'server/agent:thinking': {
       const resolved = resolveScopedConversation(state, action.payload.conversationId);
       if (!resolved.active) return state;
+      const capped = capAppendStream(
+        resolved.state.thinking,
+        resolved.state.thinkingDroppedChars,
+        asString(action.payload.text),
+        MAX_STREAM_CHARS,
+      );
       return {
         ...resolved.state,
-        thinking: capAppendString(
-          resolved.state.thinking,
-          asString(action.payload.text),
-          MAX_STREAM_CHARS,
-        ),
+        thinking: capped.displayed,
+        thinkingDroppedChars: capped.dropped,
       };
     }
 
@@ -413,12 +539,20 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
             sending: false,
             streaming: false,
             approvalRequestPending: false,
+            armedTurnToken: null,
             error: CONVERSATION_START_FAILURE,
           };
         }
         return state;
       }
       const next = resolved.state;
+      if (isRecognizedStaleTerminal(next)) {
+        // A same-conversation agent:end recognized as stale must be a true
+        // no-op — it must not finalize the stale turn's leftover
+        // text/thinking into a message or reset streaming, both of which
+        // legitimately belong to the still in-flight later turn.
+        return next;
+      }
       const hasContent = next.text.length > 0 || next.thinking.length > 0;
       const messages = hasContent
         ? capPush(
@@ -435,12 +569,23 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
             MAX_MESSAGES,
           )
         : next.messages;
+      // The wire carries only conversationId, not a turn id — a stale
+      // agent:end left over from an EARLIER turn on this SAME conversation
+      // is indistinguishable from this turn's own by conversationId alone.
+      // Only release `sending` when this turn's own accepted ack/start armed
+      // the current token; otherwise this is treated as a stale echo and the
+      // lock stays held (fail closed) so it cannot unlock a later, still
+      // in-flight turn.
+      const canRelease = next.armedTurnToken === next.turnToken;
       return {
         ...next,
         streaming: false,
-        sending: false,
+        sending: canRelease ? false : next.sending,
+        armedTurnToken: canRelease ? null : next.armedTurnToken,
         text: '',
         thinking: '',
+        textDroppedChars: 0,
+        thinkingDroppedChars: 0,
         usage: payload.usage ?? next.usage,
         messages,
         messageSeq: hasContent ? next.messageSeq + 1 : next.messageSeq,
@@ -448,9 +593,23 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
     }
 
     case 'server/session:info': {
-      const resolved = resolveScopedConversation(state, action.payload.conversationId);
+      const { payload } = action;
+      const resolved = resolveScopedConversation(state, payload.conversationId);
       if (!resolved.active) return state;
-      return { ...resolved.state, sessionInfo: action.payload };
+      return {
+        ...resolved.state,
+        sessionInfo: {
+          ...payload,
+          // A hostile/malfunctioning gateway can flood this list; cap it
+          // before it ever reaches state so a render site (e.g. the
+          // thinking-level <select>) can never be forced to lay out an
+          // unbounded number of options.
+          availableThinkingLevels: asStringArray(payload.availableThinkingLevels).slice(
+            0,
+            MAX_MANIFEST_ITEMS,
+          ),
+        },
+      };
     }
 
     case 'server/commands:manifest': {
@@ -512,12 +671,24 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
 
     case 'server/system:reload': {
       const { payload } = action;
+      // Computed once and reused for both `systemReload` and `manifest` —
+      // spreading the raw `payload` into `systemReload` first and only
+      // capping the copy handed to `manifest` left the raw, uncapped
+      // commands/skills sitting in `state.systemReload`. The sanitized
+      // fields are placed after the spread below so they always win.
+      const commands = capList<CommandDef>(payload.commands, MAX_MANIFEST_ITEMS);
+      const skills = capList<SkillCommandDef>(payload.skills, MAX_MANIFEST_ITEMS);
       return {
         ...state,
-        systemReload: { ...payload, message: asString(payload.message, 'Commands reloaded.') },
+        systemReload: {
+          ...payload,
+          commands,
+          skills,
+          message: asString(payload.message, 'Commands reloaded.'),
+        },
         manifest: {
-          commands: capList<CommandDef>(payload.commands, MAX_MANIFEST_ITEMS),
-          skills: capList<SkillCommandDef>(payload.skills, MAX_MANIFEST_ITEMS),
+          commands,
+          skills,
           version: state.manifest?.version ?? 0,
         },
       };
@@ -534,16 +705,31 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
             sending: false,
             streaming: false,
             approvalRequestPending: false,
+            armedTurnToken: null,
             error: CONVERSATION_START_FAILURE,
           };
         }
         return state;
       }
+      const next = resolved.state;
+      if (isRecognizedStaleTerminal(next)) {
+        // Same true-no-op guard as `server/agent:end` above: a
+        // same-conversation error recognized as stale must not display/store
+        // its message, touch streaming, or clear approvalRequestPending —
+        // doing so would re-arm the approve UI for a request that belongs to
+        // the still in-flight later turn while the first remains outstanding.
+        return next;
+      }
+      // Same fail-closed turn-token guard as `server/agent:end` above: a
+      // same-conversation error left over from an earlier, already-finished
+      // turn must not release a later turn's still-in-flight send lock.
+      const canRelease = next.armedTurnToken === next.turnToken;
       return {
-        ...resolved.state,
+        ...next,
         error: asString(payload.error, 'An error occurred.'),
         streaming: false,
-        sending: false,
+        sending: canRelease ? false : next.sending,
+        armedTurnToken: canRelease ? null : next.armedTurnToken,
         // A turn-scoped error also invalidates any approval request awaiting
         // a response — the gateway that just errored is unlikely to still
         // answer it, and the synchronous approveLockRef mirrors this field.
@@ -566,6 +752,12 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
         messageSeq: state.messageSeq + 1,
         error: null,
         sending: true,
+        // Sending a new turn mints a fresh token and immediately clears
+        // terminal eligibility — only THIS turn's own accepted ack/start may
+        // arm it, so a same-conversation terminal left over from the turn
+        // that just finished can never be mistaken for this one's.
+        turnToken: state.turnToken + 1,
+        armedTurnToken: null,
         pendingSend: state.conversationId === null ? true : state.pendingSend,
       };
     }
@@ -579,6 +771,7 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
         sending: false,
         pendingSend: false,
         approvalRequestPending: false,
+        armedTurnToken: null,
       };
     }
 
@@ -766,12 +959,24 @@ export function useChatConnection(): ChatConnectionValue {
       if (approval?.success !== true) return;
       if (typeof approval.approvalId !== 'string' || approval.approvalId.length === 0) return;
       if (!pendingApproval || pendingApproval.command !== approval.command) return;
-      if (executedApprovalIds.current.has(approval.approvalId)) return;
+      if (executedApprovalIds.current.has(approval.approvalId)) {
+        dispatch({ type: 'local/consume-approval' });
+        return;
+      }
       if (executedApprovalIds.current.size >= MAX_EXECUTED_APPROVAL_IDS) {
-        // Bounded dedup set: evict the oldest entry (Sets iterate in
-        // insertion order) so this can never grow without limit.
-        const oldest = executedApprovalIds.current.values().next().value;
-        if (oldest !== undefined) executedApprovalIds.current.delete(oldest);
+        // Security tradeoff, chosen deliberately: this dedup set never
+        // evicts. Evicting the oldest entry to make room (the old behavior)
+        // would let a replay of that forgotten ID execute again once it
+        // scrolled out of the set — a false negative that lets a privileged
+        // command run twice. Once the set is full, every *unseen* approval
+        // is denied instead. The mounted hook remains fail-closed until
+        // unmounted (lifecycle reset), not recoverable by re-approving — a
+        // false positive/availability cost but a genuine replay of any ID
+        // ever seen by this hook can never execute a second time. Consuming
+        // (rather than silently no-op'ing) releases the UI lock so the
+        // denial is visible/recoverable by remounting.
+        dispatch({ type: 'local/consume-approval' });
+        return;
       }
       executedApprovalIds.current.add(approval.approvalId);
       const socket = getSocket();
diff --git a/apps/web/src/spa/pages/chat-error-boundary.spec.tsx b/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
index 0f480967..1b627491 100644
--- a/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
+++ b/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
@@ -2,7 +2,16 @@ import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { createMemoryRouter, RouterProvider, type RouteObject } from 'react-router-dom';
 import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-import { ChatRouteErrorBoundary } from './chat-error-boundary';
+
+const { useSessionMock } = vi.hoisted(() => ({
+  useSessionMock: vi.fn(),
+}));
+
+vi.mock('@/lib/auth-client', () => ({
+  useSession: useSessionMock,
+}));
+
+import { routes } from '@/routes';
 
 beforeAll(() => {
   Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
@@ -19,6 +28,25 @@ function Boom(): never {
   throw new Error('render blew up');
 }
 
+/** Recursively clones the real exported route table, replacing only the
+ * `/chat` route's `element` with `<Boom />` — every other route (including
+ * the real `AuthGuard` nesting and the real `/chat` `errorElement`) is left
+ * exactly as exported. This is what makes the test fail if a future change
+ * removes the real route's `errorElement`, unlike a hand-built independent
+ * route tree that could drift from production undetected. */
+function replaceChatElementWithBoom(nodes: RouteObject[]): RouteObject[] {
+  return nodes.map((node) => {
+    const cloned: RouteObject = { ...node };
+    if (cloned.path === '/chat') {
+      cloned.element = <Boom />;
+    }
+    if (cloned.children) {
+      cloned.children = replaceChatElementWithBoom(cloned.children);
+    }
+    return cloned;
+  });
+}
+
 let root: Root | null;
 let container: HTMLElement;
 
@@ -28,13 +56,14 @@ afterEach(async () => {
   });
   document.body.replaceChildren();
   root = null;
+  useSessionMock.mockReset();
 });
 
 describe('ChatRouteErrorBoundary', () => {
   it('renders a recoverable, non-blank fallback when the /chat route element throws during render', async () => {
-    const routeObjects: RouteObject[] = [
-      { path: '/chat', element: <Boom />, errorElement: <ChatRouteErrorBoundary /> },
-    ];
+    useSessionMock.mockReturnValue({ data: { user: { id: 'user-1' } }, isPending: false });
+
+    const routeObjects = replaceChatElementWithBoom(routes);
     const router = createMemoryRouter(routeObjects, { initialEntries: ['/chat'] });
 
     container = document.createElement('div');
diff --git a/apps/web/src/spa/pages/chat.spec.tsx b/apps/web/src/spa/pages/chat.spec.tsx
index fec2c15b..3806564b 100644
--- a/apps/web/src/spa/pages/chat.spec.tsx
+++ b/apps/web/src/spa/pages/chat.spec.tsx
@@ -2,6 +2,7 @@ import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createFakeChatSocket } from '@/spa/chat/test-support/fake-chat-socket';
+import { MAX_MANIFEST_ITEMS } from '@/spa/chat/limits';
 
 const { getSocketMock, destroySocketMock } = vi.hoisted(() => ({
   getSocketMock: vi.fn(),
@@ -233,7 +234,7 @@ describe('ChatPage', () => {
     });
   });
 
-  it('shows visible alert surfaces for a server error and a stable failure copy for a failed command result', async () => {
+  it('shows visible alert surfaces for a server error and the structured contract reason for a failed command result', async () => {
     await act(async () => {
       fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
       fake.serverEmit('error', { conversationId: 'c1', error: 'The model is unavailable' });
@@ -241,16 +242,52 @@ describe('ChatPage', () => {
         conversationId: 'c1',
         command: 'model',
         success: false,
-        message: 'raw internal detail: stack trace at line 42',
+        message: 'Unknown model',
       });
     });
 
     const alerts = [...container.querySelectorAll('[role="alert"]')];
     const alertText = alerts.map((node) => node.textContent).join(' ');
     expect(alertText).toContain('The model is unavailable');
-    // Sanitized client copy, not the raw server-provided detail.
+    // The structured, contract-provided denial reason is visibly rendered.
+    expect(alertText).toContain('Unknown model');
+  });
+
+  it('falls back to a stable "Command failed." copy when a failed command result has no usable message', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmitRaw('command:result', {
+        conversationId: 'c1',
+        command: 'model',
+        success: false,
+        message: { bad: 'object' },
+      });
+    });
+
+    const alerts = [...container.querySelectorAll('[role="alert"]')];
+    const alertText = alerts.map((node) => node.textContent).join(' ');
     expect(alertText).toContain('Command failed.');
-    expect(alertText).not.toContain('raw internal detail');
+  });
+
+  it('caps availableThinkingLevels before storing and rendering a hostile session payload', async () => {
+    const hostileLevels = Array.from({ length: MAX_MANIFEST_ITEMS + 50 }, (_, i) => `level-${i}`);
+
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('session:info', {
+        conversationId: 'c1',
+        provider: 'anthropic',
+        modelId: 'claude',
+        thinkingLevel: 'level-0',
+        availableThinkingLevels: hostileLevels,
+      });
+    });
+
+    const select = container.querySelector(
+      'select[aria-label="Thinking level"]',
+    ) as HTMLSelectElement;
+    expect(select).toBeTruthy();
+    expect(select.options.length).toBeLessThanOrEqual(MAX_MANIFEST_ITEMS);
   });
 
   it('renders a safe fallback when session:info arrives with a malformed (non-array) availableThinkingLevels, without throwing', async () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e9da218..fcfe530e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -253,6 +253,9 @@ importers:
       '@mosaicstack/design-tokens':
         specifier: workspace:^
         version: link:../../packages/design-tokens
+      '@mosaicstack/types':
+        specifier: workspace:^
+        version: link:../../packages/types
       better-auth:
         specifier: ^1.5.5
         version: 1.5.5(better-sqlite3@12.8.0)(drizzle-kit@0.31.9)(drizzle-orm@0.45.1(@electric-sql/pglite@0.2.17)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.8.0)(kysely@0.28.11)(postgres@3.4.8))(mongodb@7.1.0(socks@2.8.7))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@3.2.7(@types/debug@4.1.13)(@types/node@22.19.15)(jsdom@29.0.0(@noble/hashes@2.0.1))(lightningcss@1.33.0))
-- 
2.54.0


From d46a2d675a048279b85d3a5226764cfbea3da9bc Mon Sep 17 00:00:00 2001
From: "shaggy (mosaic-dev box)" <shaggy@mosaic-dev.local>
Date: Mon, 10 Aug 2026 14:21:52 -0500
Subject: [PATCH 4/6] =?UTF-8?q?fix(web,gateway):=20close=20P3=20re-review#?=
 =?UTF-8?q?3=20findings=20=E2=80=94=20sanitize=20command=20errors,=20harde?=
 =?UTF-8?q?n=20turn-lock=20&=20caps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commands/command-executor-p8012.spec.ts   |  36 +++
 .../src/commands/command-executor.service.ts  |   7 +-
 apps/web/src/spa/chat/commands-panel.spec.tsx |  21 ++
 apps/web/src/spa/chat/commands-panel.tsx      |  15 +-
 apps/web/src/spa/chat/limits.ts               |   4 +
 .../src/spa/chat/use-chat-connection.spec.tsx | 230 ++++++++++++------
 apps/web/src/spa/chat/use-chat-connection.ts  | 203 +++++++++-------
 7 files changed, 350 insertions(+), 166 deletions(-)

diff --git a/apps/gateway/src/commands/command-executor-p8012.spec.ts b/apps/gateway/src/commands/command-executor-p8012.spec.ts
index b22ed05a..59f0ed6a 100644
--- a/apps/gateway/src/commands/command-executor-p8012.spec.ts
+++ b/apps/gateway/src/commands/command-executor-p8012.spec.ts
@@ -1,3 +1,4 @@
+import { Logger } from '@nestjs/common';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { CommandExecutorService } from './command-executor.service.js';
 import type { SlashCommandPayload } from '@mosaicstack/types';
@@ -258,4 +259,39 @@ describe('CommandExecutorService — P8-012 commands', () => {
     expect(result.command).toBe('tools');
     expect(result.message).toContain('tools');
   });
+
+  // Top-level catch sanitization (P3-4 re-review finding #1): a rejected
+  // Redis `set` inside /provider login is the only reachable path into the
+  // top-level catch in `execute()`. The raw exception must be logged
+  // server-side but never handed back to the socket client.
+  it('sanitizes the top-level command catch, logging the raw exception but never returning it to the client', async () => {
+    const distinctiveRawFailure = 'ECONNREFUSED distinctive-raw-redis-failure-token-9f31';
+    const failingRedis = {
+      set: vi.fn().mockRejectedValue(new Error(distinctiveRawFailure)),
+      get: vi.fn(),
+      del: vi.fn(),
+    };
+    const failingService = buildService(failingRedis as unknown as typeof mockRedis);
+    const loggerErrorSpy = vi.spyOn(Logger.prototype, 'error').mockImplementation(() => undefined);
+
+    const payload: SlashCommandPayload = {
+      command: 'provider',
+      args: 'login anthropic',
+      conversationId,
+    };
+    const result = await failingService.execute(payload, userScope);
+
+    expect(result.success).toBe(false);
+    expect(result.command).toBe('provider');
+    expect(result.message).toBe('Command failed due to an internal error.');
+    expect(result.message).not.toContain(distinctiveRawFailure);
+    expect(result.message).not.toContain('ECONNREFUSED');
+
+    // The real exception is still logged server-side.
+    expect(loggerErrorSpy).toHaveBeenCalled();
+    const loggedText = loggerErrorSpy.mock.calls.map((call) => String(call[0])).join(' ');
+    expect(loggedText).toContain(distinctiveRawFailure);
+
+    loggerErrorSpy.mockRestore();
+  });
 });
diff --git a/apps/gateway/src/commands/command-executor.service.ts b/apps/gateway/src/commands/command-executor.service.ts
index ca2d3cfd..4388ecaa 100644
--- a/apps/gateway/src/commands/command-executor.service.ts
+++ b/apps/gateway/src/commands/command-executor.service.ts
@@ -160,7 +160,12 @@ export class CommandExecutorService {
       }
     } catch (err) {
       this.logger.error(`Command /${command} failed: ${err}`);
-      return { command, conversationId, success: false, message: String(err) };
+      return {
+        command,
+        conversationId,
+        success: false,
+        message: 'Command failed due to an internal error.',
+      };
     }
   }
 
diff --git a/apps/web/src/spa/chat/commands-panel.spec.tsx b/apps/web/src/spa/chat/commands-panel.spec.tsx
index ade87a98..fccc3a08 100644
--- a/apps/web/src/spa/chat/commands-panel.spec.tsx
+++ b/apps/web/src/spa/chat/commands-panel.spec.tsx
@@ -234,6 +234,27 @@ describe('CommandsPanel', () => {
     expect(container?.textContent).toContain('Command failed.');
   });
 
+  it('bounds an oversized command result message at the render site as defense-in-depth', async () => {
+    const hostileMessage = 'y'.repeat(50_000);
+    await render(
+      <CommandsPanel
+        manifest={null}
+        results={[
+          { conversationId: 'c1', command: 'model', success: false, message: hostileMessage },
+        ]}
+        approval={null}
+        pendingApproval={null}
+        hasConversation={false}
+        onExecute={vi.fn()}
+        onApprove={vi.fn()}
+        onRunApproved={vi.fn()}
+      />,
+    );
+
+    const text = container?.textContent ?? '';
+    expect(text.length).toBeLessThan(hostileMessage.length);
+  });
+
   it('does not throw when the manifest fields are malformed (non-array commands/skills)', async () => {
     const manifest = {
       commands: 'not-an-array',
diff --git a/apps/web/src/spa/chat/commands-panel.tsx b/apps/web/src/spa/chat/commands-panel.tsx
index b0d50eca..827f17e1 100644
--- a/apps/web/src/spa/chat/commands-panel.tsx
+++ b/apps/web/src/spa/chat/commands-panel.tsx
@@ -1,5 +1,6 @@
 import { useState, type ReactElement } from 'react';
 import type { PendingApproval } from './use-chat-connection';
+import { MAX_COMMAND_MESSAGE_CHARS } from './limits';
 import { asNonEmptyString, asString } from './runtime-guards';
 import type {
   CommandManifest,
@@ -13,6 +14,16 @@ import type {
  * directly, never a raw thrown exception, stack trace, or object value. */
 const COMMAND_FAILURE_COPY = 'Command failed.';
 
+/** Render-site defense-in-depth: `use-chat-connection.ts` already bounds a
+ * stored command:result message at ingestion, but this component must never
+ * assume every caller went through that path — bounding again here means a
+ * hostile/oversized message can never force an unbounded render. */
+function boundMessage(value: string): string {
+  return value.length > MAX_COMMAND_MESSAGE_CHARS
+    ? value.slice(0, MAX_COMMAND_MESSAGE_CHARS)
+    : value;
+}
+
 interface CommandsPanelProps {
   manifest: CommandManifest | null;
   results: SlashCommandResultPayload[];
@@ -141,9 +152,9 @@ export function CommandsPanel({
               /{asString(result.command)}: {result.success ? 'success' : 'failed'}
               {result.success
                 ? typeof result.message === 'string' && result.message
-                  ? ` — ${result.message}`
+                  ? ` — ${boundMessage(result.message)}`
                   : ''
-                : ` — ${asNonEmptyString(result.message, COMMAND_FAILURE_COPY)}`}
+                : ` — ${boundMessage(asNonEmptyString(result.message, COMMAND_FAILURE_COPY))}`}
             </li>
           ))}
         </ul>
diff --git a/apps/web/src/spa/chat/limits.ts b/apps/web/src/spa/chat/limits.ts
index 8c38bc21..1299f4da 100644
--- a/apps/web/src/spa/chat/limits.ts
+++ b/apps/web/src/spa/chat/limits.ts
@@ -16,3 +16,7 @@ export const MAX_COMMAND_RESULTS = 200;
 export const MAX_MANIFEST_ITEMS = 500;
 /** Max executed approval IDs remembered for single-flight dedup. */
 export const MAX_EXECUTED_APPROVAL_IDS = 200;
+/** Max characters retained for a single command:result message — a hostile
+ * or malfunctioning gateway must not be able to push an unbounded curated
+ * success/failure reason into state (or, defensively, onto the page). */
+export const MAX_COMMAND_MESSAGE_CHARS = 1_000;
diff --git a/apps/web/src/spa/chat/use-chat-connection.spec.tsx b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
index 95ad3b90..d340c40a 100644
--- a/apps/web/src/spa/chat/use-chat-connection.spec.tsx
+++ b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
@@ -287,6 +287,26 @@ describe('useChatConnection', () => {
     ]);
   });
 
+  it('bounds an oversized command:result message to a fixed cap before it ever reaches state', async () => {
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+    });
+
+    const hostileMessage = 'x'.repeat(50_000);
+    await act(async () => {
+      fake.serverEmit('command:result', {
+        conversationId: 'c1',
+        command: 'model',
+        success: false,
+        message: hostileMessage,
+      });
+    });
+
+    const stored = latest?.state.commandResults.at(-1)?.message ?? '';
+    expect(stored.length).toBeLessThan(hostileMessage.length);
+    expect(stored.length).toBeLessThanOrEqual(1000);
+  });
+
   it('pairs a successful command:approval with the pending request so it can be run with its approvalId', async () => {
     await act(async () => {
       fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
@@ -1051,7 +1071,7 @@ describe('useChatConnection', () => {
     expect(latest?.state.manifest?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
   });
 
-  it('caps a system:reload manifest replacement at MAX_MANIFEST_ITEMS for both the raw stored reload and the manifest', async () => {
+  it('caps a system:reload manifest replacement at MAX_MANIFEST_ITEMS for commands, skills, and providers, and drops hostile extra fields instead of spreading the raw payload into state', async () => {
     const commands = Array.from({ length: MAX_MANIFEST_ITEMS + 5 }, (_, i) => ({
       name: `cmd${i}`,
       aliases: [],
@@ -1065,15 +1085,21 @@ describe('useChatConnection', () => {
       description: '',
       available: true,
     }));
+    const providers = Array.from({ length: 550 }, (_, i) => `provider-${i}`);
 
-    await act(async () => {
-      fake.serverEmit('system:reload', {
-        commands,
-        skills,
-        providers: ['anthropic'],
-        message: 'reloaded',
-      });
-    });
+    await expect(
+      act(async () => {
+        fake.serverEmitRaw('system:reload', {
+          commands,
+          skills,
+          providers,
+          message: 'reloaded',
+          // Hostile field not part of the SystemReloadPayload contract —
+          // must never survive into state.systemReload.
+          maliciousExtra: 'should-not-survive',
+        });
+      }),
+    ).resolves.not.toThrow();
 
     expect(latest?.state.manifest?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
     expect(latest?.state.manifest?.skills).toHaveLength(MAX_MANIFEST_ITEMS);
@@ -1082,6 +1108,8 @@ describe('useChatConnection', () => {
     // must never leave the uncapped raw payload sitting in state.
     expect(latest?.state.systemReload?.commands).toHaveLength(MAX_MANIFEST_ITEMS);
     expect(latest?.state.systemReload?.skills).toHaveLength(MAX_MANIFEST_ITEMS);
+    expect(latest?.state.systemReload?.providers).toHaveLength(500);
+    expect(latest?.state.systemReload).not.toHaveProperty('maliciousExtra');
   });
 
   it('caps availableThinkingLevels before storing a hostile session:info payload', async () => {
@@ -1390,6 +1418,16 @@ describe('useChatConnection', () => {
       latest?.actions.runApprovedCommand();
     });
 
+    // The rejected 201st approval is not silently dropped — it must be
+    // consumed but also surface a stable, visible notice so the user knows
+    // why the command did not run. ChatPage renders state.error as
+    // role="alert".
+    expect(latest?.state.error).toBe(
+      'Approval limit reached for this session. This command was not run.',
+    );
+    expect(latest?.state.approval).toBeNull();
+    expect(latest?.state.pendingApproval).toBeNull();
+
     // A fresh local approval request, replaying the very first approvalId —
     // this is the replay the old eviction policy would have let through a
     // second time because it had forgotten ap-0 ever ran.
@@ -1473,55 +1511,7 @@ describe('useChatConnection', () => {
     expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
   });
 
-  it('does not unlock turn B when a stale same-conversation error from turn A arrives', async () => {
-    await act(async () => {
-      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
-      fake.serverEmit('agent:start', { conversationId: 'c1' });
-      fake.serverEmit('agent:end', { conversationId: 'c1' });
-    });
-    expect(latest?.state.sending).toBe(false);
-
-    await act(async () => {
-      latest?.actions.sendMessage({ content: 'turn B' });
-    });
-    expect(latest?.state.sending).toBe(true);
-
-    // A stale error for turn A, same conversationId, arrives before turn
-    // B's own ack/start — must not unlock turn B.
-    await act(async () => {
-      fake.serverEmit('error', { conversationId: 'c1', error: 'stale turn A failure' });
-    });
-    expect(latest?.state.sending).toBe(true);
-    // A recognized-stale terminal must be a true no-op — its message must
-    // never be displayed/stored, and it must not touch streaming, which
-    // legitimately belongs to the still in-flight turn B.
-    expect(latest?.state.error).toBeNull();
-    expect(latest?.state.streaming).toBe(false);
-
-    await act(async () => {
-      latest?.actions.sendMessage({ content: 'turn C attempt' });
-    });
-    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
-    expect(latest?.state.messages.some((m) => m.text === 'turn C attempt')).toBe(false);
-
-    // Turn B's own current ack/start arms the lock; its own terminal event
-    // (here, its own error) can then legitimately release it.
-    await act(async () => {
-      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm2' });
-      fake.serverEmit('agent:start', { conversationId: 'c1' });
-    });
-    await act(async () => {
-      fake.serverEmit('error', { conversationId: 'c1', error: 'turn B failed' });
-    });
-    expect(latest?.state.sending).toBe(false);
-
-    await act(async () => {
-      latest?.actions.sendMessage({ content: 'turn D' });
-    });
-    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
-  });
-
-  it('a recognized-stale same-conversation error during an unarmed turn B does not clear approvalRequestPending, does not overwrite the frozen pendingApproval, and does not surface its message', async () => {
+  it('settles turn B and releases its lock when a pre-ack error arrives on an already-established conversation, allowing a later send', async () => {
     // Turn A completes normally on c1.
     await act(async () => {
       fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
@@ -1530,7 +1520,41 @@ describe('useChatConnection', () => {
     });
     expect(latest?.state.sending).toBe(false);
 
-    // Turn B is sent but has not yet been armed by its own ack/start.
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn B' });
+    });
+    expect(latest?.state.sending).toBe(true);
+
+    // A same-conversation error arrives before turn B's own ack/start. Once
+    // turn A has already fully settled via its own terminal event, ordered
+    // Socket.IO delivery means this cannot be a leftover of A — the Gateway
+    // has nothing left in flight to emit for a turn it already finished. It
+    // can only be a genuine error for the newly sent turn B (e.g. a
+    // session-creation failure emitted before ack), so it must settle B.
+    await act(async () => {
+      fake.serverEmit('error', { conversationId: 'c1', error: 'turn B session failure' });
+    });
+    expect(latest?.state.sending).toBe(false);
+    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.error).toBe('turn B session failure');
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn C' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
+    expect(latest?.state.messages.some((m) => m.text === 'turn C')).toBe(true);
+  });
+
+  it('invalidates an outstanding approval request when a pre-ack error settles turn B on an already-established conversation', async () => {
+    // Turn A completes normally on c1.
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    // Turn B is sent but has not yet received its own ack/start.
     await act(async () => {
       latest?.actions.sendMessage({ content: 'turn B' });
     });
@@ -1538,38 +1562,86 @@ describe('useChatConnection', () => {
 
     // An approval request is outstanding on c1 — approveCommand has no
     // dependency on `sending`/`streaming`, so this is legitimate even while
-    // turn B is unarmed.
+    // turn B has not yet started.
     await act(async () => {
       latest?.actions.approveCommand({ command: 'deploy', args: 'prod' });
     });
     expect(latest?.state.approvalRequestPending).toBe(true);
-    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
-    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
 
-    // A stale error from turn A, same conversationId, arrives before turn
-    // B's own ack/start. This must be a true no-op: it must not release
-    // `sending`, must not display/store its message, must not touch
-    // `streaming`, and — critically — must not clear
-    // `approvalRequestPending`/`pendingApproval`, which would re-arm the
-    // approve UI for a request that is still outstanding.
+    // A genuine pre-ack error for turn B is terminal — same as an
+    // active-turn error, it invalidates any approval request still awaiting
+    // a response, since the Gateway that just errored is unlikely to still
+    // answer it.
     await act(async () => {
-      fake.serverEmit('error', { conversationId: 'c1', error: 'stale turn A failure' });
+      fake.serverEmit('error', { conversationId: 'c1', error: 'turn B session failure' });
     });
 
-    expect(latest?.state.sending).toBe(true);
-    expect(latest?.state.approvalRequestPending).toBe(true);
-    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
-    expect(latest?.state.error).toBeNull();
-    expect(latest?.state.streaming).toBe(false);
+    expect(latest?.state.sending).toBe(false);
+    expect(latest?.state.approvalRequestPending).toBe(false);
+    expect(latest?.state.error).toBe('turn B session failure');
 
-    // A second approval attempt while the first is still outstanding must
-    // still be rejected — exactly one command:approve total, and the
-    // original frozen command+args must be unchanged.
+    // A fresh approval request can be issued again after the invalidation.
     await act(async () => {
       latest?.actions.approveCommand({ command: 'deploy', args: 'staging' });
     });
-    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(1);
-    expect(latest?.state.pendingApproval).toEqual({ command: 'deploy', args: 'prod' });
+    expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(2);
+  });
+
+  it("does not settle turn B when a duplicate agent:end from already-settled turn A is redelivered after B's own ack but before B's own start", async () => {
+    // Turn A completes normally on c1.
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    // Turn B is sent and its own ack arrives. Under the old
+    // ack-arms-the-lock design this alone made the lock releasable by any
+    // same-conversation terminal — the precise bug: it could not yet
+    // distinguish B's own eventual agent:end from a late duplicate delivery
+    // of A's already-consumed one.
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn B' });
+    });
+    await act(async () => {
+      fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm2' });
+    });
+    expect(latest?.state.sending).toBe(true);
+
+    // A duplicate/straggler agent:end for turn A (already fully settled
+    // above) is redelivered for the same conversation before B's own
+    // agent:start ever arrived. Only B's own accepted agent:start may move
+    // it into the active phase that a real agent:end may settle — this
+    // duplicate must be a true no-op.
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(true);
+    expect(latest?.state.streaming).toBe(false);
+
+    // Turn C must still be blocked — the lock is still genuinely held by B.
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn C attempt' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(1);
+    expect(latest?.state.messages.some((m) => m.text === 'turn C attempt')).toBe(false);
+
+    // B's own start, then its own end, legitimately unlocks it.
+    await act(async () => {
+      fake.serverEmit('agent:start', { conversationId: 'c1' });
+    });
+    expect(latest?.state.streaming).toBe(true);
+
+    await act(async () => {
+      fake.serverEmit('agent:end', { conversationId: 'c1' });
+    });
+    expect(latest?.state.sending).toBe(false);
+
+    await act(async () => {
+      latest?.actions.sendMessage({ content: 'turn D' });
+    });
+    expect(fake.emitted.filter((e) => e.event === 'message')).toHaveLength(2);
   });
 
   it('removes every listener and tears down the socket on cleanup, using no network', async () => {
diff --git a/apps/web/src/spa/chat/use-chat-connection.ts b/apps/web/src/spa/chat/use-chat-connection.ts
index 319d6391..9f85ad99 100644
--- a/apps/web/src/spa/chat/use-chat-connection.ts
+++ b/apps/web/src/spa/chat/use-chat-connection.ts
@@ -1,6 +1,7 @@
 import { useEffect, useReducer, useRef } from 'react';
 import { destroySocket, getSocket } from '@/lib/socket';
 import {
+  MAX_COMMAND_MESSAGE_CHARS,
   MAX_COMMAND_RESULTS,
   MAX_EXECUTED_APPROVAL_IDS,
   MAX_MANIFEST_ITEMS,
@@ -121,6 +122,14 @@ function isValidToolCallId(value: unknown): value is string {
  * startup failure instead of leaving `sending`/`pendingSend` stuck forever. */
 const CONVERSATION_START_FAILURE = 'Unable to start this conversation. Please try again.';
 
+/** Shown when the non-evicting executed-approval dedup cache is already at
+ * MAX_EXECUTED_APPROVAL_IDS and a distinct, never-before-seen approval is
+ * denied as a result (see `runApprovedCommand`'s saturation branch below).
+ * The approval is still consumed (the UI lock is released) but the user
+ * must see why the command did not run rather than have it silently
+ * dropped. */
+const APPROVAL_LIMIT_MESSAGE = 'Approval limit reached for this session. This command was not run.';
+
 /** True only for the narrow case a malformed-conversationId `error`/`agent:end`
  * must be treated as a terminal startup failure: no conversation has ever been
  * established yet, and a send is still pending one. Once a conversation is
@@ -131,17 +140,6 @@ function isUnrecoverableStartupFailure(state: ChatConnectionState): boolean {
   return state.conversationId === null && state.pendingSend;
 }
 
-/** True when a scoped `agent:end`/`error` is a recognized-stale terminal: a
- * send is genuinely in flight (`sending`) but the current turn's own
- * ack/start has not armed `armedTurnToken` yet — so this event must be a
- * leftover from an earlier turn on the same conversation, not this one's own
- * terminal. Recognizing this must make the event a true no-op: it may not
- * finalize/clear transient state (text, thinking, streaming, error,
- * approvalRequestPending) that belongs to the still in-flight turn. */
-function isRecognizedStaleTerminal(state: ChatConnectionState): boolean {
-  return state.sending && state.armedTurnToken !== state.turnToken;
-}
-
 /** Deterministic, unique-per-event fallback id for a malformed `toolCallId`.
  * Sourced from a monotonically increasing counter carried in state (`toolSeq`)
  * rather than `tools.length`, so it stays collision-free even once `tools` is
@@ -159,6 +157,15 @@ function capList<T>(arr: unknown, max: number): T[] {
   return (arr.length > max ? arr.slice(0, max) : arr) as T[];
 }
 
+/** Like `capList`, but for a server-provided string collection (e.g.
+ * `system:reload.providers`): a non-string entry is dropped rather than
+ * invalidating the whole list, and the result is capped at `max`. */
+function capStringList(arr: unknown, max: number): string[] {
+  if (!Array.isArray(arr)) return [];
+  const strings = arr.filter((item): item is string => typeof item === 'string');
+  return strings.length > max ? strings.slice(0, max) : strings;
+}
+
 /** Normalizes a raw message:ack payload before it is stored — `messageId` is
  * given a stable, visible "unknown" fallback rather than storing a raw
  * non-string value (which would either render as "[object Object]" or,
@@ -198,7 +205,10 @@ function sanitizeApproval(
 
 /** Normalizes a raw command:result payload before it is stored — `success`
  * is coerced to a literal boolean so a truthy non-boolean value (e.g. an
- * object) can never be displayed as a successful result. */
+ * object) can never be displayed as a successful result, and a curated
+ * `message` is bounded to MAX_COMMAND_MESSAGE_CHARS so a hostile/malformed
+ * gateway cannot push an unbounded string into state (the render site in
+ * commands-panel.tsx applies the same bound again as defense-in-depth). */
 function sanitizeCommandResult(
   payload: SlashCommandResultPayload,
   conversationId: string,
@@ -207,7 +217,10 @@ function sanitizeCommandResult(
     conversationId,
     command: asString(payload.command, 'unknown'),
     success: payload.success === true,
-    message: typeof payload.message === 'string' ? payload.message : undefined,
+    message:
+      typeof payload.message === 'string'
+        ? payload.message.slice(0, MAX_COMMAND_MESSAGE_CHARS)
+        : undefined,
   };
 }
 
@@ -266,20 +279,32 @@ export interface ChatConnectionState {
    * tools remain, so fallback ids stay unique across the MAX_TOOLS cap
    * boundary. */
   toolSeq: number;
-  /** Monotonically increasing id for the current in-flight turn, minted at
-   * local send time. Wire payloads (agent:end/error) carry only a
-   * conversationId, not a turn-scoped correlation id — two different turns
-   * on the SAME conversation are indistinguishable on the wire, so this
-   * local counter is what actually tells them apart. */
-  turnToken: number;
-  /** The `turnToken` value (if any) that has been armed to accept a normal
-   * terminal release, set only by an accepted (conversation-scoped)
-   * message:ack or agent:start for the CURRENT token. A same-conversation
-   * agent:end/error may only set `sending: false` when this equals
-   * `turnToken` — otherwise it is a stale terminal event from an earlier
-   * turn on the same conversation and must not unlock a still-in-flight
-   * later turn. Fails closed: an unarmed token can never be unlocked. */
-  armedTurnToken: number | null;
+  /** Explicit per-turn phase for the CURRENT (most recently sent) turn. Wire
+   * payloads (agent:end/error) carry only a conversationId, not a
+   * turn-scoped correlation id — two different turns on the SAME
+   * conversation are indistinguishable on the wire by conversationId alone,
+   * so this local phase is what actually tells them apart:
+   *
+   * - 'pending': minted by `local/send`; the turn has been sent but has not
+   *   yet received its own `agent:start`. A same-conversation `agent:end`
+   *   arriving in this phase cannot be trusted as this turn's own — Socket.IO
+   *   delivers in order and the Gateway always emits `agent:start` before a
+   *   legitimate `agent:end`, so this can only be a stale/duplicate end left
+   *   over from an earlier turn (a `message:ack` alone does NOT advance this
+   *   phase, precisely to close that hole). A same-conversation `error`,
+   *   however, IS trusted in this phase: the Gateway can legitimately emit a
+   *   session-creation error before ack/start, and once an earlier turn on
+   *   this conversation has already fully settled (via its own terminal
+   *   event) ordered delivery guarantees nothing further remains in flight
+   *   for it — so any later scoped error can only belong to this turn.
+   * - 'active': set only by this turn's own accepted `agent:start`. Only
+   *   from this phase may a scoped `agent:end` settle the turn.
+   * - 'settled': set once this turn's own terminal (`agent:end` or `error`)
+   *   has been processed. A further scoped `agent:end`/`error` in this phase
+   *   is a true no-op — it must not re-finalize or re-release anything.
+   *
+   * Fails closed: `agent:end` can only ever settle from 'active'. */
+  turnPhase: 'pending' | 'active' | 'settled';
 }
 
 export interface ChatConnectionActions {
@@ -319,8 +344,7 @@ const initialState: ChatConnectionState = {
   messages: [],
   messageSeq: 0,
   toolSeq: 0,
-  turnToken: 0,
-  armedTurnToken: null,
+  turnPhase: 'settled',
 };
 
 type Action =
@@ -340,6 +364,7 @@ type Action =
   | { type: 'local/send'; content: string }
   | { type: 'local/approve-request'; command: string; args?: string }
   | { type: 'local/consume-approval' }
+  | { type: 'local/approval-saturated' }
   | { type: 'local/disconnect' };
 
 /**
@@ -371,11 +396,13 @@ function resolveScopedConversation(
   if (state.conversationId === null && state.pendingSend) {
     // The very first scoped event for a brand-new conversation can only belong
     // to the currently in-flight turn — no prior same-conversation turn exists to
-    // be confused with. Arm the current turnToken so a terminal event (error,
-    // agent:end) arriving before ack/start can still properly release the send lock.
+    // be confused with. This only establishes conversation identity; it does not
+    // advance `turnPhase` — only this turn's own `agent:start` may do that (see
+    // the 'server/agent:start' case), and only this turn's own `error` may settle
+    // it directly from 'pending' (see the 'server/error' case).
     return {
       active: true,
-      state: { ...state, conversationId, pendingSend: false, armedTurnToken: state.turnToken },
+      state: { ...state, conversationId, pendingSend: false },
     };
   }
   return { active: false, state: null };
@@ -413,17 +440,15 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
           conversationId,
           pendingSend: false,
           ack: sanitizeAck(payload, conversationId),
-          // The very first scoped event ever received for a brand-new
-          // conversation can only belong to the currently in-flight turn —
-          // no prior same-conversation turn can exist to be confused with.
-          armedTurnToken: state.turnToken,
+          // Deliberately does NOT advance `turnPhase` — an ack alone must
+          // never be enough to make a later `agent:end` settle this turn.
+          // Only this turn's own `agent:start` may do that.
         };
       }
       if (payload.conversationId !== state.conversationId) return state;
       return {
         ...state,
         ack: sanitizeAck(payload, state.conversationId),
-        armedTurnToken: state.turnToken,
       };
     }
 
@@ -439,7 +464,9 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
         thinkingDroppedChars: 0,
         tools: [],
         error: null,
-        armedTurnToken: resolved.state.turnToken,
+        // Only this turn's own accepted agent:start may move it into the
+        // 'active' phase that a real agent:end may later settle.
+        turnPhase: 'active',
       };
     }
 
@@ -539,18 +566,24 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
             sending: false,
             streaming: false,
             approvalRequestPending: false,
-            armedTurnToken: null,
+            turnPhase: 'settled',
             error: CONVERSATION_START_FAILURE,
           };
         }
         return state;
       }
       const next = resolved.state;
-      if (isRecognizedStaleTerminal(next)) {
-        // A same-conversation agent:end recognized as stale must be a true
-        // no-op — it must not finalize the stale turn's leftover
-        // text/thinking into a message or reset streaming, both of which
-        // legitimately belong to the still in-flight later turn.
+      if (next.turnPhase !== 'active') {
+        // Only an 'active' turn (one that has received its own agent:start)
+        // may be settled by an agent:end. A 'pending' phase means this
+        // turn has not started yet — Socket.IO delivers in order and the
+        // Gateway always emits agent:start before a legitimate agent:end, so
+        // this can only be a stale/duplicate end left over from an earlier
+        // turn. A 'settled' phase means this turn's own end already fired —
+        // this is a redelivered duplicate. Either way this must be a true
+        // no-op: it must not finalize leftover text/thinking into a message
+        // or reset streaming, both of which legitimately belong to the
+        // still in-flight (or already-finalized) current turn.
         return next;
       }
       const hasContent = next.text.length > 0 || next.thinking.length > 0;
@@ -569,19 +602,11 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
             MAX_MESSAGES,
           )
         : next.messages;
-      // The wire carries only conversationId, not a turn id — a stale
-      // agent:end left over from an EARLIER turn on this SAME conversation
-      // is indistinguishable from this turn's own by conversationId alone.
-      // Only release `sending` when this turn's own accepted ack/start armed
-      // the current token; otherwise this is treated as a stale echo and the
-      // lock stays held (fail closed) so it cannot unlock a later, still
-      // in-flight turn.
-      const canRelease = next.armedTurnToken === next.turnToken;
       return {
         ...next,
         streaming: false,
-        sending: canRelease ? false : next.sending,
-        armedTurnToken: canRelease ? null : next.armedTurnToken,
+        sending: false,
+        turnPhase: 'settled',
         text: '',
         thinking: '',
         textDroppedChars: 0,
@@ -671,19 +696,19 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
 
     case 'server/system:reload': {
       const { payload } = action;
-      // Computed once and reused for both `systemReload` and `manifest` —
-      // spreading the raw `payload` into `systemReload` first and only
-      // capping the copy handed to `manifest` left the raw, uncapped
-      // commands/skills sitting in `state.systemReload`. The sanitized
-      // fields are placed after the spread below so they always win.
+      // `systemReload` is built from exactly the SystemReloadPayload
+      // contract fields (commands, skills, providers, message) after
+      // runtime normalization — the raw payload is never spread into state,
+      // so a hostile/malfunctioning gateway cannot smuggle extra fields in.
       const commands = capList<CommandDef>(payload.commands, MAX_MANIFEST_ITEMS);
       const skills = capList<SkillCommandDef>(payload.skills, MAX_MANIFEST_ITEMS);
+      const providers = capStringList(payload.providers, MAX_MANIFEST_ITEMS);
       return {
         ...state,
         systemReload: {
-          ...payload,
           commands,
           skills,
+          providers,
           message: asString(payload.message, 'Commands reloaded.'),
         },
         manifest: {
@@ -705,31 +730,33 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
             sending: false,
             streaming: false,
             approvalRequestPending: false,
-            armedTurnToken: null,
+            turnPhase: 'settled',
             error: CONVERSATION_START_FAILURE,
           };
         }
         return state;
       }
       const next = resolved.state;
-      if (isRecognizedStaleTerminal(next)) {
-        // Same true-no-op guard as `server/agent:end` above: a
-        // same-conversation error recognized as stale must not display/store
-        // its message, touch streaming, or clear approvalRequestPending —
-        // doing so would re-arm the approve UI for a request that belongs to
-        // the still in-flight later turn while the first remains outstanding.
-        return next;
+      if (next.turnPhase === 'settled') {
+        // No in-flight current turn: the error is still visibly surfaced,
+        // but there is no turn/approval lock left to mutate.
+        return { ...next, error: asString(payload.error, 'An error occurred.') };
       }
-      // Same fail-closed turn-token guard as `server/agent:end` above: a
-      // same-conversation error left over from an earlier, already-finished
-      // turn must not release a later turn's still-in-flight send lock.
-      const canRelease = next.armedTurnToken === next.turnToken;
+      // A current turn-scoped error is terminal from either 'pending'
+      // (pre-ack — the Gateway can emit a session-creation error before
+      // ack) or 'active' (a prompt error after ack/start) state. Once an
+      // earlier turn on this conversation has already fully settled (its
+      // own terminal event processed, moving turnPhase to 'settled' before
+      // this turn was even sent), ordered Socket.IO delivery guarantees
+      // nothing further remains in flight for it — so a scoped error seen
+      // while turnPhase is 'pending' or 'active' can only belong to THIS
+      // turn, and must settle and release the lock.
       return {
         ...next,
         error: asString(payload.error, 'An error occurred.'),
         streaming: false,
-        sending: canRelease ? false : next.sending,
-        armedTurnToken: canRelease ? null : next.armedTurnToken,
+        sending: false,
+        turnPhase: 'settled',
         // A turn-scoped error also invalidates any approval request awaiting
         // a response — the gateway that just errored is unlikely to still
         // answer it, and the synchronous approveLockRef mirrors this field.
@@ -752,12 +779,11 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
         messageSeq: state.messageSeq + 1,
         error: null,
         sending: true,
-        // Sending a new turn mints a fresh token and immediately clears
-        // terminal eligibility — only THIS turn's own accepted ack/start may
-        // arm it, so a same-conversation terminal left over from the turn
-        // that just finished can never be mistaken for this one's.
-        turnToken: state.turnToken + 1,
-        armedTurnToken: null,
+        // Sending a new turn begins a fresh 'pending' phase — only THIS
+        // turn's own accepted agent:start may move it to 'active', so a
+        // same-conversation agent:end left over from the turn that just
+        // finished can never be mistaken for this one's.
+        turnPhase: 'pending',
         pendingSend: state.conversationId === null ? true : state.pendingSend,
       };
     }
@@ -771,7 +797,7 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
         sending: false,
         pendingSend: false,
         approvalRequestPending: false,
-        armedTurnToken: null,
+        turnPhase: 'settled',
       };
     }
 
@@ -792,6 +818,14 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
       return { ...state, approval: null, pendingApproval: null };
     }
 
+    case 'local/approval-saturated': {
+      // The non-evicting executed-approval cache is full and this is a
+      // distinct, never-before-seen approval — it is denied (fail closed),
+      // but unlike a plain replay of an already-executed ID, this must be
+      // visibly surfaced rather than silently dropped.
+      return { ...state, approval: null, pendingApproval: null, error: APPROVAL_LIMIT_MESSAGE };
+    }
+
     default:
       return state;
   }
@@ -973,9 +1007,10 @@ export function useChatConnection(): ChatConnectionValue {
         // unmounted (lifecycle reset), not recoverable by re-approving — a
         // false positive/availability cost but a genuine replay of any ID
         // ever seen by this hook can never execute a second time. Consuming
-        // (rather than silently no-op'ing) releases the UI lock so the
-        // denial is visible/recoverable by remounting.
-        dispatch({ type: 'local/consume-approval' });
+        // (rather than silently no-op'ing) releases the UI lock, and unlike
+        // the plain-replay branch above, sets a visible error notice so the
+        // denial is surfaced rather than silently dropped.
+        dispatch({ type: 'local/approval-saturated' });
         return;
       }
       executedApprovalIds.current.add(approval.approvalId);
-- 
2.54.0


From 4aaf41dd1ae13c73889e41a3552d693efd4af36a Mon Sep 17 00:00:00 2001
From: "shaggy (mosaic-dev box)" <shaggy@mosaic-dev.local>
Date: Mon, 10 Aug 2026 16:07:12 -0500
Subject: [PATCH 5/6] =?UTF-8?q?fix(web,gateway):=20close=20P3=20re-review#?=
 =?UTF-8?q?4=20findings=20=E2=80=94=20sanitize=20all=20executor=20catches;?=
 =?UTF-8?q?=20lock=20pre-start=20turn=20boundary=20(wire=20turnId=20deferr?=
 =?UTF-8?q?ed)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commands/command-executor-p8012.spec.ts   | 105 +++++++++++++++++-
 .../src/commands/command-executor.service.ts  |  13 ++-
 .../src/spa/chat/use-chat-connection.spec.tsx |   9 +-
 apps/web/src/spa/chat/use-chat-connection.ts  |  14 +++
 4 files changed, 128 insertions(+), 13 deletions(-)

diff --git a/apps/gateway/src/commands/command-executor-p8012.spec.ts b/apps/gateway/src/commands/command-executor-p8012.spec.ts
index 59f0ed6a..c8165c39 100644
--- a/apps/gateway/src/commands/command-executor-p8012.spec.ts
+++ b/apps/gateway/src/commands/command-executor-p8012.spec.ts
@@ -13,6 +13,7 @@ const mockRegistry = {
       { name: 'agent', aliases: ['a'], scope: 'agent', execution: 'socket', available: true },
       { name: 'prdy', aliases: [], scope: 'agent', execution: 'socket', available: true },
       { name: 'tools', aliases: [], scope: 'agent', execution: 'socket', available: true },
+      { name: 'mcp', aliases: [], scope: 'agent', execution: 'socket', available: true },
     ],
     skills: [],
   })),
@@ -73,7 +74,14 @@ const mockChatGateway = {
   broadcastSessionInfo: vi.fn(),
 };
 
-function buildService(redis: typeof mockRedis | null = mockRedis): CommandExecutorService {
+function buildService(
+  redis: typeof mockRedis | null = mockRedis,
+  mcpClient: {
+    reconnectServer: ReturnType<typeof vi.fn>;
+    getServerStatuses: ReturnType<typeof vi.fn>;
+    getToolDefinitions: ReturnType<typeof vi.fn>;
+  } | null = null,
+): CommandExecutorService {
   return new CommandExecutorService(
     mockRegistry as never,
     mockAgentService as never,
@@ -83,7 +91,7 @@ function buildService(redis: typeof mockRedis | null = mockRedis): CommandExecut
     mockBrain as never,
     null,
     mockChatGateway as never,
-    null,
+    mcpClient as never,
   );
 }
 
@@ -266,8 +274,9 @@ describe('CommandExecutorService — P8-012 commands', () => {
   // server-side but never handed back to the socket client.
   it('sanitizes the top-level command catch, logging the raw exception but never returning it to the client', async () => {
     const distinctiveRawFailure = 'ECONNREFUSED distinctive-raw-redis-failure-token-9f31';
+    const rawError = new Error(distinctiveRawFailure);
     const failingRedis = {
-      set: vi.fn().mockRejectedValue(new Error(distinctiveRawFailure)),
+      set: vi.fn().mockRejectedValue(rawError),
       get: vi.fn(),
       del: vi.fn(),
     };
@@ -287,10 +296,94 @@ describe('CommandExecutorService — P8-012 commands', () => {
     expect(result.message).not.toContain(distinctiveRawFailure);
     expect(result.message).not.toContain('ECONNREFUSED');
 
-    // The real exception is still logged server-side.
+    // The real exception is still logged server-side, as the raw Error
+    // object itself (not stringified/interpolated into the log message).
     expect(loggerErrorSpy).toHaveBeenCalled();
-    const loggedText = loggerErrorSpy.mock.calls.map((call) => String(call[0])).join(' ');
-    expect(loggedText).toContain(distinctiveRawFailure);
+    const loggedRawError = loggerErrorSpy.mock.calls.some((call) => call.includes(rawError));
+    expect(loggedRawError).toBe(true);
+
+    loggerErrorSpy.mockRestore();
+  });
+
+  // Inner catch sanitization (P3-5 operator ruling): every catch in
+  // command-executor.service.ts that returns a SlashCommandResultPayload
+  // must sanitize the client-facing message the same way the top-level
+  // catch does, while still logging the raw exception server-side.
+  it('/agent new sanitizes agent-creation failures, logging the raw exception but never returning it to the client', async () => {
+    const marker = new Error('distinctive-agent-create-failure-token-A17f');
+    mockBrain.agents.create.mockRejectedValueOnce(marker);
+    const loggerErrorSpy = vi.spyOn(Logger.prototype, 'error').mockImplementation(() => undefined);
+
+    const payload: SlashCommandPayload = {
+      command: 'agent',
+      args: 'new my-new-agent',
+      conversationId,
+    };
+    const result = await service.execute(payload, userScope);
+
+    expect(result.success).toBe(false);
+    expect(result.command).toBe('agent');
+    expect(result.message).toBe('Failed to create agent due to an internal error.');
+    expect(result.message).not.toContain('distinctive-agent-create-failure-token-A17f');
+
+    expect(loggerErrorSpy).toHaveBeenCalled();
+    const loggedRawError = loggerErrorSpy.mock.calls.some((call) => call.includes(marker));
+    expect(loggedRawError).toBe(true);
+
+    loggerErrorSpy.mockRestore();
+  });
+
+  it('/agent <name> switch sanitizes agent-lookup failures, logging the raw exception but never returning it to the client', async () => {
+    const marker = new Error('distinctive-agent-switch-failure-token-B29c');
+    mockBrain.agents.findByName.mockRejectedValueOnce(marker);
+    const loggerErrorSpy = vi.spyOn(Logger.prototype, 'error').mockImplementation(() => undefined);
+
+    const payload: SlashCommandPayload = {
+      command: 'agent',
+      args: 'some-other-agent',
+      conversationId,
+    };
+    const result = await service.execute(payload, userScope);
+
+    expect(result.success).toBe(false);
+    expect(result.command).toBe('agent');
+    expect(result.message).toBe('Failed to switch agent due to an internal error.');
+    expect(result.message).not.toContain('distinctive-agent-switch-failure-token-B29c');
+
+    expect(loggerErrorSpy).toHaveBeenCalled();
+    const loggedRawError = loggerErrorSpy.mock.calls.some((call) => call.includes(marker));
+    expect(loggedRawError).toBe(true);
+
+    loggerErrorSpy.mockRestore();
+  });
+
+  it('/mcp reconnect sanitizes MCP client failures, logging the raw exception but never returning it to the client', async () => {
+    const marker = new Error('distinctive-mcp-reconnect-failure-token-C33e');
+    const mockMcpClient = {
+      reconnectServer: vi.fn().mockRejectedValue(marker),
+      getServerStatuses: vi.fn(() => []),
+      getToolDefinitions: vi.fn(() => []),
+    };
+    const mcpService = buildService(mockRedis, mockMcpClient);
+    const loggerErrorSpy = vi.spyOn(Logger.prototype, 'error').mockImplementation(() => undefined);
+
+    const payload: SlashCommandPayload = {
+      command: 'mcp',
+      args: 'reconnect my-server',
+      conversationId,
+    };
+    const result = await mcpService.execute(payload, userScope);
+
+    expect(result.success).toBe(false);
+    expect(result.command).toBe('mcp');
+    expect(result.message).toBe(
+      'Failed to reconnect MCP server "my-server" due to an internal error.',
+    );
+    expect(result.message).not.toContain('distinctive-mcp-reconnect-failure-token-C33e');
+
+    expect(loggerErrorSpy).toHaveBeenCalled();
+    const loggedRawError = loggerErrorSpy.mock.calls.some((call) => call.includes(marker));
+    expect(loggedRawError).toBe(true);
 
     loggerErrorSpy.mockRestore();
   });
diff --git a/apps/gateway/src/commands/command-executor.service.ts b/apps/gateway/src/commands/command-executor.service.ts
index 4388ecaa..29066ab9 100644
--- a/apps/gateway/src/commands/command-executor.service.ts
+++ b/apps/gateway/src/commands/command-executor.service.ts
@@ -159,7 +159,7 @@ export class CommandExecutorService {
           };
       }
     } catch (err) {
-      this.logger.error(`Command /${command} failed: ${err}`);
+      this.logger.error(`Command /${command} failed`, err);
       return {
         command,
         conversationId,
@@ -341,11 +341,11 @@ export class CommandExecutorService {
           data: { agentId: newAgent.id, agentName: newAgent.name },
         };
       } catch (err) {
-        this.logger.error(`Failed to create agent: ${err}`);
+        this.logger.error(`Failed to create agent "${namePart}" for user ${userId}`, err);
         return {
           command: 'agent',
           success: false,
-          message: `Failed to create agent: ${String(err)}`,
+          message: 'Failed to create agent due to an internal error.',
           conversationId,
         };
       }
@@ -396,11 +396,11 @@ export class CommandExecutorService {
         data: { agentId: agentConfig.id, agentName: agentConfig.name, model: agentConfig.model },
       };
     } catch (err) {
-      this.logger.error(`Failed to switch agent "${agentName}": ${err}`);
+      this.logger.error(`Failed to switch agent "${agentName}"`, err);
       return {
         command: 'agent',
         success: false,
-        message: `Failed to switch agent: ${String(err)}`,
+        message: 'Failed to switch agent due to an internal error.',
         conversationId,
       };
     }
@@ -613,11 +613,12 @@ export class CommandExecutorService {
             message: `MCP server "${serverName}" reconnected successfully.`,
           };
         } catch (err) {
+          this.logger.error(`Failed to reconnect MCP server "${serverName}"`, err);
           return {
             command: 'mcp',
             conversationId,
             success: false,
-            message: `Failed to reconnect MCP server "${serverName}": ${err instanceof Error ? err.message : String(err)}`,
+            message: `Failed to reconnect MCP server "${serverName}" due to an internal error.`,
           };
         }
       }
diff --git a/apps/web/src/spa/chat/use-chat-connection.spec.tsx b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
index d340c40a..545516e2 100644
--- a/apps/web/src/spa/chat/use-chat-connection.spec.tsx
+++ b/apps/web/src/spa/chat/use-chat-connection.spec.tsx
@@ -1587,7 +1587,14 @@ describe('useChatConnection', () => {
     expect(fake.emitted.filter((e) => e.event === 'command:approve')).toHaveLength(2);
   });
 
-  it("does not settle turn B when a duplicate agent:end from already-settled turn A is redelivered after B's own ack but before B's own start", async () => {
+  it("P3-5c: locks the achievable pre-start boundary — turn A settled, turn B sent and acked but before B's own start, a stale/duplicate agent:end from A does not release B (a third send stays blocked), and only B's own start/end sequence legitimately releases it", async () => {
+    // This is the provable boundary: in-order Socket.IO delivery guarantees
+    // a same-conversation agent:end arriving before this turn's own
+    // agent:start can only be a stale straggler. Once a turn is 'active',
+    // AgentEndPayload/ErrorPayload carry no turn identity to further
+    // distinguish a genuine end from a duplicate — that residual is not,
+    // and cannot be, asserted here; full correlation needs a wire turnId
+    // (deferred to P5). See the reducer comments in use-chat-connection.ts.
     // Turn A completes normally on c1.
     await act(async () => {
       fake.serverEmit('message:ack', { conversationId: 'c1', messageId: 'm1' });
diff --git a/apps/web/src/spa/chat/use-chat-connection.ts b/apps/web/src/spa/chat/use-chat-connection.ts
index 9f85ad99..b2a81dd2 100644
--- a/apps/web/src/spa/chat/use-chat-connection.ts
+++ b/apps/web/src/spa/chat/use-chat-connection.ts
@@ -586,6 +586,13 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
         // still in-flight (or already-finalized) current turn.
         return next;
       }
+      // Reaching here means turnPhase is 'active' — but AgentEndPayload
+      // carries only a conversationId, no turn/message identity. In-order
+      // delivery proves the boundary enforced above (a same-conversation end
+      // arriving before this turn's own agent:start is provably stale); once
+      // 'active', a genuine end for this turn and a same-conversation
+      // stale/duplicate end are indistinguishable here. This residual is
+      // accepted — full correlation requires a wire turnId, deferred to P5.
       const hasContent = next.text.length > 0 || next.thinking.length > 0;
       const messages = hasContent
         ? capPush(
@@ -751,6 +758,13 @@ function reduce(state: ChatConnectionState, action: Action): ChatConnectionState
       // nothing further remains in flight for it — so a scoped error seen
       // while turnPhase is 'pending' or 'active' can only belong to THIS
       // turn, and must settle and release the lock.
+      //
+      // Same wire limitation as agent:end above: ErrorPayload also carries
+      // only a conversationId, no turn identity. A pre-ack ('pending') error
+      // is accepted as current by design, per the reasoning above. Once
+      // 'active', a genuine error for this turn and a same-conversation
+      // stale/duplicate error are equally indistinguishable — accepted
+      // residual; full correlation needs a wire turnId, deferred to P5.
       return {
         ...next,
         error: asString(payload.error, 'An error occurred.'),
-- 
2.54.0


From 7d84e4ee03673ff602eeb2e243650fe211503678 Mon Sep 17 00:00:00 2001
From: "shaggy (mosaic-dev box)" <shaggy@mosaic-dev.local>
Date: Mon, 10 Aug 2026 16:58:07 -0500
Subject: [PATCH 6/6] fix(gateway): sanitize raw exceptions in /mcp status +
 /reload sources (P3 re-review#5 blocker)

---
 .../src/mcp-client/mcp-client.service.spec.ts | 44 +++++++++++
 .../src/mcp-client/mcp-client.service.ts      |  2 +-
 .../gateway/src/reload/reload.service.spec.ts | 79 +++++++++++++++++++
 apps/gateway/src/reload/reload.service.ts     |  6 +-
 4 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 apps/gateway/src/mcp-client/mcp-client.service.spec.ts

diff --git a/apps/gateway/src/mcp-client/mcp-client.service.spec.ts b/apps/gateway/src/mcp-client/mcp-client.service.spec.ts
new file mode 100644
index 00000000..531299c9
--- /dev/null
+++ b/apps/gateway/src/mcp-client/mcp-client.service.spec.ts
@@ -0,0 +1,44 @@
+import { Logger } from '@nestjs/common';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { McpClientService } from './mcp-client.service.js';
+
+const MCP_LEAK_MARKER = 'MCP_LEAK_MARKER /srv/secret';
+
+describe('McpClientService — failed connect error sanitization', () => {
+  const originalMcpServers = process.env['MCP_SERVERS'];
+
+  beforeEach(() => {
+    process.env['MCP_SERVERS'] = JSON.stringify([
+      { name: 'leaky-server', url: 'http://localhost:9999/mcp' },
+    ]);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    if (originalMcpServers === undefined) {
+      delete process.env['MCP_SERVERS'];
+    } else {
+      process.env['MCP_SERVERS'] = originalMcpServers;
+    }
+  });
+
+  it('stores a generic serverEntry.error while logging the raw exception server-side', async () => {
+    vi.spyOn(Client.prototype, 'connect').mockRejectedValue(new Error(MCP_LEAK_MARKER));
+    const errorSpy = vi.spyOn(Logger.prototype, 'error').mockImplementation(() => undefined);
+
+    const service = new McpClientService();
+    await service.onModuleInit();
+
+    const statuses = service.getServerStatuses();
+    expect(statuses).toHaveLength(1);
+    expect(statuses[0]?.connected).toBe(false);
+    expect(statuses[0]?.error).toBe('Connection failed (see server logs).');
+    expect(statuses[0]?.error).not.toContain(MCP_LEAK_MARKER);
+
+    const loggedRawMarker = errorSpy.mock.calls.some((call) =>
+      call.some((arg) => typeof arg === 'string' && arg.includes(MCP_LEAK_MARKER)),
+    );
+    expect(loggedRawMarker).toBe(true);
+  });
+});
diff --git a/apps/gateway/src/mcp-client/mcp-client.service.ts b/apps/gateway/src/mcp-client/mcp-client.service.ts
index 28910e0d..6c304f70 100644
--- a/apps/gateway/src/mcp-client/mcp-client.service.ts
+++ b/apps/gateway/src/mcp-client/mcp-client.service.ts
@@ -189,7 +189,7 @@ export class McpClientService implements OnModuleInit, OnModuleDestroy {
       );
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
-      serverEntry.error = message;
+      serverEntry.error = 'Connection failed (see server logs).';
       serverEntry.connected = false;
       this.logger.error(`Failed to connect to MCP server "${config.name}": ${message}`);
     }
diff --git a/apps/gateway/src/reload/reload.service.spec.ts b/apps/gateway/src/reload/reload.service.spec.ts
index 25696941..f939872a 100644
--- a/apps/gateway/src/reload/reload.service.spec.ts
+++ b/apps/gateway/src/reload/reload.service.spec.ts
@@ -1,5 +1,8 @@
+import { Logger } from '@nestjs/common';
 import { describe, expect, it, vi } from 'vitest';
+import type { SlashCommandPayload, SystemReloadPayload } from '@mosaicstack/types';
 import { ReloadService } from './reload.service.js';
+import { CommandExecutorService } from '../commands/command-executor.service.js';
 
 function createMockCommandRegistry() {
   return {
@@ -104,3 +107,79 @@ describe('ReloadService', () => {
     expect(() => service.registerPlugin('my-plugin', {})).not.toThrow();
   });
 });
+
+describe('ReloadService — /reload command sanitizes plugin errors', () => {
+  it('generic per-plugin errors reach the chat surface while raw markers stay server-side only', async () => {
+    const registry = {
+      getManifest: vi.fn().mockReturnValue({
+        version: 1,
+        commands: [
+          { name: 'reload', aliases: [], scope: 'core', execution: 'socket', available: true },
+        ],
+        skills: [],
+      }),
+    };
+    const reloadService = new ReloadService(registry as never);
+
+    const RELOAD_LOAD_LEAK_MARKER = 'RELOAD_LOAD_LEAK_MARKER /srv/load-secret';
+    const RELOAD_UNLOAD_LEAK_MARKER = 'RELOAD_UNLOAD_LEAK_MARKER /srv/unload-secret';
+
+    reloadService.registerPlugin('unload-fails', {
+      pluginName: 'unload-fails',
+      onLoad: vi.fn().mockResolvedValue(undefined),
+      onUnload: vi.fn().mockRejectedValue(new Error(RELOAD_UNLOAD_LEAK_MARKER)),
+    });
+    reloadService.registerPlugin('load-fails', {
+      pluginName: 'load-fails',
+      onLoad: vi.fn().mockRejectedValue(new Error(RELOAD_LOAD_LEAK_MARKER)),
+      onUnload: vi.fn().mockResolvedValue(undefined),
+    });
+
+    const errorSpy = vi.spyOn(Logger.prototype, 'error').mockImplementation(() => undefined);
+    const broadcastReload = vi.fn();
+    const mockChatGateway = { broadcastReload };
+    const mockAgentService = { getSession: vi.fn(), applyAgentConfig: vi.fn() };
+    const mockSystemOverride = { set: vi.fn(), get: vi.fn(), clear: vi.fn() };
+    const mockSessionGC = { sweepOrphans: vi.fn() };
+    const mockBrain = { agents: { findByName: vi.fn(), findById: vi.fn(), create: vi.fn() } };
+
+    const executor = new CommandExecutorService(
+      registry as never,
+      mockAgentService as never,
+      mockSystemOverride as never,
+      mockSessionGC as never,
+      null,
+      mockBrain as never,
+      reloadService,
+      mockChatGateway as never,
+      null,
+    );
+
+    const payload: SlashCommandPayload = { command: 'reload', conversationId: 'conv-1' };
+    const result = await executor.execute(payload, { userId: 'user-1', tenantId: 'user-1' });
+
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('unload-fails: unload failed (internal error)');
+    expect(result.message).toContain('load-fails: load failed (internal error)');
+    expect(result.message).not.toContain(RELOAD_UNLOAD_LEAK_MARKER);
+    expect(result.message).not.toContain(RELOAD_LOAD_LEAK_MARKER);
+
+    expect(broadcastReload).toHaveBeenCalledOnce();
+    const broadcastPayload = broadcastReload.mock.calls[0]?.[0] as SystemReloadPayload;
+    expect(broadcastPayload.message).toContain('unload-fails: unload failed (internal error)');
+    expect(broadcastPayload.message).toContain('load-fails: load failed (internal error)');
+    expect(broadcastPayload.message).not.toContain(RELOAD_UNLOAD_LEAK_MARKER);
+    expect(broadcastPayload.message).not.toContain(RELOAD_LOAD_LEAK_MARKER);
+
+    const loggedUnloadMarker = errorSpy.mock.calls.some((call) =>
+      call.some((arg) => typeof arg === 'string' && arg.includes(RELOAD_UNLOAD_LEAK_MARKER)),
+    );
+    const loggedLoadMarker = errorSpy.mock.calls.some((call) =>
+      call.some((arg) => typeof arg === 'string' && arg.includes(RELOAD_LOAD_LEAK_MARKER)),
+    );
+    expect(loggedUnloadMarker).toBe(true);
+    expect(loggedLoadMarker).toBe(true);
+
+    errorSpy.mockRestore();
+  });
+});
diff --git a/apps/gateway/src/reload/reload.service.ts b/apps/gateway/src/reload/reload.service.ts
index 1d84e27b..b6b1f269 100644
--- a/apps/gateway/src/reload/reload.service.ts
+++ b/apps/gateway/src/reload/reload.service.ts
@@ -58,7 +58,8 @@ export class ReloadService implements OnApplicationBootstrap, OnApplicationShutd
           await plugin.onUnload();
           reloaded.push(name);
         } catch (err) {
-          errors.push(`${name}: unload failed — ${err}`);
+          this.logger.error(`Plugin "${name}" failed during onUnload: ${err}`);
+          errors.push(`${name}: unload failed (internal error)`);
         }
       }
     }
@@ -69,7 +70,8 @@ export class ReloadService implements OnApplicationBootstrap, OnApplicationShutd
         try {
           await plugin.onLoad();
         } catch (err) {
-          errors.push(`${name}: load failed — ${err}`);
+          this.logger.error(`Plugin "${name}" failed during onLoad: ${err}`);
+          errors.push(`${name}: load failed (internal error)`);
         }
       }
     }
-- 
2.54.0