@textui/chat 0.6.0

package/dist/filediff.d.ts

@@ -0,0 +1,30 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+import type { DiffResult } from './diff.js';
+/**
+ * One file out of a changeset, both sides of it.
+ *
+ * Unified rather than side by side, and not for want of a splitter: a terminal
+ * that a changeset list already shares with a session pane has sixty columns
+ * left, and eighty characters of source in thirty is two columns of nothing
+ * legible. Unified spends the width on the line instead.
+ *
+ * Every row is exactly one row tall. The scroll position is a row count, so a
+ * line that wrapped would put the gutter numbers out of step with what is on
+ * screen - which is the same invariant the markdown layout keeps, for the same
+ * reason. Long lines are clipped, and the file is there to be read rather than
+ * edited.
+ */
+export interface FileDiffProps extends BoxProps {
+    /** The file, as the changeset names it. */
+    path: string;
+    diff: DiffResult;
+    /** Absent `before` is a creation, absent `after` a deletion. */
+    kind: 'new' | 'edited' | 'deleted';
+    /** Set instead of a diff when the bytes are not text. */
+    binary?: {
+        bytes: number;
+        contentType?: string;
+    };
+}
+export declare const FileDiff: (props: FileDiffProps) => RenderOutput;
+//# sourceMappingURL=filediff.d.ts.map

package/dist/filediff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filediff.d.ts","sourceRoot":"","sources":["../src/filediff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnC,yDAAyD;IACzD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,YAuF7C,CAAC"}

package/dist/filediff.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useTheme } from '@textui/core';
+import { Column, EmptyState, Row, ScrollView } from '@textui/widgets';
+export const FileDiff = defineComponent('FileDiff', (props) => {
+    const { path, diff, kind, binary, ...rest } = props;
+    const theme = useTheme();
+    if (binary) {
+        return (_jsx(EmptyState, { title: "Not text", message: `${binary.contentType ?? 'Binary'}, ${binary.bytes} bytes. There is nothing to show a line at a time.`, ...rest }));
+    }
+    if (diff.tooLarge) {
+        return (_jsx(EmptyState, { title: "Too big to line up", message: `${diff.tooLarge.lines} lines between the two sides, over the ${diff.tooLarge.limit} this will compare. Open it in an editor.`, ...rest }));
+    }
+    if (diff.rows.length === 0) {
+        return _jsx(EmptyState, { title: "Nothing between the two", message: "Both sides of this file are the same.", ...rest });
+    }
+    // The widest line number either side will need, so the gutter does not
+    // change width partway down the file.
+    const width = String(Math.max(...diff.rows.map((row) => Math.max(row.before ?? 0, row.after ?? 0)))).length;
+    return (_jsxs(Column, { ...rest, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: kind === 'new' ? '+' : kind === 'deleted' ? '-' : theme.glyphs.chevronRight, fg: kind === 'new' ? 'success' : kind === 'deleted' ? 'danger' : 'muted', shrink: 0 }), _jsx("text", { content: path, flex: 1, truncate: "start" }), _jsx("text", { content: `+${diff.added}`, fg: "success", shrink: 0 }), _jsx("text", { content: `-${diff.removed}`, fg: "danger", shrink: 0 })] }), _jsx(ScrollView, { flex: 1, focusId: "changes.file", children: _jsx(Column, { children: diff.rows.map((row, index) => (_jsxs(Row, { gap: 1, children: [_jsx("text", { content: String(row.before ?? '').padStart(width), fg: "subtle", shrink: 0 }), _jsx("text", { content: String(row.after ?? '').padStart(width), fg: "subtle", shrink: 0 }), _jsx("text", { content: row.kind === 'added' ? '+' : row.kind === 'removed' ? '-' : ' ', fg: row.kind === 'added' ? 'success' : row.kind === 'removed' ? 'danger' : 'muted', shrink: 0 }), _jsx("text", { content: row.text, wrap: "none", truncate: "end", flex: 1, ...(row.kind === 'added'
+                                    ? { fg: 'success' }
+                                    : row.kind === 'removed'
+                                        ? { fg: 'danger' }
+                                        : {}) })] }, index))) }) })] }));
+});

