@textui/chat 0.6.0

package/dist/composer.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useApp, useEffect, useSize, useState, useTheme } from '@textui/core';
+import { Column, Divider, List, TextArea } from '@textui/widgets';
+import { ComposerBar, composerRows } from './controls.js';
+import { useReportMeasure } from './measure.js';
+/**
+ * Rows the completion menu shows at once, at most.
+ *
+ * A cap on the box's height and not on the list: what does not fit is
+ * scrolled to. The menu sits above the composer and takes its room from it,
+ * so on a short terminal this is not the number that applies - see `fits`.
+ */
+const VISIBLE = 8;
+/**
+ * Rows the composer itself takes: two border, two divider, the field and the
+ * two control rows under it. Eight menu rows on a terminal twelve high left
+ * four for all of that and drew an empty box - a menu on top of a field with
+ * no room to type in it.
+ *
+ * Counted with both control rows; a bar that draws one gives the row back.
+ */
+const COMPOSER_ROWS = 7;
+/** The menu's own frame, which is height the list does not get. */
+const MENU_BORDER = 2;
+/**
+ * Rows the menu may have here, which is whatever the composer can spare.
+ *
+ * The floor is there because a terminal can always be made too short for
+ * both; below it the composer gives way, since a menu with nothing under it
+ * is the same dead end from the other side.
+ */
+const fits = (height, rows) => Math.max(3, Math.min(VISIBLE, height - (COMPOSER_ROWS - (2 - 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', onMeasure, ...rest } = props;
+    const theme = useTheme();
+    const app = useApp();
+    // A slash menu is a completion over what is already typed, not a mode.
+    const slash = value.startsWith('/') && !value.includes(' ') ? value.slice(1).toLowerCase() : null;
+    const found = slash === null ? [] : commands
+        .filter((command) => command.id.toLowerCase().includes(slash) || command.title.toLowerCase().includes(slash))
+        // What the host contributed first. A person typing a slash into a chat
+        // is usually reaching for a skill, and the client's own commands - which
+        // are also in the palette, on their own key - would otherwise fill the
+        // rows that are visible without scrolling.
+        .sort((a, b) => (a.kind === b.kind ? 0 : a.kind === 'session' ? -1 : 1));
+    const byId = new Map(found.map((command) => [command.id, command]));
+    /*
+     * One menu, and whichever list is live fills it.
+     *
+     * The two cannot both be: a slash menu is a draft that *starts* with a
+     * slash, and a path menu is a word the caret is in that starts with an
+     * at-sign. Two menus would be two boxes above one field.
+     */
+    const offered = 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 is. The slash menu grows it upward, so whoever wants to
+    // stand clear of it is told every time rather than once.
+    useReportMeasure(onMeasure);
+    // How tall the menu may be here. Read unconditionally: it is a hook, and
+    // the menu is drawn from a branch.
+    const rows = fits(useSize().height, composerRows(options));
+    return (_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), onLeave: () => app.focus.focus(focusId), ...(running ? { running: true } : {}), queued: queued, sendDisabled: value.trim() === '' })] })] }));
+});

package/dist/controls.d.ts

