@deepseek-harness-tui/dsh-tui 0.5.0

package/lib/types/components/messages/AssistantToolUseMessage.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from '../../ui.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { useAnimationFrame } from '../../ink/hooks/use-animation-frame.js';
+import { ToolUseLoader } from '../ToolUseLoader.js';
+import { formatDuration } from '../../cc/format.js';
+/** Tool display names: DSH emits lowercase tool ids (`bash`); Claude Code
+ *  shows capitalized names (`Bash`). Map the common ones, fall back to the
+ *  id with its first letter uppercased. */
+function displayName(name) {
+    const KNOWN = {
+        bash: 'Bash',
+        powershell: 'PowerShell',
+        read: 'Read',
+        glob: 'Glob',
+        grep: 'Grep',
+        write: 'Write',
+        edit: 'Edit',
+        todo_write: 'TodoWrite',
+        subagent: 'Task',
+        web_search: 'WebSearch',
+    };
+    const mapped = KNOWN[name];
+    if (mapped)
+        return mapped;
+    if (name.length === 0)
+        return name;
+    return name[0].toUpperCase() + name.slice(1);
+}
+/** CC's collapsed text body keeps 3 lines (renderTruncatedContent). */
+const TEXT_BODY_MAX_LINES = 3;
+/** Diff bodies cap at the upstream chat row's 8 (dsh-client-ui-tool's
+ *  CHAT_DIFF_MAX_LINES) — denser information than log output. */
+const DIFF_BODY_MAX_LINES = 8;
+const GUTTER_FIRST = '  ⎿  ';
+const GUTTER_REST = '     ';
+const add = (text) => ({ text, tone: 'add' });
+const del = (text) => ({ text, tone: 'del' });
+const dim = (text) => ({ text, tone: 'dim' });
+const plain = (text) => ({ text, tone: 'plain' });
+/** One side's text → display lines (upstream contentLines rule: empty text
+ *  is zero lines; a single trailing newline is a terminator, not a line;
+ *  interior blanks survive). */
+function sideLines(text) {
+    if (text === '')
+        return [];
+    const lines = text.split('\n');
+    if (lines[lines.length - 1] === '')
+        lines.pop();
+    return lines;
+}
+/** Diff hunks → add/del rows. The header already carries the path for the
+ *  common single-hunk case; with several hunks a path row separates files
+ *  and `⋯` separates scattered hunks of one file (upstream DiffBlock). */
+function diffLines(diffs) {
+    const out = [];
+    let prevPath;
+    for (const diff of diffs) {
+        if (diffs.length > 1) {
+            if (diff.path !== prevPath)
+                out.push(plain(diff.path));
+            else
+                out.push(dim('⋯'));
+        }
+        prevPath = diff.path;
+        if (diff.oldText !== null) {
+            for (const line of sideLines(diff.oldText))
+                out.push(del(`- ${line}`));
+        }
+        for (const line of sideLines(diff.newText))
+            out.push(add(`+ ${line}`));
+    }
+    return out;
+}
+/** Join the text blocks of a view's content payload (read/generic cards). */
+function contentLines(content) {
+    const text = (content ?? []).map(block => (block.type === 'text' ? block.text ?? '' : '')).join('').trimEnd();
+    if (text === '')
+        return [];
+    return text.split('\n').map(dim);
+}
+/** Per-card body lines; unknown/absent shapes yield [] so the caller falls
+ *  back to the raw result text. */
+function viewLines(view) {
+    switch (view.card) {
+        case 'diff':
+            return diffLines(view.diffs);
+        case 'terminal': {
+            // The call-side terminal card has no output yet; only presentResult's
+            // does. `in` narrows the call/result union without extra types.
+            const out = (('output' in view ? view.output : undefined) ?? '').trimEnd();
+            const lines = out === '' ? [] : out.split('\n').map(dim);
+            if ('exitCode' in view && view.exitCode !== undefined && view.exitCode !== 0) {
+                lines.push({ text: `Exit code ${view.exitCode}`, tone: 'error' });
+            }
+            if ('signal' in view && view.signal !== undefined) {
+                lines.push({ text: `Killed by signal ${view.signal}`, tone: 'error' });
+            }
+            return lines;
+        }
+        case 'read':
+            return contentLines('content' in view ? view.content : undefined);
+        case 'generic':
+            return contentLines('content' in view ? view.content : undefined);
+        case 'search': {
+            if (view.shape === 'paths') {
+                const lines = view.paths.map(plain);
+                if (view.truncated)
+                    lines.push(dim(`… (${view.total} total)`));
+                return lines;
+            }
+            const lines = [];
+            for (const file of view.files) {
+                lines.push(plain(file.path));
+                for (const match of file.matches) {
+                    lines.push(dim(`${match.lineNumber}: ${match.line}`));
+                }
+            }
+            if (view.truncated)
+                lines.push(dim(`… (${view.total} total)`));
+            return lines;
+        }
+        default:
+            return [];
+    }
+}
+/** Collapsed bodies fold past the card's line budget; verbose (Ctrl+O) is
+ *  always uncapped. Mirrors wrapText's "one extra line is shown directly". */
+function capLines(lines, max, verbose) {
+    if (verbose || lines.length <= max)
+        return lines;
+    if (lines.length - max === 1)
+        return lines;
+    return [
+        ...lines.slice(0, max),
+        dim(`… +${lines.length - max} lines (ctrl+o to expand)`),
+    ];
+}
+/** Header title from the presentation view: terminal cards keep the
+ *  `Name(command)` shape; everything else renders the tool's own title
+ *  (`Edit /path`, `Read /path (1 - 100)`) with the first word bold. The
+ *  result view's title replaces the call view's only when present — a
+ *  settled terminal card carries output but no title of its own. */
+function HeaderTitle({ name, title, isTerminal, displayArgs }) {
+    if (title === undefined) {
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, wrap: "truncate-end", children: name }) }), displayArgs !== '' && (_jsx(Box, { flexWrap: "nowrap", children: _jsxs(Text, { children: ["(", displayArgs, ")"] }) }))] }));
+    }
+    if (isTerminal) {
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, wrap: "truncate-end", children: name }) }), _jsx(Box, { flexWrap: "nowrap", children: _jsxs(Text, { children: ["(", title, ")"] }) })] }));
+    }
+    const trimmed = title.trim();
+    if (trimmed === '') {
+        return (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, wrap: "truncate-end", children: name }) }));
+    }
+    const space = trimmed.indexOf(' ');
+    const head = space === -1 ? trimmed : trimmed.slice(0, space);
+    const tail = space === -1 ? '' : trimmed.slice(space);
+    return (_jsx(Box, { flexWrap: "nowrap", children: _jsxs(Text, { bold: true, wrap: "truncate-end", children: [head, _jsx(Text, { bold: false, children: tail })] }) }));
+}
+/**
+ * Tool-call card: `● Edit /path` header with a blinking status dot, then the
+ * structured body under a `  ⎿  ` gutter — diff hunks in red/green, terminal
+ * output, read content — instead of the raw result dump (ported from the
+ * leak's `AssistantToolUseMessage.tsx` + the dsh-tools presentation views the
+ * channel captures per call).
+ */
+export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected = false, isExpanded = false, }) {
+    const isRunning = tool.status === 'running';
+    const isError = tool.status === 'error';
+    const displayArgs = verbose ? tool.argsFull ?? tool.argsText : tool.argsText;
+    const result = tool.resultFull ?? tool.resultText;
+    const name = displayName(tool.name);
+    const minWidth = stringWidth(name) + 2;
+    // The settled view carries the applied diff / actual output; while running,
+    // the call view already shows the pending change (CC's pending Edit diff).
+    const view = tool.resultView ?? tool.callView;
+    // presentResult may omit a title (terminal results carry output, not a
+    // command) — then the call view's title stands.
+    const headerTitle = tool.resultView?.title ?? tool.callView?.title;
+    const headerIsTerminal = view?.card === 'terminal';
+    // Live elapsed clock while the call runs (CC's bash elapsed timer): the
+    // 1s tick re-renders the card; elapsed derives from wall-clock refs.
+    const [viewportRef] = useAnimationFrame(isRunning ? 1000 : null);
+    const elapsedMs = isRunning
+        ? tool.startedAt !== undefined
+            ? Date.now() - tool.startedAt
+            : undefined
+        : tool.durationMs;
+    const elapsedText = elapsedMs !== undefined ? ` · ${formatDuration(elapsedMs)}` : '';
+    // Body lines: the structured view first, raw result text as the fallback
+    // (tools without a presenter, or a folded row awaiting loadOlder).
+    let body = [];
+    if (isError) {
+        if (tool.errorText)
+            body = [{ text: tool.errorText, tone: 'error' }];
+    }
+    else {
+        if (view !== undefined)
+            body = viewLines(view);
+        if (body.length === 0 && result) {
+            body = result.trimEnd().split('\n').map(dim);
+        }
+        if (isRunning && body.length === 0) {
+            body = [dim(`Running… (${formatDuration(Math.max(0, Date.now() - (tool.startedAt ?? Date.now())))})`)];
+        }
+    }
+    const cap = view?.card === 'diff' ? DIFF_BODY_MAX_LINES : TEXT_BODY_MAX_LINES;
+    const lines = capLines(body, cap, verbose);
+    return (_jsx(Box, { ref: viewportRef, flexDirection: "row", justifyContent: "space-between", marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected
+            ? 'messageActionsBackground'
+            : isExpanded
+                ? 'userMessageBackgroundHover'
+                : undefined, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", minWidth: minWidth, children: [_jsx(ToolUseLoader, { shouldAnimate: isRunning, isUnresolved: isRunning, isError: isError }), _jsx(HeaderTitle, { name: name, title: headerTitle, isTerminal: headerIsTerminal, displayArgs: displayArgs }), !isRunning && (_jsx(Box, { flexWrap: "nowrap", children: _jsx(Text, { dimColor: true, children: elapsedText }) }))] }), lines.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 5, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: index === 0 ? GUTTER_FIRST : GUTTER_REST }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: line.tone === 'add'
+                                    ? 'diffAddedWord'
+                                    : line.tone === 'del'
+                                        ? 'diffRemovedWord'
+                                        : line.tone === 'error'
+                                            ? 'error'
+                                            : undefined, dimColor: line.tone === 'dim', wrap: "wrap", children: line.text === '' ? ' ' : line.text }) })] }, index)))] }) }));
+}

