char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte Somadd timestamps to transcript51471732026-10-26

import type {
  AssistantMessage,
  ImageContent,
  SystemMessage,
  ToolResultMessage,
  UserMessage,
} from "@earendil-works/pi-ai";
import {
  getCurrentSystemMessage,
  getToolStateChanges,
} from "@earendil-works/pi-ai/utils/transcript";
import type {
  AgentState,
  ConversationView,
  EntryRecord,
  LiveState,
} from "@earendil-works/pi-durable";
import type { JsonValue } from "@berry/api";
import type { ShellExecution } from "@berry/api/shell.ts";
import type { CallStatus, ToolCall, ToolRenderer, ToolView } from "@berry/api/web.ts";
import { code } from "./code.tsx";
import { markdown, markdownView } from "./markdown.ts";
import { toolRenderer } from "./renderers.ts";
import { event } from "./event.tsx";
import { isImageResult, toolResult } from "./tool-result.ts";
import { type Handle, json, keyed, Scope } from "./ui.ts";
import { watch } from "./client.ts";
import { scroller, type Viewport } from "./scroller.tsx";

type Block = AssistantMessage["content"][number];
type ToolCallBlock = Extract<Block, { type: "toolCall" }>;
type NestedCall = {
  name: string;
  extension: string;
  args: JsonValue;
  status: "running" | "ok" | "error" | "cancelled";
  startedAt?: number;
  durationMs?: number;
  output?: string;
  details?: JsonValue;
  value?: JsonValue;
  error?: string;
};

const EMPTY: readonly never[] = [];
const IDLE: LiveState = {};
const textOf = (content: readonly { type: string; text?: string }[]) =>
  content
    .flatMap((block) => block.type === "text" && block.text ? [block.text] : [])
    .join("\n");

const userText = ({ content }: UserMessage) =>
  typeof content === "string" ? content : textOf(content);

/** Give an element its text, hiding it while there is none. */
function show(element: HTMLElement, text: string) {
  if (element.textContent === text) return;
  element.textContent = text;
  element.hidden = text === "";
}

/**
 * How a card shows its body until the reader opens it: a `preview`, cut at a height; or `closed`, its header alone,
 * as a script's calls are, whose output tells what they did.
 */
type Rest = "preview" | "closed";

/** `250ms`, `12s`, `3m 07s`, `1h 02m`. */
function duration(ms: number): string {
  if (ms < 1000) return `${Math.floor(ms)}ms`;
  const seconds = Math.floor(ms / 1000);
  const minutes = Math.floor(seconds / 60);
  if (minutes === 0) return `${seconds}s`;
  if (minutes < 60) {
    return `${minutes}m ${String(seconds % 60).padStart(2, "0")}s`;
  }
  return `${Math.floor(minutes / 60)}h ${String(minutes % 60).padStart(2, "0")}m`;
}

// one observer for every card, rather than one each; every card measures before any lays itself out again, so that
// the page lays out once rather than once a card
const measures = new Map<Element, () => (() => void) | undefined>();
const resizes = new ResizeObserver((entries) => {
  const layouts = entries.map(({ target }) => measures.get(target)?.());
  for (const layout of layouts) layout?.();
});

type Card = Handle<ToolCall> & {
  update(call: ToolCall): void;
  dispose(): void;
};

function cardFrame(
  heading: Element[],
  content: HTMLElement,
  initial: Rest | "open" = "preview",
  /** Called whenever it shows its body, which may build it. */
  reveal = () => {},
) {
  const rest = initial === "open" ? "closed" : initial;
  let view: Rest | "open" = initial;
  let overflowing = false;

  const header = (
    <button
      type="button"
      class="tool-header"
      _onclick={() => {
        view = view === "open" ? rest : "open";
        layout();
      }}
    >
      {heading}
    </button>
  ) as HTMLElement;
  const blur = (
    <div class="tool-blur" aria-hidden="true">
      {[0, 1, 2, 3].map(() => <span />)}
    </div>
  ) as HTMLElement;
  const more = (
    <button
      type="button"
      class="tool-more"
      _onclick={(event) => {
        view = "open";
        layout();
        if (event.detail === 0) header.focus();
      }}
    >
      show all
    </button>
  ) as HTMLElement;
  const less = (
    <button
      type="button"
      class="tool-less"
      _onclick={() => {
        view = rest;
        layout();
        header.focus();
      }}
    >
      show less
    </button>
  ) as HTMLElement;
  const preview = (
    <div class="tool-preview">
      {content}
      {blur}
      {more}
    </div>
  ) as HTMLElement;
  const element = (
    <div class="tool">
      {header}
      {preview}
      {less}
    </div>
  ) as HTMLElement;

  function layout() {
    if (view !== "closed") reveal();
    element.dataset.view = view;
    element.dataset.overflowing = String(overflowing);
    header.setAttribute(
      "aria-expanded",
      String(view === "open" || (view === "preview" && !overflowing)),
    );
    more.hidden = view !== "preview" || !overflowing;
    less.hidden = view !== "open";
    blur.hidden = more.hidden;
    content.inert = !more.hidden;
  }
  const measure = () => {
    const next = content.offsetHeight > preview.clientHeight + 1;
    if (next === overflowing) return;
    return () => {
      overflowing = next;
      layout();
    };
  };

  layout();
  for (const observed of [content, preview]) {
    measures.set(observed, measure);
    resizes.observe(observed);
  }
  return {
    element,
    expand() {
      view = "open";
      layout();
    },
    dispose() {
      for (const observed of [content, preview]) {
        resizes.unobserve(observed);
        measures.delete(observed);
      }
    },
  };
}

