@askdkc/dsh-cli 0.11.3

package/lib/types/components/Select.js

@@ -0,0 +1,21 @@
+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 with the standard dsh-TUI visual treatment:
+ * 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, onPick, }) {
+    // Window around the focus row, with scroll hints at the edges.
+    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, onClick: onPick
+                    ? (event) => onPick(absoluteIndex, option.value, event)
+                    : undefined, children: option.label }, option.value));
+        }) }));
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { SkillInfo } from '../dsh-adapter/channel.js';
+/**
+ * `/skills` picker (issue #204) in the ModelPicker style: a
+ * permission-colored Pane listing the live agent's skill catalog —
+ * user-invocable skills lead with `/name`（它们在 / 菜单里也是这个形态），
+ * 描述行是「来源 · 简述」。Enter 由 Chat 填回 `/name `，Esc 关闭。
+ *
+ * 长列表按焦点窗口化（ModelPicker 同款）：picker 经 OverlayAbove 浮层挂载后
+ * 有 maxHeight 裁剪，全量渲染会让焦点行被裁掉（看不到焦点按 Enter）。
+ */
+export declare function SkillsPicker({ skills, focusIndex, onPick, }: {
+    skills: readonly SkillInfo[];
+    focusIndex: number;
+    /** Mouse pick (fullscreen): clicked row's absolute index (Chat applies
+     *  the same code path as the keyboard Enter). */
+    onPick?: (index: number) => void;
+}): React.ReactNode;
+/** `/skills` while the registry snapshot is still in flight (ModelPickerLoading 同款). */
+export declare function SkillsPickerLoading(): React.ReactNode;
+//# sourceMappingURL=SkillsPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsPicker.d.ts","sourceRoot":"","sources":["../../../src/components/SkillsPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA4B1D;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE;IACD,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB;qDACiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CA2ClB;AAED,wFAAwF;AACxF,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,SAAS,CAerD"}

package/lib/types/components/SkillsPicker.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+import { LoadingState } from './design-system/LoadingState.js';
+import { listWindow } from './listWindow.js';
+import { useOverlayListRows } from './OverlayAbove.js';
+/** 来源桶 → 本地化标签（未知桶原样显示，SkillSource 对自定义桶开放）。 */
+function sourceLabel(source) {
+    switch (source) {
+        case 'bundled':
+            return t('skills-source-bundled');
+        case 'user-dsh':
+        case 'user-agents':
+            return t('skills-source-user');
+        case 'project-dsh':
+        case 'project-agents':
+            return t('skills-source-project');
+        case 'runtime':
+            return t('skills-source-runtime');
+        case 'custom':
+            return t('skills-source-custom');
+        default:
+            return source;
+    }
+}
+/**
+ * `/skills` picker (issue #204) in the ModelPicker style: a
+ * permission-colored Pane listing the live agent's skill catalog —
+ * user-invocable skills lead with `/name`（它们在 / 菜单里也是这个形态），
+ * 描述行是「来源 · 简述」。Enter 由 Chat 填回 `/name `，Esc 关闭。
+ *
+ * 长列表按焦点窗口化（ModelPicker 同款）：picker 经 OverlayAbove 浮层挂载后
+ * 有 maxHeight 裁剪，全量渲染会让焦点行被裁掉（看不到焦点按 Enter）。
+ */
+export function SkillsPicker({ skills, focusIndex, onPick, }) {
+    // 每项恒占 2 行（正文 + 来源/简述描述行，均 truncate 成单行）。
+    // 预算来自最近一层 OverlayAbove 的有效高度（ModelPicker 同款），减去框架行：
+    // Pane 2 + 标题 2 + 页脚 1 + 挂载包裹 marginTop 1 = 6。
+    const listRows = useOverlayListRows(6);
+    const { start, end } = listWindow(skills.map(() => 2), focusIndex, listRows);
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('picker-title-skills') }) }), skills.length === 0 ? (_jsx(Text, { dimColor: true, children: t('skills-empty') })) : (skills.slice(start, end).map((skill, index) => {
+                        const absoluteIndex = start + index;
+                        return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, description: `${sourceLabel(skill.source)}${skill.description === '' ? '' : ` · ${skill.description}`}`, showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < skills.length, onClick: onPick ? () => onPick(absoluteIndex) : undefined, children: skill.userInvocable ? `/${skill.name}` : skill.name }, skill.name));
+                    }))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-fill-exit') }) })] }));
+}
+/** `/skills` while the registry snapshot is still in flight (ModelPickerLoading 同款). */
+export function SkillsPickerLoading() {
+    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, color: "permission", children: t('picker-title-skills') }), _jsx(LoadingState, { message: t('skills-loading'), bold: true, subtitle: t('skills-loading-subtitle') })] }) }));
+}

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

