@poncho-ai/cli 0.24.1 → 0.24.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @poncho-ai/cli@0.24.1 build /home/runner/work/poncho-ai/poncho-ai/packages/cli
+> @poncho-ai/cli@0.24.2 build /home/runner/work/poncho-ai/poncho-ai/packages/cli
 > tsup src/index.ts src/cli.ts --format esm --dts
 
 CLI Building entry: src/cli.ts, src/index.ts
@@ -9,10 +9,10 @@
 ESM Build start
 ESM dist/cli.js                          94.00 B
 ESM dist/index.js                        857.00 B
-ESM dist/run-interactive-ink-IEB4MZ2C.js 56.74 KB
-ESM dist/chunk-3ETNDULB.js               400.75 KB
-ESM ⚡️ Build success in 57ms
+ESM dist/run-interactive-ink-REIUGQ5X.js 56.74 KB
+ESM dist/chunk-UTZB2CS7.js               404.26 KB
+ESM ⚡️ Build success in 65ms
 DTS Build start
-DTS ⚡️ Build success in 3876ms
+DTS ⚡️ Build success in 3948ms
 DTS dist/cli.d.ts   20.00 B
 DTS dist/index.d.ts 3.59 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @poncho-ai/cli
 
+## 0.24.2
+
+### Patch Changes
+
+- [`70c4cfc`](https://github.com/cesr/poncho-ai/commit/70c4cfcb8d70e8b382157a82f2dc341bf526226b) Thanks [@cesr](https://github.com/cesr)! - Improve tool approval UX: optimistic approve/deny, fix browser panel not opening after approval, and restore real-time SSE streaming for resumed runs.
+
+- [`ab4c1cb`](https://github.com/cesr/poncho-ai/commit/ab4c1cb0729a68ba0f296fd37380b5c228abfb5b) Thanks [@cesr](https://github.com/cesr)! - Fix browser hangs during long conversations in the web UI by throttling streaming renders with requestAnimationFrame and caching markdown parse output.
+
 ## 0.24.1
 
 ### Patch Changes

package/dist/{chunk-3ETNDULB.js → chunk-UTZB2CS7.js}

@@ -866,6 +866,25 @@ var WEB_UI_STYLES = `
       border-color: var(--deny-border);
       color: var(--deny);
     }
+    .approval-request-item.resolved {
+      opacity: 0.7;
+    }
+    .approval-resolved-status {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+    }
+    .approval-resolved-status code {
+      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
+      letter-spacing: 0;
+      color: var(--fg-strong);
+    }
+    .approval-resolved-status.approve {
+      color: var(--approve);
+    }
+    .approval-resolved-status.deny {
+      color: var(--deny);
+    }
     .user-bubble {
       background: var(--bg-elevated);
       border: 1px solid var(--border-2);
@@ -1735,15 +1754,23 @@ var getWebUiClientScript = (markedSource2) => `
           .replace(/"/g, """)
           .replace(/'/g, "'");
 
+      const _mdCache = new Map();
       const renderAssistantMarkdown = (value) => {
         const source = String(value || "").trim();
         if (!source) return "<p></p>";
 
+        const cached = _mdCache.get(source);
+        if (cached !== undefined) return cached;
+
         try {
-          return marked.parse(source);
+          const result = marked.parse(source);
+          _mdCache.set(source, result);
+          if (_mdCache.size > 500) {
+            _mdCache.delete(_mdCache.keys().next().value);
+          }
+          return result;
         } catch (error) {
           console.error("Markdown parsing error:", error);
-          // Fallback to escaped text
           return "<p>" + escapeHtml(source) + "</p>";
         }
       };
@@ -1834,15 +1861,26 @@ var getWebUiClientScript = (markedSource2) => `
             const approvalId = typeof req.approvalId === "string" ? req.approvalId : "";
             const tool = typeof req.tool === "string" ? req.tool : "tool";
             const input = req.input != null ? req.input : {};
+            const subagentLabel = req._subagentLabel
+              ? ' <span style="color: var(--text-3); font-size: 11px;">(from ' + escapeHtml(req._subagentLabel) + ')</span>'
+              : "";
+            if (req.state === "resolved") {
+              const isApproved = req.resolvedDecision === "approve";
+              const label = isApproved ? "Approved" : "Denied";
+              const cls = isApproved ? "approve" : "deny";
+              return (
+                '<div class="approval-request-item resolved">' +
+                '<div class="approval-resolved-status ' + cls + '">' + label + ': <code>' +
+                escapeHtml(tool) + "</code>" + subagentLabel + "</div>" +
+                "</div>"
+              );
+            }
             const submitting = req.state === "submitting";
             const approveLabel = submitting && req.pendingDecision === "approve" ? "Approving..." : "Approve";
             const denyLabel = submitting && req.pendingDecision === "deny" ? "Denying..." : "Deny";
             const errorHtml = req._error
               ? '<div style="color: var(--deny); font-size: 11px; margin-top: 4px;">Submit failed: ' + escapeHtml(req._error) + "</div>"
               : "";
-            const subagentLabel = req._subagentLabel
-              ? ' <span style="color: var(--text-3); font-size: 11px;">(from ' + escapeHtml(req._subagentLabel) + ')</span>'
-              : "";
             return (
               '<div class="approval-request-item">' +
               '<div class="approval-requests-label">Approval required: <code>' +
@@ -1870,10 +1908,11 @@ var getWebUiClientScript = (markedSource2) => `
             );
           })
           .join("");
