@deepseek-harness-tui/dsh-tui 0.5.0

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SessionRecord } from '../sessionHistory.js';
+/**
+ * `/resume` session picker in the CC ModelPicker style: a Pane with the
+ * recent sessions as Select rows (title + time description, ✓ on the
+ * current session), plus the Enter/Esc hint line. Only WINDOW rows render;
+ * the window follows the focused row, with `↑ N more` / `↓ N more` markers
+ * at the edges.
+ */
+export declare function ResumePicker({ sessions, focusIndex, currentSessionId, }: {
+    sessions: readonly SessionRecord[];
+    focusIndex: number;
+    currentSessionId: string;
+}): React.ReactNode;
+//# sourceMappingURL=ResumePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResumePicker.d.ts","sourceRoot":"","sources":["../../../src/components/ResumePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAsBzD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,UAAU,EACV,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAA;IAClC,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,SAAS,CA8ClB"}

package/lib/types/components/ResumePicker.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { Byline } from './design-system/Byline.js';
+import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js';
+/** Compact timestamp like `Jan 2, 03:04` for the resume list. */
+function formatTimestamp(ms) {
+    const date = new Date(ms);
+    return date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+}
+/** Visible list window: the picker scrolls instead of dumping every session
+ *  (long histories would fill the whole screen otherwise). */
+const WINDOW = 8;
+/**
+ * `/resume` session picker in the CC ModelPicker style: a Pane with the
+ * recent sessions as Select rows (title + time description, ✓ on the
+ * current session), plus the Enter/Esc hint line. Only WINDOW rows render;
+ * the window follows the focused row, with `↑ N more` / `↓ N more` markers
+ * at the edges.
+ */
+export function ResumePicker({ sessions, focusIndex, currentSessionId, }) {
+    const start = Math.max(0, Math.min(focusIndex - Math.floor(WINDOW / 2), sessions.length - WINDOW));
+    const visible = sessions.slice(start, start + WINDOW);
+    const above = start;
+    const below = Math.max(0, sessions.length - (start + WINDOW));
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: "Resume" }) }), above > 0 && (_jsxs(Text, { dimColor: true, italic: true, children: ["\u2191 ", above, " more"] })), visible.map(session => (_jsx(ListItem, { isFocused: session.id === sessions[focusIndex]?.id, isSelected: session.id === currentSessionId, description: formatTimestamp(session.updatedAt), children: session.title || session.id }, session.id))), below > 0 && (_jsxs(Text, { dimColor: true, italic: true, children: ["\u2193 ", below, " more"] }))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsxs(Byline, { children: [_jsx(KeyboardShortcutHint, { shortcut: "Enter", action: "confirm", bold: true }), _jsx(KeyboardShortcutHint, { shortcut: "Esc", action: "exit" })] }) })] }));
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ChatRow } from '../channel.js';
+/**
+ * Double-Esc rewind picker (CC's "Double-tap esc to rewind the code and/or
+ * conversation to a previous point in time"): lists the user's past messages
+ * newest-first; selecting one and confirming rewinds the conversation to
+ * that point (the message comes back into the input for re-editing).
+ */
+export declare function RewindPicker({ rows, focusIndex, confirmRow, }: {
+    rows: readonly ChatRow[];
+    focusIndex: number;
+    confirmRow: ChatRow | null;
+}): React.ReactNode;
+//# sourceMappingURL=RewindPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RewindPicker.d.ts","sourceRoot":"","sources":["../../../src/components/RewindPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAM5C;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,UAAU,EACV,UAAU,GACX,EAAE;IACD,IAAI,EAAE,SAAS,OAAO,EAAE,CAAA;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,OAAO,GAAG,IAAI,CAAA;CAC3B,GAAG,KAAK,CAAC,SAAS,CAuDlB"}

