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

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/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"}

package/lib/types/components/messages/AssistantToolUseMessage.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from '../../ui.js';
+import { Box, Text, useTerminalSize } from '../../ui.js';
 import { stringWidth } from '../../ink/stringWidth.js';
 import { useAnimationFrame } from '../../ink/hooks/use-animation-frame.js';
 import { ToolUseLoader } from '../ToolUseLoader.js';
+import { SplitDiffView } from '../SplitDiffView.js';
 import { formatDuration } from '../../cc/format.js';
 /** Tool display names: DSH emits lowercase tool ids (`bash`); Claude Code
  *  shows capitalized names (`Bash`). Map the common ones, fall back to the
@@ -32,8 +33,11 @@ const TEXT_BODY_MAX_LINES = 3;
 /** Diff bodies cap at the upstream chat row's 8 (dsh-client-ui-tool's
  *  CHAT_DIFF_MAX_LINES) — denser information than log output. */
 const DIFF_BODY_MAX_LINES = 8;
-const GUTTER_FIRST = '  ⎿  ';
-const GUTTER_REST = '     ';
+/** Minimum terminal width for the two-pane diff: below this the panes
+ *  would squeeze under ~50 columns each and the unified view reads better. */
+const SPLIT_DIFF_MIN_COLS = 110;
+const GUTTER_FIRST = ' ⎿ ';
+const GUTTER_REST = '   ';
 const add = (text) => ({ text, tone: 'add' });
 const del = (text) => ({ text, tone: 'del' });
 const dim = (text) => ({ text, tone: 'dim' });
@@ -163,7 +167,7 @@ function HeaderTitle({ name, title, isTerminal, displayArgs }) {
  * 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 function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected = false, isExpanded = false, footnote, }) {
+export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected = false, isExpanded = false, footnote, diffLayout = 'auto', }) {
     const isRunning = tool.status === 'running';
     const isError = tool.status === 'error';
     const displayArgs = verbose ? tool.argsFull ?? tool.argsText : tool.argsText;
@@ -188,12 +192,18 @@ export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected =
     const elapsedText = elapsedMs !== undefined ? ` · ${formatDuration(elapsedMs)}` : '';
     // Body lines: the structured view first, raw result text as the fallback
     // (tools without a presenter, or a folded row awaiting loadOlder).
+    // Wide terminals render diffs as a two-pane side-by-side instead: one
+    // source line per terminal row (truncate) keeps the panes row-aligned,
+    // which the flat add/del line model cannot express.
+    const { columns } = useTerminalSize();
+    const useSplitDiff = !isError && view?.card === 'diff' &&
+        (diffLayout === 'split' || (diffLayout !== 'unified' && columns >= SPLIT_DIFF_MIN_COLS));
     let body = [];
     if (isError) {
         if (tool.errorText)
             body = [{ text: tool.errorText, tone: 'error' }];
     }
-    else {
+    else if (!useSplitDiff) {
         if (view !== undefined)
             body = viewLines(view);
         if (body.length === 0 && result) {
@@ -212,7 +222,7 @@ export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected =
             ? 'messageActionsBackground'
             : isExpanded
                 ? 'userMessageBackgroundHover'
-                : undefined, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", minWidth: minWidth, children: [_jsx(ToolUseLoader, { shouldAnimate: isRunning, isUnresolved: isRunning, isError: isError }), _jsx(HeaderTitle, { name: name, title: headerTitle, isTerminal: headerIsTerminal, displayArgs: displayArgs }), !isRunning && (_jsx(Box, { flexWrap: "nowrap", children: _jsx(Text, { dimColor: true, children: elapsedText }) }))] }), rendered.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 5, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: index === 0 ? GUTTER_FIRST : GUTTER_REST }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: line.tone === 'add'
+                : 'toolCardBackgroundDim', children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", minWidth: minWidth, children: [_jsx(ToolUseLoader, { shouldAnimate: isRunning, isUnresolved: isRunning, isError: isError }), _jsx(HeaderTitle, { name: name, title: headerTitle, isTerminal: headerIsTerminal, displayArgs: displayArgs }), !isRunning && (_jsx(Box, { flexWrap: "nowrap", children: _jsx(Text, { dimColor: true, children: elapsedText }) }))] }), useSplitDiff && view?.card === 'diff' ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: GUTTER_FIRST }) }), _jsx(SplitDiffView, { diffs: view.diffs, width: columns - 4, maxRows: DIFF_BODY_MAX_LINES, verbose: verbose })] })) : (rendered.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: index === 0 ? GUTTER_FIRST : GUTTER_REST }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: line.tone === 'add'
                                     ? 'diffAddedWord'
                                     : line.tone === 'del'
                                         ? 'diffRemovedWord'
@@ -220,5 +230,5 @@ export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected =
                                             ? 'error'
                                             : line.tone === 'hint'
                                                 ? 'subtle'
-                                                : undefined, dimColor: line.tone === 'dim', wrap: "wrap", children: line.text === '' ? ' ' : line.text }) })] }, index)))] }) }));
+                                                : undefined, dimColor: line.tone === 'dim', wrap: "wrap", children: line.text === '' ? ' ' : line.text }) })] }, index)))), useSplitDiff && footnote !== undefined && (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: GUTTER_REST }) }), _jsx(Text, { color: "subtle", children: footnote })] }))] }) }));
 }

