@softov/ahpc 0.1.0

package/dist/src/view/bood/types.js

@@ -0,0 +1,57 @@
+/**
+ * What a creature is, before anyone draws one.
+ *
+ * A creature file writes art and nothing else - no measuring, no padding, no
+ * component. The registry does the arithmetic once, at registration, so that
+ * a drawing is checked the moment it joins the bood rather than the first
+ * time somebody renders it on a narrow terminal.
+ */
+/** What the figure is doing. The one thing worth reading from across the room. */
+export const MOODS = ['happy', 'sad', 'thinking', 'executing', 'error'];
+/**
+ * How much room the figure gets.
+ *
+ * Three sizes rather than one scaled one, because art does not scale: a cat
+ * shrunk to five cells is a smudge, and a cat *redrawn* at five cells is a
+ * cat. Each form is drawn by hand and each one is allowed to look different.
+ */
+export const FORMS = ['draw', 'block', 'inline'];
+/**
+ * The ceiling each form is held to.
+ *
+ * `block` and `inline` exist to be placed next to something else - a header, a
+ * status row, a list item - and a caller who has budgeted seven cells cannot
+ * have that budget decided by whichever creature came up. So the bound is the
+ * contract, and `registerCreature` refuses art that breaks it.
+ *
+ * `draw` has no width bound on purpose. The figures run from seven cells wide
+ * to seventeen and the outline *is* the animal; a creature that fits a
+ * template is a template wearing a hat.
+ */
+export const BOUNDS = {
+    draw: { rows: 8, cols: Infinity },
+    block: { rows: 3, cols: 5 },
+    inline: { rows: 1, cols: 7 },
+};
+/**
+ * What the body is doing, as distinct from what the mood is.
+ *
+ * Nothing sets one of these. A pose is derived from the physics every tick -
+ * `poseOf` in `motion.ts` - because a body that is told what it is doing and a
+ * body that is falling are two authorities on one fact, and the visible half
+ * of that disagreement is a figure walking through the air.
+ */
+export const POSES = [
+    'idle', 'sit', 'walk', 'jump', 'fall', 'fly', 'land', 'held', 'sleep', 'alarm',
+];
+/**
+ * Which way it is pointed, which is latched rather than read.
+ *
+ * `front` is the one a creature returns to: after a couple of seconds standing
+ * still it turns and looks at you. It is also the fallback, so a species that
+ * has no left view of a pose falls through to its front one and still reads
+ * right rather than drawing nothing.
+ */
+export const FACINGS = ['front', 'right', 'left'];
+/** Identity, for the type inference. A creature file is data, and stays data. */
+export const defineCreature = (spec) => spec;

package/dist/src/view/bubble.d.ts

@@ -0,0 +1,75 @@
+import type { BoxProps, RenderOutput, 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';
+/**
+ * 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: BoxProps) => 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. */
+    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.
+     *
+     * Unstated it follows the application's own switch, which is what the key
+     * that toggles it moves - so a caller has to say something here only when
+     * it wants one or the other regardless.
+     */
+    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 {
+    /** Text to pick out, for the find box. Handed to the text inside it. */
+    match?: string;
+    content: string;
+    expanded?: boolean;
+    streaming?: boolean;
+    /** Shown collapsed: "thought for 12s". */
+    summary?: string;
+}
+/**
+ * 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.
+ */
+export declare const ReasoningBlock: (props: ReasoningBlockProps) => RenderOutput;

package/dist/src/view/bubble.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useFrame, useStoreValue, useTheme } from '@textui/core';
+import { Column, MarkdownView, Row } from '@textui/widgets';
+import { MARKDOWN } from '../state.js';
+/**
+ * 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 theme = useTheme();
+    // `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: theme.borderChars().left, fg: "borderSubtle", ...props });
+});
+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.
+    return (_jsxs(Column, { ...rest, ...(active ? { bg: 'selected' } : {}), children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: glyph, fg: 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, {}), _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 : '';
+    // Read unconditionally: `??` short-circuits, and a hook that is only
+    // reached when a prop is absent is a hook that changes position between
+    // renders. The prop still wins - it is just decided after the read.
+    const preference = useStoreValue(MARKDOWN, true) ?? true;
+    const rendered = markdown ?? preference;
+    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.
+ */
+export const ReasoningBlock = defineComponent('ReasoningBlock', (props) => {
+    const { content, expanded, streaming, summary, match, ...rest } = props;
+    const theme = useTheme();
+    const chevron = expanded ? theme.glyphs.chevronDown : theme.glyphs.chevronRight;
+    const words = content.trim().split(/\s+/).filter(Boolean).length;
+    return (_jsxs(Column, { ...rest, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: chevron, fg: "subtle" }), _jsx("text", { content: summary ?? (streaming ? 'thinking' : `thought, ${words} words`), fg: "subtle", italic: true })] }), expanded ? (_jsxs(Row, { gap: 1, children: [_jsx("text", { content: " " }), _jsx(StreamingText, { content: content, quiet: true, flex: 1, ...(streaming ? { streaming: true } : {}), ...(match ? { match } : {}) })] })) : null] }));
+});