package/lib/types/components/RewindPicker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { Byline } from './design-system/Byline.js';
+import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js';
+/**
+ * Double-Esc rewind picker (CC's "Double-tap esc to rewind the code and/or
+ * conversation to a previous point in time"): lists the user's past messages
+ * newest-first; selecting one and confirming rewinds the conversation to
+ * that point (the message comes back into the input for re-editing).
+ */
+export function RewindPicker({ rows, focusIndex, confirmRow, }) {
+    if (confirmRow !== null) {
+        return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: "Rewind conversation to this message?" }) }), _jsx(ListItem, { isFocused: false, description: "conversation restarts here", children: preview(confirmRow.text) }), _jsx(Text, { dimColor: true, italic: true, children: _jsxs(Byline, { children: [_jsx(KeyboardShortcutHint, { shortcut: "Enter", action: "rewind", bold: true }), _jsx(KeyboardShortcutHint, { shortcut: "Esc", action: "back" })] }) })] }) }));
+    }
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "remember", bold: true, children: "Rewind" }), _jsx(Text, { dimColor: true, children: "Pick a message to rewind the conversation to" })] }), rows.length === 0 ? (_jsx(ListItem, { isFocused: false, children: "No messages to rewind to" })) : (rows.map((row, index) => (_jsx(ListItem, { isFocused: index === focusIndex, description: index === 0 ? 'last message' : undefined, children: preview(row.text) }, row.id))))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsxs(Byline, { children: [_jsx(KeyboardShortcutHint, { shortcut: "Enter", action: "select", bold: true }), _jsx(KeyboardShortcutHint, { shortcut: "Esc", action: "exit" })] }) })] }));
+}
+/** One-line preview of a message (newlines flattened, capped). */
+function preview(text) {
+    const flat = text.replace(/\s+/g, ' ').trim();
+    return flat.length <= 80 ? flat : `${flat.slice(0, 80)}…`;
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * A single-line search input in the round-bordered box of the leak's
+ * SearchBox: `⌕ ` prefix, block cursor at `cursorOffset` (inverse cell).
+ * When empty and focused, a solid block caret sits at the start and the
+ * placeholder is right-aligned (dimmed) — kept off the caret's cell so the
+ * terminal-painted IME preedit (pinyin) can never be overlaid on it during
+ * CJK composition.
+ */
+export declare function SearchBox({ query, placeholder, isFocused, isTerminalFocused, prefix, width, cursorOffset, borderless, }: {
+    query: string;
+    placeholder?: string;
+    isFocused: boolean;
+    isTerminalFocused: boolean;
+    prefix?: string;
+    width?: number | string;
+    cursorOffset?: number;
+    borderless?: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=SearchBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,MAAY,EACZ,KAAK,EACL,YAAY,EACZ,UAAkB,GACnB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,KAAK,CAAC,SAAS,CAqDlB"}

package/lib/types/components/SearchBox.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '../ink/components/Box.js';
+import Text from '../ink/components/Text.js';
+/**
+ * A single-line search input in the round-bordered box of the leak's
+ * SearchBox: `⌕ ` prefix, block cursor at `cursorOffset` (inverse cell).
+ * When empty and focused, a solid block caret sits at the start and the
+ * placeholder is right-aligned (dimmed) — kept off the caret's cell so the
+ * terminal-painted IME preedit (pinyin) can never be overlaid on it during
+ * CJK composition.
+ */
+export function SearchBox({ query, placeholder = 'Search…', isFocused, isTerminalFocused, prefix = '⌕', width, cursorOffset, borderless = false, }) {
+    const offset = cursorOffset ?? query.length;
+    const borderStyle = borderless ? undefined : 'round';
+    const borderColor = isFocused ? 'suggestion' : undefined;
+    const borderDimColor = !isFocused;
+    // Focused + empty + terminal focused: inline caret row (block caret at the
+    // start, placeholder right-aligned) instead of the inline placeholder.
+    const inlineCaret = isFocused && query === '' && isTerminalFocused;
+    let content;
+    if (isFocused) {
+        if (query) {
+            content = isTerminalFocused ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: query.slice(0, offset) }), _jsx(Text, { inverse: true, children: offset < query.length ? query[offset] : ' ' }), offset < query.length && _jsx(Text, { children: query.slice(offset + 1) })] })) : (_jsx(Text, { children: query }));
+        }
+        else if (!isTerminalFocused) {
+            content = _jsx(Text, { dimColor: true, children: placeholder });
+        }
+    }
+    else {
+        content = query ? _jsx(Text, { children: query }) : _jsx(Text, { children: placeholder });
+    }
+    return (_jsx(Box, { flexShrink: 0, borderStyle: borderStyle, borderColor: borderColor, borderDimColor: borderDimColor, paddingX: borderless ? 0 : 1, width: width, children: inlineCaret ? (_jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsxs(Text, { children: [prefix, " "] }), _jsx(Text, { inverse: true, children: " " }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, wrap: "truncate", children: placeholder })] })) : (_jsxs(Text, { dimColor: !isFocused, children: [prefix, " ", content] })) }));
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+export type SelectOption = {
+    value: string;
+    /** Row content; plain strings render inline, richer rows may carry color swatches. */
+    label: React.ReactNode;
+    description?: string;
+};
+/**
+ * A single-choice select list in the CC CustomSelect style (ported visual:
+ * ListItem rows with ❯ focus pointer, ✓ selected checkmark, descriptions,
+ * scroll arrows). Keyboard navigation is owned by the parent dialog, which
+ * passes focus/selection indices back in.
+ */
+export declare function Select({ options, focusIndex, selectedValue, visibleOptionCount, }: {
+    options: readonly SelectOption[];
+    /** Index of the keyboard-focused row (shows the ❯ pointer). */
+    focusIndex: number;
+    /** Value of the chosen row (shows the ✓ checkmark). */
+    selectedValue: string | undefined;
+    visibleOptionCount?: number;
+}): React.ReactNode;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,UAAU,EACV,aAAa,EACb,kBAAsB,GACvB,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,KAAK,CAAC,SAAS,CAiClB"}