package/lib/types/components/messages/MessageMetadata.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type Props = {
+    /** Wall-clock ms of the assistant message event. */
+    timestamp?: number;
+    /** Model id shown next to the time (session model). */
+    model: string;
+};
+/**
+ * Transcript-mode metadata row: `HH:MM · model`, right-aligned above the
+ * assistant text (ported from the leak's MessageTimestamp + MessageModel,
+ * collapsed into one row).
+ */
+export declare function MessageMetadata({ timestamp, model, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=MessageMetadata.d.ts.map

package/lib/types/components/messages/MessageMetadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageMetadata.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/MessageMetadata.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,KAAK,GAAG;IACX,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,GACN,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAczB"}

package/lib/types/components/messages/MessageMetadata.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '../../ink/components/Box.js';
+import Text from '../../ink/components/Text.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+/**
+ * Transcript-mode metadata row: `HH:MM · model`, right-aligned above the
+ * assistant text (ported from the leak's MessageTimestamp + MessageModel,
+ * collapsed into one row).
+ */
+export function MessageMetadata({ timestamp, model, }) {
+    if (timestamp === undefined)
+        return null;
+    const formatted = new Date(timestamp).toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true,
+    });
+    const text = `${formatted} · ${model}`;
+    return (_jsx(Box, { minWidth: stringWidth(text), children: _jsx(Text, { dimColor: true, children: text }) }));
+}

