@deepseek-harness-tui/dsh-tui 0.7.2 → 0.8.0

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

@@ -26,7 +26,7 @@ const THINKING_GLOW_PERIOD_S = 2;
  * 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, }) {
+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();
@@ -81,8 +81,13 @@ export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, respo
     const timerText = formatDuration(elapsedTimeMs);
     const timerWidth = stringWidth(timerText);
     const tokenCount = formatNumber(leaderTokens);
-    const tokensText = `${figures.arrowDown} ${tokenCount} tokens`;
-    const tokensWidth = stringWidth(tokensText);
+    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'
@@ -108,7 +113,7 @@ export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, respo
     const showTimer = wantsTimerAndTokens && availableSpace > usedAfterThinking + timerWidth;
     const usedAfterTimer = usedAfterThinking + (showTimer ? timerWidth + sep : 0);
     const showTokens = wantsTimerAndTokens &&
-        leaderTokens > 0 &&
+        (leaderTokens > 0 || uploadTokens > 0) &&
         availableSpace > usedAfterTimer + tokensWidth;
     const thinkingOnly = showThinking &&
         thinkingStatus === 'thinking' &&
@@ -137,7 +142,7 @@ export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, respo
             : []),
         ...(showTokens
             ? [
-                _jsxs(Box, { flexDirection: "row", children: [_jsx(SpinnerModeGlyph, { mode: mode }), _jsxs(Text, { dimColor: true, children: [tokenCount, " tokens"] })] }, "tokens"),
+                _jsxs(Box, { flexDirection: "row", children: [_jsx(SpinnerModeGlyph, { mode: mode }), _jsx(Text, { dimColor: true, children: tokensLabel })] }, "tokens"),
             ]
             : []),
         ...(showThinking && thinkingText

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ToolFileDiff } from '../dsh-adapter/channel.js';
+import { type CliHighlight } from '../cc/cliHighlight.js';
+/** chalk style for one raw theme value. Accepts every form the theme
+ *  loader documents: #rgb, #rrggbb, #rrggbbaa (alpha stripped), rgb() with
+ *  or without spaces, ansi256(n), ansi:name (issue #250, P2-5). */
+export declare function chalkFromToken(token: string): (text: string) => string;
+/** Parse a cli-highlight ANSI string into colored runs, preserving open
+ *  spans across embedded newlines (multi-line strings/comments). Handles
+ *  truecolor 38;2, 256-color 38;5 (tmux / FORCE_COLOR=2, issue #250 P1-1),
+ *  and single-code 16-color SGR. */
+export declare function parseAnsiRuns(text: string): {
+    text: string;
+    color?: string;
+}[];
+export declare function highlightLines(text: string, language: string | undefined, hl: CliHighlight | null, chTheme: Record<string, (text: string) => string> | undefined, themeSig: string): readonly {
+    text: string;
+    color?: string;
+}[][] | undefined;
+export declare function SplitDiffView({ diffs, width, maxRows, verbose, }: {
+    readonly diffs: readonly ToolFileDiff[];
+    /** Content width available to the whole two-pane block (divider included). */
+    readonly width: number;
+    /** Row budget when not verbose; overflow folds into one hint row. */
+    readonly maxRows: number;
+    readonly verbose: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=SplitDiffView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitDiffView.d.ts","sourceRoot":"","sources":["../../../src/components/SplitDiffView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAwFjF;;mEAEmE;AACnE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAmBtE;AAUD;;;oCAGoC;AACpC,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,CAuB9E;AAuBD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,EAAE,EAAE,YAAY,GAAG,IAAI,EACvB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,EAC7D,QAAQ,EAAE,MAAM,GACf,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,EAAE,GAAG,SAAS,CAe3D;AA6ND,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,GACR,EAAE;IACD,QAAQ,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IACvC,8EAA8E;IAC9E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,SAAS,CAiGlB"}

package/lib/types/components/SplitDiffView.js

@@ -0,0 +1,417 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from '../ui.js';
+import * as JsDiff from 'diff';
+import chalk from 'chalk';
+import { extname } from 'node:path';
+import { getCliHighlightPromise } from '../cc/cliHighlight.js';
+import { getTheme } from '../theme.js';
+import { useTheme } from './design-system/ThemeProvider.js';
+/** Replace tabs so width math and alignment hold (pi convention). */
+const expandTabs = (text) => text.replaceAll('\t', '   ');
+// --- syntax highlighting ----------------------------------------------------
+/** highlight.js token classes → theme syntax tokens. `default` catches
+ *  every unmapped class so cli-highlight's own yellow never leaks through
+ *  (issue #250, P2-6). */
+const SYNTAX_CLASS_TO_TOKEN = {
+    keyword: 'syntaxKeyword',
+    built_in: 'syntaxKeyword',
+    literal: 'syntaxKeyword',
+    string: 'syntaxString',
+    subst: 'syntaxString',
+    quote: 'syntaxString',
+    comment: 'syntaxComment',
+    number: 'syntaxNumber',
+    title: 'syntaxFunction',
+    'title.function_': 'syntaxFunction',
+    function: 'syntaxFunction',
+    'title.class_': 'syntaxType',
+    type: 'syntaxType',
+    class: 'syntaxType',
+    tag: 'syntaxType',
+    name: 'syntaxType',
+    attr: 'syntaxVariable',
+    attribute: 'syntaxVariable',
+    variable: 'syntaxVariable',
+    'template-variable': 'syntaxVariable',
+    params: 'syntaxVariable',
+    operator: 'syntaxOperator',
+    punctuation: 'syntaxPunctuation',
+    meta: 'syntaxPunctuation',
+    symbol: 'syntaxConstant',
+    regexp: 'syntaxConstant',
+    default: 'syntaxVariable',
+};
+/** chalk style for one raw theme value. Accepts every form the theme
+ *  loader documents: #rgb, #rrggbb, #rrggbbaa (alpha stripped), rgb() with
+ *  or without spaces, ansi256(n), ansi:name (issue #250, P2-5). */
+export function chalkFromToken(token) {
+    let match = /^#([0-9a-fA-F]{3})$/.exec(token);
+    if (match !== null) {
+        const [r, g, b] = match[1].split('').map(c => parseInt(c + c, 16));
+        return chalk.rgb(r, g, b);
+    }
+    match = /^#([0-9a-fA-F]{6})(?:[0-9a-fA-F]{2})?$/.exec(token);
+    if (match !== null)
+        return chalk.hex(`#${match[1]}`);
+    match = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.exec(token);
+    if (match !== null)
+        return chalk.rgb(Number(match[1]), Number(match[2]), Number(match[3]));
+    match = /^ansi256\((\d+)\)$/.exec(token);
+    if (match !== null)
+        return chalk.ansi256(Number(match[1]));
+    match = /^ansi:(\w+)$/.exec(token);
+    if (match !== null) {
+        const name = match[1] === 'blackBright' ? 'gray' : match[1];
+        const style = chalk[name];
+        if (style !== undefined)
+            return style;
+    }
+    return (text) => text;
+}
+/** ANSI 16-color SGR codes → rgb() strings (the dark-ansi palette path). */
+const ANSI16 = {
+    30: 'rgb(0,0,0)', 31: 'rgb(128,0,0)', 32: 'rgb(0,128,0)', 33: 'rgb(128,128,0)',
+    34: 'rgb(0,0,128)', 35: 'rgb(128,0,128)', 36: 'rgb(0,128,128)', 37: 'rgb(192,192,192)',
+    90: 'rgb(128,128,128)', 91: 'rgb(255,0,0)', 92: 'rgb(0,255,0)', 93: 'rgb(255,255,0)',
+    94: 'rgb(0,0,255)', 95: 'rgb(255,0,255)', 96: 'rgb(0,255,255)', 97: 'rgb(255,255,255)',
+};
+/** Parse a cli-highlight ANSI string into colored runs, preserving open
+ *  spans across embedded newlines (multi-line strings/comments). Handles
+ *  truecolor 38;2, 256-color 38;5 (tmux / FORCE_COLOR=2, issue #250 P1-1),
+ *  and single-code 16-color SGR. */
+export function parseAnsiRuns(text) {
+    const runs = [];
+    let color;
+    let rest = text;
+    // eslint-disable-next-line no-control-regex -- parsing SGR is the point
+    const sgr = /\x1b\[([0-9;]+)m/;
+    while (rest.length > 0) {
+        const match = sgr.exec(rest);
+        const chunk = match === null ? rest : rest.slice(0, match.index);
+        if (chunk !== '')
+            runs.push(color === undefined ? { text: chunk } : { text: chunk, color });
+        if (match === null)
+            break;
+        const codes = match[1].split(';').map(Number);
+        if (codes.includes(0) || codes.includes(39))
+            color = undefined;
+        else if (codes[0] === 38 && codes[1] === 2 && codes.length >= 5) {
+            color = `rgb(${codes[2]},${codes[3]},${codes[4]})`;
+        }
+        else if (codes[0] === 38 && codes[1] === 5 && codes.length >= 3) {
+            color = `ansi256(${codes[2]})`;
+        }
+        else if (codes.length === 1 && ANSI16[codes[0]] !== undefined) {
+            color = ANSI16[codes[0]];
+        }
+        rest = rest.slice(match.index + match[0].length);
+    }
+    return runs;
+}
+/** Split flat runs into per-line run arrays at embedded newlines. */
+function splitRunsToLines(runs) {
+    const lines = [[]];
+    for (const run of runs) {
+        const parts = run.text.split('\n');
+        for (let i = 0; i < parts.length; i++) {
+            if (i > 0)
+                lines.push([]);
+            if (parts[i] !== '') {
+                lines[lines.length - 1].push(run.color === undefined ? { text: parts[i] } : { text: parts[i], color: run.color });
+            }
+        }
+    }
+    return lines;
+}
+/** Whole-hunk syntax runs per line, cached per (theme signature + language
+ *  + text): one entry survives any amount of card re-rendering, and the
+ *  palette change invalidates it (issue #250, P1-2 + P2-8). */
+const syntaxCache = new Map();
+const SYNTAX_CACHE_MAX = 40;
+export function highlightLines(text, language, hl, chTheme, themeSig) {
+    if (hl === null || chTheme === undefined || language === undefined)
+        return undefined;
+    if (text === '' || !hl.supportsLanguage(language))
+        return undefined;
+    const key = `${themeSig}${language}${text}`;
+    const cached = syntaxCache.get(key);
+    if (cached !== undefined)
+        return cached;
+    let lines;
+    try {
+        lines = splitRunsToLines(parseAnsiRuns(hl.highlight(text, { language, theme: chTheme })));
+    }
+    catch {
+        return undefined;
+    }
+    if (syntaxCache.size >= SYNTAX_CACHE_MAX)
+        syntaxCache.clear();
+    syntaxCache.set(key, lines);
+    return lines;
+}
+/**
+ * Merge syntax runs with word-diff change flags over the same string: both
+ * partition it, so an offset sweep yields runs carrying a syntax color AND
+ * a changed flag. The render layer lets `changed` override the color.
+ */
+function mergeRuns(syntax, words) {
+    const out = [];
+    let si = 0;
+    let wi = 0;
+    let sOff = 0;
+    let wOff = 0;
+    while (si < syntax.length && wi < words.length) {
+        const s = syntax[si];
+        const w = words[wi];
+        const sLen = s.text.length - sOff;
+        const wLen = w.text.length - wOff;
+        const take = Math.min(sLen, wLen);
+        if (take > 0) {
+            out.push({
+                text: w.text.slice(wOff, wOff + take),
+                changed: w.changed,
+                color: w.changed ? undefined : s.color,
+            });
+        }
+        sOff += take;
+        wOff += take;
+        if (sOff >= s.text.length) {
+            si++;
+            sOff = 0;
+        }
+        if (wOff >= w.text.length) {
+            wi++;
+            wOff = 0;
+        }
+    }
+    return out;
+}
+// --- word-level diff --------------------------------------------------------
+/** Strip the shared leading whitespace before word-diffing: otherwise the
+ *  whole indent reads as one changed blob (pi's renderIntraLineDiff trick). */
+function wordSegments(oldLine, newLine) {
+    const oldIndent = /^\s*/.exec(oldLine)?.[0] ?? '';
+    const newIndent = /^\s*/.exec(newLine)?.[0] ?? '';
+    const sharedIndent = oldIndent === newIndent ? oldIndent : '';
+    const parts = JsDiff.diffWords(oldLine.slice(sharedIndent.length), newLine.slice(sharedIndent.length));
+    const oldSegments = sharedIndent === '' ? [] : [{ text: sharedIndent, changed: false }];
+    const newSegments = sharedIndent === '' ? [] : [{ text: sharedIndent, changed: false }];
+    for (const part of parts) {
+        if (part.added)
+            newSegments.push({ text: part.value, changed: true });
+        else if (part.removed)
+            oldSegments.push({ text: part.value, changed: true });
+        else {
+            oldSegments.push({ text: part.value, changed: false });
+            newSegments.push({ text: part.value, changed: false });
+        }
+    }
+    return { old: oldSegments, new: newSegments };
+}
+const plainSegments = (line) => [{ text: line, changed: false }];
+// --- hunk alignment ---------------------------------------------------------
+/**
+ * Pair the lines of an unequal removed+added block via a case-insensitive
+ * LCS: lines equal modulo case align as change pairs, everything before the
+ * first match stays block order. An inserted line above an edited one
+ * (`foo,bar` → `insert,FOO,bar`) therefore yields `insert` add-only, then
+ * `foo ↔ FOO`, instead of the index-zip misalignment (issue #250, P2-4).
+ */
+function lcsPairs(oldLines, newLines) {
+    const m = oldLines.length;
+    const n = newLines.length;
+    // dp[i][j] = LCS length of oldLines[i:] and newLines[j:].
+    const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    const eq = (a, b) => a.toLowerCase() === b.toLowerCase();
+    for (let i = m - 1; i >= 0; i--) {
+        for (let j = n - 1; j >= 0; j--) {
+            dp[i][j] = eq(oldLines[i], newLines[j])
+                ? dp[i + 1][j + 1] + 1
+                : Math.max(dp[i + 1][j], dp[i][j + 1]);
+        }
+    }
+    const pairs = [];
+    let i = 0;
+    let j = 0;
+    while (i < m && j < n) {
+        if (eq(oldLines[i], newLines[j])) {
+            pairs.push([i, j]);
+            i++;
+            j++;
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            i++;
+        }
+        else {
+            j++;
+        }
+    }
+    return pairs;
+}
+/** Align one file's hunks into rows (plain text + word flags; styling is a
+ *  render-time concern over the visible slice). */
+function alignFileDiff(fileIndex, oldText, newText) {
+    const rows = [];
+    const parts = JsDiff.diffLines(expandTabs(oldText ?? ''), expandTabs(newText));
+    let oldIndex = 0;
+    let newIndex = 0;
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const lines = part.value.replace(/\n$/, '').split('\n');
+        if (!part.added && !part.removed) {
+            for (const line of lines) {
+                rows.push({
+                    kind: 'context',
+                    fileIndex,
+                    oldIndex: oldIndex++,
+                    newIndex: newIndex++,
+                    oldWords: plainSegments(line),
+                    newWords: plainSegments(line),
+                });
+            }
+            continue;
+        }
+        if (part.removed) {
+            const addedPart = parts[i + 1]?.added === true ? parts[i + 1] : undefined;
+            const addedLines = addedPart === undefined ? [] : addedPart.value.replace(/\n$/, '').split('\n');
+            // Same-length replacement blocks zip index-for-index (the common
+            // edit case); unequal blocks pair through the ci-LCS so an inserted
+            // line cannot shift the alignment (issue #250, P2-4).
+            const pairs = lines.length === addedLines.length
+                ? lines.map((_, index) => [index, index])
+                : lcsPairs(lines, addedLines);
+            // Block order: walk both lists; unpaired entries emit in place, pairs
+            // emit at the later of the two positions.
+            const events = [];
+            let oi = 0;
+            let ai = 0;
+            for (const [o, a] of pairs) {
+                while (oi < o)
+                    events.push({ kind: 'del', o: oi++ });
+                while (ai < a)
+                    events.push({ kind: 'add', a: ai++ });
+                events.push({ kind: 'change', o: oi++, a: ai++ });
+            }
+            while (oi < lines.length)
+                events.push({ kind: 'del', o: oi++ });
+            while (ai < addedLines.length)
+                events.push({ kind: 'add', a: ai++ });
+            for (const event of events) {
+                if (event.kind === 'change') {
+                    const segments = wordSegments(lines[event.o], addedLines[event.a]);
+                    rows.push({
+                        kind: 'change',
+                        fileIndex,
+                        oldIndex: oldIndex++,
+                        newIndex: newIndex++,
+                        oldWords: segments.old,
+                        newWords: segments.new,
+                    });
+                }
+                else if (event.kind === 'del') {
+                    rows.push({ kind: 'del', fileIndex, oldIndex: oldIndex++, oldWords: plainSegments(lines[event.o]) });
+                }
+                else {
+                    rows.push({ kind: 'add', fileIndex, newIndex: newIndex++, newWords: plainSegments(addedLines[event.a]) });
+                }
+            }
+            if (addedPart !== undefined)
+                i++;
+            continue;
+        }
+        for (const line of lines) {
+            rows.push({ kind: 'add', fileIndex, newIndex: newIndex++, newWords: plainSegments(line) });
+        }
+    }
+    return rows;
+}
+// --- rendering --------------------------------------------------------------
+function PaneLine({ side, kind, width, tone, padLeft = false, }) {
+    const backgroundColor = kind === 'context'
+        ? 'toolCardBackground'
+        : tone === 'old'
+            ? 'diffRemovedDimmed'
+            : 'diffAddedDimmed';
+    const wordColor = tone === 'old' ? 'diffRemovedWord' : 'diffAddedWord';
+    // Status gutter instead of line numbers: ToolFileDiff has no file
+    // offsets, and an invented number misleads (issue #250, P2-3).
+    const marker = kind === 'context' ? ' ' : tone === 'old' ? '−' : '+';
+    const prefix = padLeft ? ` ${marker}` : marker;
+    return (_jsxs(Box, { width: width, flexShrink: 0, backgroundColor: backgroundColor, children: [_jsx(Text, { dimColor: true, backgroundColor: backgroundColor, children: `${prefix} ` }), side === undefined ? (_jsx(Text, { backgroundColor: backgroundColor, children: " " })) : (_jsx(Text, { wrap: "truncate", backgroundColor: backgroundColor, children: side.segments.map((segment, index) => segment.changed ? (_jsx(Text, { color: wordColor, bold: true, backgroundColor: backgroundColor, children: segment.text }, index)) : (_jsx(Text, { color: segment.color, backgroundColor: backgroundColor, children: segment.text }, index))) }))] }));
+}
+export function SplitDiffView({ diffs, width, maxRows, verbose, }) {
+    const [hl, setHl] = React.useState(null);
+    React.useEffect(() => {
+        let mounted = true;
+        void getCliHighlightPromise().then(loaded => {
+            if (mounted)
+                setHl(loaded);
+        });
+        return () => { mounted = false; };
+    }, []);
+    const [themeName] = useTheme();
+    // Resolved-palette signature: covers dark→light, light→dark, AND the
+    // `auto` base flip where the name never changes (issue #250, P1-2).
+    const themeSig = React.useMemo(() => {
+        const theme = getTheme(themeName);
+        return Object.values(SYNTAX_CLASS_TO_TOKEN)
+            .map(key => theme[key] ?? '')
+            .join('|');
+    }, [themeName]);
+    const chTheme = React.useMemo(() => {
+        const theme = getTheme(themeName);
+        const out = {};
+        for (const [tokenClass, tokenKey] of Object.entries(SYNTAX_CLASS_TO_TOKEN)) {
+            const value = theme[tokenKey];
+            if (value !== undefined)
+                out[tokenClass] = chalkFromToken(value);
+        }
+        return out;
+        // themeSig changes exactly when any syntax token's resolved value does.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [themeSig]);
+    // Alignment is text-only and capped BEFORE styling: the highlighter and
+    // word-diff work lands only on the visible slice (issue #250, P2-8).
+    const rows = [];
+    let prevPath;
+    diffs.forEach((diff, fileIndex) => {
+        if (diffs.length > 1) {
+            if (diff.path !== prevPath)
+                rows.push({ separator: diff.path });
+            else
+                rows.push({ separator: '⋯' });
+        }
+        prevPath = diff.path;
+        rows.push(...alignFileDiff(fileIndex, diff.oldText, diff.newText));
+    });
+    const totalRows = rows.length;
+    const capped = verbose || totalRows <= maxRows || totalRows - maxRows === 1;
+    const visible = capped ? rows : rows.slice(0, maxRows);
+    const hidden = totalRows - visible.length;
+    const paneWidth = Math.max(20, Math.floor((width - 1) / 2));
+    // Whole-hunk highlight per file (multi-line lexer state preserved);
+    // only the visible rows merge syntax runs with word flags below.
+    const fileSyntax = diffs.map(diff => {
+        const language = extname(diff.path).replace(/^\./, '') || undefined;
+        return {
+            old: highlightLines(expandTabs(diff.oldText ?? ''), language, hl, chTheme, themeSig),
+            next: highlightLines(expandTabs(diff.newText), language, hl, chTheme, themeSig),
+        };
+    });
+    return (_jsxs(Box, { flexDirection: "column", width: paneWidth * 2 + 1, backgroundColor: "toolCardBackgroundDim", children: [visible.map((row, index) => {
+                if ('separator' in row) {
+                    return (_jsx(Box, { width: paneWidth * 2 + 1, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: row.separator === '⋯' ? '⋯' : `  ${row.separator}` }) }, index));
+                }
+                const syntax = fileSyntax[row.fileIndex];
+                const oldRuns = row.oldIndex !== undefined ? syntax?.old?.[row.oldIndex] : undefined;
+                const newRuns = row.newIndex !== undefined ? syntax?.next?.[row.newIndex] : undefined;
+                const oldSide = row.oldWords === undefined
+                    ? undefined
+                    : { segments: oldRuns !== undefined ? mergeRuns(oldRuns, row.oldWords) : row.oldWords };
+                const newSide = row.newWords === undefined
+                    ? undefined
+                    : { segments: newRuns !== undefined ? mergeRuns(newRuns, row.newWords) : row.newWords };
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsx(PaneLine, { side: oldSide, kind: row.kind === 'add' ? 'context' : row.kind, tone: "old", width: paneWidth }), _jsx(Box, { width: 1, flexShrink: 0, backgroundColor: "toolCardBackgroundDim", children: _jsx(Text, { dimColor: true, children: "\u2502" }) }), _jsx(PaneLine, { side: newSide, kind: row.kind === 'del' ? 'context' : row.kind, tone: "new", width: paneWidth, padLeft: true })] }, index));
+            }), hidden > 0 && (_jsx(Text, { dimColor: true, children: `… +${hidden} lines (ctrl+o to expand)` }))] }));
+}

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

