feat: toggle tool details visible

2 files changed, 14 insertions, 10 deletions

diff --git a/packages/web/src/components/share/part.module.css b/packages/web/src/components/share/part.module.css
index 3dd321425..15a43da36 100644
--- a/packages/web/src/components/share/part.module.css
+++ b/packages/web/src/components/share/part.module.css
@@ -136,13 +136,14 @@
     flex-grow: 1;
     max-width: var(--md-tool-width);
 
-    & > [data-component="assistant-reasoning-markdown"] {
+    [data-component="assistant-reasoning-markdown"] {
       align-self: flex-start;
       font-size: 0.875rem;
       border: 1px solid var(--sl-color-blue-high);
       padding: 0.5rem calc(0.5rem + 3px);
       border-radius: 0.25rem;
       position: relative;
+      margin-top: 0.5rem;
 
       [data-component="copy-button"] {
         top: 0.5rem;
diff --git a/packages/web/src/components/share/part.tsx b/packages/web/src/components/share/part.tsx
index 5cfd3a045..597b67d67 100644
--- a/packages/web/src/components/share/part.tsx
+++ b/packages/web/src/components/share/part.tsx
@@ -152,18 +152,23 @@ export function Part(props: PartProps) {
                 )}
                 {` | ${props.message.modelID}`}
                 {props.message.mode && (
-                  <span style={{ "font-weight": "bold", color: "var(--sl-color-accent)" }}>
-                    {` | ${props.message.mode}`}
-                  </span>
+                  <span style={{ color: "var(--sl-color-accent)" }}>{` | ${props.message.mode}`}</span>
                 )}
               </Footer>
             )}
           </div>
         )}
         {props.message.role === "assistant" && props.part.type === "reasoning" && (
-          <div data-component="assistant-reasoning">
-            <div data-component="assistant-reasoning-markdown">
-              <ContentMarkdown expand={props.last} text={props.part.text || "Thinking..."} />
+          <div data-component="tool">
+            <div data-component="tool-title">
+              <span data-slot="name">Thinking</span>
+            </div>
+            <div data-component="assistant-reasoning">
+              <ResultsButton showCopy="Show details" hideCopy="Hide details">
+                <div data-component="assistant-reasoning-markdown">
+                  <ContentMarkdown expand text={props.part.text || "Thinking..."} />
+                </div>
+              </ResultsButton>
             </div>
           </div>
         )}
@@ -182,9 +187,7 @@ export function Part(props: PartProps) {
               )}
               {` | ${props.message.modelID}`}
               {props.message.mode && (
-                <span style={{ "font-weight": "bold", color: "var(--sl-color-accent)" }}>
-                  {` | ${props.message.mode}`}
-                </span>
+                <span style={{ color: "var(--sl-color-accent)" }}>{` | ${props.message.mode}`}</span>
               )}
             </div>
           </div>