package/dist/hitl.d.ts

@@ -0,0 +1,85 @@
+import type { BoxProps, Rect, RenderOutput } from '@textui/core';
+import type { ChatAnswer, ChatPendingInput, ChatSendStatus } from './types.js';
+/**
+ * The block that means the agent is stopped, waiting on a person.
+ *
+ * It is the only thing on the screen that is waiting on the reader, so it
+ * takes the focus, traps it, and is answerable without leaving the keyboard.
+ * Rendered as one more bubble in the transcript it scrolls away, and a blocked
+ * agent that has scrolled off is a session that looks merely slow.
+ *
+ * Two kinds, and they are nothing alike:
+ *
+ *   a **tool confirmation** is a yes or a no about a command, with named
+ *   options where the host offers them;
+ *
+ *   a **question** carries no tool call at all. Its prose is the request's own
+ *   message and what is being asked is its questions. Rendering it as a
+ *   confirmation loses the entire request - the choices vanish, the question
+ *   is never shown, and what is left is a heading and an Approve button.
+ */
+export interface ChatHitlProps extends BoxProps {
+    input: ChatPendingInput;
+    /**
+     * The answers so far, keyed by question id.
+     *
+     * Owned by whoever mounts this rather than by the block: a host may have an
+     * action for a draft answer precisely because another client can be looking
+     * at the same question, and a value only this box knows is one nobody else
+     * can see. Unused by a tool confirmation.
+     */
+    draft?: Record<string, ChatAnswer>;
+    onDraft?(next: Record<string, ChatAnswer>): void;
+    onApprove(optionId?: string): void;
+    onDeny(): void;
+    onAnswer(answers: Record<string, ChatAnswer>, accepted: boolean): void;
+    /** Leave it up, but give the keyboard back. */
+    onEscape?(): void;
+    /** Where the block is on screen whenever that changes, and `null` once it is gone. */
+    onMeasure?(rect: Rect | null): void;
+}
+export declare const ChatHitl: (props: ChatHitlProps) => RenderOutput;
+/** A yes or a no about a command, and the named options the host offered. */
+export declare const ConfirmRequest: (props: {
+    input: Extract<ChatPendingInput, {
+        kind: "toolConfirmation";
+    }>;
+    onApprove(optionId?: string): void;
+    onDeny(): void;
+    onEscape?(): void;
+}) => RenderOutput;
+/**
+ * A question, with its questions.
+ *
+ * Every answer names its own kind, keyed by question id, and a required one
+ * left empty is not sendable - accepting with no answers resumes the agent on
+ * the answers it already had, which for a question it has just asked is none.
+ */
+export declare const QuestionForm: (props: {
+    input: Extract<ChatPendingInput, {
+        kind: "chatInput";
+    }>;
+    /** The answers so far. Controlled: every change goes out through `onDraft`. */
+    draft: Record<string, ChatAnswer>;
+    onDraft(next: Record<string, ChatAnswer>): void;
+    onAnswer(answers: Record<string, ChatAnswer>, accepted: boolean): void;
+    onEscape?(): void;
+}) => RenderOutput;
+/**
+ * What came of the answer, on the row between the block and the composer.
+ *
+ * That row was a blank one, and it is where a person is already looking after
+ * pressing a button on the block above it. A press that reaches a host which
+ * then says nothing is indistinguishable from a key that was never read - so
+ * this says the answer has gone, and says so in red when it did not.
+ *
+ * Nothing to say is no row rather than an empty one: a status line that is
+ * always there is a row of chrome, and the composer is a row further from the
+ * conversation for the whole of every session in which nothing goes wrong.
+ */
+export interface ChatInputStatusProps extends BoxProps {
+    /** Nothing to say is `null`, and no row. */
+    status: ChatSendStatus | null;
+}
+export declare const ChatInputStatus: (props: ChatInputStatusProps) => RenderOutput;
+//# sourceMappingURL=hitl.d.ts.map