@@ -0,0 +1,16 @@
+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 status message with a grapheme-safe, theme-aware moving highlight. */
+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;AAQD,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAoB,GACrB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAyEzB"}

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Text from '../design-system/ThemedText.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 STALL_COLOR = { r: 198, g: 84, b: 101 };
+function clamp(value, min = 0, max = 1) {
+    return Math.min(max, Math.max(min, value));
+}
+/** The status message with a grapheme-safe, theme-aware moving highlight. */
+export function GlimmerMessage({ message, mode, messageColor, glimmerIndex, flashOpacity, shimmerColor, stalledIntensity = 0, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    const segments = React.useMemo(() => {
+        let start = 0;
+        const measured = [];
+        for (const { segment } of getGraphemeSegmenter().segment(message)) {
+            const width = stringWidth(segment);
+            measured.push({ segment, width, start });
+            start += width;
+        }
+        return measured;
+    }, [message]);
+    if (!message)
+        return null;
+    const baseRGB = parseRGB(theme[messageColor]);
+    const shimmerRGB = parseRGB(theme[shimmerColor]);
+    const intensity = clamp(stalledIntensity);
+    if (intensity > 0) {
+        const color = baseRGB
+            ? toRGBColor(interpolateColor(baseRGB, STALL_COLOR, intensity))
+            : intensity > 0.5
+                ? 'error'
+                : messageColor;
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: message }), _jsx(Text, { color: color, children: " " })] }));
+    }
+    if (!baseRGB || !shimmerRGB) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: messageColor, children: message }), _jsx(Text, { color: messageColor, children: " " })] }));
+    }
+    // Tool feedback uses one gentle pulse. Other phases use a four-cell
+    // triangular highlight centered on glimmerIndex, so wide graphemes receive
+    // one color instead of being split in the middle of a display cell.
+    if (mode === 'tool-use') {
+        const color = toRGBColor(interpolateColor(baseRGB, shimmerRGB, clamp(flashOpacity)));
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: message }), _jsx(Text, { color: color, children: " " })] }));
+    }
+    return (_jsxs(_Fragment, { children: [segments.map(({ segment, width, start }) => {
+                const center = start + width / 2;
+                const distance = Math.abs(center - (glimmerIndex + 2));
+                const highlight = clamp(1 - distance / 4);
+                const color = toRGBColor(interpolateColor(baseRGB, shimmerRGB, highlight * 0.85));
+                return (_jsx(Text, { color: color, children: segment }, `${start}:${segment}`));
+            }), _jsx(Text, { color: messageColor, children: " " })] }));
+}

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

@@ -0,0 +1,33 @@
+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>;
+    /** Most recent request's real upload tokens (input + cache read/write);
+     *  0 until the first usage event lands. */
+    uploadTokensRef: 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. It 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, uploadTokensRef, 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,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAIrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAwBnD,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;+CAC2C;IAC3C,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,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;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,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,CAuM5C"}

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