-        const batchButtons = requests.length > 1
+        const actionableCount = requests.filter((r) => r.state !== "resolved").length;
+        const batchButtons = actionableCount > 1
           ? '<div class="approval-batch-actions">' +
-            '<button class="approval-batch-btn approve" data-approval-batch="approve">Approve all (' + requests.length + ')</button>' +
-            '<button class="approval-batch-btn deny" data-approval-batch="deny">Deny all (' + requests.length + ')</button>' +
+            '<button class="approval-batch-btn approve" data-approval-batch="approve">Approve all (' + actionableCount + ')</button>' +
+            '<button class="approval-batch-btn deny" data-approval-batch="deny">Deny all (' + actionableCount + ')</button>' +
             "</div>"
           : "";
         return (
@@ -2002,6 +2041,14 @@ var getWebUiClientScript = (markedSource2) => `
         return false;
       };
 
+      const clearResolvedApprovals = (message) => {
+        if (Array.isArray(message._pendingApprovals)) {
+          message._pendingApprovals = message._pendingApprovals.filter(
+            (req) => req.state !== "resolved",
+          );
+        }
+      };
+
       const toUiPendingApprovals = (pendingApprovals) => {
         if (!Array.isArray(pendingApprovals)) {
           return [];
@@ -2394,12 +2441,16 @@ var getWebUiClientScript = (markedSource2) => `
                     );
                   }
                 });