package/lib/types/components/Select.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '../ink/components/Box.js';
+import { ListItem } from './design-system/ListItem.js';
+/**
+ * A single-choice select list in the CC CustomSelect style (ported visual:
+ * ListItem rows with ❯ focus pointer, ✓ selected checkmark, descriptions,
+ * scroll arrows). Keyboard navigation is owned by the parent dialog, which
+ * passes focus/selection indices back in.
+ */
+export function Select({ options, focusIndex, selectedValue, visibleOptionCount = 5, }) {
+    // Window around the focus row, with scroll hints at the edges (CC style).
+    const startIndex = Math.max(0, Math.min(focusIndex - Math.floor(visibleOptionCount / 2), options.length - visibleOptionCount));
+    const endIndex = Math.min(startIndex + visibleOptionCount, options.length);
+    const visible = options.slice(startIndex, endIndex);
+    return (_jsx(Box, { flexDirection: "column", children: visible.map((option, index) => {
+            const absoluteIndex = startIndex + index;
+            return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, isSelected: option.value === selectedValue, description: option.description, showScrollUp: absoluteIndex === startIndex && startIndex > 0, showScrollDown: absoluteIndex === endIndex - 1 && endIndex < options.length, children: option.label }, option.value));
+        }) }));
+}

package/lib/types/components/Spinner/GlimmerMessage.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type Theme } from '../../theme.js';
+import type { SpinnerMode } from './spinnerMode.js';
+type Props = {
+    message: string;
+    mode: SpinnerMode;
+    messageColor: keyof Theme;
+    glimmerIndex: number;
+    flashOpacity: number;
+    shimmerColor: keyof Theme;
+    stalledIntensity?: number;
+};
+/**
+ * The shimmering verb message next to the spinner glyph, ported from the
+ * leak's `Spinner/GlimmerMessage.tsx`.
+ */
+export declare function GlimmerMessage({ message, mode, messageColor, glimmerIndex, flashOpacity, shimmerColor, stalledIntensity, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=GlimmerMessage.d.ts.map

package/lib/types/components/Spinner/GlimmerMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlimmerMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/GlimmerMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAInD,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,WAAW,CAAA;IACjB,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAID;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAoB,GACrB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA8GzB"}

package/lib/types/components/Spinner/GlimmerMessage.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Text from '../../ink/components/Text.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { getGraphemeSegmenter } from '../../utils/intl.js';
+import { getTheme } from '../../theme.js';
+import { interpolateColor, parseRGB, toRGBColor } from './spinnerUtils.js';
+import { useTheme } from '../design-system/ThemeProvider.js';
+const ERROR_RED = { r: 171, g: 43, b: 63 };
+/**
+ * The shimmering verb message next to the spinner glyph, ported from the
+ * leak's `Spinner/GlimmerMessage.tsx`.
+ */
+export function GlimmerMessage({ message, mode, messageColor, glimmerIndex, flashOpacity, shimmerColor, stalledIntensity = 0, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    // Precompute grapheme segmentation + widths once per message instead of
+    // per animation frame (the original component re-renders at ~20fps).
+    const { segments } = React.useMemo(() => {
+        const segs = [];
+        for (const { segment } of getGraphemeSegmenter().segment(message)) {
+            segs.push({ segment, width: stringWidth(segment) });
+        }
+        return { segments: segs };
+    }, [message]);
+    if (!message)
+        return null;
+    // When stalled, show text that smoothly transitions to red
+    if (stalledIntensity > 0) {
+        const baseColorStr = theme[messageColor];
+        const baseRGB = baseColorStr ? parseRGB(baseColorStr) : null;
+        if (baseRGB) {
+            const interpolated = interpolateColor(baseRGB, ERROR_RED, stalledIntensity);
+            const color = toRGBColor(interpolated);
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: message }), _jsx(Text, { color: color, children: " " })] }));
+        }
+        // Fallback for ANSI themes: use messageColor until fully stalled, then error
+        const color = stalledIntensity > 0.5 ? 'error' : messageColor;
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: message }), _jsx(Text, { color: color, children: " " })] }));
+    }
+    // tool-use mode: all chars flash with the same opacity, so render as a
+    // single <Text> instead of N individual FlashingChar components.
+    if (mode === 'tool-use') {
+        const baseColorStr = theme[messageColor];
+        const shimmerColorStr = theme[shimmerColor];
+        const baseRGB = baseColorStr ? parseRGB(baseColorStr) : null;
+        const shimmerRGB = shimmerColorStr ? parseRGB(shimmerColorStr) : null;
+        if (baseRGB && shimmerRGB) {
+            const interpolated = interpolateColor(baseRGB, shimmerRGB, flashOpacity);
+            const color = toRGBColor(interpolated);
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: message }), _jsx(Text, { color: color, children: " " })] }));
+        }
+        // Fallback for ANSI themes: render without flash animation
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: messageColor, children: message }), _jsx(Text, { color: messageColor, children: " " })] }));
+    }
+    // Shimmer: a highlight sweeps across the message text
+    const baseColorStr = theme[messageColor];
+    const shimmerColorStr = theme[shimmerColor];
+    const baseRGB = baseColorStr ? parseRGB(baseColorStr) : null;
+    const shimmerRGB = shimmerColorStr ? parseRGB(shimmerColorStr) : null;
+    if (!baseRGB || !shimmerRGB) {
+        // Fallback for ANSI themes: render without shimmer animation
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: messageColor, children: message }), _jsx(Text, { color: messageColor, children: " " })] }));
+    }
+    return (_jsxs(_Fragment, { children: [segments.map(({ segment, width }, index) => {
+                let charStart = 0;
+                for (let i = 0; i < index; i++)
+                    charStart += segments[i].width;
+                // Character is highlighted if it falls within the glimmer window
+                const isHighlighted = glimmerIndex >= 0 &&
+                    charStart >= glimmerIndex &&
+                    charStart + width <= glimmerIndex + 4;
+                const color = isHighlighted
+                    ? toRGBColor(interpolateColor(baseRGB, shimmerRGB, flashOpacity))
+                    : messageColor;
+                return (_jsx(Text, { color: color, children: segment }, index));
+            }), _jsx(Text, { color: messageColor, children: " " })] }));
+}