@@ -0,0 +1,66 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+/**
+ * The composer's control rows: what this message will be sent as.
+ *
+ * Under the field, and everything on it is a *current value* rather than a
+ * label. What will run - which harness, which model, how much it may do
+ * before it asks - and, when the host asks it, where: the directory, whether
+ * in place or in a worktree, and from which branch. A person can read what
+ * will happen without opening anything, and change any of it without leaving
+ * the composer.
+ *
+ * Where gets a row of its own, and only when there is a where. One line held
+ * all of it until a host that answers every question the reference host asks
+ * put eight chips on it, and the row truncated each to its mark; a host that
+ * asks nothing about where - a chat that runs where it was opened - keeps the
+ * one line, with send at the end of it, rather than a second row holding
+ * nothing but send.
+ *
+ * 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;
+    /** On the second row, with the workspace: where the session runs rather than what runs it. */
+    where?: boolean;
+}
+export interface ComposerBarProps extends BoxProps {
+    options: ComposerOption[];
+    onOpen(option: ComposerOption, anchorId: string): void;
+    onSend(): void;
+    /** Escape on a chip: back to the field. */
+    onLeave?(): 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";
+/**
+ * How many rows the bar takes for these options.
+ *
+ * Two when any of them is a `where`, and one otherwise - which is the number
+ * the composer needs before the bar is drawn, to know how much of a short
+ * terminal is left for the menu above it.
+ */
+export declare function composerRows(options: ComposerOption[]): 1 | 2;
+export declare const ComposerBar: (props: ComposerBarProps) => RenderOutput;
+//# sourceMappingURL=controls.d.ts.map

package/dist/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../src/controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACvD,MAAM,IAAI,IAAI,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,oFAAoF;AACpF,eAAO,MAAM,MAAM,GAAI,IAAI,MAAM,KAAG,MAA6B,CAAC;AAElE,eAAO,MAAM,OAAO,cAAc,CAAC;AAEnC;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG,CAAC,GAAG,CAAC,CAE7D;AAED,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,YAyEnD,CAAC"}

package/dist/controls.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useFocus, useInput, useTheme } from '@textui/core';
+import { Column, 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';
+/**
+ * How many rows the bar takes for these options.
+ *
+ * Two when any of them is a `where`, and one otherwise - which is the number
+ * the composer needs before the bar is drawn, to know how much of a short
+ * terminal is left for the menu above it.
+ */
+export function composerRows(options) {
+    return options.some((option) => option.where) ? 2 : 1;
+}
+export const ComposerBar = defineComponent('ComposerBar', (props) => {
+    const { options, onOpen, onSend, onLeave, running, queued = 0, sendDisabled, ...rest } = props;
+    const theme = useTheme();
+    // The first row and then the second, which is also the tab order. Stated
+    // rather than inherited: tab order is registration order, and which chips
+    // exist is the *host's* answer - it arrives one round trip after the rows
+    // are first drawn, so the ones that were there from the start would
+    // otherwise come first however far to the right they sit.
+    const what = options.filter((option) => !option.where);
+    const where = options.filter((option) => option.where);
+    const ordered = [...what, ...where];
+    const chip = (option) => (option.commandId
+        ? (_jsx(Chip, { focusId: chipId(option.id), order: ordered.indexOf(option), label: option.label, ...(option.icon ? { icon: option.icon } : {}), onOpen: () => onOpen(option, chipId(option.id)), ...(onLeave ? { onLeave } : {}) }, 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)));
+    // The end of the last row, whichever row that is: what is waiting, and
+    // the one verb on the bar.
+    const tail = [
+        _jsx("text", { content: "", flex: 1 }, "gap"),
+        queued > 0 ? _jsx("text", { content: `${queued} queued`, fg: "warning" }, "queued") : null,
+        _jsx(Chip, { focusId: SEND_ID, order: ordered.length, label: running ? 'queue' : 'send', trailing: theme.glyphs.chevronRight, tone: "accent", ...(sendDisabled ? { disabled: true } : {}), onOpen: onSend, ...(onLeave ? { onLeave } : {}) }, "send"),
+    ];
+    if (where.length === 0) {
+        return (_jsxs(Row, { gap: 1, ...rest, children: [what.map(chip), tail] }));
+    }
+    return (_jsxs(Column, { gap: 0, ...rest, children: [_jsx(Row, { gap: 1, children: what.map(chip) }), _jsxs(Row, { gap: 1, children: [where.map(chip), tail] })] }));
+});
+/**
+ * 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, onLeave } = props;
+    const theme = useTheme();
+    const focus = useFocus({ id: focusId, order, disabled: disabled === true });
+    useInput((event) => {
+        if (disabled)
+            return false;
+        // Out of the row and back to the field, the way escape leaves the field
+        // for the transcript: one step out, not out of the screen.
+        if (event.name === 'escape' && onLeave) {
+            onLeave();
+            return true;
+        }
+        // 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' })] }));
+});

package/dist/details.d.ts

@@ -0,0 +1,66 @@
+import type { BoxProps, RenderOutput, SemanticVariant } from '@textui/core';
+/**
+ * A property list you can walk, and take a value out of.
+ *
+ * The catalogue's detail pane is where the identifiers live - a session URI, a
+ * chat URI - and an identifier you cannot read in full or paste anywhere is
+ * decoration. `KeyValue` draws the same pairs and is static: nothing selects a
+ * row, so nothing can be copied and nothing can be shown untruncated.
+ *
+ * So the selected row is the one that gets the room. Every other row is one
+ * line with its value truncated, and the selected row wraps its value across
+ * as many lines as it needs - which costs nothing when the value is short and
+ * is the whole answer when it is a URI in a 36-column pane. `enter` puts it on
+ * the clipboard.
+ *
+ * This is a finding, not a flourish: it is the third component this example
+ * wanted that the catalog does not have.
+ */
+export interface DetailField {
+    id: string;
+    label: string;
+    value: string;
+    tone?: SemanticVariant;
+    /** Shown instead of the value when there is none, in the subtle tone. */
+    absent?: string;
+}
+export interface SessionDetailsProps extends BoxProps {
+    fields: DetailField[];
+    focusId?: string;
+    /**
+     * Width of the label column, where a caller wants to fix it.
+     *
+     * Left off, it is the widest label there is. It used to be a constant on
+     * the grounds that the labels were ours, and they are not: a session's
+     * settings and a model's options are named by whichever host is answering,
+     * in words this client does not choose, and the constant was one character
+     * wider than the longest label anybody had thought of.
+     */
+    labelWidth?: number;
+    /**
+     * Take the keyboard on the frame this mounts, out of whatever holds it.
+     *
+     * Not `autoFocus`, which claims focus rather than taking it: a pane that
+     * appears *because* a key asked for it has to end up with the cursor, and
+     * the thing it is taking the cursor from - the session list - is in the
+     * same focus scope and already has it.
+     *
+     * It has to be done here rather than by the screen that mounts this,
+     * because a focusable registers in its own effect: on the render that opens
+     * the pane, the id does not exist yet and the screen's `focus()` is a call
+     * that quietly returns false.
+     */
+    claim?: boolean;
+    /**
+     * Which rows show their value whole.
+     *
+     * `selected` is the default and the one that keeps the pane a list: every
+     * row is one line, and the row you have stopped on wraps to as many as its
+     * value needs. `all` wraps every row, which is what you want when the
+     * values *are* the point - a pane of URIs where the answer is on the third
+     * one down and reading it should not mean walking there first.
+     */
+    values?: 'selected' | 'all';
+}
+export declare const SessionDetails: (props: SessionDetailsProps) => RenderOutput;
+//# sourceMappingURL=details.d.ts.map

package/dist/details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../src/details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAY5E;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,YAmFzD,CAAC"}

package/dist/details.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useClipboard, useEffect, useFocus, useInput, useState, useTheme, } from '@textui/core';
+import { Column, Row } from '@textui/widgets';
+export const SessionDetails = defineComponent('SessionDetails', (props) => {
+    const { fields, focusId, labelWidth, claim, values = 'selected', ...rest } = props;
+    // Floored at the eleven this used to be, so nothing that already fitted
+    // moves, and capped so one verbose title cannot take the pane from the
+    // values it is there to label.
+    const column = labelWidth ?? Math.min(20, Math.max(11, ...fields.map((field) => field.label.length)));
+    const theme = useTheme();
+    const clipboard = useClipboard();
+    const focus = useFocus({ ...(focusId ? { id: focusId } : {}) });
+    const [index, setIndex] = useState(0);
+    const [copied, setCopied] = useState(null);
+    // The selection is an index into a list that changes with the selected
+    // session, so it is clamped on the way out rather than reset on the way in.
+    const at = Math.max(0, Math.min(index, fields.length - 1));
+    // After the registration above, which is the whole point of it being here.
+    useEffect(() => { if (claim)
+        focus.focus(); }, [claim]);
+    useInput((event) => {
+        if (fields.length === 0)
+            return false;
+        switch (event.name) {
+            case 'up':
+                setIndex(Math.max(0, at - 1));
+                setCopied(null);
+                return true;
+            case 'down':
+                setIndex(Math.min(fields.length - 1, at + 1));
+                setCopied(null);
+                return true;
+            case 'home':
+                setIndex(0);
+                setCopied(null);
+                return true;
+            case 'end':
+                setIndex(fields.length - 1);
+                setCopied(null);
+                return true;
+            case 'enter': {
+                const field = fields[at];
+                if (!field || !field.value)
+                    return true;
+                // OSC 52 where the terminal takes it, and the store either way - so
+                // a test can assert what was copied without a terminal at all.
+                clipboard.write(field.value);
+                setCopied(field.id);
+                return true;
+            }
+            default: return false;
+        }
+    }, { focusId: focus.id });
+    return (_jsx(Column, { ...rest, id: focus.id, children: fields.map((field, i) => {
+            const active = i === at;
+            const selected = active && focus.focused;
+            const whole = values === 'all' || active;
+            return (
+            // `align="start"` because a wrapped value makes the row two lines
+            // tall and the label is one: centred, it drifted down to sit
+            // beside the *second* line of a URI, with nothing at all beside
+            // the first. A label names the row it starts.
+            _jsxs(Row, { gap: 1, align: "start", children: [_jsx("text", { content: active ? theme.glyphs.chevronRight : ' ', fg: selected ? 'accent' : 'subtle', shrink: 0 }), _jsx("text", { content: field.label, width: column, shrink: 0, fg: "muted", truncate: "end" }), _jsx("text", { content: field.value || field.absent || '-', flex: 1, ...(whole ? { wrap: 'word' } : { truncate: 'end' }), ...(field.value ? {} : { fg: 'subtle' }), ...(field.tone && field.value ? { fg: field.tone } : {}), ...(selected ? { bold: true } : {}) }), copied === field.id ? _jsx("text", { content: "copied", fg: "success", shrink: 0 }) : null] }, field.id));
+        }) }));
+});

