@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/src/AgentChat.tsx

@@ -0,0 +1,1812 @@
+import {
+  ArrowUpIcon,
+  CaretRightIcon,
+  CheckIcon,
+  ChecksIcon,
+  ClockIcon,
+  MicrophoneIcon,
+  PaperclipIcon,
+  ShieldWarningIcon,
+  StopIcon,
+  UploadSimpleIcon,
+  WarningCircleIcon,
+} from "@phosphor-icons/react";
+import {
+  Fragment,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+import { actionWords } from "./about";
+import type { Surface as Shown } from "./blocks";
+import {
+  BROWSER_MESSAGES,
+  BrowserView,
+  type BrowserMessages,
+  type BrowserPart,
+} from "./BrowserView";
+import { channelParts } from "./channelParts";
+import { classes } from "./classes";
+import { useDictation, type Dictate } from "./useDictation";
+import { useReveal } from "./reveal";
+import type { Client } from "./client";
+import type { Speaker } from "./credentials";
+import { useConversationFiles } from "./conversationFiles";
+import { FILES_PER_MESSAGE } from "./frames";
+import { actionMark } from "./marks";
+import { AudioPlayer } from "./kit/AudioPlayer";
+import { KitProvider, type KitPart } from "./kit/context";
+import { carriesFiles, FileChips, UploadChips, useUploads, type Uploads } from "./kit/FileField";
+import { KIT_MESSAGES, type KitLocale, type KitMessages } from "./kit/messages";
+import type { FileHost } from "./kit/uploads";
+import { stepGlyph } from "./stepGlyphs";
+import { Markdown } from "./surface/Markdown";
+import type { SurfaceComponents, SurfacePart } from "./surface/scope";
+import { framesItself, Surface, usePlayed } from "./surface/Surface";
+import type { SurfaceAction } from "./surface/values";
+import type {
+  Action,
+  Attachment,
+  Decision,
+  Delivery,
+  Handover,
+  Holder,
+  Message,
+  Request,
+  Step,
+  StepApp,
+  StepState,
+} from "./types";
+import {
+  NO_TOOL,
+  useConversation,
+  type LiveConversation,
+  type ToolHandler,
+} from "./useConversation";
+
+/** The words the chat says; a host gives its own, in its language. */
+export interface ChatMessages {
+  /** The composer's invitation, and the field's name; `fresh` while nothing has been said. */
+  placeholder: (name: string, fresh: boolean) => string;
+  /** In the composer while the socket is not open. */
+  connecting: string;
+  /** In the composer while the turn waits for the person to act above. */
+  awaiting: string;
+  /** Over the composer while a reply is on its way. */
+  thinking: (name: string) => string;
+  /** Over the composer while a reply is on its way, where the agent's steps are hidden. */
+  typing: string;
+  /** The builder's line over the composer, while nothing runs and nothing is written yet. */
+  working: string;
+  /** The builder's line over the composer, while its words come. */
+  writing: string;
+  /** How long the reply has taken so far, beside it. */
+  elapsed: (seconds: number) => string;
+  /** At the end of that line: how to stop the reply. */
+  escape: string;
+  /** Under the log once a reply is in: how long it took. */
+  done: (seconds: number) => string;
+  /** A conversation with nothing said yet: its title. */
+  empty: (name: string) => string;
+  /** Under the title, a line on what to say; nothing when empty. */
+  intro: (name: string) => string;
+  /** The send button's name. */
+  send: string;
+  /** The button that attaches files, by its name. */
+  attach: string;
+  /** Over the chat while files are dragged over it. */
+  drop: string;
+  /** The microphone's name: to dictate, and to stop and have it written. */
+  dictate: string;
+  dictateStop: string;
+  /** Beside the microphone while it listens, writes, or could not. */
+  dictation: Readonly<Record<"listening" | "writing" | "failed", string>>;
+  /** The stop button's name, in the send button's place while a reply is on its way. */
+  stop: string;
+  /** The message list's name, for screen readers. */
+  log: string;
+  /** A step's name, by the action's name as the platform gives it; the name itself otherwise. */
+  steps: Readonly<Record<string, string>>;
+  /** Beside a step that failed, in the builder's look: the colour is never the whole message. */
+  failed: string;
+  /** What heads the card of an action that needs the person's leave. */
+  approval: string;
+  /** The agent wants to run an action that needs the person's leave. */
+  request: (name: string, action: string) => string;
+  /** An action's input fields, by their name, as the approval card labels them. */
+  inputs: Readonly<Record<string, string>>;
+  allow: string;
+  decline: string;
+  /**
+   * On a person's page, in place of the approval card: what the agent asked to do waits for the
+   * business's yes (`decides: "business"`), which its people give from their app.
+   */
+  confirming: string;
+  /** The line across the log where the agent handed the conversation to a person. */
+  handedOff: string;
+  /**
+   * The line across the log where who answers the conversation changed (`handovers`), before
+   * why: to whom (`holder`), and who changed it (`by`).
+   */
+  handover: (holder: Holder, by: HandoverBy, name: string) => string;
+  /** Under a person's message the agent let pass this time (a `skip`), before why. */
+  skipped: string;
+  /**
+   * On a call, under a reply the person cut short: the last of what they heard of it (`""`:
+   * nothing of it).
+   */
+  cut: (heard: string) => string;
+  /** The composer's invitation when the host takes what is written (`write`): the business's. */
+  write: string;
+  /** Under what a person of the business wrote on the channel: who it was. */
+  business: string;
+  /** A voice note's player, by its name. */
+  voiceNote: string;
+  /** Where what went out on a channel got to, as its mark's name. */
+  delivery: Readonly<Record<Delivery, string>>;
+  /** Beside a message that never reached the person, with the provider's reason when it gave one. */
+  undelivered: (error: string | null) => string;
+  /**
+   * What the page answers when the agent calls one of the host's tools and the chat was given no
+   * `onTool` to run it: read by the agent, never shown.
+   */
+  noTool: string;
+  /** What the kit's controls say on the agent's screens: a form's checks, a calendar, a list. */
+  kit: Partial<KitMessages>;
+  /** What the browser the agent drives says: who holds it, take it, give it back. */
+  browser: BrowserMessages;
+}
+
+export const CHAT_MESSAGES: ChatMessages = {
+  placeholder: (name) => `Write to ${name}…`,
+  connecting: "Connecting…",
+  awaiting: "Answer above to go on…",
+  thinking: (name) => `${name} is thinking`,
+  typing: "Typing",
+  working: "Working",
+  writing: "Writing",
+  elapsed: (seconds) => `${seconds} s`,
+  escape: "esc to stop",
+  done: (seconds) => `Done in ${seconds} s`,
+  empty: (name) => `Talk with ${name}`,
+  intro: () => "",
+  send: "Send",
+  attach: "Attach files",
+  drop: "Drop to attach",
+  dictate: "Dictate",
+  dictateStop: "Stop and write it",
+  dictation: {
+    listening: "Listening…",
+    writing: "Writing it down…",
+    failed: "Couldn't hear you: allow the microphone and try again",
+  },
+  stop: "Stop",
+  log: "Conversation",
+  steps: { show: "Shows", ask_person: "Asks" },
+  failed: "failed",
+  approval: "Needs your approval",
+  request: (name, action) => `${name} wants to ${action}`,
+  inputs: {},
+  allow: "Allow",
+  decline: "Decline",
+  confirming: "Waiting for the business to confirm",
+  handedOff: "Handed to a person",
+  handover: (holder, by, name) => {
+    const automation = by.kind === "automation" ? ` by “${by.title}”` : "";
+    switch (holder) {
+      case "agent":
+        if (by.kind === "owner") return `You gave it back to ${name}`;
+        return `Given back to ${name}${automation}`;
+      case "person":
+        if (by.kind === "owner") return `You paused ${name}`;
+        if (by.kind === "agent") return `${name} handed it to a person`;
+        return `Handed to a person${automation}`;
+      case "nobody":
+        return `Ignored${automation}`;
+    }
+  },
+  skipped: "Not answered",
+  cut: (heard) =>
+    heard === "" ? "Cut off before a word of it was heard" : `Cut off after «${heard}»`,
+  write: "Reply as the business…",
+  business: "You",
+  voiceNote: "Voice note",
+  delivery: {
+    queued: "Waiting to go",
+    sent: "Sent",
+    delivered: "Delivered",
+    read: "Read",
+    failed: "Not delivered",
+  },
+  undelivered: (error) => (error ? `Not delivered: ${error}` : "Not delivered"),
+  noTool: NO_TOOL,
+  kit: KIT_MESSAGES,
+  browser: BROWSER_MESSAGES,
+};
+
+/** The chat's parts, by the class each carries; `classNames` adds a host's own under the same keys. */
+export type ChatPart =
+  | "sc-chat"
+  | "sc-chat--builder"
+  | "sc-chat--console"
+  | "sc-chat__log"
+  | "sc-chat__log--channel"
+  | "sc-chat__message"
+  | "sc-chat__message--person"
+  | "sc-chat__message--agent"
+  | "sc-chat__message--action"
+  | "sc-chat__message--business"
+  | "sc-chat__said"
+  | "sc-chat__business"
+  | "sc-chat__meta"
+  | "sc-chat__delivery"
+  | "sc-chat__text"
+  | "sc-chat__steps"
+  | "sc-chat__step"
+  | "sc-chat__mark"
+  | "sc-chat__step--running"
+  | "sc-chat__step--queued"
+  | "sc-chat__step--waiting"
+  | "sc-chat__step--done"
+  | "sc-chat__step--failed"
+  | "sc-chat__output"
+  | "sc-chat__request"
+  | "sc-chat__confirming"
+  | "sc-chat__screen"
+  | "sc-chat__screen--bare"
+  | "sc-chat__handoff"
+  | "sc-chat__handover"
+  | "sc-chat__decision"
+  | "sc-chat__message--heard"
+  | "sc-chat__message--voice"
+  | "sc-chat__transcript"
+  | "sc-chat__cut"
+  | "sc-chat__reply"
+  | "sc-chat__status"
+  | "sc-chat__done"
+  | "sc-chat__empty"
+  | "sc-chat__suggestion"
+  | "sc-chat__composer"
+  | "sc-chat__files"
+  | "sc-chat__attach"
+  | "sc-chat__dictate"
+  | "sc-chat__typing"
+  | "sc-chat__dictation"
+  | "sc-chat__drop"
+  | "sc-chat__input"
+  | "sc-chat__actions"
+  | "sc-chat__send"
+  | "sc-chat__stop";
+
+type ClassNames =
+  Partial<Record<ChatPart | SurfacePart | KitPart | BrowserPart, string>> | undefined;
+
+/**
+ * How the chat looks. `agent` is an agent's conversation. `builder` is the builder's, v2's: the
+ * working line says what it does under the brand's sweeping light, the steps open on what they
+ * returned, the send is the brand's; `console` is the same seen as a console beside the work, the
+ * person's words as prompt lines.
+ */
+export type ChatLook = "agent" | "builder" | "console";
+
+/**
+ * Whether the chat shows the steps the agent took (searching its files, remembering, calling a
+ * tool, with what each returned): `shown` for the business, who wants to see the work; `hidden`
+ * for the people it serves, who see only what the agent says and shows, and a quiet line while
+ * it works.
+ */
+export type ChatSteps = "shown" | "hidden";
+
+/**
+ * Who changed who answers a conversation: one of the business's people (`owner`), the agent itself
+ * (its `escalate`), the platform (a release after quiet hours, a contact the owner marked), or an
+ * automation, by its title.
+ */
+export type HandoverBy =
+  { kind: "owner" | "agent" | "platform" } | { kind: "automation"; title: string };
+
+/** Something the host hands the chat from outside it, to say or to leave in the composer. */
+export interface ChatCompose {
+  text: string;
+  /** Said at once; otherwise left in the composer for the person to finish. */
+  send: boolean;
+  /** Tells one request from the last: each new key is taken once. */
+  key: number;
+}
+
+export interface AgentChatProps {
+  client: Client;
+  conversationId: string;
+  /** The agent's name, for the words that address it. */
+  name: string;
+  messages?: Partial<ChatMessages> | undefined;
+  classNames?: ClassNames;
+  /** The host's own drawing of a block type, for every surface the agent shows. */
+  components?: SurfaceComponents | undefined;
+  /** The language of the surfaces' calendars, days, times and numbers; English by default. */
+  locale?: KitLocale | undefined;
+  /** An error's code, from the socket or `load` for a history that could not be read; the host words it. */
+  onError?: ((code: string) => void) | undefined;
+  /** The host's own controls, at the composer's left. */
+  actions?: ReactNode;
+  /** A few things the person might say first, offered while nothing has been said; a click says it. */
+  suggestions?: readonly string[] | undefined;
+  /**
+   * A request from elsewhere on the page (a button beside the chat), taken once each time `key`
+   * changes; the one the chat mounts with is not. With `send` it is said, once the socket is open;
+   * while a reply is on its way or the turn waits, it goes into the composer instead. Without, it
+   * goes into the composer, focused with the caret at its end.
+   */
+  compose?: ChatCompose | undefined;
+  /** An agent's conversation by default; the builder's, or the builder's as a console. */
+  look?: ChatLook | undefined;
+  /**
+   * Whether the agent's steps show: by default as the page speaks (`client.who`): `shown` for the
+   * business, `hidden` for a person or a visitor, who see what the agent says and shows (its
+   * surfaces, files, a yes it waits for) and `typing` while it works.
+   */
+  steps?: ChatSteps | undefined;
+  /**
+   * Whether the person can attach files to what they say (the paperclip, dropping them on the
+   * chat, pasting a picture): each uploads to the conversation at once. On in every look, the
+   * builder's too; a host turns it off where nobody talks (a transcript read).
+   */
+  attachments?: boolean | undefined;
+  /**
+   * Opens a file of the conversation (one the person sent, one sent through a form), as the host
+   * shows files (`FileView` in a dialog, its bytes from the API); without it, files only read.
+   */
+  onOpenFile?: ((file: Attachment) => void) | undefined;
+  /**
+   * Turns what the person says out loud into words in the composer (the microphone beside the
+   * paperclip): the host's speech to text. Without it there is no microphone.
+   */
+  dictate?: Dictate | undefined;
+  /**
+   * Where what is written goes instead of the socket: on a conversation on a channel, a person of
+   * the business writing to the person there (`POST /conversations/{id}/operator`). The composer
+   * then says `write`, takes words and files whatever the agent is doing, and empties once the
+   * promise resolves (a rejection leaves them, for the host to say why); what was written comes
+   * back on the socket as a message.
+   */
+  write?: ((text: string, files: readonly string[]) => Promise<unknown>) | undefined;
+  /**
+   * Whether the log draws who answers the conversation, for a host of the business's (the inbox,
+   * the activity): each change (read with the history, then heard live) a quiet line where it
+   * fell, with why and when, and under a person's message the agent let pass, that it did. Off,
+   * the log draws only where the agent handed it to a person, from its `escalate` step.
+   */
+  handovers?: boolean | undefined;
+  /** Hears each change of who answers the conversation, live: the host's own views of it follow. */
+  onHolder?: ((holder: Holder, handover: Handover) => void) | undefined;
+  /** Hears each step the agent starts, live, by its action's name: the host's views follow. */
+  onStep?: ((action: string) => void) | undefined;
+  /**
+   * The conversation's last change of who answers it, as the host knows it (one it made itself,
+   * as its request answered): drawn at once, whether or not the socket tells it, and kept once.
+   */
+  handover?: Handover | null | undefined;
+  /**
+   * Runs one of the host's own tools the agent calls in the page (opening a record in the host's
+   * screen, say): what it resolves to goes back to the agent, what it rejects with as why it
+   * failed; its step shows as working meanwhile. Without it, each is refused with `noTool`.
+   */
+  onTool?: ToolHandler | undefined;
+}
+
+/** How close to the foot, in pixels, still counts as being at it (v2's). */
+const NEAR_FOOT = 80;
+
+/**
+ * The conversation with an agent: the person's messages at the right in a bubble, the agent's at
+ * the left as text with the steps it took and what they drew, its reply growing as it streams;
+ * the composer at the foot. On a channel, the business's side stays at the left: the agent's
+ * words with where they got to (a quiet mark), and what a person of the business wrote set apart
+ * in a bubble of its own; the surfaces went to the person there, so they only read here, and the
+ * reply, which runs on its own time, can't be stopped from here. With `handovers`, each change of
+ * who answers it is a quiet line where it fell, the moment it is made, and a person's message the
+ * agent let pass says so under it. The host picks the conversation; another id starts the chat
+ * afresh.
+ */
+export function AgentChat(props: AgentChatProps) {
+  // The last request taken, kept across conversations so another one does not take it again. The
+  // one given at mount counts as taken: a chat mounted again never says it twice.
+  const taken = useRef<number | null>(props.compose?.key ?? null);
+  // The kit's pieces in it (a file's chip, a surface's controls) read the host's words and classes.
+  const kit = props.messages?.kit ?? CHAT_MESSAGES.kit;
+  return (
+    <KitProvider classNames={props.classNames} messages={kit} locale={props.locale}>
+      <Chat key={props.conversationId} {...props} taken={taken} />
+    </KitProvider>
+  );
+}
+
+function Chat({
+  client,
+  conversationId,
+  name,
+  messages,
+  classNames,
+  components,
+  locale,
+  onError,
+  actions,
+  suggestions,
+  compose,
+  look = "agent",
+  steps = client.who === "person" ? "hidden" : "shown",
+  attachments = true,
+  onOpenFile,
+  dictate,
+  write,
+  handovers = false,
+  onHolder,
+  onStep,
+  handover,
+  onTool,
+  taken,
+}: AgentChatProps & { taken: RefObject<number | null> }) {
+  const words = { ...CHAT_MESSAGES, ...messages };
+  const live = useConversation(client, conversationId, {
+    onError,
+    onHolder,
+    onStep,
+    handover,
+    onTool: onTool ?? (() => Promise.reject(new Error(words.noTool))),
+  });
+  const files = useConversationFiles(client, conversationId, live.messages, onOpenFile);
+  // What the person attaches to their next message: picked, dropped on the chat, or pasted.
+  const uploads = useUploads(attachments ? files : undefined, { max: FILES_PER_MESSAGE });
+  // Files go with what is said, once the turn waits on nothing; to the host's `write`, at once.
+  const attaching = attachments && (write !== undefined || live.awaiting === null);
+  const [over, setOver] = useState(false);
+  // Whether the messages follow the conversation down: until the person scrolls up to read, and
+  // again as soon as they speak.
+  const following = useRef(true);
+  const fresh = !live.loading && live.messages.length === 0 && !live.pending;
+  const took = useTook(live.pending);
+  const builder = look !== "agent";
+  const { pending } = live;
+  // A conversation on a channel: its messages say who said them.
+  const onChannel = live.messages.some((message) => message.author != null);
+
+  // The builder stops on Esc from anywhere on the page, as v2's did; an agent's chat, from inside it.
+  const stop = useRef(live.stop);
+  useEffect(() => {
+    stop.current = live.stop;
+  });
+  useEffect(() => {
+    if (!builder || !pending) return undefined;
+    const onKey = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape" && !event.defaultPrevented) stop.current();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [builder, pending]);
+
+  const looks: ChatPart[] = builder ? ["sc-chat--builder"] : [];
+  if (look === "console") looks.push("sc-chat--console");
+  const stepsShown = steps === "shown";
+
+  return (
+    <div
+      part="chat"
+      className={`sc ${classes(classNames, "sc-chat", ...looks)}`}
+      onKeyDown={(event) => {
+        if (!builder && !onChannel && event.key === "Escape" && live.pending) live.stop();
+      }}
+      // Files dropped anywhere on the chat go with the next message; a form's own drop zone
+      // (`data-drop`) takes those dropped on it.
+      onDragOver={(event) => {
+        if (!attaching || !carriesFiles(event)) return;
+        const zone = event.target instanceof Element && event.target.closest("[data-drop]");
+        setOver(!zone);
+        if (zone) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      }}
+      onDragLeave={(event) => {
+        const to = event.relatedTarget;
+        if (!(to instanceof Node && event.currentTarget.contains(to))) setOver(false);
+      }}
+      onDrop={(event) => {
+        setOver(false);
+        if (event.defaultPrevented || !attaching || !carriesFiles(event)) return;
+        event.preventDefault();
+        uploads.add([...event.dataTransfer.files]);
+      }}
+    >
+      {fresh ? (
+        <div part="empty" className={classes(classNames, "sc-chat__empty")}>
+          <h2>{words.empty(name)}</h2>
+          {words.intro(name) !== "" && <p>{words.intro(name)}</p>}
+          {suggestions !== undefined && suggestions.length > 0 && (
+            <ul>
+              {suggestions.map((text) => (
+                <li key={text}>
+                  <button
+                    type="button"
+                    disabled={!live.open}
+                    onClick={() => {
+                      if (live.say(text)) following.current = true;
+                    }}
+                    part="suggestion"
+                    className={classes(classNames, "sc-chat__suggestion")}
+                  >
+                    «{text}»
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ) : (
+        <Log
+          live={live}
+          name={name}
+          words={words}
+          classNames={classNames}
+          components={components}
+          locale={locale}
+          following={following}
+          took={took}
+          builder={builder}
+          onChannel={onChannel}
+          files={files}
+          handovers={handovers ? live.handovers : undefined}
+          who={client.who}
+          steps={stepsShown}
+        />
+      )}
+      {/* The browser the agent drives, over the composer while the conversation has one. */}
+      <BrowserView live={live} name={name} messages={words.browser} classNames={classNames} />
+      {live.pending && (
+        <Status
+          label={
+            builder ? workingOn(live, words) : stepsShown ? words.thinking(name) : words.typing
+          }
+          stoppable={!onChannel}
+          timed={stepsShown}
+          words={words}
+          classNames={classNames}
+        />
+      )}
+      <Composer
+        live={live}
+        name={name}
+        words={words}
+        classNames={classNames}
+        actions={actions}
+        compose={compose}
+        taken={taken}
+        fresh={fresh}
+        builder={builder}
+        uploads={attachments ? uploads : undefined}
+        files={files}
+        dictate={dictate}
+        write={write}
+        onSent={() => {
+          following.current = true;
+        }}
+      />
+      {over && (
+        <div aria-hidden className={classes(classNames, "sc-chat__drop")}>
+          <UploadSimpleIcon weight="bold" />
+          {words.drop}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * What the builder is doing right now, v2's way: the step running in this turn, by its name (the
+ * first one not settled: the actions of a reply run in its order); its words, while they come; or
+ * that it is working.
+ */
+export function workingOn(
+  live: Pick<LiveConversation, "messages" | "draft">,
+  words: Pick<ChatMessages, "steps" | "working" | "writing">,
+): string {
+  const lastSaid = live.messages.findLastIndex((message) => message.role === "user");
+  const running = live.messages
+    .slice(lastSaid + 1)
+    .flatMap((message) => message.steps)
+    .find((step) => step.state === "running");
+  if (running) return words.steps[running.action] ?? running.action;
+  return live.draft === "" ? words.working : words.writing;
+}
+
+interface PartProps {
+  live: LiveConversation;
+  name: string;
+  words: ChatMessages;
+  classNames: ClassNames;
+}
+
+const NO_HANDOFFS: ReadonlySet<string> = new Set();
+
+/** Whether a message is the agent's own words: a reply, not what a person of the business wrote. */
+const agentSaid = (message: Message | undefined): boolean =>
+  message?.role === "assistant" && message.author !== "operator";
+
+/**
+ * The replies a handoff line follows: in each turn where the agent handed the conversation to a
+ * person (an `escalate` step done), its last reply, so the line closes what the agent said.
+ */
+export function handoffs(messages: readonly Message[]): ReadonlySet<string> {
+  const after = new Set<string>();
+  let handed = false;
+  for (const [index, message] of messages.entries()) {
+    handed ||= message.steps.some((step) => step.action === "escalate" && step.state === "done");
+    if (handed && !agentSaid(messages[index + 1])) {
+      after.add(message.id);
+      handed = false;
+    }
+  }
+  return after;
+}
+
+/** Who changed who answers, from a handover's `by`: anything but these three is an automation's name. */
+export function handoverBy({ by, title }: Pick<Handover, "by" | "title">): HandoverBy {
+  if (by === "owner" || by === "agent" || by === "platform") return { kind: by };
+  return { kind: "automation", title: title ?? by };
+}
+
+/** A change of who answers, as its line says it: what changed and who changed it, then why. */
+export function handoverLine(
+  handover: Handover,
+  name: string,
+  words: Pick<ChatMessages, "handover">,
+): string {
+  const line = words.handover(handover.holder, handoverBy(handover), name);
+  const reason = handover.reason.trim();
+  return reason === "" ? line : `${line}: ${reason}`;
+}
+
+/**
+ * The line under a person's message the agent let pass this time, with why (the owner's words,
+ * else the automation that decided); none for any other decision: an answer is the reply itself,
+ * and a conversation held or ignored has its line where who answers changed.
+ */
+export function decisionLine(
+  decision: Decision | null | undefined,
+  words: Pick<ChatMessages, "skipped">,
+): string | null {
+  if (decision?.kind !== "skip") return null;
+  const why = decision.reason?.trim() || decision.title;
+  return why ? `${words.skipped}: ${why}` : words.skipped;
+}
+
+/**
+ * Where each change of who answers falls among the messages, by the index of the message it goes
+ * before (`messages.length`: after them all): before the first message said after it, and the
+ * agent's own after the last reply of its turn, so its line closes what the agent said.
+ */
+export function handoversAt(
+  messages: readonly Message[],
+  handovers: readonly Handover[],
+): ReadonlyMap<number, readonly Handover[]> {
+  const at = new Map<number, Handover[]>();
+  let next = 0;
+  for (const [index, message] of messages.entries()) {
+    const said = Date.parse(message.created_at);
+    const before: Handover[] = [];
+    let handover = handovers[next];
+    while (
+      handover !== undefined &&
+      Date.parse(handover.at) < said &&
+      !(handover.by === "agent" && agentSaid(message))
+    ) {
+      before.push(handover);
+      next += 1;
+      handover = handovers[next];
+    }
+    if (before.length > 0) at.set(index, before);
+  }
+  if (next < handovers.length) at.set(messages.length, handovers.slice(next));
+  return at;
+}
+
+/** When a line across the log happened, as the locale writes it: the time today, else the day too. */
+export function whenSaid(at: string, now: Date, code: string): string {
+  const moment = new Date(at);
+  const today = moment.toDateString() === now.toDateString();
+  return new Intl.DateTimeFormat(code, {
+    ...(today ? {} : { day: "numeric", month: "short" }),
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(moment);
+}
+
+/**
+ * The messages, read down, and the reply on its way: who is thinking until its first words, then
+ * the words as they come with the agent's mark at their end. Where who answers the conversation
+ * changed (`handovers`, when the host draws them; else where the agent handed it to a person),
+ * one quiet line across the log says so, and under a person's message the agent let pass, that
+ * it did. Screen readers hear a reply once, when it is stored.
+ */
+function Log({
+  live,
+  name,
+  words,
+  classNames,
+  components,
+  locale,
+  following,
+  took,
+  builder,
+  onChannel,
+  files,
+  handovers,
+  who,
+  steps,
+}: PartProps & {
+  components: SurfaceComponents | undefined;
+  locale: KitLocale | undefined;
+  following: RefObject<boolean>;
+  took: number | null;
+  builder: boolean;
+  onChannel: boolean;
+  files: FileHost;
+  handovers: readonly Handover[] | undefined;
+  who: Speaker;
+  /** Whether the agent's steps show, and how long its last reply took. */
+  steps: boolean;
+}) {
+  const scroller = useRef<HTMLDivElement>(null);
+  const said = useRef<HTMLDivElement>(null);
+  const { messages, pending, draft, awaiting } = live;
+  // The reply as it streams, at a reading pace (`reveal.ts`); when it is stored as a message, the
+  // message goes on from where the reveal was, so the words never jump to the end.
+  const shown = useRef(0);
+  // On a channel the reply being written shows as typing until it is stored; then it shows as
+  // the person gets it (its own typing while its parts go).
+  const last = messages.at(-1);
+  const outgoing =
+    last !== undefined &&
+    last.role === "assistant" &&
+    last.delivery != null &&
+    last.delivery !== "failed";
+  const drafted = useReveal(draft, 0, (count) => {
+    shown.current = count;
+  });
+  const lastDraft = useRef("");
+  const carried = useRef<{ id: string; from: number } | null>(null);
+  const latest = messages.at(-1);
+  if (
+    latest?.role === "assistant" &&
+    lastDraft.current !== "" &&
+    draft === "" &&
+    carried.current?.id !== latest.id
+  ) {
+    carried.current = { id: latest.id, from: shown.current };
+  }
+  lastDraft.current = draft;
+  useLayoutEffect(() => {
+    const box = scroller.current;
+    if (box && following.current) box.scrollTop = box.scrollHeight;
+  }, [messages, pending, drafted, following]);
+  // What grows by itself (a surface's picture landing, a step opened on its output) keeps the
+  // foot in view too, while the person is at it; and so does less room for it (the browser
+  // opening large under it).
+  useEffect(() => {
+    const box = scroller.current;
+    const log = said.current;
+    if (!box || !log || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(() => {
+      if (following.current) box.scrollTop = box.scrollHeight;
+    });
+    observer.observe(log);
+    observer.observe(box);
+    return () => {
+      observer.disconnect();
+    };
+  }, [following]);
+
+  // A surface takes input while the turn waits on it or, once nothing runs or waits, when the
+  // agent showed it since the person last spoke; older ones are read, not used. On a channel the
+  // person answered it there: here it only reads.
+  const idle = !onChannel && !pending && awaiting === null;
+  const lastSaid = messages.findLastIndex((message) => message.role === "user");
+  // What the person did on each surface, by the surface's id: a surface draws its answer.
+  const answers = new Map<string, Action>();
+  for (const message of messages) {
+    if (message.action) answers.set(message.action.surface, message.action);
+  }
+  // Drawn, who answers says where the agent handed it over; otherwise its `escalate` step does.
+  const handed = handovers === undefined ? handoffs(messages) : NO_HANDOFFS;
+  const placed = handoversAt(messages, handovers ?? []);
+  const lines = (index: number) =>
+    placed
+      .get(index)
+      ?.map((handover) => (
+        <HandoverLine
+          key={`${handover.at} ${handover.holder}`}
+          handover={handover}
+          name={name}
+          words={words}
+          classNames={classNames}
+          code={locale?.code ?? "en-US"}
+        />
+      ));
+
+  return (
+    <div
+      ref={scroller}
+      onScroll={(event) => {
+        const box = event.currentTarget;
+        following.current = box.scrollHeight - box.scrollTop - box.clientHeight < NEAR_FOOT;
+      }}
+      part="transcript"
+      className={classes(
+        classNames,
+        "sc-chat__log",
+        ...(onChannel ? (["sc-chat__log--channel"] as const) : []),
+      )}
+    >
+      <div ref={said} role="log" aria-label={words.log}>
+        {messages.map((message, index) => (
+          <Fragment key={message.id}>
+            {lines(index)}
+            {message.role === "user" ? (
+              <>
+                <Heard
+                  message={message}
+                  after={messages[index - 1]}
+                  words={words}
+                  classNames={classNames}
+                />
+                <Said message={message} words={words} classNames={classNames} files={files} />
+                {handovers !== undefined && (
+                  <Decided decision={message.decision} words={words} classNames={classNames} />
+                )}
+              </>
+            ) : message.author === "operator" ? (
+              <Business message={message} words={words} classNames={classNames} files={files} />
+            ) : (
+              <>
+                <Reply
+                  message={message}
+                  from={carried.current?.id === message.id ? carried.current.from : undefined}
+                  awaiting={onChannel ? null : awaiting}
+                  current={idle && index > lastSaid}
+                  answers={answers}
+                  name={name}
+                  words={words}
+                  classNames={classNames}
+                  components={components}
+                  locale={locale}
+                  onAction={live.act}
+                  builder={builder}
+                  files={files}
+                  who={who}
+                  steps={steps}
+                  onChannel={onChannel}
+                />
+                {handed.has(message.id) && (
+                  <p className={classes(classNames, "sc-chat__handoff")}>
+                    {actionMark("escalate", "library")}
+                    <span>{words.handedOff}</span>
+                  </p>
+                )}
+              </>
+            )}
+          </Fragment>
+        ))}
+        {lines(messages.length)}
+      </div>
+      {steps && !pending && took !== null && (
+        <p className={classes(classNames, "sc-chat__done")}>{words.done(took)}</p>
+      )}
+      {pending && onChannel && !outgoing && <Typing label={words.typing} classNames={classNames} />}
+      {pending && !onChannel && drafted !== "" && (
+        <div
+          aria-hidden
+          part="message message-agent"
+          className={classes(classNames, "sc-chat__text", "sc-chat__reply")}
+        >
+          <Markdown text={drafted} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** The channel's "typing": three dots in the business's bubble, while a reply or its parts come. */
+function Typing({ label, classNames }: { label: string; classNames: ClassNames }) {
+  return (
+    <p role="status" aria-label={label} className={classes(classNames, "sc-chat__typing")}>
+      <span />
+      <span />
+      <span />
+    </p>
+  );
+}
+
+/** How many of the last words heard a cut line quotes. */
+const HEARD_WORDS = 8;
+
+/** The last words of what was heard, with an ellipsis before them when there was more. */
+export function heardTail(heard: string, count = HEARD_WORDS): string {
+  const words = heard.trim().split(/\s+/).filter(Boolean);
+  if (words.length <= count) return words.join(" ");
+  return `…${words.slice(-count).join(" ")}`;
+}
+
+/**
+ * On a call, what the person heard of the agent's last words before this message, when it wasn't
+ * what was stored. After a reply (the greeting is the first), they cut it short: a quiet line
+ * under it quotes the last of what they heard. With no reply before, it was a greeting from before
+ * the API kept it: drawn here as the agent's words, where it was said.
+ */
+function Heard({
+  message,
+  after,
+  words,
+  classNames,
+}: {
+  message: Message;
+  after: Message | undefined;
+  words: ChatMessages;
+  classNames: ClassNames;
+}) {
+  const { heard } = message;
+  if (heard == null) return null;
+  if (after?.role === "assistant") {
+    return <p className={classes(classNames, "sc-chat__cut")}>{words.cut(heardTail(heard))}</p>;
+  }
+  if (heard.trim() === "") return null;
+  return (
+    <div
+      part="message message-agent"
+      className={classes(
+        classNames,
+        "sc-chat__message",
+        "sc-chat__message--agent",
+        "sc-chat__message--heard",
+      )}
+    >
+      <div className={classes(classNames, "sc-chat__text")}>
+        <p>{heard}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The person's message: their words in a bubble (a voice note's player with its words under it);
+ * the files they sent with it as chips over it, each opening where the host shows files. An
+ * answer on a surface is its words alone: the surface shows its files.
+ */
+function Said({
+  message,
+  words,
+  classNames,
+  files,
+}: {
+  message: Message;
+  words: ChatMessages;
+  classNames: ClassNames;
+  files: FileHost;
+}) {
+  const sent = message.action ? [] : (message.files ?? []);
+  const bubble = message.voice ? (
+    <VoiceNote
+      file={message.voice}
+      text={message.text}
+      parts="message message-person"
+      kind="sc-chat__message--person"
+      words={words}
+      classNames={classNames}
+      files={files}
+    />
+  ) : (
+    message.text !== "" && (
+      <p
+        part="message message-person"
+        className={classes(
+          classNames,
+          "sc-chat__message",
+          "sc-chat__message--person",
+          ...(message.action ? (["sc-chat__message--action"] as const) : []),
+        )}
+      >
+        {message.text}
+      </p>
+    )
+  );
+  if (sent.length === 0) return bubble;
+  return (
+    <div part="files" className={classes(classNames, "sc-chat__said")}>
+      <FileChips files={sent} onOpen={files.open} />
+      {bubble}
+    </div>
+  );
+}
+
+/**
+ * A voice note on a channel, either way: a bubble with the page's own player, streaming from where
+ * the file plays (asked again, once, when that ran out), and what was said under it.
+ */
+function VoiceNote({
+  file,
+  text,
+  parts,
+  kind,
+  words,
+  classNames,
+  files,
+}: {
+  file: Attachment;
+  text: string;
+  /** The bubble's parts, a host's to style. */
+  parts: string;
+  kind: "sc-chat__message--person" | "sc-chat__text";
+  words: ChatMessages;
+  classNames: ClassNames;
+  files: FileHost;
+}) {
+  const played = usePlayed(file, files.play);
+  const lost = useRef(false);
+  return (
+    <div
+      part={parts}
+      className={classes(
+        classNames,
+        ...(kind === "sc-chat__text" ? [] : (["sc-chat__message"] as const)),
+        kind,
+        "sc-chat__message--voice",
+      )}
+    >
+      <AudioPlayer
+        src={played?.url}
+        label={words.voiceNote}
+        onError={() => {
+          if (lost.current || played === null) return;
+          lost.current = true;
+          played.again();
+        }}
+      />
+      {text !== "" && (
+        <div className={classes(classNames, "sc-chat__transcript")}>
+          <Markdown text={text} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Under a person's message the agent let pass this time: that it didn't answer it, and why. */
+function Decided({
+  decision,
+  words,
+  classNames,
+}: {
+  decision: Decision | null | undefined;
+  words: ChatMessages;
+  classNames: ClassNames;
+}) {
+  const line = decisionLine(decision, words);
+  if (line === null) return null;
+  return <p className={classes(classNames, "sc-chat__decision")}>{line}</p>;
+}
+
+/**
+ * Where who answers the conversation changed: a quiet line across the log, what changed and who
+ * changed it, why, and when.
+ */
+function HandoverLine({
+  handover,
+  name,
+  words,
+  classNames,
+  code,
+}: {
+  handover: Handover;
+  name: string;
+  words: ChatMessages;
+  classNames: ClassNames;
+  /** The locale's, for when. */
+  code: string;
+}) {
+  return (
+    <p className={classes(classNames, "sc-chat__handover")}>
+      <span>
+        {handoverLine(handover, name, words)}
+        <time dateTime={handover.at}>{whenSaid(handover.at, new Date(), code)}</time>
+      </span>
+    </p>
+  );
+}
+
+/**
+ * What a person of the business wrote on the channel, on the business's side but set apart from
+ * the agent's words: a bubble of its own, the files it carried over it, and under it who wrote it
+ * and where it got to.
+ */
+function Business({
+  message,
+  words,
+  classNames,
+  files,
+}: {
+  message: Message;
+  words: ChatMessages;
+  classNames: ClassNames;
+  files: FileHost;
+}) {
+  const sent = message.files ?? [];
+  return (
+    <div className={classes(classNames, "sc-chat__business")}>
+      {sent.length > 0 && <FileChips files={sent} onOpen={files.open} />}
+      {message.text !== "" && (
+        <p
+          part="message message-business"
+          className={classes(classNames, "sc-chat__message", "sc-chat__message--business")}
+        >
+          {message.text}
+        </p>
+      )}
+      <p className={classes(classNames, "sc-chat__meta")}>
+        <span>{words.business}</span>
+        <DeliveryMark message={message} words={words} classNames={classNames} />
+      </p>
+    </div>
+  );
+}
+
+const DELIVERY_MARKS: Readonly<Record<Delivery, ReactNode>> = {
+  queued: <ClockIcon aria-hidden />,
+  sent: <CheckIcon aria-hidden weight="bold" />,
+  delivered: <ChecksIcon aria-hidden weight="bold" />,
+  read: <ChecksIcon aria-hidden weight="bold" />,
+  failed: <WarningCircleIcon aria-hidden weight="fill" />,
+};
+
+/**
+ * Where a message that went out on a channel got to, quietly: a clock while it waits to go, a
+ * check once sent, two once delivered, two in the accent once read; one that never got there in
+ * the danger tone, with why. Nothing for a message that didn't go out.
+ */
+function DeliveryMark({
+  message,
+  words,
+  classNames,
+}: {
+  message: Message;
+  words: ChatMessages;
+  classNames: ClassNames;
+}) {
+  const { delivery } = message;
+  if (delivery == null) return null;
+  const failed = delivery === "failed";
+  return (
+    <span
+      role={failed ? undefined : "img"}
+      aria-label={failed ? undefined : words.delivery[delivery]}
+      title={failed ? undefined : words.delivery[delivery]}
+      data-delivery={delivery}
+      className={classes(classNames, "sc-chat__delivery")}
+    >
+      {DELIVERY_MARKS[delivery]}
+      {failed && <span>{words.undelivered(message.delivery_error ?? null)}</span>}
+    </span>
+  );
+}
+
+interface DrawProps {
+  words: ChatMessages;
+  classNames: ClassNames;
+  components: SurfaceComponents | undefined;
+  locale: KitLocale | undefined;
+  onAction: (action: Action) => void;
+}
+
+/**
+ * The agent's message: its words, then the steps it took as a compact list (a mark for the
+ * state, the action's name, its output), then what each step drew (with what the person did on
+ * it, from `answers`), and the card for one that waits to be allowed by whoever this page speaks
+ * for (on a person's page, one the business allows is a quiet line instead); on a channel, where
+ * it got to.
+ */
+function Reply({
+  message,
+  from,
+  awaiting,
+  current,
+  answers,
+  name,
+  words,
+  classNames,
+  components,
+  locale,
+  onAction,
+  builder,
+  files,
+  who,
+  steps,
+  onChannel,
+}: DrawProps & {
+  message: Message;
+  /** It was streaming: its words go on revealing from here. None: they show whole. */
+  from: number | undefined;
+  awaiting: string | null;
+  current: boolean;
+  answers: ReadonlyMap<string, Action>;
+  name: string;
+  builder: boolean;
+  files: FileHost;
+  who: Speaker;
+  /** Whether the steps it took show, as a list under its words. */
+  steps: boolean;
+  /** On a channel: its words as the person got them, a bubble for each part, and who sent them. */
+  onChannel: boolean;
+}) {
+  const text = useReveal(message.text, from ?? message.text.length);
+  // On a channel, what the person there has got so far; elsewhere, the words as they come.
+  const { shown: said, typing } = onChannel
+    ? channelParts(message, text)
+    : { shown: [text], typing: false };
+  return (
+    <div
+      part="message message-agent"
+      className={classes(classNames, "sc-chat__message", "sc-chat__message--agent")}
+    >
+      {/* A voice note shows once it went, as each part does. */}
+      {message.voice && said.length > 0 ? (
+        <VoiceNote
+          file={message.voice}
+          text={text}
+          parts="text"
+          kind="sc-chat__text"
+          words={words}
+          classNames={classNames}
+          files={files}
+        />
+      ) : (
+        text !== "" &&
+        said.map((words, index) => (
+          <div key={index} part="text" className={classes(classNames, "sc-chat__text")}>
+            <Markdown text={words} />
+          </div>
+        ))
+      )}
+      {typing && <Typing label={words.typing} classNames={classNames} />}
+      {steps && message.steps.length > 0 && (
+        <ol className={classes(classNames, "sc-chat__steps")}>
+          {message.steps.map((step, index) => (
+            <li
+              key={step.id}
+              className={classes(
+                classNames,
+                "sc-chat__step",
+                `sc-chat__step--${shownState(step, message.steps.slice(0, index))}`,
+              )}
+            >
+              {builder ? (
+                <BuilderStep step={step} words={words} classNames={classNames} />
+              ) : (
+                <>
+                  <Mark
+                    state={step.state}
+                    action={step.action}
+                    app={step.app ?? null}
+                    classNames={classNames}
+                  />
+                  <span>{words.steps[step.action] ?? actionWords(step.action)}</span>
+                  {/* What a step answered is the model's, in its words: only why it failed. */}
+                  {step.state === "failed" && step.output !== null && <small>{step.output}</small>}
+                </>
+              )}
+            </li>
+          ))}
+        </ol>
+      )}
+      {message.steps.map(
+        (step) =>
+          step.surface && (
+            <div
+              key={step.id}
+              part="surface"
+              className={classes(
+                classNames,
+                "sc-chat__screen",
+                ...(framesItself(step.surface) ? (["sc-chat__screen--bare"] as const) : []),
+              )}
+            >
+              <Surface
+                surface={step.surface}
+                active={step.id === awaiting || current}
+                answered={answers.get(step.id)}
+                components={components}
+                classNames={classNames}
+                messages={words.kit}
+                locale={locale}
+                files={files}
+                onAction={(action) => onAction({ surface: step.id, ...action })}
+              />
+            </div>
+          ),
+      )}
+      {message.steps.map((step) => {
+        const { request } = step;
+        if (request === null) return null;
+        if (request.decides === "business" && who === "person") {
+          return (
+            <p
+              key={step.id}
+              part="confirming"
+              className={classes(classNames, "sc-chat__confirming")}
+            >
+              <ClockIcon aria-hidden />
+              <span>{words.confirming}</span>
+            </p>
+          );
+        }
+        return (
+          <Approval
+            key={step.id}
+            request={request}
+            name={name}
+            words={words}
+            classNames={classNames}
+            components={components}
+            locale={locale}
+            onAction={(action) => onAction({ surface: step.id, ...action })}
+          />
+        );
+      })}
+      {message.delivery != null && (
+        <p className={classes(classNames, "sc-chat__meta")}>
+          {onChannel && <span>{name}</span>}
+          <DeliveryMark message={message} words={words} classNames={classNames} />
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A step's state as its list shows it, after the steps `before` it in its reply: the actions of
+ * one reply run one after another, in its order, so one still `running` after another that runs
+ * is only to come (`queued`).
+ */
+export function shownState(step: Step, before: readonly Step[]): StepState | "queued" {
+  const behind = before.some((earlier) => earlier.state === "running");
+  return step.state === "running" && behind ? "queued" : step.state;
+}
+
+/**
+ * A step in the builder's look, v2's: its mark and its name, "failed" beside it when it did, and
+ * what it returned folded under a caret that shows on hover, opened on a click.
+ */
+function BuilderStep({
+  step,
+  words,
+  classNames,
+}: {
+  step: Step;
+  words: ChatMessages;
+  classNames: ClassNames;
+}) {
+  const row = (
+    <>
+      <Mark
+        state={step.state}
+        action={step.action}
+        app={step.app ?? null}
+        classNames={classNames}
+      />
+      <span>{words.steps[step.action] ?? actionWords(step.action)}</span>
+      {step.state === "failed" && <em>{words.failed}</em>}
+    </>
+  );
+  if (!step.output) return row;
+  return (
+    <details>
+      <summary>
+        {row}
+        <CaretRightIcon aria-hidden />
+      </summary>
+      <pre className={classes(classNames, "sc-chat__output")}>{step.output}</pre>
+    </details>
+  );
+}
+
+/**
+ * A step's mark on the list's line: the kind of work it is (its glyph) once it is done, a turning
+ * ring while it runs, a ring while it waits for the person, a warning when it failed.
+ */
+function Mark({
+  state,
+  action,
+  app,
+  classNames,
+}: {
+  state: StepState;
+  action: string;
+  app: StepApp | null;
+  classNames: ClassNames;
+}) {
+  const Glyph = stepGlyph(action);
+  // A connected app's step wears the app's logo once done; only an https one is loaded.
+  const logo = app?.icon && /^https:\/\//i.test(app.icon) ? app.icon : null;
+  return (
+    <span aria-hidden className={classes(classNames, "sc-chat__mark")}>
+      {state === "done" && logo !== null ? (
+        <img src={logo} alt="" loading="lazy" draggable={false} />
+      ) : state === "done" ? (
+        <Glyph />
+      ) : state === "running" ? null : (
+        <svg viewBox="0 0 14 14" fill="none">
+          {MARKS[state]}
+        </svg>
+      )}
+    </span>
+  );
+}
+
+const STROKE = { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" } as const;
+const MARKS: Record<"waiting" | "failed", ReactNode> = {
+  waiting: <circle cx="7" cy="7" r="4.75" {...STROKE} />,
+  failed: (
+    <>
+      <path d="M7 1.9l5.6 9.7H1.4L7 1.9z" {...STROKE} strokeLinejoin="round" />
+      <path d="M7 5.6v2.6" {...STROKE} />
+      <circle cx="7" cy="10" r="0.8" fill="currentColor" />
+    </>
+  ),
+};
+
+/** How long the last reply took, in whole seconds, once it is in; none before the first. */
+function useTook(pending: boolean): number | null {
+  const [took, setTook] = useState<number | null>(null);
+  const started = useRef<number | null>(null);
+  useEffect(() => {
+    if (pending) {
+      started.current = Date.now();
+      setTook(null);
+    } else if (started.current !== null) {
+      setTook(Math.max(1, Math.round((Date.now() - started.current) / 1000)));
+      started.current = null;
+    }
+  }, [pending]);
+  return took;
+}
+
+/**
+ * What is happening while a reply is on its way, in one quiet line over the composer: a dot that
+ * breathes, what goes on (`label`) under a sweeping light, the seconds it has taken, and how to
+ * stop it. A new label rises in where the last was.
+ */
+function Status({
+  label,
+  stoppable,
+  timed,
+  words,
+  classNames,
+}: {
+  label: string;
+  /** Whether the reply can be stopped from here: not on a channel, where it runs on its own. */
+  stoppable: boolean;
+  /** Whether it says the seconds so far and the key that stops it: not where steps are hidden. */
+  timed: boolean;
+  words: ChatMessages;
+  classNames: ClassNames;
+}) {
+  const [seconds, setSeconds] = useState(0);
+  useEffect(() => {
+    const started = Date.now();
+    const tick = setInterval(() => {
+      setSeconds(Math.floor((Date.now() - started) / 1000));
+    }, 1000);
+    return () => {
+      clearInterval(tick);
+    };
+  }, []);
+  return (
+    <p role="status" part="status" className={classes(classNames, "sc-chat__status")}>
+      <i aria-hidden />
+      <span key={label}>{label}…</span>
+      {timed && <small>{words.elapsed(seconds)}</small>}
+      {timed && stoppable && <kbd>{words.escape}</kbd>}
+    </p>
+  );
+}
+
+/**
+ * An action the platform holds until the person allows it, as v2's card: a head that says it
+ * needs their approval, then the sentence, what the action would take, and the two answers,
+ * drawn as a surface so the host's blocks and words apply. Drawn from the step, so it is there
+ * live and read back alike.
+ */
+function Approval({
+  request,
+  name,
+  words,
+  classNames,
+  components,
+  locale,
+  onAction,
+}: Omit<DrawProps, "onAction"> & {
+  request: Request;
+  name: string;
+  onAction: (action: SurfaceAction) => void;
+}) {
+  const sentence = words.request(name, request.action);
+  const surface: Shown = {
+    blocks: [
+      {
+        type: "fields",
+        items: Object.entries(request.input).map(([field, value]) => ({
+          label: words.inputs[field] ?? field,
+          value: typeof value === "string" ? value : JSON.stringify(value),
+        })),
+      },
+      {
+        type: "stack",
+        direction: "row",
+        children: [
+          { type: "button", label: words.allow, action: "approve", tone: "primary" },
+          { type: "button", label: words.decline, action: "decline", tone: "neutral" },
+        ],
+      },
+    ],
+    text: sentence,
+  };
+  return (
+    <div part="approval" className={classes(classNames, "sc-chat__request")}>
+      <header>
+        <ShieldWarningIcon aria-hidden />
+        {words.approval}
+      </header>
+      <div>
+        <p>{sentence}</p>
+        <Surface
+          surface={surface}
+          components={components}
+          classNames={classNames}
+          messages={words.kit}
+          locale={locale}
+          onAction={onAction}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Where the person writes: a box that grows a few lines with the text. Enter sends, Shift+Enter
+ * breaks the line; nothing goes while a reply is on its way or the socket is closed, but the
+ * person can keep writing. While the turn waits for them to act above, the box is closed and
+ * says so; while a reply is on its way, the send button is a stop button (Esc stops too). The
+ * host's `compose` is said from here, or put in the box. With `uploads`, the paperclip attaches
+ * files (a picture pasted too): they upload at once, as chips over the words, and go with them
+ * (or alone) once every one is in. With `write`, what is written goes to the host instead (a
+ * person of the business, on a channel): whatever the turn is doing, emptied once it went.
+ */
+function Composer({
+  live,
+  name,
+  words,
+  classNames,
+  actions,
+  compose,
+  taken,
+  fresh,
+  builder,
+  uploads,
+  files,
+  dictate,
+  write,
+  onSent,
+}: PartProps & {
+  actions: ReactNode;
+  compose: ChatCompose | undefined;
+  taken: RefObject<number | null>;
+  fresh: boolean;
+  builder: boolean;
+  uploads: Uploads | undefined;
+  files: FileHost;
+  dictate: Dictate | undefined;
+  write: ((text: string, files: readonly string[]) => Promise<unknown>) | undefined;
+  onSent: () => void;
+}) {
+  const [text, setText] = useState("");
+  // What is written on its way to the host's `write`: nothing more goes until it went.
+  const [writing, setWriting] = useState(false);
+  const input = useRef<HTMLTextAreaElement>(null);
+  const picker = useRef<HTMLInputElement>(null);
+  // Counts the host's texts put in the box: each one focuses it, the caret at the text's end.
+  const [placed, setPlaced] = useState(0);
+  // Waiting for the person to act above holds the composer, unless the words go to the host.
+  const held = write === undefined && live.awaiting !== null;
+  // What is dictated joins what is written, after it, and the caret goes to its end.
+  const dictation = useDictation(dictate, (words) => {
+    setText((now) => (now.trim() === "" ? words : `${now.trimEnd()} ${words}`));
+    setPlaced((count) => count + 1);
+  });
+  const listening = dictation.state === "listening";
+
+  // The host's request, once: said when it asks so (waiting for the socket to open), put in the
+  // box otherwise, or when it cannot go now (a reply on its way, a turn waiting).
+  useEffect(() => {
+    if (compose === undefined || taken.current === compose.key) return;
+    if (compose.send && !live.open) return;
+    taken.current = compose.key;
+    if (compose.send && live.say(compose.text)) {
+      onSent();
+      return;
+    }
+    setText(compose.text);
+    setPlaced((count) => count + 1);
+  }, [compose, taken, live, onSent]);
+
+  useLayoutEffect(() => {
+    const box = input.current;
+    if (placed === 0 || box === null) return;
+    box.focus();
+    box.setSelectionRange(box.value.length, box.value.length);
+  }, [placed]);
+
+  const attached = uploads?.ids ?? [];
+  const settled = uploads === undefined || uploads.waiting === null;
+  const said = text.trim() !== "" || attached.length > 0;
+  const sent = () => {
+    setText("");
+    uploads?.clear();
+    onSent();
+  };
+  const submit = () => {
+    if (!settled) return;
+    if (write === undefined) {
+      if (live.say(text, attached)) sent();
+      return;
+    }
+    if (writing || !said) return;
+    setWriting(true);
+    write(text.trim(), attached)
+      .then(sent, () => undefined)
+      .finally(() => {
+        setWriting(false);
+      });
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+    event.preventDefault();
+    submit();
+  };
+  const ready =
+    write === undefined
+      ? live.open && !live.pending && !held && settled && said
+      : !writing && settled && said;
+  const invitation = write === undefined ? words.placeholder(name, fresh) : words.write;
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+      part="composer"
+      className={classes(classNames, "sc-chat__composer")}
+    >
+      {uploads && uploads.items.length > 0 && (
+        <div part="files" className={classes(classNames, "sc-chat__files")}>
+          <UploadChips uploads={uploads} host={files} />
+        </div>
+      )}
+      <textarea
+        ref={input}
+        rows={1}
+        value={text}
+        maxLength={20_000}
+        disabled={held}
+        // The builder takes the keyboard as it opens, as v2's did: it is there to be told things.
+        autoFocus={builder}
+        aria-label={invitation}
+        placeholder={
+          held ? words.awaiting : live.open || write !== undefined ? invitation : words.connecting
+        }
+        onChange={(event) => {
+          setText(event.target.value);
+        }}
+        onKeyDown={onKeyDown}
+        part="input"
+        // A picture pasted (a screenshot, an image copied) is attached; words pasted stay words.
+        onPaste={(event) => {
+          const pasted = [...event.clipboardData.files];
+          if (!uploads || pasted.length === 0) return;
+          if (event.clipboardData.getData("text/plain") !== "") return;
+          event.preventDefault();
+          uploads.add(pasted);
+        }}
+        className={classes(classNames, "sc-chat__input")}
+      />
+      {uploads && (
+        <>
+          <button
+            type="button"
+            aria-label={words.attach}
+            title={words.attach}
+            disabled={held}
+            onClick={() => picker.current?.click()}
+            part="attach"
+            className={classes(classNames, "sc-chat__attach")}
+          >
+            <PaperclipIcon aria-hidden />
+          </button>
+          <input
+            ref={picker}
+            type="file"
+            multiple
+            hidden
+            tabIndex={-1}
+            onChange={(event) => {
+              uploads.add([...(event.target.files ?? [])]);
+              event.target.value = "";
+            }}
+          />
+        </>
+      )}
+      <div part="actions" className={classes(classNames, "sc-chat__actions")}>
+        {dictation.available && (
+          <button
+            type="button"
+            aria-label={listening ? words.dictateStop : words.dictate}
+            title={listening ? words.dictateStop : words.dictate}
+            aria-pressed={listening}
+            data-state={dictation.state}
+            disabled={held || dictation.state === "writing"}
+            onClick={dictation.toggle}
+            part="dictate"
+            className={classes(classNames, "sc-chat__dictate")}
+          >
+            <MicrophoneIcon aria-hidden weight={listening ? "fill" : "regular"} />
+          </button>
+        )}
+        {dictation.state !== "idle" && (
+          <span
+            role="status"
+            data-state={dictation.state}
+            className={classes(classNames, "sc-chat__dictation")}
+          >
+            {words.dictation[dictation.state]}
+          </span>
+        )}
+        {actions}
+      </div>
+      {live.pending && write === undefined ? (
+        <button
+          type="button"
+          aria-label={words.stop}
+          title={`${words.stop} (Esc)`}
+          onClick={() => live.stop()}
+          part="stop"
+          className={classes(classNames, "sc-chat__stop")}
+        >
+          <StopIcon weight="fill" aria-hidden />
+        </button>
+      ) : (
+        <button
+          type="submit"
+          aria-label={words.send}
+          title={words.send}
+          disabled={!ready}
+          part="send"
+          className={classes(classNames, "sc-chat__send")}
+        >
+          <ArrowUpIcon weight="bold" aria-hidden />
+        </button>
+      )}
+    </form>
+  );
+}