package/lib/types/components/messages/UserPromptMessage.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type Props = {
+    text: string;
+    /** Adds the top margin between turns (CC: addMargin). */
+    addMargin: boolean;
+    /** Message-selection mode highlight. */
+    isSelected?: boolean;
+    /** Row expanded on its own (persistent hover-grey background, CC). */
+    isExpanded?: boolean;
+    onClick?(): void;
+};
+/**
+ * User prompt bubble: `❯ text` on the theme's userMessageBackground grey
+ * (ported from the leak's `messages/UserPromptMessage.tsx` +
+ * `HighlightedThinkingText.tsx`, with the ultrathink rainbow removed).
+ */
+export declare function UserPromptMessage({ text, addMargin, isSelected, isExpanded, onClick, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=UserPromptMessage.d.ts.map

package/lib/types/components/messages/UserPromptMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserPromptMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/UserPromptMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,SAAS,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,UAAkB,EAClB,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAqBzB"}

package/lib/types/components/messages/UserPromptMessage.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '../../ui.js';
+import { POINTER } from '../../cc/figures.js';
+/**
+ * User prompt bubble: `❯ text` on the theme's userMessageBackground grey
+ * (ported from the leak's `messages/UserPromptMessage.tsx` +
+ * `HighlightedThinkingText.tsx`, with the ultrathink rainbow removed).
+ */
+export function UserPromptMessage({ text, addMargin, isSelected = false, isExpanded = false, onClick, }) {
+    return (_jsx(Box, { flexDirection: "column", marginTop: addMargin ? 1 : 0, backgroundColor: isSelected
+            ? 'messageActionsBackground'
+            : isExpanded
+                ? 'userMessageBackgroundHover'
+                : 'userMessageBackground', paddingRight: 1, onClick: onClick, children: _jsxs(Text, { children: [_jsxs(Text, { color: "subtle", children: [POINTER, " "] }), _jsx(Text, { color: "text", children: text })] }) }));
+}

package/lib/types/components/questions/AskUserQuestionPanel.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The questionnaire panel — Claude Code style ask-user-question UI for the
+ * DSH user-interaction seam. One question per panel (progress header, header
+ * chip, wrapped question text, optional detail, option list with focus
+ * pointer and multi-select checkmarks), styled in the dsh-tui mist-blue
+ * design language.
+ *
+ * The list's last row IS the free-text input (issue #9): no Tab, no mode
+ * switch — the view never changes. Typing while focused on a real option
+ * appends into that input row (single-select also attaches the option's
+ * label, so the answer can carry both `selected` and `custom`); focusing
+ * the input row itself and typing gives a pure custom answer.
+ */
+import React from 'react';
+import type { QuestionSelection } from '../../questions.js';
+export type AskUserQuestionPanelProps = {
+    /** The question to render (from the QuestionStore snapshot). */
+    readonly question: {
+        readonly question: string;
+        readonly header?: string;
+        readonly detail?: string;
+        readonly options?: ReadonlyArray<{
+            readonly label: string;
+            readonly description?: string;
+        }>;
+        readonly multiSelect?: boolean;
+    };
+    /** 1-based position within the batch (progress header). */
+    readonly position: number;
+    /** Total questions in the batch (progress header). */
+    readonly total: number;
+    /** Questions answered before the current one. */
+    readonly answered: number;
+    readonly onAnswer: (selection: QuestionSelection) => void;
+    /** Esc / Ctrl+C — aborts the whole ask (ASK_ABORTED back to the model). */
+    readonly onCancel: () => void;
+};
+export declare function AskUserQuestionPanel({ question, position, total, answered, onAnswer, onCancel, }: AskUserQuestionPanelProps): React.ReactNode;
+//# sourceMappingURL=AskUserQuestionPanel.d.ts.map

package/lib/types/components/questions/AskUserQuestionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AskUserQuestionPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/AskUserQuestionPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAM3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;QACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;YAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;QAC3F,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAC/B,CAAA;IACD,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,sDAAsD;IACtD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzD,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,SAAS,CA8S7C"}

package/lib/types/components/questions/AskUserQuestionPanel.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The questionnaire panel — Claude Code style ask-user-question UI for the
+ * DSH user-interaction seam. One question per panel (progress header, header
+ * chip, wrapped question text, optional detail, option list with focus
+ * pointer and multi-select checkmarks), styled in the dsh-tui mist-blue
+ * design language.
+ *
+ * The list's last row IS the free-text input (issue #9): no Tab, no mode
+ * switch — the view never changes. Typing while focused on a real option
+ * appends into that input row (single-select also attaches the option's
+ * label, so the answer can carry both `selected` and `custom`); focusing
+ * the input row itself and typing gives a pure custom answer.
+ */
+import React from 'react';
+import { t } from '../../i18n.js';
+import { Box, Text, useInput } from '../../ui.js';
+import { Divider } from '../design-system/Divider.js';
+import { POINTER } from '../../cc/figures.js';
+const CHECKED = '◉';
+const UNCHECKED = '○';
+const PENCIL = '✎';
+export function AskUserQuestionPanel({ question, position, total, answered, onAnswer, onCancel, }) {
+    const options = question.options ?? [];
+    const multiSelect = question.multiSelect === true;
+    /** Rows: the real options plus the inline input row at the tail. */
+    const rowCount = options.length + 1;
+    const [focusIndex, setFocusIndex] = React.useState(0);
+    const [checked, setChecked] = React.useState(() => new Set());
+    const [customText, setCustomText] = React.useState('');
+    const [customCursor, setCustomCursor] = React.useState(0);
+    /** Single-select label captured by typing on a focused option — submitted
+     *  together with the custom text when the input row itself is Entered. */
+    const [attached, setAttached] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const inputFocused = focusIndex === options.length;
+    const moveFocus = (delta) => {
+        if (rowCount <= 1)
+            return;
+        setFocusIndex(index => (index + delta + rowCount) % rowCount);
+        setError(null);
+    };
+    /** Append at the text tail (option-row typing has no visible cursor). */
+    const appendText = (text) => {
+        setCustomText(previous => previous + text);
+        setCustomCursor(previous => previous + text.length);
+        setError(null);
+    };
+    /** Drop the character before the cursor; empty text drops the attach. */
+    const backspaceText = () => {
+        if (customCursor <= 0)
+            return;
+        setCustomText(previous => {
+            const next = previous.slice(0, customCursor - 1) + previous.slice(customCursor);
+            if (next === '')
+                setAttached(null);
+            return next;
+        });
+        setCustomCursor(cursor => cursor - 1);
+    };
+    const checkedLabels = () => [...checked].sort((a, b) => a - b).map(index => options[index]?.label)
+        .filter((label) => label !== undefined);
+    /** Enter on a real option: the option(s) plus whatever the input row holds. */
+    const submitOptions = () => {
+        const text = customText.trim();
+        if (multiSelect) {
+            const selected = checkedLabels();
+            if (selected.length === 0 && text === '') {
+                setError(t('question-select-or-answer'));
+                return;
+            }
+            onAnswer({ selected, ...(text !== '' ? { custom: text } : {}) });
+            return;
+        }
+        const label = options[focusIndex]?.label;
+        if (label === undefined) {
+            setError(t('question-select-or-answer'));
+            return;
+        }
+        onAnswer({ selected: [label], ...(text !== '' ? { custom: text } : {}) });
+    };
+    /** Enter on the input row itself: the text, plus the attached label (or
+     *  the checked labels for multi-select) when there is one. */
+    const submitInput = () => {
+        const text = customText.trim();
+        if (multiSelect) {
+            const selected = checkedLabels();
+            if (selected.length === 0 && text === '') {
+                setError(t('question-answer-or-check'));
+                return;
+            }
+            onAnswer({ selected, ...(text !== '' ? { custom: text } : {}) });
+            return;
+        }
+        if (text === '') {
+            setError(t('question-type-answer-first'));
+            return;
+        }
+        onAnswer({ selected: attached !== null ? [attached] : [], custom: text });
+    };
+    useInput((input, key) => {
+        if (key.escape || (key.ctrl && input === 'c')) {
+            onCancel();
+            return;
+        }
+        if (inputFocused) {
+            if (key.upArrow) {
+                moveFocus(-1);
+                return;
+            }
+            if (key.downArrow) {
+                moveFocus(1);
+                return;
+            }
+            if (key.return) {
+                submitInput();
+                return;
+            }
+            if (key.backspace) {
+                backspaceText();
+                return;
+            }
+            if (key.delete) {
+                if (customCursor < customText.length) {
+                    setCustomText(text => {
+                        const next = text.slice(0, customCursor) + text.slice(customCursor + 1);
+                        if (next === '')
+                            setAttached(null);
+                        return next;
+                    });
+                }
+                return;
+            }
+            if (key.leftArrow) {
+                setCustomCursor(cursor => Math.max(0, cursor - 1));
+                return;
+            }
+            if (key.rightArrow) {
+                setCustomCursor(cursor => Math.min(customText.length, cursor + 1));
+                return;
+            }
+            if (key.home) {
+                setCustomCursor(0);
+                return;
+            }
+            if (key.end) {
+                setCustomCursor(customText.length);
+                return;
+            }
+            if (!key.ctrl && !key.meta && input) {
+                setCustomText(text => text.slice(0, customCursor) + input + text.slice(customCursor));
+                setCustomCursor(cursor => cursor + input.length);
+                setError(null);
+            }
+            return;
+        }
+        // A real option row.
+        if (key.upArrow) {
+            moveFocus(-1);
+            return;
+        }
+        if (key.downArrow) {
+            moveFocus(1);
+            return;
+        }
+        if (key.tab) {
+            setFocusIndex(options.length);
+            setError(null);
+            return;
+        }
+        if (input === ' ' && multiSelect) {
+            setChecked(previous => {
+                const next = new Set(previous);
+                if (next.has(focusIndex))
+                    next.delete(focusIndex);
+                else
+                    next.add(focusIndex);
+                return next;
+            });
+            return;
+        }
+        if (key.return) {
+            submitOptions();
+            return;
+        }
+        if (key.backspace) {
+            // Edit the input row without leaving the option list.
+            if (customText !== '')
+                backspaceText();
+            return;
+        }
+        // Typing on an option appends into the input row; single-select also
+        // attaches this option's label so Enter carries label + text (#9).
+        if (!key.ctrl && !key.meta && input) {
+            appendText(input);
+            if (!multiSelect)
+                setAttached(options[focusIndex]?.label ?? null);
+        }
+    }, { isActive: true });
+    const remaining = total - answered;
+    const headerTitle = ` ${t('question-header-progress', { position, total, remaining: remaining > 1 ? t('question-remaining-more', { n: remaining }) : '' })} `;
+    const cursorChar = customCursor < customText.length ? customText[customCursor] : ' ';
+    const renderInputRow = () => (_jsxs(Box, { flexDirection: "row", marginTop: inputFocused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : undefined, bold: inputFocused, children: inputFocused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : 'suggestion', children: PENCIL }) }), _jsxs(Box, { flexDirection: "row", marginLeft: 1, children: [_jsx(Text, { bold: inputFocused, color: inputFocused ? 'claude' : 'suggestion', children: t('question-custom-tab') }), attached !== null && (_jsx(Text, { color: "suggestion", children: t('question-attached-label', { label: attached }) })), _jsx(Text, { dimColor: true, children: "\uFF1A" }), customText === '' && !inputFocused ? (_jsx(Text, { dimColor: true, children: t('question-direct-input') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: customText.slice(0, customCursor) }), inputFocused
+                                ? _jsx(Text, { inverse: true, children: cursorChar })
+                                : _jsx(Text, { color: "suggestion", children: "\u258F" }), _jsx(Text, { wrap: "wrap", children: customText.slice(inputFocused ? customCursor + 1 : customCursor) })] }))] })] }));
+    const renderOptions = () => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.map((option, index) => {
+                const focused = index === focusIndex;
+                const selected = multiSelect ? checked.has(index) : focused;
+                return (_jsxs(Box, { flexDirection: "row", marginTop: focused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: focused, children: focused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: selected, children: selected ? (multiSelect ? CHECKED : '●') : UNCHECKED }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsx(Text, { bold: focused || selected, color: focused ? 'claude' : undefined, wrap: "wrap", children: option.label }), option.description !== undefined && (_jsx(Text, { dimColor: true, wrap: "wrap", children: option.description }))] })] }, option.label));
+            }), renderInputRow()] }));
+    const hintParts = inputFocused
+        ? [
+            t('question-hint-type'),
+            t('question-hint-enter'),
+            ...(options.length > 0 ? [t('question-hint-back')] : []),
+            t('question-hint-esc'),
+            ...(multiSelect && checked.size > 0 ? [t('question-hint-selected', { n: checked.size })] : []),
+        ]
+        : [
+            t('question-hint-select'),
+            ...(multiSelect ? [t('question-hint-multi')] : []),
+            t('question-hint-attach'),
+            t('question-hint-enter'),
+            t('question-hint-esc'),
+            ...(multiSelect && checked.size > 0 ? [t('question-hint-selected', { n: checked.size })] : []),
+        ];
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, paddingRight: 2, width: "100%", children: [_jsx(Divider, { color: "permission", title: headerTitle, padding: 4 }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [question.header !== undefined && (_jsxs(Text, { color: "suggestion", bold: true, children: ["\u25C8 ", question.header] })), _jsx(Text, { bold: true, wrap: "wrap", children: question.question }), question.detail !== undefined && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: question.detail.split('\n').map((line, index) => (_jsx(Text, { dimColor: true, italic: true, wrap: "wrap", children: line }, index))) }))] }), renderOptions(), error !== null && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "error", children: error }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: hintParts.join(' · ') }) })] }));
+}

