@textui/chat 0.6.0

package/src/blocks.ts

@@ -0,0 +1,73 @@
+import type { ChatToolCall } from './types.js';
+
+/**
+ * What the transcript draws, one entry per row group.
+ *
+ * A turn is not a block: an agent turn is a header, some prose, a reasoning
+ * fold and a row per tool call, and each of those scrolls, folds and selects
+ * on its own. The client that owns the turns turns them into these.
+ */
+export type Block =
+  | { kind: 'said'; id: string; turnId: string; text: string }
+  | {
+    kind: 'header'; id: string; turnId: string; model?: string;
+    settings?: string;
+    meta: string; state: 'running' | 'complete' | 'cancelled' | 'failed';
+  }
+  | { kind: 'prose'; id: string; turnId: string; content: string; streaming: boolean }
+  | { kind: 'reasoning'; id: string; turnId: string; content: string; streaming: boolean }
+  | { kind: 'notice'; id: string; turnId: string; content: string }
+  | { kind: 'failure'; id: string; turnId: string; content: string; resumable: boolean }
+  | { kind: 'tool'; id: string; turnId: string; call: ChatToolCall }
+  | { kind: 'queued'; id: string; messageId: string; text: string };
+
+/** The blocks a cursor can land on: the ones that open, or can be withdrawn. */
+export function selectable(block: Block): boolean {
+  return block.kind === 'tool' || block.kind === 'reasoning' || block.kind === 'queued';
+}
+
+/**
+ * Everything in a block that a person could be looking for.
+ *
+ * A tool call is its name, its command and what came back, because all three
+ * are things somebody searches a transcript for - the file a command touched
+ * is in the output and nowhere else. A header is the model and the settings,
+ * which is how "where did I switch to opus" is answered.
+ */
+export function blockText(block: Block): string {
+  switch (block.kind) {
+    case 'said':
+    case 'queued':
+      return block.text;
+    case 'prose':
+    case 'reasoning':
+    case 'notice':
+    case 'failure':
+      return block.content;
+    case 'header':
+      return [block.model, block.settings, block.meta].filter(Boolean).join(' ');
+    case 'tool':
+      return [
+        block.call.name, block.call.toolName, block.call.input,
+        block.call.intention, block.call.outcome, block.call.output,
+        ...(block.call.files ?? []),
+      ].filter(Boolean).join(' ');
+  }
+}
+
+/**
+ * Where in the conversation a query appears, as block indices in order.
+ *
+ * Case-insensitive, and a blank query matches nothing rather than everything:
+ * a find with no term is a find that has not been typed yet, and lighting up
+ * every block for it is the opposite of what the box is for.
+ */
+export function findBlocks(blocks: Block[], query: string): number[] {
+  const needle = query.trim().toLowerCase();
+  if (needle === '') return [];
+  const found: number[] = [];
+  blocks.forEach((block, index) => {
+    if (blockText(block).toLowerCase().includes(needle)) found.push(index);
+  });
+  return found;
+}

package/src/bubble.tsx

