@brainpilot/web 0.0.8 → 0.0.10

package/src/__tests__/runningScripts.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from "vitest";
+import {
+  extractCommand,
+  isBashTool,
+  selectActiveScripts,
+} from "../components/chat/runningScripts";
+import type { ChatMessage } from "../contracts/backend";
+
+function bashCall(over: Partial<ChatMessage> = {}): ChatMessage {
+  return {
+    id: over.id ?? "call-1",
+    role: "assistant",
+    content: "Tool: bash",
+    createdAt: "2026-07-01T00:00:00.000Z",
+    agent: over.agent ?? "principal",
+    kind: "tool",
+    toolName: "bash",
+    streaming: true,
+    toolInput: JSON.stringify({ command: "pytest -x tests/unit" }),
+    ...over,
+  };
+}
+
+describe("isBashTool", () => {
+  it("matches the bare bash tool", () => {
+    expect(isBashTool("bash")).toBe(true);
+  });
+
+  it("matches the mcp-namespaced bash tool", () => {
+    expect(isBashTool("mcp__local__bash")).toBe(true);
+  });
+
+  it("does not match other tool names", () => {
+    expect(isBashTool("read")).toBe(false);
+    expect(isBashTool("mcp__local__read")).toBe(false);
+    expect(isBashTool("bash_history")).toBe(false); // suffix match required
+    expect(isBashTool(undefined)).toBe(false);
+  });
+});
+
+describe("extractCommand", () => {
+  it("pulls `command` out of a fully-formed JSON args string", () => {
+    expect(extractCommand('{"command":"ls -la"}')).toBe("ls -la");
+  });
+
+  it("falls back to `cmd`/`script`/`shell` keys", () => {
+    expect(extractCommand('{"cmd":"echo hi"}')).toBe("echo hi");
+    expect(extractCommand('{"script":"./run.sh"}')).toBe("./run.sh");
+    expect(extractCommand('{"shell":"bash -c foo"}')).toBe("bash -c foo");
+  });
+
+  it("returns the raw string when the JSON is still partial", () => {
+    // TOOL_CALL_ARGS deltas may arrive as `{"comm` before the full JSON has
+    // buffered. Better to show *something* than to render an empty row.
+    expect(extractCommand('{"command":"pyt')).toBe('{"command":"pyt');
+  });
+
+  it("returns empty for non-strings and empty strings", () => {
+    expect(extractCommand(undefined)).toBe("");
+    expect(extractCommand(null)).toBe("");
+    expect(extractCommand("")).toBe("");
+    expect(extractCommand({ command: "not a string" })).toBe("");
+  });
+});
+
+describe("selectActiveScripts", () => {
+  it("returns empty when there are no tool messages", () => {
+    expect(selectActiveScripts([])).toEqual([]);
+    expect(
+      selectActiveScripts([
+        {
+          id: "t1",
+          role: "assistant",
+          content: "hello",
+          createdAt: "",
+          kind: "text",
+        },
+      ]),
+    ).toEqual([]);
+  });
+
+  it("returns only streaming bash calls, ignoring completed ones", () => {
+    const active = bashCall({ id: "a", streaming: true });
+    const done = bashCall({ id: "b", streaming: false });
+    const result = selectActiveScripts([active, done]);
+    expect(result.map((s) => s.id)).toEqual(["a"]);
+  });
+
+  it("ignores non-bash tool calls even when they are streaming", () => {
+    const bash = bashCall({ id: "a", streaming: true });
+    const read = bashCall({
+      id: "b",
+      streaming: true,
+      toolName: "read",
+      toolInput: JSON.stringify({ file: "foo.txt" }),
+    });
+    const trace = bashCall({
+      id: "c",
+      streaming: true,
+      toolName: "mcp__brainpilot__record_trace",
+      toolInput: "{}",
+    });
+    const result = selectActiveScripts([bash, read, trace]);
+    expect(result.map((s) => s.id)).toEqual(["a"]);
+  });
+
+  it("preserves arrival order across multiple concurrent bash calls", () => {
+    const first = bashCall({
+      id: "first",
+      agent: "principal",
+      toolInput: JSON.stringify({ command: "pytest" }),
+    });
+    const second = bashCall({
+      id: "second",
+      agent: "engineer",
+      toolInput: JSON.stringify({ command: "npm test" }),
+    });
+    const result = selectActiveScripts([first, second]);
+    expect(result).toEqual([
+      expect.objectContaining({ id: "first", agent: "principal", command: "pytest" }),
+      expect.objectContaining({ id: "second", agent: "engineer", command: "npm test" }),
+    ]);
+  });
+
+  it("defaults the agent name to 'principal' when unattributed", () => {
+    const noAgent = bashCall({ id: "a", agent: undefined });
+    const [row] = selectActiveScripts([noAgent]);
+    expect(row.agent).toBe("principal");
+  });
+
+  it("shows the raw arg fragment while args are still streaming", () => {
+    const partial = bashCall({
+      id: "a",
+      toolInput: '{"command":"pyt', // TOOL_CALL_ARGS half-arrived
+    });
+    const [row] = selectActiveScripts([partial]);
+    expect(row.command).toBe('{"command":"pyt');
+  });
+});