package/dist/diff.d.ts

@@ -0,0 +1,45 @@
+/**
+ * A line diff, small enough to read.
+ *
+ * The host sends two whole files and a count of what changed between them; it
+ * does not send the diff itself, so somebody has to work out which lines those
+ * were. This is that, and it is deliberately the textbook algorithm rather
+ * than anything clever: the longest common subsequence of the two line arrays,
+ * with everything not in it marked as removed on the left or added on the
+ * right.
+ *
+ * The cost is quadratic in the number of lines, which is why `diffLines` takes
+ * a ceiling. Two files of ten thousand lines each is a hundred million cells
+ * and a terminal that stops answering, and the honest answer at that size is
+ * to say the files are too big rather than to spend a minute proving it.
+ */
+export type DiffKind = 'same' | 'added' | 'removed';
+export interface DiffRow {
+    kind: DiffKind;
+    /** 1-based, on the side this row exists on. Absent on the side it does not. */
+    before?: number;
+    after?: number;
+    text: string;
+}
+export interface DiffResult {
+    rows: DiffRow[];
+    added: number;
+    removed: number;
+    /** Set instead of a diff when the pair was over `limit`. */
+    tooLarge?: {
+        lines: number;
+        limit: number;
+    };
+}
+/** Lines of a file, with the trailing newline not counted as an empty last line. */
+export declare function toLines(text: string): string[];
+/**
+ * The two sides, lined up.
+ *
+ * A creation has no `before` and a deletion no `after`; both are passed as an
+ * empty string rather than as a special case, because "every line is an
+ * addition" is exactly the right diff for a new file and needs no branch of
+ * its own.
+ */
+export declare function diffLines(before: string, after: string, limit?: number): DiffResult;
+//# sourceMappingURL=diff.d.ts.map