function card(
  call: ToolCall,
  renderer: ToolRenderer | undefined,
  makeBody: () => ToolView = () => renderer?.body?.() ?? defaultBody(),
  initial: Rest | "open" = renderer?.initial ?? "preview",
): Card {
  let shown: ToolCall | null = null;
  let ticking: ReturnType<typeof setInterval> | undefined;
  const summary = <span class="tool-summary" /> as HTMLElement;
  const time = <span class="tool-time" hidden /> as HTMLElement;
  const status = <span class="tool-status" /> as HTMLElement;
  const images = <div class="tool-images" />;
  const gallery = keyed<ImageContent, number>(
    images,
    (_, index) => index,
    (image, index) => {
      const element = (
        <img
          class="image"
          alt={`${call.name} image result ${index + 1}`}
          loading="lazy"
        />
      ) as HTMLImageElement;
      const update = (next: ImageContent) => {
        element.src = `data:${next.mimeType};base64,${next.data}`;
      };
      update(image);
      return { node: element, update };
    },
  );
  const content = <div>{images}</div> as HTMLElement;
  // a card resting closed builds its body the first time it opens
  let body: ToolView | null = null;
  const build = () => {
    if (body) return;
    body = makeBody();
    content.prepend(body.element);
    if (shown === null) return;
    body.update(shown);
    gallery.sync(shown.images ?? EMPTY);
  };
  const frame = cardFrame(
    [<span class="tool-name">{call.name}</span>, summary, time, status],
    content,
    initial,
    build,
  );
  // a running call's time ticks; an ended one keeps how long it took, where that is known
  const tick = () => {
    const { status, startedAt, durationMs } = shown!;
    const ms = status === "running" && startedAt !== null ? Date.now() - startedAt : durationMs;
    const timeout = renderer?.timeout?.(shown!.args) ?? null;
    const elapsed = ms === null ? "" : duration(Math.max(0, ms));
    show(time, elapsed && timeout !== null ? `${elapsed}/${duration(timeout * 1000)}` : elapsed);
  };

  function update(next: ToolCall) {
    const previous = shown;
    const keys = Object.keys(next) as (keyof ToolCall)[];
    if (previous !== null && keys.every((key) => next[key] === previous[key])) {
      return;
    }
    shown = next;
    if (next.args !== previous?.args) {
      summary.textContent = renderer?.summary?.(next.args) ?? "";
    }
    const outcome = next.status === "ok" ? renderer?.outcome?.(next) ?? null : null;
    const state = outcome === null ? next.status : "error";
    status.textContent = outcome ?? next.status;
    if (next.status !== previous?.status) {
      if (next.status === "running") ticking ??= setInterval(tick, 100);
      else {
        clearInterval(ticking);
        ticking = undefined;
      }
    }
    if (state !== frame.element.dataset.status) {
      frame.element.dataset.status = state;
      // a failure shows in full, unless the card rests closed: then its header says it failed
      if (state === "error" && initial === "preview") frame.expand();
    }
    tick();
    if (body === null) return;
    body.update(next);
    gallery.sync(next.images ?? EMPTY);
  }

  update(call);
  return {
    node: frame.element,
    update,
    dispose() {
      clearInterval(ticking);
      frame.dispose();
      gallery.dispose();
      body?.dispose?.();
    },
  };
}