package/dist/src/view/changes.d.ts

@@ -0,0 +1,35 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+import type { Changeset } from '../ahp/types.js';
+/**
+ * What the session changed on disk.
+ *
+ * Not read off the tool calls: a provider decides whether to send `fileEdit`
+ * blocks and this one sends none, so a client that reads them reports that a
+ * turn which created one file and rewrote another touched nothing. The account
+ * is the changeset channel, and `computing` is worth showing rather than
+ * swallowing - a partial answer read as a complete one is the wrong kind of
+ * wrong.
+ *
+ * A `List` rather than a column of rows, because the rows became openable: the
+ * selection, the keys, the window and the highlight are the list's, and a
+ * hand-rolled cursor over a changeset of two hundred files is the mistake the
+ * catalogue already made once.
+ */
+export interface ChangesListProps extends BoxProps {
+    changes: Changeset;
+    /** Enter on a row. Absent leaves the list a read-only account. */
+    onOpen?(uri: string): void;
+    /** The cursor moved. What a key acting on "this file" needs. */
+    onSelect?(uri: string): void;
+    /**
+     * Whether to draw the read column at all.
+     *
+     * Per changeset, because the flag is: a host says which of its changesets it
+     * will keep a tick for, and a checkbox on one it will not is a control that
+     * silently does nothing.
+     */
+    reviewable?: boolean;
+    focusId?: string;
+    autoFocus?: boolean;
+}
+export declare const ChangesList: (props: ChangesListProps) => RenderOutput;

package/dist/src/view/changes.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useTheme } from '@textui/core';
+import { Column, EmptyState, List, Marquee, Row } from '@textui/widgets';
+export const ChangesList = defineComponent('ChangesList', (props) => {
+    const { changes, onOpen, onSelect, reviewable, focusId, autoFocus, ...rest } = props;
+    const theme = useTheme();
+    if (changes.files.length === 0) {
+        return (_jsx(EmptyState, { title: changes.status === 'computing' ? 'Working out what changed' : 'Nothing changed', message: changes.status === 'computing' ? 'The host is still computing the changeset.' : 'No file was created, edited or deleted.', ...rest }));
+    }
+    const byUri = new Map(changes.files.map((file) => [file.uri, file]));
+    const items = changes.files.map((file) => {
+        const kind = !file.before ? 'new' : !file.after ? 'deleted' : 'edited';
+        return {
+            id: file.uri,
+            icon: kind === 'new' ? '+' : kind === 'deleted' ? '-' : theme.glyphs.chevronRight,
+            label: file.uri.replace(/^file:\/\//, ''),
+            meta: `+${file.diff.added} -${file.diff.removed}`,
+            tone: (kind === 'new' ? 'success' : kind === 'deleted' ? 'danger' : 'muted'),
+        };
+    });
+    return (_jsxs(Column, { ...rest, children: [changes.status === 'computing' ? (_jsx("text", { content: `${theme.glyphs.ellipsis} still computing - this is not the whole list`, fg: "warning" })) : null, _jsx(List, { items: items, flex: 1, renderItem: (item, state) => (_jsxs(Row, { gap: 1, children: [reviewable ? (_jsx("text", { content: byUri.get(item.id)?.reviewed === true ? theme.glyphs.checkboxOn : theme.glyphs.checkboxOff, ...(byUri.get(item.id)?.reviewed === true ? { fg: 'success' } : { fg: 'muted' }), shrink: 0 })) : null, _jsx("text", { content: item.icon ?? '', ...(state.selected ? {} : { fg: item.tone }), shrink: 0 }), _jsx(Marquee, { content: item.label, active: state.selected && state.focused, truncate: "start", flex: 1 }), _jsx("text", { content: `+${byUri.get(item.id)?.diff.added ?? 0}`, fg: "success", shrink: 0 }), _jsx("text", { content: `-${byUri.get(item.id)?.diff.removed ?? 0}`, fg: "danger", shrink: 0 })] })), ...(onOpen ? { onActivate: (uri) => onOpen(uri) } : {}), ...(onSelect ? { onSelect: (uri) => onSelect(uri) } : {}), ...(focusId ? { focusId } : {}), ...(autoFocus ? { autoFocus: true } : {}), emptyMessage: "Nothing changed" })] }));
+});

package/dist/src/view/composer.d.ts

@@ -0,0 +1,64 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+import type { Completion, SlashCommand } from '../ahp/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?: SlashCommand[];
+    /**
+     * 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: SlashCommand): 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?: Completion[];
+    /** One of `paths` was chosen. The range it replaces is on the completion. */
+    onPath?(path: Completion): void;
+    autoFocus?: boolean;
+    focusId?: string;
+}
+export declare const ChatComposer: (props: ChatComposerProps) => RenderOutput;

