char-slop/berry

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

Charlotte Somvirtualize transcript contentsba4e2f42026-10-23

import { effect, Signal } from "@char/aftercare";
import type { Message, Usage } from "@earendil-works/pi-ai";
import type {
  AgentState,
  ConversationView,
  EntryRecord,
  InboxState,
  LiveState,
  UsageState,
} from "@earendil-works/pi-durable";
import type { ProjectIndex } from "@berry/api/projects.ts";
import type { ExtensionStartup } from "@berry/api/extension-startup.ts";
import type { JsonValue } from "@berry/api";
import type { HeaderContext } from "@berry/api/web.ts";
import { userContent } from "@berry/api/images.ts";
import type { ShellState } from "@berry/api/shell.ts";
import { api, connected, watch } from "./client.ts";
import { composer, go } from "./composer.tsx";
import {
  configurationEditor,
  type ConfigurationLocation,
  type ConfigurationSchema,
  liveChoices,
} from "./configuration.tsx";
import { inbox } from "./inbox.tsx";
import { type StoppedInput, stoppedInputs } from "./stopped-inputs.tsx";
import { extensionRenderers, type WebEntry } from "./renderers.ts";
import { headerWidgets } from "./header.ts";
import { extensionView, viewHref, viewRoute } from "./views.ts";
import { openChannel } from "./channel.ts";
import { type ModelInfo, modelKey, type ModelRef, modelSelect } from "./settings.tsx";
import { readWhenVisible } from "./read.ts";
import { transcript } from "./transcript.tsx";
import { scroller } from "./scroller.tsx";
import { branchCommands, describe, type Move } from "./tree.tsx";
import { computed, json, Scope, swap } from "./ui.ts";

/** What every conversation view shares: the installed extensions, the available models, and those enabled. */
export type Shared = {
  readonly extensions: Signal<readonly ExtensionInfo[]>;
  readonly models: Signal<readonly ModelInfo[]>;
  readonly enabled: Signal<readonly ModelRef[]>;
  /** The machines a conversation can work on: this one, then those settings name. */
  readonly machines: Signal<readonly string[]>;
  readonly projects: Signal<ProjectIndex>;
  /** Fetch the available models again, as after logging in or out of a provider. */
  readonly refreshModels: () => void;
};
export type ExtensionInfo = {
  name: string;
  directory?: string | null;
  description: string | null;
  status: "loaded" | "failed";
  /** Why its last load failed. */
  error: string | null;
  /** Whether a version of it runs: one that failed to reload still runs the last that loaded. */
  running: boolean;
  /** The harness's own, rather than one on disk. */
  builtin: boolean;
  alwaysOn: boolean;
  /** Whether a new conversation starts with it, until one is chosen from before. */
  defaultEnabled: boolean;
  web: WebEntry | null;
  /** Names it went by before, which old history still calls it. */
  formerly: string[];
  configuration: ConfigurationSchema | null;
  /** Its global editable prose default, when it registers any. */
  promptProse: { default: string } | null;
  startup?: ExtensionStartup | null;
};
export type CommandInfo = {
  name: string;
  extension: string;
  description: string;
  /** Runs here, in the browser, rather than on the server. */
  run?: () => Promise<void>;
};

const EMPTY: readonly never[] = [];
const IDLE: LiveState = {};

function selectedNames(agent: AgentState): string[] {
  const selection = agent.extensions;
  if (Array.isArray(selection)) return selection;
  // old conversations inherited subagent without storing its name
  return [...new Set(["subagent", ...(selection?.add ?? [])])].filter(
    (name) => !selection?.remove?.includes(name),
  );
}

/** The running extensions this conversation has, selected or always on, with their frontends. */
function withRenderers(installed: readonly ExtensionInfo[], agent: AgentState) {
  const names = selectedNames(agent);
  return installed.flatMap(({ name, running, alwaysOn }) => {
    const renderers = extensionRenderers(name);
    return running && (alwaysOn || names.includes(name)) && renderers ? [{ name, renderers }] : [];
  });
}

const totalCost = (usage: UsageState | null) =>
  [
    ...Object.values(usage?.models ?? {}),
    ...Object.values(usage?.tools ?? {}),
  ].reduce((sum, entry) => sum + (entry.cost?.total ?? 0), 0);