package/lib/types/components/shimmer.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared shimmer utilities: the blue-white color ladder of the header and a
+ * moving-highlight text painter used by the header wordmark/tagline and the
+ * working-activity status line.
+ */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** Header blue-white ladder: brand → ice → pale → soft ice flash.
+ *  FLASH stays visibly blue (never pure white) — the highlight reads as a
+ *  mist-brightened crest, not a white strobe. */
+export declare const BRAND: Rgb;
+/** Header ladder ice blue (`#93BEFF`). */
+export declare const ICE: Rgb;
+/** Header ladder pale blue (`#D7E4FF`). */
+export declare const PALE: Rgb;
+/** Soft ice flash blue (`#C6D8F8`); stays visibly blue, never pure white. */
+export declare const FLASH: Rgb;
+/**
+ * Paint `word` with a 10-column highlight window sweeping across it. The
+ * window advances one column per `stepMs` and the brightness pulse follows
+ * the same cadence (period 2π·stepMs·... — one full sine per ~6 steps).
+ * CC's original cadence was 200ms/column; callers pass 60 for the lively
+ * sweep.
+ * @param word - Text to paint.
+ * @param time - Elapsed time in milliseconds; drives the sweep position and the brightness pulse.
+ * @param base - Color for cells outside the highlight window.
+ * @param highlight - Color mixed into the sweeping highlight window.
+ * @param stepMs - Milliseconds per column of sweep advance (default 60).
+ * @returns The ANSI bold-colored word with the moving highlight.
+ */
+export declare function sweep(word: string, time: number, base: Rgb, highlight: Rgb, stepMs?: number): string;
+//# sourceMappingURL=shimmer.d.ts.map