@@ -8,10 +8,12 @@ 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, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }: {
+export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }: {
     mode: SpinnerMode;
     hasActiveTools: boolean;
     responseLengthRef: React.RefObject<number>;
+    /** Most recent request's real upload tokens; 0 until the first usage event. */
+    uploadTokensRef: React.RefObject<number>;
     loadingStartTimeRef: React.RefObject<number>;
     totalPausedMsRef: React.RefObject<number>;
     pauseStartTimeRef: React.RefObject<number | null>;

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;AAK3D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,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,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,CA2BlB;AAED;;;;GAIG;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;AAK3D;;;;;;;GAOG;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;;;;GAIG;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, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }) {
+export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }) {
     const { columns } = useTerminalSize();
     // Pick a random verb once per spinner mount (per turn).
     const [randomVerb] = useState(() => sample(SPINNER_VERBS) ?? 'Working');
     const message = `${randomVerb}…`;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", alignItems: "flex-start", children: _jsx(SpinnerAnimationRow, { mode: mode, reducedMotion: false, hasActiveTools: hasActiveTools, responseLengthRef: responseLengthRef, message: message, messageColor: "claude", shimmerColor: "claudeShimmer", 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: "claude", shimmerColor: "claudeShimmer", loadingStartTimeRef: loadingStartTimeRef, totalPausedMsRef: totalPausedMsRef, pauseStartTimeRef: pauseStartTimeRef, spinnerSuffix: null, verbose: true, columns: columns, thinkingStatus: thinkingStatus }) }));
 }
 /**
  * Tracks thinking status: 'thinking' while the model is streaming reasoning,

package/lib/types/components/design-system/ThemedText.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Color, Styles } from '../../ink/styles.js';
+import type { DOMElement } from '../../ink/dom.js';
 import { type Theme } from '../../theme.js';
 /**
  * Colors uncolored ThemedText in the subtree. Precedence: explicit `color` >
@@ -45,6 +46,11 @@ export type Props = {
      * This property tells Ink to wrap or truncate text if its width is larger than container.
      */
     readonly wrap?: Styles['textWrap'];
