npm - @brainpilot/web - Versions diffs - 0.0.8 → 0.0.9 - Mend

@brainpilot/web 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/assets/index-CJNvdeGz.js +445 -0
package/dist/index.html +1 -1
package/package.json +2 -2
package/src/__tests__/api.test.ts +41 -0
package/src/__tests__/demoTruncatedExport.test.ts +104 -0
package/src/__tests__/rehydrateMerge.test.ts +40 -0
package/src/__tests__/timelineBounds.test.ts +51 -0
package/src/components/chat/PromptComposer.tsx +91 -6
package/src/components/demo/demoBundle.ts +8 -3
package/src/components/files/FileSidebar.tsx +82 -11
package/src/components/session/AgentNetwork.tsx +1 -0
package/src/components/session/TimelineTab.tsx +39 -9
package/src/contexts/SessionContext.tsx +31 -7
package/src/contexts/messageReducer.ts +19 -0
package/src/contracts/backend.ts +8 -1
package/src/i18n/messages/files.ts +2 -0
package/src/utils/api.ts +14 -0
package/dist/assets/index-162Pskp8.js +0 -438

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
     <title>BrainPilot</title>
-    <script type="module" crossorigin src="/assets/index-162Pskp8.js"></script>
+    <script type="module" crossorigin src="/assets/index-CJNvdeGz.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DWOsU22G.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@brainpilot/web",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "engines": {
     "node": ">=22"
   },
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@brainpilot/protocol": "^0.0.8",
+    "@brainpilot/protocol": "^0.0.9",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@types/react": "^18.3.12",

package/src/__tests__/api.test.ts CHANGED Viewed

@@ -219,3 +219,44 @@ describe("api.sessions.interrupt — hits the interrupt route, not /messages (#9
     expect(url.endsWith("/messages")).toBe(false);
   });
 });
+describe("api.sandbox.uploadFile — #47 base64 upload to the workspace", () => {
+  // blobToBase64 uses the browser FileReader, absent in the node test env; stub
+  // it with a minimal readAsDataURL that emits a data: URL so the base64 path
+  // (prefix stripping) is exercised end-to-end.
+  beforeEach(() => {
+    class FakeFileReader {
+      result: string | null = null;
+      error: unknown = null;
+      onload: (() => void) | null = null;
+      onerror: (() => void) | null = null;
+      readAsDataURL(_blob: Blob) {
+        // "hi" → aGk= ; the helper must strip the "data:...;base64," prefix.
+        this.result = "data:text/plain;base64,aGk=";
+        this.onload?.();
+      }
+    }
+    vi.stubGlobal("FileReader", FakeFileReader);
+  });
+  it("POSTs { path, contentBase64 } and returns the runtime's { path, size }", async () => {
+    fetchMock.mockResolvedValueOnce(
+      makeResponse({ status: 201, contentType: "application/json", json: { path: "notes.txt", size: 2 } }),
+    );
+    const out = await api.sandbox.uploadFile("s1", "notes.txt", new Blob(["hi"]));
+    const [url, init] = fetchMock.mock.calls[0]!;
+    expect(String(url)).toMatch(/\/sandbox\/s1\/files$/);
+    expect((init as RequestInit).method).toBe("POST");
+    const body = JSON.parse(String((init as RequestInit).body));
+    expect(body).toEqual({ path: "notes.txt", contentBase64: "aGk=" });
+    expect(out).toEqual({ path: "notes.txt", size: 2 });
+  });
+  it("throws the backend error message on a non-ok response", async () => {
+    fetchMock.mockResolvedValueOnce(
+      makeResponse({ ok: false, status: 400, contentType: "application/json", json: { detail: "file too large" } }),
+    );
+    await expect(api.sandbox.uploadFile("s1", "big.bin", new Blob(["hi"]))).rejects.toThrow("file too large");
+  });
+});