function defaultBody(): ToolView {
  const sections = [
    [
      "args",
      (c: ToolCall) => c.args === null || json(c.args) === "{}" ? "" : json(c.args),
    ],
    ["output", (c: ToolCall) => c.output ?? ""],
    [
      "result",
      (c: ToolCall) =>
        c.result === null || isImageResult(c.result)
          ? ""
          : typeof c.result === "string"
          ? c.result
          : json(c.result),
    ],
    ["error", (c: ToolCall) => c.error ?? ""],
  ] as const;
  const pres = sections.map(([name, pick]) => ({
    pick,
    pre: <pre class={name} hidden /> as HTMLElement,
  }));
  return {
    element: <div class="tool-body">{pres.map(({ pre }) => pre)}</div>,
    update(call) {
      for (const { pick, pre } of pres) show(pre, pick(call));
    },
  };
}

const SUBAGENT: ToolRenderer = {
  initial: "open",
  summary: (args) => (args as { task?: string } | null)?.task ?? null,
  body() {
    const link = <a class="tid" hidden>open subagent</a> as HTMLAnchorElement;
    const model = <span class="note" hidden /> as HTMLElement;
    const task = markdownView();
    const answer = markdownView();
    const error = <pre class="error" hidden /> as HTMLElement;
    const fallback = <div>{task.element}{answer.element}</div> as HTMLElement;
    const content = <div />;
    const scope = new Scope();
    let history: ReturnType<typeof transcript> | null = null;
    const pane = scroller(
      scope,
      content,
      () => history?.last() ?? null,
      (pane) => history?.grow(pane),
    );
    pane.classList.add("subagent-history");
    pane.tabIndex = 0;
    pane.setAttribute("role", "region");
    pane.setAttribute("aria-label", "Subagent transcript");
    pane.hidden = true;
    let tid: string | null = null;
    let child: Scope | null = null;
    let latest: ConversationView | null = null;
    let agent: AgentState | undefined;
    let frame = 0;
    let current: ToolCall;
    const release = () => {
      child?.dispose();
      child = null;
      history = null;
      latest = null;
      frame = 0;
      pane.hidden = true;
      fallback.hidden = false;
      content.replaceChildren();
    };
    const metadata = () => {
      const args = current.args as {
        model?: { provider?: string; modelId?: string };
        thinkingLevel?: string;
      } | null;
      const selected = agent?.model ?? args?.model;
      const level = agent?.thinkingLevel ?? args?.thinkingLevel;
      show(
        model,
        [
          selected?.modelId ? `${selected.provider}/${selected.modelId}` : "",
          level ? `thinking: ${level}` : "",
        ].filter(Boolean).join(" · "),
      );
    };
    return {
      element: (
        <div class="tool-body subagent-body">
          <div class="subagent-meta">{model}{link}</div>
          {fallback}
          {pane}
          {error}
        </div>
      ),
      update(call) {
        current = call;
        const args = call.args as { task?: string; conversation?: string } | null;
        const result = call.result as { conversation?: string; answer?: string } | null;
        const background = spawned(call.result, call.details);
        const next = (call.details as { tid?: string } | null)?.tid ??
          result?.conversation ?? args?.conversation ?? null;
        task.update(args?.task ?? "", call.status !== "streaming");
        task.element.hidden = call.status === "ok";
        const text = typeof call.result === "string"
          ? call.result.replace(
            /\n\n\(subagent conversation [^\n]+; pass it as conversation to continue\)$/,
            "",
          )
          : result?.answer ?? "";
        answer.update(text, true);
        answer.element.hidden = text === "" || call.status === "error";
        show(error, call.error ?? (call.status === "error" ? text : ""));
        if (next !== tid || (!background && call.status !== "running")) {
          release();
          if (next !== tid) agent = undefined;
          tid = next;
        }
        link.hidden = tid === null;
        if (tid === null) link.removeAttribute("href");
        else link.href = `#/${tid}`;
        if (tid !== null && child === null && (call.status === "running" || background)) {
          child = new Scope();
          history = transcript();
          content.replaceChildren(history.element);
          child.add(history.dispose);
          child.add(() => cancelAnimationFrame(frame));
          child.add(watch<ConversationView>(`conversation:${tid}`, (view) => {
            latest = view;
            agent = (view.docs["pi.agent"] as AgentState | undefined) ?? agent;
            frame ||= requestAnimationFrame(() => {
              frame = 0;
              const live = (latest!.docs["pi.live"] ?? IDLE) as LiveState;
              // a background child that went idle is no longer followed, leaving the link behind
              if (background && live.run === undefined) return release();
              history!.update(latest!.entries, live);
              pane.hidden = false;
              fallback.hidden = true;
              metadata();
            });
          }));
        }
        metadata();
      },
      dispose() {
        child?.dispose();
        scope.dispose();
      },
    };
  },
};