-                // While streaming, show current tools if any
-                if (isStreaming && i === messages.length - 1 && m._currentTools && m._currentTools.length > 0) {
-                  content.insertAdjacentHTML(
-                    "beforeend",
-                    renderToolActivity(m._currentTools, m._pendingApprovals || [], m._toolImages || []),
-                  );
+                // While streaming, show current tools and/or pending approvals
+                if (isStreaming && i === messages.length - 1) {
+                  const hasCurrentTools = m._currentTools && m._currentTools.length > 0;
+                  const hasStreamApprovals = Array.isArray(m._pendingApprovals) && m._pendingApprovals.length > 0;
+                  if (hasCurrentTools || hasStreamApprovals) {
+                    content.insertAdjacentHTML(
+                      "beforeend",
+                      renderToolActivity(m._currentTools || [], m._pendingApprovals || [], m._toolImages || []),
+                    );
+                  }
                 }
                 // When reloading with unresolved approvals, show them even when not streaming
                 if (!isStreaming && pendingApprovals.length > 0 && lastToolsSectionIndex < 0) {
@@ -2675,6 +2726,7 @@ var getWebUiClientScript = (markedSource2) => `
               renderMessages(state.activeMessages, payload.hasActiveRun);
             }
             if (payload.hasActiveRun) {
+              if (window._connectBrowserStream) window._connectBrowserStream();
               setTimeout(poll, 2000);
             } else {
               setStreaming(false);
@@ -2692,12 +2744,24 @@ var getWebUiClientScript = (markedSource2) => `
         const liveOnly = options && options.liveOnly;
         return new Promise((resolve) => {
           const localMessages = state.activeMessages || [];
+          let _rafId = 0;
           const renderIfActiveConversation = (streaming) => {
             if (state.activeConversationId !== conversationId) {
               return;
             }
             state.activeMessages = localMessages;
-            renderMessages(localMessages, streaming);
+            if (!streaming) {
+              if (_rafId) { cancelAnimationFrame(_rafId); _rafId = 0; }
+              renderMessages(localMessages, false);
+              return;
+            }
+            if (!_rafId) {
+              _rafId = requestAnimationFrame(() => {
+                _rafId = 0;
+                if (state.activeConversationId !== conversationId) return;
+                renderMessages(localMessages, true);
+              });
+            }
           };
           let assistantMessage = localMessages[localMessages.length - 1];
           if (!assistantMessage || assistantMessage.role !== "assistant") {
@@ -2766,6 +2830,7 @@ var getWebUiClientScript = (markedSource2) => `
                     }
                     if (eventName === "model:chunk") {
                       const chunk = String(payload.content || "");
+                      if (chunk.length > 0) clearResolvedApprovals(assistantMessage);
                       if (assistantMessage._currentTools.length > 0 && chunk.length > 0) {
                         assistantMessage._sections.push({
                           type: "tools",
@@ -2807,6 +2872,7 @@ var getWebUiClientScript = (markedSource2) => `
                       renderIfActiveConversation(true);
                     }
                     if (eventName === "tool:started") {
+                      clearResolvedApprovals(assistantMessage);
                       const toolName = payload.tool || "tool";
                       removeActiveActivityForTool(assistantMessage, toolName);
                       const startedActivity = addActiveActivityFromToolStart(
@@ -2961,7 +3027,7 @@ var getWebUiClientScript = (markedSource2) => `
                         typeof payload.approvalId === "string" ? payload.approvalId : "";
                       if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                         assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                          (req) => req.approvalId !== approvalId,
+                          (req) => req.approvalId !== approvalId || req.state === "resolved",
                         );
                       }
                       renderIfActiveConversation(true);
@@ -2974,7 +3040,7 @@ var getWebUiClientScript = (markedSource2) => `
                         typeof payload.approvalId === "string" ? payload.approvalId : "";
                       if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                         assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                          (req) => req.approvalId !== approvalId,
+                          (req) => req.approvalId !== approvalId || req.state === "resolved",
                         );
                       }
                       renderIfActiveConversation(true);
@@ -3511,12 +3577,24 @@ var getWebUiClientScript = (markedSource2) => `
           }
           state.activeStreamConversationId = conversationId;
           const streamConversationId = conversationId;
+          let _rafId = 0;
           const renderIfActiveConversation = (streaming) => {
             if (state.activeConversationId !== streamConversationId) {
               return;
             }
             state.activeMessages = localMessages;
-            renderMessages(localMessages, streaming);
+            if (!streaming) {
+              if (_rafId) { cancelAnimationFrame(_rafId); _rafId = 0; }
+              renderMessages(localMessages, false);
+              return;
+            }
+            if (!_rafId) {
+              _rafId = requestAnimationFrame(() => {
+                _rafId = 0;
+                if (state.activeConversationId !== streamConversationId) return;
+                renderMessages(localMessages, true);
+              });
+            }
           };
           const finalizeAssistantMessage = () => {
             assistantMessage._activeActivities = [];
@@ -3577,7 +3655,7 @@ var getWebUiClientScript = (markedSource2) => `
               try {
                 if (eventName === "model:chunk") {
                   const chunk = String(payload.content || "");
-                  // If we have tools accumulated and text starts again, push tools as a section
+                  if (chunk.length > 0) clearResolvedApprovals(assistantMessage);
                   if (assistantMessage._currentTools.length > 0 && chunk.length > 0) {
                     assistantMessage._sections.push({ type: "tools", content: assistantMessage._currentTools });
                     assistantMessage._currentTools = [];
@@ -3621,6 +3699,7 @@ var getWebUiClientScript = (markedSource2) => `
                   renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:started") {
+                  clearResolvedApprovals(assistantMessage);
                   const toolName = payload.tool || "tool";
                   removeActiveActivityForTool(assistantMessage, toolName);
                   const startedActivity = addActiveActivityFromToolStart(
@@ -3775,7 +3854,7 @@ var getWebUiClientScript = (markedSource2) => `
                     typeof payload.approvalId === "string" ? payload.approvalId : "";
                   if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                     assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                      (req) => req.approvalId !== approvalId,
+                      (req) => req.approvalId !== approvalId || req.state === "resolved",
                     );
                   }
                   renderIfActiveConversation(true);
@@ -3790,7 +3869,7 @@ var getWebUiClientScript = (markedSource2) => `
                     typeof payload.approvalId === "string" ? payload.approvalId : "";
                   if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                     assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                      (req) => req.approvalId !== approvalId,
+                      (req) => req.approvalId !== approvalId || req.state === "resolved",
                     );
                   }
                   renderIfActiveConversation(true);
@@ -4119,21 +4198,17 @@ var getWebUiClientScript = (markedSource2) => `
         openLightbox(img.src);
       });
 
-      const submitApproval = async (approvalId, decision, opts) => {
-        const wasStreaming = opts && opts.wasStreaming;
+      const submitApproval = (approvalId, decision) => {
         state.approvalRequestsInFlight[approvalId] = true;
         updatePendingApproval(approvalId, (request) => ({
           ...request,
-          state: "submitting",
-          pendingDecision: decision,
+          state: "resolved",
+          resolvedDecision: decision,
         }));
-        try {
-          await api("/api/approvals/" + encodeURIComponent(approvalId), {
-            method: "POST",
-            body: JSON.stringify({ approved: decision === "approve" }),
-          });
-          updatePendingApproval(approvalId, () => null);
-        } catch (error) {
+        api("/api/approvals/" + encodeURIComponent(approvalId), {
+          method: "POST",
+          body: JSON.stringify({ approved: decision === "approve" }),
+        }).catch((error) => {
           const isStale = error && error.payload && error.payload.code === "APPROVAL_NOT_FOUND";
           if (isStale) {
             updatePendingApproval(approvalId, () => null);
@@ -4143,12 +4218,14 @@ var getWebUiClientScript = (markedSource2) => `
               ...request,
               state: "pending",
               pendingDecision: null,
+              resolvedDecision: null,
               _error: errMsg,
             }));
           }
-        } finally {
+          renderMessages(state.activeMessages, state.isStreaming);
+        }).finally(() => {
           delete state.approvalRequestsInFlight[approvalId];
-        }
+        });
       };
 
       elements.messages.addEventListener("click", async (event) => {
@@ -4167,7 +4244,7 @@ var getWebUiClientScript = (markedSource2) => `
           for (const m of messages) {
             if (Array.isArray(m._pendingApprovals)) {
               for (const req of m._pendingApprovals) {
-                if (req.approvalId && req.state !== "submitting" && !state.approvalRequestsInFlight[req.approvalId]) {
+                if (req.approvalId && req.state !== "resolved" && !state.approvalRequestsInFlight[req.approvalId]) {
                   pending.push(req.approvalId);
                 }
               }
@@ -4176,8 +4253,7 @@ var getWebUiClientScript = (markedSource2) => `
           if (pending.length === 0) return;
           const wasStreaming = state.isStreaming;
           if (!wasStreaming) setStreaming(true);
-          renderMessages(state.activeMessages, state.isStreaming);
-          await Promise.all(pending.map((aid) => submitApproval(aid, decision, { wasStreaming })));
+          pending.forEach((aid) => submitApproval(aid, decision));
           renderMessages(state.activeMessages, state.isStreaming);
           loadConversations();
           if (!wasStreaming && state.activeConversationId) {
@@ -4207,8 +4283,7 @@ var getWebUiClientScript = (markedSource2) => `
         if (!wasStreaming) {
           setStreaming(true);
         }
-        renderMessages(state.activeMessages, state.isStreaming);
-        await submitApproval(approvalId, decision, { wasStreaming });
+        submitApproval(approvalId, decision);
         renderMessages(state.activeMessages, state.isStreaming);
         loadConversations();
         if (!wasStreaming && state.activeConversationId) {
@@ -8931,6 +9006,17 @@ data: ${JSON.stringify(data)}
       foundConversation.runStatus = "running";
       await conversationStore.update(foundConversation);
       const checkpointRef = allApprovals[0];
+      const prevStream = conversationEventStreams.get(conversationId);
+      if (prevStream) {
+        prevStream.finished = false;
+        prevStream.buffer = [];
+      } else {
+        conversationEventStreams.set(conversationId, {
+          buffer: [],
+          subscribers: /* @__PURE__ */ new Set(),
+          finished: false
+        });
+      }
       const resumeWork = (async () => {
         try {
           const toolContext = {
@@ -8966,6 +9052,14 @@ data: ${JSON.stringify(data)}
               error: r.error
             })));
           }
+          const bs = harness.browserSession;
+          if (bs?.isActiveFor(conversationId)) {
+            broadcastRawSse(conversationId, "browser:status", {
+              active: true,
+              url: bs.getUrl(conversationId) ?? null,
+              interactionAllowed: true
+            });
+          }
           await resumeRunFromCheckpoint(
             conversationId,
             foundConversation,
@@ -10094,7 +10188,7 @@ var runInteractive = async (workingDir, params) => {
   await harness.initialize();
   const identity = await ensureAgentIdentity2(workingDir);
   try {
-    const { runInteractiveInk } = await import("./run-interactive-ink-IEB4MZ2C.js");
+    const { runInteractiveInk } = await import("./run-interactive-ink-REIUGQ5X.js");
     await runInteractiveInk({
       harness,
       params,

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   main
-} from "./chunk-3ETNDULB.js";
+} from "./chunk-UTZB2CS7.js";
 
 // src/cli.ts
 void main();

package/dist/index.js

@@ -23,7 +23,7 @@ import {
   runTests,
   startDevServer,
   updateAgentGuidance
-} from "./chunk-3ETNDULB.js";
+} from "./chunk-UTZB2CS7.js";
 export {
   addSkill,
   buildCli,

package/dist/{run-interactive-ink-IEB4MZ2C.js → run-interactive-ink-REIUGQ5X.js}

@@ -2,7 +2,7 @@ import {
   consumeFirstRunIntro,
   inferConversationTitle,
   resolveHarnessEnvironment
-} from "./chunk-3ETNDULB.js";
+} from "./chunk-UTZB2CS7.js";
 
 // src/run-interactive-ink.ts
 import * as readline from "readline";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poncho-ai/cli",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "description": "CLI for building and deploying AI agents",
   "repository": {
     "type": "git",
@@ -27,9 +27,9 @@
     "react": "^19.2.4",
     "react-devtools-core": "^6.1.5",
     "yaml": "^2.8.1",
+    "@poncho-ai/harness": "0.22.1",
     "@poncho-ai/messaging": "0.5.1",
-    "@poncho-ai/sdk": "1.5.0",
-    "@poncho-ai/harness": "0.22.1"
+    "@poncho-ai/sdk": "1.5.0"
   },
   "devDependencies": {
     "@types/busboy": "^1.5.4",

package/src/index.ts

@@ -3103,6 +3103,20 @@ export const createRequestHandler = async (options?: {
       // Use the first approval as the checkpoint reference (all share the same checkpoint data)
       const checkpointRef = allApprovals[0]!;
 
+      // Reset the event stream so new SSE subscribers can connect to the
+      // resumed run (the previous run's stream was marked finished).
+      const prevStream = conversationEventStreams.get(conversationId);
+      if (prevStream) {
+        prevStream.finished = false;
+        prevStream.buffer = [];
+      } else {
+        conversationEventStreams.set(conversationId, {
+          buffer: [],
+          subscribers: new Set(),
+          finished: false,
+        });
+      }
+
       const resumeWork = (async () => {
         try {
           const toolContext = {
@@ -3145,6 +3159,16 @@ export const createRequestHandler = async (options?: {
             })));
           }
 
+          // If approved tools activated the browser, notify connected clients
+          const bs = harness.browserSession as BrowserSessionForStatus | undefined;
+          if (bs?.isActiveFor(conversationId)) {
+            broadcastRawSse(conversationId, "browser:status", {
+              active: true,
+              url: bs.getUrl(conversationId) ?? null,
+              interactionAllowed: true,
+            });
+          }
+
           await resumeRunFromCheckpoint(
             conversationId,
             foundConversation!,

package/src/web-ui-client.ts

@@ -151,15 +151,23 @@ export const getWebUiClientScript = (markedSource: string): string => `
           .replace(/"/g, """)
           .replace(/'/g, "'");
 
+      const _mdCache = new Map();
       const renderAssistantMarkdown = (value) => {
         const source = String(value || "").trim();
         if (!source) return "<p></p>";
 
+        const cached = _mdCache.get(source);
+        if (cached !== undefined) return cached;
+
         try {
-          return marked.parse(source);
+          const result = marked.parse(source);
+          _mdCache.set(source, result);
+          if (_mdCache.size > 500) {
+            _mdCache.delete(_mdCache.keys().next().value);
+          }
+          return result;
         } catch (error) {
           console.error("Markdown parsing error:", error);
-          // Fallback to escaped text
           return "<p>" + escapeHtml(source) + "</p>";
         }
       };
@@ -250,15 +258,26 @@ export const getWebUiClientScript = (markedSource: string): string => `
             const approvalId = typeof req.approvalId === "string" ? req.approvalId : "";
             const tool = typeof req.tool === "string" ? req.tool : "tool";
             const input = req.input != null ? req.input : {};
+            const subagentLabel = req._subagentLabel
+              ? ' <span style="color: var(--text-3); font-size: 11px;">(from ' + escapeHtml(req._subagentLabel) + ')</span>'
+              : "";
+            if (req.state === "resolved") {
+              const isApproved = req.resolvedDecision === "approve";
+              const label = isApproved ? "Approved" : "Denied";
+              const cls = isApproved ? "approve" : "deny";
+              return (
+                '<div class="approval-request-item resolved">' +
+                '<div class="approval-resolved-status ' + cls + '">' + label + ': <code>' +
+                escapeHtml(tool) + "</code>" + subagentLabel + "</div>" +
+                "</div>"
+              );
+            }
             const submitting = req.state === "submitting";
             const approveLabel = submitting && req.pendingDecision === "approve" ? "Approving..." : "Approve";
             const denyLabel = submitting && req.pendingDecision === "deny" ? "Denying..." : "Deny";
             const errorHtml = req._error
               ? '<div style="color: var(--deny); font-size: 11px; margin-top: 4px;">Submit failed: ' + escapeHtml(req._error) + "</div>"
               : "";
-            const subagentLabel = req._subagentLabel
-              ? ' <span style="color: var(--text-3); font-size: 11px;">(from ' + escapeHtml(req._subagentLabel) + ')</span>'
-              : "";
             return (
               '<div class="approval-request-item">' +
               '<div class="approval-requests-label">Approval required: <code>' +
@@ -286,10 +305,11 @@ export const getWebUiClientScript = (markedSource: string): string => `
             );
           })
           .join("");
-        const batchButtons = requests.length > 1
+        const actionableCount = requests.filter((r) => r.state !== "resolved").length;
+        const batchButtons = actionableCount > 1
           ? '<div class="approval-batch-actions">' +
-            '<button class="approval-batch-btn approve" data-approval-batch="approve">Approve all (' + requests.length + ')</button>' +
-            '<button class="approval-batch-btn deny" data-approval-batch="deny">Deny all (' + requests.length + ')</button>' +
+            '<button class="approval-batch-btn approve" data-approval-batch="approve">Approve all (' + actionableCount + ')</button>' +
+            '<button class="approval-batch-btn deny" data-approval-batch="deny">Deny all (' + actionableCount + ')</button>' +
             "</div>"
           : "";
         return (
@@ -418,6 +438,14 @@ export const getWebUiClientScript = (markedSource: string): string => `
         return false;
       };
 
+      const clearResolvedApprovals = (message) => {
+        if (Array.isArray(message._pendingApprovals)) {
+          message._pendingApprovals = message._pendingApprovals.filter(
+            (req) => req.state !== "resolved",
+          );
+        }
+      };
+
       const toUiPendingApprovals = (pendingApprovals) => {
         if (!Array.isArray(pendingApprovals)) {
           return [];
@@ -810,12 +838,16 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     );
                   }
                 });
-                // While streaming, show current tools if any
-                if (isStreaming && i === messages.length - 1 && m._currentTools && m._currentTools.length > 0) {
-                  content.insertAdjacentHTML(
-                    "beforeend",
-                    renderToolActivity(m._currentTools, m._pendingApprovals || [], m._toolImages || []),
-                  );
+                // While streaming, show current tools and/or pending approvals
+                if (isStreaming && i === messages.length - 1) {
+                  const hasCurrentTools = m._currentTools && m._currentTools.length > 0;
+                  const hasStreamApprovals = Array.isArray(m._pendingApprovals) && m._pendingApprovals.length > 0;
+                  if (hasCurrentTools || hasStreamApprovals) {
+                    content.insertAdjacentHTML(
+                      "beforeend",
+                      renderToolActivity(m._currentTools || [], m._pendingApprovals || [], m._toolImages || []),
+                    );
+                  }
                 }
                 // When reloading with unresolved approvals, show them even when not streaming
                 if (!isStreaming && pendingApprovals.length > 0 && lastToolsSectionIndex < 0) {
@@ -1091,6 +1123,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
               renderMessages(state.activeMessages, payload.hasActiveRun);
             }
             if (payload.hasActiveRun) {
+              if (window._connectBrowserStream) window._connectBrowserStream();
               setTimeout(poll, 2000);
             } else {
               setStreaming(false);
@@ -1108,12 +1141,24 @@ export const getWebUiClientScript = (markedSource: string): string => `
         const liveOnly = options && options.liveOnly;
         return new Promise((resolve) => {
           const localMessages = state.activeMessages || [];
+          let _rafId = 0;
           const renderIfActiveConversation = (streaming) => {
             if (state.activeConversationId !== conversationId) {
               return;
             }
             state.activeMessages = localMessages;
-            renderMessages(localMessages, streaming);
+            if (!streaming) {
+              if (_rafId) { cancelAnimationFrame(_rafId); _rafId = 0; }
+              renderMessages(localMessages, false);
+              return;
+            }
+            if (!_rafId) {
+              _rafId = requestAnimationFrame(() => {
+                _rafId = 0;
+                if (state.activeConversationId !== conversationId) return;
+                renderMessages(localMessages, true);
+              });
+            }
           };
           let assistantMessage = localMessages[localMessages.length - 1];
           if (!assistantMessage || assistantMessage.role !== "assistant") {
@@ -1182,6 +1227,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     }
                     if (eventName === "model:chunk") {
                       const chunk = String(payload.content || "");
+                      if (chunk.length > 0) clearResolvedApprovals(assistantMessage);
                       if (assistantMessage._currentTools.length > 0 && chunk.length > 0) {
                         assistantMessage._sections.push({
                           type: "tools",
@@ -1223,6 +1269,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                       renderIfActiveConversation(true);
                     }
                     if (eventName === "tool:started") {
+                      clearResolvedApprovals(assistantMessage);
                       const toolName = payload.tool || "tool";
                       removeActiveActivityForTool(assistantMessage, toolName);
                       const startedActivity = addActiveActivityFromToolStart(
@@ -1377,7 +1424,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                         typeof payload.approvalId === "string" ? payload.approvalId : "";
                       if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                         assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                          (req) => req.approvalId !== approvalId,
+                          (req) => req.approvalId !== approvalId || req.state === "resolved",
                         );
                       }
                       renderIfActiveConversation(true);
@@ -1390,7 +1437,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                         typeof payload.approvalId === "string" ? payload.approvalId : "";
                       if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                         assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                          (req) => req.approvalId !== approvalId,
+                          (req) => req.approvalId !== approvalId || req.state === "resolved",
                         );
                       }
                       renderIfActiveConversation(true);
@@ -1927,12 +1974,24 @@ export const getWebUiClientScript = (markedSource: string): string => `
           }
           state.activeStreamConversationId = conversationId;
           const streamConversationId = conversationId;
+          let _rafId = 0;
           const renderIfActiveConversation = (streaming) => {
             if (state.activeConversationId !== streamConversationId) {
               return;
             }
             state.activeMessages = localMessages;
-            renderMessages(localMessages, streaming);
+            if (!streaming) {
+              if (_rafId) { cancelAnimationFrame(_rafId); _rafId = 0; }
+              renderMessages(localMessages, false);
+              return;
+            }
+            if (!_rafId) {
+              _rafId = requestAnimationFrame(() => {
+                _rafId = 0;
+                if (state.activeConversationId !== streamConversationId) return;
+                renderMessages(localMessages, true);
+              });
+            }
           };
           const finalizeAssistantMessage = () => {
             assistantMessage._activeActivities = [];
@@ -1993,7 +2052,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
               try {
                 if (eventName === "model:chunk") {
                   const chunk = String(payload.content || "");
-                  // If we have tools accumulated and text starts again, push tools as a section
+                  if (chunk.length > 0) clearResolvedApprovals(assistantMessage);
                   if (assistantMessage._currentTools.length > 0 && chunk.length > 0) {
                     assistantMessage._sections.push({ type: "tools", content: assistantMessage._currentTools });
                     assistantMessage._currentTools = [];
@@ -2037,6 +2096,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                   renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:started") {
+                  clearResolvedApprovals(assistantMessage);
                   const toolName = payload.tool || "tool";
                   removeActiveActivityForTool(assistantMessage, toolName);
                   const startedActivity = addActiveActivityFromToolStart(
@@ -2191,7 +2251,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     typeof payload.approvalId === "string" ? payload.approvalId : "";
                   if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                     assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                      (req) => req.approvalId !== approvalId,
+                      (req) => req.approvalId !== approvalId || req.state === "resolved",
                     );
                   }
                   renderIfActiveConversation(true);
@@ -2206,7 +2266,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     typeof payload.approvalId === "string" ? payload.approvalId : "";
                   if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
                     assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
-                      (req) => req.approvalId !== approvalId,
+                      (req) => req.approvalId !== approvalId || req.state === "resolved",
                     );
                   }
                   renderIfActiveConversation(true);
@@ -2535,21 +2595,17 @@ export const getWebUiClientScript = (markedSource: string): string => `
         openLightbox(img.src);
       });
 
-      const submitApproval = async (approvalId, decision, opts) => {
-        const wasStreaming = opts && opts.wasStreaming;
+      const submitApproval = (approvalId, decision) => {
         state.approvalRequestsInFlight[approvalId] = true;
         updatePendingApproval(approvalId, (request) => ({
           ...request,
-          state: "submitting",
-          pendingDecision: decision,
+          state: "resolved",
+          resolvedDecision: decision,
         }));
-        try {
-          await api("/api/approvals/" + encodeURIComponent(approvalId), {
-            method: "POST",
-            body: JSON.stringify({ approved: decision === "approve" }),
-          });
-          updatePendingApproval(approvalId, () => null);
-        } catch (error) {
+        api("/api/approvals/" + encodeURIComponent(approvalId), {
+          method: "POST",
+          body: JSON.stringify({ approved: decision === "approve" }),
+        }).catch((error) => {
           const isStale = error && error.payload && error.payload.code === "APPROVAL_NOT_FOUND";
           if (isStale) {
             updatePendingApproval(approvalId, () => null);
@@ -2559,12 +2615,14 @@ export const getWebUiClientScript = (markedSource: string): string => `
               ...request,
               state: "pending",
               pendingDecision: null,
+              resolvedDecision: null,
               _error: errMsg,
             }));
           }
-        } finally {
+          renderMessages(state.activeMessages, state.isStreaming);
+        }).finally(() => {
           delete state.approvalRequestsInFlight[approvalId];
-        }
+        });
       };
 
       elements.messages.addEventListener("click", async (event) => {
@@ -2583,7 +2641,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
           for (const m of messages) {
             if (Array.isArray(m._pendingApprovals)) {
               for (const req of m._pendingApprovals) {
-                if (req.approvalId && req.state !== "submitting" && !state.approvalRequestsInFlight[req.approvalId]) {
+                if (req.approvalId && req.state !== "resolved" && !state.approvalRequestsInFlight[req.approvalId]) {
                   pending.push(req.approvalId);
                 }
               }
@@ -2592,8 +2650,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
           if (pending.length === 0) return;
           const wasStreaming = state.isStreaming;
           if (!wasStreaming) setStreaming(true);
-          renderMessages(state.activeMessages, state.isStreaming);
-          await Promise.all(pending.map((aid) => submitApproval(aid, decision, { wasStreaming })));
+          pending.forEach((aid) => submitApproval(aid, decision));
           renderMessages(state.activeMessages, state.isStreaming);
           loadConversations();
           if (!wasStreaming && state.activeConversationId) {
@@ -2623,8 +2680,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
         if (!wasStreaming) {
           setStreaming(true);
         }
-        renderMessages(state.activeMessages, state.isStreaming);
-        await submitApproval(approvalId, decision, { wasStreaming });
+        submitApproval(approvalId, decision);
         renderMessages(state.activeMessages, state.isStreaming);
         loadConversations();
         if (!wasStreaming && state.activeConversationId) {

package/src/web-ui-styles.ts

@@ -825,6 +825,25 @@ export const WEB_UI_STYLES = `
       border-color: var(--deny-border);
       color: var(--deny);
     }
+    .approval-request-item.resolved {
+      opacity: 0.7;
+    }
+    .approval-resolved-status {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+    }
+    .approval-resolved-status code {
+      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
+      letter-spacing: 0;
+      color: var(--fg-strong);
+    }
+    .approval-resolved-status.approve {
+      color: var(--approve);
+    }
+    .approval-resolved-status.deny {
+      color: var(--deny);
+    }
     .user-bubble {
       background: var(--bg-elevated);
       border: 1px solid var(--border-2);