/** Compact token counts the way pi-coding-agent's footer does. */
const formatTokens = (count: number): string => {
  if (count < 1000) return String(count);
  if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
  if (count < 1000000) return `${Math.round(count / 1000)}k`;
  if (count < 10000000) return `${(count / 1000000).toFixed(1)}M`;
  return `${Math.round(count / 1000000)}M`;
};

/** The context a response saw, as pi's calculateContextTokens. */
const contextTokensOf = (usage: Usage): number =>
  usage.totalTokens ||
  usage.input + usage.output + usage.cacheRead + usage.cacheWrite;

/** Rough chars/4 estimate of one model message, for messages past the last reported usage. */
function estimateMessageTokens(message: Message): number {
  const content = (message as { content: unknown }).content;
  if (typeof content === "string") return Math.ceil(content.length / 4);
  if (!Array.isArray(content)) return 0;
  let chars = 0;
  for (const block of content as unknown[]) {
    if (typeof block === "string") chars += block.length;
    else if (block !== null && typeof block === "object") {
      const record = block as Record<string, unknown>;
      chars += typeof record.text === "string" ? record.text.length : JSON.stringify(block).length;
    }
  }
  return Math.ceil(chars / 4);
}

/**
 * The latest assistant usage, plus estimated tokens of what followed it: a la
 * pi-coding-agent's estimateProjectedContextTokens. Aborted and errored responses
 * carry no valid usage, and all-zero usage means the provider reported nothing.
 */
function estimateContext(
  entries: readonly EntryRecord[],
): { tokens: number; latest?: Usage; durationMs?: number } | null {
  const head = entries.findLast((entry) => entry.head !== undefined);
  let trailing = 0;
  for (let i = entries.length - 1; i >= 0; i--) {
    const entry = entries[i];
    const messages = entry.model ?? [];
    for (let j = messages.length - 1; j >= 0; j--) {
      const message = messages[j];
      // retained responses measured the context before this head marker
      if ((head === undefined || entry.id > head.id) && message.role === "assistant") {
        const candidate = message.usage;
        if (
          message.stopReason !== "aborted" && message.stopReason !== "error" &&
          candidate && contextTokensOf(candidate) > 0
        ) {
          return {
            tokens: contextTokensOf(candidate) + trailing,
            latest: candidate,
            durationMs: message.durationMs,
          };
        }
      }
      trailing += estimateMessageTokens(message);
    }
  }
  return head === undefined ? null : { tokens: trailing };
}

/** Cache hit rate of one response: its cache reads over its prompt tokens. */
const cacheHitRate = (usage: Usage): number | undefined => {
  const prompt = usage.input + usage.cacheRead + usage.cacheWrite;
  return prompt > 0 ? (usage.cacheRead / prompt) * 100 : undefined;
};

type HeaderStatus = {
  cost: number;
  /** Estimated context tokens, or null before the first response. */
  tokens: number | null;
  /** The model's context window, or 0 when it is not known. */
  window: number;
  /** Latest response's cache hit rate, when it touched the cache. */
  hitRate: number | undefined;
};

const contextText = (status: HeaderStatus): string => {
  if (status.tokens === null) {
    return status.window > 0 ? `?/${formatTokens(status.window)}` : "";
  }
  if (status.window <= 0) return formatTokens(status.tokens);
  return `${formatTokens(status.tokens)}/${formatTokens(status.window)}`;
};

const contextClass = (status: HeaderStatus): string => {
  if (status.tokens === null || status.window <= 0) return "";
  const percent = (status.tokens / status.window) * 100;
  if (percent > 90) return "ctx-high";
  if (percent > 70) return "ctx-warn";
  return "";
};

const LEVELS = ["off", "minimal", "low", "medium", "high", "xhigh", "max"];

/** As pi-ai's clampThinkingLevel: the level itself if supported, else the next one up, else the next one down. */
function clamp(levels: readonly string[], level: string): string {
  if (levels.includes(level)) return level;
  const at = LEVELS.indexOf(level);
  return (
    LEVELS.slice(at + 1).find((l) => levels.includes(l)) ??
      LEVELS.slice(0, Math.max(at, 0)).findLast((l) => levels.includes(l)) ??
      levels[0] ??
      "off"
  );
}