/** Whether a subagent call spawned a background child, which outlives the call. */
const spawned = (result: unknown, details: unknown) =>
  (result as { status?: string } | null)?.status === "running" ||
  (details as { status?: string } | null)?.status === "running";

const nestedCall = (record: NestedCall, finished: boolean): ToolCall => ({
  name: record.name,
  args: record.args,
  // a script that ended, however it ended, leaves no foreground call running; a background
  // subagent outlives its script, so its last record still says so
  status: finished && record.status === "running" &&
      !(record.name === "subagent" && spawned(record.value, record.details))
    ? "cancelled"
    : record.status,
  output: record.output ?? null,
  details: record.details ?? null,
  result: record.value ?? null,
  images: isImageResult(record.value) ? [record.value] : EMPTY,
  error: record.error ?? null,
  startedAt: record.startedAt ?? null,
  durationMs: record.durationMs ?? null,
});

const CODEMODE: ToolRenderer = {
  initial: "open",
  summary: (args) =>
    (args as { code?: string } | null)?.code
      ?.split("\n")
      .find((l) => l.trim()) ?? null,
  body: codemodeBody,
};

function codemodeBody(): ToolView {
  const source = <div class="script" /> as HTMLElement;
  const nested = <div class="nested" />;
  const output = <pre class="output" hidden /> as HTMLElement;
  const inputCard = cardFrame([<span class="tool-name">input</span>], source);
  const outputCard = cardFrame(
    [<span class="tool-name">output</span>],
    <div>{output}</div> as HTMLElement,
  );
  for (const frame of [inputCard, outputCard]) {
    frame.element.classList.add("codemode-text");
  }
  let script: { text: string; streaming: boolean } | null = null;
  const calls = keyed<{ extension: string; call: ToolCall }, number>(
    nested,
    (_, index) => index,
    ({ extension, call }) => {
      const renderer = call.name === "subagent" && extension === "subagent"
        ? SUBAGENT
        : toolRenderer(call.name, extension);
      const shown = card(call, renderer, undefined, renderer === SUBAGENT ? "open" : "closed");
      return {
        node: shown.node,
        update: ({ call }) => shown.update(call),
        dispose: shown.dispose,
      };
    },
  );
  return {
    element: (
      <div class="tool-body">
        {inputCard.element}
        {nested}
        {outputCard.element}
      </div>
    ),
    update(call) {
      const text = (call.args as { code?: string } | null)?.code ?? "";
      inputCard.element.hidden = text === "";
      const streaming = call.status === "streaming";
      if (text !== script?.text || streaming !== script.streaming) {
        script = { text, streaming };
        // line numbers match the script's stack traces (`codemode.js:<line>`); highlighted once it is all written
        source.replaceChildren(
          code(text, streaming ? {} : { language: "javascript" }),
        );
      }
      const finished = call.status !== "running" &&
        call.status !== "streaming" &&
        call.status !== "pending";
      const records = (call.details as { calls?: NestedCall[] } | null)?.calls ?? EMPTY;
      calls.sync(
        records.map((record) => ({
          extension: record.extension,
          call: nestedCall(record, finished),
        })),
      );
      const result = typeof call.result === "string" ? call.result : (call.error ?? "");
      show(output, result.replace(/^Script (completed|failed)\n?/, ""));
      outputCard.element.hidden = output.hidden;
    },
    dispose() {
      calls.dispose();
      inputCard.dispose();
      outputCard.dispose();
    },
  };
}

function toolCard(call: ToolCall): Card {
  return card(
    call,
    call.name === "codemode"
      ? CODEMODE
      : call.name === "subagent"
      ? SUBAGENT
      : toolRenderer(call.name),
  );
}

function shellCall(run: ShellExecution): ToolCall {
  return {
    name: "bash",
    args: { command: run.command },
    status: run.status,
    output: (run.details as { rawOutput?: string } | null)?.rawOutput ?? null,
    details: run.details,
    result: run.result,
    error: run.error,
    startedAt: run.startedAt,
    durationMs: run.durationMs,
  };
}

type Report = {
  tid?: string;
  task?: string;
  status?: "completed" | "failed" | "stopped";
  answer?: string;
  error?: string;
};

/** A background subagent's report: what it was asked, how it ended, and a link back to it. */
function reportCard(data: Report | null): Element {
  const status = data?.status ?? "completed";
  const text = (status === "failed" ? data?.error : data?.answer) ?? "";
  return (
    <div class="report">
      <div class="subagent-meta">
        <span class={status === "failed" ? "error" : ""}>subagent {status}</span>
        {data?.tid ? <a class="tid" href={`#/${data.tid}`}>open subagent</a> : []}
      </div>
      {data?.task ? <div class="report-task">{data.task}</div> : []}
      {text ? markdown(text) : []}
    </div>
  ) as HTMLElement;
}

