@brainpilot/web 0.0.7 → 0.0.9

package/src/components/files/FileSidebar.tsx

@@ -13,9 +13,9 @@ import {
   X,
 } from "lucide-react";
 import { FileContent, FileEntry } from "../../contracts/backend";
+import { runtimeConfig } from "../../config";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { useSessions } from "../../contexts/SessionContext";
-import { runtimeConfig } from "../../config";
 import { useT } from "../../i18n/useT";
 import { api } from "../../utils/api";
 import { downloadBlob } from "../../utils/download";
@@ -128,10 +128,14 @@ function findNode(root: FileNode, path: string | null): FileNode | null {
 export function FileSidebar({ isOpen, onClose, onResize, onResizeEnd, onResizeStart, width }: FileSidebarProps) {
   const { currentSandbox } = useSandbox();
   const { currentSession } = useSessions();
-  // In single-user local mode the workspace is addressed by the active session
-  // id (workspaces/<sid>/), not a container id. Elsewhere the sandbox id is the
-  // addressing key. `currentSandbox.status` still gates whether files are live.
-  const sandboxId = runtimeConfig.localMode ? currentSession?.id ?? null : currentSandbox?.id ?? null;
+  // The runtime always addresses a workspace by session id (workspaces/<sid>/),
+  // never by container id — in both local and remote mode. A container can host
+  // several sessions, and the file tree shows the *current session's* workspace.
+  // (#168) `currentSandbox.status` still gates whether files are live; the
+  // variable name stays `sandboxId` only because the call sites/sub-component
+  // prop are named that way — it has always carried the session id in local
+  // mode. A full rename rides with the planned session-management cleanup.
+  const sandboxId = currentSession?.id ?? null;
   const t = useT();
   const [tree, setTree] = useState<FileNode>(rootNode);
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(["/workspace"]));
@@ -144,18 +148,82 @@ export function FileSidebar({ isOpen, onClose, onResize, onResizeEnd, onResizeSt
   const [isPreviewMaximized, setIsPreviewMaximized] = useState(false);
   const resizeStartRef = useRef<{ pointerX: number; width: number } | null>(null);
 
+  // #156: in local mode, surface the real on-disk workspace dir so users know
+  // which directory the agent writes into. `workspacesRoot` comes from the
+  // backend (gated to local mode there too); the per-session dir is
+  // `<workspacesRoot>/<sessionId>`. Null in hosted mode → keep showing the
+  // virtual `/workspace` and never disclose a host path.
+  const [workspacesRoot, setWorkspacesRoot] = useState<string | null>(null);
+  useEffect(() => {
+    if (!runtimeConfig.localMode) return;
+    let cancelled = false;
+    void api.getInfo().then((info) => {
+      if (!cancelled && info.localMode && info.workspacesRoot) {
+        setWorkspacesRoot(info.workspacesRoot);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Join with the platform's separator: a Windows root contains "\", a POSIX
+  // root "/". Detect from the root itself rather than assuming the host.
+  const realWorkspacePath = useMemo(() => {
+    if (!workspacesRoot || !currentSession?.id) return null;
+    const sepChar = workspacesRoot.includes("\\") && !workspacesRoot.includes("/") ? "\\" : "/";
+    return `${workspacesRoot.replace(/[\\/]$/, "")}${sepChar}${currentSession.id}`;
+  }, [workspacesRoot, currentSession?.id]);
+
+  // Map a virtual `/workspace[/...]` path to its real on-disk equivalent for
+  // display. Returns the original virtual path when no real root is known.
+  const toDisplayPath = useCallback(
+    (virtualPath: string): string => {
+      if (!realWorkspacePath) return virtualPath;
+      const sepChar = realWorkspacePath.includes("\\") && !realWorkspacePath.includes("/") ? "\\" : "/";
+      if (virtualPath === "/workspace") return realWorkspacePath;
+      if (virtualPath.startsWith("/workspace/")) {
+        const rel = virtualPath.slice("/workspace/".length).split("/").join(sepChar);
+        return `${realWorkspacePath}${sepChar}${rel}`;
+      }
+      return virtualPath;
+    },
+    [realWorkspacePath],
+  );
+
   const loadDirectory = useCallback(
     async (path: string) => {
       if (!currentSandbox || currentSandbox.status !== "running" || !sandboxId) {
+        // #193 diagnostics: distinguish "panel gated off" from "listed but empty".
+        // Logs the exact reason the gate blocked the load so a user (esp. on
+        // Windows, where the empty-panel report originates) can paste it back.
+        console.warn("[FileSidebar] load skipped — sandbox not ready", {
+          path,
+          sandboxId,
+          hasSandbox: !!currentSandbox,
+          sandboxStatus: currentSandbox?.status ?? null,
+        });
         setError(t("files.error.notRunning"));
         return;
       }
       setError(null);
-      const entries = await api.sandbox.listFiles(sandboxId, path);
-      const children = entries.map((entry) => ({ ...entry, path: joinPath(path, entry.name) }));
-      setTree((current) => updateNode(current, path, (node) => ({ ...node, children, loaded: true })));
+      try {
+        // #193 diagnostics: log the exact request being addressed so an empty or
+        // failing listing can be traced to the real sandboxId + path on the wire.
+        console.debug("[FileSidebar] listFiles", { sandboxId, path });
+        const entries = await api.sandbox.listFiles(sandboxId, path);
+        console.debug("[FileSidebar] listFiles ok", { sandboxId, path, count: entries.length });
+        const children = entries.map((entry) => ({ ...entry, path: joinPath(path, entry.name) }));
+        setTree((current) => updateNode(current, path, (node) => ({ ...node, children, loaded: true })));
+      } catch (err) {
+        // The runtime now returns a distinct error (instead of an empty array)
+        // when readdir fails for a reason other than ENOENT (#193). Surface it
+        // rather than leaving the panel stuck loading with no feedback.
+        console.error("[FileSidebar] listFiles failed", { sandboxId, path, error: err });
+        setError(err instanceof Error ? err.message : t("files.error.loadFailed"));
+      }
     },
-    [currentSandbox, sandboxId],
+    [currentSandbox, sandboxId, t],
   );
 
   useEffect(() => {
@@ -443,7 +511,7 @@ export function FileSidebar({ isOpen, onClose, onResize, onResizeEnd, onResizeSt
         </header>
 
         <div className="file-sidebar__path">
-          <span>/workspace</span>
+          <span title={realWorkspacePath ?? "/workspace"}>{realWorkspacePath ?? "/workspace"}</span>
           <small>{currentSandbox?.status === "running" ? t("files.live") : t("files.offline")}</small>
         </div>
 
@@ -463,6 +531,7 @@ export function FileSidebar({ isOpen, onClose, onResize, onResizeEnd, onResizeSt
           setIsPreviewMaximized(false);
         }}
         sandboxId={sandboxId}
+        toDisplayPath={toDisplayPath}
         onToggleMaximize={() => setIsPreviewMaximized((current) => !current)}
       />
     </>
@@ -475,6 +544,7 @@ function FilePreviewPanel({
   isMaximized,
   onClose,
   sandboxId,
+  toDisplayPath,
   onToggleMaximize,
 }: {
   file: FileNode | null;
@@ -482,6 +552,7 @@ function FilePreviewPanel({
   isMaximized: boolean;
   onClose: () => void;
   sandboxId: string | null;
+  toDisplayPath: (virtualPath: string) => string;
   onToggleMaximize: () => void;
 }) {
   const t = useT();
@@ -634,7 +705,7 @@ function FilePreviewPanel({
       <dl className="file-preview__meta">
         <div>
           <dt>{t("files.preview.path")}</dt>
-          <dd>{file.path}</dd>
+          <dd>{toDisplayPath(file.path)}</dd>
         </div>
         <div>
           <dt>{t("files.preview.size")}</dt>

package/src/components/session/AgentNetwork.tsx

@@ -822,6 +822,7 @@ export function AgentNetwork({ agents, messages, agentFilters, onSetAgentFilter
             <TimelineTab
               messages={messages}
               now={now}
+              isRunning={runningCount > 0}
               onSelectMessage={(agentName) => selectNode(agentName)}
             />
           )}

package/src/components/session/TimelineTab.tsx

@@ -15,6 +15,13 @@ import { getMessageEdge, msgTypeKind } from "./agentNetworkShared";
 interface TimelineTabProps {
   messages: ChatMessage[];
   now: number;
+  /**
+   * Whether the session is actively running (≥1 agent in a running state).
+   * Only while running does the axis track wall-clock `now` and show the
+   * live "now" marker; a finished session freezes the axis at the last
+   * message so the plot doesn't grow a blank right gutter over time (#166).
+   */
+  isRunning?: boolean;
   /** Click a dot → caller selects that agent (and flips to Detail tab). */
   onSelectMessage: (agentName: string) => void;
 }
@@ -33,7 +40,30 @@ const LABEL_W = 88;
 const PAD_TOP = 28;
 const TICK_COUNT = 6;
 
-export function TimelineTab({ messages, now, onSelectMessage }: TimelineTabProps) {
+/**
+ * Compute the timeline's [start, end] axis bounds (#166).
+ *
+ * The axis always starts at the first message. It ends at the LAST message,
+ * and only extends to wall-clock `now` while the session is actively running.
+ * A finished session therefore freezes its right edge at the last event
+ * instead of accreting blank space as real time marches on.
+ *
+ * `tsList` must be ascending (as produced by the sorted `dots`).
+ */
+export function computeTimeBounds(
+  tsList: number[],
+  now: number,
+  isRunning: boolean,
+): { start: number; end: number } {
+  if (tsList.length === 0) return { start: now - 60_000, end: now };
+  const start = tsList[0];
+  const lastTs = tsList[tsList.length - 1];
+  const end = isRunning ? Math.max(now, lastTs) : lastTs;
+  // Degenerate span (single dot / identical timestamps): give it a minute.
+  return { start, end: end === start ? start + 60_000 : end };
+}
+
+export function TimelineTab({ messages, now, isRunning = false, onSelectMessage }: TimelineTabProps) {
   const t = useT();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [zoom, setZoom] = useState(1);
@@ -78,12 +108,10 @@ export function TimelineTab({ messages, now, onSelectMessage }: TimelineTabProps
     return names;
   }, [dots]);
 
-  const timeBounds = useMemo(() => {
-    if (dots.length === 0) return { start: now - 60_000, end: now };
-    const start = dots[0].ts;
-    const end = Math.max(now, dots[dots.length - 1].ts);
-    return { start, end: end === start ? start + 60_000 : end };
-  }, [dots, now]);
+  const timeBounds = useMemo(
+    () => computeTimeBounds(dots.map((d) => d.ts), now, isRunning),
+    [dots, now, isRunning],
+  );
 
   if (dots.length === 0) {
     return (
@@ -243,8 +271,10 @@ export function TimelineTab({ messages, now, onSelectMessage }: TimelineTabProps
             </g>
           ))}
 
-          {/* "now" marker */}
-          <line x1={xOf(now)} x2={xOf(now)} y1={PAD_TOP - 6} y2={svgH - 4} className="agent-timeline__now" />
+          {/* "now" marker — only meaningful while the session is live (#166) */}
+          {isRunning && (
+            <line x1={xOf(now)} x2={xOf(now)} y1={PAD_TOP - 6} y2={svgH - 4} className="agent-timeline__now" />
+          )}
 
           {/* delegate→result arcs */}
           {arcs.map((a) => {

package/src/components/shell/DesktopShell.tsx

@@ -17,9 +17,7 @@ import { SandboxStatus } from "./SandboxStatus";
 import { Sidebar } from "../sidebar/Sidebar";
 import { DiskQuotaWarningDialog } from "../quota/DiskQuotaWarningDialog";
 import { DiskQuotaCriticalDialog } from "../quota/DiskQuotaCriticalDialog";
-
-const MIN_SIDEBAR_WIDTH = 220;
-const MAX_SIDEBAR_WIDTH = 420;
+import { DEFAULT_SIDEBAR_WIDTH, resolveResize } from "./sidebarResize";
 
 export function DesktopShell() {
   const { isAuthReady } = useAuth();
@@ -87,12 +85,21 @@ export function DesktopShell() {
         return;
       }
 
+      // #159 — drag the edge left past the collapse threshold and the rail snaps
+      // to the icon rail; otherwise apply the clamped expanded width. resolveResize
+      // owns the geometry (pure + unit-tested in sidebarResize.test.ts).
       const delta = event.clientX - sidebarResizeRef.current.pointerX;
-      const nextWidth = Math.max(
-        MIN_SIDEBAR_WIDTH,
-        Math.min(MAX_SIDEBAR_WIDTH, sidebarResizeRef.current.width + delta),
-      );
-      setSidebarWidth(nextWidth);
+      const outcome = resolveResize(sidebarResizeRef.current.width + delta);
+      if (outcome.collapse) {
+        setUserCollapsed(true);
+        sidebarResizeRef.current = null;
+        setIsSidebarResizing(false);
+        // Restore a sensible width so expanding again (toggle / drag) isn't stuck
+        // at the collapsed remnant.
+        setSidebarWidth(DEFAULT_SIDEBAR_WIDTH);
+        return;
+      }
+      setSidebarWidth(outcome.width);
     };
 
     const handlePointerUp = () => {

package/src/components/shell/sidebarResize.ts

@@ -0,0 +1,49 @@
+/**
+ * sidebarResize.ts — pure geometry for the sidebar resize→collapse interaction
+ * (#159). Kept free of React so it can be unit-tested without jsdom (the
+ * monorepo has no jsdom/@testing-library; DesktopShell drives the real
+ * pointer events, these helpers decide the numbers).
+ *
+ * Behaviour: while dragging the sidebar's right edge leftward, once the would-be
+ * width crosses a collapse threshold that sits *below* the normal minimum, the
+ * rail snaps to the collapsed icon rail (rather than refusing to shrink past the
+ * minimum, which is what made drag-to-collapse impossible before #159).
+ */
+
+/** Normal drag bounds — the sidebar clamps here while it stays expanded. */
+export const MIN_SIDEBAR_WIDTH = 220;
+export const MAX_SIDEBAR_WIDTH = 420;
+
+/**
+ * Drag the edge below this (well under MIN, giving a deliberate "drag past the
+ * min a bit more" buffer so a normal min-width drag doesn't accidentally
+ * collapse) and the rail snaps shut.
+ */
+export const COLLAPSE_THRESHOLD = 160;
+
+/** Width the rail restores to when it expands again (matches the default). */
+export const DEFAULT_SIDEBAR_WIDTH = 268;
+
+export interface ResizeOutcome {
+  /** Clamped width to apply while expanded (ignored when collapse is true). */
+  width: number;
+  /** True when the drag has gone narrow enough to collapse to the icon rail. */
+  collapse: boolean;
+}
+
+/**
+ * Given the drag's raw proposed width (start width + pointer delta), decide
+ * whether to collapse and, if not, the clamped expanded width.
+ *
+ * - proposed <= COLLAPSE_THRESHOLD → collapse.
+ * - otherwise clamp into [MIN, MAX].
+ */
+export function resolveResize(proposedWidth: number): ResizeOutcome {
+  if (proposedWidth <= COLLAPSE_THRESHOLD) {
+    return { width: MIN_SIDEBAR_WIDTH, collapse: true };
+  }
+  return {
+    width: Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, proposedWidth)),
+    collapse: false,
+  };
+}

package/src/contexts/SessionContext.tsx

@@ -102,6 +102,25 @@ const SessionContext = createContext<SessionContextValue | null>(null);
 // CONTENT / END leaves old long sessions looking empty.
 const HISTORY_REHYDRATE_LIMIT = 0;
 
+/**
+ * #194-B1: merge the full rehydrated history under whatever the live message
+ * list already holds. On refresh the SSE ring-buffer tail seeds a few recent
+ * messages before history arrives; we must NOT discard the (complete) history
+ * just because the list is non-empty. The persisted history is the base; we
+ * append only the messages already shown that history doesn't contain (by id) —
+ * in-flight optimistic sends, or events newer than the persisted file. Ordering
+ * matters: history first (chronological), then the live-only tail.
+ */
+export function mergeRehydratedMessages(
+  existing: ChatMessage[],
+  history: ChatMessage[],
+): ChatMessage[] {
+  if (existing.length === 0) return history;
+  const historyIds = new Set(history.map((m) => m.id));
+  const extra = existing.filter((m) => !historyIds.has(m.id));
+  return [...history, ...extra];
+}
+
 function foldSessionHistory(events: unknown[], sessionId: string): {
   messages: ChatMessage[];
   trace: TraceGraph | null;
@@ -293,13 +312,18 @@ export function SessionProvider({ children }: { children: ReactNode }) {
         hydratedSessionsRef.current.add(sessionId);
         if (lastUsage) setTokenUsage(lastUsage);
 
-        // Only seed the message list if the user hasn't already started typing
-        // / receiving live SSE for this session in the brief window before
-        // history arrived (otherwise we'd clobber their in-flight messages).
-        setMessagesBySession((current) => {
-          if ((current[sessionId]?.length ?? 0) > 0) return current;
-          return { ...current, [sessionId]: nextMessages };
-        });
+        // Merge the full history under whatever SSE / optimistic messages have
+        // already landed — do NOT bail just because the list is non-empty
+        // (#194-B1). On refresh the SSE ring-buffer tail arrives first and seeds
+        // a few recent messages; the old `length > 0 → skip` guard then dropped
+        // the entire rehydrated history, leaving only those few. The persisted
+        // history is the complete log, so use it as the base and append only the
+        // messages SSE already showed that the history doesn't contain (by id) —
+        // in-flight optimistic sends, or events newer than the persisted file.
+        setMessagesBySession((current) => ({
+          ...current,
+          [sessionId]: mergeRehydratedMessages(current[sessionId] ?? [], nextMessages),
+        }));
         if (nextTrace) {
           setTraceBySession((current) =>
             current[sessionId] ? current : { ...current, [sessionId]: nextTrace! },

package/src/contexts/messageReducer.ts

@@ -171,6 +171,25 @@ export function reduceMessagesForEvent(existing: ChatMessage[], event: WebSocket
       // Strip NO-RENDER wrapper used by record_trace "Message Complete" hint
       delta = delta.replace(/<!--NO-RENDER-->[\s\S]*?<!--\/NO-RENDER-->/g, "");
       if (!delta) return existing;
+      // Orphaned CONTENT (no matching START) — recover gracefully instead of
+      // dropping it. This happens when a demo bundle was exported from a
+      // tail-sliced history: the leading START of the earliest messages is gone,
+      // and a plain `.map` here would no-op, silently swallowing the opening
+      // replies. Synthesize the message so the content still renders.
+      if (!existing.some((m) => m.id === id)) {
+        return [
+          ...existing,
+          {
+            id,
+            role: "assistant",
+            content: delta,
+            createdAt: new Date().toISOString(),
+            agent,
+            streaming: true,
+            kind: "text",
+          },
+        ];
+      }
       return existing.map((m) =>
         m.id === id ? { ...m, content: (m.content ?? "") + delta } : m,
       );

package/src/contracts/backend.ts

@@ -481,7 +481,14 @@ function normalizeStringArray(value: unknown): string[] {
 }
 
 function camelizeKey(key: string): string {
-  return key.replace(/_([a-z])/g, (_, char: string) => char.toUpperCase());
+  // Preserve a leading-underscore prefix: `_ts` / `_seq` are AG-UI transport
+  // metadata whose underscore is significant. Without this guard the regex
+  // turns `_ts` into `Ts`, so `normalizeAgUiEvent` strips the timestamp and the
+  // demo replay's timeline collapses (every event lands at ms=0). Only internal
+  // snake_case boundaries (e.g. `agent_name` → `agentName`) are camelized.
+  const lead = key.match(/^_+/)?.[0] ?? "";
+  const rest = key.slice(lead.length);
+  return lead + rest.replace(/_([a-z])/g, (_, char: string) => char.toUpperCase());
 }
 
 function camelizeObject(value: unknown): unknown {

package/src/i18n/messages/files.ts

@@ -17,6 +17,7 @@ export default defineMessages(
     "files.aria.tree": "文件树",
     "files.selectForDownload": "选择 {name} 以下载",
     "files.error.notRunning": "Sandbox 未运行，无法读取文件。",
+    "files.error.loadFailed": "加载文件列表失败",
     "files.error.downloadFailed": "下载文件失败",
     "files.error.refreshFailed": "刷新文件失败",
     "files.error.previewFailed": "无法预览文件",
@@ -56,6 +57,7 @@ export default defineMessages(
     "files.aria.tree": "File tree",
     "files.selectForDownload": "Select {name} for download",
     "files.error.notRunning": "Sandbox is not running; cannot read files.",
+    "files.error.loadFailed": "Failed to load file list",
     "files.error.downloadFailed": "Failed to download file",
     "files.error.refreshFailed": "Failed to refresh files",
     "files.error.previewFailed": "Unable to preview file",

package/src/utils/api.ts

@@ -123,6 +123,20 @@ export const api = {
     return handleJson(await apiFetch(`${API_BASE}/version`));
   },
 
+  // #156: real on-disk paths for the Files panel (local mode only). Hosted
+  // backends return `{ localMode: false }` with no host path. Best-effort:
+  // any failure resolves to a non-local shape so callers fall back cleanly.
+  async getInfo(): Promise<{ localMode: boolean; dataDir?: string; workspacesRoot?: string }> {
+    if (runtimeConfig.useMockBackend) {
+      return { localMode: false };
+    }
+    try {
+      return await handleJson(await apiFetch(`${API_BASE}/info`));
+    } catch {
+      return { localMode: false };
+    }
+  },
+
   auth: {
     async me(): Promise<User> {
       if (runtimeConfig.useMockBackend) {