shmup/clarc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix dashboard ID handling and output rendering performance

Browse source
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
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/index.html
View file

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