function shellCard(run: ShellExecution): Card {
  const shown = card(shellCall(run), toolRenderer("bash", "code"), undefined, "open");
  const name = (shown.node as Element).querySelector(".tool-name")!;
  name.textContent = run.excludeFromContext ? "!! shell" : "! shell";
  return shown;
}

/** A block of a response, whether the response is still being generated, and whether the block is its newest. */
type Shown = { block: Block; generating: boolean; last: boolean };

function contentBlock(first: Shown, toolCall: (shown: Shown) => Handle<Shown>): Handle<Shown> {
  if (first.block.type === "toolCall") return toolCall(first);
  const body = markdownView();
  if (first.block.type === "thinking") {
    // one element while it streams, so it stays as the reader left it
    const details = (
      <details class="thinking" open hidden>
        <summary>thinking</summary>
        {body.element}
      </details>
    ) as HTMLElement;
    const pending = (
      <div class="thinking-pending" role="status" aria-label="thinking…" hidden>
        {[..."thinking..."].map((letter, index) => (
          <span
            aria-hidden="true"
            _also={(span) => {
              span.style.animationDelay = `-${index * 60}ms`;
            }}
          >
            {letter}
          </span>
        ))}
      </div>
    ) as HTMLElement;
    const update = ({ block, last }: Shown) => {
      // empty, as encrypted reasoning is, it shows only while it is being thought
      const text = block.type === "thinking" && !block.redacted ? block.thinking.trim() : "";
      body.update(text, !last);
      details.hidden = text === "";
      pending.hidden = text !== "" || !last;
    };
    update(first);
    return {
      node: (
        <div class="block">
          {details}
          {pending}
        </div>
      ),
      update,
    };
  }
  const update = ({ block, last }: Shown) =>
    body.update(block.type === "text" ? block.text : "", !last);
  update(first);
  return { node: <div class="block">{body.element}</div>, update };
}

function timestamp(value: number): HTMLTimeElement {
  const time = document.createElement("time");
  time.className = "message-time";
  setTimestamp(time, value);
  return time;
}

function setTimestamp(time: HTMLTimeElement, value: number) {
  const date = new Date(value);
  if (!Number.isFinite(date.getTime())) {
    time.removeAttribute("datetime");
    time.title = "";
    time.textContent = "";
    return;
  }
  const iso = date.toISOString();
  if (time.dateTime === iso) return;
  time.dateTime = iso;
  time.title = date.toLocaleString();
  time.textContent = date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
}

/** A response; `update` draws its next revision, and whether it is still being generated. */
function assistant(
  message: AssistantMessage,
  generating: boolean,
  toolCall: (shown: Shown) => Handle<Shown>,
) {
  const blocks = <div class="blocks" />;
  const time = timestamp(message.timestamp);
  const error = <div class="error" hidden /> as HTMLElement;
  const aborted = (
    <div class="note" hidden>
      aborted
    </div>
  ) as HTMLElement;
  // a block keeps its node while it streams; a tool call keeps its card
  const list = keyed<Shown, string>(
    blocks,
    ({ block }, index) => `${index}:${block.type}`,
    (shown) => contentBlock(shown, toolCall),
  );
  const update = (message: AssistantMessage, generating: boolean) => {
    const { content } = message;
    setTimestamp(time, message.timestamp);
    list.sync(
      content.map((block, index) => ({
        block,
        generating,
        last: generating && index === content.length - 1,
      })),
    );
    show(
      error,
      message.stopReason === "error" ? (message.errorMessage ?? "error") : "",
    );
    aborted.hidden = message.stopReason !== "aborted";
  };
  update(message, generating);
  return {
    node: (
      <div class="message assistant">
        {blocks}
        {error}
        {aborted}
        {time}
      </div>
    ),
    update,
    dispose: list.dispose,
  };
}

function user(message: UserMessage): Element {
  const content = typeof message.content === "string"
    ? [{ type: "text" as const, text: message.content }]
    : message.content;
  return (
    <div class="message user">
      {content.map((block, index) =>
        block.type === "text" ? <div class="text">{block.text}</div> : (
          <img
            class="image"
            alt={`Attached image ${index + 1}`}
            loading="lazy"
            src={`data:${block.mimeType};base64,${block.data}`}
          />
        )
      )}
      {timestamp(message.timestamp)}
    </div>
  );
}