package/lib/types/components/shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;iDAEiD;AACjD,eAAO,MAAM,KAAK,EAAE,GAA+B,CAAA;AACnD,0CAA0C;AAC1C,eAAO,MAAM,GAAG,EAAE,GAAgC,CAAA;AAClD,2CAA2C;AAC3C,eAAO,MAAM,IAAI,EAAE,GAAgC,CAAA;AACnD,6EAA6E;AAC7E,eAAO,MAAM,KAAK,EAAE,GAAgC,CAAA;AAEpD;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,SAAK,GAAG,MAAM,CAehG"}

package/lib/types/components/shimmer.js

@@ -0,0 +1,43 @@
+import chalk from 'chalk';
+import { stringWidth } from '../ink/stringWidth.js';
+import { getGraphemeSegmenter } from '../utils/intl.js';
+import { interpolateColor } from '../components/Spinner/spinnerUtils.js';
+/** Header blue-white ladder: brand → ice → pale → soft ice flash.
+ *  FLASH stays visibly blue (never pure white) — the highlight reads as a
+ *  mist-brightened crest, not a white strobe. */
+export const BRAND = { r: 77, g: 107, b: 254 };
+/** Header ladder ice blue (`#93BEFF`). */
+export const ICE = { r: 147, g: 190, b: 255 };
+/** Header ladder pale blue (`#D7E4FF`). */
+export const PALE = { r: 215, g: 228, b: 255 };
+/** Soft ice flash blue (`#C6D8F8`); stays visibly blue, never pure white. */
+export const FLASH = { r: 198, g: 216, b: 248 };
+/**
+ * Paint `word` with a 10-column highlight window sweeping across it. The
+ * window advances one column per `stepMs` and the brightness pulse follows
+ * the same cadence (period 2π·stepMs·... — one full sine per ~6 steps).
+ * CC's original cadence was 200ms/column; callers pass 60 for the lively
+ * sweep.
+ * @param word - Text to paint.
+ * @param time - Elapsed time in milliseconds; drives the sweep position and the brightness pulse.
+ * @param base - Color for cells outside the highlight window.
+ * @param highlight - Color mixed into the sweeping highlight window.
+ * @param stepMs - Milliseconds per column of sweep advance (default 60).
+ * @returns The ANSI bold-colored word with the moving highlight.
+ */
+export function sweep(word, time, base, highlight, stepMs = 60) {
+    const width = stringWidth(word);
+    const cycle = width + 20;
+    const glimmerStart = (Math.floor(time / stepMs) % cycle) - 10;
+    let out = '';
+    let col = 0;
+    for (const { segment } of getGraphemeSegmenter().segment(word)) {
+        const segWidth = stringWidth(segment);
+        const highlighted = col >= glimmerStart && col + segWidth <= glimmerStart + 10;
+        const opacity = highlighted ? (Math.sin(time / (stepMs * 2)) + 1) / 2 : 0;
+        const rgb = highlighted ? interpolateColor(base, highlight, opacity) : base;
+        out += chalk.rgb(rgb.r, rgb.g, rgb.b).bold(segment);
+        col += segWidth;
+    }
+    return out;
+}