package/lib/types/dsh-adapter/channel.d.ts

@@ -10,6 +10,9 @@ import { type SessionModeSpec } from '../sessionModes.js';
 import type { SpinnerMode } from '../components/Spinner/spinnerMode.js';
 import { type ActivityState } from 'dsh-working-activity/status';
 import { type TuiWorkspaceCommand, type TuiWorkspaceCommandResult, type TuiWorkspaceTarget } from './workspaces.js';
+import type { TuiSettingsSection } from './settings-sections.js';
+import type { SettingsHost } from './settingsEditor.js';
+import type { TuiSceneDescriptor } from './scenes.js';
 type ChannelImageBlock = Extract<ContentBlock, {
     type: 'image';
 }>;
@@ -217,6 +220,15 @@ export interface LoadedContextSkill {
     readonly name: string;
     readonly description: string;
 }
+/** One skill in the live agent's catalog, for the `/skills` picker (issue #204). */
+export interface SkillInfo {
+    readonly name: string;
+    readonly description: string;
+    /** True when `/name` invokes it (it appears in the `/` menu, issue #86). */
+    readonly userInvocable: boolean;
+    /** Discovery source bucket (bundled / user-* / project-* / runtime / …). */
+    readonly source: string;
+}
 /** One model-visible tool from the prompt assembly. */
 export interface LoadedContextTool {
     readonly name: string;
@@ -304,6 +316,8 @@ export interface Channel {
     readonly workingActivity: ActivityStatus | undefined;
     /** Working-activity indicator preset name (`claude`/`moon`/…/`random`). */
     readonly activityFrames: string | undefined;
+    /** Edit/Write diff presentation preference (`auto`/`split`/`unified`). */
+    readonly diffLayout: 'auto' | 'split' | 'unified';
     /** Whether the in-process working-activity line is shown (config.activity). */
     readonly activityEnabled: boolean;
     /** Whether the segmented context bar row shows in the status footer
@@ -353,6 +367,22 @@ export interface Channel {
      * back to sending the line to the model).
      */
     runExternalCommand(name: string, rawInput: string): Promise<string | undefined>;
+    /**
+     * Plugin-registered full-screen scene currently replacing the conversation
+     * (the `dsh-tui-scenes` runtime), if any. The chat screen renders its
+     * component INSTEAD of the transcript — the same whole-terminal treatment
+     * the trajectory scene gets — and hands it the keyboard; `undefined`
+     * renders the conversation normally.
+     */
+    readonly pluginScene: TuiSceneDescriptor | undefined;
+    /**
+     * Open a registered plugin scene by id. Plugin command handlers usually
+     * call the runtime directly (`ctx.tuiScenes.open`); this passthrough lets
+     * host-side UI code do the same without touching cordis services.
+     */
+    openPluginScene(id: string): boolean;
+    /** Close the open plugin scene, if any (a no-op otherwise). */
+    closePluginScene(): void;
     /** 侧问（CC /btw）：无工具单轮 LLM 调用，复用当前会话上下文；结果不落 session log。 */
     sideQuestion(question: string, options?: {
         signal?: AbortSignal;
@@ -459,12 +489,29 @@ export interface Channel {
     setActivityFrames(name: string): boolean;
     /** Advertised models across every registered provider route (empty when the LLM service is absent). */
     listModels(): Promise<readonly LlmModelInfo[]>;
+    /** The live agent's full skill catalog for `/skills` (issue #204) — name,
+     *  description, invocation flags and source bucket. Undefined on a failed
+     *  or incomplete registry read (the picker shows an error); empty only
+     *  when no registry is mounted or it genuinely holds nothing. */
+    listSkills(): Promise<readonly SkillInfo[] | undefined>;
     /** Safe credential metadata for `/login`; undefined without the service. */
     describeCredential(ref: string): Promise<CredentialStatus | undefined>;
     /** Runtime capabilities for the `/provider` wizard, over the settings /
      *  credentials / llm seams; undefined when the composition lacks them
      *  (bare cordis.yml start without the dsh-base services). */
     providerSetup(): ProviderSetupHost | undefined;
+    /**
+     * Runtime capabilities for the `/settings` screen, over the settings /
+     * credentials seams; undefined when the composition lacks the settings
+     * service (the screen then renders plugin sections as unavailable and
+     * namespaces read-only).
+     */
+    settingsHost(): SettingsHost | undefined;
+    /** Plugin-declared settings sections from the `tuiSettingsSections` seam
+     *  (empty when the seam or every provider is absent). */
+    settingsSections(): readonly TuiSettingsSection[];
+    /** Subscribe to settings-section register/unregister events. */
+    subscribeSettingsSections(listener: () => void): () => void;
     /** Top-level entries of the session cwd for `@` file completion. */
     listFiles(): Promise<readonly string[]>;
     /** Every session the persistence backend stores, classified and unfiltered
@@ -596,6 +643,10 @@ export interface ChannelState {
     workingActivity: ActivityStatus | undefined;
     /** Working-activity indicator preset (see the public Channel type). */
     activityFrames: string | undefined;
+    /** Diff presentation preference (see the public Channel type). */
+    diffLayout: 'auto' | 'split' | 'unified';
+    /** Apply a diff-layout change (see the public Channel type). */
+    setDiffLayout(layout: 'auto' | 'split' | 'unified'): void;
     /** Working-activity display switch (see the public Channel type). */
     activityEnabled: boolean;
     /** Context bar row switch (see the public Channel type). */
@@ -623,6 +674,12 @@ export interface ChannelState {
     commandCompletions(input: string): readonly CommandCompletion[];
     /** Run a plugin-registered command (see the public Channel type). */
     runExternalCommand(name: string, rawInput: string): Promise<string | undefined>;
+    /** Open plugin scene mirrored from the scenes runtime (see the public Channel type). */
+    pluginScene: TuiSceneDescriptor | undefined;
+    /** Open a plugin scene by id (see the public Channel type). */
+    openPluginScene(id: string): boolean;
+    /** Close the open plugin scene (see the public Channel type). */
+    closePluginScene(): void;
     /** Estimated context segments by content type (pi-nano-context style bar). */
     contextSegments: {
         system: number;
@@ -687,10 +744,18 @@ export interface ChannelState {
     /** Switch the working-activity indicator preset (see the public Channel). */
     setActivityFrames(name: string): boolean;
     listModels(): Promise<readonly LlmModelInfo[]>;
+    /** The live agent's skill catalog for `/skills` (see the public Channel type). */
+    listSkills(): Promise<readonly SkillInfo[] | undefined>;
     /** Safe credential metadata for `/login` (see the public Channel type). */
     describeCredential(ref: string): Promise<CredentialStatus | undefined>;
     /** `/provider` wizard capabilities (see the public Channel type). */
     providerSetup(): ProviderSetupHost | undefined;
+    /** `/settings` screen capabilities (see the public Channel type). */
+    settingsHost(): SettingsHost | undefined;
+    /** Plugin-declared settings sections (see the public Channel type). */
+    settingsSections(): readonly TuiSettingsSection[];
+    /** Subscribe to settings-section register/unregister events. */
+    subscribeSettingsSections(listener: () => void): () => void;
     listFiles(): Promise<readonly string[]>;
     listSessions(): Promise<readonly SessionSummary[]>;
     /** Trailing exchanges of a persisted session (see the public Channel type). */
@@ -746,6 +811,9 @@ export declare function createChannel(ctx: Context, initialAgent: Agent, options
     /** Indicator preset for the working-activity line (`claude`/`moon`/
      *  `comet`/`dots`/… or `random`); default `claude`. */
     activityFrames?: string;
+    /** Edit/Write diff presentation; default `auto` (side-by-side ≥110
+     *  columns, unified below). */
+    diffLayout?: 'auto' | 'split' | 'unified';
     /** Show the segmented context bar row in the status footer; default on
      *  (cordis.yml `contextBar: false` hides it, issue #29). */
     contextBar?: boolean;