/** A `<details>` whose body is built the first time it opens, since most never are. */
function lazyDetails(summary: Element, body: () => Node[], className?: string): HTMLElement {
  const details = <details>{summary}</details> as HTMLDetailsElement;
  if (className) details.className = className;
  let built = false;
  details.addEventListener("toggle", () => {
    if (!details.open || built) return;
    built = true;
    details.append(...body());
  });
  return details;
}

type PromptChange = {
  id: number;
  before: SystemMessage | undefined;
  messages: SystemMessage[];
};

function system() {
  const summary = <summary /> as HTMLElement;
  const body = <div /> as HTMLElement;
  let current: PromptChange;
  let built = false;
  const renderBody = () => {
    body.replaceChildren(...current.messages.flatMap((message) => [
      ...Object.entries(message.sections ?? {}).flatMap(([key, value]) =>
        value === null ? [] : [<h4>{key}</h4>, <pre>{value}</pre>]
      ),
      ...(message.content.length > 0
        ? [
          <pre>
            {typeof message.content === "string" ? message.content : textOf(message.content)}
          </pre>,
        ]
        : []),
    ]));
  };
  const update = (change: PromptChange) => {
    current = change;
    const { before, messages } = change;
    const after = getCurrentSystemMessage(before ? [before, ...messages] : messages);
    const previous = before?.sections ?? {};
    const sections = after?.sections ?? {};
    const { toolsAdded, toolsRemoved } = getToolStateChanges(
      before?.toolsAdded ?? [],
      after?.toolsAdded ?? [],
    );
    const name = (key: string, sign = "") => <span class="system-name">{sign + key}</span>;
    const group = (kind: string, names: Element[]) =>
      names.length > 0
        ? [
          new Text(" "),
          <span class="system-kind">{kind}</span>,
          <span class="system-names">{names.flatMap((n) => [new Text(" "), n])}</span>,
        ]
        : [];
    summary.replaceChildren(
      <span class="system-label">prompt</span>,
      <span class="system-groups">
        {group(
          "sections",
          [
            ...Object.entries(sections).flatMap(([key, value]) =>
              previous[key] === value ? [] : [name(key, Object.hasOwn(previous, key) ? "" : "+")]
            ),
            ...Object.keys(previous).filter((key) => !Object.hasOwn(sections, key))
              .map((key) => name(key, "-")),
          ],
        )}
        {group("tools", [
          ...toolsAdded.map((tool) => name(tool.name, "+")),
          ...toolsRemoved.filter((tool) => !toolsAdded.some((added) => added.name === tool.name))
            .map((tool) => name(tool.name, "-")),
        ])}
      </span>,
    );
    if (built) renderBody();
  };
  const node = lazyDetails(summary, () => {
    built = true;
    renderBody();
    return [body];
  }, "system");
  return { node, update };
}

/** How many entries to draw at once, which is the window a transcript opens with. */
const BATCH = 16;
/** How much drawn history to keep above the reader before drawing more, in viewports. */
const REACH = 1.5;

