-
`;
@@ -73,11 +72,18 @@ const History = {
});
document.getElementById('transcript-back').addEventListener('click', () => {
- document.getElementById('transcript-view').style.display = 'none';
- document.getElementById('history-content').style.display = 'block';
+ this.closeTranscript();
+ window.history.back();
});
},
+ closeTranscript() {
+ const tv = document.getElementById('transcript-view');
+ const hc = document.getElementById('history-content');
+ if (tv) tv.style.display = 'none';
+ if (hc) hc.style.display = 'block';
+ },
+
async fetchSessions() {
try {
const resp = await fetch(`/api/history?limit=${this.pageSize}&offset=${this.currentOffset}`);
@@ -179,13 +185,26 @@ const History = {
}
},
- async showTranscript(sessionId, title) {
+ showTranscriptDirect(sessionId, title) {
+ // Open transcript without pushing browser state (used by popstate handler)
+ this._openTranscript(sessionId, title);
+ },
+
+ showTranscript(sessionId, title) {
+ this._openTranscript(sessionId, title);
+ window.history.pushState(
+ { view: 'history', transcript: true, sessionId, sessionTitle: title },
+ '', `#history/${sessionId}`
+ );
+ },
+
+ async _openTranscript(sessionId, title) {
document.getElementById('history-content').style.display = 'none';
document.getElementById('transcript-view').style.display = 'block';
document.getElementById('transcript-title').textContent = title || sessionId;
try {
- const resp = await fetch(`/api/sessions/${sessionId}/transcript`);
+ const resp = await fetch(`/api/sessions/${sessionId}/transcript?limit=1000`);
const data = await resp.json();
this.renderTranscript(data.transcripts);
} catch (e) {
@@ -202,20 +221,10 @@ const History = {
return;
}
- container.innerHTML = transcripts.map(t => {
- const role = t.role || 'unknown';
- const isCollapsible = role === 'tool_use' || role === 'tool_result';
- const time = t.timestamp ? this._formatTime(t.timestamp) : '';
-
- return `
-
-
${this._esc(role)}
-
${time}
-
-
${this._esc(t.content || '')}
-
- `;
- }).join('');
+ // Use the same rich renderer as the live transcript view
+ const planGroups = SessionViewer._detectPlanGroups(transcripts);
+ const agentGroups = SessionViewer._detectAgentGroups(transcripts);
+ container.innerHTML = SessionViewer._renderTranscriptWithGroups(transcripts, planGroups, agentGroups);
},
_formatDate(dateStr) {
diff --git a/public/js/terminal.js b/public/js/terminal.js
index 1e99178..36f24be 100644
--- a/public/js/terminal.js
+++ b/public/js/terminal.js
@@ -1,18 +1,15 @@
/**
- * Terminal / Session Viewer
+ * Session Viewer — Live Transcript Display
*
- * When a session was launched via the Command Center (tmux), shows an interactive terminal.
- * For all other sessions, shows a live transcript that auto-updates.
+ * Shows a live-updating transcript when clicking a session card.
+ * Uses incremental fetching (after_id) to append new messages
+ * without re-rendering the entire DOM.
*/
const SessionViewer = {
- ws: null,
- term: null,
- fitAddon: null,
currentSessionId: null,
_pollInterval: null,
- _lastTranscriptCount: 0,
- _mode: null, // 'terminal' or 'transcript'
+ _lastTranscriptId: 0,
open(sessionId, title) {
this.currentSessionId = sessionId;
@@ -23,92 +20,10 @@ const SessionViewer = {
overlay.style.display = 'flex';
this._cleanup();
-
- // Try terminal first, fall back to transcript
- this._tryTerminal(sessionId);
- },
-
- _tryTerminal(sessionId) {
- const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
- const url = `${proto}//${location.host}/ws/terminal/${sessionId}`;
-
- this.ws = new WebSocket(url);
- let gotError = false;
-
- this.ws.onmessage = (event) => {
- if (typeof event.data === 'string') {
- try {
- const msg = JSON.parse(event.data);
- if (msg.type === 'error') {
- gotError = true;
- this.ws.close();
- // Fall back to transcript view
- this._showTranscript(sessionId);
- return;
- }
- if (msg.type === 'pong') return;
- } catch {
- // Not JSON — real terminal data
- if (!this.term) this._initXterm();
- this.term.write(event.data);
- }
- } else if (event.data instanceof Blob) {
- if (!this.term) this._initXterm();
- event.data.arrayBuffer().then(buf => {
- this.term.write(new Uint8Array(buf));
- });
- }
- };
-
- this.ws.onopen = () => {
- // Wait for first message to determine mode
- };
-
- this.ws.onclose = () => {
- if (!gotError && this.term) {
- this.term.writeln('\x1b[2m--- Disconnected ---\x1b[0m');
- }
- };
-
- this.ws.onerror = () => {
- this._showTranscript(sessionId);
- };
- },
-
- _initXterm() {
- this._mode = 'terminal';
- const container = document.getElementById('terminal-container');
- container.innerHTML = '';
-
- this.term = new window.Terminal({
- cursorBlink: true,
- fontSize: 14,
- fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
- theme: {
- background: '#0f0f1a',
- foreground: '#e0e0e0',
- cursor: '#7c3aed',
- selectionBackground: 'rgba(124, 58, 237, 0.3)',
- },
- });
-
- this.fitAddon = new window.FitAddon.FitAddon();
- this.term.loadAddon(this.fitAddon);
- this.term.open(container);
- this.fitAddon.fit();
-
- this._resizeHandler = () => { if (this.fitAddon) this.fitAddon.fit(); };
- window.addEventListener('resize', this._resizeHandler);
-
- this.term.onData((data) => {
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
- this.ws.send(data);
- }
- });
+ this._showTranscript(sessionId);
},
async _showTranscript(sessionId) {
- this._mode = 'transcript';
const container = document.getElementById('terminal-container');
container.innerHTML = `
@@ -118,34 +33,47 @@ const SessionViewer = {
`;
this._lastTranscriptId = 0;
- await this._fetchTranscript(sessionId);
+ await this._fetchTranscript(sessionId, true);
// Poll for new transcript entries every 2 seconds
this._pollInterval = setInterval(() => {
- this._fetchTranscript(sessionId);
+ this._fetchTranscript(sessionId, false);
}, 2000);
},
- async _fetchTranscript(sessionId) {
+ async _fetchTranscript(sessionId, isInitial) {
try {
- const resp = await fetch(`/api/sessions/${sessionId}/transcript?limit=1000`);
+ const url = isInitial
+ ? `/api/sessions/${sessionId}/transcript?limit=1000`
+ : `/api/sessions/${sessionId}/transcript?after_id=${this._lastTranscriptId}&limit=200`;
+
+ const resp = await fetch(url);
const data = await resp.json();
const transcripts = data.transcripts || [];
- // Detect changes by comparing last entry's ID
- const lastId = transcripts.length > 0 ? transcripts[transcripts.length - 1].id : 0;
- if (lastId === this._lastTranscriptId) return;
+ if (transcripts.length === 0) return;
+
+ const lastId = transcripts[transcripts.length - 1].id;
this._lastTranscriptId = lastId;
const container = document.getElementById('transcript-live-messages');
if (!container) return;
- const planGroups = this._detectPlanGroups(transcripts);
- const agentGroups = this._detectAgentGroups(transcripts);
- container.innerHTML = this._renderTranscriptWithGroups(transcripts, planGroups, agentGroups);
-
- // Auto-scroll to bottom
- container.scrollTop = container.scrollHeight;
+ if (isInitial) {
+ // Full render for initial load (supports plan/agent grouping)
+ const planGroups = this._detectPlanGroups(transcripts);
+ const agentGroups = this._detectAgentGroups(transcripts);
+ container.innerHTML = this._renderTranscriptWithGroups(transcripts, planGroups, agentGroups);
+ container.scrollTop = container.scrollHeight;
+ } else {
+ // Incremental: append only new messages without touching existing DOM
+ const wasAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+ const html = transcripts.map(t => this._renderMessage(t)).join('');
+ container.insertAdjacentHTML('beforeend', html);
+ if (wasAtBottom) {
+ container.scrollTop = container.scrollHeight;
+ }
+ }
} catch (e) {
console.error('Failed to fetch transcript:', e);
}
@@ -159,18 +87,10 @@ const SessionViewer = {
},
_cleanup() {
- if (this.ws) { this.ws.close(); this.ws = null; }
- if (this.term) { this.term.dispose(); this.term = null; }
- if (this.fitAddon) { this.fitAddon = null; }
- if (this._resizeHandler) {
- window.removeEventListener('resize', this._resizeHandler);
- this._resizeHandler = null;
- }
if (this._pollInterval) {
clearInterval(this._pollInterval);
this._pollInterval = null;
}
- this._mode = null;
this._lastTranscriptId = 0;
const container = document.getElementById('terminal-container');
if (container) container.innerHTML = '';
@@ -220,7 +140,6 @@ const SessionViewer = {
const toolItems = toolBlocks.map(b => {
const content = b.lines.join('\n').trim();
const preview = this._toolPreview(b.name, content);
- const uid = Math.random().toString(36).slice(2, 8);
return `