package/dist/hitl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hitl.d.ts","sourceRoot":"","sources":["../src/hitl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAejE,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAgB,cAAc,EAAE,MAAM,YAAY,CAAC;AAG7F;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,IAAI,CAAC;IACjD,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACvE,+CAA+C;IAC/C,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,sFAAsF;IACtF,SAAS,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,YA4C7C,CAAC;AAEL,6EAA6E;AAC7E,eAAO,MAAM,cAAc;WAClB,OAAO,CAAC,gBAAgB,EAAE;QAAE,IAAI,EAAE,kBAAkB,CAAA;KAAE,CAAC;yBACzC,MAAM,GAAG,IAAI;cACxB,IAAI;iBACD,IAAI;kBAyCjB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;WAChB,OAAO,CAAC,gBAAgB,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IACvD,+EAA+E;WACxE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC;kBACnB,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,IAAI;sBAC7B,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,OAAO,GAAG,IAAI;iBACzD,IAAI;kBAwEjB,CAAC;AA0HH;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,4CAA4C;IAC5C,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,YAe3D,CAAC"}

package/dist/hitl.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useApp, useFocusScope, useInput, useTheme, } from '@textui/core';
+import { Button, Checkbox, Column, MarkdownView, Panel, RadioGroup, Row, TextArea, TextInput, } from '@textui/widgets';
+import { useReportMeasure } from './measure.js';
+export const ChatHitl = defineComponent('ChatHitl', (props) => {
+    // It sits above the composer rather than inside it, so it says where it
+    // starts: whoever keeps clear of the composer has to keep clear of this.
+    const { input, draft, onDraft, onApprove, onDeny, onAnswer, onEscape, onMeasure, ...rest } = props;
+    useReportMeasure(onMeasure);
+    const theme = useTheme();
+    // Focused on arrival, and not trapped.
+    //
+    // Trapping read well - the answer is the only thing to do - and it was
+    // wrong. A trap routes every key inside the scope, so while a session was
+    // blocked the transcript could not be scrolled, escape could not leave the
+    // screen, and the block that said `esc read` was the one thing making that
+    // impossible. You approve a command on the strength of what is written
+    // above it, so reading has to stay available while it is up.
+    //
+    // The keys that answer it are global (see `ConfirmRequest`), so they still
+    // work from wherever the reader has gone.
+    useFocusScope({ id: 'chat.hitl', autoFocus: true, restore: true });
+    // Wrapped, so that what `onMeasure` reports is the box this occupies
+    // rather than the room inside its border, which is one row lower.
+    return (_jsx(Column, { ...rest, children: _jsx(Panel, { title: input.kind === 'toolConfirmation' ? (input.call.confirmationTitle ?? 'The agent asks') : 'The agent asks', tone: "warning", border: theme.border, meta: `${theme.glyphs.warning} waiting on you`, children: input.kind === 'toolConfirmation'
+                ? _jsx(ConfirmRequest, { input: input, onApprove: onApprove, onDeny: onDeny, ...(onEscape ? { onEscape } : {}) })
+                : (_jsx(QuestionForm, { input: input, draft: draft ?? {}, onDraft: onDraft ?? (() => { }), onAnswer: onAnswer, ...(onEscape ? { onEscape } : {}) })) }) }));
+});
+/** A yes or a no about a command, and the named options the host offered. */
+export const ConfirmRequest = defineComponent('ConfirmRequest', ({ input, onApprove, onDeny, onEscape }) => {
+    const theme = useTheme();
+    const options = input.call.options ?? [];
+    // The letters are on the block, not on the application: they only exist
+    // while it is up, and while it is up nothing else wants them.
+    useInput((event) => {
+        if (event.name === 'a') {
+            onApprove();
+            return true;
+        }
+        if (event.name === 'd') {
+            onDeny();
+            return true;
+        }
+        if (event.name === 'escape') {
+            onEscape?.();
+            return true;
+        }
+        const digit = Number(event.name);
+        if (Number.isInteger(digit) && digit >= 1 && digit <= options.length) {
+            onApprove(options[digit - 1]?.id);
+            return true;
+        }
+        return false;
+    }, { global: true });
+    return (_jsxs(Column, { gap: 1, children: [input.call.intention ? _jsx(MarkdownView, { content: input.call.intention, quiet: true }) : null, input.call.input ? (_jsx(Column, { bg: "surfaceAlt", padding: [0, 1], children: _jsx("text", { content: input.call.input, wrap: "word" }) })) : null, _jsxs(Row, { gap: 2, children: [_jsx(Button, { label: "Approve", tone: "success", variant: "solid", icon: theme.glyphs.check, hint: "a", autoFocus: true, onPress: () => onApprove() }), _jsx(Button, { label: "Deny", tone: "danger", icon: theme.glyphs.cross, hint: "d", onPress: onDeny }), options.map((option, i) => (_jsx(Button, { label: option.label, variant: "ghost", hint: String(i + 1), onPress: () => onApprove(option.id) }, option.id)))] })] }));
+});
+/**
+ * A question, with its questions.
+ *
+ * Every answer names its own kind, keyed by question id, and a required one
+ * left empty is not sendable - accepting with no answers resumes the agent on
+ * the answers it already had, which for a question it has just asked is none.
+ */
+export const QuestionForm = defineComponent('QuestionForm', ({ input, draft, onDraft, onAnswer, onEscape }) => {
+    const theme = useTheme();
+    const app = useApp();
+    const answers = draft;
+    const set = (id, answer) => {
+        const next = { ...answers };
+        if (answer === null)
+            delete next[id];
+        else
+            next[id] = answer;
+        onDraft(next);
+    };
+    const missing = input.questions.filter((question) => question.required && !answers[question.id]);
+    const send = () => { if (missing.length === 0)
+        onAnswer(answers, true); };
+    useInput((event) => {
+        if (event.name === 'escape') {
+            onEscape?.();
+            return true;
+        }
+        // Enter sends, which is what the hint row under this says while a question
+        // is up - but only from inside the block. A reader who has deliberately
+        // tabbed down to the composer to queue a message is pressing enter at the
+        // composer, and answering the question with it would be the same mistake
+        // in the other direction. The fields that consume enter themselves - a
+        // text input, a checkbox, the Send button - never reach this.
+        if (event.name === 'enter') {
+            const at = app.focus.focused();
+            if (at === null || app.focus.scopeOf(at) !== 'chat.hitl')
+                return false;
+            send();
+            return true;
+        }
+        return false;
+    }, { global: true });
+    return (_jsxs(Column, { gap: 1, children: [_jsx(MarkdownView, { content: input.message }), input.questions.map((question, i) => (_jsx(QuestionField, { question: question, answer: answers[question.id] ?? null, 
+                // The first field takes the keyboard, and the scope asking for it is
+                // not enough: a scope's `autoFocus` only claims focus when nothing
+                // holds any, and while a question is up the composer holds it. So a
+                // question rendered its field, put `required` beside it, disabled
+                // Send until it was answered - and every key typed at it went into
+                // the composer behind. A control that says it wants focus is the one
+                // thing that takes it off another scope, which is why the
+                // confirmation's Approve button works and this did not.
+                autoFocus: i === 0, onChange: (answer) => set(question.id, answer), onSubmit: send }, question.id))), _jsxs(Row, { gap: 2, children: [_jsx(Button, { label: "Send", tone: "success", variant: "solid", icon: theme.glyphs.check, hint: "enter", disabled: missing.length > 0, onPress: () => onAnswer(answers, true) }), _jsx(Button, { label: "Decline", variant: "ghost", icon: theme.glyphs.cross, onPress: () => onAnswer({}, false) }), missing.length > 0 ? (_jsx("text", { content: `${theme.glyphs.warning} ${missing.length} still to answer`, fg: "warning" })) : null] })] }));
+});
+/** One question, rendered by its kind. The kind decides the answer's shape. */
+const QuestionField = defineComponent('QuestionField', ({ question, answer, autoFocus, onChange, onSubmit }) => {
+    const theme = useTheme();
+    const options = question.options ?? [];
+    const selectedMany = answer?.kind === 'selected-many' ? answer.value : [];
+    return (_jsxs(Column, { gap: 0, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: question.message, bold: true, wrap: "word", flex: 1 }), question.required ? _jsx("text", { content: "required", fg: "warning" }) : null] }), question.kind === 'boolean' ? (_jsx(Checkbox, { label: "yes", autoFocus: autoFocus === true, checked: answer?.kind === 'boolean' ? answer.value : false, onChange: (checked) => onChange({ kind: 'boolean', value: checked }) })) : null, question.kind === 'single-select' ? (_jsx(RadioGroup, { autoFocus: autoFocus === true, options: options.map((option, i) => ({ value: option.id, label: `${i + 1}. ${option.label}` })), ...(answer?.kind === 'selected' ? { value: answer.value } : {}), onChange: (value) => onChange({ kind: 'selected', value }) })) : null, question.kind === 'multi-select' ? (_jsx(Column, { children: options.map((option, i) => (_jsx(Checkbox, { label: `${i + 1}. ${option.label}`, checked: selectedMany.includes(option.id), onChange: (checked) => onChange({
+                        kind: 'selected-many',
+                        value: checked
+                            ? [...selectedMany, option.id]
+                            : selectedMany.filter((id) => id !== option.id),
+                    }) }, option.id))) })) : null, question.kind === 'text' ? (_jsx(TextArea, { value: answer?.kind === 'text' ? answer.value : '', autoFocus: autoFocus === true, maxRows: 6, border: theme.border, placeholder: "Type your answer \u00B7 enter sends \u00B7 alt+enter for a new line", caretTone: "accent", onSubmit: onSubmit, onChange: (value) => onChange(value === '' ? null : { kind: 'text', value }) })) : null, question.kind === 'number' || question.kind === 'integer' ? (_jsx(TextInput, { value: answer && 'value' in answer ? String(answer.value) : '', autoFocus: autoFocus === true, label: "number", hideLabel: true, placeholder: "A number", onSubmit: onSubmit, onChange: (value) => onChange(value === '' ? null : { kind: 'number', value: Number(value) }) })) : null, question.allowFreeformInput && question.kind !== 'text' ? (
+            // Freeform answers *instead of* choosing, never as one more choice: a
+            // host reading only the selection must not be handed typed words in
+            // the field where it expects an option id.
+            _jsxs(Row, { gap: 1, children: [_jsx("text", { content: theme.glyphs.chevronRight, fg: "subtle" }), _jsx(TextInput, { value: answer?.kind === 'text' ? answer.value : '', label: "or say it in words", placeholder: "or say it in words", hideLabel: true, flex: 1, onSubmit: onSubmit, onChange: (value) => onChange(value === '' ? null : { kind: 'text', value }) })] })) : null] }));
+});
+export const ChatInputStatus = defineComponent('ChatInputStatus', (props) => {
+    const theme = useTheme();
+    const { status, ...rest } = props;
+    if (!status)
+        return null;
+    const failed = status.state === 'failed';
+    const tone = failed ? 'danger' : 'muted';
+    return (_jsxs(Row, { gap: 1, ...rest, children: [_jsx("text", { content: failed ? theme.glyphs.warning : theme.glyphs.bulletHollow, fg: tone }), _jsx("text", { content: status.text, fg: tone, flex: 1, truncate: "end" })] }));
+});