@@ -0,0 +1,266 @@
+import type { BoxProps, RenderOutput, ResolvedTheme, SemanticVariant, StyleColor } from '@textui/core';
+import { defineComponent, useFrame, useTheme } from '@textui/core';
+import { Column, Divider, MarkdownView, Row } from '@textui/widgets';
+
+/**
+ * One thing said, and the two ways it is still being said.
+ *
+ * A bubble in a terminal is not a rounded rectangle. It is a gutter that says
+ * who is speaking and a body that owns the rest of the width - because the
+ * width is 80 cells and half of it spent on alignment is half the conversation
+ * gone.
+ */
+
+export type Speaker = 'user' | 'agent' | 'system';
+
+export interface GutterProps extends BoxProps {
+  /**
+   * The transcript's cursor is on this block.
+   *
+   * A heavy bar in the accent colour, down the whole block. A different glyph
+   * rather than only a different colour, so it survives a session without
+   * colour - which a background does not.
+   */
+  active?: boolean;
+  /**
+   * No rule at rest. For the blocks that are not something said - a tool
+   * row, a turn header - and still need the column, so the bar has a place
+   * to be drawn and their text starts where the prose does.
+   */
+  blank?: boolean;
+}
+
+/**
+ * The glyph the transcript's cursor is drawn with, down the left of the block
+ * it is on.
+ *
+ * The `bold` border's left rule: the heavy line of the same family as the
+ * rule at rest, from the theme, so an ascii terminal gets the glyph it can
+ * draw rather than a question mark. One place, because the gutter draws it
+ * and so does whatever glyph already holds a block's left column - the
+ * header's bullet, the user line's chevron - while the cursor is there.
+ */
+export function cursorBar(theme: ResolvedTheme): string {
+  return theme.borderChars('bold').left;
+}
+
+/**
+ * The rule down the left of everything one speaker said.
+ *
+ * A box that fills rather than a `text`: the text is one row tall and the
+ * paragraph beside it is nine, so a rule written as a character marks the
+ * first line of a wrapped answer and abandons the rest of it.
+ */
+export const Gutter: (props: GutterProps) => RenderOutput = defineComponent<GutterProps>('ChatGutter', (props) => {
+  const { active, blank, ...rest } = props;
+  const theme = useTheme();
+  const fill = active ? cursorBar(theme) : blank ? ' ' : theme.borderChars().left;
+  // `alignSelf` because `Row` centres its children: a one-cell box in a
+  // centred row is one cell tall, wherever the rule was meant to reach.
+  return <box width={1} alignSelf="stretch" fill={fill} fg={active ? 'accent' : 'borderSubtle'} {...rest} />;
+});
+
+export interface ChatBubbleProps extends BoxProps {
+  speaker: Speaker;
+  /** The name, when the speaker is not enough: a model, a person, a host. */
+  author?: string;
+  /** Right of the author line: a time, a duration, a model. */
+  meta?: string;
+  tone?: SemanticVariant;
+  /**
+   * The transcript's cursor is on this block: the bar runs down its left
+   * column, in place of the speaker's glyph on the first row and in the
+   * gutter under it.
+   */
+  active?: boolean;
+  children?: unknown;
+}
+
+const SPEAKER: Record<Speaker, { fg: StyleColor; label: string }> = {
+  user: { fg: 'primary', label: 'you' },
+  agent: { fg: 'accent', label: 'agent' },
+  system: { fg: 'muted', label: 'system' },
+};
+
+export const ChatBubble: (props: ChatBubbleProps) => RenderOutput =
+  defineComponent<ChatBubbleProps>('ChatBubble', (props) => {
+    const { speaker, author, meta, tone, active, children, ...rest } = props;
+    const theme = useTheme();
+    const look = SPEAKER[speaker];
+    const glyph = speaker === 'user' ? theme.glyphs.chevronRight
+      : speaker === 'agent' ? theme.glyphs.bulletFilled
+        : theme.glyphs.info;
+
+    // The gutter is one column of glyph and one of rule. It is what makes a
+    // wrapped paragraph read as one person talking rather than as the page
+    // starting again, and it survives losing colour - which a tinted
+    // background does not. The cursor is drawn in it for the same reason,
+    // rather than as a background over what was said.
+    return (
+      <Column {...rest}>
+        <Row gap={1}>
+          {/* The glyph's cell is the block's gutter on this row, so the bar
+              takes it rather than a second column before it: the block does
+              not move when the cursor arrives. */}
+          <text content={active ? cursorBar(theme) : glyph} fg={active ? 'accent' : tone ?? look.fg} />
+          <text content={author ?? look.label} bold fg={tone ?? look.fg} />
+          {meta ? <text content={meta} fg="subtle" flex={1} truncate="end" /> : <text content="" flex={1} />}
+        </Row>
+        <Row gap={1} flex={1}>
+          <Gutter {...(active ? { active: true } : {})} />
+          <Column flex={1} gap={1}>{children}</Column>
+        </Row>
+      </Column>
+    );
+  });
+
+export interface StreamingTextProps extends BoxProps {
+  content: string;
+  /** Still arriving. Draws a caret and keeps it on the last word. */
+  streaming?: boolean;
+  quiet?: boolean;
+  maxLines?: number;
+  /**
+   * Draw it as markdown, or as the characters that arrived.
+   *
+   * Markdown unless told otherwise. An application with a switch for this
+   * passes it here; nothing is read from anywhere else.
+   */
+  markdown?: boolean;
+  /** Text to pick out, for the find box. Coloured wherever it appears. */
+  match?: string;
+}
+
+/**
+ * Text that is still being said.
+ *
+ * The caret is part of the content rather than a node beside it, because a
+ * caret placed after the block sits under the last line instead of at the end
+ * of it - and the end of the sentence is the only place it means anything.
+ *
+ * It blinks on the theme's own ticker, so animation being off (a pipe, a test,
+ * a `--static` capture) leaves a steady caret rather than a missing one.
+ */
+export const StreamingText: (props: StreamingTextProps) => RenderOutput =
+  defineComponent<StreamingTextProps>('StreamingText', (props) => {
+    const { content, streaming, quiet, maxLines, markdown, match, ...rest } = props;
+    const theme = useTheme();
+    // Only while something is arriving. A ticker marks its component dirty
+    // whether or not the frame it produces differs, so an unconditional one
+    // here meant every settled paragraph in the transcript asked the
+    // application to redraw twice a second, for ever - a conversation that
+    // got heavier to sit in the longer it got.
+    const frame = useFrame(2, { enabled: streaming === true });
+    const caret = streaming && frame % 2 === 0 ? theme.glyphs.caret : '';
+    const rendered = markdown ?? true;
+    const shown = streaming ? `${content}${caret}` : content;
+
+    // Raw is a `text`, not a `MarkdownView` that was told not to parse: the
+    // point of turning it off is to see the characters that arrived, and
+    // anything that lays the document out has already decided some of them
+    // were structure. `wrap` rather than truncate, because the lines being
+    // read are the long ones - a fenced block and a table are exactly what is
+    // wider than the pane.
+    if (!rendered) {
+      return (
+        <text
+          content={shown}
+          wrap="word"
+          {...(quiet ? { fg: 'muted' as const } : {})}
+          {...(match ? { match } : {})}
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      <MarkdownView
+        content={shown}
+        {...(quiet ? { quiet: true } : {})}
+        {...(maxLines !== undefined ? { maxLines } : {})}
+        {...(match ? { match } : {})}
+        {...rest}
+      />
+    );
+  });
+
+export interface ReasoningBlockProps extends BoxProps {
+  content: string;
+  expanded?: boolean;
+  streaming?: boolean;
+  /** Shown collapsed: "thought for 12s". */
+  summary?: string;
+  /** Passed to the text once opened. */
+  markdown?: boolean;
+  /** Text to pick out, for the find box. Handed to the text inside it. */
+  match?: string;
+  /** Clicking the summary row opens it, and closes it again. */
+  onToggle?(): void;
+  /**
+   * The transcript's cursor is on this block.
+   *
+   * The block takes the `selected` background and its words turn `inverted`,
+   * the theme's own rule for that tone: a quiet grey on the selection blue is
+   * a row you can find and cannot read.
+   */
+  active?: boolean;
+}
+
+/**
+ * What the agent was thinking, folded away.
+ *
+ * Reasoning is prose the host sends like any other, and it is not what the
+ * reader came for - so it is one row until it is asked for. Dropping it
+ * instead loses the only account of *why* a turn did what it did.
+ *
+ * Open, it ends with a rule. The thought is set in the same quiet tone as the
+ * answer's own gutter, and without a line under it the reader cannot tell
+ * where the thinking stopped and the answer began.
+ */
+export const ReasoningBlock: (props: ReasoningBlockProps) => RenderOutput =
+  defineComponent<ReasoningBlockProps>('ReasoningBlock', (props) => {
+    const { content, expanded, streaming, summary, markdown, match, onToggle, active, ...rest } = props;
+    const theme = useTheme();
+    const chevron = expanded ? theme.glyphs.chevronDown : theme.glyphs.chevronRight;
+    const words = content.trim().split(/\s+/).filter(Boolean).length;
+    const fg = active ? 'inverted' : 'subtle';
+
+    return (
+      <Column {...rest} {...(active ? { bg: 'selected' as const } : {})}>
+        <Row
+          gap={1}
+          {...(onToggle ? { onClick: onToggle } : {})}
+          // The whole row lights up, as a tool row does: the row is the thing
+          // that opens.
+          style={{ hover: { bg: 'hover' } }}
+        >
+          <text content={chevron} fg={fg} />
+          <text content={summary ?? (streaming ? 'thinking' : `thought, ${words} words`)} fg={fg} italic />
+        </Row>
+        {expanded ? (
+          <Row gap={1}>
+            <text content=" " />
+            {/* `quiet` sets every run to `muted` itself, which is exactly the
+                grey that vanishes on the selection; on it the text inherits
+                `inverted` from here instead. */}
+            <StreamingText
+              content={content}
+              flex={1}
+              {...(active ? { fg: 'inverted' as const } : { quiet: true })}
+              {...(streaming ? { streaming: true } : {})}
+              {...(markdown !== undefined ? { markdown } : {})}
+              {...(match ? { match } : {})}
+            />
+          </Row>
+        ) : null}
+        {expanded ? (
+          // Under the text, not the chevron: the same one-cell lead the text
+          // has, so the rule closes what it opened.
+          <Row gap={1}>
+            <text content=" " />
+            <Divider flex={1} />
+          </Row>
+        ) : null}
+      </Column>
+    );
+  });

package/src/composer.tsx

@@ -0,0 +1,302 @@
+import type { BoxProps, Rect, RenderOutput } from '@textui/core';
+import { defineComponent, useApp, useEffect, useSize, useState, useTheme } from '@textui/core';
+import type { ListItem } from '@textui/widgets';
+import { Column, Divider, List, TextArea } from '@textui/widgets';
+import type { ChatCommand, ChatCompletion } from './types.js';
+import { ComposerBar, composerRows } from './controls.js';
+import type { ComposerOption } from './controls.js';
+import { useReportMeasure } from './measure.js';
+
+/**
+ * Rows the completion menu shows at once, at most.
+ *
+ * A cap on the box's height and not on the list: what does not fit is
+ * scrolled to. The menu sits above the composer and takes its room from it,
+ * so on a short terminal this is not the number that applies - see `fits`.
+ */
+const VISIBLE = 8;
+
+/**
+ * Rows the composer itself takes: two border, two divider, the field and the
+ * two control rows under it. Eight menu rows on a terminal twelve high left
+ * four for all of that and drew an empty box - a menu on top of a field with
+ * no room to type in it.
+ *
+ * Counted with both control rows; a bar that draws one gives the row back.
+ */
+const COMPOSER_ROWS = 7;
+
+/** The menu's own frame, which is height the list does not get. */
+const MENU_BORDER = 2;
+
+/**
+ * Rows the menu may have here, which is whatever the composer can spare.
+ *
+ * The floor is there because a terminal can always be made too short for
+ * both; below it the composer gives way, since a menu with nothing under it
+ * is the same dead end from the other side.
+ */
+const fits = (height: number, rows: 1 | 2): number =>
+  Math.max(3, Math.min(VISIBLE, height - (COMPOSER_ROWS - (2 - rows)) - MENU_BORDER));
+
+/**
+ * What you type, and one line saying what it will be sent as.
+ *
+ * The field itself is `TextArea` from the catalog - growing, scrolling and
+ * giving back the keys it does not want is not a chat problem. What is here is
+ * the rest of a composer: what enter means while a turn is running, the slash
+ * menu over what has already been typed, and the control row.
+ *
+ * The row used to be four ghost buttons naming their own keys - `send enter`,
+ * `newline alt+enter`, `stop ctrl+c`, `commands ctrl+p` - which spent the one
+ * line under the field on a keyboard legend. The keys belong in the footer,
+ * which already lists them and changes with where the focus is. The line under
+ * the field is worth more as *what is about to happen*: which harness, which
+ * model, what it may do without asking, where it runs.
+ */
+
+export interface ChatComposerProps extends BoxProps {
+  value: string;
+  onChange(value: string): void;
+  onSubmit(value: string): void;
+  onCancel?(): void;
+  onHistory?(direction: -1 | 1): void;
+  /** Left off the front of the field: out of the composer entirely. */
+  onLeave?(): void;
+  /** A turn is running: enter queues rather than sends, and stop is offered. */
+  running?: boolean;
+  queued?: number;
+  /** The control row. Each is a value, and each may open a picker. */
+  options?: ComposerOption[];
+  onOption?(option: ComposerOption, anchorId: string): void;
+  placeholder?: string;
+  /** Offered when the draft starts with a slash. */
+  commands?: ChatCommand[];
+  /**
+   * One of `commands` was chosen from the slash menu.
+   *
+   * The whole command rather than its id, because the two kinds go different
+   * places and only the command knows which it is. A `client` command is
+   * *ours*: it opens a screen, changes a setting or picks a theme, and none of
+   * that is a message - sending it down the session channel would put
+   * "/theme" in the transcript and ask the agent to make sense of it. A
+   * `session` command is a skill the host contributed, and the only way to
+   * invoke one is to send its name as the message.
+   *
+   * A slash the menu does not match is left alone and sent, which is how a
+   * command the host offers but did not list still reaches it.
+   */
+  onCommand?(command: ChatCommand): void;
+  /**
+   * What the host offers to complete the word the caret is in.
+   *
+   * Fetched rather than filtered: a path is a path on the *host's*
+   * filesystem, so which of them match what has been typed is a question only
+   * it can answer, and the answer changes with every keystroke.
+   */
+  paths?: ChatCompletion[];
+  /** One of `paths` was chosen. The range it replaces is on the completion. */
+  onPath?(path: ChatCompletion): void;
+  autoFocus?: boolean;
+  focusId?: string;
+  /** Where the composer is on screen whenever that changes, and `null` once it is gone. */
+  onMeasure?(rect: Rect | null): void;
+}
+
+export const ChatComposer: (props: ChatComposerProps) => RenderOutput =
+  defineComponent<ChatComposerProps>('ChatComposer', (props) => {
+    const {
+      value, onChange, onSubmit, onCancel, onHistory, onLeave, running, queued = 0,
+      options = [], onOption, placeholder, commands = [], onCommand, paths = [], onPath, autoFocus,
+      focusId = 'chat.composer', onMeasure, ...rest
+    } = props;
+    const theme = useTheme();
+    const app = useApp();
+
+    // A slash menu is a completion over what is already typed, not a mode.
+    const slash = value.startsWith('/') && !value.includes(' ') ? value.slice(1).toLowerCase() : null;
+    const found = slash === null ? [] : commands
+      .filter((command) => command.id.toLowerCase().includes(slash) || command.title.toLowerCase().includes(slash))
+      // What the host contributed first. A person typing a slash into a chat
+      // is usually reaching for a skill, and the client's own commands - which
+      // are also in the palette, on their own key - would otherwise fill the
+      // rows that are visible without scrolling.
+      .sort((a, b) => (a.kind === b.kind ? 0 : a.kind === 'session' ? -1 : 1));
+    const byId = new Map(found.map((command) => [command.id, command]));
+    /*
+     * One menu, and whichever list is live fills it.
+     *
+     * The two cannot both be: a slash menu is a draft that *starts* with a
+     * slash, and a path menu is a word the caret is in that starts with an
+     * at-sign. Two menus would be two boxes above one field.
+     */
+    const offered: ListItem[] = found.length > 0
+      ? found.map((command) => ({
+        id: command.id,
+        label: `/${command.id}`,
+        ...(command.description ? { description: command.description } : {}),
+        // Where it came from, when something did: two plugins can contribute
+        // a `/review`, and the title alone does not say which this is.
+        meta: command.from ?? command.title,
+      }))
+      : paths.map((path) => ({
+        id: path.insertText,
+        label: path.insertText,
+        ...(path.description ? { description: path.description } : {}),
+      }));
+    const byInsert = new Map(paths.map((path) => [path.insertText, path]));
+
+    /*
+     * Escape closes the menu before it does anything else.
+     *
+     * The menu is drawn from the draft, so there is no state to close - which
+     * is why escape used to pass straight through it to the field and then to
+     * the screen, and typing `/` and pressing escape left for the session
+     * list. What is remembered is the draft it was dismissed at: the menu
+     * stays shut for that exact text and comes back the moment another
+     * character makes it a different question.
+     *
+     * And it is forgotten as soon as there is no menu to dismiss. Remembering
+     * the text alone was not enough: dismissing at `/`, deleting it and typing
+     * `/` again produced the same draft, so the menu stayed shut for a
+     * question that had been asked afresh. Clearing when nothing matches ties
+     * the dismissal to one continuous menu rather than to a string that can
+     * come back.
+     */
+    const [dismissedAt, setDismissedAt] = useState<string | null>(null);
+    const empty = offered.length === 0;
+    useEffect(() => {
+      if (empty && dismissedAt !== null) setDismissedAt(null);
+    }, [empty]);
+    const matches = dismissedAt === value ? [] : offered;
+
+    // Which completion is under the cursor. Clamped rather than reset, so a
+    // list that shrinks as more is typed keeps a valid row instead of
+    // snapping back to the top on every keystroke.
+    const [highlight, setHighlight] = useState(0);
+    const index = Math.max(0, Math.min(highlight, matches.length - 1));
+    const chosen = matches[index];
+
+    /*
+     * What goes after the name of the command under the cursor.
+     *
+     * A row is the name, so a command that takes an argument has nowhere in
+     * the list to say so, and `/autocompact` reads as complete when it is
+     * not. It goes on the rule under the list, where it is one line for the
+     * whole menu and changes as the highlight moves rather than being
+     * repeated down every row.
+     */
+    const usage = chosen === undefined ? undefined : byId.get(chosen.id)?.hint;
+    const hint = usage === undefined ? undefined : `/${chosen?.id ?? ''} ${usage}`;
+
+    /**
+     * Up and down, while the menu is open.
+     *
+     * They arrive as `onOverflow` - the field reports the key rather than
+     * handling it once there is no row above or below the caret, which for a
+     * `/word` draft is immediately. The same pair walks the history when there
+     * is no menu, and the menu is the nearer of the two things they could
+     * mean.
+     */
+    const step = (direction: -1 | 1): void => {
+      setHighlight((matches.length + index + direction) % matches.length);
+    };
+
+    // Where this box is. The slash menu grows it upward, so whoever wants to
+    // stand clear of it is told every time rather than once.
+    useReportMeasure(onMeasure);
+
+    // How tall the menu may be here. Read unconditionally: it is a hook, and
+    // the menu is drawn from a branch.
+    const rows = fits(useSize().height, composerRows(options));
+
+    return (
+      <Column {...rest} gap={0}>
+        {matches.length > 0 ? (
+          // The theme's border, never a named one. A hardcoded `single` draws
+          // a box-drawing frame inside an ascii one on a terminal that cannot
+          // do either, and an airy theme gets a line it deliberately does not
+          // draw anywhere else.
+          <Column border={theme.border} padding={[0, 1]}>
+            <List
+              items={matches}
+              focusable={false}
+              selectedId={chosen?.id}
+              /*
+               * A window over all of them, not the first six.
+               *
+               * The list scrolls to keep the selected row in view, and the
+               * selection here is driven from outside - so walking past the
+               * sixth moves the window rather than stopping. Truncating the
+               * items instead made up and down cycle the six that survived,
+               * with no way to reach a seventh: a host that answers thirty
+               * paths for `@src/` offered six of them and looked like it had
+               * no more.
+               */
+              visibleRows={hint === undefined ? rows : rows - 1}
+              marker
+              // Not focusable, so this is the click: a completion clicked is a
+              // completion chosen, and there is nowhere for a merely
+              // highlighted row to lead.
+              onSelect={(id: string) => {
+                const command = byId.get(id);
+                if (command) { onCommand?.(command); return; }
+                const path = byInsert.get(id);
+                if (path) onPath?.(path);
+              }}
+              emptyMessage="no command"
+            />
+            {hint === undefined ? null : <Divider label={hint} />}
+          </Column>
+        ) : null}
+
+        <Column border={theme.border}>
+          <Divider dim />
+          <TextArea
+            value={value}
+            onChange={onChange}
+            // A slash the menu matched runs here; anything else is a message,
+            // which is what lets a command the agent offers through.
+            onSubmit={(next: string) => {
+              const command = chosen ? byId.get(chosen.id) : undefined;
+              if (command && onCommand) { onCommand(command); return; }
+              // A highlighted path completes rather than sends: enter on a
+              // menu row means "that one", and a draft half-way through a
+              // path is not a message anybody meant to send.
+              const path = chosen ? byInsert.get(chosen.id) : undefined;
+              if (path && onPath) { onPath(path); return; }
+              onSubmit(next);
+            }}
+            onCancel={() => {
+              if (matches.length > 0) { setDismissedAt(value); return; }
+              onCancel?.();
+            }}
+            onOverflow={(direction: -1 | 1) => {
+              if (matches.length > 0) { step(direction); return; }
+              onHistory?.(direction);
+            }}
+            {...(onLeave ? { onEdge: (edge: 'start' | 'end') => { if (edge === 'start') onLeave(); } } : {})}
+            placeholder={placeholder
+              ?? (running ? 'The agent is working. Type to queue a message.' : 'Ask the agent anything…')}
+            focusId={focusId}
+            // The caret is the one thing on this screen saying where typing
+            // goes, and this field is the point of the screen.
+            caretTone="accent"
+            {...(autoFocus ? { autoFocus: true } : {})}
+          />
+          {/* Inside the same frame, so the field and what it will be sent as
+              read as one control rather than two stacked boxes. */}
+          <Divider dim />
+          <ComposerBar
+            options={options}
+            onOpen={(option, anchorId) => onOption?.(option, anchorId)}
+            onSend={() => onSubmit(value)}
+            onLeave={() => app.focus.focus(focusId)}
+            {...(running ? { running: true } : {})}
+            queued={queued}
+            sendDisabled={value.trim() === ''}
+          />
+        </Column>
+      </Column>
+    );
+  });