@@ -0,0 +1,168 @@
+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 '../design-system/ThemedText.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { formatDuration, formatNumber } from '../../terminal-utils/format.js';
+import { getTheme } from '../../theme.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, parseRGB, toRGBColor } from './spinnerUtils.js';
+import { useTheme } from '../design-system/ThemeProvider.js';
+const SEP_WIDTH = stringWidth(' · ');
+const THINKING_BARE_WIDTH = stringWidth('thinking');
+const SHOW_TOKENS_AFTER_MS = 30_000;
+const THINKING_DELAY_MS = 2800;
+const THINKING_PULSE_MS = 1800;
+const TOKEN_RESPONSE_MS = 220;
+function trianglePulse(time, period) {
+    if (period <= 0)
+        return 0;
+    const phase = ((time % period) + period) % period / period;
+    return phase < 0.5 ? phase * 2 : 2 - phase * 2;
+}
+function easeToward(current, target, elapsedMs, responseMs) {
+    if (elapsedMs <= 0)
+        return current;
+    const amount = 1 - Math.exp(-elapsedMs / responseMs);
+    return current + (target - current) * amount;
+}
+/**
+ * The 50ms-animated portion of the working spinner. It 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, uploadTokensRef, 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 [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    const frame = reducedMotion ? 0 : Math.floor(time / 140);
+    const glimmerPeriod = mode === 'requesting' ? 1600 : 2200;
+    const glimmerMessageWidth = useMemo(() => stringWidth(message), [message]);
+    const glimmerTravel = glimmerMessageWidth + 8;
+    const glimmerProgress = trianglePulse(time, glimmerPeriod);
+    const leftToRight = mode === 'requesting';
+    const glimmerIndex = reducedMotion
+        ? -100
+        : isStalled
+            ? -100
+            : leftToRight
+                ? glimmerProgress * glimmerTravel - 4
+                : (1 - glimmerProgress) * glimmerTravel - 4;
+    const flashOpacity = reducedMotion
+        ? 0
+        : mode === 'tool-use'
+            ? trianglePulse(time, 720)
+            : 0;
+    // === Token counter animation (smooth increment, driven by 50ms clock) ===
+    const tokenCounterRef = useRef({ value: currentResponseLength, time });
+    const tokenElapsed = Math.max(0, time - tokenCounterRef.current.time);
+    tokenCounterRef.current.time = time;
+    tokenCounterRef.current.value = reducedMotion
+        ? currentResponseLength
+        : easeToward(tokenCounterRef.current.value, currentResponseLength, tokenElapsed, TOKEN_RESPONSE_MS);
+    const displayedResponseLength = Math.round(tokenCounterRef.current.value);
+    const leaderTokens = Math.round(displayedResponseLength / 4);
+    const timerText = formatDuration(elapsedTimeMs);
+    const timerWidth = stringWidth(timerText);
+    const tokenCount = formatNumber(leaderTokens);
+    const uploadTokens = uploadTokensRef.current;
+    // Real upload tokens (last request's input + cache) ride beside the
+    // animated download estimate; both labeled once to keep the row short.
+    const tokensLabel = uploadTokens > 0
+        ? `↑ ${formatNumber(uploadTokens)} · ↓ ${tokenCount} tokens`
+        : `↓ ${tokenCount} tokens`;
+    const tokensWidth = stringWidth(tokensLabel);
+    // === 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 || uploadTokens > 0) &&
+        availableSpace > usedAfterTimer + tokensWidth;
+    const thinkingOnly = showThinking &&
+        thinkingStatus === 'thinking' &&
+        !spinnerSuffix &&
+        !showTimer &&
+        !showTokens;
+    // === Thinking shimmer color ===
+    const thinkingOpacity = time < THINKING_DELAY_MS
+        ? 0
+        : trianglePulse(time - THINKING_DELAY_MS, THINKING_PULSE_MS);
+    const thinkingBase = parseRGB(theme[messageColor]);
+    const thinkingHighlight = parseRGB(theme[shimmerColor]);
+    const thinkingShimmerColor = thinkingBase && thinkingHighlight
+        ? toRGBColor(interpolateColor(thinkingBase, thinkingHighlight, thinkingOpacity))
+        : shimmerColor;
+    // === 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 }), _jsx(Text, { dimColor: true, children: tokensLabel })] }, "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 breathing glyph. Its fixed two-column slot keeps the message
+ * aligned while it pulses and while reduced-motion mode is active.
+ */
+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 '../design-system/ThemedText.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 breathing glyph. Its fixed two-column slot keeps the message
+ * aligned while it pulses and while reduced-motion mode is active.
+ */
+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,2 @@
+export type { SpinnerMode } from '../../adapter/ports/channel-display.js';
+//# 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":"AACA,YAAY,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA"}

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

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

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

