@deepseek-harness-tui/dsh-tui 0.11.1 → 0.11.2

package/lib/types/components/StarPrompt.js

@@ -0,0 +1,281 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput, useTerminalImages, useTerminalSize } from '../ui.js';
+import { getLang, subscribeLang, t } from '../i18n.js';
+import { Divider } from './design-system/Divider.js';
+import { HintLine } from './design-system/HintLine.js';
+import { ListItem } from './design-system/ListItem.js';
+import { MaidPortrait, useMaidPortraits } from './maidPortrait.js';
+import { useTerminalBackground } from './design-system/ThemeProvider.js';
+import { STANDARD_FRAME_INDEX, WhaleArt } from './Whale.js';
+import { OPENING_SEQUENCES, WHALE_FRAME_INDEX } from './whaleFrames.js';
+/** Art slot width — the pixel whale fallback is 40 columns wide, and the
+ * raster portrait fits inside the same slot so the card width never moves. */
+const ART_COLUMNS = 40;
+/** Art slot height: 18 rows (confetti 3 + whale 13 in the celebration), and
+ * the text column is pinned to the same height (see the column's comment). */
+const ART_ROWS = 18;
+/** Text column width: every copy line, button and hint stays on ONE row
+ * (the "排版不舒适" report: no stranded `⭐`, no mid-sentence breaks). */
+const TEXT_COLUMNS = 48;
+/** Portrait + text side by side need this many columns (art 40 + gap 2 +
+ * text 48 + card chrome 6); below that the card drops the art and stacks
+ * text at the narrower width. */
+const MIN_ART_COLUMNS = 98;
+/** Card height with the art (18 art rows + 2 border rows); terminals shorter
+ * than this + 2 margin rows get the text-only card. */
+const MIN_ART_ROWS = 23;
+/** Dwell on the standard pose before the fallback whale's intro loops. */
+const WHALE_REST_MS = 3000;
+/** How long the celebration stays before the card closes itself. */
+const CELEBRATION_MS = 4200;
+/**
+ * The one-time "asks for a star" startup modal (usage milestones `99h` /
+ * `999 launches`, see `usageStats.ts`). Chat mounts it over a dimmed
+ * click-catcher on boot when `dueStarModal()` says the moment arrived —
+ * never mid-turn, at most one milestone per boot, `Esc`/click-outside
+ * closes, and unmounting hands the keyboard straight back (nothing is left
+ * registered, so it cannot steal keys after closing).
+ *
+ * Composition follows the house design system: the milestone title sits in
+ * the card's top border, the two actions are `ListItem` rows (pointer,
+ * focus colour, hover background — the same component every picker uses),
+ * a `Divider` separates the footer, and the hint line is a `HintLine` with
+ * its bold key. The art slot shows the raster maid first, the animated
+ * pixel whale otherwise.
+ *
+ * A successful star switches the card into a short CELEBRATION instead of
+ * closing silently: confetti falls over the whale, which spouts on a loop,
+ * with a thank-you line — then the card closes itself. A failed attempt
+ * keeps the card open with the reason and the browser escape hatch.
+ */
+export function StarPrompt({ milestone, actions, onClose, initialPhase = 'ask', }) {
+    React.useSyncExternalStore(subscribeLang, getLang);
+    const { columns, rows } = useTerminalSize();
+    const imagesAvailable = useTerminalImages();
+    const portraits = useMaidPortraits(imagesAvailable);
+    const maidSource = portraits?.normal;
+    // 卡片底色用**终端真底色**（OSC 11）而不是主题的卡片色：后者是一整块
+    // 与终端背景无关的实色板，压在带背景图的终端上很僵硬；用真底色时卡片
+    // 与终端同色、只靠边框和暗化的背景区分层次，同时它也是真图立绘的不透明
+    // 衬底（Sixel 没有 alpha，透明像素得合成到某个实色上）。
+    const terminalBackground = useTerminalBackground();
+    const withArt = columns >= MIN_ART_COLUMNS && rows >= MIN_ART_ROWS;
+    const [phase, setPhase] = React.useState(initialPhase);
+    const [failure, setFailure] = React.useState('');
+    const [selected, setSelected] = React.useState(0);
+    // Some terminals report one Enter twice (parsed Return then raw CR); the
+    // modal must not fire its action twice for one press.
+    const lastEnterRef = React.useRef(0);
+    const live = React.useRef(true);
+    React.useEffect(() => () => { live.current = false; }, []);
+    const runStar = () => {
+        if (phase === 'working' || phase === 'done')
+            return;
+        setPhase('working');
+        void Promise.resolve(actions.onStar()).then(attempt => {
+            if (!live.current)
+                return;
+            if (attempt.kind === 'starred') {
+                setPhase('done');
+                return;
+            }
+            setFailure(attempt.kind === 'failed'
+                ? t('star-failed', { detail: attempt.detail, url: attempt.url })
+                : t(attempt.kind === 'no-gh' ? 'star-no-gh' : 'star-not-authed', { url: attempt.url }));
+            // gh 缺失/未登录这类"本机没法一键"的结局：光标直接落到浏览器那一行，
+            // 用户按一下 Enter 就打开浏览器自己去点（不必先按 ↓）。
+            if (attempt.kind === 'no-gh' || attempt.kind === 'not-authed')
+                setSelected(1);
+            setPhase('failed');
+        }, (error) => {
+            if (!live.current)
+                return;
+            setFailure(t('star-failed', { detail: String(error), url: '' }));
+            setPhase('failed');
+        });
+    };
+    // The celebration bows out on its own; a key press closes it early.
+    React.useEffect(() => {
+        if (phase !== 'done')
+            return;
+        const timer = setTimeout(onClose, CELEBRATION_MS);
+        return () => { clearTimeout(timer); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- 只在进入庆祝时起表
+    }, [phase]);
+    useInput((input, key) => {
+        if (phase === 'done') {
+            onClose();
+            return;
+        }
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.upArrow || key.downArrow || key.tab) {
+            setSelected(previous => (previous + 1) % 2);
+            return;
+        }
+        if (key.return) {
+            const now = Date.now();
+            if (now - lastEnterRef.current < 50)
+                return;
+            lastEnterRef.current = now;
+            if (selected === 0)
+                runStar();
+            else
+                actions.onOpen();
+        }
+    });
+    const textColumns = withArt ? TEXT_COLUMNS : Math.max(24, Math.min(TEXT_COLUMNS, columns - 6));
+    const cardColumns = withArt ? 96 : Math.min(columns, textColumns + 6);
+    // 卡片 = 艺术槽 + 上下边框。absolute 卡片的高度上限由**根节点高度**决定：
+    // 根只有内容高（内联模式的夹具）时，卡片顶端会被裁掉——夹具因此把 Chat
+    // 包在视口大小的 Box 里（真机 alt-screen 的根就是整屏）。
+    const cardRows = withArt ? ART_ROWS + 2 : 18;
+    const left = Math.max(0, Math.floor((columns - cardColumns) / 2));
+    const bottom = Math.max(0, Math.min(Math.floor((rows - cardRows) / 2), rows - cardRows));
+    const celebrating = phase === 'done';
+    const title = celebrating
+        ? t('star-modal-thanks-title')
+        : milestone.hours !== undefined
+            ? t('star-modal-title-hours', { hours: milestone.hours })
+            : t('star-modal-title-launches', { launches: milestone.launches ?? 0 });
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", bottom: 0, left: 0, width: "100%", height: rows, flexShrink: 0, backdrop: "dim", onClick: onClose }), _jsx(Box, { position: "absolute", left: left, bottom: bottom, width: cardColumns, height: cardRows, flexDirection: "column", flexShrink: 0, overflow: "hidden", backgroundColor: terminalBackground, opaque: true, onClick: event => { event.stopImmediatePropagation(); }, children: _jsxs(Box, { flexDirection: "row", gap: 2, alignItems: "center", justifyContent: "center", borderStyle: "round", borderColor: "inactive", paddingX: 2, backgroundColor: terminalBackground, children: [withArt && (_jsx(ArtSlot, { celebrating: celebrating, phase: phase, imagesAvailable: imagesAvailable, maidSource: maidSource, maidHappy: portraits?.happy, background: terminalBackground })), _jsxs(Box, { flexDirection: "column", width: textColumns, ...(withArt ? { height: ART_ROWS } : {}), children: [_jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { color: "accent", bold: true, wrap: "truncate-end", children: title }) }), _jsx(Box, { height: 1 }), celebrating ? (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: t('star-modal-thanks-1') }), _jsx(Box, { height: 1 }), _jsx(Text, { wrap: "wrap", children: t('star-modal-thanks-2') }), _jsx(Text, { wrap: "wrap", children: t('star-modal-thanks-3') }), _jsx(Text, { wrap: "wrap", children: t('star-modal-thanks-4') }), _jsx(Box, { flexGrow: 1 }), _jsx(Divider, { width: textColumns }), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, wrap: "wrap", children: _jsx(HintLine, { text: t('star-modal-thanks-hint') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: t('star-modal-body-1') }), _jsx(Box, { height: 1 }), _jsx(Text, { wrap: "wrap", children: t('star-modal-body-2') }), _jsx(Text, { wrap: "wrap", children: t('star-modal-body-3') }), _jsx(Text, { wrap: "wrap", children: t('star-modal-body-4') }), _jsx(Text, { wrap: "wrap", children: t('star-modal-body-5') }), _jsx(Text, { wrap: "wrap", children: t('star-modal-body-6') }), _jsx(Box, { height: 1 }), _jsx(ListItem, { isFocused: selected === 0, disabled: phase === 'working', declareCursor: false, onClick: event => {
+                                                event.stopImmediatePropagation();
+                                                setSelected(0);
+                                                runStar();
+                                            }, children: phase === 'working' ? t('star-modal-working') : t('star-modal-star') }), _jsx(ListItem, { isFocused: selected === 1, declareCursor: false, onClick: event => {
+                                                event.stopImmediatePropagation();
+                                                setSelected(1);
+                                                actions.onOpen();
+                                            }, children: t('star-modal-open') }), phase === 'failed' && (_jsxs(_Fragment, { children: [_jsx(Box, { height: 1 }), _jsx(Text, { color: "error", wrap: "wrap", children: failure })] })), phase !== 'failed' && (_jsxs(_Fragment, { children: [_jsx(Box, { height: 1 }), _jsx(Divider, { width: textColumns })] })), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, wrap: "wrap", children: _jsx(HintLine, { text: t('star-modal-hint') }) })] }))] })] }) })] }));
+}
+/**
+ * The card's art column: the raster maid first, the animated pixel whale
+ * otherwise. While celebrating it shows the **happy maid** (raster→raster in
+ * the same pixel canvas, so the swap is a clean erase+draw) under the star
+ * field; without image protocols the whale spouts instead — character
+ * blocks never take this slot.
+ */
+function ArtSlot({ celebrating, phase, imagesAvailable, maidSource, maidHappy, background, }) {
+    const raster = imagesAvailable && maidSource !== undefined;
+    const frame = useWhaleFrames(celebrating && !raster ? 'celebrate' : raster || phase === 'working' ? 'none' : 'intro');
+    if (celebrating && raster) {
+        return (_jsxs(Box, { width: ART_COLUMNS, height: ART_ROWS, flexShrink: 0, flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: background, children: [_jsx(Confetti, { width: ART_COLUMNS }), _jsx(MaidPortrait, { source: maidHappy ?? maidSource, maxColumns: ART_COLUMNS, maxRows: ART_ROWS - CONFETTI_ROWS, presentation: "preview" })] }));
+    }
+    if (celebrating) {
+        return (_jsxs(Box, { width: ART_COLUMNS, height: ART_ROWS, flexShrink: 0, flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: background, opaque: true, children: [_jsx(Confetti, { width: ART_COLUMNS }), _jsx(WhaleArt, { frameIndex: frame, width: ART_COLUMNS })] }));
+    }
+    if (raster) {
+        return (_jsx(Box, { width: ART_COLUMNS, height: ART_ROWS, flexShrink: 0, flexDirection: "row", justifyContent: "center", alignItems: "center", children: _jsx(MaidPortrait, { source: maidSource, maxColumns: ART_COLUMNS, maxRows: ART_ROWS, presentation: "preview" }) }));
+    }
+    return (_jsx(Box, { width: ART_COLUMNS, height: ART_ROWS, flexShrink: 0, flexDirection: "row", justifyContent: "center", alignItems: "center", children: _jsx(WhaleArt, { frameIndex: frame, width: ART_COLUMNS }) }));
+}
+/**
+ * Drive the art slot's frame: `intro` loops the classic opener with a rest
+ * on the standard pose, `celebrate` loops the water spout (the thank-you
+ * animation), `none` parks on the standard pose with no timer at all.
+ */
+function useWhaleFrames(mode) {
+    const [frame, setFrame] = React.useState(STANDARD_FRAME_INDEX);
+    React.useEffect(() => {
+        if (mode === 'none') {
+            setFrame(STANDARD_FRAME_INDEX);
+            return;
+        }
+        const sequence = mode === 'celebrate' ? CELEBRATION_FRAMES : OPENING_SEQUENCES.classic;
+        let step = 0;
+        let timer;
+        const tick = () => {
+            const current = sequence[step] ?? sequence[0];
+            setFrame(current.frame);
+            const last = step === sequence.length - 1;
+            step = (step + 1) % sequence.length;
+            const rest = mode === 'celebrate' ? 0 : WHALE_REST_MS;
+            timer = setTimeout(tick, last ? (rest || current.ms) : current.ms);
+            timer.unref?.();
+        };
+        tick();
+        return () => { if (timer !== undefined)
+            clearTimeout(timer); };
+    }, [mode]);
+    return frame;
+}
+/**
+ * The celebration loop, paced instead of frantic: the spout blooms up with
+ * easing (130→100ms), falls back slower (110→180ms), rests, then ONE gentle
+ * tail wag, then rests again——约 3.2s 一轮，与卡片的关闭时间同量级。
+ */
+const CELEBRATION_FRAMES = [
+    { frame: WHALE_FRAME_INDEX.spout1, ms: 130 },
+    { frame: WHALE_FRAME_INDEX.spout2, ms: 120 },
+    { frame: WHALE_FRAME_INDEX.spout3, ms: 110 },
+    { frame: WHALE_FRAME_INDEX.spout4, ms: 100 },
+    { frame: WHALE_FRAME_INDEX.spout5, ms: 100 },
+    { frame: WHALE_FRAME_INDEX.spout6, ms: 110 },
+    { frame: WHALE_FRAME_INDEX.spout5, ms: 120 },
+    { frame: WHALE_FRAME_INDEX.spout4, ms: 130 },
+    { frame: WHALE_FRAME_INDEX.spout3, ms: 150 },
+    { frame: WHALE_FRAME_INDEX.spout2, ms: 170 },
+    { frame: WHALE_FRAME_INDEX.spout1, ms: 190 },
+    { frame: STANDARD_FRAME_INDEX, ms: 620 },
+    { frame: WHALE_FRAME_INDEX.tail1, ms: 180 },
+    { frame: WHALE_FRAME_INDEX.tail2, ms: 200 },
+    { frame: WHALE_FRAME_INDEX.tail3, ms: 200 },
+    { frame: WHALE_FRAME_INDEX.tail4, ms: 180 },
+    { frame: STANDARD_FRAME_INDEX, ms: 520 },
+];
+/** 星光两行、稀疏：主星（常亮，金色）+ 闪烁星（各列相位不同，同一帧只有
+ *  三分之一亮着）——比随机撒点安静，也比满屏星星精致。 */
+const CONFETTI_GLYPHS = ['✦', '✧'];
+const CONFETTI_COLORS = ['warning', 'accent', 'activity'];
+const CONFETTI_FRAMES = 3;
+const CONFETTI_ROWS = 2;
+/** 每几列一颗主星（常亮）。 */
+const CONFETTI_ANCHOR_STRIDE = 7;
+const CONFETTI = Array.from({ length: CONFETTI_FRAMES }, (_, frameIndex) => Array.from({ length: CONFETTI_ROWS }, (_, row) => {
+    const runs = [];
+    let current = undefined;
+    let buffer = '';
+    for (let column = 0; column < ART_COLUMNS; column++) {
+        const anchor = column % CONFETTI_ANCHOR_STRIDE === 0;
+        // 闪烁星：每列一个固定相位，逐帧轮到自己亮一次（在 3 帧里亮 1 帧）。
+        const twinkle = !anchor
+            && column % 2 === 0
+            && (column / 2 + row) % CONFETTI_FRAMES === frameIndex;
+        const glyph = anchor ? CONFETTI_GLYPHS[0] : twinkle ? CONFETTI_GLYPHS[1] : ' ';
+        const color = anchor
+            ? CONFETTI_COLORS[0]
+            : twinkle
+                ? (column / 2) % 2 === 0 ? CONFETTI_COLORS[1] : CONFETTI_COLORS[2]
+                : undefined;
+        if (color !== current) {
+            if (buffer !== '')
+                runs.push({ text: buffer, color: current });
+            buffer = '';
+            current = color;
+        }
+        buffer += glyph;
+    }
+    if (buffer !== '')
+        runs.push({ text: buffer, color: current });
+    return runs;
+}));
+/** One confetti band, advancing a frame every 160ms while it is mounted. */
+function Confetti({ width }) {
+    const frame = useConfettiFrame();
+    const rows = CONFETTI[frame] ?? CONFETTI[0];
+    return (_jsx(Box, { flexDirection: "column", flexShrink: 0, width: width, children: rows.map((runs, index) => (_jsx(Text, { wrap: "truncate-end", children: runs.map((run, runIndex) => (_jsx(Text, { color: run.color, children: run.text }, runIndex))) }, index))) }));
+}
+function useConfettiFrame() {
+    const [frame, setFrame] = React.useState(0);
+    React.useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(previous => (previous + 1) % CONFETTI_FRAMES);
+        }, 220);
+        timer.unref?.();
+        return () => { clearInterval(timer); };
+    }, []);
+    return frame;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"StreamingMarkdown.d.ts","sourceRoot":"","sources":["../../../src/components/StreamingMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAuMzB,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,QAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CAyIlB"}
+{"version":3,"file":"StreamingMarkdown.d.ts","sourceRoot":"","sources":["../../../src/components/StreamingMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAwMzB,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,QAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CA2JlB"}

package/lib/types/components/StreamingMarkdown.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { marked } from 'marked';
 import Box from '../ink/components/Box.js';
-import { formatToken, stripPromptXMLTags } from '../terminal-utils/markdown.js';
+import { configureMarked, formatToken, stripPromptXMLTags } from '../terminal-utils/markdown.js';
 import { t } from '../i18n.js';
+import { isMathBlockToken, mayBecomeCodeSpan } from '../terminal-utils/math.js';
 import { isStandaloneToken, Markdown } from './Markdown.js';
 /**
  * Renders streaming markdown in sealed groups of completed top-level blocks.
@@ -177,6 +178,9 @@ export function StreamingMarkdown({ children, dimColor = false, }) {
     const prefixVisibleRef = React.useRef(false);
     const prefixEndsWithNodeRef = React.useRef(false);
     const prefixTrailingEmptyTextRef = React.useRef(false);
+    // The boundary lex below must see the same tokenizer extensions (math
+    // blocks) as the Markdown children, or the two disagree on block edges.
+    configureMarked();
     const stripped = stripPromptXMLTags(children);
     // Reset if text was replaced (defensive; normally unmount handles this)
     if (!stripped.startsWith(prefixRef.current)) {
@@ -209,6 +213,19 @@ export function StreamingMarkdown({ children, dimColor = false, }) {
     while (lastContentIdx >= 0 && tokens[lastContentIdx].type === 'space') {
         lastContentIdx--;
     }
+    // A block formula after a paragraph with an open backtick run is
+    // provisional until a blank line: the run's closer may still arrive and
+    // turn both into one code span, so the paragraph stays unsealed.
+    let consumed = 0;
+    for (let i = 0; i < lastContentIdx; i++) {
+        const token = tokens[i];
+        if (token.type === 'paragraph' && isMathBlockToken(tokens[i + 1]) &&
+            mayBecomeCodeSpan(token.raw, stripped.substring(boundary + consumed + token.raw.length))) {
+            lastContentIdx = i;
+            break;
+        }
+        consumed += token.raw.length;
+    }
     let advance = 0;
     for (let i = 0; i < lastContentIdx; i++) {
         advance += tokens[i].raw.length;
@@ -249,7 +266,7 @@ export function StreamingMarkdown({ children, dimColor = false, }) {
         }
     }
     if (blocks.definitions) {
-        return _jsx(Markdown, { dimColor: dimColor, cacheTokens: false, children: stripped });
+        return _jsx(Markdown, { dimColor: dimColor, inlineMathImages: false, cacheTokens: false, children: stripped });
     }
     const stablePrefix = prefixRef.current;
     const prefixTail = blocks.tail;
@@ -275,5 +292,5 @@ export function StreamingMarkdown({ children, dimColor = false, }) {
     // an overlapping empty/duplicate boundary.
     const hasDistinctSuffix = unstableSuffix !== '' &&
         (stablePrefix === '' || !unstableSuffix.startsWith(stablePrefix));
-    return (_jsxs(Box, { flexDirection: "column", children: [blocks.blocks.map((block, index) => (_jsx(Box, { flexDirection: "column", marginTop: block.gap, children: _jsx(Markdown, { dimColor: dimColor, children: block.text }) }, index))), prefixTail && (_jsx(Box, { flexDirection: "column", marginTop: blocks.tailGap, children: _jsx(Markdown, { dimColor: dimColor, children: prefixTail }) }, "prefix")), hasDistinctSuffix && (_jsx(Box, { flexDirection: "column", marginTop: boundaryGap, children: _jsx(Markdown, { dimColor: dimColor, cacheTokens: false, children: unstableSuffix }) }, "suffix"))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [blocks.blocks.map((block, index) => (_jsx(Box, { flexDirection: "column", marginTop: block.gap, children: _jsx(Markdown, { dimColor: dimColor, inlineMathImages: false, children: block.text }) }, index))), prefixTail && (_jsx(Box, { flexDirection: "column", marginTop: blocks.tailGap, children: _jsx(Markdown, { dimColor: dimColor, inlineMathImages: false, children: prefixTail }) }, "prefix")), hasDistinctSuffix && (_jsx(Box, { flexDirection: "column", marginTop: boundaryGap, children: _jsx(Markdown, { dimColor: dimColor, inlineMathImages: false, cacheTokens: false, children: unstableSuffix }) }, "suffix"))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TimelineRail.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineRail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAA;AAEpE,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,yBAAyB,CAAA;AAwBhC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,eAAe,GAAG,IAAI,CAAA;IAC9B,qEAAqE;IACrE,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IAClC,gEAAgE;IAChE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB;sCACkC;IAClC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB;6DACyD;IACzD,YAAY,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,GAAG,KAAK,CAAC,SAAS,CAuNlB"}
+{"version":3,"file":"TimelineRail.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineRail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAA;AAEpE,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,yBAAyB,CAAA;AAwBhC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,eAAe,GAAG,IAAI,CAAA;IAC9B,qEAAqE;IACrE,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IAClC,gEAAgE;IAChE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB;sCACkC;IAClC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB;6DACyD;IACzD,YAAY,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,GAAG,KAAK,CAAC,SAAS,CA+NlB"}

package/lib/types/components/TimelineRail.js

@@ -177,7 +177,15 @@ export function TimelineRail({ handle, turns, activeId, upId, downId, terminalWi
                     const cardH = lines.length + 2;
                     if (cardH <= viewport) {
                         const top = Math.max(0, Math.min(tickRow - Math.floor(cardH / 2), viewport - cardH));
-                        card = (_jsx(Box, { position: "absolute", top: top, right: RAIL_WIDTH + 1, width: cardW, height: cardH, flexDirection: "column", flexShrink: 0, borderStyle: "round", borderColor: "inactive", paddingX: 1, 
+                        card = (_jsx(Box, { position: "absolute", top: top, right: RAIL_WIDTH + 1, width: cardW, height: cardH, flexDirection: "column", flexShrink: 0, borderStyle: "round", borderColor: "inactive", 
+                            // An opaque surface, like every other card floating over the
+                            // transcript (Tooltip's card uses the same token). Without it
+                            // the card is translucent: the rows underneath show through
+                            // the padding/border columns, so the transcript's own fills
+                            // leak out beside each preview line (reported from a real
+                            // session: one line leaked the message background, the next a
+                            // terminal-default gap).
+                            backgroundColor: "toolCardBackground", paddingX: 1, 
                             // The card floats LEFT of the rail over selectable
                             // transcript text; fence its own rect so a drag that
                             // happens under a dwell-popped preview never copies the

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

@@ -11,14 +11,23 @@ import { type WhaleLayerPose } from './whaleLayers.js';
  */
 type Rgb = readonly [number, number, number];
 /**
- * Render one frame to ANSI rows (one per sprite row pair) under its own
- * palette. Consecutive cells sharing one style are run-length encoded; every
- * row spans the full sprite width (transparent cells write plain spaces, so
- * the blank cells of a diff region are re-output and overwrite whatever the
- * previous frame painted there), and each row closes with an erase-to-EOL:
- * the text pipeline may trim trailing whitespace, and the erase guarantees
- * the terminal itself clears every cell past the row's last glyph — no
- * ghost pixels can survive a frame switch.
+ * Half-block row encoder for true-color letter-grid sprites (the pixel
+ * whale's frames): `pixel(x, y)` returns the color of sprite cell (x, y)
+ * or `undefined` for transparent.
+ *
+ * Render one sprite to ANSI rows (one per sprite row pair). Consecutive
+ * cells sharing one style are run-length encoded; every row spans the full
+ * sprite width (transparent cells write plain spaces, so the blank cells of
+ * a diff region are re-output and overwrite whatever the previous frame
+ * painted there), and each row closes with an erase-to-EOL: the text
+ * pipeline may trim trailing whitespace, and the erase guarantees the
+ * terminal itself clears every cell past the row's last glyph — no ghost
+ * pixels can survive a frame switch.
+ */
+export declare function renderCellRows(width: number, height: number, pixel: (x: number, y: number) => Rgb | undefined): string[];
+/**
+ * Render one letter-grid frame to ANSI rows under its own palette — the
+ * thin adapter over {@link renderCellRows} the whale frames use.
  */
 export declare function renderSpriteRows(sprite: readonly string[], palette: Record<string, Rgb | undefined>): string[];
 /** Render one composed pose (body + action layers) to ANSI rows, cached. */

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

@@ -1 +1 @@
-{"version":3,"file":"Whale.d.ts","sourceRoot":"","sources":["../../../src/components/Whale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjF;;;;;;;;GAQG;AAEH,KAAK,GAAG,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAoB5C;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,SAAS,CAAC,GAAG,MAAM,EAAE,CA2C9G;AAWD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,EAAE,CAO/D;AAGD,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,IAAI,CAAA;AAErC;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,UAAiC,EACjC,IAAI,EACJ,KAAK,GACN,EAAE;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CAWlB"}
+{"version":3,"file":"Whale.d.ts","sourceRoot":"","sources":["../../../src/components/Whale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjF;;;;;;;;GAQG;AAEH,KAAK,GAAG,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAoB5C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,GAAG,GAAG,SAAS,GAC/C,MAAM,EAAE,CAyCV;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,SAAS,CAAC,GAAG,MAAM,EAAE,CAG9G;AAWD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,EAAE,CAO/D;AAGD,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,IAAI,CAAA;AAErC;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,UAAiC,EACjC,IAAI,EACJ,KAAK,GACN,EAAE;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CAWlB"}

package/lib/types/components/Whale.js

@@ -19,25 +19,27 @@ const ERASE_TO_EOL = '\x1b[K';
 /** Reset the background plane to the terminal default (fg keeps its SGR). */
 const BG_DEFAULT = '\x1b[49m';
 /**
- * Render one frame to ANSI rows (one per sprite row pair) under its own
- * palette. Consecutive cells sharing one style are run-length encoded; every
- * row spans the full sprite width (transparent cells write plain spaces, so
- * the blank cells of a diff region are re-output and overwrite whatever the
- * previous frame painted there), and each row closes with an erase-to-EOL:
- * the text pipeline may trim trailing whitespace, and the erase guarantees
- * the terminal itself clears every cell past the row's last glyph — no
- * ghost pixels can survive a frame switch.
+ * Half-block row encoder for true-color letter-grid sprites (the pixel
+ * whale's frames): `pixel(x, y)` returns the color of sprite cell (x, y)
+ * or `undefined` for transparent.
+ *
+ * Render one sprite to ANSI rows (one per sprite row pair). Consecutive
+ * cells sharing one style are run-length encoded; every row spans the full
+ * sprite width (transparent cells write plain spaces, so the blank cells of
+ * a diff region are re-output and overwrite whatever the previous frame
+ * painted there), and each row closes with an erase-to-EOL: the text
+ * pipeline may trim trailing whitespace, and the erase guarantees the
+ * terminal itself clears every cell past the row's last glyph — no ghost
+ * pixels can survive a frame switch.
  */
-export function renderSpriteRows(sprite, palette) {
+export function renderCellRows(width, height, pixel) {
     const rows = [];
-    for (let r = 0; r < sprite.length; r += 2) {
-        const upper = sprite[r];
-        const lower = sprite[r + 1] ?? '';
+    for (let y = 0; y < height; y += 2) {
         let out = '';
         let current = '';
-        for (let x = 0; x < upper.length; x++) {
-            const up = palette[upper[x]];
-            const lo = palette[lower[x]];
+        for (let x = 0; x < width; x++) {
+            const up = pixel(x, y);
+            const lo = pixel(x, y + 1);
             let seq;
             let ch;
             if (up !== undefined && lo !== undefined) {
@@ -76,6 +78,14 @@ export function renderSpriteRows(sprite, palette) {
     }
     return rows;
 }
+/**
+ * Render one letter-grid frame to ANSI rows under its own palette — the
+ * thin adapter over {@link renderCellRows} the whale frames use.
+ */
+export function renderSpriteRows(sprite, palette) {
+    const width = sprite.reduce((max, row) => Math.max(max, row.length), 0);
+    return renderCellRows(width, sprite.length, (x, y) => palette[sprite[y]?.[x] ?? '']);
+}
 /** Pre-rendered ANSI rows for every whale frame, computed once at module load. */
 const RENDERED = WHALE_FRAMES.map(frame => renderSpriteRows(frame.rows, PALETTE));
 /**

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

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * The maid portrait (鲸鱼娘) that can stand in for the header's pixel whale
+ * (settings `dsh-tui.whaleGirl`): the author-designed 30×30 true-color
+ * sprite in `whaleGirlSprite.ts`, rendered with the same half-block
+ * technique as the whale — one `▀`/`▄` cell packs two sprite rows, so the
+ * portrait shows at 30 columns × 15 rows. A static portrait by design: the
+ * whale's idle planner and click-hearts stay whale-only, so `dsh-tui.whaleIdle`
+ * has nothing to animate here (documented with the setting).
+ */
+/** Pre-rendered ANSI rows, computed once at module load. */
+export declare const WHALE_GIRL_ROWS: readonly string[];
+/**
+ * The portrait's center column when it fills the whale's 40-column box
+ * (indented (40−30)/2 = 5, so the art spans columns 5..34 → center 19.5).
+ * The welcome tagline centers on this instead of `WHALE_CENTER` in maid
+ * mode, keeping the caption under the art it belongs to.
+ */
+export declare const WHALE_GIRL_CENTER = 19.5;
+/**
+ * The maid portrait as an Ink component: 15 rows × 30 columns. `width` pins
+ * the box (the header passes the whale's 40-column box so the neighbouring
+ * text column never shifts) and centers the portrait inside it; without it
+ * the component is exactly the portrait's own 30 columns (the star modal).
+ */
+export declare function WhaleGirlArt({ width }: {
+    width?: number;
+}): React.ReactNode;
+//# sourceMappingURL=WhaleGirl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WhaleGirl.d.ts","sourceRoot":"","sources":["../../../src/components/WhaleGirl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;;;;;;;GAQG;AAEH,4DAA4D;AAC5D,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAI5C,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAErC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAW3E"}

package/lib/types/components/WhaleGirl.js

@@ -0,0 +1,32 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { renderCellRows } from './Whale.js';
+import { WHALE_GIRL_COLS, WHALE_GIRL_SPRITE, WHALE_GIRL_SPRITE_ROWS } from './whaleGirlSprite.js';
+/**
+ * The maid portrait (鲸鱼娘) that can stand in for the header's pixel whale
+ * (settings `dsh-tui.whaleGirl`): the author-designed 30×30 true-color
+ * sprite in `whaleGirlSprite.ts`, rendered with the same half-block
+ * technique as the whale — one `▀`/`▄` cell packs two sprite rows, so the
+ * portrait shows at 30 columns × 15 rows. A static portrait by design: the
+ * whale's idle planner and click-hearts stay whale-only, so `dsh-tui.whaleIdle`
+ * has nothing to animate here (documented with the setting).
+ */
+/** Pre-rendered ANSI rows, computed once at module load. */
+export const WHALE_GIRL_ROWS = renderCellRows(WHALE_GIRL_COLS, WHALE_GIRL_SPRITE_ROWS, (x, y) => WHALE_GIRL_SPRITE[y]?.[x] ?? undefined);
+/**
+ * The portrait's center column when it fills the whale's 40-column box
+ * (indented (40−30)/2 = 5, so the art spans columns 5..34 → center 19.5).
+ * The welcome tagline centers on this instead of `WHALE_CENTER` in maid
+ * mode, keeping the caption under the art it belongs to.
+ */
+export const WHALE_GIRL_CENTER = 19.5;
+/**
+ * The maid portrait as an Ink component: 15 rows × 30 columns. `width` pins
+ * the box (the header passes the whale's 40-column box so the neighbouring
+ * text column never shifts) and centers the portrait inside it; without it
+ * the component is exactly the portrait's own 30 columns (the star modal).
+ */
+export function WhaleGirlArt({ width }) {
+    const pad = width === undefined ? 0 : Math.max(0, Math.floor((width - WHALE_GIRL_COLS) / 2));
+    return (_jsx(Box, { flexDirection: "column", flexShrink: 0, width: width, children: WHALE_GIRL_ROWS.map((row, index) => (_jsxs(Text, { wrap: "truncate-end", children: [pad > 0 ? ' '.repeat(pad) : '', row] }, index))) }));
+}

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

@@ -7,7 +7,7 @@ import type { SpinnerMode } from './Spinner/spinnerMode.js';
  *
  * Random verb is picked once per turn (per mount of the spinner).
  */
-export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }: {
+export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, suffix, }: {
     mode: SpinnerMode;
     hasActiveTools: boolean;
     responseLengthRef: React.RefObject<number>;
@@ -17,6 +17,9 @@ export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef
     totalPausedMsRef: React.RefObject<number>;
     pauseStartTimeRef: React.RefObject<number | null>;
     thinkingStatus: 'thinking' | number | null;
+    /** Extra leading field (e.g. the auto-compaction badge) shown before the
+     *  timer/token counters; omitted for an ordinary turn. */
+    suffix?: string;
 }): React.ReactNode;
 /**
  * Tracks thinking status: 'thinking' while the model is streaming reasoning,

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

@@ -1 +1 @@
-{"version":3,"file":"WorkingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/WorkingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAM3D;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,IAAI,EAAE,WAAW,CAAA;IACjB,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,+EAA+E;IAC/E,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,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,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CAC3C,GAAG,KAAK,CAAC,SAAS,CA4BlB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,OAAO,GAClB,UAAU,GAAG,MAAM,GAAG,IAAI,CA6C5B"}
+{"version":3,"file":"WorkingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/WorkingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAM3D;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,MAAM,GACP,EAAE;IACD,IAAI,EAAE,WAAW,CAAA;IACjB,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,+EAA+E;IAC/E,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,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,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;IAC1C;8DAC0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,KAAK,CAAC,SAAS,CA4BlB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,OAAO,GAClB,UAAU,GAAG,MAAM,GAAG,IAAI,CA6C5B"}

package/lib/types/components/WorkingSpinner.js

@@ -13,12 +13,12 @@ import { sample } from 'lodash-es';
  *
  * Random verb is picked once per turn (per mount of the spinner).
  */
-export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }) {
+export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, suffix, }) {
     const { columns } = useTerminalSize();
     // Pick a random verb once per spinner mount (per turn).
     const [randomVerb] = useState(() => sample(SPINNER_VERBS) ?? 'Working');
     const message = `${tOr(`spinner-verb-${randomVerb.toLowerCase()}`, randomVerb)}…`;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", alignItems: "flex-start", children: _jsx(SpinnerAnimationRow, { mode: mode, reducedMotion: false, hasActiveTools: hasActiveTools, responseLengthRef: responseLengthRef, uploadTokensRef: uploadTokensRef, message: message, messageColor: "accent", shimmerColor: "accentShimmer", loadingStartTimeRef: loadingStartTimeRef, totalPausedMsRef: totalPausedMsRef, pauseStartTimeRef: pauseStartTimeRef, spinnerSuffix: null, verbose: true, columns: columns, thinkingStatus: thinkingStatus }) }));
+    return (_jsx(Box, { flexDirection: "column", width: "100%", alignItems: "flex-start", children: _jsx(SpinnerAnimationRow, { mode: mode, reducedMotion: false, hasActiveTools: hasActiveTools, responseLengthRef: responseLengthRef, uploadTokensRef: uploadTokensRef, message: message, messageColor: "accent", shimmerColor: "accentShimmer", loadingStartTimeRef: loadingStartTimeRef, totalPausedMsRef: totalPausedMsRef, pauseStartTimeRef: pauseStartTimeRef, spinnerSuffix: suffix === undefined ? null : suffix, verbose: true, columns: columns, thinkingStatus: thinkingStatus }) }));
 }
 /**
  * Tracks thinking status: 'thinking' while the model is streaming reasoning,