@lardexx/arenacode 2.11.5 → 2.11.7

package/README.md

@@ -110,6 +110,7 @@ How the copy is built and tested: [`docs/TUI.md`](docs/TUI.md).
 | `enter` | send · `shift+enter` newline |
 | `esc` | interrupt the turn · clear the input · quit |
 | `tab` | switch mode: Build → Plan → Computer |
+| `/sessions` (or `ctrl+x l`) | switch between sessions: every timeline is a slot, `n` opens a new one |
 | `ctrl+p` | command palette (`↑↓` select, `enter` run, `esc` close) |
 | `/` | slash commands with an inline list above the prompt |
 | `@file` | attach a file from the open folder (uploaded to `uploads/`) |
@@ -118,7 +119,7 @@ How the copy is built and tested: [`docs/TUI.md`](docs/TUI.md).
 | `!command` | run a command locally |
 | `↑` / `↓` | prompt history (or move through the slash list) |
 | `pgup` / `pgdn` | scroll the transcript |
-| `ctrl+x` then | `q` quit · `n` new session · `l` task queue · `t` theme · `a` Ask and Proceed / Proceed · `d` tool output · `s` stop |
+| `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 |
 
 **The same four flows as the desktop client.** The Windows app is the reference for how a task reaches the bridge,
@@ -220,8 +221,8 @@ Later, `/settings` (or the command palette, `ctrl+p`) reopens them inside the in
 | `arenacode --help` | the options below |
 | `arenacode --version` | the version of the installed package |
 
-Everything else — URL and API key, settings, the task queue, task state and timeline, files on the bridge,
-file uploads, Stop — is inside the interface. Up to 2.11.2 these were subcommands (`init`, `config`, `ping`,
+Everything else — URL and API key (`/settings`), sessions (`/sessions`), the task queue on the bridge
+(`/queue`), Stop, file uploads — is inside the interface. Up to 2.11.2 these were subcommands (`init`, `config`, `ping`,
 `doctor`, `ask`, `chat`, `ui`, `tasks`, `status`, `events`, `stop`, `files`, `cat`, `attach`, `handshake`);
 they were removed on request, and the terminal has to be interactive: in a pipe the client prints why and exits.
 
@@ -292,6 +293,42 @@ 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`
+(or `ctrl+x l`) opens the list — the current one is marked with `●` and its label is the first instruction you
+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.
+
 ### Shells
 
 Terminal cards run in a real shell, and which one is not fixed:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lardexx/arenacode",
-  "version": "2.11.5",
+  "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/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/cli.js