@@ -0,0 +1,36 @@
+/**
+ * Spinner 动画的通用工具集：固定单列宽的帧字符选择、RGB 颜色插值、
+ * HSL 色相转 RGB，以及 `rgb(...)` 颜色字符串的解析与记忆化。
+ * 这些纯函数被 Spinner 组件及若干加载/装饰元素复用。
+ */
+export type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * 返回 spinner 帧字符序列。
+ * 每次调用都返回独立数组，调用方可以安全持有或改动，互不影响。
+ */
+export declare function getDefaultCharacters(): string[];
+/**
+ * 在两种颜色之间按系数 t 线性插值（t ∈ [0, 1]），
+ * 各分量四舍五入到整数后返回。
+ */
+export declare function interpolateColor(color1: RGBColor, color2: RGBColor, t: number): RGBColor;
+/**
+ * 把 RGB 对象格式化为 `rgb(r,g,b)` 字符串，供 Ink 的 Text 组件使用。
+ */
+export declare function toRGBColor(color: RGBColor): `rgb(${number},${number},${number})`;
+/**
+ * 把色相角（单位：度）转换为 RGB 颜色。
+ * 采用固定饱和度 0.7、亮度 0.6 的 HSL 参数（波形动画的配色基准）；
+ * 色相先归一化到 [0, 360)，任意角度（含负数、超一圈）都能安全转换。
+ */
+export declare function hueToRgb(hue: number): RGBColor;
+/**
+ * 解析 `rgb(r,g,b)` 颜色字符串；格式不合法时返回 null。
+ * 同一输入的解析结果会被缓存（含 null），之后取用零成本。
+ */
+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;;;;GAIG;AAEH,MAAM,MAAM,QAAQ,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAQ1D;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAE/C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,QAAQ,EAChB,MAAM,EAAE,QAAQ,EAChB,CAAC,EAAE,MAAM,GACR,QAAQ,CAQV;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,QAAQ,GACd,OAAO,MAAM,IAAI,MAAM,IAAI,MAAM,GAAG,CAEtC;AAmBD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAa9C;AAQD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAc1D"}

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

