@spunto/design-system 0.28.0 → 0.30.0

package/src/components/tasks/tool-stack.tsx

@@ -0,0 +1,692 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react"
+import {
+  ArrowLeftIcon,
+  BrainIcon,
+  ChevronRightIcon,
+  CircleSlashIcon,
+  FileTextIcon,
+  GlobeIcon,
+  LayersIcon,
+  ListTreeIcon,
+  PencilIcon,
+  SearchIcon,
+  TerminalIcon,
+  UsersIcon,
+  WrenchIcon,
+} from "lucide-react"
+
+import { cn } from "../../utils"
+import { Kbd } from "../kbd"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../sheet"
+import { TaskFiles, fileRefs } from "./task-attachments"
+import { taskSpan, useElapsed } from "./task-state"
+import type { AttachmentUrl, TaskEvent } from "./types"
+
+/**
+ * What the agent *did*, as opposed to what it said — the call stack of a session.
+ *
+ * The timeline next door (`task-event-stream.tsx`) is built on one hierarchy: prose is the thing
+ * a human came to read, and tools are the machinery under it. That holds right up until the
+ * machinery arrives in a chain — twenty reads, a grep, six edits, a test run — at which point a
+ * folded line each is still twenty-seven lines, and the sentence that follows them is off screen.
+ * A reader scrolling that is not reading a conversation, they are scrolling past one.
+ *
+ * So a chain is **one row**, and there are two ways into it, because they answer two different
+ * questions:
+ *
+ *  - **the row itself** says what the chain amounts to — "read 8 files · ran 3 commands" — and,
+ *    while it is still going, what is happening right now. Unfolding it in place is for "wait,
+ *    what did it edit?", asked in the middle of reading.
+ *  - **the stack** (`TaskToolStackSheet`) is the other question entirely: not "what happened in
+ *    this turn" but "what has this session actually done", every call in one list, searchable,
+ *    with the full input and output of the selected one. That is a working surface, not a line on
+ *    a timeline, so it gets a sheet of its own.
+ *
+ * The same shape the rest of the field landed on: T3 Code and Ducktape both fold consecutive
+ * tool/reasoning runs behind one disclosure with a counted summary, and Amp's transcript makes a
+ * tool call a card with collapsible input/output. What is ours is the *summary* — verbs and
+ * counts rather than "15 tool calls" — and the stack as a first-class surface.
+ */
+
+const str = (v: unknown): string => (typeof v === "string" ? v : "")
+const bool = (v: unknown): boolean => v === true
+
+/** A call and, once it comes back, its result. Paired by `callId` in the timeline. */
+export type ToolCall = { call: TaskEvent; result?: TaskEvent }
+
+// ── Reading a call ────────────────────────────────────────────────────────────────────────────
+
+/**
+ * The one-line gist of a tool's arguments.
+ *
+ * Adapters store the input verbatim because that is the evidence; a folded row wants the
+ * *subject* instead. The keys below are the common ones across harnesses, and the fallback is the
+ * raw string — an unknown tool degrades to what we had, not to nothing.
+ */
+const SUBJECT_KEYS = ["command", "file_path", "path", "pattern", "query", "url", "description", "prompt"]
+
+export function toolSubject(input: string): string {
+  if (!input.startsWith("{")) return input
+  try {
+    const parsed = JSON.parse(input) as Record<string, unknown>
+    for (const key of SUBJECT_KEYS) {
+      const value = parsed[key]
+      if (typeof value === "string" && value.trim()) return value.replace(/\s+/g, " ").trim()
+    }
+  } catch {
+    // Clipped at 8 KiB, or simply not JSON — the raw text is still the best we have.
+  }
+  return input
+}
+
+/** JSON arguments, laid out, for the one place with the room to read them: the stack's detail. */
+function pretty(text: string): string {
+  const trimmed = text.trim()
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return text
+  try {
+    return JSON.stringify(JSON.parse(trimmed), null, 2)
+  } catch {
+    return text
+  }
+}
+
+/**
+ * What kind of move a tool name is.
+ *
+ * Matched on a prefix rather than an exact list because the list is not ours to keep: every
+ * harness names its own tools, and MCP servers add more at runtime. A name we cannot place is
+ * `other`, which still counts — the summary says "3 other calls" rather than pretending the
+ * chain was shorter than it was.
+ */
+export type ToolVerb = "read" | "edit" | "search" | "run" | "web" | "delegate" | "other"
+
+const VERB_RULES: [RegExp, ToolVerb][] = [
+  [/^(read|view|open|cat|notebook_?read)/, "read"],
+  [/^(edit|write|create|update|multi_?edit|notebook_?edit|apply_?patch|patch|str_?replace)/, "edit"],
+  [/^(grep|glob|search|find|list|ls|codebase)/, "search"],
+  [/^(bash|sh|shell|exec|run|terminal|command|process)/, "run"],
+  [/^(web|fetch|browser|playwright|curl|http)/, "web"],
+  [/^(task|agent|dispatch|subagent)/, "delegate"],
+]
+
+export function toolVerb(name: string): ToolVerb {
+  const lower = name.toLowerCase()
+  for (const [rule, verb] of VERB_RULES) if (rule.test(lower)) return verb
+  return "other"
+}
+
+export const VERB_ICON: Record<ToolVerb, ReactNode> = {
+  read: <FileTextIcon className="h-3 w-3" />,
+  edit: <PencilIcon className="h-3 w-3" />,
+  search: <SearchIcon className="h-3 w-3" />,
+  run: <TerminalIcon className="h-3 w-3" />,
+  web: <GlobeIcon className="h-3 w-3" />,
+  delegate: <UsersIcon className="h-3 w-3" />,
+  other: <WrenchIcon className="h-3 w-3" />,
+}
+
+const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`
+
+const VERB_LABEL: Record<ToolVerb, (n: number) => string> = {
+  read: (n) => `read ${plural(n, "file")}`,
+  edit: (n) => `edited ${plural(n, "file")}`,
+  search: (n) => plural(n, "search", "searches"),
+  run: (n) => `ran ${plural(n, "command")}`,
+  web: (n) => plural(n, "web call"),
+  delegate: (n) => plural(n, "subagent"),
+  other: (n) => plural(n, "other call"),
+}
+
+// ── A run of them ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Consecutive machinery: the tool calls of one stretch of work, and the thinking in between.
+ *
+ * Thinking is in here rather than beside it because it is the same kind of thing — the agent
+ * working, not the agent talking — and a chain read as "tool, thought, tool, thought" is exactly
+ * the alternation this row exists to stop. It stays visible inside the unfolded run.
+ */
+export type RunItem = { kind: "tool"; entry: ToolCall } | { kind: "thinking"; event: TaskEvent }
+export type ToolRun = { items: RunItem[] }
+
+export function runCalls(run: ToolRun): ToolCall[] {
+  return run.items.flatMap((item) => (item.kind === "tool" ? [item.entry] : []))
+}
+
+/**
+ * The files a run's calls answered with — a screenshot, a PDF the agent read.
+ *
+ * Lifted to the run row for the same reason a single call keeps them outside its fold: the file
+ * *is* the answer. Folding a chain must not turn "here is what the page looks like now" into a
+ * line of text about a tool having been called.
+ */
+export function runFiles(run: ToolRun) {
+  return runCalls(run).flatMap((entry) => fileRefs(entry.result?.payload.files))
+}
+
+export type RunStats = {
+  calls: ToolCall[]
+  thoughts: number
+  failed: number
+  /** The call still in flight, if any — there is at most one, and it is what a live row shows. */
+  running: ToolCall | null
+  /** Verb clauses, most frequent first, capped — plus what the cap left out. */
+  label: string
+}
+
+export function runStats(run: ToolRun): RunStats {
+  const calls = runCalls(run)
+  const thoughts = run.items.length - calls.length
+  const counts = new Map<ToolVerb, number>()
+  let failed = 0
+
+  for (const entry of calls) {
+    const verb = toolVerb(str(entry.call.payload.name))
+    counts.set(verb, (counts.get(verb) ?? 0) + 1)
+    if (bool(entry.result?.payload.isError)) failed += 1
+  }
+
+  // Only the *last* call counts as in flight. An earlier one missing its result means ingestion
+  // started mid-session and never saw it — a fact about the capture, not a tool that has been
+  // running for three hours, and showing a clock on it would say the second thing.
+  const lastCall = calls[calls.length - 1]
+  const running = lastCall && !lastCall.result ? lastCall : null
+
+  // Three clauses is what fits on one line at this size without the row becoming the paragraph it
+  // is replacing; the rest is counted, never dropped.
+  const ranked = [...counts.entries()].sort((a, b) => b[1] - a[1])
+  const shown = ranked.slice(0, 3)
+  const rest = ranked.slice(3).reduce((n, [, count]) => n + count, 0)
+  const clauses = shown.map(([verb, count]) => VERB_LABEL[verb](count))
+  if (rest > 0) clauses.push(`+${rest} more`)
+  if (thoughts > 0) clauses.push(plural(thoughts, "thought"))
+
+  return { calls, thoughts, failed, running, label: clauses.join(" · ") }
+}
+
+/** How long the whole run took. `null` while it is still going — that is `useElapsed`'s job. */
+export function runDuration(run: ToolRun): string | null {
+  const items = run.items
+  if (items.length === 0) return null
+  const first = items[0].kind === "tool" ? items[0].entry.call : items[0].event
+  const last = items[items.length - 1]
+  const lastEvent = last.kind === "tool" ? (last.entry.result ?? last.entry.call) : last.event
+  if (last.kind === "tool" && !last.entry.result) return null
+  return taskSpan(first.ts, lastEvent.ts)
+}
+
+// ── One call, folded ──────────────────────────────────────────────────────────────────────────
+
+function Block({
+  label,
+  text,
+  danger = false,
+  className,
+}: {
+  label: string
+  text: string
+  danger?: boolean
+  className?: string
+}) {
+  return (
+    <div className={cn("min-w-0", className)}>
+      <p className="mb-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
+      <pre
+        className={cn(
+          "max-h-64 overflow-auto rounded-md border px-2.5 py-1.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words",
+          danger ? "border-destructive/30 bg-destructive/5" : "bg-muted/50",
+        )}
+      >
+        {text}
+      </pre>
+    </div>
+  )
+}
+
+function TruncationNote({ entry }: { entry: ToolCall }) {
+  if (!bool(entry.call.payload.truncated) && !bool(entry.result?.payload.truncated)) return null
+  return <p className="text-[10px] text-muted-foreground">Clipped to the 8 KiB kept per field.</p>
+}
+
+/**
+ * `useElapsed` (see `task-state.tsx`) is what a running tool gets instead of output.
+ *
+ * Measured against a real session: a harness reports a tool's result **once, when it finishes** —
+ * during a 13-second `Bash` nothing at all comes out of the stream. So the honest thing a
+ * timeline can offer while a tool runs is not its output (there is none to have) but the one fact
+ * it does know: how long it has been at it. Without this a slow command is indistinguishable
+ * from a stuck one.
+ */
+export function ToolLine({
+  entry,
+  attachmentUrl,
+  onOpenStack,
+}: {
+  entry: ToolCall
+  attachmentUrl: AttachmentUrl
+  /** Hands this call off to the stack sheet. Absent inside the sheet itself. */
+  onOpenStack?: (seq: number) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const name = str(entry.call.payload.name) || "tool"
+  const input = str(entry.call.payload.input)
+  const result = entry.result
+  const isError = bool(result?.payload.isError)
+  const output = str(result?.payload.output)
+  const elapsed = useElapsed(result ? null : entry.call.ts)
+  const took = result ? taskSpan(entry.call.ts, result.ts) : null
+  // A tool that answers with a file — a screenshot, a PDF the agent read. Drawn outside the fold,
+  // unlike the rest of the result: the file *is* the answer, and a reader who has to expand a row
+  // to find out that a screenshot was taken has been told nothing by the row.
+  const files = fileRefs(result?.payload.files)
+
+  return (
+    <div className="min-w-0">
+      <div className="group/tool flex items-center gap-1">
+        <button
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          className="-ml-1 flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 py-1 text-left transition-colors hover:bg-muted/50"
+        >
+          <ChevronRightIcon
+            className={cn(
+              "h-3 w-3 shrink-0 text-muted-foreground/50 transition-transform group-hover/tool:text-muted-foreground",
+              open && "rotate-90",
+            )}
+          />
+          <span className={cn("shrink-0 text-xs font-medium", isError && "text-destructive")}>{name}</span>
+          <span className="min-w-0 truncate font-mono text-[11px] text-muted-foreground">{toolSubject(input)}</span>
+          {!result ? (
+            <span className="ml-auto shrink-0 font-mono text-[10px] font-medium text-amber-600 tabular-nums dark:text-amber-500">
+              {elapsed ?? "running"}
+            </span>
+          ) : (
+            took && (
+              <span className="ml-auto shrink-0 font-mono text-[10px] text-muted-foreground/70 tabular-nums">
+                {took}
+              </span>
+            )
+          )}
+        </button>
+        {onOpenStack && (
+          // Only on hover, and only on a pointer that has one: this is the third affordance on a
+          // row whose whole point is to be quiet.
+          <button
+            type="button"
+            onClick={() => onOpenStack(entry.call.seq)}
+            title="Open in the tool stack"
+            className="shrink-0 rounded-md p-1 text-muted-foreground/0 transition-colors max-sm:text-muted-foreground/60 group-hover/tool:text-muted-foreground/60 hover:!text-foreground hover:bg-muted/60"
+          >
+            <LayersIcon className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+
+      {files.length > 0 && <TaskFiles files={files} attachmentUrl={attachmentUrl} className="pl-5" />}
+
+      {open && (
+        <div className="mt-1.5 space-y-1.5 pl-5">
+          <Block label="input" text={input || "(no input)"} />
+          {result && <Block label={isError ? "error" : "output"} text={output || "(no output)"} danger={isError} />}
+          <TruncationNote entry={entry} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ThinkingLine({ event }: { event: TaskEvent }) {
+  const [open, setOpen] = useState(false)
+  const text = str(event.payload.text)
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen((v) => !v)}
+      className="-ml-1 flex w-full items-start gap-1.5 rounded-md px-1 py-1 text-left text-[11px] italic leading-relaxed text-muted-foreground/80 transition-colors hover:bg-muted/50 hover:text-muted-foreground"
+    >
+      <BrainIcon className="mt-0.5 h-3 w-3 shrink-0" />
+      <span className="min-w-0">{open ? text : `${text.slice(0, 140)}${text.length > 140 ? "…" : ""}`}</span>
+    </button>
+  )
+}
+
+/** A run, unfolded in place: the same lines as before, indented under the row that summarised them. */
+export function ToolRunBody({
+  run,
+  attachmentUrl,
+  onOpenStack,
+}: {
+  run: ToolRun
+  attachmentUrl: AttachmentUrl
+  onOpenStack?: (seq: number) => void
+}) {
+  return (
+    <div className="mt-1 space-y-0.5 border-l border-border/60 pl-3">
+      {run.items.map((item) =>
+        item.kind === "tool" ? (
+          <ToolLine
+            key={item.entry.call.seq}
+            entry={item.entry}
+            attachmentUrl={attachmentUrl}
+            onOpenStack={onOpenStack}
+          />
+        ) : (
+          <ThinkingLine key={item.event.seq} event={item.event} />
+        ),
+      )}
+    </div>
+  )
+}
+
+// ── The stack ─────────────────────────────────────────────────────────────────────────────────
+
+/** A call in the stack, carrying the run it belonged to so the list can keep the turns apart. */
+export type StackedCall = ToolCall & { runIndex: number }
+
+function callStatus(entry: ToolCall): "running" | "error" | "done" {
+  if (!entry.result) return "running"
+  return bool(entry.result.payload.isError) ? "error" : "done"
+}
+
+const STATUS_DOT: Record<"running" | "error" | "done", string> = {
+  running: "bg-amber-500 animate-pulse",
+  error: "bg-destructive",
+  done: "bg-muted-foreground/40",
+}
+
+function StackRow({
+  entry,
+  selected,
+  onSelect,
+}: {
+  entry: StackedCall
+  selected: boolean
+  onSelect: () => void
+}) {
+  const name = str(entry.call.payload.name) || "tool"
+  const status = callStatus(entry)
+  const took = entry.result ? taskSpan(entry.call.ts, entry.result.ts) : null
+  const ref = useRef<HTMLButtonElement>(null)
+
+  // Keyboard navigation moves the selection, not the scroll — so the selection brings the scroll
+  // with it. `nearest` keeps the list still when the row is already visible, which is what makes
+  // arrowing through it feel like a list rather than a slideshow.
+  useEffect(() => {
+    if (selected) ref.current?.scrollIntoView({ block: "nearest" })
+  }, [selected])
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        "flex w-full items-center gap-2 border-l-2 px-3 py-1.5 text-left transition-colors",
+        selected ? "border-primary bg-primary/[0.07]" : "border-transparent hover:bg-muted/50",
+      )}
+    >
+      <span className={cn("h-1.5 w-1.5 shrink-0 rounded-full", STATUS_DOT[status])} />
+      <span className="shrink-0 text-muted-foreground">{VERB_ICON[toolVerb(name)]}</span>
+      <span className="min-w-0 flex-1">
+        <span className={cn("block truncate text-xs font-medium", status === "error" && "text-destructive")}>
+          {name}
+        </span>
+        <span className="block truncate font-mono text-[10px] text-muted-foreground">
+          {toolSubject(str(entry.call.payload.input))}
+        </span>
+      </span>
+      {took && <span className="shrink-0 font-mono text-[10px] text-muted-foreground/70 tabular-nums">{took}</span>}
+    </button>
+  )
+}
+
+function StackDetail({ entry, attachmentUrl }: { entry: StackedCall; attachmentUrl: AttachmentUrl }) {
+  const name = str(entry.call.payload.name) || "tool"
+  const input = str(entry.call.payload.input)
+  const result = entry.result
+  const isError = bool(result?.payload.isError)
+  const elapsed = useElapsed(result ? null : entry.call.ts)
+  const took = result ? taskSpan(entry.call.ts, result.ts) : null
+  const files = fileRefs(result?.payload.files)
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="shrink-0 border-b border-border px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground">{VERB_ICON[toolVerb(name)]}</span>
+          <span className={cn("text-sm font-medium", isError && "text-destructive")}>{name}</span>
+          <span className="ml-auto shrink-0 font-mono text-[10px] text-muted-foreground tabular-nums">
+            {took ?? elapsed ?? "running"}
+          </span>
+        </div>
+        <p className="mt-0.5 break-all font-mono text-[11px] text-muted-foreground">
+          {toolSubject(input) || "(no arguments)"}
+        </p>
+      </div>
+
+      <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
+        {/* Full height, not the timeline's 16rem clamp: the whole reason to be here is that the
+            folded row was not enough. */}
+        <Block label="input" text={pretty(input) || "(no input)"} className="[&_pre]:max-h-none" />
+        {result ? (
+          <Block
+            label={isError ? "error" : "output"}
+            text={str(result.payload.output) || "(no output)"}
+            danger={isError}
+            className="[&_pre]:max-h-none"
+          />
+        ) : (
+          <p className="text-[11px] text-muted-foreground">
+            Still running — a harness reports a tool&apos;s result once, when it finishes.
+          </p>
+        )}
+        {files.length > 0 && <TaskFiles files={files} attachmentUrl={attachmentUrl} />}
+        <TruncationNote entry={entry} />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Every tool call of the session, in one surface.
+ *
+ * Owned by the stream rather than by a row, on purpose: the timeline is virtualized, so the row
+ * you opened this from is unmounted the moment you scroll — a sheet living inside it would close
+ * itself. It is also the honest place for it, since what this shows is the *session's* stack, not
+ * one run's: opening it from a row only decides where it starts.
+ *
+ * Two panes on a screen that has the width, one at a time on a phone. `selected` survives the
+ * filter narrowing under it: a search that would hide the row you are reading leaves the detail
+ * alone rather than jumping you somewhere else.
+ */
+export function TaskToolStackSheet({
+  open,
+  onOpenChange,
+  calls,
+  initialSeq,
+  attachmentUrl,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  calls: StackedCall[]
+  /** Which call to land on. `null` opens on the last one — the newest thing that happened. */
+  initialSeq: number | null
+  attachmentUrl: AttachmentUrl
+}) {
+  const [query, setQuery] = useState("")
+  const [errorsOnly, setErrorsOnly] = useState(false)
+  const [selectedSeq, setSelectedSeq] = useState<number | null>(null)
+  const [detailOnPhone, setDetailOnPhone] = useState(false)
+
+  // Re-aimed on every open, so reopening from a different row lands where the reader clicked
+  // rather than where they last were.
+  useEffect(() => {
+    if (!open) return
+    setSelectedSeq(initialSeq ?? (calls.length > 0 ? calls[calls.length - 1].call.seq : null))
+    setDetailOnPhone(initialSeq !== null)
+    setQuery("")
+    setErrorsOnly(false)
+    // `calls` grows while a live session runs; re-aiming on that would fight the reader.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialSeq])
+
+  const failed = useMemo(() => calls.filter((c) => callStatus(c) === "error").length, [calls])
+
+  const shown = useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    return calls.filter((entry) => {
+      if (errorsOnly && callStatus(entry) !== "error") return false
+      if (!needle) return true
+      const name = str(entry.call.payload.name).toLowerCase()
+      const subject = toolSubject(str(entry.call.payload.input)).toLowerCase()
+      return name.includes(needle) || subject.includes(needle)
+    })
+  }, [calls, query, errorsOnly])
+
+  const selected = calls.find((entry) => entry.call.seq === selectedSeq) ?? null
+
+  const move = (delta: number) => {
+    if (shown.length === 0) return
+    const at = shown.findIndex((entry) => entry.call.seq === selectedSeq)
+    // A selection that the filter hid: the arrow keys bring you back into what is on screen.
+    const next = at === -1 ? (delta > 0 ? 0 : shown.length - 1) : Math.min(shown.length - 1, Math.max(0, at + delta))
+    setSelectedSeq(shown[next].call.seq)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        size="xl"
+        // Above `z-[120]`, because on a phone the conversation this opens from is itself a layer
+        // at that height (`TaskCockpitMobile`): at the sheet's default `z-50` the stack opened
+        // *behind* the timeline. Harmless on desktop, where nothing else is up there.
+        className="z-[130] gap-0 p-0"
+        backdropClassName="z-[130]"
+        onKeyDown={(event) => {
+          if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
+          event.preventDefault()
+          move(event.key === "ArrowDown" ? 1 : -1)
+        }}
+      >
+        <SheetHeader className="shrink-0 border-b border-border py-3 pr-12">
+          <SheetTitle className="flex items-center gap-2 text-sm font-medium">
+            <LayersIcon className="h-4 w-4 text-muted-foreground" />
+            Tool stack
+          </SheetTitle>
+          <p className="text-[11px] text-muted-foreground">
+            {plural(calls.length, "call")} in this session
+            {failed > 0 && <span className="text-destructive"> · {failed} failed</span>}
+            {/* Not on a phone, which has no arrow keys to offer. */}
+            <span className="hidden sm:inline">
+              {" · "}
+              <Kbd>↑</Kbd> <Kbd>↓</Kbd> to step through
+            </span>
+          </p>
+        </SheetHeader>
+
+        <div className="flex min-h-0 flex-1">
+          <div
+            className={cn(
+              "min-h-0 w-full shrink-0 flex-col border-border sm:flex sm:w-72 sm:border-r lg:w-80",
+              detailOnPhone ? "hidden" : "flex",
+            )}
+          >
+            <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
+              <SearchIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+              <input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Filter by tool or subject"
+                className="min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  const next = !errorsOnly
+                  setErrorsOnly(next)
+                  // Asking for the failures *is* asking to read one, so it lands on the first —
+                  // unlike typing in the filter, which narrows the list under a call the reader
+                  // is in the middle of reading and must leave it alone.
+                  if (next) {
+                    const firstError = calls.find((entry) => callStatus(entry) === "error")
+                    if (firstError) setSelectedSeq(firstError.call.seq)
+                  }
+                }}
+                title="Only the calls that failed"
+                className={cn(
+                  "shrink-0 rounded-md p-1 transition-colors",
+                  errorsOnly ? "bg-destructive/10 text-destructive" : "text-muted-foreground hover:bg-muted",
+                )}
+              >
+                <CircleSlashIcon className="h-3.5 w-3.5" />
+              </button>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-y-auto py-1">
+              {shown.length === 0 ? (
+                <p className="px-3 py-4 text-[11px] text-muted-foreground">Nothing matches.</p>
+              ) : (
+                shown.map((entry, index) => (
+                  <div key={entry.call.seq}>
+                    {/* The turn boundary, kept: a list of 120 calls with no seams reads as one
+                        undifferentiated blob, and the seam is exactly where the agent stopped to
+                        say something. */}
+                    {index > 0 && shown[index - 1].runIndex !== entry.runIndex && (
+                      <div className="my-1 border-t border-dashed border-border/70" />
+                    )}
+                    <StackRow
+                      entry={entry}
+                      selected={entry.call.seq === selectedSeq}
+                      onSelect={() => {
+                        setSelectedSeq(entry.call.seq)
+                        setDetailOnPhone(true)
+                      }}
+                    />
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+
+          <div className={cn("min-h-0 min-w-0 flex-1 flex-col sm:flex", detailOnPhone ? "flex" : "hidden")}>
+            {selected && (
+              <button
+                type="button"
+                onClick={() => setDetailOnPhone(false)}
+                className="flex shrink-0 items-center gap-1.5 border-b border-border px-3 py-2 text-[11px] text-muted-foreground sm:hidden"
+              >
+                <ArrowLeftIcon className="h-3 w-3" /> All calls
+              </button>
+            )}
+            {selected ? (
+              <StackDetail entry={selected} attachmentUrl={attachmentUrl} />
+            ) : (
+              <div className="flex flex-1 items-center justify-center p-6">
+                <p className="max-w-xs text-center text-xs leading-relaxed text-muted-foreground">
+                  This session has not called a tool yet — everything it does will land here.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+/** The way into the stack from the timeline's own chrome — the whole session, from anywhere in it. */
+export function TaskToolStackButton({ count, onClick }: { count: number; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+    >
+      <ListTreeIcon className="h-3 w-3" />
+      {plural(count, "call")}
+    </button>
+  )
+}