package/dist/src/view/composer.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useEffect, useMeasure, useSize, useState, useTheme } from '@textui/core';
+import { Column, Divider, List, TextArea } from '@textui/widgets';
+import { ComposerBar } from './controls.js';
+import { useFloorTop } from './creature.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
+ * bar 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.
+ */
+const COMPOSER_ROWS = 6;
+/** 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) => Math.max(3, Math.min(VISIBLE, height - COMPOSER_ROWS - MENU_BORDER));
+export const ChatComposer = defineComponent('ChatComposer', (props) => {
+    const { value, onChange, onSubmit, onCancel, onHistory, onLeave, running, queued = 0, options = [], onOption, placeholder, commands = [], onCommand, paths = [], onPath, autoFocus, focusId = 'chat.composer', ...rest } = props;
+    const theme = useTheme();
+    // 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 = 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(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) => {
+        setHighlight((matches.length + index + direction) % matches.length);
+    };
+    // Where this box starts, so the creature has somewhere to stand that is
+    // not on it. The slash menu grows this upward, so it is read every time
+    // rather than being a number somebody wrote down once.
+    useFloorTop('composer', useMeasure().y);
+    // 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);
+    return (_jsxs(Column, { ...rest, gap: 0, children: [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.
+            _jsxs(Column, { border: theme.border, padding: [0, 1], children: [_jsx(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: true, 
+                        // 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) => {
+                            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 : _jsx(Divider, { label: hint })] })) : null, _jsxs(Column, { border: theme.border, children: [_jsx(Divider, { dim: true }), _jsx(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) => {
+                            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) => {
+                            if (matches.length > 0) {
+                                step(direction);
+                                return;
+                            }
+                            onHistory?.(direction);
+                        }, ...(onLeave ? { onEdge: (edge) => { 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 } : {}) }), _jsx(Divider, { dim: true }), _jsx(ComposerBar, { options: options, onOpen: (option, anchorId) => onOption?.(option, anchorId), onSend: () => onSubmit(value), ...(running ? { running: true } : {}), queued: queued, sendDisabled: value.trim() === '' })] })] }));
+});

package/dist/src/view/controls.d.ts

@@ -0,0 +1,44 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+/**
+ * The composer's control row: what this message will be sent as.
+ *
+ * One line under the field, and everything on it is a *current value* rather
+ * than a label - which harness, which model, how much it may do before it
+ * asks, where it works. A person can read what will happen without opening
+ * anything, and change any of it without leaving the composer.
+ *
+ * Each chip is one command's argument, asked through the palette (see
+ * `picker.ts`). That is the whole design: nothing here knows what a model or a
+ * permission mode is, so a new chip is a new command and no change to this
+ * file.
+ */
+export interface ComposerOption {
+    id: string;
+    /** The value, as a person reads it. Never the id the host stores. */
+    label: string;
+    /**
+     * The question, as opposed to the answer in `label`.
+     *
+     * The chip has no room for it - "Ask each time" is the whole row and the
+     * mark in front says which question it belongs to - but anything listing
+     * these somewhere with more space needs the pair, and the host's own wording
+     * for both is on the schema rather than in this file.
+     */
+    title?: string;
+    icon?: string;
+    /** The command whose argument this chip asks about. Absent: shown, not asked. */
+    commandId?: string;
+}
+export interface ComposerBarProps extends BoxProps {
+    options: ComposerOption[];
+    onOpen(option: ComposerOption, anchorId: string): void;
+    onSend(): void;
+    /** A turn is running, so this message joins the queue instead. */
+    running?: boolean;
+    queued?: number;
+    sendDisabled?: boolean;
+}
+/** The focus id of one chip. The picker anchors to it, so it has to be knowable. */
+export declare const chipId: (id: string) => string;
+export declare const SEND_ID = "chat.send";
+export declare const ComposerBar: (props: ComposerBarProps) => RenderOutput;