@@ -0,0 +1,94 @@
+/**
+ * Spinner 动画的通用工具集：固定单列宽的帧字符选择、RGB 颜色插值、
+ * HSL 色相转 RGB，以及 `rgb(...)` 颜色字符串的解析与记忆化。
+ * 这些纯函数被 Spinner 组件及若干加载/装饰元素复用。
+ */
+/**
+ * A calm breathing dot: every frame is one display cell, including in
+ * narrow CJK terminals, and no platform-specific glyph set is needed.
+ */
+const DEFAULT_FRAME_SET = ['·', '•', '●', '•'];
+/**
+ * 返回 spinner 帧字符序列。
+ * 每次调用都返回独立数组，调用方可以安全持有或改动，互不影响。
+ */
+export function getDefaultCharacters() {
+    return [...DEFAULT_FRAME_SET];
+}
+/**
+ * 在两种颜色之间按系数 t 线性插值（t ∈ [0, 1]），
+ * 各分量四舍五入到整数后返回。
+ */
+export function interpolateColor(color1, color2, t) {
+    const blend = (from, to) => Math.round(from + (to - from) * t);
+    return {
+        r: blend(color1.r, color2.r),
+        g: blend(color1.g, color2.g),
+        b: blend(color1.b, color2.b),
+    };
+}
+/**
+ * 把 RGB 对象格式化为 `rgb(r,g,b)` 字符串，供 Ink 的 Text 组件使用。
+ */
+export function toRGBColor(color) {
+    return `rgb(${color.r},${color.g},${color.b})`;
+}
+/**
+ * 计算色相在六个扇区中的基准 RGB 分量（未加亮度偏移）。
+ * 扇区按 60° 划分：红→黄→绿→青→蓝→品红→红。
+ */
+function hueSector(hue, chroma, secondary) {
+    if (hue < 60)
+        return [chroma, secondary, 0];
+    if (hue < 120)
+        return [secondary, chroma, 0];
+    if (hue < 180)
+        return [0, chroma, secondary];
+    if (hue < 240)
+        return [0, secondary, chroma];
+    if (hue < 300)
+        return [secondary, 0, chroma];
+    return [chroma, 0, secondary];
+}
+/**
+ * 把色相角（单位：度）转换为 RGB 颜色。
+ * 采用固定饱和度 0.7、亮度 0.6 的 HSL 参数（波形动画的配色基准）；
+ * 色相先归一化到 [0, 360)，任意角度（含负数、超一圈）都能安全转换。
+ */
+export function hueToRgb(hue) {
+    const wrapped = ((hue % 360) + 360) % 360;
+    const saturation = 0.7;
+    const lightness = 0.6;
+    const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+    const secondary = chroma * (1 - Math.abs(((wrapped / 60) % 2) - 1));
+    const luminanceOffset = lightness - chroma / 2;
+    const [r, g, b] = hueSector(wrapped, chroma, secondary);
+    return {
+        r: Math.round((r + luminanceOffset) * 255),
+        g: Math.round((g + luminanceOffset) * 255),
+        b: Math.round((b + luminanceOffset) * 255),
+    };
+}
+/** 匹配 `rgb(r,g,b)` 文本，分量允许任意空格。 */
+const RGB_STRING_PATTERN = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/;
+/** 按输入字符串记忆化解析结果，重复调用不再做正则匹配。 */
+const rgbParseCache = new Map();
+/**
+ * 解析 `rgb(r,g,b)` 颜色字符串；格式不合法时返回 null。
+ * 同一输入的解析结果会被缓存（含 null），之后取用零成本。
+ */
+export function parseRGB(colorStr) {
+    const remembered = rgbParseCache.get(colorStr);
+    if (remembered !== undefined)
+        return remembered;
+    const parts = colorStr.match(RGB_STRING_PATTERN);
+    const parsed = parts
+        ? {
+            r: parseInt(parts[1], 10),
+            g: parseInt(parts[2], 10),
+            b: parseInt(parts[3], 10),
+        }
+        : null;
+    rgbParseCache.set(colorStr, parsed);
+    return parsed;
+}

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

@@ -0,0 +1,16 @@
+export type StallState = {
+    isStalled: boolean;
+    intensity: number;
+};
+/** Derive the target stall state from elapsed output time and tool activity. */
+export declare function getStallState(timeSinceOutput: number, hasActiveTools?: boolean): StallState;
+/**
+ * Track output silence from the parent's animation clock. The target color
+ * changes linearly over the ramp, while the displayed value eases toward it
+ * with a time-based response that remains stable if a frame is delayed.
+ */
+export declare function useStalledAnimation(time: number, currentResponseLength: number, hasActiveTools?: boolean, reducedMotion?: boolean): {
+    isStalled: boolean;
+    stalledIntensity: number;
+};
+//# sourceMappingURL=useStalledAnimation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStalledAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/useStalledAnimation.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAMD,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,UAAQ,GAAG,UAAU,CAQzF;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,qBAAqB,EAAE,MAAM,EAC7B,cAAc,UAAQ,EACtB,aAAa,UAAQ,GACpB;IACD,SAAS,EAAE,OAAO,CAAA;IAClB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CA+BA"}