From d64027d43deac66367756c59ac0f30b840c65725 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 19 Feb 2026 18:43:06 +0000
Subject: [PATCH] ui: refine tool IO accordion styling

---
 packages/ui/src/components/tool-call.tsx      | 96 ++++++++++++-------
 .../ui/src/styles/messaging/tool-call.css     | 39 ++++++--
 2 files changed, 95 insertions(+), 40 deletions(-)

diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index c6f51592..458de294 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -601,6 +601,9 @@ export default function ToolCall(props: ToolCallProps) {
       const next = !prev
       if (!next) {
         setInputSectionExpanded(false)
+      } else {
+        setInputSectionExpanded(true)
+        setOutputSectionExpanded(true)
       }
       return next
     })
@@ -881,44 +884,69 @@ export default function ToolCall(props: ToolCallProps) {
 
       {expanded() && (
         <div class="tool-call-details">
-          <Show when={inputVisible() && hasToolInput()}>
-            <button
-              type="button"
-              class="tool-call-io-toggle"
-              aria-expanded={inputSectionExpanded()}
-              onClick={() => setInputSectionExpanded((prev) => !prev)}
-            >
-              <span class="tool-call-io-title">{t("toolCall.io.input")}</span>
-            </button>
+          <Show
+            when={inputVisible() && hasToolInput()}
+            fallback={
+              <>
+                {renderToolBody()}
+                {renderError()}
 
-            <Show when={inputSectionExpanded()}>
-              {(() => {
-                const content = toolInputMarkdown()
-                if (!content) return null
-                return renderMarkdownContent({ content, cacheKey: "input" })
-              })()}
-            </Show>
-          </Show>
-
-          <button
-            type="button"
-            class="tool-call-io-toggle"
-            aria-expanded={outputSectionExpanded()}
-            onClick={() => setOutputSectionExpanded((prev) => !prev)}
+                <Show when={status() === "pending" && !pendingPermission()}>
+                  <div class="tool-call-pending-message">
+                    <span class="spinner-small"></span>
+                    <span>{t("toolCall.pending.waitingToRun")}</span>
+                  </div>
+                </Show>
+              </>
+            }
           >
-            <span class="tool-call-io-title">{t("toolCall.io.output")}</span>
-          </button>
+            <div class="tool-call-io-sections">
+              <div class="tool-call-io-section">
+                <button
+                  type="button"
+                  class="tool-call-io-toggle"
+                  aria-expanded={inputSectionExpanded()}
+                  onClick={() => setInputSectionExpanded((prev) => !prev)}
+                >
+                  <span class="tool-call-io-title">{t("toolCall.io.input")}</span>
+                </button>
 
-          <Show when={outputSectionExpanded()}>
-            {renderToolBody()}
-            {renderError()}
-
-            <Show when={status() === "pending" && !pendingPermission()}>
-              <div class="tool-call-pending-message">
-                <span class="spinner-small"></span>
-                <span>{t("toolCall.pending.waitingToRun")}</span>
+                <Show when={inputSectionExpanded()}>
+                  <div class="tool-call-io-body">
+                    {(() => {
+                      const content = toolInputMarkdown()
+                      if (!content) return null
+                      return renderMarkdownContent({ content, cacheKey: "input" })
+                    })()}
+                  </div>
+                </Show>
               </div>
-            </Show>
+
+              <div class="tool-call-io-section">
+                <button
+                  type="button"
+                  class="tool-call-io-toggle"
+                  aria-expanded={outputSectionExpanded()}
+                  onClick={() => setOutputSectionExpanded((prev) => !prev)}
+                >
+                  <span class="tool-call-io-title">{t("toolCall.io.output")}</span>
+                </button>
+
+                <Show when={outputSectionExpanded()}>
+                  <div class="tool-call-io-body">
+                    {renderToolBody()}
+                    {renderError()}
+
+                    <Show when={status() === "pending" && !pendingPermission()}>
+                      <div class="tool-call-pending-message">
+                        <span class="spinner-small"></span>
+                        <span>{t("toolCall.pending.waitingToRun")}</span>
+                      </div>
+                    </Show>
+                  </div>
+                </Show>
+              </div>
+            </div>
           </Show>
 
           {renderPermissionBlock()}
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index b869bbf3..d6b01a41 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -87,6 +87,7 @@
   @apply flex items-stretch w-full;
   background-color: transparent;
   color: var(--text-primary);
+  border-bottom: 1px solid var(--tool-call-border-color);
 }
 
 .tool-call-header:hover {
@@ -232,6 +233,21 @@
   font-size: var(--font-size-xs);
 }
 
+
+.tool-call-io-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-xs);
+}
+
+.tool-call-io-section {
+  border: 1px solid var(--tool-call-border-color);
+  overflow: hidden;
+  background-color: transparent;
+  border-radius: 0;
+}
+
 .tool-call-io-toggle {
   display: flex;
   align-items: center;
@@ -240,10 +256,12 @@
   padding: 0.5rem;
   background-color: var(--surface-secondary);
   border: none;
-  border-top: 1px solid var(--tool-call-border-color);
-  font-family: var(--font-family-mono);
-  font-size: 13px;
-  color: inherit;
+  border-bottom: 1px solid var(--tool-call-border-color);
+  width: 100%;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
   cursor: pointer;
 }
 
@@ -259,8 +277,17 @@
 }
 
 .tool-call-io-title {
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  font-weight: inherit;
+  color: inherit;
+}
+
+.tool-call-io-body {
+  background-color: var(--surface-code);
+}
+
+/* IO sections provide the outer frame; avoid double borders on markdown frames. */
+.tool-call-io-body .tool-call-markdown {
+  border: none;
 }
 
 .tool-call-markdown {