feat(v0.4): session manager grid with live preview thumbnails

The flat session list didn't tell you what each session was doing. Rebuild
/manage.html as a full-page grid where each card renders a LIVE preview
thumbnail — a read-only xterm showing the session's actual current screen,
scaled down like a screenshot — so you can recognize each at a glance.

- RingBuffer.tail(maxBytes): newest scrollback on chunk boundaries (no ANSI/UTF-8
  split); GET /live-sessions/:id/preview returns {cols,rows,data} (no attach, so
  it doesn't inflate watcher counts or keep sessions alive)
- manage.ts: card grid; per card a scaled read-only Terminal renders CLEAR+tail,
  auto-refresh every 4s, click thumbnail/Open to join, Kill / bulk kill
- bundles xterm into manage.js (+manage.css linked in manage.html)
- ring-buffer tail tests

Verified: 3 sessions rendered as recognizable thumbnails (top / git log / ls),
colored, with status/age; click opens. 228 tests green, tsc clean.

src/server.ts

@@ -48,6 +48,10 @@ import { WS_OPEN } from './types.js'
 const DEFAULT_COLS = 80
 const DEFAULT_ROWS = 24
 
+// How many bytes of recent scrollback the manage-page preview renders (enough to
+// contain a full-screen TUI repaint, so the thumbnail shows the current screen).
+const PREVIEW_BYTES = 24 * 1024
+
 // H3: how long the server holds a PermissionRequest before falling back to
 // Claude's own interactive prompt (so it never hangs if nobody responds).
 const PERM_TIMEOUT_MS = 5 * 60_000
@@ -117,6 +121,22 @@ export function startServer(cfg: Config): { close(): Promise<void> } {
     res.json(manager.list())
   })
 
+  // Preview (v0.4 manage page) — the tail of a session's scrollback so the grid
+  // can render a live read-only thumbnail of its current screen. No client/attach.
+  app.get('/live-sessions/:id/preview', (req, res) => {
+    const session = manager.get(req.params.id)
+    if (session === undefined) {
+      res.status(404).end()
+      return
+    }
+    res.json({
+      id: session.meta.id,
+      cols: session.pty.cols,
+      rows: session.pty.rows,
+      data: session.buffer.tail(PREVIEW_BYTES),
+    })
+  })
+
   // Kill ALL sessions, or only detached ones (?detached=1) — manage page bulk action.
   app.delete('/live-sessions', (req, res) => {
     const onlyDetached = req.query['detached'] === '1'

src/session/ring-buffer.ts

@@ -61,5 +61,20 @@ export function createRingBuffer(maxBytes: number): RingBuffer {
     return SOFT_RESET + chunks.map((c) => c.text).join('');
   }
 
-  return { append, snapshot };
+  function tail(maxBytes: number): string {
+    if (maxBytes <= 0) return '';
+    // Collect whole chunks from the newest end until we have ~maxBytes — never
+    // split a chunk (so no ANSI/UTF-8 sequence is cut, same rationale as M2).
+    const picked: string[] = [];
+    let acc = 0;
+    for (let i = chunks.length - 1; i >= 0; i -= 1) {
+      const c = chunks[i]!;
+      picked.push(c.text);
+      acc += c.bytes;
+      if (acc >= maxBytes) break;
+    }
+    return picked.reverse().join('');
+  }
+
+  return { append, snapshot, tail };
 }

src/types.ts

@@ -113,6 +113,9 @@ export interface RingBuffer {
   append(chunk: string): void;
   /** full buffer for replay; prepend `\x1b[0m` soft-reset as a safety net (M2). */
   snapshot(): string;
+  /** last ~maxBytes of recent output, on whole-chunk boundaries (never splits an
+   *  ANSI/UTF-8 sequence), for a read-only session preview. No soft-reset prefix. */
+  tail(maxBytes: number): string;
 }
 
 // impl anchor [src/session/ring-buffer.ts]: