@spunto/design-system 0.27.0 → 0.30.0

package/src/components/tasks/event-stream.tsx

@@ -0,0 +1,860 @@
+"use client"
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import {
+  ArrowUpIcon,
+  BrainIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  CircleDotIcon,
+  CircleIcon,
+  FlagIcon,
+  LayersIcon,
+  ListChecksIcon,
+  Loader2Icon,
+  PlayIcon,
+  SparklesIcon,
+  UserIcon,
+  WrenchIcon,
+} from "lucide-react"
+
+import { cn } from "../../utils"
+import { AgentMarkdown, renderInlineMarkdown } from "./agent-markdown"
+import { TaskFiles, fileRefs } from "./task-attachments"
+import { useElapsed } from "./task-state"
+import {
+  type RunItem,
+  type StackedCall,
+  type ToolCall,
+  type ToolRun,
+  TaskToolStackButton,
+  TaskToolStackSheet,
+  ToolLine,
+  ToolRunBody,
+  runCalls,
+  runDuration,
+  runFiles,
+  runStats,
+  toolSubject,
+} from "./tool-stack"
+import type { AttachmentUrl, PendingMessage, TaskEvent } from "./types"
+
+/**
+ * The agent session, as it happens (RFC 0020) — the central panel of the task cockpit.
+ *
+ * The shape is a **timeline on a rail**, not a table of rows, and the two things on it are
+ * deliberately not equal:
+ *
+ *  - what the agent *said* is prose, rendered as markdown, at reading size. It is the only thing
+ *    here written for a human, so it gets the width and the weight.
+ *  - what it *did* — tools, thinking — is secondary, and a *run* of it is one row: a run of
+ *    twelve file reads scans as one movement ("read 12 files") instead of burying the sentence
+ *    that follows it. Unfolding a run gives back the dense per-call lines, each with the subject
+ *    of the call on it (the path, the command) rather than a JSON blob; `tool-stack.tsx`
+ *    holds all of that, plus the session-wide stack a reader can open at any time.
+ *
+ * Facts that are not events in time (cost, token counts) are not on the timeline at all; they
+ * belong to the sidebar, which is what a recap is for.
+ */
+
+const str = (v: unknown): string => (typeof v === "string" ? v : "")
+const bool = (v: unknown): boolean => v === true
+
+type Item =
+  /** `hideSummary` — see `useTimeline`: the end-of-session result is often the last message again. */
+  | { kind: "event"; event: TaskEvent; hideSummary?: boolean }
+  | { kind: "tool"; entry: ToolCall }
+  /** A chain of machinery, folded — see `tool-stack.tsx`. */
+  | { kind: "run"; run: ToolRun }
+
+/** A marker on the rail. `tone` is what carries meaning at a glance, so it stays a small set. */
+function Marker({
+  icon,
+  tone = "muted",
+}: {
+  icon: ReactNode
+  tone?: "muted" | "primary" | "success" | "danger" | "pending"
+}) {
+  return (
+    <span
+      className={cn(
+        "absolute left-0 top-0.5 flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full border bg-background",
+        tone === "primary" && "border-primary/40 bg-primary/10 text-primary",
+        tone === "success" && "border-green-500/40 bg-green-500/10 text-green-600 dark:text-green-500",
+        tone === "danger" && "border-destructive/40 bg-destructive/10 text-destructive",
+        tone === "pending" && "border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-500",
+        tone === "muted" && "text-muted-foreground",
+      )}
+    >
+      {icon}
+    </span>
+  )
+}
+
+function Entry({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("relative pb-4 pl-6", className)}>{children}</div>
+}
+
+/** A lone call, on the rail exactly as before: one of anything never needs a disclosure over it. */
+function ToolEntry({
+  entry,
+  attachmentUrl,
+  onOpenStack,
+}: {
+  entry: ToolCall
+  attachmentUrl: AttachmentUrl
+  onOpenStack: (seq: number) => void
+}) {
+  const result = entry.result
+  return (
+    <Entry className="pb-2">
+      <Marker
+        icon={<WrenchIcon className="h-3 w-3" />}
+        tone={bool(result?.payload.isError) ? "danger" : result ? "muted" : "pending"}
+      />
+      <ToolLine entry={entry} attachmentUrl={attachmentUrl} onOpenStack={onOpenStack} />
+    </Entry>
+  )
+}
+
+/**
+ * A chain of machinery as a single row — the answer to "twelve reads buried the sentence".
+ *
+ * Three things are on it, and the order is the order of the questions a reader has:
+ *
+ *  1. **what it amounts to** — verbs and counts, not "14 tool calls", because "read 8 files ·
+ *     ran 3 commands" is the same length and actually tells you what the agent was doing;
+ *  2. **what went wrong**, if anything — never folded away. A failure hidden behind a disclosure
+ *     is a failure the reader finds out about from the diff instead;
+ *  3. **what is happening right now**, while it is still going. A live run shows the call in
+ *     flight with its own clock rather than its summary: the summary of an unfinished chain is
+ *     the least interesting thing about it.
+ *
+ * Unfolding is local state and is never undone for the reader — a run that collapsed itself when
+ * the next tool landed would be a row that moves while you read it.
+ */
+function ToolRunEntry({
+  run,
+  attachmentUrl,
+  onOpenStack,
+}: {
+  run: ToolRun
+  attachmentUrl: AttachmentUrl
+  onOpenStack: (seq: number) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const stats = runStats(run)
+  const took = runDuration(run)
+  const running = stats.running
+  const elapsed = useElapsed(running ? running.call.ts : null)
+  const files = runFiles(run)
+
+  return (
+    <Entry className="pb-2">
+      <Marker
+        icon={<LayersIcon className="h-3 w-3" />}
+        tone={running ? "pending" : stats.failed > 0 ? "danger" : "muted"}
+      />
+      <div className="group/run 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/run:text-muted-foreground",
+              open && "rotate-90",
+            )}
+          />
+          <span className="shrink-0 text-xs font-medium">{run.items.length} steps</span>
+          {running ? (
+            <>
+              <span className="shrink-0 text-[11px] font-medium text-amber-600 dark:text-amber-500">
+                {str(running.call.payload.name) || "tool"}
+              </span>
+              <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted-foreground">
+                {toolSubject(str(running.call.payload.input))}
+              </span>
+            </>
+          ) : (
+            <span className="min-w-0 flex-1 truncate text-[11px] text-muted-foreground">{stats.label}</span>
+          )}
+          {stats.failed > 0 && (
+            <span className="shrink-0 rounded-full border border-destructive/30 bg-destructive/10 px-1.5 text-[10px] font-medium text-destructive">
+              {stats.failed} failed
+            </span>
+          )}
+          {running ? (
+            <span className="shrink-0 font-mono text-[10px] font-medium text-amber-600 tabular-nums dark:text-amber-500">
+              {elapsed ?? "running"}
+            </span>
+          ) : (
+            took && (
+              <span className="shrink-0 font-mono text-[10px] text-muted-foreground/70 tabular-nums">{took}</span>
+            )
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={() => onOpenStack(stats.calls[0].call.seq)}
+          title="Open the tool stack"
+          className="shrink-0 rounded-md p-1 text-muted-foreground/0 transition-colors max-sm:text-muted-foreground/60 group-hover/run:text-muted-foreground/60 hover:!text-foreground hover:bg-muted/60"
+        >
+          <LayersIcon className="h-3 w-3" />
+        </button>
+      </div>
+
+      {/* Only while folded: unfolded, each call draws its own, and both would be the same
+          thumbnails twice. */}
+      {!open && files.length > 0 && <TaskFiles files={files} attachmentUrl={attachmentUrl} className="pl-5" />}
+
+      {open && <ToolRunBody run={run} attachmentUrl={attachmentUrl} onOpenStack={onOpenStack} />}
+    </Entry>
+  )
+}
+
+function ThinkingEntry({ event }: { event: TaskEvent }) {
+  const [open, setOpen] = useState(false)
+  const text = str(event.payload.text)
+  return (
+    <Entry className="pb-2">
+      <Marker icon={<BrainIcon className="h-3 w-3" />} />
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="-ml-1 block w-full 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"
+      >
+        {open ? text : `${text.slice(0, 140)}${text.length > 140 ? "…" : ""}`}
+      </button>
+    </Entry>
+  )
+}
+
+const STEP_ICON: Record<string, ReactNode> = {
+  completed: <CheckIcon className="h-3 w-3 text-green-600 dark:text-green-500" />,
+  in_progress: <CircleDotIcon className="h-3 w-3 text-primary" />,
+}
+
+function PlanEntry({ event }: { event: TaskEvent }) {
+  const steps = Array.isArray(event.payload.steps) ? (event.payload.steps as Record<string, unknown>[]) : []
+  return (
+    <Entry>
+      <Marker icon={<ListChecksIcon className="h-3 w-3" />} tone="primary" />
+      <div className="rounded-lg border bg-card px-3 py-2">
+        <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Plan</p>
+        <ul className="mt-1.5 space-y-1">
+          {steps.map((step, i) => (
+            <li key={i} className="flex items-start gap-2 text-xs leading-5">
+              <span className="mt-0.5 shrink-0">
+                {STEP_ICON[str(step.status)] ?? <CircleIcon className="h-3 w-3 text-muted-foreground/40" />}
+              </span>
+              <span className={cn(str(step.status) === "completed" && "text-muted-foreground line-through")}>
+                {str(step.text)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Entry>
+  )
+}
+
+function MessageEntry({ event, attachmentUrl }: { event: TaskEvent; attachmentUrl: AttachmentUrl }) {
+  // What *you* said, set apart from what the agent said. Without this the timeline reads as one
+  // voice — and a harness does not echo its own stdin, so these lines exist only because the
+  // platform wrote them down (see `appendPlatformEvent`).
+  const mine = str(event.payload.role) === "user"
+  const files = fileRefs(event.payload.files)
+  return (
+    <Entry>
+      <Marker icon={mine ? <UserIcon className="h-3 w-3" /> : <SparklesIcon className="h-3 w-3" />} tone="primary" />
+      {mine ? (
+        <div className="rounded-lg border border-primary/25 bg-primary/[0.06] px-3 py-2">
+          <p className="whitespace-pre-wrap break-words text-sm leading-6">
+            {renderInlineMarkdown(str(event.payload.text), `m${event.seq}`)}
+          </p>
+          {/* Inside the bubble: they were part of what you said, not an annex to it. */}
+          <TaskFiles files={files} attachmentUrl={attachmentUrl} />
+        </div>
+      ) : (
+        <>
+          <AgentMarkdown text={str(event.payload.text)} />
+          <TaskFiles files={files} attachmentUrl={attachmentUrl} />
+        </>
+      )}
+      {bool(event.payload.truncated) && (
+        <p className="mt-1 text-[10px] text-muted-foreground">Clipped to the 8 KiB kept per field.</p>
+      )}
+    </Entry>
+  )
+}
+
+function BoundaryEntry({ event, hideSummary = false }: { event: TaskEvent; hideSummary?: boolean }) {
+  const started = event.type === "session.started"
+  const ok = str(event.payload.status) === "succeeded"
+  const detail = started
+    ? [str(event.payload.harness), str(event.payload.model), str(event.payload.cwd)].filter(Boolean).join(" · ")
+    : str(event.payload.stopReason)
+
+  return (
+    <Entry>
+      <Marker
+        icon={started ? <PlayIcon className="h-3 w-3" /> : <FlagIcon className="h-3 w-3" />}
+        tone={started ? "primary" : ok ? "success" : "danger"}
+      />
+      <p className="text-xs font-medium">
+        {started ? "Session started" : ok ? "Session finished" : "Session failed"}
+      </p>
+      {detail && <p className="mt-0.5 font-mono text-[11px] text-muted-foreground">{detail}</p>}
+      {!started && !hideSummary && str(event.payload.summary) && (
+        <div className="mt-2 rounded-lg border border-primary/20 bg-primary/[0.04] px-3 py-2">
+          <p className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Result</p>
+          <AgentMarkdown text={str(event.payload.summary)} />
+        </div>
+      )}
+    </Entry>
+  )
+}
+
+function PendingEntry({ text, previews = [] }: { text: string; previews?: string[] }) {
+  return (
+    <Entry>
+      <Marker icon={<UserIcon className="h-3 w-3" />} tone="muted" />
+      <div className="rounded-lg border border-dashed bg-muted/30 px-3 py-2">
+        <p className="whitespace-pre-wrap break-words text-sm leading-6 text-muted-foreground">
+          {renderInlineMarkdown(text, "pending")}
+        </p>
+        {previews.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-2">
+            {previews.map((src) => (
+              <img key={src} src={src} alt="" className="max-h-24 rounded-md border opacity-70" />
+            ))}
+          </div>
+        )}
+        <p className="mt-1 flex items-center gap-1.5 text-[10px] text-muted-foreground">
+          <span className="h-1 w-1 animate-pulse rounded-full bg-muted-foreground" />
+          sending…
+        </p>
+      </div>
+    </Entry>
+  )
+}
+
+function WorkingEntry() {
+  return (
+    <Entry className="pb-0">
+      <Marker icon={<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />} tone="primary" />
+      <p className="pt-1 text-[11px] text-muted-foreground">working…</p>
+    </Entry>
+  )
+}
+
+/**
+ * How many tool calls in a row it takes before folding them is worth a disclosure.
+ *
+ * Two, because the row a fold replaces says strictly more than one call's line did (it counts,
+ * it totals, it keeps a failure visible) — but for a *single* call it would say less, behind one
+ * more click. Below the threshold nothing changes from what the timeline always drew.
+ */
+const RUN_THRESHOLD = 2
+
+/**
+ * Fold the flat event list into what the timeline draws: tool results merged into their call,
+ * consecutive machinery gathered into runs, and `raw` set aside. A rendering decision, so it
+ * happens here — the stored stream stays flat.
+ */
+function useTimeline(events: TaskEvent[]) {
+  return useMemo(() => {
+    const flat: Item[] = []
+    const byCallId = new Map<string, ToolCall>()
+    const raw: TaskEvent[] = []
+    let lastMessage = ""
+
+    for (const event of events) {
+      if (event.type === "raw" || event.type === "usage" || event.type === "session.title") {
+        // `usage` is a fact about the whole session, not a moment in it — the sidebar shows it.
+        // `session.title` is the same kind of fact: the name the session gave itself, already
+        // read at the top of the page as the task's own title.
+        if (event.type === "raw") raw.push(event)
+        continue
+      }
+      if (event.type === "tool.call") {
+        const entry: ToolCall = { call: event }
+        const id = str(event.payload.callId)
+        if (id) byCallId.set(id, entry)
+        flat.push({ kind: "tool", entry })
+        continue
+      }
+      if (event.type === "tool.result") {
+        const entry = byCallId.get(str(event.payload.callId))
+        // A result whose call we never saw (ingestion that started mid-session) still gets a
+        // line: dropping it would hide a tool failure.
+        if (entry) entry.result = event
+        else flat.push({ kind: "tool", entry: { call: event, result: event } })
+        continue
+      }
+      // Only the agent's own words: the end-of-session summary can duplicate what it just said,
+      // never what you said.
+      if (event.type === "message" && str(event.payload.role) !== "user") {
+        lastMessage = str(event.payload.text).trim()
+      }
+      if (event.type === "session.ended") {
+        // Claude Code's `result` is its final assistant turn verbatim, so the end block would
+        // reprint the message right above it — twice the same paragraphs, which reads as a bug.
+        // Suppressed only when they actually match: a harness whose summary says something else
+        // still gets its own block.
+        const summary = str(event.payload.summary).trim()
+        flat.push({ kind: "event", event, hideSummary: summary !== "" && summary === lastMessage })
+        continue
+      }
+      flat.push({ kind: "event", event })
+    }
+
+    // ── Second pass: gather consecutive machinery ─────────────────────────────────────────
+    //
+    // A run ends at anything a human wrote or the agent said — a message, a plan, a session
+    // boundary. Which is the right seam by construction: those are the moments the agent stopped
+    // working to report, so what sits between two of them *is* one stretch of work.
+    const items: Item[] = []
+    let buffer: RunItem[] = []
+
+    const flush = () => {
+      if (buffer.length === 0) return
+      const tools = buffer.filter((item) => item.kind === "tool").length
+      if (tools >= RUN_THRESHOLD) items.push({ kind: "run", run: { items: buffer } })
+      else
+        for (const item of buffer)
+          items.push(item.kind === "tool" ? { kind: "tool", entry: item.entry } : { kind: "event", event: item.event })
+      buffer = []
+    }
+
+    for (const item of flat) {
+      if (item.kind === "tool") {
+        buffer.push({ kind: "tool", entry: item.entry })
+        continue
+      }
+      if (item.kind === "event" && item.event.type === "thinking") {
+        buffer.push({ kind: "thinking", event: item.event })
+        continue
+      }
+      flush()
+      items.push(item)
+    }
+    flush()
+
+    // Every call of the session, in order, tagged with the stretch it came from — what the stack
+    // sheet reads. Built here because this is where the stretches are known; deriving it a second
+    // time from the events would be a second grouping rule to keep in step with this one.
+    const calls: StackedCall[] = []
+    let runIndex = 0
+    for (const item of items) {
+      if (item.kind === "tool") calls.push({ ...item.entry, runIndex: runIndex++ })
+      else if (item.kind === "run") {
+        for (const entry of runCalls(item.run)) calls.push({ ...entry, runIndex })
+        runIndex += 1
+      }
+    }
+
+    return { items, raw, calls }
+  }, [events])
+}
+
+
+
+/** What the virtualizer actually renders — the timeline's items, plus the two rows that are not
+ *  events at all: the reader's own message before it lands, and the "still working" pulse. */
+type Row = Item | { kind: "pending"; text: string; previews?: string[] } | { kind: "working" }
+
+/** Content-derived, never the row's index — the index shifts every time older history is
+ *  prepended, and the virtualizer needs a stable key to keep the reader's scroll position across
+ *  that prepend (see the tanstack-virtual chat guide). `seq` is dense and unique per task, so a
+ *  tool entry's own call (or the orphaned result standing in for it) is already enough. */
+function rowKey(row: Row): string | number {
+  if (row.kind === "tool") return row.entry.call.seq
+  if (row.kind === "run") return row.run.items[0].kind === "tool" ? row.run.items[0].entry.call.seq : row.run.items[0].event.seq
+  if (row.kind === "event") return row.event.seq
+  return row.kind
+}
+
+function Row({
+  row,
+  attachmentUrl,
+  onOpenStack,
+}: {
+  row: Row
+  attachmentUrl: AttachmentUrl
+  onOpenStack: (seq: number) => void
+}) {
+  if (row.kind === "pending") return <PendingEntry text={row.text} previews={row.previews} />
+  if (row.kind === "working") return <WorkingEntry />
+  if (row.kind === "run")
+    return <ToolRunEntry run={row.run} attachmentUrl={attachmentUrl} onOpenStack={onOpenStack} />
+  if (row.kind === "tool")
+    return <ToolEntry entry={row.entry} attachmentUrl={attachmentUrl} onOpenStack={onOpenStack} />
+  if (row.event.type === "thinking") return <ThinkingEntry event={row.event} />
+  if (row.event.type === "plan") return <PlanEntry event={row.event} />
+  if (row.event.type === "message") return <MessageEntry event={row.event} attachmentUrl={attachmentUrl} />
+  return <BoundaryEntry event={row.event} hideSummary={row.hideSummary} />
+}
+
+/** How close to the end still counts as "following" — both for the virtualizer's own
+ *  follow-on-append and for the "Jump to latest" button's visibility. */
+const SCROLL_END_THRESHOLD = 48
+
+/**
+ * How far above the top of the loaded history the next page starts loading, as a multiple of the
+ * viewport — two screens of runway, floored so a short panel (a phone, the cockpit's sidebar)
+ * still gets a useful head start.
+ *
+ * The number is the whole trick behind "it just keeps going": at two screens, a reader flicking
+ * upward at ~1400 px/s (measured against a 700-event fixture) reaches the top of what they had
+ * about a second after the next page was asked for — long enough for it to have landed, on a
+ * connection far worse than this one. Firing at the top itself would be correct and would still
+ * feel like a stall, which is what the button it replaces felt like, minus the click.
+ */
+const PREFETCH_SCREENS = 2
+const MIN_PREFETCH_DISTANCE = 400
+
+export interface TaskEventStreamProps {
+  /** The loaded part of the session, oldest first — the tail on open, older pages prepended. */
+  events: TaskEvent[]
+  /** The project's `taskAgentProtocol`. `none` → the session isn't captured, say so. */
+  protocol: string
+  /** How to reach the bytes of a file an event references (RFC 0022). */
+  attachmentUrl: AttachmentUrl
+  /** The task can still move (queued, running, in review) — drives "live" and "working…". */
+  live: boolean
+  /** Whether older history exists before what is loaded. */
+  hasMore?: boolean
+  loadingOlder?: boolean
+  /** The last attempt at older history failed. Turns the automatic load back into a manual retry. */
+  olderError?: boolean
+  /** Asked for by the stream itself as the reader scrolls toward the top. Must be idempotent while in flight. */
+  onLoadOlder?: () => void
+  /** The reader's own message, drawn until its event lands. */
+  pending?: PendingMessage | null
+  /**
+   * Drawn instead of the default sentence when there is nothing to show yet. A task that has no
+   * session *because its machine is still being built* has plenty to say — it just isn't the
+   * stream's to say, so the cockpit hands it in.
+   */
+  emptyState?: ReactNode
+  /**
+   * Rendered where the panel's own title would be. The cockpit puts the Session/Diff switch there
+   * rather than stacking a second bar on top: two strips of chrome above a transcript is one too
+   * many, and the title was only ever saying which panel you are on.
+   */
+  tabs?: ReactNode
+  className?: string
+}
+
+export function TaskEventStream({
+  events,
+  protocol,
+  attachmentUrl,
+  live,
+  hasMore = false,
+  loadingOlder = false,
+  olderError = false,
+  onLoadOlder = () => {},
+  pending = null,
+  emptyState,
+  tabs,
+  className,
+}: TaskEventStreamProps) {
+  const { items, raw, calls } = useTimeline(events)
+  const [showRaw, setShowRaw] = useState(false)
+  const parentRef = useRef<HTMLDivElement>(null)
+  const count = events.length
+
+  // The stack sheet is owned here rather than by the row it is opened from: the list is
+  // virtualized, so that row is unmounted the moment the reader scrolls, taking its sheet with
+  // it. `seq` is only where it lands — what it shows is the whole session either way.
+  const [stack, setStack] = useState<{ open: boolean; seq: number | null }>({ open: false, seq: null })
+  const openStack = useCallback((seq: number | null) => setStack({ open: true, seq }), [])
+
+  // An interactive session does not exit between turns, so the task can still read `running`
+  // after the agent has handed back — until something reads the stream. The stream itself knows
+  // about its own end, and says so without waiting for the task row to catch up.
+  const streaming = live && !events.some((e) => e.type === "session.ended")
+
+  // Derived, never cleared: the optimistic bubble disappears exactly when its own event lands.
+  // Storing "is it still pending?" as state would mean an effect to clear it — a cascade of
+  // renders per poll, and a second source of truth to keep in step with the first.
+  const stillPending =
+    pending !== null &&
+    !events.some(
+      (e) =>
+        e.type === "message" &&
+        str(e.payload.role) === "user" &&
+        str(e.payload.text) === pending.text &&
+        e.seq > pending.sinceSeq,
+    )
+
+  // The two rows that are not events at all, appended so they scroll and anchor like every other
+  // row instead of living outside the virtualizer's own height accounting.
+  const rows: Row[] = useMemo(() => {
+    const list: Row[] = items
+    const extra: Row[] = []
+    if (stillPending) extra.push({ kind: "pending", text: pending!.text, previews: pending!.previews })
+    if (streaming) extra.push({ kind: "working" })
+    return extra.length > 0 ? [...list, ...extra] : list
+  }, [items, stillPending, pending, streaming])
+
+  // ── Scrolling, the way a terminal does ────────────────────────────────────────────────
+  //
+  // Two rules, and the second is the one that makes it feel right rather than merely automatic:
+  //
+  //  1. **Open at the bottom.** A conversation's newest turn is the one you came for — which is
+  //     also why the cockpit opens this stream on its *tail* rather than its start (see
+  //     the app's events hook). Jumping there instantly (no smooth scroll) on the first paint is what a
+  //     terminal does; animating it would just be a long distraction on a session with hundreds
+  //     of events.
+  //  2. **Follow only while stuck to the bottom.** The moment the reader scrolls up — to re-read
+  //     a tool result — following would yank the view away every two seconds. `anchorTo: "end"`
+  //     plus `followOnAppend` is tanstack-virtual's own answer to exactly this (its chat guide is
+  //     written for this shape of list): it keeps pinning new rows to the bottom while the reader
+  //     is there, and leaves the scroll position alone — even across a prepend from `onLoadOlder`
+  //     — the moment they are not.
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 64,
+    getItemKey: (index) => rowKey(rows[index]),
+    anchorTo: "end",
+    followOnAppend: true,
+    scrollEndThreshold: SCROLL_END_THRESHOLD,
+    overscan: 8,
+  })
+
+  const firstPaint = useRef(true)
+  useLayoutEffect(() => {
+    if (rows.length === 0 || !firstPaint.current) return
+    firstPaint.current = false
+    virtualizer.scrollToEnd({ behavior: "instant" })
+  }, [rows.length, virtualizer])
+
+  /**
+   * Has the opening jump *landed*? Until it has, the container is still at offset 0 — which is to
+   * say sitting on the top sentinel — and arming the observer there reads "the reader is at the
+   * start of the history" off a view that has not been positioned yet. Measured: it pages
+   * backwards once, immediately, on every open.
+   *
+   * Asking the DOM rather than trusting the call above, because the call above is not the moment:
+   * the virtualizer lands `scrollToEnd` across the following frames, re-aligning as rows measure
+   * for real. `scrollTop > 0` is that landing, observed. A stream short enough not to scroll at
+   * all never gets one — and needs no gate either: its sentinel is honestly on screen, and
+   * filling the viewport is the right answer.
+   *
+   * In dev only, Strict Mode's second mount hands the container back at offset 0 before the
+   * virtualizer re-lands it, so one extra page is read on open. Nothing to gate: at that instant
+   * the view really is at the top of what is loaded. It does not happen in a production build.
+   */
+  const [opened, setOpened] = useState(false)
+  useEffect(() => {
+    const root = parentRef.current
+    if (opened || !root || rows.length === 0) return
+    const landed = () => {
+      if (root.scrollTop > 0 || root.scrollHeight <= root.clientHeight + 1) setOpened(true)
+    }
+    landed()
+    root.addEventListener("scroll", landed, { passive: true })
+    return () => root.removeEventListener("scroll", landed)
+  }, [opened, rows.length])
+
+  // ── Paging backwards, without a button ───────────────────────────────────────────────
+  //
+  // A sentinel at the top of the loaded history plus an IntersectionObserver, which is what the
+  // shape asks for: the alternative is a scroll handler doing the same arithmetic on every frame
+  // of a fast flick, and the observer already knows the answer. `rootMargin` is what turns "the
+  // reader hit the top" into "the reader is about to" — see `PREFETCH_SCREENS`.
+  //
+  // Three details keep it from being either a dead end or a request loop, and all three are
+  // load-bearing:
+  //
+  //  * `loadingOlder` is a **dependency**, not a guard. An observer only reports *changes* in
+  //    intersection, so a sentinel that never left the margin would fire once and go quiet —
+  //    stranding a reader who is still scrolling up. Re-arming after each page delivers a fresh
+  //    initial reading instead: still in the margin, load the next one; out of it, wait.
+  //  * `onLoadOlder` is read through a ref, so re-rendering (twice a second, while live) does not
+  //    tear the observer down and re-arm it with it.
+  //  * `hasMore` and `olderError` stop it — at the start of the session, or on a page that failed.
+  const topRef = useRef<HTMLDivElement>(null)
+  const loadOlderRef = useRef(onLoadOlder)
+  useEffect(() => {
+    loadOlderRef.current = onLoadOlder
+  })
+  useEffect(() => {
+    const root = parentRef.current
+    const sentinel = topRef.current
+    if (!root || !sentinel || !opened || !hasMore || olderError || loadingOlder) return
+    const runway = Math.max(MIN_PREFETCH_DISTANCE, Math.round(root.clientHeight * PREFETCH_SCREENS))
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) loadOlderRef.current()
+      },
+      { root, rootMargin: `${runway}px 0px 0px 0px` },
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [opened, hasMore, olderError, loadingOlder])
+
+  const empty = protocol === "none" || count === 0
+  // Only while there is something to come back to: on a finished session the reader scrolling up
+  // is just reading, not falling behind.
+  const showJumpToLatest = streaming && rows.length > 0 && !virtualizer.isAtEnd(SCROLL_END_THRESHOLD)
+
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-card px-4 py-2">
+        {tabs ?? <h2 className="text-xs font-medium">Session</h2>}
+        {streaming ? (
+          <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
+            live
+          </span>
+        ) : (
+          count > 0 && (
+            <span className="text-[11px] text-muted-foreground">
+              {hasMore ? `last ${count} events` : `${count} events`}
+            </span>
+          )
+        )}
+        {/* The session's machinery, from anywhere in it — including from a spot where the run
+            that made the call you are chasing is a thousand rows up. */}
+        {calls.length > 0 && (
+          <div className="ml-auto">
+            <TaskToolStackButton count={calls.length} onClick={() => openStack(null)} />
+          </div>
+        )}
+        {raw.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setShowRaw((v) => !v)}
+            className={cn(
+              "text-[11px] text-muted-foreground transition-colors hover:text-foreground",
+              calls.length === 0 && "ml-auto",
+            )}
+          >
+            {showRaw ? "Hide" : "Show"} {raw.length} unmapped
+          </button>
+        )}
+      </div>
+
+      <div ref={parentRef} className="relative min-h-0 flex-1 overflow-y-auto px-5 py-4 md:px-8">
+        {empty && emptyState ? (
+          emptyState
+        ) : empty ? (
+          <div className="flex h-full items-center justify-center">
+            <p className="max-w-sm text-center text-xs leading-relaxed text-muted-foreground">
+              {protocol === "none" ? (
+                <>
+                  This project doesn&apos;t capture its agent session. Set{" "}
+                  <span className="font-mono">Session stream</span> in its delegated-work settings to watch the work as
+                  it happens.
+                </>
+              ) : live ? (
+                "Waiting for the session's first event…"
+              ) : (
+                "The session produced no readable events."
+              )}
+            </p>
+          </div>
+        ) : (
+          <>
+            {/* The head of the loaded history, and the observer's sentinel.
+                Always drawn, and always the **same height**, whichever of its three things it is
+                saying. A block that appears or disappears up here changes the distance between
+                the top of the scroll content and every row below it, which is exactly the
+                measurement the virtualizer anchors a prepend against — so a zone that collapsed
+                when history ran out would pay for its own tidiness with the one visible jump this
+                whole mechanism exists to avoid. */}
+            <div ref={topRef} className="mx-auto mb-3 flex h-7 max-w-3xl items-center justify-center">
+              {!hasMore ? (
+                <span className="text-[11px] text-muted-foreground/60">Beginning of the session</span>
+              ) : olderError ? (
+                <button
+                  type="button"
+                  onClick={onLoadOlder}
+                  className="rounded-full border border-dashed px-3 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted/50"
+                >
+                  Couldn&apos;t load earlier messages — retry
+                </button>
+              ) : (
+                // Reached on its own in the normal case, so this is mostly a status line. It stays
+                // a button for the reader the observer cannot serve: no pointer, a scroll that
+                // never fires it, or simply a wish to go faster than the runway.
+                <button
+                  type="button"
+                  onClick={onLoadOlder}
+                  disabled={loadingOlder}
+                  className="flex items-center gap-1.5 rounded-full px-3 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted/50 disabled:hover:bg-transparent"
+                >
+                  {loadingOlder ? (
+                    <>
+                      <Loader2Icon className="h-3 w-3 animate-spin" />
+                      Loading earlier messages…
+                    </>
+                  ) : (
+                    <>
+                      <ArrowUpIcon className="h-3 w-3" />
+                      Load earlier messages
+                    </>
+                  )}
+                </button>
+              )}
+            </div>
+
+            <div className="relative mx-auto max-w-3xl" style={{ height: virtualizer.getTotalSize() }}>
+              {/* The rail. Stops at the last marker rather than the container's edge, so a
+                  finished session doesn't trail a line into nothing. */}
+              <span className="absolute bottom-4 left-0 top-2 w-px bg-border" aria-hidden />
+              {virtualizer.getVirtualItems().map((virtualRow) => (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  className="absolute left-0 top-0 w-full"
+                  style={{ transform: `translateY(${virtualRow.start}px)` }}
+                >
+                  <Row row={rows[virtualRow.index]} attachmentUrl={attachmentUrl} onOpenStack={openStack} />
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        {showJumpToLatest && (
+          <button
+            type="button"
+            onClick={() => virtualizer.scrollToEnd({ behavior: "smooth" })}
+            className="sticky bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full border bg-background/95 px-3 py-1 text-[11px] shadow-sm backdrop-blur transition-colors hover:bg-muted"
+          >
+            Jump to latest ↓
+          </button>
+        )}
+
+        {showRaw && raw.length > 0 && (
+          <div className="mx-auto mt-4 max-w-3xl">
+            <p className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+              Unmapped events
+            </p>
+            <pre className="max-h-64 overflow-auto rounded-md border bg-muted/40 px-2.5 py-1.5 font-mono text-[10px] leading-relaxed whitespace-pre-wrap break-words">
+              {raw.map((e) => JSON.stringify(e.payload)).join("\n")}
+            </pre>
+          </div>
+        )}
+      </div>
+
+      <TaskToolStackSheet
+        open={stack.open}
+        onOpenChange={(open) => setStack((prev) => ({ ...prev, open }))}
+        calls={calls}
+        initialSeq={stack.seq}
+        attachmentUrl={attachmentUrl}
+      />
+    </div>
+  )
+}