package/lib/types/components/Spinner/SpinnerAnimationRow.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Theme } from '../../theme.js';
+import type { SpinnerMode } from './spinnerMode.js';
+export type SpinnerAnimationRowProps = {
+    mode: SpinnerMode;
+    reducedMotion: boolean;
+    hasActiveTools: boolean;
+    /** Raw response length (chars) — feeds the animated token counter. */
+    responseLengthRef: React.RefObject<number>;
+    /** Stable within a turn. */
+    message: string;
+    messageColor: keyof Theme;
+    shimmerColor: keyof Theme;
+    loadingStartTimeRef: React.RefObject<number>;
+    totalPausedMsRef: React.RefObject<number>;
+    pauseStartTimeRef: React.RefObject<number | null>;
+    spinnerSuffix?: string | null;
+    verbose: boolean;
+    columns: number;
+    /** 'thinking' while reasoning streams; number = duration (ms) after it ends. */
+    thinkingStatus: 'thinking' | number | null;
+};
+/**
+ * The 50ms-animated portion of the working spinner, ported from the leak's
+ * `Spinner/SpinnerAnimationRow.tsx` with the swarm/teammate/effort branches
+ * removed. Owns `useAnimationFrame(50)` and all values derived from the
+ * animation clock (frame, glimmer, token counter animation, elapsed time,
+ * stalled intensity, thinking shimmer).
+ */
+export declare function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, responseLengthRef, message, messageColor, shimmerColor, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, spinnerSuffix, verbose, columns, thinkingStatus, }: SpinnerAnimationRowProps): React.ReactNode;
+//# sourceMappingURL=SpinnerAnimationRow.d.ts.map