package/src/__tests__/demoTruncatedExport.test.ts ADDED Viewed

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+import { reduceMessagesForEvent } from "../contexts/messageReducer";
+import { normalizeAgUiEvent } from "../contracts/backend";
+import type { ChatMessage, WebSocketEvent } from "../contracts/backend";
+/**
+ * Regression coverage for demo bundles built from a *tail-sliced* history.
+ *
+ * When a long session was exported with a positive `limit`, the history
+ * endpoint returns only the tail of events.jsonl — the leading
+ * TEXT_MESSAGE_START of the earliest messages is gone, leaving orphaned
+ * CONTENT/END. The replay then dropped those opening replies silently
+ * ("开始的消息被截断"). The export now requests the full log (`limit: 0`), and
+ * the reducer additionally recovers gracefully if an orphan still slips
+ * through.
+ */
+describe("demo replay tolerates truncated/orphaned events", () => {
+  it("renders orphaned TEXT_MESSAGE_CONTENT whose START was sliced off", () => {
+    // Simulate a tail-sliced stream: CONTENT/END with no preceding START.
+    let msgs: ChatMessage[] = [];
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_CONTENT",
+      messageId: "orphan-1",
+      delta: "Librarian → methodology grounding",
+      agentName: "principal",
+    } as WebSocketEvent);
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_CONTENT",
+      messageId: "orphan-1",
+      delta: " against the paper",
+      agentName: "principal",
+    } as WebSocketEvent);
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_END",
+      messageId: "orphan-1",
+    } as WebSocketEvent);
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0].id).toBe("orphan-1");
+    expect(msgs[0].content).toBe("Librarian → methodology grounding against the paper");
+    expect(msgs[0].agent).toBe("principal");
+    expect(msgs[0].streaming).toBe(false); // END finalized it
+  });
+  it("still folds a normal START→CONTENT→END triad into one message", () => {
+    let msgs: ChatMessage[] = [];
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_START",
+      messageId: "m1",
+      role: "assistant",
+      agentName: "principal",
+    } as WebSocketEvent);
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_CONTENT",
+      messageId: "m1",
+      delta: "hello",
+    } as WebSocketEvent);
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_CONTENT",
+      messageId: "m1",
+      delta: " world",
+    } as WebSocketEvent);
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_END",
+      messageId: "m1",
+    } as WebSocketEvent);
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0].content).toBe("hello world");
+  });
+  it("strips NO-RENDER wrappers even on orphaned content", () => {
+    let msgs: ChatMessage[] = [];
+    msgs = reduceMessagesForEvent(msgs, {
+      type: "TEXT_MESSAGE_CONTENT",
+      messageId: "orphan-2",
+      delta: "<!--NO-RENDER-->internal<!--/NO-RENDER-->",
+    } as WebSocketEvent);
+    // Entire delta was a NO-RENDER wrapper → nothing to render, no message created.
+    expect(msgs).toHaveLength(0);
+  });
+});
+describe("normalizeAgUiEvent preserves transport metadata keys", () => {
+  it("keeps _ts (and _seq) instead of mangling to Ts/Seq", () => {
+    const raw = {
+      type: "TEXT_MESSAGE_CONTENT",
+      _ts: "2026-06-22T08:43:24.619Z",
+      _seq: 42,
+      agent_name: "principal",
+      message_id: "m1",
+      delta: "hi",
+    };
+    const norm = normalizeAgUiEvent(raw) as Record<string, unknown>;
+    // The timestamp the demo timeline sorts on must survive normalization.
+    expect(norm._ts).toBe("2026-06-22T08:43:24.619Z");
+    expect(norm._seq).toBe(42);
+    expect(norm).not.toHaveProperty("Ts");
+    expect(norm).not.toHaveProperty("Seq");
+    // Internal snake_case still camelizes.
+    expect(norm.agentName).toBe("principal");
+    expect(norm.messageId).toBe("m1");
+  });
+});

package/src/__tests__/rehydrateMerge.test.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { mergeRehydratedMessages } from "../contexts/SessionContext";
+import type { ChatMessage } from "../contracts/backend";
+function msg(id: string, content = id): ChatMessage {
+  return { id, role: "assistant", content, createdAt: "2026-01-01T00:00:00.000Z" };
+}
+describe("mergeRehydratedMessages (#194-B1)", () => {
+  it("seeds the full history when nothing is live yet", () => {
+    const history = [msg("a"), msg("b"), msg("c")];
+    expect(mergeRehydratedMessages([], history).map((m) => m.id)).toEqual(["a", "b", "c"]);
+  });
+  it("does NOT drop history when SSE has already seeded a recent tail", () => {
+    // The regression: refresh → SSE ring buffer delivers only the last 2 msgs
+    // before history (the full log) lands. Old guard kept just these two.
+    const sseTail = [msg("y"), msg("z")];
+    const fullHistory = [msg("v"), msg("w"), msg("x"), msg("y"), msg("z")];
+    const merged = mergeRehydratedMessages(sseTail, fullHistory);
+    // Full history is restored, in order, with no duplicates.
+    expect(merged.map((m) => m.id)).toEqual(["v", "w", "x", "y", "z"]);
+  });
+  it("preserves live-only messages history does not contain (optimistic/newer)", () => {
+    const live = [msg("x"), msg("optimistic-1"), msg("newer-2")];
+    const history = [msg("w"), msg("x")];
+    const merged = mergeRehydratedMessages(live, history);
+    // History base first, then the live-only tail in its original order.
+    expect(merged.map((m) => m.id)).toEqual(["w", "x", "optimistic-1", "newer-2"]);
+  });
+  it("dedupes by id (history wins the shared ids)", () => {
+    const live = [msg("a", "stale"), msg("b", "live-only")];
+    const history = [msg("a", "canonical")];
+    const merged = mergeRehydratedMessages(live, history);
+    expect(merged.map((m) => m.id)).toEqual(["a", "b"]);
+    expect(merged.find((m) => m.id === "a")!.content).toBe("canonical");
+  });
+});

