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.
This commit is contained in:
Yaojia Wang
2026-06-19 11:37:32 +02:00
parent 199e29d15b
commit 787f806e02
7 changed files with 278 additions and 87 deletions

View File

@@ -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 };
}