/** The thinking levels the chosen model supports; a level it lacks moves to its nearest. */
export function thinkingSelect(
  scope: Scope,
  models: Signal<readonly ModelInfo[]>,
  model: Signal<string>,
  current: Signal<string>,
  choose: (level: string) => void,
): HTMLSelectElement {
  const select = <select class="thinking-level" aria-label="Thinking level" /> as HTMLSelectElement;
  const render = () => {
    const known = models.get().find((m) => modelKey(m) === model.get());
    const levels = known?.thinkingLevels ?? [current.get()];
    select.replaceChildren(
      ...levels.map((level) => <option value={level}>{level}</option>),
    );
    select.value = current.get();
    select.disabled = levels.length === 1;
    // not before the model is known: until then, every level looks unsupported
    if (known && !levels.includes(current.get())) {
      queueMicrotask(() => choose(clamp(levels, current.get())));
    }
  };
  for (const source of [models, model, current]) {
    scope.add(source.subscribe(render).unsubscribe);
  }
  render();
  select.addEventListener("change", () => choose(select.value));
  return select;
}

/** The conversation's bar: its agent's model, level and extensions, and what it has cost and holds. */
function header(
  scope: Scope,
  tid: string,
  shared: Shared,
  notify: (message: string, error?: boolean) => void,
  contextOf: (extension: string, agent: AgentState) => HeaderContext,
  viewing: Signal<string>,
) {
  const configure = (change: object) =>
    api("PATCH", `/api/conversations/${tid}/agent`, change).catch((error) =>
      notify(error.message, true)
    );
  // the selects' own choices, which follow the agent
  const model = new Signal("");
  const thinking = new Signal("off");
  let agent: AgentState = {};
  const configurationAgent = new Signal(agent);
  let usage: UsageState | null = null;
  let entries: readonly EntryRecord[] = EMPTY;

  const selected = <summary>none</summary> as HTMLElement;
  const toggles = <div class="extension-options" />;
  const boxes = new Map<string, HTMLInputElement>();
  const configurations = new Map<
    string,
    { element: HTMLElement; alwaysOn: boolean; commit(): Promise<void> | undefined }
  >();
  const saves = new Set<Promise<unknown>>();
  const saving = (save: Promise<unknown>) => {
    saves.add(save);
    void save.catch(() => {}).finally(() => saves.delete(save));
  };
  swap(scope, toggles, shared.extensions, (installed, own) => {
    boxes.clear();
    configurations.clear();
    return installed
      .filter(
        (extension) => extension.running && (!extension.alwaysOn || extension.configuration),
      )
      .map((extension) => {
        const box = (
          <input
            type="checkbox"
            checked={selectedNames(agent).includes(extension.name)}
            _onchange={function () {
              const current = selectedNames(agent).filter(
                (name) => name !== extension.name,
              );
              configure({
                extensions: this.checked ? [...current, extension.name] : current,
              });
            }}
          />
        ) as HTMLInputElement;
        if (!extension.alwaysOn) boxes.set(extension.name, box);
        const editor = extension.configuration
          ? configurationEditor(
            own,
            tid,
            extension.name,
            extension.configuration,
            saving,
            liveChoices(own, extension.name, shared),
            shared.projects,
            computed<ConfigurationLocation>(own, [configurationAgent], () =>
              contextOf(extension.name, configurationAgent.get())),
          )
          : null;
        const fields = editor?.element;
        if (editor) {
          editor.element.hidden = !extension.alwaysOn &&
            !selectedNames(agent).includes(extension.name);
          configurations.set(extension.name, {
            ...editor,
            alwaysOn: extension.alwaysOn,
          });
        }
        return (
          <div class="extension-choice">
            {extension.alwaysOn ? [] : (
              <label title={extension.description ?? ""}>
                {box}
                {extension.name}
              </label>
            )}
            {fields ?? []}
          </div>
        );
      });
  });

  const dropdown = <details class="extensions">{selected}{toggles}</details> as HTMLDetailsElement;
  const commit = () => {
    for (const editor of configurations.values()) {
      void editor.commit()?.catch((error) => notify(error.message, true));
    }
  };
  const outside = (event: MouseEvent) => {
    if (!dropdown.open) return;
    const target = event.target as Node;
    if (!dropdown.contains(target)) {
      dropdown.open = false;
      commit();
    } else if (selected.contains(target)) commit();
  };
  document.addEventListener("click", outside, true);
  scope.add(() => document.removeEventListener("click", outside, true));

  const cost = document.createTextNode("");
  const widgets = headerWidgets();
  scope.add(widgets.dispose);
  const views = <span class="view-links" /> as HTMLElement;
  const drawWidgets = () => {
    const available = withRenderers(shared.extensions.get(), agent);
    widgets.update(
      available.flatMap(({ name, renderers }) =>
        renderers.header ? [{ name, create: renderers.header }] : []
      ),
      (extension) => contextOf(extension, agent),
    );
    const open = viewing.get().split("/")[0];
    views.replaceChildren(
      ...available.flatMap(({ name, renderers: { view } }) =>
        view
          ? [
            <a
              href={name === open ? `#/${tid}` : viewHref(tid, name)}
              title={name === open ? "return to conversation" : `open ${view.label}`}
              aria-current={name === open ? "page" : "false"}
            >
              {view.label}
            </a>,
          ]
          : []
      ),
    );
  };
  scope.add(viewing.subscribe(drawWidgets).unsubscribe);
  scope.add(shared.extensions.subscribe(drawWidgets).unsubscribe);
  drawWidgets();

  const context = <span /> as HTMLElement;
  const hit = document.createTextNode("");
  const rate = document.createTextNode("");
  const totals = (
    <span class="usage">
      {cost} {context}
      {hit}
      {rate}
    </span>
  ) as HTMLElement;
  const drawTotals = () => {
    const window = shared.models.get().find((m) => modelKey(m) === model.get())
      ?.contextWindow ?? 0;
    const estimate = estimateContext(entries);
    const latest = estimate?.latest;
    const touched = latest !== undefined && (latest.cacheRead > 0 || latest.cacheWrite > 0);
    const status: HeaderStatus = {
      cost: totalCost(usage),
      tokens: estimate?.tokens ?? null,
      window,
      hitRate: latest !== undefined && touched ? cacheHitRate(latest) : undefined,
    };
    const durationMs = estimate?.durationMs ?? 0;
    const perSecond = durationMs > 0 ? (estimate?.latest?.output ?? 0) / (durationMs / 1000) : NaN;
    cost.data = `$${status.cost.toFixed(4)}`;
    context.className = contextClass(status);
    context.textContent = contextText(status);
    hit.data = status.hitRate === undefined ? "" : ` CH${status.hitRate.toFixed(1)}%`;
    rate.data = Number.isFinite(perSecond) && perSecond > 0 ? ` ${perSecond.toFixed(1)} tok/s` : "";
  };
  scope.add(shared.models.subscribe(drawTotals).unsubscribe);
  scope.add(model.subscribe(drawTotals).unsubscribe);
  drawTotals();

  return {
    element: (
      <header class="bar conversation-header">
        {modelSelect(scope, shared.models, shared.enabled, model, (chosen) =>
          configure({ model: chosen }))}
        {thinkingSelect(scope, shared.models, model, thinking, (level) =>
          configure({ thinkingLevel: level }))}
        {dropdown}
        <span class="trailing">
          {views}
          {widgets.element}
          {totals}
        </span>
      </header>
    ),
    async settle() {
      await Promise.all([...saves]);
    },
    update(next: {
      agent: AgentState;
      usage: UsageState | null;
      entries: readonly EntryRecord[];
    }) {
      if (next.agent !== agent) {
        agent = next.agent;
        configurationAgent.set(agent);
        const names = selectedNames(agent);
        selected.textContent = names.join(", ") || "none";
        for (const [name, box] of boxes) box.checked = names.includes(name);
        for (const [name, { element, alwaysOn }] of configurations) {
          element.hidden = !alwaysOn && !names.includes(name);
        }
        // together, so neither select sees the other's old value
        effect(() => {
          model.set(agent.model ? modelKey(agent.model) : "");
          thinking.set(agent.thinkingLevel ?? "off");
        });
        drawWidgets();
      }
      if (next.usage !== usage || next.entries !== entries) {
        usage = next.usage;
        entries = next.entries;
        drawTotals();
      }
    },
  };
}

/** A notice above the composer, which goes after a while. */
export function notifier() {
  const element = <div class="notice" hidden /> as HTMLDivElement;
  let timer: ReturnType<typeof setTimeout> | undefined;
  const notify = (message: string, error = false) => {
    element.textContent = message;
    element.classList.toggle("error", error);
    element.hidden = false;
    clearTimeout(timer);
    timer = setTimeout(() => (element.hidden = true), error ? 12_000 : 6_000);
  };
  return { element, notify };
}

/** The conversation's toolbar, for the app's bar, and the transcript and composer, for its pane. */
export function conversation(
  scope: Scope,
  tid: string,
  shared: Shared,
  /** The view open over it, as `<extension>` or `<extension>/<route>`, or `""`. */
  viewing: Signal<string> = new Signal(""),
): Element[] {
  const { element: notice, notify } = notifier();
  const busy = new Signal(false);
  const shellEnabled = new Signal(false);
  let shellState: ShellState = {};
  const commands = new Signal<readonly CommandInfo[]>(EMPTY);
  let aborting = false;
  const { element: input, setText, restore } = composer(
    scope,
    tid,
    busy,
    commands,
    async (text, followUp, images) => {
      // busy configuration waits for a boundary; new inputs must be able to queue before it
      if (!busy.get()) await top.settle();
      const command = text.match(/^\/(\S+)\s*([\s\S]*)$/);
      if (shellEnabled.get() && text.startsWith("!")) {
        if (images.length) throw new Error("Shell commands cannot include images");
        const excludeFromContext = text.startsWith("!!");
        await api("POST", `/api/conversations/${tid}/shell`, {
          command: text.slice(excludeFromContext ? 2 : 1).trim(),
          excludeFromContext,
        });
      } else if (command) {
        const { result } = await api<{ result: JsonValue }>(
          "POST",
          `/api/conversations/${tid}/commands/${command[1]}`,
          { args: command[2] },
        );
        notify(
          result === null
            ? `/${command[1]} done`
            : typeof result === "string"
            ? result
            : json(result),
        );
      } else {
        // saved diff edits report on leaving the view; an idle message sends after them instead
        if (!busy.get()) await view.flush?.();
        const whenBusy = busy.get() ? followUp ? "followUp" : "steer" : undefined;
        await api("POST", `/api/conversations/${tid}/messages`, {
          content: userContent(text, images),
          ...(whenBusy ? { whenBusy } : {}),
        });
      }
    },
    notify,
    async () => {
      if (aborting) return;
      aborting = true;
      try {
        const { inputs = [] } = await api<{ inputs?: StoppedInput[] }>(
          "POST",
          `/api/conversations/${tid}/abort`,
        );
        await stopped.recover(inputs);
      } finally {
        aborting = false;
      }
    },
    (prefix) =>
      api<string[]>(
        "GET",
        `/api/conversations/${tid}/references?${new URLSearchParams({ prefix })}`,
      ),
    shellEnabled,
  );
  // a move along the tree shows where it went for as long as the conversation stays there
  let moved: Move | null = null;
  const arrivals = new Set<{ move: Move; arrive: () => void }>();
  const point = <span class="point" /> as HTMLElement;
  const undo = <button type="button">undo</button> as HTMLButtonElement;
  const continuation = (
    <div class="continuation" role="status" hidden>
      {point}
      {undo}
    </div>
  ) as HTMLElement;
  const arrived = () => {
    for (const arrival of arrivals) {
      if (!arrival.move.landed(latestEntry)) continue;
      arrivals.delete(arrival);
      arrival.arrive();
    }
    if (moved !== null && latestEntry !== moved.at) moved = null;
    continuation.hidden = moved === null;
  };
  undo.addEventListener("click", async () => {
    const move = moved;
    if (move === null || move.previous === null || undo.disabled) return;
    undo.disabled = true;
    try {
      await api("POST", `/api/conversations/${tid}/branch`, { entryId: move.previous });
      const textarea = input.querySelector("textarea")!;
      if (move.how === "edit" && textarea.value === move.entry.text) setText("");
      else textarea.focus();
    } catch (error) {
      undo.disabled = false;
      notify(error instanceof Error ? error.message : String(error), true);
    }
  });
  const local: CommandInfo[] = [
    ...branchCommands({ tid }, (place) => go(place, setText), async (move) => {
      await new Promise<void>((arrive) => {
        if (move.landed(latestEntry)) arrive();
        else arrivals.add({ move, arrive });
      });
      if (move.how === "regenerate") {
        return notify("regenerating response");
      }
      if (move.at === move.previous) return;
      moved = move;
      const [label, text] = describe(move.entry);
      continuation.dataset.kind = move.entry.kind;
      point.replaceChildren(
        <span class="verb">{move.how === "edit" ? "editing" : "continuing after"}</span>,
        <span class="label">{label}</span>,
        <span class="text">{text}</span>,
      );
      undo.hidden = move.previous === null;
      undo.disabled = false;
      continuation.hidden = false;
    }),
    {
      name: "archive",
      extension: "berry",
      description: "archive this conversation",
      run: async () => {
        await api("PATCH", `/api/conversations/${tid}`, { archived: true });
        notify(
          "this conversation was moved to the archive. you can use /restore to restore it to the main conversation list",
        );
      },
    },
  ];
  commands.set(local);
  // the extensions' commands, asked for again whenever the conversation's extensions change
  let names: string | null = null;
  let commandRequest = 0;
  const fetchCommands = async () => {
    const request = ++commandRequest;
    commands.set(local);
    try {
      const list = await api<CommandInfo[]>("GET", `/api/conversations/${tid}/commands`);
      if (request !== commandRequest) return;
      commands.set([
        ...local,
        ...list.filter((c) => !local.some((l) => l.name === c.name)),
      ]);
    } catch {
      // keep local commands when the target cannot be reached
    }
  };

  const command = async (name: string, args = "") =>
    (
      await api<{ result: JsonValue | null }>(
        "POST",
        `/api/conversations/${tid}/commands/${encodeURIComponent(name)}`,
        { args },
      )
    ).result;
  /** What an extension's frontend works with: its own handlers, and the user's commands. */
  const contextOf = (extension: string, agent: AgentState): HeaderContext => {
    const path = (name: string) =>
      `/api/conversations/${tid}/extensions/${encodeURIComponent(extension)}/${
        encodeURIComponent(name)
      }`;
    return {
      tid,
      model: agent.model ?? null,
      request: async (name, args, options) =>
        (
          await api<{ result: JsonValue }>(
            "POST",
            path(name),
            args === undefined ? {} : { args },
            options?.signal,
          )
        ).result,
      connect: (name, args) => openChannel(path(name), args),
      command,
    };
  };
  const top = header(scope, tid, shared, notify, contextOf, viewing);
  const view = extensionView();
  scope.add(view.dispose);
  let agent: AgentState = {};
  let latestEntry: number | null = null;
  const drawView = () => {
    if (latest === null) return;
    const [name, ...route] = viewing.get().split("/");
    const create = withRenderers(shared.extensions.get(), agent)
      .find((extension) => extension.name === name)?.renderers.view?.create ?? null;
    view.update(name ? { name, create } : null, {
      ...contextOf(name, agent),
      route: viewRoute(route.join("/")),
      href: (next) => viewHref(tid, name, next),
      go: (next) => void (location.hash = viewHref(tid, name, next)),
      latest: latestEntry,
    });
  };
  scope.add(viewing.subscribe(drawView).unsubscribe);
  scope.add(shared.extensions.subscribe(drawView).unsubscribe);
  const history = transcript();
  scope.add(history.dispose);
  const markRead = readWhenVisible(
    scope,
    (entryId) => api("POST", `/api/conversations/${tid}/read`, { entryId }),
  );
  const queued = inbox(scope, tid);
  const stopped = stoppedInputs(scope, tid, restore, notify);
  const activity = document.createTextNode("");
  const working = (
    <div class="working" role="status" aria-live="polite" hidden>
      <span class="working-spinner" aria-hidden="true" />
      {activity}
    </div>
  ) as HTMLElement;

  // revisions are drawn a frame at a time: those arriving meanwhile, or while the page is hidden, draw as one
  let latest: ConversationView | null = null;
  let frame = 0;
  const draw = () => {
    frame = 0;
    const { entries, docs } = latest!;
    const live = (docs["pi.live"] ?? IDLE) as LiveState;
    agent = (docs["pi.agent"] ?? {}) as AgentState;
    latestEntry = entries.at(-1)?.id ?? null;
    arrived();
    top.update({
      agent,
      usage: (docs["pi.usage"] ?? null) as UsageState | null,
      entries,
    });
    history.update(entries, live, shellState.run);
    markRead(latest!);
    busy.set(live.run !== undefined || shellState.run !== undefined);
    const statuses = [];
    if (busy.get()) statuses.push("working…");
    if (live.compactions?.length) statuses.push("compacting context…");
    const text = statuses.join(" · ");
    if (activity.data !== text) activity.data = text;
    working.hidden = statuses.length === 0;
    shellEnabled.set(selectedNames(agent).includes("code"));
    const binding = entries.findLast((entry) => {
      if (entry.kind !== "berry.event") return false;
      const { ext, event } = entry.data as { ext: string; event?: { type?: string } };
      return (ext === "environment" && event?.type === "bind") ||
        (["code", "coding"].includes(ext) && event?.type === "cd");
    });
    const selection = json([selectedNames(agent), binding?.id ?? null]);
    if (selection !== names) {
      names = selection;
      void fetchCommands();
    }
    drawView();
    const items = (docs["pi.inbox"] as InboxState | undefined)?.items ?? EMPTY;
    queued.update(items);
  };
  scope.add(
    watch<ConversationView>(`conversation:${tid}`, (view) => {
      latest = view;
      frame ||= requestAnimationFrame(draw);
    }),
  );
  scope.add(
    connected.subscribe((up) => {
      if (up && latest) frame ||= requestAnimationFrame(draw);
    }).unsubscribe,
  );
  scope.add(() => cancelAnimationFrame(frame));
  scope.add(watch<ShellState>(`shell:${tid}`, (state) => {
    shellState = state;
    if (latest) frame ||= requestAnimationFrame(draw);
  }));

  return [
    top.element,
    <div class="pane conversation">
      {scroller(scope, history.element, history.last, history.grow)}
      {queued.element}
      {stopped.element}
      {continuation}
      {notice}
      {working}
      {input}
    </div>,
    view.element,
  ];
}