package/src/__tests__/timelineBounds.test.ts

@@ -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/MessageStream.tsx

@@ -8,6 +8,7 @@ import { SystemMessageBubble } from "./SystemMessageBubble";
 import { AskUserCard } from "./AskUserCard";
 import { AutoRetryIndicator } from "./AutoRetryIndicator";
 import { formatToolName, formatPayload } from "../../utils/toolDisplay";
+import { formatElapsed } from "../../utils/format";
 import { getChatScroll, setChatScroll, resolveScrollTop } from "./chatScrollMemory";
 
 interface MessageStreamProps {
@@ -60,17 +61,6 @@ function mergeName(message: ChatMessage): string {
   return message.agent || (message.role === "system" ? "system" : "principal");
 }
 
-// Compact elapsed formatter: "3.2s" under a minute, "1m 05s" above.
-function formatElapsed(ms: number): string {
-  if (ms < 0) ms = 0;
-  const totalSeconds = ms / 1000;
-  if (totalSeconds < 60) {
-    return `${totalSeconds.toFixed(1)}s`;
-  }
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = Math.floor(totalSeconds % 60);
-  return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
-}
 
 /**
  * Presentational chat message stack — message bubbles, agent rows, hook notes,

package/src/components/chat/PromptComposer.tsx

@@ -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";
@@ -15,6 +15,8 @@ import { ComposerInput } from "./ComposerInput";
 import { ComposerSendButton } from "./ComposerSendButton";
 import { ComposerSendTools } from "./ComposerSendTools";
 import { MessageStream } from "./MessageStream";
+import { RunningScriptsPanel } from "./RunningScriptsPanel";
+import { selectActiveScripts } from "./runningScripts";
 
 export function PromptComposer() {
   const t = useT();
@@ -34,6 +36,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();
@@ -61,6 +71,14 @@ export function PromptComposer() {
   const hasMessages = visibleMessages.length > 0;
   const isAgentRunning = agents.some((a) => a.status === "running");
   const lastAssistantStreaming = visibleMessages[visibleMessages.length - 1]?.role === "assistant" && visibleMessages[visibleMessages.length - 1]?.streaming;
+  // A bash tool is in flight iff selectActiveScripts finds anything; when it
+  // does, the RunningScriptsPanel below the toast owns the Stop button so
+  // we don't render a duplicate. When no scripts are running (e.g. the agent
+  // is thinking or streaming text), the toast keeps its own Stop.
+  const hasActiveScripts = useMemo(
+    () => selectActiveScripts(visibleMessages).length > 0,
+    [visibleMessages],
+  );
 
   // Agents whose run is still active. Threaded to MessageStream so a folded
   // activity block stays "in progress" across ReAct rounds — without this, the
@@ -220,17 +238,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
     }
   };
 
@@ -268,19 +322,26 @@ export function PromptComposer() {
                 return t(label.key, label.vars);
               })()}
             </span>
-            <button
-              className="agent-running-toast__stop"
-              type="button"
-              onClick={() => void interruptCurrent()}
-              aria-label={t("chat.aria.stop")}
-              title={t("chat.aria.stop")}
-            >
-              <Square size={10} fill="currentColor" />
-              <span>{t("chat.stop")}</span>
-            </button>
+            {hasActiveScripts ? null : (
+              <button
+                className="agent-running-toast__stop"
+                type="button"
+                onClick={() => void interruptCurrent()}
+                aria-label={t("chat.aria.stop")}
+                title={t("chat.aria.stop")}
+              >
+                <Square size={10} fill="currentColor" />
+                <span>{t("chat.stop")}</span>
+              </button>
+            )}
           </div>
         ) : null}
 
+        <RunningScriptsPanel
+          messages={visibleMessages}
+          onStop={() => void interruptCurrent()}
+        />
+
         <form className="composer" aria-label={t("chat.aria.newPrompt")} onSubmit={handleSubmit}>
           <ComposerInput
             sessionId={sessionId}
@@ -288,6 +349,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 +379,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/chat/RunningScriptsPanel.tsx

@@ -0,0 +1,118 @@
+import { ChevronDown, Square } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ChatMessage } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+import { formatElapsed } from "../../utils/format";
+import { selectActiveScripts } from "./runningScripts";
+
+interface Props {
+  messages: ChatMessage[];
+  onStop: () => void;
+}
+
+/**
+ * "Running scripts" panel — sits directly above the composer while any bash
+ * tool call is in flight, and unmounts the moment the last one ends.
+ *
+ * The message-stream activity block folds a whole turn's reasoning + tool
+ * calls into one collapsed history entry; the composer toast only names the
+ * working agent. Neither answers what users most often ask when they see the
+ * agent pause: "what shell command is running right now, and can I kill it?"
+ *
+ * Per-script elapsed timing is derived locally from a ref-held Map keyed by
+ * `toolCallId` — the runtime doesn't emit a start timestamp on
+ * `tool_call_start`, and per-second precision is fine for a "how long has
+ * this been going" affordance. `role="status"` (no `aria-live`) so the
+ * once-a-second tick doesn't spam screen readers with elapsed digits.
+ */
+export function RunningScriptsPanel({ messages, onStop }: Props) {
+  const t = useT();
+  const scripts = useMemo(() => selectActiveScripts(messages), [messages]);
+
+  // New scripts get a stamp the first render they appear in; finished ones
+  // are pruned so a re-appearing tool-call-id (shouldn't happen, but be
+  // defensive) restarts its clock cleanly.
+  const startedAt = useRef<Map<string, number>>(new Map());
+  useEffect(() => {
+    const now = performance.now();
+    const live = new Set(scripts.map((s) => s.id));
+    for (const id of live) {
+      if (!startedAt.current.has(id)) startedAt.current.set(id, now);
+    }
+    for (const id of startedAt.current.keys()) {
+      if (!live.has(id)) startedAt.current.delete(id);
+    }
+  }, [scripts]);
+
+  // Tick once a second while at least one script is in flight so the
+  // per-script elapsed advances without needing external state.
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (scripts.length === 0) return;
+    const id = window.setInterval(() => setTick((n) => n + 1), 1000);
+    return () => window.clearInterval(id);
+  }, [scripts.length]);
+
+  // Open by default — the whole point of the panel is that the user sees
+  // what's running. `<details>` preserves the user's toggle across re-renders
+  // as long as the DOM node is reused (which it is: the panel itself doesn't
+  // remount while scripts come and go).
+  const [open, setOpen] = useState(true);
+
+  if (scripts.length === 0) return null;
+
+  const now = performance.now();
+  const starts = Array.from(startedAt.current.values());
+  const oldest = starts.length > 0 ? Math.min(...starts) : now;
+
+  return (
+    <div className="running-scripts" role="status">
+      <details
+        open={open}
+        onToggle={(e) => setOpen((e.target as HTMLDetailsElement).open)}
+      >
+        <summary>
+          <span className="running-scripts__dot" aria-hidden="true" />
+          <ChevronDown size={14} className="running-scripts__chevron" aria-hidden="true" />
+          <span className="running-scripts__label">
+            {t("chat.runningScripts.count", { count: scripts.length })}
+            {` · ${formatElapsed(now - oldest)}`}
+          </span>
+          <button
+            className="running-scripts__stop"
+            type="button"
+            onClick={(e) => {
+              // Don't toggle the <details> when clicking Stop.
+              e.stopPropagation();
+              e.preventDefault();
+              onStop();
+            }}
+            aria-label={t("chat.aria.stop")}
+            title={t("chat.aria.stop")}
+          >
+            <Square size={10} fill="currentColor" />
+            <span>{t("chat.stop")}</span>
+          </button>
+        </summary>
+        <ul className="running-scripts__list">
+          {scripts.map((s) => {
+            const start = startedAt.current.get(s.id);
+            const elapsed = start === undefined ? "" : formatElapsed(now - start);
+            return (
+              <li className="running-scripts__item" key={s.id}>
+                <div className="running-scripts__item-head">
+                  <span className="running-scripts__item-agent">{s.agent}</span>
+                  <span className="running-scripts__item-name">bash</span>
+                  <span className="running-scripts__item-elapsed">{elapsed}</span>
+                </div>
+                <pre className="running-scripts__cmd">
+                  {s.command || t("chat.runningScripts.pending")}
+                </pre>
+              </li>
+            );
+          })}
+        </ul>
+      </details>
+    </div>
+  );
+}

