@brainpilot/web 0.0.8 → 0.0.10

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) => {