@brainpilot/web 0.0.5 → 0.0.7

package/src/components/sidebar/Sidebar.tsx

@@ -1,21 +1,15 @@
 import {
-  Clock3,
-  Check,
-  MessageCircle,
-  MessageSquarePlus,
+  MessagesSquare,
   MonitorPlay,
   PanelLeft,
   PenLine,
-  Plug,
-  Search,
   Settings,
-  Trash2,
-  X,
 } from "lucide-react";
-import { FormEvent, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
 import { IconButton } from "../primitives/IconButton";
+import { SessionList } from "./SessionList";
 
 type SidebarProps = {
   isCollapsed: boolean;
@@ -39,20 +33,46 @@ export function Sidebar({ isCollapsed, activePage, onOpenDemo, onGoWorkspace, on
     deleteSession,
   } = useSessions();
   const t = useT();
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editingTitle, setEditingTitle] = useState("");
-  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  // #131 — when collapsed to the icon rail, the session list moves into a
+  // floating popover opened from a single icon, so it no longer competes for
+  // horizontal space yet stays one click away.
+  const [isSessionsPopoverOpen, setIsSessionsPopoverOpen] = useState(false);
+  const sessionsPopoverRef = useRef<HTMLDivElement | null>(null);
 
-  const submitRename = async (event: FormEvent) => {
-    event.preventDefault();
-    if (!editingId || !editingTitle.trim()) {
-      setEditingId(null);
-      return;
-    }
-    await updateSessionTitle(editingId, editingTitle.trim());
-    setEditingId(null);
+  const newConversation = () => {
+    onGoWorkspace();
+    startDraftSession();
   };
 
+  const selectAndGo = (sessionId: string) => {
+    onGoWorkspace();
+    selectSession(sessionId);
+  };
+
+  // Collapsing the rail (manually or at narrow widths) closes a stale popover.
+  useEffect(() => {
+    if (!isCollapsed) setIsSessionsPopoverOpen(false);
+  }, [isCollapsed]);
+
+  // Dismiss the popover on outside click / Escape, like a standard menu.
+  useEffect(() => {
+    if (!isSessionsPopoverOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!sessionsPopoverRef.current?.contains(event.target as Node)) {
+        setIsSessionsPopoverOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsSessionsPopoverOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isSessionsPopoverOpen]);
+
   return (
     <aside className="sidebar" aria-label={t("sidebar.aria.nav")}>
       <div
@@ -76,21 +96,54 @@ export function Sidebar({ isCollapsed, activePage, onOpenDemo, onGoWorkspace, on
       </div>
 
       <nav className="sidebar__nav" aria-label={t("sidebar.aria.primary")}>
-        <button className="nav-item nav-item--strong" onClick={() => { onGoWorkspace(); startDraftSession(); }} type="button">
+        <button className="nav-item nav-item--strong" onClick={newConversation} type="button" title={t("sidebar.newChat")}>
           <PenLine size={16} />
           <span>{t("sidebar.newChat")}</span>
         </button>
-        <button className="nav-item" type="button">
-          <Plug size={16} />
-          <span>{t("sidebar.plugins")}</span>
-        </button>
-        <button className="nav-item" type="button">
-          <Clock3 size={16} />
-          <span>{t("sidebar.automations")}</span>
-        </button>
+        {/*
+          #131 — collapsed icon rail: a single Sessions icon opens the session
+          list in a popover (the inline list below is hidden when collapsed).
+          Rendered only in the rail so the expanded sidebar keeps its full list.
+        */}
+        {isCollapsed ? (
+          <div className="sidebar__sessions-popover-anchor" ref={sessionsPopoverRef}>
+            <button
+              aria-expanded={isSessionsPopoverOpen}
+              aria-haspopup="menu"
+              className={`nav-item ${isSessionsPopoverOpen ? "is-active" : ""}`}
+              onClick={() => setIsSessionsPopoverOpen((open) => !open)}
+              title={t("sidebar.conversations")}
+              type="button"
+            >
+              <MessagesSquare size={16} />
+              <span>{t("sidebar.conversations")}</span>
+            </button>
+            {isSessionsPopoverOpen ? (
+              <div className="sidebar__sessions-popover" role="menu" aria-label={t("sidebar.conversations")}>
+                <div className="sidebar__sessions-popover-head">
+                  <h2>{t("sidebar.conversations")}</h2>
+                  <button className="nav-item nav-item--strong" onClick={() => { newConversation(); setIsSessionsPopoverOpen(false); }} type="button">
+                    <PenLine size={14} />
+                    <span>{t("sidebar.newChat")}</span>
+                  </button>
+                </div>
+                <SessionList
+                  sessions={sessions}
+                  currentId={currentSession?.id}
+                  isLoading={isLoading}
+                  onSelect={(id) => { selectAndGo(id); setIsSessionsPopoverOpen(false); }}
+                  onRename={updateSessionTitle}
+                  onDelete={deleteSession}
+                  onOpenSearch={() => { onOpenSearch(); setIsSessionsPopoverOpen(false); }}
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
         <button
           className={`nav-item ${activePage === "demo" ? "is-active" : ""}`}
           onClick={onOpenDemo}
+          title={t("sidebar.demo")}
           type="button"
         >
           <MonitorPlay size={16} />
@@ -102,82 +155,25 @@ export function Sidebar({ isCollapsed, activePage, onOpenDemo, onGoWorkspace, on
         <div className="section-heading">
           <h2 id="conversations-heading">{t("sidebar.conversations")}</h2>
           <div className="section-heading__actions">
-            <IconButton label={t("sidebar.aria.newConversation")} onClick={() => { onGoWorkspace(); startDraftSession(); }}>
-              <MessageSquarePlus size={13} />
+            <IconButton label={t("sidebar.aria.newConversation")} onClick={newConversation}>
+              <PenLine size={13} />
             </IconButton>
           </div>
         </div>
 
-        <div className="conversation-stack">
-          <button className="conversation-search-trigger" onClick={onOpenSearch} type="button">
-            <Search size={14} />
-            <span>{t("sidebar.search")}</span>
-          </button>
-          <p className="muted-label">{isLoading ? t("sidebar.loading") : t("sidebar.sessionCount", { count: sessions.length })}</p>
-          {sessions.length === 0 && !isLoading ? <p className="sidebar-empty">{t("sidebar.empty")}</p> : null}
-          {sessions.map((session) => {
-            const isEditing = editingId === session.id;
-            const isConfirming = confirmDeleteId === session.id;
-            return (
-              <div className={`conversation-item ${currentSession?.id === session.id ? "is-active" : ""}`} key={session.id}>
-                {isEditing ? (
-                  <form className="conversation-edit" onSubmit={submitRename}>
-                    <input
-                      autoFocus
-                      onChange={(event) => setEditingTitle(event.target.value)}
-                      value={editingTitle}
-                    />
-                    <IconButton label={t("sidebar.aria.saveTitle")} type="submit">
-                      <Check size={14} />
-                    </IconButton>
-                    <IconButton label={t("sidebar.aria.cancelRename")} onClick={() => setEditingId(null)}>
-                      <X size={14} />
-                    </IconButton>
-                  </form>
-                ) : (
-                  <>
-                    <button className="conversation-row" onClick={() => { onGoWorkspace(); selectSession(session.id); }} type="button">
-                      <MessageCircle size={16} />
-                      <span>{session.title}</span>
-                      <small>{new Date(session.updatedAt).toLocaleDateString()}</small>
-                    </button>
-                    <div className="conversation-actions">
-                      {isConfirming ? (
-                        <>
-                          <IconButton label={t("sidebar.aria.confirmDelete")} onClick={() => void deleteSession(session.id)}>
-                            <Check size={14} />
-                          </IconButton>
-                          <IconButton label={t("sidebar.aria.cancelDelete")} onClick={() => setConfirmDeleteId(null)}>
-                            <X size={14} />
-                          </IconButton>
-                        </>
-                      ) : (
-                        <>
-                          <IconButton
-                            label={t("sidebar.aria.rename")}
-                            onClick={() => {
-                              setEditingId(session.id);
-                              setEditingTitle(session.title);
-                            }}
-                          >
-                            <PenLine size={14} />
-                          </IconButton>
-                          <IconButton label={t("sidebar.aria.delete")} onClick={() => setConfirmDeleteId(session.id)}>
-                            <Trash2 size={14} />
-                          </IconButton>
-                        </>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
+        <SessionList
+          sessions={sessions}
+          currentId={currentSession?.id}
+          isLoading={isLoading}
+          onSelect={selectAndGo}
+          onRename={updateSessionTitle}
+          onDelete={deleteSession}
+          onOpenSearch={onOpenSearch}
+        />
       </section>
 
       <div className="sidebar__footer">
-        <button className="nav-item" onClick={onOpenSettings} type="button">
+        <button className="nav-item" onClick={onOpenSettings} type="button" title={t("sidebar.settings")}>
           <Settings size={16} />
           <span>{t("sidebar.settings")}</span>
         </button>

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],