package/lib/types/components/Spinner/SpinnerAnimationRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerAnimationRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/SpinnerAnimationRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAcnD,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,WAAW,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;IACtB,cAAc,EAAE,OAAO,CAAA;IACvB,sEAAsE;IACtE,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,OAAO,EACP,cAAc,GACf,EAAE,wBAAwB,GAAG,KAAK,CAAC,SAAS,CAwM5C"}

package/lib/types/components/Spinner/SpinnerAnimationRow.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import figures from 'figures';
+import { useMemo, useRef } from 'react';
+import { useAnimationFrame } from '../../ink/hooks/use-animation-frame.js';
+import Box from '../../ink/components/Box.js';
+import Text from '../../ink/components/Text.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { formatDuration, formatNumber } from '../../cc/format.js';
+import { Byline } from '../design-system/Byline.js';
+import { GlimmerMessage } from './GlimmerMessage.js';
+import { SpinnerGlyph } from './SpinnerGlyph.js';
+import { useStalledAnimation } from './useStalledAnimation.js';
+import { interpolateColor, toRGBColor } from './spinnerUtils.js';
+const SEP_WIDTH = stringWidth(' · ');
+const THINKING_BARE_WIDTH = stringWidth('thinking');
+const SHOW_TOKENS_AFTER_MS = 30_000;
+// Thinking shimmer constants (same as the leak).
+const THINKING_INACTIVE = { r: 153, g: 153, b: 153 };
+const THINKING_INACTIVE_SHIMMER = { r: 185, g: 185, b: 185 };
+const THINKING_DELAY_MS = 3000;
+const THINKING_GLOW_PERIOD_S = 2;
+/**
+ * The 50ms-animated portion of the working spinner, ported from the leak's
+ * `Spinner/SpinnerAnimationRow.tsx` with the swarm/teammate/effort branches
+ * removed. Owns `useAnimationFrame(50)` and all values derived from the
+ * animation clock (frame, glimmer, token counter animation, elapsed time,
+ * stalled intensity, thinking shimmer).
+ */
+export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, responseLengthRef, message, messageColor, shimmerColor, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, spinnerSuffix, verbose, columns, thinkingStatus, }) {
+    const [viewportRef, time] = useAnimationFrame(reducedMotion ? null : 50);
+    // === Elapsed time (wall-clock, derived from refs each frame) ===
+    const now = Date.now();
+    const elapsedTimeMs = pauseStartTimeRef.current !== null
+        ? pauseStartTimeRef.current -
+            loadingStartTimeRef.current -
+            totalPausedMsRef.current
+        : now - loadingStartTimeRef.current - totalPausedMsRef.current;
+    // === Animation derivations from `time` ===
+    const currentResponseLength = responseLengthRef.current;
+    const { isStalled, stalledIntensity } = useStalledAnimation(time, currentResponseLength, hasActiveTools, reducedMotion);
+    const frame = reducedMotion ? 0 : Math.floor(time / 120);
+    const glimmerSpeed = mode === 'requesting' ? 50 : 200;
+    const glimmerMessageWidth = useMemo(() => stringWidth(message), [message]);
+    const cycleLength = glimmerMessageWidth + 20;
+    const cyclePosition = Math.floor(time / glimmerSpeed);
+    const glimmerIndex = reducedMotion
+        ? -100
+        : isStalled
+            ? -100
+            : mode === 'requesting'
+                ? (cyclePosition % cycleLength) - 10
+                : glimmerMessageWidth + 10 - (cyclePosition % cycleLength);
+    const flashOpacity = reducedMotion
+        ? 0
+        : mode === 'tool-use'
+            ? (Math.sin((time / 1000) * Math.PI) + 1) / 2
+            : 0;
+    // === Token counter animation (smooth increment, driven by 50ms clock) ===
+    const tokenCounterRef = useRef(currentResponseLength);
+    if (reducedMotion) {
+        tokenCounterRef.current = currentResponseLength;
+    }
+    else {
+        const gap = currentResponseLength - tokenCounterRef.current;
+        if (gap > 0) {
+            let increment;
+            if (gap < 70) {
+                increment = 3;
+            }
+            else if (gap < 200) {
+                increment = Math.max(8, Math.ceil(gap * 0.15));
+            }
+            else {
+                increment = 50;
+            }
+            tokenCounterRef.current = Math.min(tokenCounterRef.current + increment, currentResponseLength);
+        }
+    }
+    const displayedResponseLength = tokenCounterRef.current;
+    const leaderTokens = Math.round(displayedResponseLength / 4);
+    const timerText = formatDuration(elapsedTimeMs);
+    const timerWidth = stringWidth(timerText);
+    const tokenCount = formatNumber(leaderTokens);
+    const tokensText = `${figures.arrowDown} ${tokenCount} tokens`;
+    const tokensWidth = stringWidth(tokensText);
+    // === Thinking text (may shrink to fit) ===
+    let thinkingText = thinkingStatus === 'thinking'
+        ? 'thinking'
+        : typeof thinkingStatus === 'number'
+            ? `thought for ${Math.max(1, Math.round(thinkingStatus / 1000))}s`
+            : null;
+    let thinkingWidthValue = thinkingText ? stringWidth(thinkingText) : 0;
+    // === Progressive width gating ===
+    const messageWidth = glimmerMessageWidth + 2;
+    const sep = SEP_WIDTH;
+    const wantsThinking = thinkingStatus !== null;
+    const wantsTimerAndTokens = verbose || elapsedTimeMs > SHOW_TOKENS_AFTER_MS;
+    const availableSpace = columns - messageWidth - 5;
+    let showThinking = wantsThinking && availableSpace > thinkingWidthValue;
+    if (!showThinking && wantsThinking && thinkingStatus === 'thinking') {
+        if (availableSpace > THINKING_BARE_WIDTH) {
+            thinkingText = 'thinking';
+            thinkingWidthValue = THINKING_BARE_WIDTH;
+            showThinking = true;
+        }
+    }
+    const usedAfterThinking = showThinking ? thinkingWidthValue + sep : 0;
+    const showTimer = wantsTimerAndTokens && availableSpace > usedAfterThinking + timerWidth;
+    const usedAfterTimer = usedAfterThinking + (showTimer ? timerWidth + sep : 0);
+    const showTokens = wantsTimerAndTokens &&
+        leaderTokens > 0 &&
+        availableSpace > usedAfterTimer + tokensWidth;
+    const thinkingOnly = showThinking &&
+        thinkingStatus === 'thinking' &&
+        !spinnerSuffix &&
+        !showTimer &&
+        !showTokens;
+    // === Thinking shimmer color ===
+    const thinkingElapsedSec = (time - THINKING_DELAY_MS) / 1000;
+    const thinkingOpacity = time < THINKING_DELAY_MS
+        ? 0
+        : (Math.sin((thinkingElapsedSec * Math.PI * 2) / THINKING_GLOW_PERIOD_S) +
+            1) /
+            2;
+    const thinkingShimmerColor = toRGBColor(interpolateColor(THINKING_INACTIVE, THINKING_INACTIVE_SHIMMER, thinkingOpacity));
+    // === Build status parts ===
+    const parts = [
+        ...(spinnerSuffix
+            ? [
+                _jsx(Text, { dimColor: true, children: spinnerSuffix }, "suffix"),
+            ]
+            : []),
+        ...(showTimer
+            ? [
+                _jsx(Text, { dimColor: true, children: timerText }, "elapsedTime"),
+            ]
+            : []),
+        ...(showTokens
+            ? [
+                _jsxs(Box, { flexDirection: "row", children: [_jsx(SpinnerModeGlyph, { mode: mode }), _jsxs(Text, { dimColor: true, children: [tokenCount, " tokens"] })] }, "tokens"),
+            ]
+            : []),
+        ...(showThinking && thinkingText
+            ? [
+                thinkingStatus === 'thinking' && !reducedMotion ? (_jsx(Text, { color: thinkingShimmerColor, children: thinkingOnly ? `(${thinkingText})` : thinkingText }, "thinking")) : (_jsx(Text, { dimColor: true, children: thinkingText }, "thinking")),
+            ]
+            : []),
+    ];
+    const status = parts.length > 0 ? (thinkingOnly ? (_jsx(Byline, { children: parts })) : (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "(" }), _jsx(Byline, { children: parts }), _jsx(Text, { dimColor: true, children: ")" })] }))) : null;
+    return (_jsxs(Box, { ref: viewportRef, flexDirection: "row", flexWrap: "wrap", marginTop: 1, width: "100%", children: [_jsx(SpinnerGlyph, { frame: frame, messageColor: messageColor, stalledIntensity: stalledIntensity, reducedMotion: reducedMotion, time: time }), _jsx(GlimmerMessage, { message: message, mode: mode, messageColor: messageColor, glimmerIndex: glimmerIndex, flashOpacity: flashOpacity, shimmerColor: shimmerColor, stalledIntensity: stalledIntensity }), status] }));
+}
+function SpinnerModeGlyph({ mode }) {
+    switch (mode) {
+        case 'tool-input':
+        case 'tool-use':
+        case 'responding':
+        case 'thinking':
+            return (_jsx(Box, { width: 2, children: _jsx(Text, { dimColor: true, children: figures.arrowDown }) }));
+        case 'requesting':
+            return (_jsx(Box, { width: 2, children: _jsx(Text, { dimColor: true, children: figures.arrowUp }) }));
+    }
+}