@@ -379,7 +379,6 @@ async function main(argv) {
   const { flags, positional } = parseArgs(argv);
   const command = positional[0];
 
-  // Only the flags: `arenacode help` and `arenacode version` are not subcommands either.
   if (flags.version) {
     write(VERSION);
     return 0;

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');
 
@@ -80,6 +81,12 @@ class App {
       lastError: null,
     };
 
+    // Sessions: every timeline is a slot the user can switch back to (`/sessions`).
+    this.sessions = [];
+    this.sessionIndex = 0;
+    this.sessionSeq = 0;
+    this.newSession({ silent: true });
+
     this.term = new Term();
     this.parser = new KeyParser((key) => this.onKey(key));
     this.localQueue = [];
@@ -279,16 +286,11 @@ class App {
       case 'q':
         return this.quit();
       case 'n':
-        st.items = [];
-        st.seqItems.clear();
-        st.taskId = null;
-        st.since = 0;
-        this.toast('new session');
-        return undefined;
+        return this.newSession();
       case 'h':
         return this.openHelp();
       case 'l':
-        return this.openTasks();
+        return this.openSessions();
       case 't': {
         const names = themeNames();
         const next = names[(names.indexOf(this.themeName) + 1) % names.length];
@@ -427,6 +429,76 @@ class App {
     return undefined;
   }
 
+  // ---------------------------------------------------------------- sessions
+
+  /** Copies the live timeline into the active session slot. */
+  saveSession() {
+    const st = this.state;
+    const slot = this.sessions[this.sessionIndex];
+    if (!slot) return;
+    slot.items = st.items;
+    slot.seqItems = st.seqItems;
+    slot.taskId = st.taskId;
+    slot.since = st.since;
+    slot.mode = st.mode;
+    if (!slot.label) {
+      const first = st.items.find((i) => i.kind === 'user' && i.text);
+      if (first) slot.label = String(first.text).replace(/@\S+/g, '').replace(/\s+/g, ' ').trim().slice(0, 48);
+    }
+  }
+
+  /** Loads a slot into the live state. */
+  applySession() {
+    const st = this.state;
+    const slot = this.sessions[this.sessionIndex];
+    st.items = slot ? slot.items : [];
+    st.seqItems = slot ? slot.seqItems : new Map();
+    st.taskId = slot ? slot.taskId : null;
+    st.since = slot ? slot.since : 0;
+    st.scroll = 0;
+    st.overlay = null;
+    st.approval = null;
+    st.status = 'idle';
+    this.invalidate();
+  }
+
+  newSession({ silent = false } = {}) {
+    this.saveSession();
+    this.sessionSeq += 1;
+    this.sessions.push({
+      id: this.sessionSeq,
+      label: '',
+      items: [],
+      seqItems: new Map(),
+      taskId: null,
+      since: 0,
+      mode: this.state.mode,
+      startedAt: Date.now(),
+    });
+    this.sessionIndex = this.sessions.length - 1;
+    this.applySession();
+    if (!silent) this.toast(`session ${this.sessionSeq} · new`);
+  }
+
+  activateSession(index) {
+    if (index < 0 || index >= this.sessions.length || index === this.sessionIndex) {
+      this.state.overlay = null;
+      this.invalidate();
+      return;
+    }
+    this.saveSession();
+    this.sessionIndex = index;
+    this.applySession();
+    const slot = this.sessions[index];
+    this.toast(`session ${slot.id}${slot.label ? ` · ${slot.label}` : ''}`);
+  }
+
+  async openSessions() {
+    this.saveSession();
+    this.state.overlay = { type: 'sessions', index: this.sessionIndex };
+    this.invalidate();
+  }
+
   // ---------------------------------------------------------------- overlays
   openPalette() {
     this.state.overlay = { type: 'palette', query: '', index: 0 };
@@ -439,7 +511,7 @@ class App {
   }
 
   async openTasks() {
-    this.state.overlay = { type: 'tasks', loading: true, tasks: [], index: 0 };
+    this.state.overlay = { type: 'queue', loading: true, tasks: [], index: 0 };
     this.invalidate();
     const res = await this.bridge.listTasks('all');
     if (res.status === 200) {
@@ -462,7 +534,8 @@ class App {
         this.state.since = 0;
         this.toast('new session');
       } },
-      { title: 'Task queue', hint: 'ctrl+x l', run: () => this.openTasks() },
+      { title: 'Sessions (switch between sessions)', hint: 'ctrl+x l', slash: '/sessions', run: () => this.openSessions() },
+      { title: 'Queue: tasks on the bridge', hint: '', slash: '/queue', run: () => this.openTasks() },
       { title: 'Toggle detail', hint: 'ctrl+x d', run: () => {
         this.state.details = !this.state.details;
         this.toast(`details ${this.state.details ? 'on' : 'off'}`);
@@ -485,13 +558,14 @@ class App {
         if (h) this.push({ kind: 'system', text: `bridge v${h.version} · ${h.executor_mode} · claimable ${h.tasks.claimable}` });
         else this.toast('bridge unreachable', 'error');
       } },
-      { title: 'Settings', slash: '/settings', hint: '', run: () => this.openSettings() },
+      { title: 'Settings: bridge URL and API key', slash: '/settings', hint: '', run: () => this.openSettings() },
       { title: 'Help', hint: 'f1', run: () => this.openHelp() },
       { title: 'Quit', hint: 'ctrl+x q', run: () => this.quit() },
-    // No slash invented from the title any more: it produced /switch-mode-build-plan-computer
-    // and a second /theme next to the one in slashCommands(). An entry gets a slash only if
-    // it declares one.
-    ].map((cmd) => ({ ...cmd, slash: cmd.slash || '', group: cmd.group || 'Commands' }));
+    ].map((cmd) => ({
+      ...cmd,
+      slash: cmd.slash || '/' + cmd.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+$/, ''),
+      group: 'Commands',
+    }));
   }
 
   /** `/help`, `/new`, `/tasks` … — opencode-style slash commands */
@@ -502,7 +576,9 @@ class App {
     };
     return [
       { slash: '/new', title: 'Start a new session', hint: 'ctrl+x n', group: 'Session', run: by('New session') },
-      { slash: '/tasks', title: 'Show the task queue', hint: 'ctrl+x l', group: 'Session', run: () => this.openTasks() },
+      { slash: '/sessions', title: 'Switch between sessions', hint: 'ctrl+x l', group: 'Session', run: () => this.openSessions() },
+      { slash: '/settings', title: 'Bridge URL and API key', hint: '', group: 'Session', run: () => this.openSettings() },
+      { slash: '/queue', title: 'Tasks on the bridge', hint: '', group: 'Session', run: () => this.openTasks() },
       { slash: '/mode', title: 'Switch agent / plan', hint: 'tab', group: 'Session', run: by('Switch mode') },
       { slash: '/ask', title: 'Ask and Proceed: ask before commands, files and plans', hint: '', group: 'Session', run: () => this.setApproval('ask') },
       { slash: '/proceed', title: 'Proceed: approve the plan and run everything without asking', hint: '', group: 'Session', run: () => this.setApproval('proceed') },
@@ -654,7 +730,23 @@ class App {
       return undefined;
     }
 
-    if (ov.type === 'tasks') {
+    if (ov.type === 'sessions') {
+      const rows = this.sessions.length + 1; // + "new session"
+      if (key.name === 'up') ov.index = Math.max(0, ov.index - 1);
+      else if (key.name === 'down') ov.index = Math.min(rows - 1, ov.index + 1);
+      else if (key.name === 'enter') {
+        if (ov.index >= this.sessions.length) this.newSession();
+        else this.activateSession(ov.index);
+        this.state.overlay = null;
+      } else if (key.name === 'n') {
+        this.state.overlay = null;
+        this.newSession();
+      }
+      this.invalidate();
+      return undefined;
+    }
+
+    if (ov.type === 'queue') {
       if (key.name === 'up') {
         ov.index = Math.max(0, ov.index - 1);
       } else if (key.name === 'down') {
@@ -699,6 +791,12 @@ class App {
     return undefined;
   }
 
+  /** A list dialog draws group rows too: the selection index must skip them. */
+  sessionRowIndex(index) {
+    const at = Math.max(0, Math.min(this.sessions.length, index));
+    return 1 + at + (at >= this.sessions.length ? 1 : 0);
+  }
+
   filteredCommands() {
     const ov = this.state.overlay;
     const all = this.commands();
@@ -818,6 +916,7 @@ class App {
     }
     st.taskId = res.json.task_id;
     session.remember(st.taskId, st.mode);
+    this.saveSession();
     st.since = 0;
     st.seqItems.clear();
   }
@@ -1067,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;
@@ -1445,16 +1574,11 @@ class App {
 
   slashList() {
     const q = this.state.input.slice(1).toLowerCase().split(' ')[0];
-    // slashCommands() first: it carries the opencode wording. The palette entries whose
-    // slash is already taken are dropped, so typing `/` never shows the same command twice
-    // (/settings, /theme, /help and /quit used to appear twice each).
-    const seen = new Set();
-    const all = [...this.slashCommands(), ...this.commands()].filter((c) => {
-      if (!c.slash || seen.has(c.slash)) return false;
-      seen.add(c.slash);
-      return true;
-    });
-    return all.filter((c) => !q || c.slash.replace('/', '').startsWith(q)).slice(0, 7);
+    // Only the curated list: merging commands() in brought the auto-generated names
+    // (/new-session, /bridge-status-ping …) next to the good ones and showed /settings twice.
+    return this.slashCommands()
+      .filter((c) => !q || c.slash.replace('/', '').startsWith(q))
+      .slice(0, 7);
   }
 
   overlaySlash(frame, W, H, list) {
@@ -1514,12 +1638,35 @@ class App {
         items.push({ label, hint: key, group: '' });
       }
       dialog = D.listDialog(t, { W, size: 'large', title: 'Help', filter: '', items, index: -1, footer: [['esc', 'close']] });
+    } else if (ov.type === 'sessions') {
+      const items = [{ group: 'Sessions' }];
+      this.sessions.forEach((slot, i) => {
+        const running = i === this.sessionIndex;
+        const label = slot.label || (slot.taskId ? `task ${slot.taskId}` : 'empty session');
+        const hint = `${slot.items.length ? `${slot.items.length} lines` : ''}${running ? ' · current' : ''}`.trim();
+        items.push({ label: `${running ? '●' : ' '} ${slot.id}  ${R.vclip(label, 44)}`, hint, grouped: true });
+      });
+      items.push({ group: '' });
+      items.push({ label: '+ new session', hint: 'n', grouped: true });
+      dialog = D.listDialog(t, {
+        W,
+        size: 'large',
+        title: 'Sessions',
+        filter: '',
+        items,
+        index: this.sessionRowIndex(ov.index),
+        footer: [
+          ['enter', 'switch'],
+          ['n', 'new'],
+          ['esc', 'close'],
+        ],
+      });
     } else {
       const items = [{ group: 'Queue' }];
       if (ov.loading) items.push({ label: 'loading…', dim: true });
       else if (!ov.tasks.length) items.push({ label: 'no tasks', dim: true });
       else for (const task of ov.tasks.slice(0, Math.max(4, H - 12))) items.push({ label: `${task.state}  ${R.vclip(task.id, 22)}  ${R.vclip(String(task.instruction).split('\n').slice(-1)[0], 40)}`, grouped: true });
-      dialog = D.listDialog(t, { W, size: 'large', title: 'Sessions', filter: '', items, index: -1, footer: [['esc', 'close']] });
+      dialog = D.listDialog(t, { W, size: 'large', title: 'Queue', filter: '', items, index: -1, footer: [['esc', 'close']] });
     }
 
     const y = D.dialogY(H, dialog.lines.length);
@@ -1596,7 +1743,9 @@ function HELP_ROWS() {
     ['Prompt', '!', 'run a command locally'],
     ['Prompt', 'up / down', 'history'],
     ['Session', 'ctrl+x n', 'new session'],
-    ['Session', 'ctrl+x l', 'task queue'],
+    ['Session', 'ctrl+x l', 'switch session'],
+    ['Session', '/sessions', 'switch between sessions'],
+    ['Session', '/queue', 'tasks on the bridge'],
     ['Session', 'ctrl+x a', 'Ask and Proceed / Proceed'],
     ['Session', 'ctrl+x t', 'switch theme'],
     ['Session', '/settings', 'bridge URL and API key'],

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,