@lardexx/arenacode 2.11.6 → 2.11.8

package/README.md

@@ -118,7 +118,9 @@ How the copy is built and tested: [`docs/TUI.md`](docs/TUI.md).
 | `ctrl+v` | paste: a clipboard image becomes `images/clipboard-*.png` and is attached |
 | `!command` | run a command locally |
 | `↑` / `↓` | prompt history (or move through the slash list) |
-| `pgup` / `pgdn` | scroll the transcript |
+| `wheel` | scroll the transcript (three lines a notch) |
+| `pgup` / `pgdn` (or `ctrl+u` / `ctrl+j`) | scroll a page; `alt+↑` / `alt+↓` a line |
+| `home` / `end` | jump to the top / back to the bottom (when the prompt is empty) |
 | `ctrl+x` then | `q` quit · `n` new session · `l` switch session · `t` theme · `a` Ask and Proceed / Proceed · `d` tool output · `s` stop |
 | `ctrl+c` | interrupt, then quit |
 
@@ -293,6 +295,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`
@@ -300,9 +327,19 @@ Every timeline in the interface is a **session**: its own transcript, its own ta
 typed in it; `enter` switches to the selected session, `n` (or the `+ new session` row) starts a fresh one.
 `ctrl+x n` is the shortcut for a new session.
 
-Sessions live in memory for the run of the client, the way the terminal client always behaved: nothing is
-written to disk, and the transcript of a session that was never used stays empty. The bridge keeps the tasks
-themselves — `/queue` shows them with their state and id.
+**The history is on disk.** Every session — transcript, task id, mode, label and the file diffs — is saved to
+
+```
+~/.arenacode/sessions/<folder>-<hash>.json
+```
+
+one file per folder, so two projects never mix. The file is written a moment after each change and again on
+`/quit`, atomically (a temporary file, then a rename), and it is read back at the next start: the sessions you
+had are there, with the one you left open active. A file that cannot be parsed counts as "no history" and
+never stops the client, and it is capped: the last 20 sessions, 400 entries each, 80 diff rows per change, and
+a turn that was still running when the client closed comes back marked `closed`.
+
+The bridge keeps the tasks themselves — `/queue` shows them with their state and id.
 
 ### Shells
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lardexx/arenacode",
-  "version": "2.11.6",
+  "version": "2.11.8",
   "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');
 
@@ -23,6 +24,7 @@ const { attachRefs, attachImage, decorate, strings } = require('../attach');
 const { grabImage, readClipboardText, stamp } = require('../clipboard');
 const { decide, dangerText, approvalHelp, normaliseApproval } = require('../approval');
 const session = require('../session');
+const history = require('./history');
 
 const AGENT_PROMPT = (() => {
   try {
@@ -85,6 +87,7 @@ class App {
     this.sessionIndex = 0;
     this.sessionSeq = 0;
     this.newSession({ silent: true });
+    this.restoreSessions();
 
     this.term = new Term();
     this.parser = new KeyParser((key) => this.onKey(key));
@@ -181,6 +184,7 @@ class App {
     this.state.items.push(item);
     this.state.scroll = 0;
     this.invalidate();
+    this.scheduleSave();
     return item;
   }
 
@@ -275,6 +279,19 @@ class App {
       this.invalidate();
       return undefined;
     }
+    // the wheel scrolls the transcript (three lines a notch, like every terminal app)
+    if (key.name === 'wheel') {
+      if (key.dir === 'up') st.scroll += 3;
+      else st.scroll = Math.max(0, st.scroll - 3);
+      this.invalidate();
+      return undefined;
+    }
+    // home/end jump to the two ends when the prompt is empty (they move the cursor otherwise)
+    if ((key.name === 'home' || key.name === 'end') && !st.input) {
+      st.scroll = key.name === 'home' ? Number.MAX_SAFE_INTEGER : 0;
+      this.invalidate();
+      return undefined;
+    }
 
     return this.editInput(key);
   }
@@ -430,6 +447,52 @@ class App {
 
   // ---------------------------------------------------------------- sessions
 
+  /** Brings back the sessions of this folder from ~/.arenacode/sessions (if any). */
+  restoreSessions() {
+    let saved = null;
+    try {
+      saved = history.load(this.folder);
+    } catch {
+      saved = null;
+    }
+    if (!saved) return false;
+    this.sessions = saved.sessions.map((slot) => ({
+      ...slot,
+      seqItems: new Map(),
+      since: 0,
+    }));
+    this.sessionSeq = this.sessions.reduce((max, slot) => Math.max(max, slot.id || 0), this.sessions.length);
+    this.sessionIndex = saved.active;
+    this.applySession();
+    this.historyFile = history.fileFor(this.folder);
+    // a transient note, not a transcript line: the transcript must be exactly what was saved
+    this.toast(`history: ${this.sessions.length} session(s) restored`);
+    return true;
+  }
+
+  /** Writes the sessions now (called on quit and from the debounced saver). */
+  persistSessions() {
+    this.saveSession();
+    this.historyFile = history.fileFor(this.folder);
+    const res = history.save(this.folder, { sessions: this.sessions, active: this.sessionIndex });
+    if (!res.ok) this.historyError = res.error;
+    return res;
+  }
+
+  /** Saves at most a few times a second: a turn pushes items in bursts. */
+  scheduleSave() {
+    if (this._saveTimer) return;
+    this._saveTimer = setTimeout(() => {
+      this._saveTimer = null;
+      try {
+        this.persistSessions();
+      } catch {
+        /* a read-only HOME must not stop the client */
+      }
+    }, 600);
+    if (typeof this._saveTimer.unref === 'function') this._saveTimer.unref();
+  }
+
   /** Copies the live timeline into the active session slot. */
   saveSession() {
     const st = this.state;
@@ -477,6 +540,7 @@ class App {
     this.sessionIndex = this.sessions.length - 1;
     this.applySession();
     if (!silent) this.toast(`session ${this.sessionSeq} · new`);
+    this.scheduleSave();
   }
 
   activateSession(index) {
@@ -490,6 +554,7 @@ class App {
     this.applySession();
     const slot = this.sessions[index];
     this.toast(`session ${slot.id}${slot.label ? ` · ${slot.label}` : ''}`);
+    this.scheduleSave();
   }
 
   async openSessions() {
@@ -1045,6 +1110,7 @@ class App {
         if (ev.label) this.push({ kind: 'status', label: ev.label });
     }
     this.invalidate();
+    this.scheduleSave();
   }
 
   // ---------------------------------------------------------------- local cards
@@ -1165,12 +1231,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;
@@ -1450,7 +1546,14 @@ class App {
     const st = this.state;
     const prompt = this.promptBlock(W);
     const taskTag = st.taskId ? `${st.taskId.slice(-6)} · ` : '';
-    const footer = W2.footerLine(t, { width: W, left: this.shortFolder(), right: `${taskTag}v${VERSION}` });
+    // built lazily: the session branch clamps `scroll` while slicing the transcript, and the
+    // footer must show the value the reader sees, not the one from before the clamp
+    const footerFor = () =>
+      W2.footerLine(t, {
+        width: W,
+        left: this.shortFolder(),
+        right: `${taskTag}v${VERSION}${st.scroll > 0 ? ` · ↑${st.scroll}` : ''}`,
+      });
 
     let frame = [];
     let cursor = null;
@@ -1469,7 +1572,7 @@ class App {
       frame.push(this.tipLine(W));
       while (frame.length < H - 2) frame.push('');
       frame.push('');
-      frame.push(footer);
+      frame.push(footerFor());
       if (prompt.cursor) cursor = { row: promptStart + prompt.cursor.row, col: prompt.cursor.col };
     } else {
       const chat = W2
@@ -1493,7 +1596,7 @@ class App {
       const promptStart = frame.length;
       frame.push(...prompt.lines);
       frame.push('');
-      frame.push(footer);
+      frame.push(footerFor());
       this._promptTop = promptStart;
       if (prompt.cursor) cursor = { row: promptStart + prompt.cursor.row, col: prompt.cursor.col };
     }
@@ -1694,6 +1797,15 @@ class App {
 
   quit() {
     this.running = false;
+    if (this._saveTimer) {
+      clearTimeout(this._saveTimer);
+      this._saveTimer = null;
+    }
+    try {
+      this.persistSessions();
+    } catch {
+      /* nothing to do on the way out */
+    }
     this.term.exit();
     process.exit(0);
   }

package/src/tui/history.js

@@ -0,0 +1,144 @@
+'use strict';
+
+// The chat history of every session, on disk.
+//
+// One file per folder, so two projects never mix and the file name says which is which:
+//
+//   ~/.arenacode/sessions/<folder>-<hash>.json
+//
+// The shape is small on purpose — sessions with their transcript, the active index and a
+// version — because this file is read at every start of the client.
+
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+const crypto = require('node:crypto');
+
+const VERSION = 1;
+const MAX_SESSIONS = 20; // older sessions are dropped, newest kept
+const MAX_ITEMS = 400; // per session
+const MAX_TEXT = 8000; // characters per text/detail field
+const MAX_DIFF_ROWS = 80; // rows stored for a change card
+
+function dir() {
+  return path.join(os.homedir(), '.arenacode', 'sessions');
+}
+
+function fileFor(folder) {
+  const abs = path.resolve(folder || '.');
+  const hash = crypto.createHash('sha1').update(abs).digest('hex').slice(0, 10);
+  const base = path.basename(abs).replace(/[^A-Za-z0-9._-]+/g, '-').slice(0, 40) || 'root';
+  return path.join(dir(), `${base}-${hash}.json`);
+}
+
+function clip(value, max = MAX_TEXT) {
+  const text = String(value ?? '');
+  return text.length > max ? `${text.slice(0, max)}…` : text;
+}
+
+/** Only what can be written as JSON and read back: no functions, no cycles, no giant blobs. */
+function cleanItem(item) {
+  if (!item || typeof item !== 'object') return null;
+  const out = {};
+  for (const key of ['kind', 'text', 'label', 'detail', 'state', 'icon', 'meta', 'command', 'secs', 'seq', 'color']) {
+    if (item[key] === undefined || item[key] === null) continue;
+    out[key] = typeof item[key] === 'number' ? item[key] : clip(item[key]);
+  }
+  if (item.files && Array.isArray(item.files)) out.files = item.files.slice(0, 20).map((f) => clip(f, 300));
+  if (item.shell) out.shell = true;
+  if (item.diff && Array.isArray(item.diff.rows)) {
+    out.diff = {
+      file: clip(item.diff.file || '', 300),
+      additions: Number(item.diff.additions) || 0,
+      deletions: Number(item.diff.deletions) || 0,
+      rows: item.diff.rows.slice(0, MAX_DIFF_ROWS).map((row) => ({
+        type: row.type,
+        oldNo: row.oldNo === null || row.oldNo === undefined ? null : Number(row.oldNo),
+        newNo: row.newNo === null || row.newNo === undefined ? null : Number(row.newNo),
+        text: clip(row.text, 400),
+      })),
+    };
+  }
+  return out;
+}
+
+function cleanSession(slot, index) {
+  if (!slot || typeof slot !== 'object') return null;
+  const items = (Array.isArray(slot.items) ? slot.items : [])
+    .slice(-MAX_ITEMS)
+    .map(cleanItem)
+    .filter(Boolean)
+    // a turn that was running when the client closed is not running any more
+    .map((item) => (item.state === 'running' ? { ...item, state: 'done', meta: item.meta || 'closed' } : item));
+  return {
+    id: Number(slot.id) || index + 1,
+    label: clip(slot.label || '', 120),
+    taskId: slot.taskId ? String(slot.taskId) : null,
+    mode: slot.mode || 'agent',
+    startedAt: Number(slot.startedAt) || Date.now(),
+    items,
+  };
+}
+
+function payload(folder, { sessions, active }) {
+  const clean = (Array.isArray(sessions) ? sessions : [])
+    .slice(-MAX_SESSIONS)
+    .map(cleanSession)
+    .filter(Boolean);
+  const wanted = Number(active);
+  return {
+    version: VERSION,
+    folder: path.resolve(folder || '.'),
+    savedAt: new Date().toISOString(),
+    active: Number.isFinite(wanted) ? Math.max(0, Math.min(clean.length - 1, wanted)) : 0,
+    sessions: clean,
+  };
+}
+
+/** Reads the saved sessions of a folder. Never throws: a broken file is "no history". */
+function load(folder) {
+  let raw;
+  try {
+    raw = fs.readFileSync(fileFor(folder), 'utf8');
+  } catch {
+    return null;
+  }
+  let data;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!data || data.version !== VERSION || !Array.isArray(data.sessions) || !data.sessions.length) return null;
+  const sessions = data.sessions.map(cleanSession).filter(Boolean);
+  if (!sessions.length) return null;
+  const active = Number.isFinite(Number(data.active)) ? Math.max(0, Math.min(sessions.length - 1, Number(data.active))) : 0;
+  return { sessions, active, savedAt: data.savedAt || null };
+}
+
+/** Atomic write: a crash in the middle leaves the previous file intact. */
+function save(folder, state) {
+  const file = fileFor(folder);
+  const body = JSON.stringify(payload(folder, state || {}), null, 0);
+  try {
+    fs.mkdirSync(path.dirname(file), { recursive: true });
+    const tmp = `${file}.${process.pid}.tmp`;
+    fs.writeFileSync(tmp, body, 'utf8');
+    fs.renameSync(tmp, file);
+    return { ok: true, file, bytes: Buffer.byteLength(body) };
+  } catch (err) {
+    return { ok: false, error: err.message, file };
+  }
+}
+
+/** Removes the history of a folder (not wired to a command yet, used by the tests). */
+function clear(folder) {
+  try {
+    fs.unlinkSync(fileFor(folder));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+module.exports = { fileFor, load, save, clear, cleanItem, VERSION, MAX_SESSIONS, MAX_ITEMS };

package/src/tui/keys.js

@@ -9,6 +9,10 @@
  * A lone ESC is only reported after a short timeout, so escape sequences
  * (arrows, function keys) are not mistaken for the Esc key.
  */
+// SGR mouse: ESC [ < button ; x ; y M (press) or m (release). The wheel is button 64/65.
+const MOUSE_RE = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/;
+const WHEEL_STEP = { 64: 'up', 65: 'down' };
+
 const CSI_KEYS = {
   A: 'up',
   B: 'down',
@@ -82,6 +86,11 @@ class KeyParser {
       if (i >= b.length) return null;
       return b.slice(0, i + 1);
     }
+    if (b[1] === 'M') {
+      // X10 mouse: ESC [ M + 3 bytes (button, x+32, y+32)
+      if (b.length < 6) return null;
+      return b.slice(0, 6);
+    }
     if (b[1] === 'O') {
       if (b.length < 3) return null;
       return b.slice(0, 3);
@@ -106,7 +115,25 @@ class KeyParser {
       return mk(seq);
     }
 
+    if (seq[0] === '\x1b' && seq[1] === 'M' && seq.length === 6) {
+      const button = seq.charCodeAt(3) - 32;
+      const x = seq.charCodeAt(4) - 32;
+      const y = seq.charCodeAt(5) - 32;
+      const wheel = WHEEL_STEP[button & 0x43] || WHEEL_STEP[button];
+      if (wheel) return mk('wheel', { dir: wheel, x, y });
+      return mk('mouse', { button: button & 3, x, y, release: (button & 3) === 3 });
+    }
+
     if (seq[0] === '\x1b' && seq[1] === '[') {
+      const mouse = MOUSE_RE.exec(seq);
+      if (mouse) {
+        const code = Number(mouse[1]);
+        // bit 6 (64) marks the wheel; bit 5 (32) marks motion, which we ignore
+        const wheel = WHEEL_STEP[code & 0x43] || WHEEL_STEP[code];
+        if (wheel) return mk('wheel', { dir: wheel, x: Number(mouse[2]), y: Number(mouse[3]) });
+        if (code & 32) return null;
+        return mk('mouse', { button: code & 3, x: Number(mouse[2]), y: Number(mouse[3]), release: mouse[4] === 'm' });
+      }
       const body = seq.slice(2, -1);
       const final = seq[seq.length - 1];
       if (final === '~') {

package/src/tui/term.js

@@ -9,6 +9,10 @@ const SHOW_CURSOR = '\x1b[?25h';
 const SYNC_ON = '\x1b[?2026h';
 const SYNC_OFF = '\x1b[?2026l';
 const CLEAR = '\x1b[2J\x1b[H';
+// Mouse reporting: buttons and the wheel (1000) with the SGR coordinates (1006).
+// Without it a terminal sends nothing when the user scrolls over the transcript.
+const MOUSE_ON = '\x1b[?1000h\x1b[?1006h';
+const MOUSE_OFF = '\x1b[?1006l\x1b[?1000l';
 
 /**
  * Thin wrapper over the tty: alternate screen, raw mode, resize events and
@@ -35,7 +39,7 @@ class Term {
     if (this.entered) return;
     this.entered = true;
     if (this.altScreen) stdout.write(ENTER_ALT);
-    stdout.write(CLEAR + HIDE_CURSOR);
+    stdout.write(CLEAR + HIDE_CURSOR + MOUSE_ON);
     if (stdin.isTTY) stdin.setRawMode(true);
     stdin.resume();
     stdin.setEncoding('utf8');
@@ -51,7 +55,7 @@ class Term {
     stdout.removeListener('resize', this._onResize);
     if (stdin.isTTY) stdin.setRawMode(false);
     stdin.pause();
-    stdout.write(SHOW_CURSOR + (this.altScreen ? EXIT_ALT : '\n'));
+    stdout.write(MOUSE_OFF + SHOW_CURSOR + (this.altScreen ? EXIT_ALT : '\n'));
   }
 
   on(event, fn) {

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,