@brainpilot/web 0.0.5 → 0.0.6

package/src/components/session/TraceNodeDetail.tsx

@@ -1,6 +1,7 @@
 import { AlertTriangle, ArrowRight, Box, Clock3, FileText, GitBranch, Timer, Wrench } from "lucide-react";
 import { TraceNode } from "../../contracts/backend";
 import { TranslateVars } from "../../i18n/translate";
+import { formatToolName } from "../../utils/toolDisplay";
 import {
   artifactLabels,
   formatDuration,
@@ -13,11 +14,13 @@ import {
 
 interface TraceNodeDetailProps {
   node: TraceNode | null;
+  nodes?: TraceNode[];
   onSelectNode: (id: string) => void;
   /** When provided, artifact rows become buttons that focus that file. */
   onSelectArtifact?: (path: string) => void;
   /** Currently focused artifact path (for highlight). */
   activeArtifactPath?: string | null;
+  formatKind?: (kind: string) => string;
   t: (key: string, vars?: TranslateVars) => string;
 }
 
@@ -26,11 +29,31 @@ interface TraceNodeDetailProps {
  * TracePanel so the live trace view and the demo replay share it. In the demo
  * an `onSelectArtifact` handler wires artifact rows to the file preview.
  */
-export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeArtifactPath, t }: TraceNodeDetailProps) {
+export function TraceNodeDetail({ node, nodes, onSelectNode, onSelectArtifact, activeArtifactPath, formatKind, t }: TraceNodeDetailProps) {
   if (!node) {
-    return <p>No trace node selected.</p>;
+    return <p>{t("trace.node.noneSelected")}</p>;
   }
   const statusKey = getStatusLabelKey(node.status);
+  const nodeById = new Map((nodes ?? []).map((item) => [item.id, item]));
+  const kind = getNodeKind(node);
+  const kindLabel = formatKind?.(kind) ?? kind;
+  const parentLabel = (id: string) =>
+    nodeById.get(id)?.title || t("trace.node.parentFallback");
+  const childNodes = node.childIds
+    .map((id) => ({ id, title: nodeById.get(id)?.title }))
+    .filter((item) => item.title);
+  const metrics = [
+    node.durationMs !== undefined
+      ? { key: "duration", icon: <Timer size={13} />, label: formatDuration(node.durationMs) }
+      : null,
+    node.toolCalls.length > 0
+      ? { key: "tools", icon: <Wrench size={13} />, label: t("trace.node.tools", { count: node.toolCalls.length }) }
+      : null,
+    node.artifacts.length > 0
+      ? { key: "artifacts", icon: <Box size={13} />, label: t("trace.node.artifacts", { count: node.artifacts.length }) }
+      : null,
+  ].filter((item): item is { key: string; icon: JSX.Element; label: string } => item !== null);
+
   return (
     <>
       <div className="trace-detail__title">
@@ -41,9 +64,13 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
         </span>
       </div>
       <div className="trace-detail__badges">
-        <span>{node.id}</span>
-        <span>{getNodeKind(node)}</span>
-        <span>{node.agent || "agent unknown"}</span>
+        <span title={kind}>{kindLabel}</span>
+        {node.agent ? <span>{node.agent}</span> : null}
+        {node.metadata?.auto ? (
+          <span className="trace-detail__badge--auto" title={t("trace.node.autoTitle")}>
+            {t("trace.node.auto")}
+          </span>
+        ) : null}
       </div>
       <p>{node.summary || node.description || node.content || "No summary recorded."}</p>
       {node.reason ? (
@@ -58,19 +85,21 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
           <p>{node.context}</p>
         </section>
       ) : null}
-      <div className="trace-detail__metrics">
-        <span><Timer size={13} /> {formatDuration(node.durationMs)}</span>
-        <span><Wrench size={13} /> {node.toolCalls.length} tools</span>
-        <span><Box size={13} /> {node.artifacts.length} artifacts</span>
-      </div>
+      {metrics.length > 0 ? (
+        <div className="trace-detail__metrics">
+          {metrics.map((metric) => (
+            <span key={metric.key}>{metric.icon} {metric.label}</span>
+          ))}
+        </div>
+      ) : null}
       {node.parents.length > 0 ? (
         <section className="trace-detail__section">
-          <h4><GitBranch size={13} /> Dependencies</h4>
+          <h4><GitBranch size={13} /> {t("trace.node.dependencies")}</h4>
           <div className="trace-relation-list">
             {node.parents.map((parent) => (
-              <button key={parent.id} onClick={() => onSelectNode(parent.id)} type="button">
-                <strong>{parent.id}</strong>
-                <span>{relationLabels[parent.relation || ""] || parent.relation || "parent"}{parent.edgeType ? ` · ${parent.edgeType}` : ""}</span>
+              <button key={parent.id} onClick={() => onSelectNode(parent.id)} title={parent.id} type="button">
+                <strong>{parentLabel(parent.id)}</strong>
+                <span>{relationLabels[parent.relation || ""] || parent.relation || "parent"}</span>
                 {parent.explanation ? <small>{parent.explanation}</small> : null}
               </button>
             ))}
@@ -79,21 +108,21 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
       ) : null}
       {node.toolCalls.length > 0 ? (
         <section className="trace-detail__section">
-          <h4><Wrench size={13} /> Tool Calls</h4>
+          <h4><Wrench size={13} /> {t("trace.node.toolCalls")}</h4>
           <div className="trace-chip-list">
-            {node.toolCalls.map((tool) => <span key={tool}>{tool}</span>)}
+            {node.toolCalls.map((tool) => <span key={tool} title={tool}>{formatToolName(tool)}</span>)}
           </div>
         </section>
       ) : null}
       {node.errorMessage ? (
         <section className="trace-detail__section trace-detail__section--error">
-          <h4><AlertTriangle size={13} /> Error</h4>
+          <h4><AlertTriangle size={13} /> {t("trace.node.error")}</h4>
           <p>{node.errorMessage}</p>
         </section>
       ) : null}
       {node.artifacts.length > 0 ? (
         <section className="trace-detail__section">
-          <h4><Box size={13} /> Artifacts</h4>
+          <h4><Box size={13} /> {t("trace.node.artifactsTitle")}</h4>
           <div className="trace-artifact-list">
             {node.artifacts.map((artifact) => {
               const label = artifactLabels[artifact.type || ""] || artifact.type || "file";
@@ -125,16 +154,24 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
         </section>
       ) : null}
       <section className="trace-detail__section">
-        <h4><Clock3 size={13} /> Timeline</h4>
+        <h4><Clock3 size={13} /> {t("trace.node.timeline")}</h4>
         <dl>
           <div>
-            <dt>Created</dt>
+            <dt>{t("trace.node.created")}</dt>
             <dd>{formatTime(node.timestamp?.createdAt || node.createdAt)}</dd>
           </div>
-          <div>
-            <dt>Children</dt>
-            <dd>{node.childIds.join(", ") || "-"}</dd>
-          </div>
+          {childNodes.length > 0 ? (
+            <div>
+              <dt>{t("trace.node.children")}</dt>
+              <dd className="trace-detail__children">
+                {childNodes.map((child) => (
+                  <button key={child.id} onClick={() => onSelectNode(child.id)} title={child.id} type="button">
+                    {child.title}
+                  </button>
+                ))}
+              </dd>
+            </div>
+          ) : null}
         </dl>
       </section>
     </>

package/src/components/session/agentNetworkShared.ts

@@ -13,6 +13,7 @@ import {
   GitBranch,
   Microscope,
   PenLine,
+  ShieldCheck,
   Sparkles,
   UserRoundCog,
   Wrench,
@@ -92,6 +93,13 @@ export const AGENT_PROFILES: Record<string, AgentProfile> = {
     accent: "warning",
     defaultTools: ["Read", "Write", "Grep", "Bash", "send_message"],
   },
+  auditor: {
+    displayName: "Auditor",
+    role: "profile.auditor.role",
+    description: "profile.auditor.desc",
+    accent: "danger",
+    defaultTools: ["Read", "Grep", "Bash", "Write", "send_message", "record_trace"],
+  },
   user: {
     displayName: "You",
     role: "profile.user.role",
@@ -127,6 +135,7 @@ export const BUILTIN_AGENT_NAMES = [
   "experimentalist",
   "engineer",
   "writer",
+  "auditor",
 ] as const;
 
 /* --------------------------------------------------------------------------
@@ -278,6 +287,7 @@ export function getAgentIcon(name: string) {
   if (normalized.includes("experiment")) return Microscope;
   if (normalized.includes("engineer")) return Wrench;
   if (normalized.includes("writer")) return PenLine;
+  if (normalized.includes("audit")) return ShieldCheck;
   if (normalized.includes("idea") || normalized.includes("creat")) return Sparkles;
   return Bot;
 }

package/src/components/session/traceLayout.ts

@@ -31,6 +31,35 @@ export function getNodeKind(node: TraceNode): string {
   return node.nodeType || node.type || "step";
 }
 
+export function getNodeKindLabelKey(kind: string): string | null {
+  switch (kind) {
+    case "task":
+      return "trace.kind.task";
+    case "trace":
+      return "trace.kind.trace";
+    case "action":
+      return "trace.kind.action";
+    case "observation":
+      return "trace.kind.observation";
+    case "decision":
+      return "trace.kind.decision";
+    case "milestone":
+      return "trace.kind.milestone";
+    case "validation":
+      return "trace.kind.validation";
+    case "audit":
+      return "trace.kind.audit";
+    case "writing":
+      return "trace.kind.writing";
+    case "research":
+      return "trace.kind.research";
+    case "step":
+      return "trace.kind.step";
+    default:
+      return null;
+  }
+}
+
 export function truncateNodeTitle(title?: string, maxUnits = 26): string {
   if (!title) {
     return "";
@@ -65,6 +94,9 @@ export const relationLabels: Record<string, string> = {
   used: "used",
   produced: "produced",
   comparison_with: "compared with",
+  follows: "then",
+  depends_on: "depends on",
+  parent: "parent",
 };
 
 export const artifactLabels: Record<string, string> = {

package/src/components/settings/SettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { FormEvent, useEffect, useState } from "react";
 import { Check, Eye, EyeOff, Loader2, Plug, Plus, Settings, SlidersHorizontal, Trash2, UserRound, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-import type { McpServerEntry, ProviderProfile } from "../../contracts/backend";
+import type { McpServerEntry, ProviderProfile, ProviderApi } from "../../contracts/backend";
 import { useAuth } from "../../contexts/AuthContext";
 import { usePreferences } from "../../contexts/PreferencesContext";
 import { useT } from "../../i18n/useT";
@@ -26,6 +26,7 @@ const tabs: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
 const DEFAULT_PROVIDER_FORM = {
   name: "",
   baseUrl: "https://api.anthropic.com",
+  api: "anthropic-messages" as ProviderApi,
   apiKey: "",
   apiKeyMasked: "",
   models: ["claude-opus-4-6"],
@@ -184,6 +185,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         ? await api.providers.update(editingProviderId, {
             name: providerForm.name,
             baseUrl: providerForm.baseUrl,
+            api: providerForm.api,
             ...(providerForm.apiKey ? { apiKey: providerForm.apiKey } : {}),
             models,
             iconColor: providerForm.iconColor,
@@ -192,6 +194,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         : await api.providers.create({
             name: providerForm.name,
             baseUrl: providerForm.baseUrl,
+            api: providerForm.api,
             apiKey: providerForm.apiKey,
             models,
             iconColor: providerForm.iconColor,
@@ -214,6 +217,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     setProviderForm({
       name: provider.name,
       baseUrl: provider.baseUrl,
+      api: provider.api,
       apiKey: "",
       apiKeyMasked: provider.apiKeyMasked || "",
       models: provider.models.length ? provider.models : [""],
@@ -562,6 +566,20 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                 <span>{t("settings.providerForm.baseUrl")}</span>
                 <input placeholder="https://api.anthropic.com" required value={providerForm.baseUrl} onChange={(event) => setProviderForm({ ...providerForm, baseUrl: event.target.value })} />
               </label>
+              <div className="provider-form__field">
+                <span>{t("settings.providerForm.protocol")}</span>
+                <CustomSelect
+                  ariaLabel={t("settings.providerForm.protocolAria")}
+                  onChange={(value) => setProviderForm({ ...providerForm, api: value as ProviderApi })}
+                  options={[
+                    { label: "Anthropic Messages", value: "anthropic-messages" },
+                    { label: "OpenAI Completions", value: "openai-completions" },
+                    { label: "OpenAI Responses", value: "openai-responses" },
+                    { label: "Azure OpenAI Responses", value: "azure-openai-responses" },
+                  ]}
+                  value={providerForm.api}
+                />
+              </div>
               <label className="provider-form__key">
                 <span>{t("settings.providerForm.apiKey")} {editingProviderId ? t("settings.providerForm.apiKeyKeep") : ""}</span>
                 <input

package/src/components/shell/DesktopShell.tsx

@@ -4,6 +4,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
+import { runtimeConfig } from "../../config";
 import { PromptComposer } from "../chat/PromptComposer";
 import { DemoView } from "../demo/DemoView";
 import { FileSidebar } from "../files/FileSidebar";
@@ -23,10 +24,13 @@ const MAX_SIDEBAR_WIDTH = 420;
 export function DesktopShell() {
   const { isAuthReady } = useAuth();
   const { currentSandbox, operation, error, stats } = useSandbox();
-  const { currentSession, currentView, messages, isRefreshingMessages, refreshMessages, setCurrentView } = useSessions();
+  const { currentSession, currentView, isRefreshingMessages, refreshMessages, setCurrentView } = useSessions();
   const t = useT();
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [activePage, setActivePage] = useState<"workspace" | "demo">("workspace");
+  // Bumped on every sidebar "Live Demo" click so DemoView returns to its
+  // session-selection landing even when the demo page is already open (#111).
+  const [demoResetSignal, setDemoResetSignal] = useState(0);
   const [sidebarWidth, setSidebarWidth] = useState(268);
   const [isSidebarResizing, setIsSidebarResizing] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -109,7 +113,10 @@ export function DesktopShell() {
       <Sidebar
         isCollapsed={isSidebarCollapsed}
         activePage={activePage}
-        onOpenDemo={() => setActivePage("demo")}
+        onOpenDemo={() => {
+          setActivePage("demo");
+          setDemoResetSignal((n) => n + 1);
+        }}
         onGoWorkspace={() => setActivePage("workspace")}
         onOpenSettings={() => setIsSettingsOpen(true)}
         onOpenSearch={() => setIsSearchOpen(true)}
@@ -125,7 +132,7 @@ export function DesktopShell() {
       />
 
       {activePage === "demo" ? (
-        <DemoView />
+        <DemoView resetSignal={demoResetSignal} />
       ) : (
       <main
         className={`workspace ${isFilesOpen ? "workspace--files-open" : ""} ${
@@ -136,47 +143,60 @@ export function DesktopShell() {
       >
         <header className="workspace-toolbar" aria-label={t("shell.aria.toolbarActions")}>
           <div className="session-title" aria-label={t("shell.aria.activeSession")}>
-            <span className="session-title__label">{t("shell.sessionLabel")}</span>
+            {/* #105: foreground the human-readable session title (same source as
+                the sidebar). The id is debug-only metadata now — surfaced as a
+                hover tooltip + muted short id, never the primary label. Falls
+                back to `Session <id8>` when the title is missing. */}
+            <span
+              className="session-title__name"
+              title={currentSession?.id ?? undefined}
+            >
+              {currentSession?.title ||
+                (currentSession?.id
+                  ? `${t("shell.sessionLabel")} ${currentSession.id.slice(0, 8)}`
+                  : t("shell.defaultWorkspace"))}
+            </span>
             {currentSession?.id ? (
               <span className="session-title__id">{currentSession.id.slice(0, 8)}</span>
             ) : null}
-            {messages.length === 0 ? (
-              <span className="session-title__name">
-                {currentSession?.title || t("shell.defaultWorkspace")}
-              </span>
-            ) : null}
           </div>
           <div className="workspace-toolbar__actions">
-            <div className="workspace-view-tabs" role="tablist" aria-label={t("shell.aria.viewTabs")}>
+            {/* #104: icon-only nav. The label stays in the DOM (visually
+                hidden) so it remains the button's accessible name, and `title`
+                gives a hover/focus tooltip — no separate aria-label needed. */}
+            <div className="workspace-view-tabs workspace-view-tabs--icon-only" role="tablist" aria-label={t("shell.aria.viewTabs")}>
               <button
                 aria-selected={currentView === "chat"}
                 className={currentView === "chat" ? "is-active" : ""}
                 onClick={() => setCurrentView("chat")}
                 role="tab"
+                title={t("shell.view.chat")}
                 type="button"
               >
                 <MessageSquare size={14} />
-                <span>{t("shell.view.chat")}</span>
+                <span className="sr-only">{t("shell.view.chat")}</span>
               </button>
               <button
                 aria-selected={currentView === "agents"}
                 className={currentView === "agents" ? "is-active" : ""}
                 onClick={() => setCurrentView("agents")}
                 role="tab"
+                title={t("shell.view.agents")}
                 type="button"
               >
                 <Bot size={14} />
-                <span>{t("shell.view.agents")}</span>
+                <span className="sr-only">{t("shell.view.agents")}</span>
               </button>
               <button
                 aria-selected={currentView === "trace"}
                 className={currentView === "trace" ? "is-active" : ""}
                 onClick={() => setCurrentView("trace")}
                 role="tab"
+                title={t("shell.view.trace")}
                 type="button"
               >
                 <GitBranch size={14} />
-                <span>{t("shell.view.trace")}</span>
+                <span className="sr-only">{t("shell.view.trace")}</span>
               </button>
             </div>
             {currentView === "chat" ? (
@@ -188,7 +208,12 @@ export function DesktopShell() {
                 <RefreshCw size={14} />
               </IconButton>
             ) : null}
-            <SandboxStatus />
+            {/* #100: in local single-user mode there is no Docker sandbox to
+                inspect — the runtime IS the workspace, so the Sandbox status
+                popover would only show empty container metrics and read like a
+                fault. Hide it here; downstream multi-user Docker builds set
+                VITE_LOCAL_MODE=0 and keep the real container UI. */}
+            {runtimeConfig.localMode ? null : <SandboxStatus />}
             <IconButton
               aria-pressed={isFilesOpen}
               className={isFilesOpen ? "is-active" : ""}

package/src/components/sidebar/Sidebar.tsx

@@ -1,12 +1,10 @@
 import {
-  Clock3,
   Check,
   MessageCircle,
   MessageSquarePlus,
   MonitorPlay,
   PanelLeft,
   PenLine,
-  Plug,
   Search,
   Settings,
   Trash2,
@@ -80,6 +78,11 @@ export function Sidebar({ isCollapsed, activePage, onOpenDemo, onGoWorkspace, on
           <PenLine size={16} />
           <span>{t("sidebar.newChat")}</span>
         </button>
+        {/*
+          issue #44: 插件 / 自动化 have no view yet — as clickable no-op buttons
+          they read as broken navigation. Hidden until the views exist; the
+          i18n keys (sidebar.plugins / sidebar.automations) are kept. Re-add the
+          Plug / Clock3 lucide imports when restoring these.
         <button className="nav-item" type="button">
           <Plug size={16} />
           <span>{t("sidebar.plugins")}</span>
@@ -88,6 +91,7 @@ export function Sidebar({ isCollapsed, activePage, onOpenDemo, onGoWorkspace, on
           <Clock3 size={16} />
           <span>{t("sidebar.automations")}</span>
         </button>
+        */}
         <button
           className={`nav-item ${activePage === "demo" ? "is-active" : ""}`}
           onClick={onOpenDemo}

package/src/contexts/SSEContext.tsx

@@ -25,11 +25,18 @@ const SSEContext = createContext<SSEContextValue | null>(null);
 
 const RECONNECT_BASE_MS = 3000;
 const RECONNECT_MAX_MS = 30000;
+// #106: if an EventSource never fires `onopen` within this window we treat the
+// connection as dead and force a rebuild. A frozen tab / bfcache restore can
+// leave a stale source stuck in CONNECTING whose onopen/onerror never fire
+// again — without this watchdog the UI sits on "正在连接实时通道" forever.
+const OPEN_WATCHDOG_MS = 8000;
 
 interface SessionConn {
   source: EventSource;
   reconnectAttempt: number;
   reconnectTimer: number | null;
+  /** #106: fires if onopen doesn't arrive in time — forces a reconnect. */
+  openWatchdog: number | null;
   /** Whether disconnectSession was called — disable auto-reconnect. */
   manuallyClosed: boolean;
 }
@@ -61,20 +68,62 @@ export function SSEProvider({ children }: { children: ReactNode }) {
       return;
     }
 
+    // A stale entry may exist (e.g. watchdog-forced rebuild) — clear its timers
+    // and close its source before replacing it.
+    if (conn) {
+      if (conn.reconnectTimer !== null) window.clearTimeout(conn.reconnectTimer);
+      if (conn.openWatchdog !== null) window.clearTimeout(conn.openWatchdog);
+      try {
+        conn.source.close();
+      } catch {
+        /* already closed */
+      }
+    }
+
     console.log(`[SSE] openConnection: ${sessionId}`);
     setStatus(sessionId, "connecting");
     const source = new EventSource(getSSEUrl(sessionId));
 
     const entry: SessionConn = {
       source,
-      reconnectAttempt: 0,
+      reconnectAttempt: conn?.reconnectAttempt ?? 0,
       reconnectTimer: null,
+      openWatchdog: null,
       manuallyClosed: false,
     };
     connsRef.current.set(sessionId, entry);
 
+    // #106: if onopen never lands, the connection is wedged. Tear it down and
+    // reconnect through the normal backoff path so the composer doesn't stay
+    // disabled on a dead "connecting" state.
+    entry.openWatchdog = window.setTimeout(() => {
+      entry.openWatchdog = null;
+      if (entry.manuallyClosed) return;
+      if (entry.source.readyState === EventSource.OPEN) return;
+      console.warn(`[SSE] open watchdog fired for ${sessionId} — forcing reconnect`);
+      try {
+        entry.source.close();
+      } catch {
+        /* already closed */
+      }
+      setStatus(sessionId, "error");
+      entry.reconnectAttempt += 1;
+      const delay = Math.min(
+        RECONNECT_BASE_MS * Math.pow(2, entry.reconnectAttempt - 1),
+        RECONNECT_MAX_MS,
+      );
+      entry.reconnectTimer = window.setTimeout(() => {
+        entry.reconnectTimer = null;
+        openConnection(sessionId);
+      }, delay);
+    }, OPEN_WATCHDOG_MS);
+
     source.onopen = () => {
       entry.reconnectAttempt = 0;
+      if (entry.openWatchdog !== null) {
+        window.clearTimeout(entry.openWatchdog);
+        entry.openWatchdog = null;
+      }
       console.log(`[SSE] onopen: ${sessionId}`);
       setStatus(sessionId, "open");
     };
@@ -106,6 +155,10 @@ export function SSEProvider({ children }: { children: ReactNode }) {
 
     source.onerror = () => {
       console.error(`[SSE] onerror: ${sessionId}, reconnectAttempt=${entry.reconnectAttempt + 1}`);
+      if (entry.openWatchdog !== null) {
+        window.clearTimeout(entry.openWatchdog);
+        entry.openWatchdog = null;
+      }
       setStatus(sessionId, "error");
       source.close();
       if (entry.manuallyClosed) return;
@@ -139,6 +192,10 @@ export function SSEProvider({ children }: { children: ReactNode }) {
       window.clearTimeout(entry.reconnectTimer);
       entry.reconnectTimer = null;
     }
+    if (entry.openWatchdog !== null) {
+      window.clearTimeout(entry.openWatchdog);
+      entry.openWatchdog = null;
+    }
     entry.source.close();
     connsRef.current.delete(sessionId);
     setStatus(sessionId, "idle");
@@ -152,12 +209,44 @@ export function SSEProvider({ children }: { children: ReactNode }) {
         if (entry.reconnectTimer !== null) {
           window.clearTimeout(entry.reconnectTimer);
         }
+        if (entry.openWatchdog !== null) {
+          window.clearTimeout(entry.openWatchdog);
+        }
         entry.source.close();
       }
       connsRef.current.clear();
     };
   }, [isAuthReady, currentSandbox?.status]);
 
+  // #106: bfcache / frozen-tab restore can leave an EventSource that looks
+  // alive (readyState !== CLOSED) but whose onopen/onerror never fire again, so
+  // the composer stays stuck on "connecting". On page restore or tab
+  // re-focus, force any non-open connection to rebuild. The browser-native
+  // `pageshow` (persisted) covers bfcache; `visibilitychange` covers the more
+  // common "switched away and back" case.
+  useEffect(() => {
+    const revive = () => {
+      for (const [sessionId, entry] of connsRef.current) {
+        if (entry.manuallyClosed) continue;
+        if (entry.source.readyState === EventSource.OPEN) continue;
+        console.log(`[SSE] revive stale connection on restore: ${sessionId}`);
+        openConnection(sessionId);
+      }
+    };
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) revive();
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") revive();
+    };
+    window.addEventListener("pageshow", onPageShow);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("pageshow", onPageShow);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [openConnection]);
+
   const value = useMemo<SSEContextValue>(
     () => ({ connectSession, disconnectSession, queueRef, tick, connections }),
     [connectSession, disconnectSession, tick, connections],