@lardexx/arenacode 2.11.6 → 2.11.7

package/README.md

@@ -293,6 +293,31 @@ What happens when:
 the send-once-per-session rule and the git exclusion; the integration test checks that a real task creates the
 sheet and that the bridge receives it.
 
+### File changes
+
+A `write` or a `replace` is not just a line in the transcript: the card shows the **diff**, the way the desktop
+client's `<diff>` widget does. Header with the file and the `+n −m` counts, then the unified rows — old line
+number, new line number, the sign, the text — painted on the diff backgrounds of the active theme
+(`arenacode`, `tokyonight`, `catppuccin`, `gruvbox`, `nord`, colours taken from opencode's own theme assets).
+
+```
+┃  ← Modifico il file: src/app.js  +2 −1
+┃      @@ -1,4 +1,5 @@
+┃ 1  1  one
+┃ 2  2  two
+┃ 3  3  three
+┃ 4    -four
+┃    4 +FOUR
+┃    5 +4.5
+```
+
+- Hunks keep three lines of context; distant changes become separate hunks with a `⋯` between them.
+- A new file is all additions, a deleted one all deletions; text that did not change draws no card at all.
+- The diff is computed **locally for the display** and never travels to the bridge: the agent still receives the
+  same `{ ok, path, size }` it always received.
+- `ctrl+x d` hides the block (it toggles every card); at most 20 rows are drawn, then `… n more lines`, and a
+  binary file gets no diff.
+
 ### Sessions
 
 Every timeline in the interface is a **session**: its own transcript, its own task id, its own mode. `/sessions`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lardexx/arenacode",
-  "version": "2.11.6",
+  "version": "2.11.7",
   "description": "Terminal client for ArenaCode: talks to an arena-bridge, streams the Agent Mode timeline, and runs local commands, file operations and computer automation on your PC (windows-use.dll on Windows, Xlib/XTest on Linux, osascript on macOS). Node port of the ArenaCode desktop client.",
   "license": "MIT",
   "type": "commonjs",
@@ -20,7 +20,7 @@
     "vendor/"
   ],
   "scripts": {
-    "test": "node test/cli-surface.js && node test/sessions.js && node test/shell.js && node test/context.js && node test/integration.js && node test/parity.js && node test/automation.js && node test/native.js"
+    "test": "node test/cli-surface.js && node test/sessions.js && node test/diff.js && node test/shell.js && node test/context.js && node test/integration.js && node test/parity.js && node test/automation.js && node test/native.js"
   },
   "keywords": [
     "arenacode",

package/src/diff.js

@@ -0,0 +1,203 @@
+'use strict';
+
+// Line diff for the file cards, shaped like the `<diff>` widget the desktop client shows:
+// unified, with `@@` hunk headers, three lines of context and the two line numbers
+// (opencode's diffs go through the same idea: hunks + `+`/`-` rows + line numbers).
+//
+// The result is only for display: it never travels to the bridge with the tool output.
+
+// n*m guard: a 20 000 x 20 000 table is 400 M cells, not something to build in a terminal.
+const CELLS_MAX = 4_000_000;
+
+/** Lines of a text, ignoring a single trailing newline (a file "ends with \\n", not with a line). */
+function splitLines(text) {
+  const s = String(text ?? '');
+  if (!s) return [];
+  const lines = s.split('\n');
+  if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop();
+  return lines;
+}
+
+/**
+ * Longest common subsequence over two arrays of lines.
+ * Returns rows of { type: 'ctx'|'del'|'add', a, b } with 0-based indices.
+ */
+function lcsRows(a, b) {
+  const n = a.length;
+  const m = b.length;
+  const rows = [];
+
+  if (n === 0 && m === 0) return rows;
+  if (n === 0) return b.map((_, j) => ({ type: 'add', a: -1, b: j }));
+  if (m === 0) return a.map((_, i) => ({ type: 'del', a: i, b: -1 }));
+
+  if (n * m > CELLS_MAX) {
+    // too big for a table: honest linear answer, every old line goes, every new line comes
+    for (let i = 0; i < n; i += 1) rows.push({ type: 'del', a: i, b: -1 });
+    for (let j = 0; j < m; j += 1) rows.push({ type: 'add', a: -1, b: j });
+    return rows;
+  }
+
+  // lcs[i][j] = length of the LCS of a[i..] and b[j..]
+  const width = m + 1;
+  const lcs = new Uint32Array((n + 1) * width);
+  for (let i = n - 1; i >= 0; i -= 1) {
+    for (let j = m - 1; j >= 0; j -= 1) {
+      lcs[i * width + j] =
+        a[i] === b[j]
+          ? lcs[(i + 1) * width + j + 1] + 1
+          : Math.max(lcs[(i + 1) * width + j], lcs[i * width + j + 1]);
+    }
+  }
+
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      rows.push({ type: 'ctx', a: i, b: j });
+      i += 1;
+      j += 1;
+    } else if (lcs[(i + 1) * width + j] >= lcs[i * width + j + 1]) {
+      rows.push({ type: 'del', a: i, b: -1 });
+      i += 1;
+    } else {
+      rows.push({ type: 'add', a: -1, b: j });
+      j += 1;
+    }
+  }
+  while (i < n) {
+    rows.push({ type: 'del', a: i, b: -1 });
+    i += 1;
+  }
+  while (j < m) {
+    rows.push({ type: 'add', a: -1, b: j });
+    j += 1;
+  }
+  return rows;
+}
+
+/** Groups rows into hunks, keeping `context` unchanged lines around each change. */
+function hunks(rows, context) {
+  const keep = new Set();
+  rows.forEach((row, index) => {
+    if (row.type === 'ctx') return;
+    for (let k = Math.max(0, index - context); k <= Math.min(rows.length - 1, index + context); k += 1) {
+      keep.add(k);
+    }
+  });
+
+  const out = [];
+  let previous = -2;
+  rows.forEach((row, index) => {
+    if (!keep.has(index)) return;
+    if (index !== previous + 1 && previous !== -2) out.push({ type: 'gap' }); // between two distant hunks
+    out.push(row);
+    previous = index;
+  });
+  return out;
+}
+
+/**
+ * Unified diff of two texts.
+ * @returns {{additions:number, deletions:number, rows:Array, changed:boolean}}
+ *   rows: { type:'ctx'|'add'|'del'|'gap'|'hunk', oldNo:number|null, newNo:number|null, text:string }
+ */
+function lineDiff(before, after, { context = 3 } = {}) {
+  const a = splitLines(before);
+  const b = splitLines(after);
+  const raw = lcsRows(a, b);
+
+  let additions = 0;
+  let deletions = 0;
+  for (const row of raw) {
+    if (row.type === 'add') additions += 1;
+    else if (row.type === 'del') deletions += 1;
+  }
+
+  const rows = [];
+  for (const row of hunks(raw, Math.max(0, context))) {
+    if (row.type === 'gap') {
+      rows.push({ type: 'gap', oldNo: null, newNo: null, text: '…' });
+      continue;
+    }
+    if (row.type === 'ctx') {
+      rows.push({ type: 'ctx', oldNo: row.a + 1, newNo: row.b + 1, text: a[row.a] });
+    } else if (row.type === 'del') {
+      rows.push({ type: 'del', oldNo: row.a + 1, newNo: null, text: a[row.a] });
+    } else {
+      rows.push({ type: 'add', oldNo: null, newNo: row.b + 1, text: b[row.b] });
+    }
+  }
+
+  // `@@ -oldStart,oldCount +newStart,newCount @@` before each run of kept rows
+  const withHeaders = [];
+  for (let index = 0; index < rows.length; index += 1) {
+    const row = rows[index];
+    const startsHunk = row.type !== 'gap' && (index === 0 || rows[index - 1].type === 'gap' || rows[index - 1].type === 'hunk');
+    if (startsHunk) {
+      let oldStart = null;
+      let newStart = null;
+      let oldCount = 0;
+      let newCount = 0;
+      for (let k = index; k < rows.length && rows[k].type !== 'gap'; k += 1) {
+        const r = rows[k];
+        if (r.oldNo !== null) {
+          if (oldStart === null) oldStart = r.oldNo;
+          oldCount += 1;
+        }
+        if (r.newNo !== null) {
+          if (newStart === null) newStart = r.newNo;
+          newCount += 1;
+        }
+      }
+      withHeaders.push({
+        type: 'hunk',
+        oldNo: null,
+        newNo: null,
+        text: `@@ -${oldStart === null ? 0 : oldStart},${oldCount} +${newStart === null ? 0 : newStart},${newCount} @@`,
+      });
+    }
+    withHeaders.push(row);
+  }
+
+  return { additions, deletions, rows: withHeaders, changed: additions > 0 || deletions > 0 };
+}
+
+/** `+12 −3` for the card header. */
+function summary(diff) {
+  if (!diff) return '';
+  return `+${diff.additions} −${diff.deletions}`;
+}
+
+/**
+ * Renders rows as plain text lines (no colour) — used by the tests and by any
+ * non-TTY consumer that wants to show a change.
+ */
+function renderRows(rows, { width = 0, max = Infinity } = {}) {
+  const out = [];
+  const numbers = rows.some((r) => r.oldNo !== null || r.newNo !== null);
+  const oldWidth = numbers ? Math.max(3, ...rows.map((r) => String(r.oldNo ?? '').length)) : 0;
+  const newWidth = numbers ? Math.max(3, ...rows.map((r) => String(r.newNo ?? '').length)) : 0;
+  for (const row of rows.slice(0, max)) {
+    if (row.type === 'hunk') {
+      out.push(numbers ? `${' '.repeat(oldWidth)} ${' '.repeat(newWidth)}   ${row.text}` : row.text);
+      continue;
+    }
+    if (row.type === 'gap') {
+      out.push(' '.repeat(oldWidth + newWidth + 3) + '⋯');
+      continue;
+    }
+    const sign = row.type === 'add' ? '+' : row.type === 'del' ? '-' : ' ';
+    const oldNo = row.oldNo === null ? '' : String(row.oldNo);
+    const newNo = row.newNo === null ? '' : String(row.newNo);
+    let text = numbers
+      ? `${oldNo.padStart(oldWidth)} ${newNo.padStart(newWidth)} ${sign}${row.text}`
+      : `${sign}${row.text}`;
+    if (width > 0 && text.length > width) text = `${text.slice(0, Math.max(1, width - 1))}…`;
+    out.push(text);
+  }
+  if (rows.length > max) out.push(`… ${rows.length - max} more lines`);
+  return out;
+}
+
+module.exports = { splitLines, lineDiff, summary, renderRows };

