@brainpilot/web 0.0.3 → 0.0.5

package/src/components/demo/TraceNodeModal.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+import { GitBranch, X } from "lucide-react";
+import type { TraceNode } from "../../contracts/backend";
+import type { TranslateVars } from "../../i18n/translate";
+import { IconButton } from "../primitives/IconButton";
+import { TraceNodeDetail } from "../session/TraceNodeDetail";
+
+interface TraceNodeModalProps {
+  node: TraceNode | null;
+  onClose: () => void;
+  onSelectNode: (id: string) => void;
+  /** Focus a produced file in the preview (closes the modal). */
+  onSelectArtifact: (path: string) => void;
+  activeArtifactPath: string | null;
+  closeLabel: string;
+  t: (key: string, vars?: TranslateVars) => string;
+}
+
+/**
+ * Popup showing a single reasoning-trace node's full info (what the agent did,
+ * dependencies, tool calls, produced files). Reuses the app's modal pattern
+ * (fixed backdrop + centered panel, click-outside / Escape to close) and the
+ * shared TraceNodeDetail body.
+ */
+export function TraceNodeModal({ node, onClose, onSelectNode, onSelectArtifact, activeArtifactPath, closeLabel, t }: TraceNodeModalProps) {
+  useEffect(() => {
+    if (!node) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [node, onClose]);
+
+  if (!node) {
+    return null;
+  }
+
+  return (
+    <div className="trace-node-modal" onMouseDown={onClose} role="presentation">
+      <section
+        className="trace-node-modal__panel"
+        onMouseDown={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={node.title}
+      >
+        <div className="trace-node-modal__head">
+          <span className="trace-node-modal__eyebrow">
+            <GitBranch size={13} style={{ marginRight: 5, verticalAlign: "-2px" }} />
+            {node.id}
+          </span>
+          <IconButton label={closeLabel} onClick={onClose}>
+            <X size={16} />
+          </IconButton>
+        </div>
+        <div className="trace-node-modal__body trace-detail">
+          <TraceNodeDetail
+            node={node}
+            onSelectNode={onSelectNode}
+            onSelectArtifact={(path) => {
+              onSelectArtifact(path);
+              onClose();
+            }}
+            activeArtifactPath={activeArtifactPath}
+            t={t}
+          />
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/components/demo/demoBundle.ts

@@ -0,0 +1,218 @@
+import type { AgentStatus, ChatMessage } from "../../contracts/backend";
+import {
+  DEMO_BUNDLE_FORMAT,
+  DEMO_BUNDLE_VERSION,
+  DemoBundle,
+  DemoFile,
+  MAX_FILE_BYTES,
+  MAX_TOTAL_BYTES,
+  isDemoBundle,
+} from "../../contracts/demoBundle";
+import { api } from "../../utils/api";
+import { getPreviewKind, mimeFromName } from "../files/filePreview";
+
+export interface BuildDemoOptions {
+  session: { id: string; title: string; createdAt?: string; updatedAt?: string };
+  /**
+   * The running sandbox to read produced files from. Optional: when absent (no
+   * running sandbox), the conversation / trace / events are still packed from
+   * host-persisted storage and every produced file is recorded as unreadable.
+   */
+  sandboxId?: string;
+  /** In-memory folded messages, used only when no timestamped events exist. */
+  fallbackMessages?: ChatMessage[];
+  /** Detail shown on files that could not be read because no sandbox was available. */
+  filesUnavailableDetail?: string;
+  /** Progress notices for the UI (e.g. "packing 3 files…"). */
+  onProgress?: (message: string) => void;
+}
+
+/** Normalize a trace artifact path to a sandbox `/workspace/...` path. */
+function toWorkspacePath(path: string): string {
+  if (path.startsWith("/workspace")) {
+    return path;
+  }
+  // Absolute paths outside /workspace (e.g. "/data/out.csv", "/tmp/x") are
+  // remapped under /workspace by their basename-bearing tail, since the sandbox
+  // file API only serves /workspace. A bare relative path is joined directly.
+  const rel = path.replace(/^\/+/, "").replace(/^\.\//, "");
+  return `/workspace/${rel}`;
+}
+
+/** Chunked base64 encode of binary data (avoids call-stack overflow). */
+async function blobToBase64(blob: Blob): Promise<string> {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  let binary = "";
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return btoa(binary);
+}
+
+function utf8ByteLength(text: string): number {
+  return new TextEncoder().encode(text).length;
+}
+
+/**
+ * Collect the produced-file set referenced by the trace, fetch each, and embed
+ * it (utf8 for text, base64 for binary) honoring per-file and total size caps.
+ */
+async function collectFiles(
+  sandboxId: string | undefined,
+  paths: string[],
+  onProgress?: (message: string) => void,
+  unavailableDetail?: string,
+): Promise<DemoFile[]> {
+  const files: DemoFile[] = [];
+  let totalEncoded = 0;
+  let index = 0;
+  for (const rawPath of paths) {
+    index += 1;
+    onProgress?.(`packing ${index}/${paths.length}: ${rawPath.split("/").pop() ?? rawPath}`);
+    const path = toWorkspacePath(rawPath);
+    const name = path.split("/").pop() ?? path;
+    const mime = mimeFromName(name);
+    const isText = getPreviewKind(name) === "text";
+    // No running sandbox to read from: the file bytes live in a sandbox
+    // workspace we can't reach right now. Record each as unreadable (with an
+    // honest reason) instead of failing the whole export — the conversation,
+    // trace and events still pack fine from host-persisted storage.
+    if (!sandboxId) {
+      files.push({
+        path: rawPath,
+        mime,
+        encoding: isText ? "utf8" : "base64",
+        size: 0,
+        truncated: true,
+        reason: "unreadable",
+        detail: unavailableDetail,
+      });
+      continue;
+    }
+    try {
+      if (isText) {
+        const content = await api.sandbox.readFile(sandboxId, path);
+        const size = content.size ?? utf8ByteLength(content.content);
+        const encodedLen = utf8ByteLength(content.content);
+        if (size > MAX_FILE_BYTES || totalEncoded + encodedLen > MAX_TOTAL_BYTES) {
+          files.push({ path: rawPath, mime, encoding: "utf8", size, truncated: true, reason: "tooLarge" });
+          continue;
+        }
+        totalEncoded += encodedLen;
+        files.push({ path: rawPath, mime, encoding: "utf8", size, truncated: false, data: content.content });
+      } else {
+        const blob = await api.sandbox.readRawFile(sandboxId, path);
+        const size = blob.size;
+        if (size > MAX_FILE_BYTES) {
+          files.push({ path: rawPath, mime, encoding: "base64", size, truncated: true, reason: "tooLarge" });
+          continue;
+        }
+        const data = await blobToBase64(blob);
+        if (totalEncoded + data.length > MAX_TOTAL_BYTES) {
+          files.push({ path: rawPath, mime, encoding: "base64", size, truncated: true, reason: "tooLarge" });
+          continue;
+        }
+        totalEncoded += data.length;
+        files.push({ path: rawPath, mime, encoding: "base64", size, truncated: false, data });
+      }
+    } catch (err) {
+      // Read failed (missing, path rejected, outside workspace, wrong sandbox).
+      // Record it as unreadable — NOT as "too large" — so the player can show
+      // an honest reason instead of a misleading size notice.
+      files.push({
+        path: rawPath,
+        mime,
+        encoding: isText ? "utf8" : "base64",
+        size: 0,
+        truncated: true,
+        reason: "unreadable",
+        detail: err instanceof Error ? err.message : String(err),
+      });
+    }
+  }
+  return files;
+}
+
+/** Build a portable demo bundle for an arbitrary session. */
+export async function buildDemoBundle(opts: BuildDemoOptions): Promise<DemoBundle> {
+  const { session, sandboxId, fallbackMessages, filesUnavailableDetail, onProgress } = opts;
+
+  onProgress?.("reading reasoning trace…");
+  const trace = await api.sessions.getTrace(session.id);
+
+  let appVersion: string | undefined;
+  try {
+    appVersion = (await api.getVersion()).version;
+  } catch {
+    appVersion = undefined;
+  }
+
+  let agents: AgentStatus[] = [];
+  try {
+    agents = (await api.sessions.state(session.id)).agents;
+  } catch {
+    agents = [];
+  }
+
+  onProgress?.("reading conversation timeline…");
+  let timeline: DemoBundle["timeline"] = "timestamped";
+  let events = await api.sessions.getEvents(session.id);
+  let messages: ChatMessage[] | undefined;
+  if (!events || events.length === 0) {
+    timeline = "ordered";
+    events = undefined as never;
+    messages = fallbackMessages ?? [];
+  }
+
+  // Collect produced-file paths from trace artifacts (dedupe, skip dirs).
+  const seen = new Set<string>();
+  const paths: string[] = [];
+  for (const node of trace.nodes) {
+    for (const artifact of node.artifacts ?? []) {
+      if (!artifact.path || artifact.type === "dir") {
+        continue;
+      }
+      if (!seen.has(artifact.path)) {
+        seen.add(artifact.path);
+        paths.push(artifact.path);
+      }
+    }
+  }
+
+  const files = await collectFiles(sandboxId, paths, onProgress, filesUnavailableDetail);
+
+  onProgress?.("assembling bundle…");
+  return {
+    format: DEMO_BUNDLE_FORMAT,
+    version: DEMO_BUNDLE_VERSION,
+    exportedAt: new Date().toISOString(),
+    appVersion,
+    timeline,
+    session: {
+      id: session.id,
+      title: session.title,
+      createdAt: session.createdAt,
+      updatedAt: session.updatedAt,
+    },
+    events: timeline === "timestamped" ? events : undefined,
+    messages: timeline === "ordered" ? messages : undefined,
+    trace,
+    agents,
+    files,
+  };
+}
+
+/** Parse + validate an imported bundle file. Throws on invalid input. */
+export function parseDemoBundle(text: string): DemoBundle {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    throw new Error("Invalid JSON file.");
+  }
+  if (!isDemoBundle(parsed)) {
+    throw new Error("Not a valid live-demo bundle.");
+  }
+  return parsed;
+}

package/src/components/demo/demoCache.ts

@@ -0,0 +1,42 @@
+import { DemoBundle } from "../../contracts/demoBundle";
+
+/**
+ * Module-level (page-lifetime) cache of built demo bundles, keyed by
+ * sessionId + updatedAt. Survives DemoView unmount/remount so re-opening the
+ * same session's demo is instant and re-issues no requests. The updatedAt in
+ * the key auto-invalidates a stale bundle when the conversation has advanced.
+ *
+ * Bundles embed file bytes (base64), so an LRU cap bounds memory.
+ */
+
+const MAX_CACHED = 6;
+const cache = new Map<string, DemoBundle>();
+
+function keyFor(sessionId: string, updatedAt?: string): string {
+  return updatedAt ? `${sessionId}::${updatedAt}` : sessionId;
+}
+
+export function getCachedBundle(sessionId: string, updatedAt?: string): DemoBundle | null {
+  const key = keyFor(sessionId, updatedAt);
+  const hit = cache.get(key);
+  if (!hit) {
+    return null;
+  }
+  // Mark as most-recently-used (Map preserves insertion order).
+  cache.delete(key);
+  cache.set(key, hit);
+  return hit;
+}
+
+export function setCachedBundle(sessionId: string, updatedAt: string | undefined, bundle: DemoBundle): void {
+  const key = keyFor(sessionId, updatedAt);
+  cache.delete(key);
+  cache.set(key, bundle);
+  while (cache.size > MAX_CACHED) {
+    const oldest = cache.keys().next().value;
+    if (oldest === undefined) {
+      break;
+    }
+    cache.delete(oldest);
+  }
+}

package/src/components/files/FilePreviewView.tsx

@@ -0,0 +1,153 @@
+import { MarkdownMessage } from "../chat/MarkdownMessage";
+import { TranslateVars } from "../../i18n/translate";
+import { codeLanguage, isMarkdown } from "./filePreview";
+
+/** Skip highlighting very large files to avoid blocking the main thread. */
+const MAX_HIGHLIGHT_BYTES = 200_000;
+
+/** A fence longer than any backtick run in the text, so content can't break out. */
+function fenceFor(text: string): string {
+  let max = 0;
+  const runs = text.match(/`+/g);
+  if (runs) {
+    for (const r of runs) {
+      max = Math.max(max, r.length);
+    }
+  }
+  return "`".repeat(Math.max(3, max + 1));
+}
+
+export type PreviewSource =
+  | { kind: "text"; text: string; truncated?: boolean }
+  | { kind: "image"; blobUrl?: string }
+  | { kind: "pdf"; blobUrl?: string }
+  | { kind: "download"; blobUrl?: string }
+  | { kind: "tooLarge" }
+  | { kind: "unreadable"; detail?: string };
+
+interface FilePreviewViewProps {
+  name: string;
+  source: PreviewSource;
+  /** Render markdown (.md) text as formatted HTML instead of raw <pre>. */
+  renderMarkdown?: boolean;
+  /** Error loading the bytes (image/pdf), shown instead of the media. */
+  error?: string | null;
+  t: (key: string, vars?: TranslateVars) => string;
+  /** When provided, "too large" / "not previewable" notices offer a download. */
+  onDownload?: () => void;
+  /** Disables the download button while a download is in flight. */
+  isDownloading?: boolean;
+}
+
+/** Notice text + an optional download fallback for un-previewable files. */
+function NoticeWithDownload({
+  text,
+  onDownload,
+  isDownloading,
+  t,
+}: {
+  text: string;
+  onDownload?: () => void;
+  isDownloading?: boolean;
+  t: (key: string, vars?: TranslateVars) => string;
+}) {
+  return (
+    <div className="file-preview__notice">
+      <p>{text}</p>
+      {onDownload ? (
+        <button
+          className="file-preview__download"
+          disabled={isDownloading}
+          onClick={() => onDownload()}
+          type="button"
+        >
+          {isDownloading ? t("files.preview.downloading") : t("files.preview.download")}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Presentational file-content body — image / pdf / text / markdown / notices.
+ * Extracted from FileSidebar's FilePreviewPanel so the live preview and the
+ * demo player (which feeds embedded bytes) render identically. Callers own
+ * blob-URL lifecycle and byte loading; this component only renders.
+ */
+export function FilePreviewView({
+  name,
+  source,
+  renderMarkdown,
+  error,
+  t,
+  onDownload,
+  isDownloading,
+}: FilePreviewViewProps) {
+  if (source.kind === "tooLarge") {
+    return (
+      <NoticeWithDownload
+        text={t("files.preview.tooLarge")}
+        onDownload={onDownload}
+        isDownloading={isDownloading}
+        t={t}
+      />
+    );
+  }
+  if (source.kind === "unreadable") {
+    return (
+      <p className="file-preview__notice">
+        {t("files.preview.unreadable")}
+        {source.detail ? <small className="file-preview__notice-detail"> · {source.detail}</small> : null}
+      </p>
+    );
+  }
+  if (source.kind === "image") {
+    return (
+      <div className="file-preview__media">
+        {error ? <p>{error}</p> : source.blobUrl ? <img alt={name} src={source.blobUrl} /> : <p>{t("files.preview.loadingImage")}</p>}
+      </div>
+    );
+  }
+  if (source.kind === "pdf") {
+    return (
+      <div className="file-preview__media">
+        {error ? <p>{error}</p> : source.blobUrl ? <iframe src={source.blobUrl} title={name} /> : <p>{t("files.preview.loadingPdf")}</p>}
+      </div>
+    );
+  }
+  if (source.kind === "download") {
+    return (
+      <NoticeWithDownload
+        text={t("files.preview.notPreviewable")}
+        onDownload={onDownload}
+        isDownloading={isDownloading}
+        t={t}
+      />
+    );
+  }
+  // text
+  if (renderMarkdown && isMarkdown(name)) {
+    return (
+      <div className="file-preview__markdown">
+        <MarkdownMessage content={source.text} />
+      </div>
+    );
+  }
+  // Syntax-highlight code/text by rendering it as a fenced code block through
+  // the markdown pipeline (reuses rehype-highlight + the chat code theme; no
+  // extra bundle weight). Falls back to plain text for unknown or huge files.
+  const lang = codeLanguage(name);
+  if (lang !== "plaintext" && source.text.length <= MAX_HIGHLIGHT_BYTES) {
+    const fence = fenceFor(source.text);
+    return (
+      <div className="file-preview__markdown file-preview__code">
+        <MarkdownMessage content={`${fence}${lang}\n${source.text}\n${fence}`} />
+      </div>
+    );
+  }
+  return (
+    <pre className="file-preview__content">
+      <code>{source.text}</code>
+    </pre>
+  );
+}