package/src/__tests__/timelineBounds.test.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { computeTimeBounds } from "../components/session/TimelineTab";
+describe("computeTimeBounds (#166)", () => {
+  const now = 1_000_000;
+  it("falls back to a 60s window ending at `now` when there are no dots", () => {
+    expect(computeTimeBounds([], now, false)).toEqual({ start: now - 60_000, end: now });
+    expect(computeTimeBounds([], now, true)).toEqual({ start: now - 60_000, end: now });
+  });
+  it("ends at the last message for a finished (not running) session", () => {
+    const first = 100_000;
+    const last = 200_000;
+    // `now` is far in the future, but the axis must NOT stretch to it.
+    const bounds = computeTimeBounds([first, last], now, false);
+    expect(bounds).toEqual({ start: first, end: last });
+  });
+  it("does not grow the axis as wall-clock `now` advances when idle", () => {
+    const ts = [100_000, 200_000];
+    const a = computeTimeBounds(ts, 500_000, false);
+    const b = computeTimeBounds(ts, 9_000_000, false);
+    // Same dots, later `now` → identical bounds (no creeping right edge).
+    expect(a).toEqual(b);
+    expect(b.end).toBe(200_000);
+  });
+  it("extends to `now` while the session is actively running", () => {
+    const ts = [100_000, 200_000];
+    const bounds = computeTimeBounds(ts, now, true);
+    expect(bounds).toEqual({ start: 100_000, end: now });
+  });
+  it("when running but `now` is before the last message, keeps the last message", () => {
+    const ts = [100_000, 200_000];
+    const bounds = computeTimeBounds(ts, 150_000, true);
+    expect(bounds.end).toBe(200_000);
+  });
+  it("expands a degenerate (single-dot / identical-ts) span to 60s", () => {
+    const bounds = computeTimeBounds([100_000], 100_000, false);
+    expect(bounds).toEqual({ start: 100_000, end: 160_000 });
+  });
+  it("expands a degenerate span even while running", () => {
+    // Single dot, now == that dot → end would equal start, must be padded.
+    const bounds = computeTimeBounds([100_000], 100_000, true);
+    expect(bounds).toEqual({ start: 100_000, end: 160_000 });
+  });
+});

package/src/components/chat/PromptComposer.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Bot, Square } from "lucide-react";
+import { Bot, Paperclip, Square, X } from "lucide-react";
 import { FormEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ProviderProfile } from "../../contracts/backend";
 import { useSandbox } from "../../contexts/SandboxContext";
