@textui/chat 0.6.0

package/src/sessionhead.tsx

@@ -0,0 +1,105 @@
+import type { BoxProps, RenderOutput, SemanticVariant } from '@textui/core';
+import { defineComponent, useTheme } from '@textui/core';
+import { Column, KeyValue, Row } from '@textui/widgets';
+import type { ChatSession } from './types.js';
+
+/**
+ * What this conversation *is*, at the top of it.
+ *
+ * The first thing in the transcript rather than a band above it, and that is
+ * the whole design: a caption pinned outside the scrolling region costs a row
+ * of the conversation on every screen for ever, so it has to earn each one -
+ * which meant one line, which meant dropping most of what it is for. Scrolled
+ * with the conversation it costs nothing after the first screen and can say
+ * everything, the way the top of a printed letter does.
+ *
+ * The identifiers are the point. They are what gets pasted into a shell or a
+ * bug report, they are exactly what does not fit anywhere else, and the
+ * catalogue's detail pane - the only other place they appear - is a screen
+ * away from the conversation they belong to.
+ */
+
+export interface ChatSessionHeadProps extends BoxProps {
+  session: ChatSession;
+  /** What the last turn ran on. A session has no model; each message has one. */
+  model?: string;
+  /** The chat uri, when the host has said which one this dispatches to. */
+  chat?: string | null;
+  /** The settings in force, by the host's own labels. */
+  settings?: { label: string; value: string }[];
+  /**
+   * Who else the host says is in this session.
+   *
+   * This client is in the list too - it adds itself on opening the view - so
+   * a session with nobody else in it has one entry and says nothing, which is
+   * the ordinary case.
+   */
+  present?: { clientId: string; displayName?: string }[];
+}
+
+/**
+ * A timestamp a person can read, in whatever this machine calls a date.
+ *
+ * The host sends ISO, which is unambiguous and not what anybody wants to read
+ * off a caption. An unparseable one is passed through rather than shown as
+ * "Invalid Date": what the host said is more useful than what we made of it.
+ */
+function when(iso: string | undefined): string {
+  if (!iso) return '';
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return iso;
+  return at.toLocaleString(undefined, {
+    year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+export const ChatSessionHead: (props: ChatSessionHeadProps) => RenderOutput =
+  defineComponent<ChatSessionHeadProps>('ChatSessionHead', (props) => {
+    const { session, model, chat, settings = [], present = [], ...rest } = props;
+    const theme = useTheme();
+    const status = session.status;
+    const started = when(session.createdAt);
+    const updated = when(session.modifiedAt);
+
+    // Only what is known. A row of empty values is what building this from a
+    // fixed list produces, and it reads as a session the host would not talk
+    // about rather than as one nobody has asked yet.
+    const rows: { label: string; value: string; tone?: SemanticVariant }[] = [
+      { label: 'Harness', value: [session.provider, model].filter(Boolean).join(`  ${theme.glyphs.separator}  `) },
+      ...settings.filter((setting) => setting.value).map((setting) => ({ ...setting })),
+      { label: 'Workspace', value: session.workingDirectories.map((dir) => dir.replace(/^file:\/\//, '')).join(', ') },
+      // Only when the host says one. A blank branch row reads as a detached
+      // head rather than as a host that does not report branches.
+      ...(session.branch ? [{ label: 'Branch', value: session.branch }] : []),
+      {
+        label: 'Started',
+        value: started && updated && updated !== started
+          ? `${started}  ${theme.glyphs.separator}  updated ${updated}`
+          : started,
+      },
+      // Last, and in full. A uri you can read half of is worse than one you
+      // cannot see at all: it looks like the whole thing.
+      { label: 'Session', value: session.id },
+      ...(chat ? [{ label: 'Chat', value: chat }] : []),
+      // Only when somebody else is here. One entry is this client, and a row
+      // saying you are the person reading it is a row that tells nobody
+      // anything.
+      ...(present.length > 1
+        ? [{
+          label: 'Here',
+          value: present.map((one) => one.displayName ?? one.clientId).join(`  ${theme.glyphs.separator}  `),
+        }]
+        : []),
+    ].filter((row) => row.value !== '');
+
+    return (
+      <Column {...rest} gap={0}>
+        <Row gap={1}>
+          <text content={theme.glyphs[status.glyph]} fg={status.tone as SemanticVariant} shrink={0} />
+          <text content={session.title} bold wrap="word" flex={1} />
+          <text content={status.label} fg={status.tone as SemanticVariant} shrink={0} />
+        </Row>
+        <KeyValue items={rows} />
+      </Column>
+    );
+  });

package/src/sessions.tsx

@@ -0,0 +1,146 @@
+import type { BoxProps, RenderOutput, SemanticVariant } from '@textui/core';
+import { defineComponent, stringWidth, useTheme } from '@textui/core';
+import type { ListItem, ListItemState } from '@textui/widgets';
+import { Badge, Column, List, Marquee, Row } from '@textui/widgets';
+import type { ChatSession } from './types.js';
+
+/**
+ * The catalogue.
+ *
+ * Still a `List` - the selection, the keys, the window and the highlight are
+ * all the list's, and reimplementing them here is what the transcript already
+ * proved is a mistake. What is ours is the row, because a session does not fit
+ * the one-line shape a list gives you for free.
+ *
+ * It takes two lines, and the first one is why. A title, a harness, a
+ * workspace and a status sharing a pane that is also sharing the terminal
+ * with the detail panel leaves every one of them truncated:
+ * `Draft replies for desk-produ…` beside `1b444e78-d050-4fb5-a5…` names
+ * neither the conversation nor the directory it is in. So the title gets the
+ * width, and everything that qualifies it goes underneath.
+ */
+
+export interface SessionListProps extends BoxProps {
+  sessions: ChatSession[];
+  selectedId?: string | null;
+  onSelect?(id: string): void;
+  onOpen?(id: string): void;
+  emptyMessage?: string;
+  focusId?: string;
+  autoFocus?: boolean;
+}
+
+export const SessionList: (props: SessionListProps) => RenderOutput =
+  defineComponent<SessionListProps>('SessionList', (props) => {
+    const { sessions, selectedId, onSelect, onOpen, emptyMessage, focusId, autoFocus, ...rest } = props;
+    const theme = useTheme();
+
+    const dot = `  ${theme.glyphs.separator}  `;
+
+    const items: ListItem[] = sessions.map((session) => {
+      const status = session.status;
+      const changes = session.changes;
+      return {
+        id: session.id,
+        // Glyph first, so the one that wants a person is findable in a piped
+        // log, a 16-colour session and by a reader who cannot see the colour.
+        icon: theme.glyphs[status.glyph],
+        label: session.title,
+        // The second line, in the order it gets read: which harness, then
+        // where, then what it has to show for it.
+        //
+        // The harness stands where a model would: a catalogue row does not
+        // carry one, and a model per row would be a subscription per row.
+        description: [
+          session.provider,
+          // The project, then the branch it is on - a catalogue spanning
+          // several repositories is read by which one each row is in, and a
+          // list of them all on `main` is a list that needs opening to tell
+          // apart. Then the pull request the branch became, where the host
+          // found one: a merged branch is a finished row.
+          [session.project, session.branch, session.pullRequest].filter(Boolean).join(' '),
+          changes?.files
+            ? `${changes.files} files  +${changes.additions ?? 0} -${changes.deletions ?? 0}`
+            : '',
+          // What the host says it is doing, in its own words. Last, because it
+          // is the one that is usually not there.
+          session.activity ?? '',
+          // Why it is here at all, when nobody started it. Without this a
+          // session that appeared at nine in the morning is a row with no
+          // account of itself, sitting among rows somebody typed.
+          session.origin ?? '',
+          status.archived ? 'archived' : '',
+        ].filter(Boolean).join(dot),
+        meta: status.label,
+        tone: status.tone as SemanticVariant,
+      };
+    });
+
+    return (
+      <List
+        items={items}
+        itemHeight={2}
+        renderItem={(item: ListItem, state: ListItemState) => (
+          <Column>
+            <Row gap={1}>
+              <text
+                content={item.icon ?? ''}
+                {...(state.selected ? {} : { fg: item.tone })}
+                shrink={0}
+              />
+              {/* The row under the cursor reads itself out; the rest are
+                  truncated and still. A title is the one thing on this screen
+                  that is arbitrarily long and the one thing you are looking
+                  for, so the row you have stopped on says all of it. */}
+              <Marquee content={item.label} active={state.selected && state.focused} flex={1} />
+              <text content={item.meta ?? ''} {...(state.selected ? {} : { fg: 'muted' })} shrink={0} />
+            </Row>
+            <Row>
+              {/* Under the title, not under the glyph: the second line
+                  qualifies the thing the first one names. */}
+              <text content={' '.repeat(stringWidth(item.icon ?? '') + 1)} shrink={0} />
+              <Marquee
+                content={item.description ?? ''}
+                active={state.selected && state.focused}
+                {...(state.selected ? {} : { fg: 'muted' as const })}
+                flex={1}
+              />
+            </Row>
+          </Column>
+        )}
+        {...(selectedId ? { selectedId } : {})}
+        emptyMessage={emptyMessage ?? 'No sessions on this host'}
+        onSelect={(id: string) => onSelect?.(id)}
+        onActivate={(id: string) => onOpen?.(id)}
+        {...(focusId ? { focusId } : {})}
+        {...(autoFocus ? { autoFocus: true } : {})}
+        {...rest}
+      />
+    );
+  });
+
+export interface ConnectionBadgeProps extends BoxProps {
+  url: string;
+  state: 'connecting' | 'connected' | 'offline';
+  sessions?: number;
+}
+
+/** Which host, and whether it is answering. */
+export const ConnectionBadge: (props: ConnectionBadgeProps) => RenderOutput =
+  defineComponent<ConnectionBadgeProps>('ConnectionBadge', (props) => {
+    const { url, state, sessions, ...rest } = props;
+    const theme = useTheme();
+    const look = {
+      connected: { tone: 'success' as SemanticVariant, glyph: theme.glyphs.bulletFilled },
+      connecting: { tone: 'warning' as SemanticVariant, glyph: theme.glyphs.bulletHalf },
+      offline: { tone: 'danger' as SemanticVariant, glyph: theme.glyphs.cross },
+    }[state];
+
+    return (
+      <Row gap={1} {...rest}>
+        <text content={look.glyph} fg={look.tone} />
+        <text content={url} fg="muted" truncate="start" />
+        {sessions !== undefined ? <Badge label={`${sessions} sessions`} tone="muted" /> : null}
+      </Row>
+    );
+  });

package/src/toolcall.tsx

@@ -0,0 +1,136 @@
+import type { BoxProps, RenderOutput, SemanticVariant } from '@textui/core';
+import { defineComponent, useTheme } from '@textui/core';
+import { Badge, Column, MarkdownView, Row } from '@textui/widgets';
+import type { ChatToolCall } from './types.js';
+
+/**
+ * A tool call, as a row.
+ *
+ * Twenty of these in a turn look identical unless the *command* is on the row,
+ * so the input is the row and the display name is a prefix. What it meant to
+ * do is markdown, like everything else a host writes for a person; what came
+ * back is not, and is shown as it arrived.
+ *
+ * The status is a glyph and a colour together. A 16-colour session, a piped
+ * log and a colourblind reader all lose the colour and keep the glyph.
+ *
+ * In the transcript it sits beside a blank gutter rather than inside the rule,
+ * with its status glyph where the header's bullet is. A tool call is something
+ * the agent *did*; indenting it inside the rule filed it under what the agent
+ * was saying, which is the one thing it is not.
+ */
+
+export interface ToolCallRowProps extends BoxProps {
+  call: ChatToolCall;
+  expanded?: boolean;
+  /** The transcript's cursor is on this row. */
+  active?: boolean;
+  /** Clicking the row opens it. */
+  onToggle?(): void;
+}
+
+type StatusGlyph = 'bulletHollow' | 'bulletHalf' | 'bulletFilled' | 'check' | 'cross';
+
+const LOOK: Record<string, { tone: SemanticVariant; glyph: StatusGlyph }> = {
+  pending: { tone: 'muted', glyph: 'bulletHollow' },
+  'pending-confirmation': { tone: 'warning', glyph: 'bulletHalf' },
+  running: { tone: 'accent', glyph: 'bulletFilled' },
+  completed: { tone: 'success', glyph: 'check' },
+  failed: { tone: 'danger', glyph: 'cross' },
+  cancelled: { tone: 'muted', glyph: 'cross' },
+};
+
+/**
+ * The input, as one line.
+ *
+ * A tool's arguments are often JSON, and JSON arrives with newlines in it. Put
+ * straight on the row, a three-line object makes the row three lines tall and
+ * every other cell in it vertically centred - so the name floats beside the
+ * middle line of a brace-delimited block. The whole thing is on its own lines
+ * once the row is opened; this is the part that fits beside a name.
+ */
+function oneLine(text: string): string {
+  return text.replace(/\s+/g, ' ').trim();
+}
+
+export const ToolCallRow: (props: ToolCallRowProps) => RenderOutput =
+  defineComponent<ToolCallRowProps>('ToolCallRow', (props) => {
+    const { call, expanded, active, onToggle, ...rest } = props;
+    const theme = useTheme();
+    const look = LOOK[call.status] ?? { tone: 'muted' as SemanticVariant, glyph: 'bulletHollow' as StatusGlyph };
+    const glyph = theme.glyphs[look.glyph];
+    const chevron = expanded ? theme.glyphs.chevronDown : theme.glyphs.chevronRight;
+    const failed = call.status === 'failed' || (call.exitCode !== undefined && call.exitCode !== 0);
+    // What it is doing beats what it was asked, for as long as it is doing
+    // it: a subagent's row that says "look for the bug" for a minute is a
+    // row that says nothing, and the host has a line for what it is up to.
+    const summary = oneLine(call.progress ?? call.input ?? call.intention ?? '');
+    // Only when there is something under it. A chevron on a row that opens on
+    // to nothing is a promise the row cannot keep.
+    const opens = Boolean(call.intention ?? call.input ?? call.output ?? call.outcome
+      ?? (call.files && call.files.length > 0));
+
+    // On the selection the name, the summary and the chevron take `inverted`,
+    // the theme's own rule for that tone; the status glyph keeps its own, since
+    // a check that turned white would stop saying "completed".
+    return (
+      <Column {...rest} {...(active ? { bg: 'selected' as const } : {})}>
+        <Row
+          gap={1}
+          {...(opens && onToggle ? { onClick: onToggle } : {})}
+          // The whole row lights up, not the glyph the pointer happens to be
+          // over: the row is the thing that opens.
+          style={{ hover: { bg: 'hover' } }}
+        >
+          <text content={glyph} fg={look.tone} />
+          <text content={call.name} bold {...(active ? { fg: 'inverted' as const } : {})} />
+          <text content={summary} fg={active ? 'inverted' : 'muted'} flex={1} truncate="middle" />
+          {call.status === 'pending-confirmation' ? <Badge label="asks" tone="warning" icon={theme.glyphs.warning} /> : null}
+          {failed ? <Badge label={`exit ${call.exitCode ?? 1}`} tone="danger" /> : null}
+          {/* Trailing, like a disclosure triangle - the row says what it is
+              first and how to see more of it last. */}
+          {opens ? <text content={chevron} fg={active ? 'inverted' : 'subtle'} /> : null}
+        </Row>
+
+        {expanded ? (
+          // Indented to the row's own text, which starts one glyph and one gap
+          // in - so what opened out of a row lines up under it.
+          <Column padding={[0, 0, 0, 2]} gap={0}>
+            {/* Only when it says more than the row already does. A host
+                whose intention is the tool's own name, or the input verbatim,
+                is repeating the header and the block below it. */}
+            {call.intention && call.intention !== call.name && call.intention !== call.input
+              ? <MarkdownView content={call.intention} quiet />
+              : null}
+            {call.input ? (
+              // On its own lines, wrapped as written. This is where the JSON
+              // goes: whole, and not sharing a row with the name.
+              <Column bg="surfaceAlt" padding={[0, 1]}>
+                {call.input.split('\n').map((line, i) => (
+                  <text key={i} content={line} fg="text" wrap="word" />
+                ))}
+              </Column>
+            ) : null}
+            {call.output ? (
+              <Column>
+                {call.output.split('\n').slice(0, 12).map((line, i) => (
+                  <text key={i} content={line} fg="muted" truncate="end" />
+                ))}
+                {call.output.split('\n').length > 12 ? (
+                  <text content={`${theme.glyphs.ellipsis} ${call.output.split('\n').length - 12} more lines`} fg="subtle" />
+                ) : null}
+              </Column>
+            ) : null}
+            {call.files && call.files.length > 0 ? (
+              <Column>
+                {call.files.map((file) => (
+                  <text key={file} content={`${theme.glyphs.chevronRight} ${file}`} fg="info" />
+                ))}
+              </Column>
+            ) : null}
+            {call.outcome ? <text content={call.outcome} fg="subtle" /> : null}
+          </Column>
+        ) : null}
+      </Column>
+    );
+  });

package/src/transcript.tsx

@@ -0,0 +1,221 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+import { defineComponent, useTheme } from '@textui/core';
+import { Feed, Row } from '@textui/widgets';
+import type { Block } from './blocks.js';
+import { ChatBubble, Gutter, ReasoningBlock, StreamingText, cursorBar } from './bubble.js';
+import { ToolCallRow } from './toolcall.js';
+
+/**
+ * The conversation, as blocks in a feed.
+ *
+ * There is no scrolling in this file. `Feed` owns the viewport, the cursor and
+ * the tail it follows, because none of that is about chat: a transcript, an
+ * activity stream and a list of search results with snippets are the same
+ * problem, which is "entries that are not one line tall". What is left here is
+ * the only part that *is* about chat - which block draws as what.
+ */
+
+export interface ChatTranscriptProps extends BoxProps {
+  blocks: Block[];
+  expanded: Record<string, boolean>;
+  onToggle(id: string): void;
+  /** Which block the cursor is on. Held by the screen, like every other state. */
+  cursor?: number;
+  onCursor?(index: number): void;
+  /**
+   * What the find box is looking for.
+   *
+   * Passed down to be coloured where it appears, not to decide what is drawn:
+   * every block stays where it was and the ones holding the term light up, so
+   * a reader keeps the conversation around a hit instead of a filtered list
+   * of the lines that matched.
+   */
+  match?: string;
+  /**
+   * Keep the cursor in view rather than only when it moves.
+   *
+   * For the find box, which drives the cursor: its first hit is often the
+   * block the cursor is already on, and a feed that only scrolls on a change
+   * would leave that one off screen while the box counted it.
+   */
+  pinCursor?: boolean;
+  /**
+   * What this conversation is, as the first thing in it.
+   *
+   * Inside the scrolling region rather than pinned above it: a caption outside
+   * costs a row of the conversation on every screen for ever, so it has to
+   * earn each one - which is what forces it down to a line and then down to
+   * less than it was for. Here it costs nothing after the first screen.
+   *
+   * It is not a block. The cursor walks the conversation and there is nothing
+   * to do to a caption, so it sits ahead of the indices rather than in them.
+   */
+  head?: RenderOutput;
+  focusId?: string;
+  /** Prose and reasoning as markdown (the default), or as the characters that arrived. */
+  markdown?: boolean;
+}
+
+export const ChatTranscript: (props: ChatTranscriptProps) => RenderOutput =
+  defineComponent<ChatTranscriptProps>('ChatTranscript', (props) => {
+    const {
+      blocks, expanded, onToggle, cursor, onCursor, head, markdown, match, pinCursor,
+      focusId = 'chat.transcript', ...rest
+    } = props;
+
+    // The caption is an entry the feed scrolls and the cursor does not visit,
+    // so every index the feed reports is one further along than the block it
+    // stands for. Converted here, once, rather than at each of the three
+    // places that would otherwise each have to remember.
+    const lead = head ? 1 : 0;
+
+    return (
+      <Feed
+        focusId={focusId}
+        // Page up from the composer means the conversation above it. There is
+        // nothing else on this screen those keys could be for, and taking the
+        // keyboard off the field to use them is what a reader is avoiding.
+        pageKeys="always"
+        {...(cursor !== undefined ? { selectedIndex: cursor + lead } : {})}
+        {...(pinCursor ? { pinSelection: true } : {})}
+        {...(onCursor ? { onSelect: (index: number) => onCursor(Math.max(0, index - lead)) } : {})}
+        onActivate={(index: number) => {
+          const block = blocks[index - lead];
+          if (block) onToggle(block.id);
+        }}
+        {...rest}
+      >
+        {head ?? null}
+        {blocks.map((block) => (
+          <BlockView
+            key={block.id}
+            block={block}
+            expanded={expanded[block.id] ?? false}
+            active={cursor !== undefined && blocks[cursor]?.id === block.id}
+            onToggle={() => onToggle(block.id)}
+            {...(markdown !== undefined ? { markdown } : {})}
+            {...(match ? { match } : {})}
+          />
+        ))}
+      </Feed>
+    );
+  });
+
+const BlockView = defineComponent<{
+  block: Block;
+  expanded: boolean;
+  active: boolean;
+  onToggle(): void;
+  markdown?: boolean;
+  match?: string;
+}>('ChatBlockView', ({ block, expanded, active, onToggle, markdown, match }) => {
+  const asMarkdown = markdown !== undefined ? { markdown } : {};
+  // Spread rather than passed, so a block with no search over it carries no
+  // extra prop and its text node is compared unchanged.
+  const hit = match ? { match } : {};
+  const theme = useTheme();
+
+  // Every block has a one-cell left column the cursor is drawn in. The blocks
+  // that are something said keep the rule they draw there; a block whose
+  // first row already carries a glyph in that column - the header's bullet,
+  // the user line's chevron - has that glyph as its gutter cell, and the bar
+  // takes its place while the cursor is on it; the rest lead with a blank
+  // gutter, so their text starts where the prose does.
+  const mark = active ? { active: true } : {};
+  switch (block.kind) {
+    case 'said':
+      // The blank row is the turn boundary. A uniform gap between every block
+      // would space a paragraph from the sentence it belongs to just as much
+      // as it spaces one speaker from the next.
+      return (
+        <ChatBubble speaker="user" padding={[1, 0, 0, 0]} {...mark}>
+          <text content={block.text} wrap="word" {...hit} />
+        </ChatBubble>
+      );
+    case 'header':
+      return (
+        <Row gap={1} padding={[1, 0, 0, 0]}>
+          <text
+            content={active ? cursorBar(theme) : theme.glyphs.bulletFilled}
+            fg={active || block.state === 'running' ? 'accent' : 'muted'}
+          />
+          <text content={block.model ?? 'agent'} bold fg="accent" />
+          {/* What this turn was asked for, where the host said. A thinking
+              level is chosen per turn and holds from that turn onwards, so
+              two answers from one model are two different questions. */}
+          {block.settings ? <text content={block.settings} fg="subtle" /> : null}
+          <text content={block.meta} fg="subtle" flex={1} />
+          {block.state === 'cancelled' ? <text content="stopped" fg="warning" /> : null}
+          {block.state === 'failed' ? <text content="failed" fg="danger" /> : null}
+        </Row>
+      );
+    case 'prose':
+      return (
+        <Row gap={1}>
+          <Gutter {...mark} />
+          <StreamingText content={block.content} streaming={block.streaming} flex={1} {...asMarkdown} {...hit} />
+        </Row>
+      );
+    case 'reasoning':
+      return (
+        <Row gap={1}>
+          <Gutter {...mark} />
+          <ReasoningBlock
+            content={block.content}
+            expanded={expanded}
+            streaming={block.streaming}
+            onToggle={onToggle}
+            flex={1}
+            {...mark}
+            {...asMarkdown}
+            {...hit}
+          />
+        </Row>
+      );
+    case 'notice':
+      return (
+        <Row gap={1}>
+          <Gutter blank {...mark} />
+          <text content={theme.glyphs.info} fg="info" />
+          <text content={block.content} fg="muted" wrap="word" flex={1} {...hit} />
+        </Row>
+      );
+    // Not a notice. A notice is the harness saying something in passing, and
+    // this is the turn stopping - so it takes the danger tone and says whether
+    // there is anything to carry on from.
+    case 'failure':
+      return (
+        <Row gap={1}>
+          <Gutter blank {...mark} />
+          <text content={theme.glyphs.cross} fg="danger" />
+          <text content={block.content} fg="danger" wrap="word" flex={1} {...hit} />
+          {block.resumable ? <text content="resumable" fg="subtle" /> : null}
+        </Row>
+      );
+    case 'tool':
+      // No rule. A tool call is something the agent *did*, not something it
+      // said, so its status glyph sits where the header's bullet is - rather
+      // than inside the rule as though it were a paragraph of the answer.
+      return (
+        <Row gap={1}>
+          <Gutter blank {...mark} />
+          <ToolCallRow call={block.call} expanded={expanded} active={active} onToggle={onToggle} flex={1} />
+        </Row>
+      );
+    case 'queued':
+      // Not sent. It reads as a message unless it says so, and "I typed that
+      // and nothing happened" is the complaint that follows.
+      return (
+        <Row gap={1}>
+          <Gutter blank {...mark} />
+          <text content={theme.glyphs.chevronRight} fg={active ? 'accent' : 'subtle'} />
+          <text content={block.text} fg="subtle" italic wrap="word" flex={1} {...hit} />
+          {/* What the cursor being here is *for*. A queue you cannot take
+              anything out of is a list of messages you have to let happen. */}
+          <text content={active ? 'enter drops it' : 'queued'} fg="warning" />
+        </Row>
+      );
+    default:
+      return null;
+  }
+});