package/lib/types/components/Spinner/SpinnerGlyph.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type Theme } from '../../theme.js';
+type Props = {
+    frame: number;
+    messageColor: keyof Theme;
+    stalledIntensity?: number;
+    reducedMotion?: boolean;
+    time?: number;
+};
+/**
+ * The animated spinner glyph (·✢*✶✻✽ cycle), ported from the leak's
+ * `Spinner/SpinnerGlyph.tsx`. Interpolates toward red when stalled.
+ */
+export declare function SpinnerGlyph({ frame, messageColor, stalledIntensity, reducedMotion, time, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=SpinnerGlyph.d.ts.map

package/lib/types/components/Spinner/SpinnerGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerGlyph.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/SpinnerGlyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAUrD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,YAAY,EACZ,gBAAoB,EACpB,aAAqB,EACrB,IAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA2CzB"}

package/lib/types/components/Spinner/SpinnerGlyph.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '../../ink/components/Box.js';
+import Text from '../../ink/components/Text.js';
+import { getTheme } from '../../theme.js';
+import { useTheme } from '../design-system/ThemeProvider.js';
+import { getDefaultCharacters, interpolateColor, parseRGB, toRGBColor } from './spinnerUtils.js';
+const DEFAULT_CHARACTERS = getDefaultCharacters();
+const SPINNER_FRAMES = [...DEFAULT_CHARACTERS, ...[...DEFAULT_CHARACTERS].reverse()];
+const REDUCED_MOTION_DOT = '●';
+const REDUCED_MOTION_CYCLE_MS = 2000; // 2-second cycle: 1s visible, 1s dim
+const ERROR_RED = { r: 171, g: 43, b: 63 };
+/**
+ * The animated spinner glyph (·✢*✶✻✽ cycle), ported from the leak's
+ * `Spinner/SpinnerGlyph.tsx`. Interpolates toward red when stalled.
+ */
+export function SpinnerGlyph({ frame, messageColor, stalledIntensity = 0, reducedMotion = false, time = 0, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    if (reducedMotion) {
+        const isDim = Math.floor(time / (REDUCED_MOTION_CYCLE_MS / 2)) % 2 === 1;
+        return (_jsx(Box, { flexWrap: "wrap", height: 1, width: 2, children: _jsx(Text, { color: messageColor, dimColor: isDim, children: REDUCED_MOTION_DOT }) }));
+    }
+    const spinnerChar = SPINNER_FRAMES[frame % SPINNER_FRAMES.length];
+    if (stalledIntensity > 0) {
+        const baseColorStr = theme[messageColor];
+        const baseRGB = baseColorStr ? parseRGB(baseColorStr) : null;
+        if (baseRGB) {
+            const interpolated = interpolateColor(baseRGB, ERROR_RED, stalledIntensity);
+            return (_jsx(Box, { flexWrap: "wrap", height: 1, width: 2, children: _jsx(Text, { color: toRGBColor(interpolated), children: spinnerChar }) }));
+        }
+        // Fallback for ANSI themes: use messageColor until fully stalled, then error
+        const color = stalledIntensity > 0.5 ? 'error' : messageColor;
+        return (_jsx(Box, { flexWrap: "wrap", height: 1, width: 2, children: _jsx(Text, { color: color, children: spinnerChar }) }));
+    }
+    return (_jsx(Box, { flexWrap: "wrap", height: 1, width: 2, children: _jsx(Text, { color: messageColor, children: spinnerChar }) }));
+}

package/lib/types/components/Spinner/spinnerMode.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Spinner presentation phase: the stage of the current turn the spinner
+ * should convey.
+ */
+export type SpinnerMode = 'requesting' | 'thinking' | 'responding' | 'tool-use' | 'tool-input';
+//# sourceMappingURL=spinnerMode.d.ts.map

package/lib/types/components/Spinner/spinnerMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinnerMode.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/spinnerMode.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GACnB,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,UAAU,GACV,YAAY,CAAA"}

package/lib/types/components/Spinner/spinnerMode.js

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Spinner/spinnerUtils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Spinner animation utilities, ported from the leaked Claude Code source
+ * (`src/components/Spinner/utils.ts`).
+ */
+export type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * The platform-appropriate default spinner character set.
+ * @returns The spinner frame characters for the current terminal/platform.
+ */
+export declare function getDefaultCharacters(): string[];
+/**
+ * Interpolate between two RGB colors.
+ * @param color1 - Start color.
+ * @param color2 - End color.
+ * @param t - Interpolation factor, 0 to 1.
+ * @returns The interpolated color, components rounded to integers.
+ */
+export declare function interpolateColor(color1: RGBColor, color2: RGBColor, t: number): RGBColor;
+/**
+ * Convert an RGB object to an `rgb()` color string for the Text component.
+ * @param color - The RGB color to format.
+ * @returns The `rgb(r,g,b)` string.
+ */
+export declare function toRGBColor(color: RGBColor): string;
+/**
+ * Convert an HSL hue to RGB, using voice-mode waveform parameters (s=0.7, l=0.6).
+ * @param hue - Hue in degrees (0–360; wrapped into range).
+ * @returns The RGB color for the hue.
+ */
+export declare function hueToRgb(hue: number): RGBColor;
+/**
+ * Parse an `rgb(r,g,b)` color string, memoized per input.
+ * @param colorStr - The color string to parse.
+ * @returns The parsed RGB color, or null when the string is not `rgb(r,g,b)`.
+ */
+export declare function parseRGB(colorStr: string): RGBColor | null;
+//# sourceMappingURL=spinnerUtils.d.ts.map

package/lib/types/components/Spinner/spinnerUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinnerUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/spinnerUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,QAAQ,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1D;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAO/C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,QAAQ,EAChB,MAAM,EAAE,QAAQ,EAChB,CAAC,EAAE,MAAM,GACR,QAAQ,CAMV;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAElD;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAkC9C;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAc1D"}