package/src/tui/app.js

@@ -15,6 +15,7 @@ const { getTheme, themeNames } = require('./theme');
 const { Bridge } = require('../bridge');
 const { buildMeta, readProjectContext } = require('../meta');
 const { runShell, runFsOp, resolveInRoot, detectShell, availableShells, shellCommand } = require('../local');
+const { lineDiff } = require('../diff');
 const { readConfig, patchConfig, deviceId, resolveUrl, resolveKey, openFolder, configPath, VERSION } = require('../config');
 const { ensureContextFile, touchSession } = require('../context');
 
@@ -1165,12 +1166,42 @@ class App {
       }
       item.state = 'running';
       this.invalidate();
+
+      // A file change is worth seeing: read the old text now, the new one after the write,
+      // and put the diff on the card. It is display only — the bridge gets what it always got.
+      const trackDiff = (op === 'write' || op === 'replace') && !payload.append;
+      const target = trackDiff && payload.path ? resolveInRoot(this.folder, payload.path) : null;
+      const readText = (file) => {
+        try {
+          const text = fs.readFileSync(file, 'utf8');
+          return text.includes('\u0000') ? null : text; // a binary file has no diff
+        } catch {
+          return '';
+        }
+      };
+      const before = target ? readText(target) : null;
+
       let result;
       try {
         result = runFsOp(op, payload, this.folder);
       } catch (e) {
         result = { ok: false, error: e.message };
       }