/**
 * A branch not yet taken: `tid` as of its entry `at`, which sending a message continues from, or with `fork` starts a
 * new conversation from.
 */
export function draft(
  scope: Scope,
  tid: string,
  at: number,
  fork: boolean,
): Element[] {
  const history = transcript();
  scope.add(history.dispose);
  const { element: notice, notify } = notifier();
  api<{ entries: EntryRecord[] }>(
    "GET",
    `/api/conversations/${tid}/context?at=${at}`,
  )
    .then((context) => history.update(context.entries, IDLE))
    .catch((error) => notify(error.message, true));

  const commands = new Signal<readonly CommandInfo[]>(EMPTY);
  const { element: input, setText } = composer(
    scope,
    `${tid}${fork ? "/fork" : ""}@${at}`,
    new Signal(false),
    commands,
    async (text, _followUp, images) => {
      const command = text.match(/^\/(\S+)/)?.[1];
      if (command) {
        throw new Error(
          `/${command} needs a conversation: send a message to start this one`,
        );
      }
      if (!fork) {
        await api("POST", `/api/conversations/${tid}/branch`, { entryId: at });
        await api("POST", `/api/conversations/${tid}/messages`, {
          content: userContent(text, images),
        });
        return go({ tid }, setText);
      }
      const forked = await api<{ tid: string }>(
        "POST",
        `/api/conversations/${tid}/fork`,
        {
          entryId: at,
        },
      );
      await api("POST", `/api/conversations/${forked.tid}/messages`, {
        content: userContent(text, images),
      });
      go({ tid: forked.tid }, setText);
    },
    notify,
    undefined,
    (prefix) =>
      api<string[]>(
        "GET",
        `/api/conversations/${tid}/references?${new URLSearchParams({ prefix, at: String(at) })}`,
      ),
  );
  commands.set(
    branchCommands({ tid, at, fork }, (place) => go(place, setText)),
  );

  return [
    <header class="bar draft-header">
      <span>{fork ? "new conversation from" : "new branch of"}</span>
      <a href={`#/${tid}`} class="tid">
        {tid}
      </a>
      <span class="spacer" />
      <span class="note">draft conversation turn: send a message</span>
    </header>,
    <div class="pane conversation">
      {scroller(scope, history.element, history.last, history.grow)}
      {notice}
      {input}
    </div>,
  ];
}