Fix dashboard ID handling and output rendering performance

This commit is contained in:
Jared Miller 2026-01-28 12:26:17 -05:00
parent 48a01641c4
commit 5ff684824a
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C

View file

@ -301,6 +301,7 @@
cwd: data.cwd,
command: data.command,
output: '',
outputRenderedLength: 0,
expanded: false,
});
renderSessions();
@ -341,9 +342,11 @@
}
window.toggleSession = (sessionId) => {
const session = state.sessions.get(sessionId);
const session = state.sessions.get(Number(sessionId));
if (session) {
session.expanded = !session.expanded;
// Reset rendered length when collapsing or expanding (element gets recreated)
session.outputRenderedLength = 0;
renderSessions();
}
};
@ -356,7 +359,7 @@
$sessions.innerHTML = Array.from(state.sessions.values()).map(s => `
<div class="session ${s.expanded ? 'expanded' : ''}" data-session="${s.id}">
<div class="session-header" onclick="toggleSession(${s.id})">
<div class="session-header" onclick="toggleSession('${s.id}')">
<div class="session-info">
<div class="session-command">${escapeHtml(s.command || 'claude')}</div>
<div class="session-cwd">${escapeHtml(s.cwd || '~')}</div>
@ -376,7 +379,12 @@
const $output = document.getElementById(`output-${sessionId}`);
if ($output) {
$output.textContent = session.output;
// Append only new content since last render
const newChunk = session.output.slice(session.outputRenderedLength);
if (newChunk) {
$output.textContent += newChunk;
session.outputRenderedLength = session.output.length;
}
if (session.expanded) {
$output.parentElement.scrollTop = $output.parentElement.scrollHeight;
}
@ -393,14 +401,15 @@
<div class="prompt" data-prompt="${p.id}">
<div class="prompt-text">${escapeHtml(p.text)}</div>
<div class="prompt-actions">
<button class="btn btn-approve" onclick="respondToPrompt(${p.id}, 'approve')">Approve</button>
<button class="btn btn-reject" onclick="respondToPrompt(${p.id}, 'reject')">Reject</button>
<button class="btn btn-approve" onclick="respondToPrompt('${p.id}', 'approve')">Approve</button>
<button class="btn btn-reject" onclick="respondToPrompt('${p.id}', 'reject')">Reject</button>
</div>
</div>
`).join('');
}
window.respondToPrompt = async (promptId, action) => {
promptId = Number(promptId);
try {
const res = await fetch(`/api/prompts/${promptId}/${action}`, {
method: 'POST',