package/dist/icons.d.ts

@@ -0,0 +1,14 @@
+import type { UnicodeLevel } from '@textui/core';
+/** The mark for one of the host's questions. Never absent. */
+export declare function settingIcon(unicode: UnicodeLevel, key: string, title?: string): string;
+/**
+ * The mark for one of its answers.
+ *
+ * Absent rather than neutral when nothing matches *and* the setting is not one
+ * whose values are worth marking - a branch name is not a mode, and a column
+ * of identical dots beside a list of branches is noise with a shape.
+ */
+export declare function valueIcon(unicode: UnicodeLevel, value: string, label?: string, options?: {
+    fallback?: boolean;
+}): string | undefined;
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAuFjD,8DAA8D;AAC9D,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAEtF;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,GACnC,MAAM,GAAG,SAAS,CAIpB"}

package/dist/icons.js

@@ -0,0 +1,71 @@
+const pick = (mark, unicode) => (unicode === 'ascii' ? mark.ascii : mark.full);
+/** Which question. Ordered: the first that matches wins. */
+const SETTINGS = [
+    { when: /harness|provider|agent(?!\s*mode)/, mark: { full: '◆', ascii: '@' } },
+    { when: /model/, mark: { full: '◇', ascii: '#' } },
+    { when: /branch/, mark: { full: '⋔', ascii: 'Y' } },
+    { when: /workspace|director|folder|cwd|path/, mark: { full: '⌂', ascii: '~' } },
+    { when: /isolat|worktree|target/, mark: { full: '▣', ascii: '=' } },
+    { when: /approv|permission|mode/, mark: { full: '◉', ascii: '%' } },
+];
+const OTHER_SETTING = { full: '▪', ascii: '-' };
+/**
+ * Which answer.
+ *
+ * The approval modes are the reason this exists: five of them, all named in
+ * the same two words - "Auto Mode", "Plan Mode", "Ask Before Edits" - and a
+ * list of five look-alike labels is a list you read twice. The marks put them
+ * in an order you can see, from "asks about everything" to "asks about
+ * nothing".
+ *
+ * Ordered, and the value is tested before the label: `bypassPermissions` and
+ * `autoApprove` both contain "auto", and only one of them means "decide for
+ * yourself".
+ */
+const VALUES = [
+    { when: /bypass|approveall|autoapprove|allow all|yolo/, mark: { full: '⚠', ascii: '!' } },
+    { when: /plan/, mark: { full: '≡', ascii: '=' } },
+    { when: /auto|assist/, mark: { full: '⊙', ascii: 'o' } },
+    { when: /accept|edit|write/, mark: { full: '✓', ascii: 'v' } },
+    { when: /ask|default|manual|interactive|confirm/, mark: { full: '?', ascii: '?' } },
+    { when: /worktree/, mark: { full: '⋔', ascii: 'Y' } },
+    // Not the house, which is the *workspace* chip's mark. Working in place and
+    // the directory being worked in are two chips side by side, and giving them
+    // the same mark is the one thing a mark is supposed to prevent.
+    { when: /folder|workspace|inplace|in place/, mark: { full: '▣', ascii: '=' } },
+    { when: /observe|readonly|read only/, mark: { full: '◌', ascii: '.' } },
+];
+const OTHER_VALUE = { full: '·', ascii: '-' };
+const normalise = (text) => text.toLowerCase().replace(/[\s_-]+/g, '');
+function match(table, ...against) {
+    for (const text of against) {
+        if (!text)
+            continue;
+        const flat = normalise(text);
+        // Both spellings: `when` clauses like /allow all/ want the words apart and
+        // /autoapprove/ wants them together, and which one a host used is not
+        // something to have an opinion about.
+        const spaced = text.toLowerCase();
+        const found = table.find((entry) => entry.when.test(flat) || entry.when.test(spaced));
+        if (found)
+            return found.mark;
+    }
+    return null;
+}
+/** The mark for one of the host's questions. Never absent. */
+export function settingIcon(unicode, key, title) {
+    return pick(match(SETTINGS, key, title) ?? OTHER_SETTING, unicode);
+}
+/**
+ * The mark for one of its answers.
+ *
+ * Absent rather than neutral when nothing matches *and* the setting is not one
+ * whose values are worth marking - a branch name is not a mode, and a column
+ * of identical dots beside a list of branches is noise with a shape.
+ */
+export function valueIcon(unicode, value, label, options = {}) {
+    const found = match(VALUES, value, label);
+    if (found)
+        return pick(found, unicode);
+    return options.fallback === true ? pick(OTHER_VALUE, unicode) : undefined;
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export * from './types.js';
+export * from './blocks.js';
+export * from './diff.js';
+export * from './icons.js';
+export * from './picker.js';
+export * from './measure.js';
+export * from './bubble.js';
+export * from './transcript.js';
+export * from './toolcall.js';
+export * from './controls.js';
+export * from './composer.js';
+export * from './hitl.js';
+export * from './details.js';
+export * from './sessions.js';
+export * from './sessionhead.js';
+export * from './filediff.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,16 @@
+export * from './types.js';
+export * from './blocks.js';
+export * from './diff.js';
+export * from './icons.js';
+export * from './picker.js';
+export * from './measure.js';
+export * from './bubble.js';
+export * from './transcript.js';
+export * from './toolcall.js';
+export * from './controls.js';
+export * from './composer.js';
+export * from './hitl.js';
+export * from './details.js';
+export * from './sessions.js';
+export * from './sessionhead.js';
+export * from './filediff.js';

package/dist/measure.d.ts

@@ -0,0 +1,14 @@
+import type { Rect } from '@textui/core';
+/**
+ * Tell whoever asked where this component is, and when it is gone.
+ *
+ * Reported on every change rather than once: a composer grows a slash menu
+ * upward and grows again with a wrapped draft, and the block that asks about
+ * a tool is only there while something is waiting. `null` on the way out, or
+ * a screen that had one would keep making room for it after it had gone.
+ *
+ * The callback is read through a ref so an inline arrow - which is a new
+ * function every render - does not re-run the unmount report every frame.
+ */
+export declare function useReportMeasure(onMeasure: ((rect: Rect | null) => void) | undefined): void;
+//# sourceMappingURL=measure.d.ts.map

package/dist/measure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure.d.ts","sourceRoot":"","sources":["../src/measure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAM3F"}

package/dist/measure.js

@@ -0,0 +1,19 @@
+import { useEffect, useMeasure, useRef } from '@textui/core';
+/**
+ * Tell whoever asked where this component is, and when it is gone.
+ *
+ * Reported on every change rather than once: a composer grows a slash menu
+ * upward and grows again with a wrapped draft, and the block that asks about
+ * a tool is only there while something is waiting. `null` on the way out, or
+ * a screen that had one would keep making room for it after it had gone.
+ *
+ * The callback is read through a ref so an inline arrow - which is a new
+ * function every render - does not re-run the unmount report every frame.
+ */
+export function useReportMeasure(onMeasure) {
+    const rect = useMeasure();
+    const latest = useRef(onMeasure);
+    latest.current = onMeasure;
+    useEffect(() => { latest.current?.(rect); }, [rect.x, rect.y, rect.width, rect.height]);
+    useEffect(() => () => { latest.current?.(null); }, []);
+}

package/dist/picker.d.ts

@@ -0,0 +1,43 @@
+import type { TextUIApp } from '@textui/core';
+/**
+ * The palette, moved.
+ *
+ * A chip on the composer's control row asks one question - which harness,
+ * which model, how much it may do without asking, which workspace - and every
+ * one of those is a command with an argument. The command palette already
+ * knows how to ask about exactly that: `openAt` drills straight into an
+ * argument, `choices` may be a list, a function or a promise, an argument
+ * *without* choices is answered by typing, and `preview` shows what a
+ * highlighted value would do.
+ *
+ * So this is not a second overlay. It is the same one, anchored above the
+ * control that asked, and shown one command's question rather than the whole
+ * registry. Anything registered later - a workspace list, a thinking level, a
+ * subagent - is a command with an argument and needs nothing here.
+ */
+export declare const PICKER = "chat.picker";
+export interface PickerOptions {
+    /** The command whose argument is being asked about. */
+    commandId: string;
+    /** The node the panel sits above: the chip's own focus id. */
+    anchorId: string;
+    /**
+     * A fixed width. Left off, the panel is as wide as its widest answer, up to
+     * `maxWidth` - which is what a chip wants: "Worktree" and "Step-by-step
+     * collaboration" are the same question asked at two very different widths.
+     */
+    width?: number;
+    maxWidth?: number;
+    visibleRows?: number;
+    /**
+     * Put each value's sentence on its own line.
+     *
+     * For the questions whose answers are two words apart - "Accept edits" and
+     * "Plan only" - and told apart entirely by the line under them. Inline,
+     * that line shares the width with the label and shows the same truncated
+     * half of every answer.
+     */
+    descriptions?: 'inline' | 'below';
+}
+export declare function openPicker(app: TextUIApp, options: PickerOptions): void;
+//# sourceMappingURL=picker.d.ts.map

package/dist/picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.d.ts","sourceRoot":"","sources":["../src/picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,MAAM,gBAAgB,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,GAAG,IAAI,CA0DvE"}

package/dist/picker.js

@@ -0,0 +1,79 @@
+import { argumentOf } from '@textui/widgets';
+/**
+ * The palette, moved.
+ *
+ * A chip on the composer's control row asks one question - which harness,
+ * which model, how much it may do without asking, which workspace - and every
+ * one of those is a command with an argument. The command palette already
+ * knows how to ask about exactly that: `openAt` drills straight into an
+ * argument, `choices` may be a list, a function or a promise, an argument
+ * *without* choices is answered by typing, and `preview` shows what a
+ * highlighted value would do.
+ *
+ * So this is not a second overlay. It is the same one, anchored above the
+ * control that asked, and shown one command's question rather than the whole
+ * registry. Anything registered later - a workspace list, a thinking level, a
+ * subagent - is a command with an argument and needs nothing here.
+ */
+export const PICKER = 'chat.picker';
+export function openPicker(app, options) {
+    const command = app.commands.get(options.commandId);
+    if (!command)
+        return;
+    // A chip whose command has no question to ask runs it: the workspace chip
+    // opens a dialog of its own, and a palette drilled into nothing is a list
+    // of one row that runs it anyway.
+    if (!argumentOf(command)) {
+        void app.execute(options.commandId, undefined, 'menu');
+        return;
+    }
+    // The chip that opened this one closes it. A control whose panel is already
+    // showing is a toggle - clicking it again to make it go away is the first
+    // thing anybody tries, and reopening it looks like the click did nothing.
+    const showing = app.layers.entries().find((entry) => entry.id === PICKER);
+    const already = showing?.node;
+    if (already?.openAt === options.commandId) {
+        app.layers.close(PICKER);
+        return;
+    }
+    // Closed first, so opening a second chip's panel replaces the first rather
+    // than stacking two of them with the same id.
+    app.layers.close(PICKER);
+    app.layers.open({
+        id: PICKER,
+        // Floating, not modal: there is no scrim, because the row it is asking
+        // about has to stay readable underneath it. Which value is in force is
+        // half of what makes the question answerable.
+        layer: 'floating',
+        trapFocus: true,
+        dismissOnEscape: true,
+        dismissOnOutsideClick: true,
+        // Above the chip, aligned to its left edge - so it rises out of the
+        // control rather than appearing somewhere else on the screen. A composer
+        // sits at the bottom, so `top` is the side with room.
+        position: { kind: 'anchor', targetId: options.anchorId, side: 'top', align: 'start' },
+        node: {
+            component: 'CommandPalette',
+            ...(options.width !== undefined ? { width: options.width } : {}),
+            maxWidth: options.maxWidth ?? 52,
+            visibleRows: options.visibleRows ?? 6,
+            // One command, so the panel opens on its values instead of on a search
+            // box with everything in it.
+            commands: [command],
+            openAt: options.commandId,
+            ...(options.descriptions ? { descriptions: options.descriptions } : {}),
+            onClose: { handler: () => app.layers.close(PICKER) },
+        },
+        // Back to the chip that asked, however it was closed.
+        //
+        // The layer's own scope restores focus when a choice is made, and does not
+        // when the panel is dismissed with escape - which strands the keyboard on
+        // a node inside a layer that is no longer there, and the next tab starts
+        // from nowhere. Saying where focus goes is cheaper than depending on which
+        // of the two paths ran.
+        // Back to the chip that asked, whichever way it was closed. The layer's
+        // own scope restores focus after a choice; a dismissal would otherwise
+        // leave the keyboard on a node that is no longer mounted.
+        onClose: () => app.focus.focus(options.anchorId),
+    });
+}

package/dist/sessionhead.d.ts

@@ -0,0 +1,42 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+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;
+    }[];
+}
+export declare const ChatSessionHead: (props: ChatSessionHeadProps) => RenderOutput;
+//# sourceMappingURL=sessionhead.d.ts.map

package/dist/sessionhead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessionhead.d.ts","sourceRoot":"","sources":["../src/sessionhead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAmB,MAAM,cAAc,CAAC;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,OAAO,EAAE,WAAW,CAAC;IACrB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC9C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxD;AAkBD,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,YAiD3D,CAAC"}