package/dist/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../src/diff.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C;AAED,oFAAoF;AACpF,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAK9C;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,SAAO,GAAG,UAAU,CAiEjF"}

package/dist/diff.js

@@ -0,0 +1,111 @@
+/**
+ * A line diff, small enough to read.
+ *
+ * The host sends two whole files and a count of what changed between them; it
+ * does not send the diff itself, so somebody has to work out which lines those
+ * were. This is that, and it is deliberately the textbook algorithm rather
+ * than anything clever: the longest common subsequence of the two line arrays,
+ * with everything not in it marked as removed on the left or added on the
+ * right.
+ *
+ * The cost is quadratic in the number of lines, which is why `diffLines` takes
+ * a ceiling. Two files of ten thousand lines each is a hundred million cells
+ * and a terminal that stops answering, and the honest answer at that size is
+ * to say the files are too big rather than to spend a minute proving it.
+ */
+/** Lines of a file, with the trailing newline not counted as an empty last line. */
+export function toLines(text) {
+    if (text === '')
+        return [];
+    const lines = text.split('\n');
+    if (lines[lines.length - 1] === '')
+        lines.pop();
+    return lines;
+}
+/**
+ * The two sides, lined up.
+ *
+ * A creation has no `before` and a deletion no `after`; both are passed as an
+ * empty string rather than as a special case, because "every line is an
+ * addition" is exactly the right diff for a new file and needs no branch of
+ * its own.
+ */
+export function diffLines(before, after, limit = 4000) {
+    const a = toLines(before);
+    const b = toLines(after);
+    if (a.length + b.length > limit) {
+        return { rows: [], added: 0, removed: 0, tooLarge: { lines: a.length + b.length, limit } };
+    }
+    // The common head and tail first. Two files that differ in one line share
+    // everything either side of it, and taking those off shrinks the table the
+    // quadratic part has to fill to the part that actually differs.
+    let head = 0;
+    while (head < a.length && head < b.length && a[head] === b[head])
+        head++;
+    let tail = 0;
+    while (tail < a.length - head
+        && tail < b.length - head
+        && a[a.length - 1 - tail] === b[b.length - 1 - tail])
+        tail++;
+    const midA = a.slice(head, a.length - tail);
+    const midB = b.slice(head, b.length - tail);
+    const table = lcs(midA, midB);
+    const rows = [];
+    let added = 0;
+    let removed = 0;
+    const push = (kind, text, ai, bi) => {
+        rows.push({
+            kind,
+            ...(kind !== 'added' ? { before: ai + 1 } : {}),
+            ...(kind !== 'removed' ? { after: bi + 1 } : {}),
+            text,
+        });
+        if (kind === 'added')
+            added++;
+        if (kind === 'removed')
+            removed++;
+    };
+    for (let i = 0; i < head; i++)
+        push('same', a[i], i, i);
+    // Walking the table forwards, so the rows come out in file order.
+    let i = 0;
+    let j = 0;
+    while (i < midA.length || j < midB.length) {
+        if (i < midA.length && j < midB.length && midA[i] === midB[j]) {
+            push('same', midA[i], head + i, head + j);
+            i++;
+            j++;
+            // A tie goes to the removal, so a replaced line reads `-old` then `+new`
+            // the way every other diff on the machine prints it. With `>=` here the
+            // pair comes out the other way round, which is not wrong so much as
+            // unreadable next to `git diff`.
+        }
+        else if (j < midB.length && (i === midA.length || (table[i]?.[j + 1] ?? 0) > (table[i + 1]?.[j] ?? 0))) {
+            push('added', midB[j], head + i, head + j);
+            j++;
+        }
+        else {
+            push('removed', midA[i], head + i, head + j);
+            i++;
+        }
+    }
+    for (let k = 0; k < tail; k++) {
+        push('same', a[a.length - tail + k], a.length - tail + k, b.length - tail + k);
+    }
+    return { rows, added, removed };
+}
+/**
+ * `table[i][j]` is the length of the longest common subsequence of `a[i..]`
+ * and `b[j..]`, filled from the end so the walk above can go forwards.
+ */
+function lcs(a, b) {
+    const table = Array.from({ length: a.length + 1 }, () => new Array(b.length + 1).fill(0));
+    for (let i = a.length - 1; i >= 0; i--) {
+        for (let j = b.length - 1; j >= 0; j--) {
+            table[i][j] = a[i] === b[j]
+                ? (table[i + 1]?.[j + 1] ?? 0) + 1
+                : Math.max(table[i + 1]?.[j] ?? 0, table[i]?.[j + 1] ?? 0);
+        }
+    }
+    return table;
+}