From ad0a9beced579f2dcfe2dab01232d4708d93e784 Mon Sep 17 00:00:00 2001
From: Garry Tan <garrytan@gmail.com>
Date: Sat, 4 Apr 2026 07:57:49 -0700
Subject: [PATCH] feat: collapse tool calls into "See reasoning" disclosure on
 completion

While the agent is working, tool calls stream live so you can watch
progress. When the agent finishes, all tool calls collapse into a
"See reasoning (N steps)" disclosure. Click to expand and see what
the agent did. The final text answer stays visible.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 extension/sidepanel.css | 26 ++++++++++++++++++++++++++
 extension/sidepanel.js  | 21 ++++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/extension/sidepanel.css b/extension/sidepanel.css
index 2f82719f..5b99b7bf 100644
--- a/extension/sidepanel.css
+++ b/extension/sidepanel.css
@@ -290,6 +290,32 @@ body::after {
   line-height: 1.5;
   word-break: break-word;
 }
+/* Collapsed reasoning disclosure */
+.agent-reasoning {
+  margin: 4px 0;
+}
+.agent-reasoning summary {
+  cursor: pointer;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-meta);
+  padding: 3px 0;
+  user-select: none;
+  list-style: none;
+}
+.agent-reasoning summary::before {
+  content: '▶ ';
+  font-size: 9px;
+}
+.agent-reasoning[open] summary::before {
+  content: '▼ ';
+}
+.agent-reasoning summary:hover {
+  color: var(--text-label);
+}
+.agent-reasoning .agent-tool {
+  margin-left: 4px;
+}
 /* Legacy classes kept for compat */
 .tool-name {
   color: var(--amber-500);
diff --git a/extension/sidepanel.js b/extension/sidepanel.js
index f3dfca42..16cd917f 100644
--- a/extension/sidepanel.js
+++ b/extension/sidepanel.js
@@ -196,8 +196,27 @@ function handleAgentEvent(entry) {
     if (thinking) thinking.remove();
     updateStopButton(false);
     stopFastPoll();
-    // Add timestamp
+    // Collapse tool calls into a "See reasoning" disclosure
     if (agentContainer) {
+      const tools = agentContainer.querySelectorAll('.agent-tool');
+      if (tools.length > 0) {
+        const details = document.createElement('details');
+        details.className = 'agent-reasoning';
+        const summary = document.createElement('summary');
+        summary.textContent = `See reasoning (${tools.length} step${tools.length > 1 ? 's' : ''})`;
+        details.appendChild(summary);
+        for (const tool of tools) {
+          details.appendChild(tool);
+        }
+        // Insert the disclosure before the text response (if any)
+        const textEl = agentContainer.querySelector('.agent-text');
+        if (textEl) {
+          agentContainer.insertBefore(details, textEl);
+        } else {
+          agentContainer.appendChild(details);
+        }
+      }
+      // Add timestamp
       const ts = document.createElement('span');
       ts.className = 'chat-time';
       ts.textContent = formatChatTime(entry.ts);