From 5ff684824a2510563dddd4f5a98f961378f4711d Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Wed, 28 Jan 2026 12:26:17 -0500
Subject: [PATCH] Fix dashboard ID handling and output rendering performance

---
 public/index.html | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 05cbf6e..730fb78 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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',