+    /**
+     * Ref to the underlying ink-text DOMElement (e.g. useDeclaredCursor
+     * parking the native cursor on an inline caret cell).
+     */
+    readonly ref?: React.Ref<DOMElement>;
     readonly children?: React.ReactNode;
 };
 /**
@@ -52,5 +58,5 @@ export type Props = {
  * (in the Claude Code visual language). This is what lets every ported CC
  * component use `color="subtle"`-style theme keys unchanged.
  */
-export default function ThemedText({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props): React.ReactNode;
+export default function ThemedText({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, ref, children, }: Props): React.ReactNode;
 //# sourceMappingURL=ThemedText.d.ts.map

package/lib/types/components/design-system/ThemedText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemedText.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGrD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,wCAEtB,CAAA;AAqBZ,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAEpC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAE9C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;IAElC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,IAAY,EACZ,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,OAAe,EACf,IAAa,EACb,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA4BzB"}
+{"version":3,"file":"ThemedText.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGrD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,wCAEtB,CAAA;AAqBZ,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAEpC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAE9C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;IAElC;;;OAGG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;IAEpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,IAAY,EACZ,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,OAAe,EACf,IAAa,EACb,GAAG,EACH,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA6BzB"}

package/lib/types/components/design-system/ThemedText.js

@@ -28,7 +28,7 @@ function resolveColor(color, theme) {
  * (in the Claude Code visual language). This is what lets every ported CC
  * component use `color="subtle"`-style theme keys unchanged.
  */
-export default function ThemedText({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', children, }) {
+export default function ThemedText({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', ref, children, }) {
     const [themeName] = useTheme();
     const theme = getTheme(themeName);
     const hoverColor = React.useContext(TextHoverColorContext);
@@ -39,5 +39,5 @@ export default function ThemedText({ color, backgroundColor, dimColor = false, b
             ? theme.inactive
             : resolveColor(color, theme);
     const resolvedBackgroundColor = resolveColor(backgroundColor, theme);
-    return (_jsx(Text, { color: resolvedColor, backgroundColor: resolvedBackgroundColor, bold: bold, italic: italic, underline: underline, strikethrough: strikethrough, inverse: inverse, wrap: wrap, children: children }));
+    return (_jsx(Text, { ref: ref, color: resolvedColor, backgroundColor: resolvedBackgroundColor, bold: bold, italic: italic, underline: underline, strikethrough: strikethrough, inverse: inverse, wrap: wrap, children: children }));
 }

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

@@ -19,6 +19,8 @@ type Props = {
      * is worth less than mentioning it once.
      */
     footnote?: string;
+    /** Diff presentation preference; `auto` picks by terminal width. */
+    diffLayout?: 'auto' | 'split' | 'unified';
 };
 /**
  * Tool-call card: `● Edit /path` header with a blinking status dot, then the
@@ -26,6 +28,6 @@ type Props = {
  * output, read content — instead of the raw result dump (mirroring Claude Code's `AssistantToolUseMessage.tsx` + the dsh-tools presentation views the
  * channel captures per call).
  */
-export declare function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected, isExpanded, footnote, }: Props): React.ReactNode;
+export declare function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected, isExpanded, footnote, diffLayout, }: Props): React.ReactNode;
 export {};
 //# sourceMappingURL=AssistantToolUseMessage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AssistantToolUseMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantToolUseMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAA8C,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAIvG,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAA;IAChB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAsMD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,UAAkB,EAClB,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAwGzB"}
+{"version":3,"file":"AssistantToolUseMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantToolUseMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAA8C,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAKvG,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAA;IAChB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CAC1C,CAAA;AAyMD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,UAAkB,EAClB,QAAQ,EACR,UAAmB,GACpB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAoIzB"}