diff --git a/README.md b/README.md index 34a6dec..1d7b0f5 100644 --- a/README.md +++ b/README.md @@ -94,7 +94,12 @@ Turn the guard off with `guard: false`, or change the list of blocked tools with ## Diff cards in the Web UI -The plugin ships a web client (`client.js`) that registers an `edit` tool view. Hashline, sloppy and apply_patch calls then render as DSH's native green/red diff card (from the applied hunks in `meta.diffs`), with `+N -M` counts, instead of raw patch text. +The plugin ships a web client (`client.js`) that registers an `edit` tool view. Hashline, sloppy and apply_patch calls render as a diff card instead of raw patch text: +- green added rows, red removed rows and gray context, using only DSH's theme tokens (`--dsw-alias-code-diff-added/-deleted`, `--dsw-alias-state-success/error-primary`, the code-block font), so it follows the active theme like the stock diff view; +- a **line-number gutter** with the old and new file line of every row; +- `+N -M` counts in the header, plus Wrap and Copy buttons. + +The host attaches `oldStart`, `newStart` and `rows` to every hunk in `meta.diffs`, next to the standard `path`/`oldText`/`newText` fields. Older results without them still render, just without numbers. ## Edit modes diff --git a/client.js b/client.js index 595c260..71c77cb 100644 --- a/client.js +++ b/client.js @@ -1,9 +1,15 @@ -// omp-edit Web client: render hashline / patch edits as DSH's native diff card. +// omp-edit Web client: render hashline / patch edits as a DSH-native diff card with line numbers. // // The stock `edit` row derives its diff from `file_path` + `old_string`/`new_string` arguments. // Hashline, sloppy and apply_patch calls carry one `input` string instead, so the stock row falls // back to raw text. This keyed toolview (priority -1 shadows the stock one) renders the applied -// hunks the host already persists in `meta.diffs` with the shared DiffBlock primitive. +// hunks the host persists in `meta.diffs`. +// +// Styling uses only DSH theme tokens (the same ones DiffBlock.module.css uses: --dsw-alias-code- +// diff-added/-deleted, --dsw-alias-state-success-/error-primary, --dsw-font-markdown-code-block…) +// so it follows every theme. Each row shows its old/new file line numbers in a gutter, from the +// `oldStart`/`newStart`/`rows` the host attaches to every hunk (older results without them fall +// back to un-numbered rows). window.__ModuleLoader__.load({ id: '@local/omp-edit', factory(require) { @@ -12,15 +18,41 @@ window.__ModuleLoader__.load({ const h = React.createElement; const CSS = ` -.ompe-row{display:flex;flex-direction:column;gap:6px;min-width:0} -.ompe-head{display:flex;align-items:center;gap:6px;min-width:0;height:24px;padding:0 4px;border:0;background:none;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;cursor:pointer;border-radius:var(--dsw-radius-sm);text-align:left} +.ompe-row{display:flex;flex-direction:column;gap:4px;min-width:0} +.ompe-head{display:flex;align-items:center;gap:6px;min-width:0;min-height:24px;padding:0 4px;margin:0 -4px;border:0;background:none;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;border-radius:var(--dsw-radius-sm);text-align:left} .ompe-head:hover{background:var(--dsw-alias-interactive-bg-hover)} +.ompe-head:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary))} +.ompe-icon{display:inline-flex;flex:none;color:var(--dsw-alias-label-tertiary)} .ompe-title{color:var(--dsw-alias-label-primary);flex:none} -.ompe-sum{color:var(--dsw-alias-label-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} -.ompe-add{color:var(--dsw-alias-state-success,#3fb950);flex:none} -.ompe-del{color:var(--dsw-alias-state-danger,#f85149);flex:none} -.ompe-err{color:var(--dsw-alias-state-danger,#f85149)} -.ompe-text{margin:0;padding:8px;border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-l2,rgba(127,127,127,.08));white-space:pre-wrap;font:12px/1.5 var(--dsw-font-mono,ui-monospace,monospace);color:var(--dsw-alias-label-secondary);max-height:320px;overflow:auto} +.ompe-sum{color:var(--dsw-alias-label-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} +.ompe-add{color:var(--dsw-alias-state-success-primary);flex:none;font-variant-numeric:tabular-nums} +.ompe-del{color:var(--dsw-alias-state-error-primary);flex:none;font-variant-numeric:tabular-nums} +.ompe-err{color:var(--dsw-alias-state-error-primary)} +.ompe-card{border-radius:var(--dsw-radius-lg,12px);background:var(--dsw-alias-bg-l2,var(--dsw-alias-fill-l1));border:1px solid var(--dsw-alias-border-l1,transparent);overflow:hidden} +.ompe-tools{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;color:var(--dsw-alias-label-tertiary);font-size:12px} +.ompe-tools-path{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.ompe-tbtn{border:0;background:none;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:12px;height:24px;padding:0 6px;border-radius:var(--dsw-radius-sm);cursor:pointer} +.ompe-tbtn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)} +.ompe-body{display:grid;grid-template-columns:auto auto minmax(max-content,1fr);padding:2px 0 8px;font:var(--dsw-font-markdown-code-block);overflow-x:auto;max-height:480px;overflow-y:auto} +.ompe-body[data-wrap]{grid-template-columns:auto auto minmax(0,1fr)} +.ompe-ln{padding:0 8px 0 10px;text-align:right;color:var(--dsw-alias-label-tertiary);opacity:.7;user-select:none;font-variant-numeric:tabular-nums;white-space:pre} +.ompe-ln+.ompe-ln{padding-left:0} +.ompe-code{padding:0 16px 0 6px;white-space:pre;min-height:1lh} +.ompe-body[data-wrap] .ompe-code{white-space:pre-wrap;overflow-wrap:anywhere} +.ompe-code::before{display:inline-block;width:1.5ch;content:' '} +.ompe-r-add>.ompe-code::before{content:'+'} +.ompe-r-del>.ompe-code::before{content:'-'} +.ompe-r{display:contents} +.ompe-r-ctx>*{color:var(--dsw-alias-label-secondary)} +.ompe-r-add>*{background:var(--dsw-alias-code-diff-added)} +.ompe-r-add>.ompe-code{color:var(--dsw-alias-state-success-primary)} +.ompe-r-add>.ompe-ln:first-child{box-shadow:inset 3px 0 0 var(--dsw-alias-state-success-primary)} +.ompe-r-del>*{background:var(--dsw-alias-code-diff-deleted)} +.ompe-r-del>.ompe-code{color:var(--dsw-alias-state-error-primary)} +.ompe-r-del>.ompe-ln:first-child{box-shadow:inset 3px 0 0 var(--dsw-alias-state-error-primary)} +.ompe-r-path>*{color:var(--dsw-alias-label-secondary);font-weight:500;padding-top:6px} +.ompe-r-gap>*{color:var(--dsw-alias-label-tertiary)} +.ompe-text{margin:0;padding:8px 12px;font:var(--dsw-font-markdown-code-block);white-space:pre-wrap;color:var(--dsw-alias-label-secondary);max-height:320px;overflow:auto} `; let cssDone = false; const installCss = () => { @@ -33,26 +65,44 @@ window.__ModuleLoader__.load({ }; const Icon = P.IconEditOutlineRegular || (() => null); - const Chevron = P.IconChevronRightOutlineRegular || (() => null); function readDiffs(meta) { const d = meta && typeof meta === 'object' && Array.isArray(meta.diffs) ? meta.diffs : []; return d.filter((x) => x && typeof x.path === 'string' && typeof x.newText === 'string' && (x.oldText === null || typeof x.oldText === 'string')); } - function countLines(diffs) { - // Approximate +/- counts from hunk texts (context lines are shared by both sides). - let add = 0; let del = 0; - for (const d of diffs) { - const a = d.oldText === null ? [] : d.oldText.split('\n'); - const b = d.newText.split('\n'); - const common = new Set(a.filter((l) => b.includes(l))); - add += b.filter((l) => !common.has(l)).length; - del += a.filter((l) => !common.has(l)).length; - } - return { add, del }; + /** Hunk → numbered rows. Uses host-provided rows/starts; falls back to a naive old/new split. */ + function hunkRows(d) { + const rows = Array.isArray(d.rows) ? d.rows : [ + ...(d.oldText === null ? [] : d.oldText.split('\n').map((t) => ['-', t])), + ...d.newText.split('\n').map((t) => ['+', t]), + ]; + const numbered = Number.isInteger(d.oldStart) && Number.isInteger(d.newStart); + let o = d.oldStart; let n = d.newStart; + return rows.map(([op, text]) => { + const row = { kind: op === '+' ? 'add' : op === '-' ? 'del' : 'ctx', text, old: '', neu: '' }; + if (numbered) { + if (op !== '+') row.old = String(o++); + if (op !== '-') row.neu = String(n++); + } + return row; + }); } + function buildRows(diffs) { + const out = []; + let prev; + for (const d of diffs) { + if (d.path !== prev) out.push({ kind: 'path', text: d.path, old: '', neu: '' }); + else out.push({ kind: 'gap', text: '⋯', old: '', neu: '' }); + prev = d.path; + out.push(...hunkRows(d)); + } + return out; + } + + const totals = (rows) => rows.reduce((a, r) => ({ add: a.add + (r.kind === 'add'), del: a.del + (r.kind === 'del') }), { add: 0, del: 0 }); + function argsSummary(argsRaw) { try { const a = JSON.parse(argsRaw || '{}'); @@ -66,11 +116,28 @@ window.__ModuleLoader__.load({ return ''; } - const labels = (t) => ({ - codeLabel: t('code') || 'Code', wrapLabel: t('wrap') || 'Wrap', unwrapLabel: t('unwrap') || 'No wrap', - copy: t('copy') || 'Copy', copied: t('copied') || 'Copied', - collapseAria: 'Collapse', expandAria: (n) => `Show ${n} more lines`, collapse: t('collapse') || 'Collapse', expand: (n) => `Show ${n} more lines`, - }); + function copyText(rows) { + return rows.map((r) => (r.kind === 'add' ? `+ ${r.text}` : r.kind === 'del' ? `- ${r.text}` : r.kind === 'ctx' ? ` ${r.text}` : r.text)).join('\n'); + } + + function DiffCard({ rows, files, t }) { + const [wrap, setWrap] = React.useState(false); + const [copied, setCopied] = React.useState(false); + const onCopy = () => { + navigator.clipboard?.writeText(copyText(rows)).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1000); }).catch(() => {}); + }; + const tr = (k, fb) => (typeof t === 'function' && t(k)) || fb; + return h('div', { className: 'ompe-card', 'data-diff': '' }, + h('div', { className: 'ompe-tools' }, + h('span', { className: 'ompe-tools-path' }, files), + h('button', { type: 'button', className: 'ompe-tbtn', onClick: () => setWrap((v) => !v) }, wrap ? tr('code.unwrap', 'No wrap') : tr('code.wrap', 'Wrap')), + h('button', { type: 'button', className: 'ompe-tbtn', onClick: onCopy }, copied ? tr('copied', 'Copied') : tr('copy', 'Copy'))), + h('div', { className: 'ompe-body', 'data-wrap': wrap ? '' : undefined }, + rows.map((r, i) => h('div', { key: i, className: `ompe-r ompe-r-${r.kind}` }, + h('span', { className: 'ompe-ln' }, r.old), + h('span', { className: 'ompe-ln' }, r.neu), + h('span', { className: 'ompe-code' }, r.text))))); + } function EditRow(props) { const { block, t, phase } = props; @@ -78,25 +145,25 @@ window.__ModuleLoader__.load({ const [open, setOpen] = React.useState(true); const done = block && 'kind' in block; const diffs = done && !block.isError ? readDiffs(block.meta) : []; + const rows = React.useMemo(() => buildRows(diffs), [block?.meta]); const argsRaw = block?.call?.argsRaw ?? block?.argsRaw ?? ''; const files = diffs.length ? [...new Set(diffs.map((d) => d.path))].join(', ') : argsSummary(argsRaw); - const { add, del } = countLines(diffs); + const { add, del } = totals(rows); const text = done && Array.isArray(block.content) ? block.content.filter((c) => c.type === 'text').map((c) => c.text).join('\n') : ''; const running = !done || phase === 'preparing'; const title = (typeof t === 'function' && t('tool.title.edit')) || 'Edit'; return h('div', { className: 'ompe-row' }, h('button', { type: 'button', className: 'ompe-head', onClick: () => setOpen((v) => !v), 'aria-expanded': open }, - h('span', { style: { transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .12s', display: 'inline-flex' } }, h(Chevron, { size: 12 })), - h(Icon, { size: 14 }), + h('span', { className: 'ompe-icon' }, h(Icon, { size: 14 })), h('span', { className: 'ompe-title' }, running ? `${title}…` : title), files ? h('span', { className: 'ompe-sum' }, files) : null, diffs.length ? h('span', { className: 'ompe-add' }, `+${add}`) : null, diffs.length ? h('span', { className: 'ompe-del' }, `-${del}`) : null, done && block.isError ? h('span', { className: 'ompe-err' }, '✕') : null), - open && diffs.length && P.DiffBlock - ? h(P.DiffBlock, { diffs, labels: labels(typeof t === 'function' ? t : () => ''), maxLines: 24 }) + open && rows.length + ? h(DiffCard, { rows, files, t }) : open && done && text - ? h('pre', { className: `ompe-text${block.isError ? ' ompe-err' : ''}` }, text) + ? h('div', { className: 'ompe-card' }, h('pre', { className: `ompe-text${block.isError ? ' ompe-err' : ''}` }, text)) : null); } diff --git a/lib/diff.js b/lib/diff.js index 424adf0..0bb587d 100644 --- a/lib/diff.js +++ b/lib/diff.js @@ -1,4 +1,6 @@ // Hunk diffs for the DSH diff card ({path, oldText, newText} per hunk, 3 lines of context). +// Each hunk also carries `oldStart`/`newStart` (1-based file lines of its first row) and `rows` +// ([op, text] with op '=', '-', '+') so a client can draw a line-number gutter. import { lineMap } from './store.js' import { splitLines } from './text.js' @@ -7,16 +9,16 @@ export function hunkDiffs(path, before, after, context = 3) { const b = splitLines(after).lines const map = lineMap(a, b) // Walk both sides, emitting ops: '=' common, '-' removed, '+' added. - const ops = [] + const ops = [] // [op, text, oldLine|null, newLine|null] let i = 1; let j = 1 const pairs = [...map.entries()].sort((x, y) => x[0] - y[0]) for (const [ai, bj] of pairs) { - while (i < ai) ops.push(['-', a[i++ - 1]]) - while (j < bj) ops.push(['+', b[j++ - 1]]) - ops.push(['=', a[i - 1]]); i++; j++ + while (i < ai) { ops.push(['-', a[i - 1], i, null]); i++ } + while (j < bj) { ops.push(['+', b[j - 1], null, j]); j++ } + ops.push(['=', a[i - 1], i, j]); i++; j++ } - while (i <= a.length) ops.push(['-', a[i++ - 1]]) - while (j <= b.length) ops.push(['+', b[j++ - 1]]) + while (i <= a.length) { ops.push(['-', a[i - 1], i, null]); i++ } + while (j <= b.length) { ops.push(['+', b[j - 1], null, j]); j++ } const changed = ops.map((o, k) => (o[0] !== '=' ? k : -1)).filter((k) => k >= 0) if (!changed.length) return [] const spans = [] @@ -27,12 +29,17 @@ export function hunkDiffs(path, before, after, context = 3) { else spans.push([s, e]) } return spans.map(([s, e]) => { - const oldL = []; const newL = [] + const oldL = []; const newL = []; const rows = [] + let oldStart = null; let newStart = null for (let k = s; k <= e; k++) { - const [op, text] = ops[k] - if (op !== '+') oldL.push(text) - if (op !== '-') newL.push(text) + const [op, text, ol, nl] = ops[k] + if (op !== '+') { oldL.push(text); oldStart ??= ol } + if (op !== '-') { newL.push(text); newStart ??= nl } + rows.push([op, text]) } - return { path, oldText: oldL.length ? oldL.join('\n') : null, newText: newL.join('\n') } + // A pure insertion/deletion side has no line of its own: anchor it next to its neighbour. + oldStart ??= Math.max(1, (ops.slice(0, s).findLast((o) => o[2] !== null)?.[2] ?? 0) + 1) + newStart ??= Math.max(1, (ops.slice(0, s).findLast((o) => o[3] !== null)?.[3] ?? 0) + 1) + return { path, oldText: oldL.length ? oldL.join('\n') : null, newText: newL.join('\n'), oldStart, newStart, rows } }) } diff --git a/package.json b/package.json index 65fdd77..a8e5dab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@local/omp-edit", - "version": "1.1.0", + "version": "1.1.1", "description": "oh-my-pi style editing for DSH: replaces the edit tool with hashline patches (content-hash tagged line anchors, block ops, cut/paste registers, multi-file, stale-tag recovery), plus replace/sloppy/apply_patch modes; tags read and grep output.", "private": true, "type": "module", diff --git a/test/integration.test.mjs b/test/integration.test.mjs index 97b9f0a..fdce9a2 100644 --- a/test/integration.test.mjs +++ b/test/integration.test.mjs @@ -194,3 +194,16 @@ test('grep pages at pageLines with an offset cursor', async () => { assert.doesNotMatch(p2.text, /offset=/) h.cleanup() }) + +test('edit result diffs carry file line numbers and rows for the gutter', async () => { + const { h, agent } = await setup() + h.write('long.txt', Array.from({ length: 30 }, (_, i) => `line ${i + 1}`).join('\n') + '\n') + const tag = /#([0-9A-F]{4})\]/.exec((await h.call(agent, 'read', { file_path: 'long.txt' })).text)[1] + const e = await h.call(agent, 'edit', { input: `[long.txt#${tag}]\nPUT 20.=20:\n+LINE TWENTY\n+extra` }) + const [d] = e.meta.diffs + assert.equal(d.oldStart, 17) + assert.equal(d.newStart, 17) + assert.deepEqual(d.rows.slice(2, 6), [['=', 'line 19'], ['-', 'line 20'], ['+', 'LINE TWENTY'], ['+', 'extra']]) + assert.equal(typeof d.oldText, 'string') // stock DiffHunk fields stay intact + h.cleanup() +})