@deepseek-harness-tui/dsh-tui 0.7.3 → 0.8.1

package/lib/types/components/SkillsPicker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text, useTerminalSize } 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';
+/** 来源桶 → 本地化标签（未知桶原样显示，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, }) {
+    const { rows: terminalRows } = useTerminalSize();
+    // 每项恒占 2 行（正文 + 来源/简述描述行，均 truncate 成单行）。
+    // 框架行：浮层预留 8 + Pane 2 + 标题 2 + 页脚 1 = 13（ModelPicker 同款）。
+    const { start, end } = listWindow(skills.map(() => 2), focusIndex, Math.max(terminalRows - 13, 2));
+    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, 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/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/ToolUseLoader.d.ts

@@ -3,11 +3,16 @@ type Props = {
     isError: boolean;
     isUnresolved: boolean;
     shouldAnimate: boolean;
+    /** Raw tool id (bash/read/edit/…) — picks the category color for a settled dot. */
+    toolName?: string;
 };
 /**
- * The status dot on tool-call rows, mirroring Claude Code's ToolUseLoader:
- * blinking `●` while running, green on success, red on error, dim when queued.
+ * The status dot on tool-call rows. State shapes the glyph, the tool
+ * category picks the settled color: blinking `●` while running (attention),
+ * a smaller category-colored `•` once settled (quiet), and a red `✗` on
+ * error — a glyph swap, not just a hue, so failures read at a glance
+ * (Codex-style category colors; every color is a theme token).
  */
-export declare function ToolUseLoader({ isError, isUnresolved, shouldAnimate, }: Props): React.ReactNode;
+export declare function ToolUseLoader({ isError, isUnresolved, shouldAnimate, toolName, }: Props): React.ReactNode;
 export {};
 //# sourceMappingURL=ToolUseLoader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolUseLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ToolUseLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,YAAY,EACZ,aAAa,GACd,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAezB"}
+{"version":3,"file":"ToolUseLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ToolUseLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAmCD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAoBzB"}

package/lib/types/components/ToolUseLoader.js

@@ -1,17 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Box from '../ink/components/Box.js';
-import Text from '../ink/components/Text.js';
+import { Text } from '../ui.js';
 import { useBlink } from '../hooks/useBlink.js';
-import { BLACK_CIRCLE } from '../cc/figures.js';
+import { BLACK_CIRCLE, BULLET, MULTIPLICATION_X } from '../cc/figures.js';
+const CATEGORY_BY_TOOL = {
+    bash: 'exec',
+    powershell: 'exec',
+    pwsh: 'exec',
+    read: 'read',
+    grep: 'read',
+    glob: 'read',
+    search: 'read',
+    file_search: 'read',
+    edit: 'write',
+    write: 'write',
+    str_replace_editor: 'write',
+    multiedit: 'write',
+    web_search: 'web',
+    web_fetch: 'web',
+    browser: 'web',
+    subagent: 'task',
+    task: 'task',
+    job: 'task',
+    workflow: 'task',
+};
+const CATEGORY_TOKEN = {
+    exec: 'toolDotExec',
+    read: 'toolDotRead',
+    write: 'toolDotWrite',
+    web: 'toolDotWeb',
+    task: 'toolDotTask',
+    default: 'success',
+};
 /**
- * The status dot on tool-call rows, mirroring Claude Code's ToolUseLoader:
- * blinking `●` while running, green on success, red on error, dim when queued.
+ * The status dot on tool-call rows. State shapes the glyph, the tool
+ * category picks the settled color: blinking `●` while running (attention),
+ * a smaller category-colored `•` once settled (quiet), and a red `✗` on
+ * error — a glyph swap, not just a hue, so failures read at a glance
+ * (Codex-style category colors; every color is a theme token).
  */
-export function ToolUseLoader({ isError, isUnresolved, shouldAnimate, }) {
+export function ToolUseLoader({ isError, isUnresolved, shouldAnimate, toolName, }) {
     const [ref, isBlinking] = useBlink(shouldAnimate);
-    const color = isUnresolved ? undefined : isError ? 'error' : 'success';
-    const char = !shouldAnimate || isBlinking || isError || !isUnresolved
-        ? BLACK_CIRCLE
-        : ' ';
+    if (isError) {
+        return (_jsx(Box, { ref: ref, minWidth: 2, children: _jsx(Text, { color: "error", children: MULTIPLICATION_X }) }));
+    }
+    const category = CATEGORY_BY_TOOL[toolName ?? ''] ?? 'default';
+    const color = isUnresolved ? undefined : CATEGORY_TOKEN[category];
+    const char = shouldAnimate ? (isBlinking ? BLACK_CIRCLE : ' ') : BULLET;
     return (_jsx(Box, { ref: ref, minWidth: 2, children: _jsx(Text, { color: color, dimColor: isUnresolved, children: char }) }));
 }

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,CAqIzB"}