@brainpilot/web 0.0.6 → 0.0.8

package/src/components/sidebar/Sidebar.tsx

@@ -1,19 +1,15 @@
 import {
-  Check,
-  MessageCircle,
-  MessageSquarePlus,
+  MessagesSquare,
   MonitorPlay,
   PanelLeft,
   PenLine,
-  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;
@@ -37,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
@@ -74,27 +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>
         {/*
-          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>
-        </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} />
@@ -106,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/SessionContext.tsx

@@ -55,6 +55,14 @@ interface SessionContextValue {
   agentFilters: Record<string, AgentMessageFilter>;
   /** Live Graph of Trace for the current session (#79), or null if none/unloaded. */
   currentTrace: TraceGraph | null;
+  /**
+   * #134 — whether the current session has trace updates the user hasn't seen
+   * since last opening the Trace view. Drives a quiet dot on the Trace tab so
+   * trace stays a transparency layer instead of noisy chat output. Per-session:
+   * switching sessions reflects that session's unread state. False on initial
+   * hydration (only live post-open trace_node events set it).
+   */
+  traceUnread: boolean;
   /** Re-seed the trace graph from the HTTP route (manual refresh). */
   refreshTrace: (sessionId: string) => Promise<void>;
   selectSession: (sessionId: string) => void;
@@ -185,6 +193,14 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   const [isRefreshingMessages, setIsRefreshingMessages] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [currentView, setCurrentView] = useState<"chat" | "agents" | "trace">("chat");
+  // #134 — read currentView inside the SSE queue-drain effect (keyed on
+  // session/tick, not view) to decide whether an incoming trace update should
+  // raise the unread dot. A live trace_node that arrives while the user is
+  // already on the Trace view is "seen", so it must not flag unread.
+  const currentViewRef = useRef<"chat" | "agents" | "trace">("chat");
+  useEffect(() => {
+    currentViewRef.current = currentView;
+  }, [currentView]);
   // Unsent textarea drafts live in a module-level store (see contexts/draftStore.ts)
   // so keystrokes don't re-render the whole chat subtree. Drafts are keyed by
   // session id and survive PromptComposer unmount (tab switches).
@@ -201,6 +217,11 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   // #79: live Graph of Trace per session. Seeded by a fetch on session change,
   // then kept live by CUSTOM:trace_node SSE events (see the queue drain below).
   const [traceBySession, setTraceBySession] = useState<Record<string, TraceGraph>>({});
+  // #134 — per-session "trace changed since you last looked" flag. Set only by
+  // live CUSTOM:trace_node events while the user is NOT on the Trace view;
+  // cleared when they open Trace for that session. Hydration/seed paths never
+  // set it, so a freshly-opened session with existing trace shows no false dot.
+  const [traceUnreadBySession, setTraceUnreadBySession] = useState<Record<string, boolean>>({});
 
 
   const currentSession = useMemo(
@@ -802,7 +823,17 @@ export function SessionProvider({ children }: { children: ReactNode }) {
       for (const event of queue) {
         graph = reduceTraceForEvent(graph, event, sid);
       }
-      return graph && graph !== start ? { ...current, [sid]: graph } : current;
+      if (graph && graph !== start) {
+        // #134 — a live trace update landed. Raise the per-session unread dot
+        // unless the user is already looking at this session's Trace view (then
+        // it's seen). Hydration/seed go through other code paths, so this only
+        // ever fires for genuine post-open SSE trace_node events.
+        if (currentViewRef.current !== "trace") {
+          setTraceUnreadBySession((u) => (u[sid] ? u : { ...u, [sid]: true }));
+        }
+        return { ...current, [sid]: graph };
+      }
+      return current;
     });
 
     // Process all events through the message reducer.
@@ -842,6 +873,16 @@ export function SessionProvider({ children }: { children: ReactNode }) {
     [currentSessionId, traceBySession],
   );
 
+  // #134 — opening the Trace view for a session marks its trace as seen, so the
+  // tab dot clears. Keyed on (session, view) so it also clears when a trace
+  // update arrives while already on the view (the drain guards that case too).
+  useEffect(() => {
+    if (currentView !== "trace" || !currentSessionId) return;
+    setTraceUnreadBySession((u) => (u[currentSessionId] ? { ...u, [currentSessionId]: false } : u));
+  }, [currentView, currentSessionId]);
+
+  const traceUnread = currentSessionId ? (traceUnreadBySession[currentSessionId] ?? false) : false;
+
   const value = useMemo(
     () => ({
       sessions,
@@ -859,6 +900,7 @@ export function SessionProvider({ children }: { children: ReactNode }) {
       tokenUsage,
       agentFilters,
       currentTrace,
+      traceUnread,
       refreshTrace,
       selectSession,
       createSession,
@@ -890,6 +932,7 @@ export function SessionProvider({ children }: { children: ReactNode }) {
       tokenUsage,
       agentFilters,
       currentTrace,
+      traceUnread,
       refreshTrace,
       selectSession,
       createSession,

package/src/contexts/messageGroups.ts

@@ -9,6 +9,60 @@ export type RenderItem =
   | { type: "single"; message: ChatMessage }
   | { type: "activity"; id: string; steps: ChatMessage[]; streaming: boolean };
 
+/**
+ * #134 — tool visibility model. Internal tools are part of the agent's plumbing
+ * (trace bookkeeping) rather than the user-facing conversation: the model still
+ * sees their calls and results, but the chat UI hides both so an implementation
+ * detail (`trace event dispatched`) never surfaces above the Principal's reply.
+ * Trace changes are surfaced quietly via the Trace tab badge instead.
+ *
+ * Hard-coded for the current internal toolset; promote to a richer
+ * `ToolVisibility = "user" | "debug" | "internal"` map if/when more land.
+ */
+const INTERNAL_TOOL_NAMES: ReadonlySet<string> = new Set([
+  "record_trace",
+  "create_trace_node",
+  "update_trace_node",
+  "add_trace_relation",
+  "get_trace_graph",
+]);
+
+/** A tool name is internal if it matches bare or mcp-namespaced (server__tool). */
+export function isInternalToolName(name: string | undefined): boolean {
+  if (!name) return false;
+  if (INTERNAL_TOOL_NAMES.has(name)) return true;
+  const bare = name.includes("__") ? name.slice(name.lastIndexOf("__") + 2) : name;
+  return INTERNAL_TOOL_NAMES.has(bare);
+}
+
+/**
+ * Drop internal-tool calls AND their matching results from the chat stream.
+ *
+ * A TOOL_CALL_START carries the tool name; the later TOOL_CALL_RESULT carries
+ * only a `toolCallId` linking back to it. So we first collect the call ids of
+ * every internal tool, then filter out both the call message and any tool
+ * message whose `toolCallId` (the result) points at one. Presentation-only:
+ * the underlying message list and the model's view are untouched.
+ */
+export function stripInternalToolMessages(messages: ChatMessage[]): ChatMessage[] {
+  const internalCallIds = new Set<string>();
+  for (const m of messages) {
+    if (m.kind === "tool" && isInternalToolName(m.toolName)) {
+      internalCallIds.add(m.id);
+      if (m.toolCallId) internalCallIds.add(m.toolCallId);
+    }
+  }
+  if (internalCallIds.size === 0) return messages;
+  return messages.filter((m) => {
+    if (m.kind !== "tool") return true;
+    // The call itself (internal tool name) → drop.
+    if (isInternalToolName(m.toolName)) return false;
+    // The result, linked by toolCallId to an internal call → drop.
+    if (m.toolCallId && internalCallIds.has(m.toolCallId)) return false;
+    return true;
+  });
+}
+
 /**
  * Standalone kinds render as their own visible card. All assistant text
  * messages — whether they come from the Principal or an Expert agent, and
@@ -49,6 +103,8 @@ export function buildRenderItems(
   runningAgents?: ReadonlySet<string>,
 ): RenderItem[] {
   const items: RenderItem[] = [];
+  // #134 — internal tools (trace bookkeeping) are hidden from the chat UI.
+  messages = stripInternalToolMessages(messages);
   let buffer: ChatMessage[] = [];
   // A step keeps its block "in progress" while its owning agent's run is active.
   // Steps default to the principal agent when unattributed, matching how the

package/src/contexts/messageReducer.ts

@@ -258,6 +258,10 @@ export function reduceMessagesForEvent(existing: ChatMessage[], event: WebSocket
           agent,
           kind: "tool",
           toolResult: content,
+          // #134 — keep the link back to the originating TOOL_CALL_START so the
+          // UI can suppress results of internal tools (record_trace) whose name
+          // only rode on the call event, not on this result.
+          toolCallId: event.toolCallId,
         },
       ];
     }

package/src/i18n/messages/shell.ts

@@ -11,6 +11,7 @@ export default defineMessages(
     "shell.view.chat": "对话",
     "shell.view.agents": "智能体",
     "shell.view.trace": "轨迹",
+    "shell.view.traceUpdated": "轨迹有新更新",
     "shell.aria.refreshMessages": "刷新消息",
     "shell.terminal.minimize": "最小化终端",
     "shell.terminal.open": "打开终端",
@@ -28,6 +29,7 @@ export default defineMessages(
     "shell.view.chat": "Chat",
     "shell.view.agents": "Agents",
     "shell.view.trace": "Trace",
+    "shell.view.traceUpdated": "Trace has new updates",
     "shell.aria.refreshMessages": "Refresh messages",
     "shell.terminal.minimize": "Minimize terminal",
     "shell.terminal.open": "Open terminal",

package/src/styles/global.css

@@ -678,6 +678,24 @@ button {
   padding: 0;
 }
 
+/* #134: a tab that can carry a quiet unread dot (Trace). Positioned so the dot
+   sits at the top-right corner of the icon without affecting layout. */
+.workspace-view-tab--badged {
+  position: relative;
+}
+
+.workspace-view-tab__badge {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--color-danger, #e5484d);
+  box-shadow: 0 0 0 2px var(--color-surface-soft);
+  pointer-events: none;
+}
+
 .session-title {
   display: flex;
   min-width: 0;
@@ -1849,20 +1867,11 @@ button {
 }
 
 @media (max-width: 860px) {
-  .desktop-shell {
-    grid-template-columns: 64px minmax(0, 1fr);
-  }
-
-  .sidebar {
-    gap: 16px;
-  }
-
-  .section-heading,
-  .conversation-stack,
-  .nav-item span {
-    display: none;
-  }
-
+  /* #131 — the rail layout at narrow widths is now driven by React
+     (DesktopShell auto-collapses below this breakpoint and applies
+     .desktop-shell--sidebar-collapsed), so the sidebar styling lives in those
+     class rules and the session list is reachable via the rail popover instead
+     of being hidden outright. Only non-sidebar responsive tweaks remain here. */
   .prompt-home {
     padding-inline: 18px;
   }
@@ -2091,7 +2100,12 @@ button {
   overscroll-behavior: contain;
   padding: 4px 14px 20px 4px;
   scrollbar-gutter: stable;
-  scroll-behavior: smooth;
+  /* #133: NO `scroll-behavior: smooth` here. The chat stream restores its
+     position imperatively (`scrollTop = …`) on tab-switch remount and on
+     pinned-bottom live append; a global smooth behavior turns those instant
+     jumps into a visible top-to-bottom replay through the history. Smooth
+     scrolling, if ever wanted, must be opt-in around an explicit
+     user-triggered jump, never the default for the container. */
   scrollbar-color: var(--color-border) transparent;
   scrollbar-width: thin;
 }
@@ -3013,6 +3027,62 @@ button {
   opacity: 0;
 }
 
+/* #131 — collapsed icon-rail session popover. The rail hides the inline session
+   section (rule above) and squeezes nav labels to opacity:0; the popover is a
+   floating panel anchored to the Sessions icon that restores the full list. */
+.sidebar__sessions-popover-anchor {
+  position: relative;
+}
+
+.sidebar__sessions-popover {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 10px);
+  z-index: 40;
+  display: flex;
+  width: 300px;
+  max-height: min(70vh, 560px);
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-raised, var(--color-surface));
+  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.18));
+}
+
+.sidebar__sessions-popover .conversation-stack {
+  display: grid;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sidebar__sessions-popover-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sidebar__sessions-popover-head h2 {
+  margin: 0;
+  color: var(--color-text-subtle);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* The popover lives inside the collapsed rail, so undo the rail's label
+   squeeze/hide for everything inside it — its content is fully expanded. */
+.desktop-shell--sidebar-collapsed .sidebar__sessions-popover .nav-item span,
+.desktop-shell--sidebar-collapsed .sidebar__sessions-popover .conversation-row span,
+.desktop-shell--sidebar-collapsed .sidebar__sessions-popover .conversation-row small {
+  opacity: 1;
+}
+
+.desktop-shell--sidebar-collapsed .sidebar__sessions-popover .conversation-stack {
+  display: grid;
+}
+
 .sandbox-status {
   position: relative;
   display: inline-flex;