RomanNum3ral
/
gstack
mirror of https://github.com/garrytan/gstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Garry Tan 2026-04-04 07:57:49 -07:00
parent e3be644b45
commit ad0a9beced
No known key found for this signature in database
GPG Key ID: C1F69E85C74EFE1D
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
extension/sidepanel.css
View File

@ -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);

21
extension/sidepanel.js
View File

@ -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);