+
+      if (target && result.ok && before !== null && (op === 'write' || op === 'replace')) {
+        const after = readText(target);
+        if (after !== null) {
+          const change = lineDiff(before ?? '', after);
+          if (change.changed) {
+            item.diff = {
+              file: payload.path || '',
+              additions: change.additions,
+              deletions: change.deletions,
+              rows: change.rows,
+            };
+          }
+        }
+      }
       await this.bridge.localResult(taskId, { rid: payload.rid, output: JSON.stringify(result), code: result.ok ? 0 : 1 });
       item.state = result.ok ? 'done' : 'failed';
       item.meta = result.ok ? (result.size ? `${result.size} B` : op) : result.error;

package/src/tui/theme.js

@@ -119,6 +119,17 @@ function makeTheme(name, c) {
     hex: c,
   };
 
+  // Diff palette: the literal values come from opencode's own theme assets where it has
+  // them; the rest is derived so every theme can draw the same widget.
+  t.diff = {
+    add: { fg: c.diffAdded, bg: c.diffAddedBg || mix(c.background, c.diffAdded, 0.22), noBg: c.diffAddedLineNumberBg || c.backgroundElement },
+    del: { fg: c.diffRemoved, bg: c.diffRemovedBg || mix(c.background, c.diffRemoved, 0.22), noBg: c.diffRemovedLineNumberBg || c.backgroundElement },
+    ctx: { fg: c.textMuted, bg: c.diffContextBg || c.backgroundElement, noBg: c.diffContextBg || c.backgroundElement },
+    number: c.diffLineNumber || c.textMuted,
+    signAdd: c.diffHighlightAdded || c.diffAdded,
+    signDel: c.diffHighlightRemoved || c.diffRemoved,
+  };
+
   /** foreground + background at once, used by the prompt box and dialogs */
   t.both = (color, on) => (s) => `${fgSeq(color)}${bgSeq(on)}${s}${RESET}`;
   /** selection row: primary background, background foreground (opencode's active item) */
