perf: optimize terminal buffer rendering for smoother tab switches

- Reduce buffer limits (terminal: 5MB→2MB, text: 2MB→1MB) to decrease
  render payload
- Add chunkedTerminalWrite() that writes in 64KB chunks via
  requestAnimationFrame to avoid UI jank
- Add tail mode to /api/sessions/:id/terminal endpoint (?tail=256KB)
  for faster initial load on tab switch
- Show truncation indicator when earlier output is cut
- Update CLAUDE.md with new buffer limits and performance notes

Fixes jittery behavior when switching tabs with large (2MB+) buffers.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-21 23:55:16 +01:00
co-authored by Claude Opus 4.5
parent 50150befef
commit 5bd1e9e536
4 changed files with 111 additions and 14 deletions
+15
View File
@@ -505,8 +505,11 @@ export class WebServer extends EventEmitter {
});
// Get session terminal buffer (for reconnecting)
// Query params:
// tail=<bytes> - Only return last N bytes (faster initial load)
this.app.get('/api/sessions/:id/terminal', async (req) => {
const { id } = req.params as { id: string };
const query = req.query as { tail?: string };
const session = this.sessions.get(id);
if (!session) {
@@ -534,9 +537,21 @@ export class WebServer extends EventEmitter {
.replace(/\x0c/g, '')
.replace(/^[\s\r\n]+/, '');
// Optionally truncate to last N bytes for faster initial load
const tailBytes = query.tail ? parseInt(query.tail, 10) : 0;
const fullSize = cleanBuffer.length;
let truncated = false;
if (tailBytes > 0 && cleanBuffer.length > tailBytes) {
cleanBuffer = cleanBuffer.slice(-tailBytes);
truncated = true;
}
return {
terminalBuffer: cleanBuffer,
status: session.status,
fullSize,
truncated,
};
});