@@ -34,6 +34,14 @@ export function PromptComposer() {
   const commandsRef = useRef<HTMLDivElement | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
+  // #47: file upload — names of files uploaded into the workspace this turn,
+  // shown as removable chips and announced to the agent on send. (Restored: the
+  // backend upload chain — writeFile route + #60 staging/drain — was always
+  // present; only this composer UI was removed in #160. It now lives in the
+  // left tool cluster, not the send cluster guarded by composerSendTools.test.)
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [attachments, setAttachments] = useState<string[]>([]);
+  const [uploading, setUploading] = useState(false);
   const { status: sandboxStatus, currentSandbox, reloadConfig } = useSandbox();
   const [composerError, setComposerError] = useState<string | null>(null);
   const { currentSession, messages, isSending, error, sendPrompt, isConnected, isDraft, agents, runActive, agentFilters, interruptCurrent, respondToInput, messageFilters } = useSessions();
@@ -220,17 +228,53 @@ export function PromptComposer() {
       return;
     }
     draftStore.set(sessionId, "");
+    // #47: if files were uploaded this turn, prepend a notice so the agent knows
+    // they exist in its workspace and can `read` them. Cleared after send.
+    const notice =
+      attachments.length > 0 ? `${t("chat.upload.notice", { names: attachments.join(", ") })}\n\n` : "";
+    const sentAttachments = attachments;
+    if (attachments.length > 0) setAttachments([]);
     // Carry the chosen provider/model so a freshly-created session records its
     // per-session selection (no-op for an already-running session).
-    const ok = await sendPrompt(content, {
+    const ok = await sendPrompt(`${notice}${content}`, {
       providerId: activeProvider?.id,
       modelId: selectedModel || undefined,
     });
     // #106: a failed/timed-out send must not silently eat the user's input.
-    // Restore the draft so they can retry without retyping. Only restore if they
-    // haven't already started typing again.
-    if (!ok && draftStore.get(sessionId).trim().length === 0) {
-      draftStore.set(sessionId, content);
+    // Restore the draft (and attachment chips) so they can retry without
+    // retyping. Only restore if they haven't already started typing again.
+    if (!ok) {
+      if (draftStore.get(sessionId).trim().length === 0) {
+        draftStore.set(sessionId, content);
+      }
+      if (sentAttachments.length > 0) {
+        setAttachments((prev) => (prev.length === 0 ? sentAttachments : prev));
+      }
+    }
+  };
+  // #47: upload the chosen files into the session workspace, then track their
+  // names as chips. In single-user mode the sandbox id and session id are the
+  // same; a draft has no real session yet, so uploads land in the `"local"`
+  // staging area and the runtime drains them into the real workspace on send
+  // (#60 drainLocalUploads). Files are uploaded to the workspace root by name.
+  const handleFilesChosen = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    const uploadId = currentSession?.id ?? currentSandbox?.id;
+    if (!uploadId) return;
+    setUploading(true);
+    setComposerError(null);
+    try {
+      for (const file of Array.from(files)) {
+        await api.sandbox.uploadFile(uploadId, file.name, file);
+        setAttachments((prev) => (prev.includes(file.name) ? prev : [...prev, file.name]));
+      }
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setComposerError(t("chat.upload.failed", { msg }));
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = ""; // allow re-selecting the same file
     }
   };
@@ -288,6 +332,26 @@ export function PromptComposer() {
             ariaLabel={t("chat.srAsk")}
           />
+          {attachments.length > 0 || uploading ? (
+            <div className="composer__attachments" aria-label={t("chat.aria.attachFile")}>
+              {attachments.map((name) => (
+                <span className="composer__chip" key={name}>
+                  <Paperclip size={12} />
+                  <span className="composer__chip-name">{name}</span>
+                  <button
+                    type="button"
+                    className="composer__chip-remove"
+                    aria-label={t("chat.aria.removeAttachment")}
+                    onClick={() => setAttachments((prev) => prev.filter((n) => n !== name))}
+                  >
+                    <X size={12} />
+                  </button>
+                </span>
+              ))}
+              {uploading ? <span className="composer__chip composer__chip--pending">{t("chat.upload.uploading")}</span> : null}
+            </div>
+          ) : null}
           <div className="composer__toolbar">
             <div className="composer__tools">
               {/*
@@ -298,6 +362,27 @@ export function PromptComposer() {
                 <Plus size={18} />
               </IconButton>
               */}
+              {/*
+                #47: file upload. The button lives here in the left tool cluster
+                (not the send cluster, which composerSendTools.test.tsx guards
+                against an upload control under #160). The hidden <input> is
+                clicked programmatically; chosen files upload to the workspace
+                root and are announced to the agent on send.
+              */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                style={{ display: "none" }}
+                onChange={(e) => void handleFilesChosen(e.target.files)}
+              />
+              <IconButton
+                label={t("chat.aria.attachFile")}
+                onClick={() => fileInputRef.current?.click()}
+                disabled={uploading || !currentSandbox}
+              >
+                <Paperclip size={17} />
+              </IconButton>
               {SHOW_SLASH_COMMANDS && slashCommands.length > 0 && (
                 <div className="command-picker" ref={commandsRef}>
                   <IconButton

package/src/components/demo/demoBundle.ts CHANGED Viewed

@@ -159,9 +159,14 @@ export async function buildDemoBundle(opts: BuildDemoOptions): Promise<DemoBundl
   let timeline: DemoBundle["timeline"] = "timestamped";
   // Pull the persisted event timeline from the new history endpoint (the
   // legacy `/sessions/:id/events` path is an SSE alias and returns no JSON).
-  // Cap at 5000 — the endpoint enforces the same cap, but stating it here
-  // documents the bundle's max footprint.
-  const historyEnvelope = await api.sessions.getHistory(session.id, { limit: 5000 });
+  // Request the FULL log (`limit: 0`) — same as the live chat rehydrate path
+  // (HISTORY_REHYDRATE_LIMIT). A positive cap returns the *tail* of the log,
+  // which slices off the oldest events: the leading TEXT_MESSAGE_START of the
+  // earliest messages is dropped, leaving orphaned CONTENT/END that the
+  // reducer can't attach to anything, so the conversation's opening replies
+  // silently vanish from the replay. The 25 MB embed budget (MAX_TOTAL_BYTES)
+  // still bounds the bundle's real footprint via the files section.
+  const historyEnvelope = await api.sessions.getHistory(session.id, { limit: 0 });
   let events: typeof historyEnvelope.events | undefined = historyEnvelope.events;
   let messages: ChatMessage[] | undefined;
   if (!events || events.length === 0) {

package/src/components/files/FileSidebar.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

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