package/dist/src/view/controls.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useFocus, useInput, useTheme } from '@textui/core';
+import { Row } from '@textui/widgets';
+/** The focus id of one chip. The picker anchors to it, so it has to be knowable. */
+export const chipId = (id) => `chat.option.${id}`;
+export const SEND_ID = 'chat.send';
+export const ComposerBar = defineComponent('ComposerBar', (props) => {
+    const { options, onOpen, onSend, running, queued = 0, sendDisabled, ...rest } = props;
+    const theme = useTheme();
+    return (_jsxs(Row, { gap: 1, ...rest, children: [options.map((option, at) => (option.commandId
+                ? (_jsx(Chip, { focusId: chipId(option.id), 
+                    // Stated, not inherited. Tab order is registration order, and
+                    // which chips exist is the *host's* answer - it arrives one
+                    // round trip after the row is first drawn, so the ones that were
+                    // there from the start would otherwise come first however far to
+                    // the right they sit. Tab would run harness, workspace, and then
+                    // back to the middle.
+                    order: at, label: option.label, ...(option.icon ? { icon: option.icon } : {}), onOpen: () => onOpen(option, chipId(option.id)) }, option.id))
+                : (
+                // Shown, not asked: a value that is fixed for this session is
+                // still worth reading, and a chip that opens a panel offering one
+                // choice is a worse way of saying so.
+                _jsxs(Row, { gap: 1, children: [option.icon ? _jsx("text", { content: option.icon, fg: "subtle" }) : null, _jsx("text", { content: option.label, fg: "subtle" })] }, option.id)))), _jsx("text", { content: "", flex: 1 }), queued > 0 ? _jsx("text", { content: `${queued} queued`, fg: "warning" }) : null, _jsx(Chip, { focusId: SEND_ID, order: options.length, label: running ? 'queue' : 'send', trailing: theme.glyphs.chevronRight, tone: "accent", ...(sendDisabled ? { disabled: true } : {}), onOpen: onSend })] }));
+});
+/**
+ * One value on the control row.
+ *
+ * Not a `Button`: a button is a verb and these are nouns, and at `size="sm"`
+ * four of them still read as four buttons rather than as one sentence about
+ * what is about to be sent. What it borrows from a button is the part that
+ * matters - it is focusable, tab reaches it, and enter opens it.
+ */
+const Chip = defineComponent('ComposerChip', (props) => {
+    const { focusId, order, label, icon, trailing, tone, disabled, onOpen } = props;
+    const theme = useTheme();
+    const focus = useFocus({ id: focusId, order, disabled: disabled === true });
+    useInput((event) => {
+        if (disabled)
+            return false;
+        // Down as well as enter: the panel comes up out of the chip, and reaching
+        // for it downwards is what the shape of the thing suggests.
+        if (event.name === 'enter' || event.name === 'space' || event.name === 'down') {
+            onOpen();
+            return true;
+        }
+        return false;
+    }, { focusId: focus.id, enabled: disabled !== true });
+    return (_jsxs(Row, { id: focus.id, gap: 1, padding: [0, 1], ...(focus.focused ? { bg: 'selected' } : {}), onClick: disabled ? undefined : onOpen, children: [icon ? _jsx("text", { content: icon, shrink: 0, fg: focus.focused ? 'inverted' : tone ?? 'muted' }) : null, _jsx("text", { content: label, truncate: "end", fg: focus.focused ? 'inverted' : disabled ? 'disabled' : tone ?? undefined, ...(tone ? { bold: true } : {}) }), _jsx("text", { content: trailing ?? theme.glyphs.chevronDown, shrink: 0, fg: focus.focused ? 'inverted' : 'subtle' })] }));
+});