@textui/chat 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Softov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# @textui/chat
+
+[![npm](https://img.shields.io/npm/v/@textui/chat?label=%40textui%2Fchat)](https://www.npmjs.com/package/@textui/chat) [![license](https://img.shields.io/npm/l/@textui/chat)](https://github.com/softov/textui/blob/main/LICENSE)
+
+The components of an agent chat: the transcript, what is said in it, what the agent did, the composer, the block that waits on a person, the sessions and the diffs.
+Built on [`@textui/core`](https://www.npmjs.com/package/@textui/core) and [`@textui/widgets`](https://www.npmjs.com/package/@textui/widgets), and on nothing that talks to a host.
+
+```bash
+npm install @textui/chat
+```
+
+```tsx
+import { useState } from '@textui/core';
+import { Column } from '@textui/widgets';
+import { ChatComposer, ChatTranscript } from '@textui/chat';
+import type { Block } from '@textui/chat';
+
+const blocks: Block[] = [
+  { kind: 'said', id: 's1', turnId: 't1', text: 'Rename the package.' },
+  { kind: 'header', id: 'h2', turnId: 't2', model: 'claude', meta: '4.1s', state: 'complete' },
+  { kind: 'prose', id: 'p2', turnId: 't2', content: 'Done. Three files changed.', streaming: false },
+];
+
+function Chat() {
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const [draft, setDraft] = useState('');
+  return (
+    <Column flex={1}>
+      <ChatTranscript
+        blocks={blocks}
+        expanded={expanded}
+        onToggle={(id) => setExpanded({ ...expanded, [id]: !expanded[id] })}
+        flex={1}
+      />
+      <ChatComposer value={draft} onChange={setDraft} onSubmit={() => setDraft('')} />
+    </Column>
+  );
+}
+```
+
+## Its own shapes
+
+Every component takes a shape of this package's own - a `ChatToolCall`, a `ChatSession` whose status is already a word, a tone and a glyph, a `ChatPendingInput` with its questions - and nothing else.
+There is no protocol here.
+A client that speaks the Agent Host Protocol, or anything else, maps its records onto these and the components never learn where a session came from.
+The field names follow AHP's where one exists, so that mapping is a pick rather than a rename.
+
+Nothing is read from the store.
+The markdown switch is `StreamingText`'s `markdown` prop, the draft answers of a question are `ChatHitl`'s `draft` and `onDraft`, the row under the composer is `ChatInputStatus`'s `status`, and where the composer and the waiting block sit is reported through `onMeasure`.
+Whoever mounts them holds all of that, wherever it likes.
+
+## What is here
+
+| | |
+|---|---|
+| `ChatTranscript`, `Block` | The conversation as blocks in a `Feed`: said, header, prose, reasoning, notice, failure, tool, queued. `match` colours a found term through every block and `pinCursor` keeps the cursor in view while a search moves it |
+| `blockText`, `findBlocks` | The words of a block, and the indexes of the blocks a query is found in, which a find walks the cursor through |
+| `ChatBubble`, `Gutter`, `StreamingText`, `ReasoningBlock` | One thing said, and the two ways it is still being said |
+| `ToolCallRow` | What the agent did, one row per call, opening onto its input and output. A `ChatToolCall` names its tool (`toolName`, where the id differs from the display name) and, while it runs, says what it is doing (`progress`) on the row |
+| `ChatComposer`, `ComposerBar`, `ComposerOption` | The field, the slash and path menus sized to the terminal, and the control rows of chips. A `ChatCommand.hint` is drawn under the menu for the command under the cursor; a `ComposerOption.where` chip puts where the session runs on a second row, and escape on any chip is `onLeave`, back to the field |
+| `ChatHitl`, `ConfirmRequest`, `QuestionForm`, `ChatInputStatus` | The block that means the agent is stopped, waiting on a person |
+| `SessionList`, `ConnectionBadge` | The catalogue, and which host it came from. A `ChatSession` row says its project, branch and `pullRequest` (a label the host formats, `#412 merged`) |
+| `ChatSessionHead`, `SessionDetails` | The head over a conversation, and the pane where long values are read whole |
+| `FileDiff`, `diffLines`, `toLines` | One file, both sides lined up |
+| `openPicker` | The command palette, anchored above the chip that asked; a command with nothing to ask is run instead |
+| `settingIcon`, `valueIcon` | The marks beside a setting and beside its values, down to ascii |
+
+## What is not here
+
+A host connection, a controller, terminals, changesets, automations, the fake host.
+Those are an application's, and the application these came from is [softov/ahpc](https://github.com/softov/ahpc).
+
+## Runtime
+
+No dependencies beyond `@textui/core` and `@textui/widgets`, and no `node:` imports.
+Node 22+ and Bun.

package/dist/blocks.d.ts

@@ -0,0 +1,75 @@
+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 declare function selectable(block: Block): boolean;
+/**
+ * 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 declare function blockText(block: Block): string;
+/**
+ * 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 declare function findBlocks(blocks: Block[], query: string): number[];
+//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,MAAM,KAAK,GACb;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC1D;IACA,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;CACtE,GACC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAClF;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GACtF;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC/D;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GACpF;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,YAAY,CAAA;CAAE,GAChE;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAEhD;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAmB9C;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAQnE"}

package/dist/blocks.js

@@ -0,0 +1,50 @@
+/** The blocks a cursor can land on: the ones that open, or can be withdrawn. */
+export function selectable(block) {
+    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) {
+    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, query) {
+    const needle = query.trim().toLowerCase();
+    if (needle === '')
+        return [];
+    const found = [];
+    blocks.forEach((block, index) => {
+        if (blockText(block).toLowerCase().includes(needle))
+            found.push(index);
+    });
+    return found;
+}

package/dist/bubble.d.ts

@@ -0,0 +1,122 @@
+import type { BoxProps, RenderOutput, ResolvedTheme, SemanticVariant } from '@textui/core';
+/**
+ * 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 declare function cursorBar(theme: ResolvedTheme): string;
+/**
+ * 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 declare const Gutter: (props: GutterProps) => RenderOutput;
+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;
+}
+export declare const ChatBubble: (props: ChatBubbleProps) => RenderOutput;
+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 declare const StreamingText: (props: StreamingTextProps) => RenderOutput;
+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 declare const ReasoningBlock: (props: ReasoningBlockProps) => RenderOutput;
+//# sourceMappingURL=bubble.d.ts.map

package/dist/bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.d.ts","sourceRoot":"","sources":["../src/bubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAc,MAAM,cAAc,CAAC;AAIvG;;;;;;;GAOG;AAEH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAEtD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,YAO3C,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,eAAO,MAAM,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,YA8BjD,CAAC;AAEL,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,YAyCvD,CAAC;AAEL,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,YA8CzD,CAAC"}

package/dist/bubble.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useFrame, useTheme } from '@textui/core';
+import { Column, Divider, MarkdownView, Row } from '@textui/widgets';
+/**
+ * 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) {
+    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 = defineComponent('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 _jsx("box", { width: 1, alignSelf: "stretch", fill: fill, fg: active ? 'accent' : 'borderSubtle', ...rest });
+});
+const SPEAKER = {
+    user: { fg: 'primary', label: 'you' },
+    agent: { fg: 'accent', label: 'agent' },
+    system: { fg: 'muted', label: 'system' },
+};
+export const ChatBubble = defineComponent('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 (_jsxs(Column, { ...rest, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: active ? cursorBar(theme) : glyph, fg: active ? 'accent' : tone ?? look.fg }), _jsx("text", { content: author ?? look.label, bold: true, fg: tone ?? look.fg }), meta ? _jsx("text", { content: meta, fg: "subtle", flex: 1, truncate: "end" }) : _jsx("text", { content: "", flex: 1 })] }), _jsxs(Row, { gap: 1, flex: 1, children: [_jsx(Gutter, { ...(active ? { active: true } : {}) }), _jsx(Column, { flex: 1, gap: 1, children: children })] })] }));
+});
+/**
+ * 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 = defineComponent('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 (_jsx("text", { content: shown, wrap: "word", ...(quiet ? { fg: 'muted' } : {}), ...(match ? { match } : {}), ...rest }));
+    }
+    return (_jsx(MarkdownView, { content: shown, ...(quiet ? { quiet: true } : {}), ...(maxLines !== undefined ? { maxLines } : {}), ...(match ? { match } : {}), ...rest }));
+});
+/**
+ * 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 = defineComponent('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 (_jsxs(Column, { ...rest, ...(active ? { bg: 'selected' } : {}), children: [_jsxs(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' } }, children: [_jsx("text", { content: chevron, fg: fg }), _jsx("text", { content: summary ?? (streaming ? 'thinking' : `thought, ${words} words`), fg: fg, italic: true })] }), expanded ? (_jsxs(Row, { gap: 1, children: [_jsx("text", { content: " " }), _jsx(StreamingText, { content: content, flex: 1, ...(active ? { fg: 'inverted' } : { quiet: true }), ...(streaming ? { streaming: true } : {}), ...(markdown !== undefined ? { markdown } : {}), ...(match ? { match } : {}) })] })) : null, expanded ? (
+            // Under the text, not the chevron: the same one-cell lead the text
+            // has, so the rule closes what it opened.
+            _jsxs(Row, { gap: 1, children: [_jsx("text", { content: " " }), _jsx(Divider, { flex: 1 })] })) : null] }));
+});

package/dist/composer.d.ts

@@ -0,0 +1,67 @@
+import type { BoxProps, Rect, RenderOutput } from '@textui/core';
+import type { ChatCommand, ChatCompletion } from './types.js';
+import type { ComposerOption } from './controls.js';
+/**
+ * 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 declare const ChatComposer: (props: ChatComposerProps) => RenderOutput;
+//# sourceMappingURL=composer.d.ts.map

package/dist/composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.d.ts","sourceRoot":"","sources":["../src/composer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAmCpD;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,SAAS,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpC,qEAAqE;IACrE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,QAAQ,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,6EAA6E;IAC7E,MAAM,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yFAAyF;IACzF,SAAS,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,YAoMrD,CAAC"}