package/src/components/chat/runningScripts.ts

@@ -0,0 +1,88 @@
+import type { ChatMessage } from "../../contracts/backend";
+
+/**
+ * "Running script" panel data model (pure, no React).
+ *
+ * The composer's toast tells the user *which agent* is thinking, and the
+ * message stream's activity block shows the *history* of every reasoning /
+ * tool step. Neither surfaces the piece users most often ask for: "what
+ * shell command is running right now, and can I stop it?"
+ *
+ * A "script" here is a tool call whose kind is `tool`, whose name resolves
+ * to `bash` (bare or mcp-namespaced), and whose `streaming` flag is still
+ * true — i.e. TOOL_CALL_START has arrived but TOOL_CALL_END has not. Once
+ * the end event lands, the reducer clears `streaming`, the row falls off
+ * this list, and the panel collapses when the last one leaves.
+ *
+ * Restricting to bash on purpose: filesystem reads/greps/edits are cheap
+ * and finish fast, so listing them would just add noise. Long-running
+ * work — pytest, wget, training loops — flows through bash.
+ */
+
+/**
+ * Match a tool name against the bash tool, whether it arrived bare
+ * (Pi's built-in) or namespaced (`mcp__<server>__bash` from a bridged MCP
+ * server). Mirrors the bare-name extraction used by `isInternalToolName`
+ * in messageGroups.ts so the two visibility filters stay consistent.
+ */
+export function isBashTool(name: string | undefined): boolean {
+  if (!name) return false;
+  if (name === "bash") return true;
+  const bare = name.includes("__") ? name.slice(name.lastIndexOf("__") + 2) : name;
+  return bare === "bash";
+}
+
+/**
+ * Best-effort extraction of the shell command from the tool call args.
+ *
+ * The reducer feeds `TOOL_CALL_ARGS` deltas verbatim into `toolInput` as a
+ * string, so once enough of the JSON has arrived we get `{"command": "..."}`
+ * (or `cmd`, depending on the runtime). While the JSON is still partial we
+ * just show the raw fragment — better than nothing, and it stops flickering
+ * once the delta stream completes.
+ */
+export function extractCommand(toolInput: unknown): string {
+  if (typeof toolInput !== "string" || toolInput.length === 0) return "";
+  const trimmed = toolInput.trim();
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (parsed && typeof parsed === "object") {
+      const obj = parsed as Record<string, unknown>;
+      for (const key of ["command", "cmd", "script", "shell"]) {
+        const value = obj[key];
+        if (typeof value === "string" && value.length > 0) return value;
+      }
+    }
+  } catch {
+    // Partial JSON while args are still streaming — fall through.
+  }
+  return trimmed;
+}
+
+/** A bash tool call that is still executing. */
+export interface ActiveScript {
+  id: string;
+  agent: string;
+  command: string;
+}
+
+/**
+ * Distil the flat message log down to the bash calls still in flight, in
+ * arrival order. Everything else — text, thinking, non-bash tools, completed
+ * bash calls — is filtered out. Callers can trigger the panel purely off
+ * `result.length > 0`.
+ */
+export function selectActiveScripts(messages: ChatMessage[]): ActiveScript[] {
+  const out: ActiveScript[] = [];
+  for (const m of messages) {
+    if (m.kind !== "tool") continue;
+    if (!m.streaming) continue;
+    if (!isBashTool(m.toolName)) continue;
+    out.push({
+      id: m.id,
+      agent: m.agent ?? "principal",
+      command: extractCommand(m.toolInput),
+    });
+  }
+  return out;
+}

package/src/components/demo/demoBundle.ts

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