@@ -148,6 +159,13 @@ const PALETTES = {
     borderSubtle: '#3c3c3c',
     diffAdded: '#4fd6be',
     diffRemoved: '#c53b53',
+    diffAddedBg: '#20303b',
+    diffRemovedBg: '#37222c',
+    diffLineNumber: '#8f8f8f',
+    diffHighlightAdded: '#b8db87',
+    diffHighlightRemoved: '#e26a75',
+    diffAddedLineNumberBg: '#1b2b34',
+    diffRemovedLineNumberBg: '#2d1f26',
   },
   tokyonight: {
     primary: '#82aaff',
@@ -167,6 +185,13 @@ const PALETTES = {
     borderSubtle: '#545c7e',
     diffAdded: '#4fd6be',
     diffRemoved: '#c53b53',
+    diffAddedBg: '#20303b',
+    diffRemovedBg: '#37222c',
+    diffLineNumber: '#8f909a',
+    diffHighlightAdded: '#b8db87',
+    diffHighlightRemoved: '#e26a75',
+    diffAddedLineNumberBg: '#1b2b34',
+    diffRemovedLineNumberBg: '#2d1f26',
   },
   catppuccin: {
     primary: '#89b4fa',
@@ -186,6 +211,10 @@ const PALETTES = {
     borderSubtle: '#585b70',
     diffAdded: '#a6e3a1',
     diffRemoved: '#f38ba8',
+    diffAddedBg: '#24312b',
+    diffRemovedBg: '#3c2a32',
+    diffAddedLineNumberBg: '#1e2a25',
+    diffRemovedLineNumberBg: '#32232a',
   },
   gruvbox: {
     primary: '#83a598',
@@ -205,6 +234,11 @@ const PALETTES = {
     borderSubtle: '#504945',
     diffAdded: '#98971a',
     diffRemoved: '#cc241d',
+    diffAddedBg: '#32302f',
+    diffRemovedBg: '#322929',
+    diffLineNumber: '#a8a29e',
+    diffAddedLineNumberBg: '#2a2827',
+    diffRemovedLineNumberBg: '#2a2222',
   },
   nord: {
     primary: '#88c0d0',
@@ -224,6 +258,11 @@ const PALETTES = {
     borderSubtle: '#434c5e',
     diffAdded: '#a3be8c',
     diffRemoved: '#bf616a',
+    diffAddedBg: '#3B4252',
+    diffRemovedBg: '#3B4252',
+    diffLineNumber: '#a9aeb6',
+    diffAddedLineNumberBg: '#3B4252',
+    diffRemovedLineNumberBg: '#3B4252',
   },
 };
 

package/src/tui/widgets.js

@@ -170,6 +170,55 @@ function toolIcon(name) {
  * Render the session timeline: user blocks with a left border, assistant parts
  * indented by three cells, tool rows, thinking rows and the closing `▣` line.
  */
+/**
+ * A change drawn like the desktop client's `<diff>`: a header with the file and the
+ * `+n −m` counts, then the unified rows — two line numbers, the sign, the text — each
+ * painted with its own background. Context rows stay quiet so the change reads at once.
+ */
+function diffLines(t, diff, { width = 80, max = 24 } = {}) {
+  const D = t.diff;
+  const rows = Array.isArray(diff && diff.rows) ? diff.rows : [];
+  if (!rows.length) return [];
+  const numbers = rows.some((r) => r.oldNo !== null || r.newNo !== null || r.type === 'hunk');
+  const oldW = rows.reduce((m, r) => Math.max(m, String(r.oldNo ?? '').length), 2);
+  const newW = rows.reduce((m, r) => Math.max(m, String(r.newNo ?? '').length), 2);
+  const gutter = numbers ? oldW + 1 + newW + 1 : 0; // "12  13 "
+  const textW = Math.max(8, width - gutter - 1);
+  const paint = (bg, fg, text, padTo) => {
+    const pad = Math.max(0, padTo - R.vlen(text));
+    return `${bgSeq(bg)}${fgSeq(fg)}${text}${spaces(pad)}${RESET}`;
+  };
+
+  const out = [];
+  for (const row of rows.slice(0, max)) {
+    if (row.type === 'gap') {
+      out.push(paint(D.ctx.noBg, D.number, spaces(gutter) + '⋯', width));
+      continue;
+    }
+    if (row.type === 'hunk') {
+      out.push(paint(D.ctx.noBg, D.number, spaces(gutter) + R.vclip(row.text, textW), width));
+      continue;
+    }
+    const kind = row.type === 'add' ? 'add' : row.type === 'del' ? 'del' : 'ctx';
+    const cell = kind === 'add' ? D.add : kind === 'del' ? D.del : D.ctx;
+    const sign = kind === 'add' ? '+' : kind === 'del' ? '-' : ' ';
+    const signColor = kind === 'add' ? D.signAdd : kind === 'del' ? D.signDel : D.ctx.fg;
+    const nums = numbers
+      ? `${String(row.oldNo ?? '').padStart(oldW)} ${String(row.newNo ?? '').padStart(newW)} `
+      : '';
+    const body = R.vclip(row.text ?? '', textW);
+    const head = `${nums}${sign}`;
+    // the numbers sit on the row background, only the sign is highlighted
+    const line =
+      `${bgSeq(cell.bg)}${fgSeq(D.number)}${nums}${fgSeq(signColor)}${sign}${fgSeq(cell.fg)}${body}`;
+    out.push(`${line}${spaces(Math.max(0, width - R.vlen(head + body)))}${RESET}`);
+  }
+  if (rows.length > max) {
+    out.push(paint(D.ctx.noBg, D.number, spaces(gutter) + `… ${rows.length - max} more lines`, width));
+  }
+  return out;
+}
+
 function chatLines(t, items, opts = {}) {
   const { width, frame = 0, agent = 'Build', model = '', details = true } = opts;
   const out = [];
@@ -234,7 +283,28 @@ function chatLines(t, items, opts = {}) {
         const label = item.label || 'step';
         const meta = item.meta ? ` (${item.meta})` : '';
         pushBlank();
-        if (item.detail && details) {
+        if (item.diff && details && item.diff.rows && item.diff.rows.length) {
+          const bg = bgSeq(t.c.backgroundPanel);
+          const bar = `${fgSeq(t.c.background)}┃${RESET}`;
+          const inner = width - 3;
+          out.push(bar + bgWrap(bg, '', width - 1));
+          const counts = `+${item.diff.additions} −${item.diff.deletions}`;
+          const name = item.diff.file && !String(label).includes(item.diff.file) ? `  ${item.diff.file}` : '';
+          const headText = R.vclip(`${R.strip(label)}${name}`, Math.max(8, inner - R.vlen(counts) - 6));
+          out.push(
+            bar +
+              bgWrap(
+                bg,
+                spaces(2) +
+                  `${fgSeq(color)}${icon}${RESET} ${fgSeq(t.c.text)}${headText}${RESET}` +
+                  `  ${t.diffAdded(`+${item.diff.additions}`)} ${t.diffRemoved(`−${item.diff.deletions}`)}`,
+                width - 1,
+              ),
+          );
+          for (const line of diffLines(t, item.diff, { width: inner, max: 20 })) {
+            out.push(bar + line + spaces(0));
+          }
+        } else if (item.detail && details) {
           // block tool: left border, panel background, command then output
           const bg = bgSeq(t.c.backgroundPanel);
           const bar = `${fgSeq(t.c.background)}┃${RESET}`;
@@ -372,6 +442,7 @@ function sessionScreen(t, opts) {
 module.exports = {
   promptBlock,
   chatLines,
+  diffLines,
   footerLine,
   tipLine,
   notifyLine,