/** The transcript of a conversation's active entries, then the response being generated; `update` draws a revision. */
export function transcript() {
  let results = new Map<string, ToolResultMessage>();
  /** How each call's card draws itself again from its result and the live state. */
  const calls = new Map<string, () => void>();
  const prompts = new Map<number, ReturnType<typeof system>>();
  const changes = new Map<number, PromptChange>();
  let lastPrompt: PromptChange | undefined;
  let promptState: SystemMessage | undefined;
  let entries: readonly EntryRecord[] = EMPTY;
  /** The entries that draw: a result shows on its call's card. */
  let drawn: readonly EntryRecord[] = EMPTY;
  let live = IDLE;

  /** A call: as the model writes it, then its live slot while the round runs, then its result. */
  function call(first: Shown): Handle<Shown> {
    let current = first;
    const id = (first.block as ToolCallBlock).id;
    const state = (): ToolCall => {
      const block = current.block as ToolCallBlock;
      const result = results.get(id) ?? null;
      const slot: (NonNullable<LiveState["tools"]>[number] & { startedAt?: number }) | null =
        live.tools?.find((slot) => slot.callId === id) ?? null;
      const status: CallStatus = result
        ? result.isError ? "error" : "ok"
        : current.generating
        ? "streaming"
        : slot?.status === "running"
        ? "running"
        : live.run !== undefined
        ? "pending"
        : "cancelled";
      const details = (result?.details ?? slot?.details ?? null) as JsonValue | null;
      const timing = details as { startedAt?: number; durationMs?: number } | null;
      return {
        name: block.name,
        args: (block.arguments ?? null) as JsonValue | null,
        status,
        output: slot?.output ?? null,
        details,
        ...toolResult(result),
        startedAt: slot?.startedAt ?? timing?.startedAt ?? null,
        durationMs: result?.durationMs ?? timing?.durationMs ?? null,
      };
    };
    const view = toolCard(state());
    const refresh = () => view.update(state());
    calls.set(id, refresh);
    return {
      node: view.node,
      update(next) {
        current = next;
        refresh();
      },
      dispose() {
        calls.delete(id);
        view.dispose();
      },
    };
  }

  // committed entries never change, so their handles take no updates; only their calls' cards do
  function entry(record: EntryRecord): Handle<EntryRecord> {
    const message = record.model?.[0];
    switch (record.kind) {
      case "pi.user":
        return { node: user(message as UserMessage) };
      case "pi.assistant": {
        // the response that streamed in keeps its nodes, and how the reader left them, once it commits
        let view = live.generation?.message === undefined ? partial : null;
        if (view) {
          partial = null;
          view.update(message as AssistantMessage, false);
        } else view = assistant(message as AssistantMessage, false, call);
        return { node: view.node, dispose: view.dispose };
      }
      case "pi.system": {
        const view = system();
        view.update(changes.get(record.id)!);
        prompts.set(record.id, view);
        return { node: view.node, dispose: () => prompts.delete(record.id) };
      }
      case "pi.reset":
        return {
          node: (
            <div class="divider">
              context reset
              {message
                ? lazyDetails(<summary>handoff</summary>, () => [
                  markdown(userText(message as UserMessage)),
                ])
                : undefined}
            </div>
          ),
        };
      case "pi.compaction":
        return {
          node: lazyDetails(<summary class="divider">compacted</summary>, () => [
            markdown(userText(message as UserMessage)),
          ]),
        };
      case "berry.shell": {
        const shown = shellCard(record.data as ShellExecution);
        return { node: shown.node, dispose: shown.dispose };
      }
      case "berry.event":
        return { node: event(record.data) ?? document.createComment("event") };
      case "berry.subagent-report":
        return { node: reportCard(record.data as Report | null) };
      default:
        return {
          node: lazyDetails(
            <summary>{record.kind}</summary>,
            () => [<pre>{json(record.data ?? null)}</pre>],
            "system",
          ),
        };
    }
  }

  const list = <div class="entries" /> as HTMLElement;
  const rows = keyed<EntryRecord, number>(list, (record) => record.id, entry);
  /** The index in `drawn` of the oldest entry drawn; the ones above it wait, as padding, until the reader reaches them. */
  let first = 0;
  /** What an entry not drawn yet is taken to take, from the ones that are, so the scrollbar shows the history's size. */
  let mean = 96;
  let measured = false;
  const pad = () => {
    list.style.paddingTop = first === 0 ? "" : `${Math.round(first * mean)}px`;
  };
  const draw = () => {
    pad();
    rows.sync(drawn.slice(first));
  };
  /** Take the mean height of an entry from the ones drawn, for the ones that are not. */
  const measure = () => {
    const count = list.children.length;
    const content = list.offsetHeight - first * mean;
    if (count === 0 || content <= 0) return;
    measured = true;
    mean = content / count;
  };
  /** Run `draw`, changing what stands in for the rest, with the oldest entry drawn staying where the reader sees it. */
  const holding = (pane: Viewport, draw: () => void) => {
    const oldest = list.firstElementChild;
    const before = oldest?.getBoundingClientRect().top ?? 0;
    draw();
    if (oldest !== null) pane.scrollTop += oldest.getBoundingClientRect().top - before;
  };
  /**
   * Draw more of the history as the reader reaches what is drawn, holding what they see in place. Only entries that are
   * drawn are laid out, so a long history costs what has been read rather than what it holds.
   */
  const grow = (pane: Viewport) => {
    if (pane.clientHeight === 0) return;
    // taken as soon as the history is drawn, so that it is not taken later, while the reader is up in it
    if (!measured) {
      holding(pane, () => {
        measure();
        pad();
      });
    }
    if (first === 0) return;
    // how far the drawn history starts above the viewport's top, which is negative once the reader is above all of it
    const reach = pane.scrollTop - first * mean;
    // a reader who has gone above what is drawn, as dragging the scrollbar to the top does, wants the entries there, not
    // a place kept over the gap: whoever is inside the drawn history keeps it, and one over the gap gets drawn to
    const wanted = reach < 0 ? 0 : pane.clientHeight * REACH;
    if (reach >= wanted) return;
    const batches = Math.ceil((wanted - reach) / (BATCH * mean));
    if (wanted > 0) {
      holding(pane, () => {
        first = Math.max(0, first - batches * BATCH);
        draw();
      });
    } else {
      first = Math.max(0, first - batches * BATCH);
      draw();
    }
  };
  const pending = <div class="pending" />;
  let partial: ReturnType<typeof assistant> | null = null;
  const shellPending = <div />;
  let shell: { taskId: number; card: Card } | null = null;

  return {
    element: (
      <div class="transcript">
        {list}
        {pending}
        {shellPending}
      </div>
    ),
    grow,
    last(): Element | null {
      const row = shellPending.lastElementChild ?? pending.lastElementChild ??
        list.lastElementChild;
      if (!row?.classList.contains("assistant")) return row;
      return row.querySelector(":scope > .error:not([hidden]), :scope > .note:not([hidden])") ??
        row.querySelector(":scope > .blocks")?.lastElementChild ?? row;
    },
    update(
      nextEntries: readonly EntryRecord[],
      nextLive: LiveState,
      nextShell?: ShellExecution,
    ) {
      if (
        nextShell &&
        nextEntries.some(
          (entry) =>
            entry.kind === "berry.shell" &&
            (entry.data as ShellExecution).taskId === nextShell?.taskId,
        )
      ) {
        nextShell = undefined;
      }
      if (shell?.taskId !== nextShell?.taskId) {
        shell?.card.dispose();
        shell = nextShell ? { taskId: nextShell.taskId, card: shellCard(nextShell) } : null;
        shellPending.replaceChildren(...(shell ? [shell.card.node] : []));
      }
      if (shell && nextShell) shell.card.update(shellCall(nextShell));
      const moved = nextLive !== live;
      live = nextLive;
      // the calls whose result this revision changed, or every call when it folded the history again
      let answered: Set<string> | null = new Set();
      if (nextEntries !== entries) {
        // a revision mostly appends, and committed entries never change, so the old ends standing say the rest stands
        // too; only a revision that changes what came before folds the history again
        const appended = entries.length > 0 && nextEntries.length >= entries.length &&
          nextEntries[0] === entries[0] && nextEntries[entries.length - 1] === entries.at(-1);
        const from = appended ? entries.length : 0;
        if (!appended) {
          results = new Map();
          changes.clear();
          lastPrompt = undefined;
          promptState = undefined;
          drawn = EMPTY;
          answered = null;
        }
        entries = nextEntries;
        const added: EntryRecord[] = [];
        const changedPrompts = new Set<number>();
        for (const record of entries.slice(from)) {
          const messages = (record.model ?? []).filter((message) => message.role === "system");
          if (record.kind === "pi.system") {
            // reorder patches share a timestamp, but may arrive in separate revisions
            if (!lastPrompt || lastPrompt.messages[0]?.timestamp !== messages[0]?.timestamp) {
              lastPrompt = { id: record.id, before: promptState, messages: [] };
              changes.set(record.id, lastPrompt);
              added.push(record);
            }
            lastPrompt.messages.push(...messages);
            changedPrompts.add(lastPrompt.id);
          } else {
            lastPrompt = undefined;
            if (record.kind !== "pi.tool-result" && record.kind !== "berry.start") {
              added.push(record);
            }
          }
          if (messages.length) {
            promptState = getCurrentSystemMessage(
              promptState ? [promptState, ...messages] : messages,
            );
          }
          for (const message of record.model ?? []) {
            if (message.role !== "toolResult") continue;
            results.set(message.toolCallId, message);
            answered?.add(message.toolCallId);
          }
        }
        for (const id of appended ? changedPrompts : prompts.keys()) {
          const change = changes.get(id);
          if (change) prompts.get(id)?.update(change);
        }
        drawn = [...drawn, ...added];
        // a history drawn afresh opens at its newest entries, and takes its estimate of the rest again
        if (!appended) {
          first = Math.max(0, drawn.length - BATCH);
          measured = false;
        }
        draw();
      }
      // a call with its result is done with the live state
      for (const [id, refresh] of calls) {
        if (answered === null || answered.has(id) || (moved && !results.has(id))) refresh();
      }
      if (!moved) return;
      const message = (live.generation?.message ??
        null) as AssistantMessage | null;
      if (message === null) {
        partial?.dispose();
        partial = null;
        pending.replaceChildren();
      } else if (partial === null) {
        partial = assistant(message, true, call);
        pending.replaceChildren(partial.node);
      } else partial.update(message, true);
    },
    dispose() {
      rows.dispose();
      partial?.dispose();
      shell?.card.dispose();
    },
  };
}