Preserve styled terminal scrollback

server/resize.test.mjs

@@ -16,6 +16,7 @@ import {
   traceHistoryLines,
 } from './src/history-store.js';
 import { mergeRepaintArchive, repaintArchiveView } from './src/runner.js';
+import { snapshotToRestoreAnsi, styledTerminalRows } from './src/snapshot.js';
 
 const HERE = path.dirname(fileURLToPath(import.meta.url));
 const DATA_DIR = fs.mkdtempSync(path.join(os.tmpdir(), 'am-resize-'));
@@ -175,13 +176,31 @@ try {
 
     const checkpoint = createTerminalHistoryCheckpoint({
       directory, id: 'current', delayMs: 1,
-      snapshot: () => ({ cols: 90, scrollbackLines: [{ text: 'clean' }] }),
+      snapshot: () => ({
+        cols: 90, scrollbackLines: [{ text: 'clean', ansi: '\x1b[38;5;2mclean\x1b[0m' }],
+      }),
       blocked: () => false,
     });
     checkpoint.flush();
     const wrote = await waitFor(() => loadTerminalHistory(directory, 'current')?.version
       === TERMINAL_HISTORY_VERSION);
     check('new checkpoints use the clean startup generation', wrote);
+    check('checkpoints retain validated scrollback styling',
+      loadTerminalHistory(directory, 'current')?.lines[0]?.ansi
+      === '\x1b[38;5;2mclean\x1b[0m');
+
+    const styled = styledTerminalRows({
+      cols: 20, rows: 1,
+      scrollbackLines: [{ row: 0, text: 'red history' }],
+      visibleLines: [{ row: 0, text: 'live' }],
+    }, '<div style="font-family: monospace; white-space: pre;"><div style="display: inline;color: var(--vt-palette-1);">red history</div>\nlive</div>');
+    const restore = snapshotToRestoreAnsi({
+      cols: 20, rows: 1, cursorRow: 0, cursorCol: 0, cells: [],
+      scrollbackLines: styled.slice(0, 1),
+    });
+    check('Ghostty HTML scrollback colors convert back to ANSI',
+      styled[0].ansi?.includes('\x1b[38;5;1m')
+      && restore.includes('\x1b[38;5;1mred history'));
   }
 
   {
@@ -356,11 +375,12 @@ try {
     const resumed = await waitFor(async () => (await gridText(id)).includes('[fixture 150x40]'));
     await sleep(250);
     const restartedText = Headless ? await restarted.screenText() : '';
+    const restartDuplicates = Headless ? duplicateTokens(restartedText) : 0;
     check('host restart restores deep scrollback', resumed
       && (!Headless || restartedText.includes('history-0001')));
     check('host restart does not duplicate repaint content', !Headless
-      || duplicateTokens(restartedText) === beforeBrowser,
-    Headless ? `${duplicateTokens(restartedText)} duplicate tokens` : '');
+      || restartDuplicates === beforeBrowser,
+    Headless ? `${restartDuplicates} duplicate tokens` : '');
     if (Headless) check('restored viewport remains scrollable', await restarted.scrollsBack());
     restarted.close();
     await stop(id);

server/src/history-store.js

@@ -5,16 +5,24 @@ const fileFor = (directory, id) => path.join(
   directory, `${String(id).replace(/[^a-zA-Z0-9._-]/g, '_')}.json`,
 );
 
-export const TERMINAL_HISTORY_VERSION = 6;
+export const TERMINAL_HISTORY_VERSION = 7;
+
+const validAnsi = (ansi, text) => typeof ansi === 'string'
+  && ansi.replace(/\x1b\[[0-9;]*m/g, '') === text;
 
 /** Load a plain-text Ghostty scrollback checkpoint, ignoring old/bad schemas. */
 export function loadTerminalHistory(directory, id) {
   try {
     const body = fs.readFileSync(fileFor(directory, id), 'utf8');
     const saved = JSON.parse(body);
-    if (![1, 2, 3, 4, 5, TERMINAL_HISTORY_VERSION].includes(saved?.version)
+    if (![1, 2, 3, 4, 5, 6, TERMINAL_HISTORY_VERSION].includes(saved?.version)
         || !Number.isFinite(saved.cols) || !Array.isArray(saved.lines)) return null;
-    const lines = saved.lines.filter((line) => typeof line === 'string').map((text) => ({ text }));
+    const lines = saved.lines.flatMap((line) => {
+      if (typeof line === 'string') return [{ text: line }];
+      if (!line || typeof line.text !== 'string') return [];
+      return [validAnsi(line.ansi, line.text)
+        ? { text: line.text, ansi: line.ansi } : { text: line.text }];
+    });
     return lines.length ? {
       version: saved.version, cols: Math.max(1, Math.round(saved.cols)), lines, body,
     } : null;
@@ -70,7 +78,10 @@ export function createTerminalHistoryCheckpoint({
     if (blocked()) { schedule(); return; }
     let snap;
     try { snap = snapshot(); } catch { return; }
-    const lines = (snap.scrollbackLines || []).map((line) => line.text || '');
+    const lines = (snap.scrollbackLines || []).map((line) => {
+      const text = line.text || '';
+      return validAnsi(line.ansi, text) ? { text, ansi: line.ansi } : text;
+    });
     pending = JSON.stringify({ version: TERMINAL_HISTORY_VERSION, cols: snap.cols, lines });
     writePending();
   };

server/src/runner.js

@@ -6,7 +6,9 @@ import { remoteState, setPaused } from './remote.js';
 import { cliById, isRemote, STATE_DIR, WORKSPACES_DIR } from './config.js';
 import { update, list } from './sessions.js';
 import { captureOpencodeSession, readTrace } from './traces.js';
-import { buildPaletteIndex, snapshotToRestoreAnsi, textColumns } from './snapshot.js';
+import {
+  buildPaletteIndex, snapshotToRestoreAnsi, styledSnapshotLines, textColumns,
+} from './snapshot.js';
 import {
   createTerminalHistoryCheckpoint, loadTerminalHistory, TERMINAL_HISTORY_VERSION,
   traceHistoryLines,
@@ -303,6 +305,39 @@ function terminalArchive(vt, snap) {
   return logicalText([...(snap.scrollbackLines || []), ...visibleRows(vt)], snap.cols);
 }
 
+const MAX_HISTORY_STYLES = 50_000;
+
+function learnHistoryStyles(host, vt, snap) {
+  if (!host.historyStyles || typeof vt.formatHtml !== 'function') return;
+  const visibleHasStyle = (snap.cells || []).some((cell) => cell.bold || cell.italic
+    || cell.underline || cell.foreground || cell.background);
+  if (!visibleHasStyle && host.historyStyles.size === 0) return;
+  let styled;
+  try { styled = styledSnapshotLines(snap, vt.formatHtml()); } catch { return; }
+  for (const line of [...styled.rows, ...styled.logical]) {
+    if (!line.text || !line.ansi) continue;
+    // Refresh insertion order so frequently repainted transcript rows survive
+    // the bounded cache while old one-off status lines age out.
+    host.historyStyles.delete(line.text);
+    host.historyStyles.set(line.text, line.ansi);
+  }
+  while (host.historyStyles.size > MAX_HISTORY_STYLES) {
+    host.historyStyles.delete(host.historyStyles.keys().next().value);
+  }
+}
+
+function withHistoryStyles(host, lines) {
+  return (lines || []).map((line) => {
+    const ansi = line.ansi || host.historyStyles?.get(line.text || '');
+    return ansi ? { ...line, ansi } : line;
+  });
+}
+
+function styledSnapshot(host, vt, snap) {
+  learnHistoryStyles(host, vt, snap);
+  return { ...snap, scrollbackLines: withHistoryStyles(host, snap.scrollbackLines) };
+}
+
 /**
  * Commit one captured agent repaint without duplicating its overflow rows.
  *
@@ -322,6 +357,7 @@ function finishCapturedGrid(host, txn) {
     try { snap = txn.vt.snapshot({ includeCells: true, includeScrollback: true }); } catch {}
     if (snap) {
       try {
+        learnHistoryStyles(host, txn.vt, snap);
         const visible = visibleRows(txn.vt);
         const visibleText = logicalText(visible, txn.cols);
         const view = repaintArchiveView(txn.archive, visibleText, txn.fallbackHistory);
@@ -331,7 +367,9 @@ function finishCapturedGrid(host, txn) {
           rows: txn.rows,
           scrollbackLimit: SCROLLBACK_BYTES,
         });
-        replacement.feed(snapshotToRestoreAnsi({ ...snap, scrollbackLines: view.history }));
+        replacement.feed(snapshotToRestoreAnsi({
+          ...snap, scrollbackLines: withHistoryStyles(host, view.history),
+        }));
       } catch (error) {
         console.error('[runner] resize capture commit', error && error.message);
         try { replacement?.dispose(); } catch {}
@@ -364,7 +402,7 @@ function finishCapturedGrid(host, txn) {
       // diverge after a narrow zoom, even when the server history is correct.
       notifyGrid(host, true);
       const committed = host.vt.snapshot({ includeCells: true, includeScrollback: true });
-      const ansi = snapshotToRestoreAnsi(committed);
+      const ansi = snapshotToRestoreAnsi(styledSnapshot(host, host.vt, committed));
       for (const sub of host.subs) sub.onData(ansi);
       try { previous.dispose(); } catch {}
       sampleScreen(host);
@@ -389,7 +427,10 @@ function armCapturedGrid(host, txn) {
 function startCapturedGrid(host, cols, rows, seed = null, resizePty = true) {
   const previous = host.resizeCapture;
   let archive = seed?.history
-    ? logicalText(seed.history, seed.historyCols || host.cols) : host.repaintArchive;
+    ? (seed.logical
+      ? `${seed.history.map((line) => line.text || '').join('\n')}\n`
+      : logicalText(seed.history, seed.historyCols || host.cols))
+    : host.repaintArchive;
   let fallbackHistory = seed?.history ? archive : null;
   if (previous) {
     archive = previous.archive;
@@ -494,6 +535,7 @@ function armTraceHydration(host) {
     const currentText = visible.map((line) => line.text || '').join('\n');
     const recovered = traceHistoryLines(host.traceHistoryPage, currentText);
     host.traceHistoryPage = null;
+    learnHistoryStyles(host, host.vt, snap);
 
     let replacement = null;
     try {
@@ -508,14 +550,14 @@ function armTraceHydration(host) {
       });
       replacement.feed(snapshotToRestoreAnsi({
         ...snap,
-        scrollbackLines: view.history,
+        scrollbackLines: withHistoryStyles(host, view.history),
       }));
       const previous = host.vt;
       host.vt = replacement;
       host.repaintArchive = view.archive;
       notifyGrid(host, true);
       const committed = host.vt.snapshot({ includeCells: true, includeScrollback: true });
-      const ansi = snapshotToRestoreAnsi(committed);
+      const ansi = snapshotToRestoreAnsi(styledSnapshot(host, host.vt, committed));
       for (const sub of host.subs) sub.onData(ansi);
       try { previous.dispose(); } catch {}
       sampleScreen(host);
@@ -1058,6 +1100,8 @@ export function ensureRunning(session, cols = 120, rows = 34) {
     captureResize,
     resizeCapture: null,
     repaintArchive: null,
+    historyStyles: new Map((persistedHistory?.lines || [])
+      .filter((line) => line.text && line.ansi).map((line) => [line.text, line.ansi])),
     startupHistory: captureResize ? persistedHistory : null,
     historyCheckpoint: null,
     traceHistoryPage: null,
@@ -1076,9 +1120,15 @@ export function ensureRunning(session, cols = 120, rows = 34) {
     delayMs: HISTORY_SAVE_MS,
     snapshot: () => {
       const snap = host.vt.snapshot({ includeScrollback: true });
-      if (!captureResize) return snap;
+      learnHistoryStyles(host, host.vt, snap);
+      if (!captureResize) {
+        return { ...snap, scrollbackLines: withHistoryStyles(host, snap.scrollbackLines) };
+      }
       const archive = host.repaintArchive ?? terminalArchive(host.vt, snap);
-      return { cols: host.cols, scrollbackLines: logicalHistory(archive) };
+      return {
+        cols: host.cols,
+        scrollbackLines: withHistoryStyles(host, logicalHistory(archive)),
+      };
     },
     blocked: () => !!host.resizeCapture,
     persistedBody: persistedHistory?.body || null,
@@ -1098,6 +1148,7 @@ export function ensureRunning(session, cols = 120, rows = 34) {
       startCapturedGrid(host, host.cols, host.rows, {
         history: startup.lines,
         historyCols: startup.cols,
+        logical: true,
       }, false);
       txn = host.resizeCapture;
     }
@@ -1207,7 +1258,7 @@ export function attach(session, cols, rows) {
       let snap;
       try { snap = host.vt.snapshot({ includeCells: true, includeScrollback: true }); } catch { return null; }
       return {
-        ansi: snapshotToRestoreAnsi(snap),
+        ansi: snapshotToRestoreAnsi(styledSnapshot(host, host.vt, snap)),
         cols: snap.cols,
         rows: snap.rows,
         viewers: host.subs.size,

server/src/snapshot.js

@@ -162,6 +162,96 @@ export function textColumns(text) {
   return width;
 }
 
+function htmlEntities(text) {
+  return text
+    .replace(/&#x([0-9a-f]+);/gi, (_, value) => String.fromCodePoint(Number.parseInt(value, 16)))
+    .replace(/&#(\d+);/g, (_, value) => String.fromCodePoint(Number.parseInt(value, 10)))
+    .replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"').replace(/&#39;|&apos;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+
+function cssColor(style, property, layer) {
+  const escaped = property.replace('-', '\\-');
+  const palette = style.match(new RegExp(`(?:^|;)${escaped}: var\\(--vt-palette-(\\d+)\\)`));
+  if (palette) return `${layer};5;${palette[1]}`;
+  const rgb = style.match(new RegExp(`(?:^|;)${escaped}: rgb\\((\\d+), (\\d+), (\\d+)\\)`));
+  return rgb ? `${layer};2;${rgb[1]};${rgb[2]};${rgb[3]}` : '';
+}
+
+function htmlStyleSgr(style) {
+  const codes = [];
+  const foreground = cssColor(style, 'color', 38);
+  const background = cssColor(style, 'background-color', 48);
+  if (foreground) codes.push(foreground);
+  if (background) codes.push(background);
+  if (style.includes('font-weight: bold')) codes.push('1');
+  if (style.includes('opacity: 0.5')) codes.push('2');
+  if (style.includes('font-style: italic')) codes.push('3');
+  if (/text-decoration-line:[^;]*underline/.test(style)) codes.push('4');
+  if (/text-decoration-line:[^;]*blink/.test(style)) codes.push('5');
+  if (style.includes('filter: invert(100%)')) codes.push('7');
+  if (/text-decoration-line:[^;]*line-through/.test(style)) codes.push('9');
+  if (/text-decoration-line:[^;]*overline/.test(style)) codes.push('53');
+  return codes.length ? `\x1b[${codes.join(';')}m` : '';
+}
+
+const hasAnsiStyle = (text) => text.replace(/\x1b\[0m/g, '').includes('\x1b[');
+
+/** Convert Ghostty's deterministic debug HTML into one ANSI string per visual row. */
+function htmlAnsiRows(html) {
+  if (typeof html !== 'string') return [];
+  const first = html.indexOf('>');
+  const last = html.lastIndexOf('</div>');
+  if (first < 0 || last <= first) return [];
+  const inner = html.slice(first + 1, last);
+  const ansi = inner
+    .replace(/<div style="([^"]*)">/g, (_, style) => htmlStyleSgr(style))
+    .replace(/<\/div>/g, '\x1b[0m');
+  return htmlEntities(ansi).split('\n');
+}
+
+/** Styled visual rows for the complete primary grid, including scrollback. */
+export function styledTerminalRows(snap, html) {
+  const plain = [...(snap.scrollbackLines || []), ...(snap.visibleLines || [])];
+  const ansi = htmlAnsiRows(html);
+  while (ansi.length < plain.length && !(plain[ansi.length]?.text || '')) ansi.push('');
+  if (ansi.length !== plain.length) return plain.map((line) => ({ text: line.text || '' }));
+  return plain.map((line, index) => {
+    const text = line.text || '';
+    const rendered = ansi[index] || '';
+    return hasAnsiStyle(rendered) ? { text, ansi: `${rendered}\x1b[0m` } : { text };
+  });
+}
+
+function joinStyledRows(rows, cols) {
+  const lines = [];
+  let text = '';
+  let ansi = '';
+  for (const row of rows) {
+    text += row.text || '';
+    ansi += row.ansi || row.text || '';
+    if (textColumns(row.text || '') < cols) {
+      lines.push(hasAnsiStyle(ansi) ? { text, ansi: `${ansi}\x1b[0m` } : { text });
+      text = '';
+      ansi = '';
+    }
+  }
+  if (text || ansi) lines.push(hasAnsiStyle(ansi) ? { text, ansi: `${ansi}\x1b[0m` } : { text });
+  return lines;
+}
+
+/** Styled logical lines, joining visual rows that were soft-wrapped. */
+export function styledLogicalLines(snap, html) {
+  return joinStyledRows(styledTerminalRows(snap, html), snap.cols);
+}
+
+/** Parse Ghostty's formatted state once when both visual and logical keys are needed. */
+export function styledSnapshotLines(snap, html) {
+  const rows = styledTerminalRows(snap, html);
+  return { rows, logical: joinStyledRows(rows, snap.cols) };
+}
+
 /**
  * Rebuild a fresh viewer from Ghostty's canonical state.
  *
@@ -176,12 +266,14 @@ export function textColumns(text) {
  * off before painting the authoritative current screen.
  */
 export function snapshotToRestoreAnsi(snap) {
-  const history = (snap.scrollbackLines || []).map((line) => line.text || '');
+  const history = (snap.scrollbackLines || []).map((line) => ({
+    text: line.text || '', ansi: typeof line.ansi === 'string' ? line.ansi : '',
+  }));
   let out = '\x1b[?1049l\x1b[?25l\x1b[0m\x1b[H\x1b[2J';
   if (history.length) {
-    out += history.join('\r\n');
+    out += history.map((line) => line.ansi || line.text).join('\r\n');
     const visualRows = history.reduce((total, line) =>
-      total + Math.max(1, Math.ceil(textColumns(line) / Math.max(1, snap.cols))), 0);
+      total + Math.max(1, Math.ceil(textColumns(line.text) / Math.max(1, snap.cols))), 0);
     out += `\x1b[${snap.rows};1H` + '\r\n'.repeat(Math.min(visualRows, snap.rows));
   }
   out += snapshotToAnsi(snap);