feat: thinking blocks rendered in tui and share page

packages/web/src/components/share/part.module.css

@@ -128,6 +128,29 @@
     max-width: var(--md-tool-width);
   }
 
+  [data-component="assistant-reasoning"] {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-grow: 1;
+    max-width: var(--md-tool-width);
+
+    & > [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;
+
+      [data-component="copy-button"] {
+        top: 0.5rem;
+        right: calc(0.5rem - 1px);
+      }
+    }
+  }
+
   [data-component="assistant-text"] {
     min-width: 0;
     display: flex;

packages/web/src/components/share/part.tsx

@@ -19,7 +19,7 @@ import {
   IconMagnifyingGlass,
   IconDocumentMagnifyingGlass,
 } from "../icons"
-import { IconMeta, IconRobot, IconOpenAI, IconGemini, IconAnthropic } from "../icons/custom"
+import { IconMeta, IconRobot, IconOpenAI, IconGemini, IconAnthropic, IconBrain } from "../icons/custom"
 import { ContentCode } from "./content-code"
 import { ContentDiff } from "./content-diff"
 import { ContentText } from "./content-text"
@@ -83,6 +83,9 @@ export function Part(props: PartProps) {
               >
                 {(model) => <ProviderIcon model={model()} size={18} />}
               </Match>
+              <Match when={props.part.type === "reasoning" && props.message.role === "assistant"}>
+                <IconBrain width={18} height={18} />
+              </Match>
               <Match when={props.part.type === "tool" && props.part.tool === "todowrite"}>
                 <IconQueueList width={18} height={18} />
               </Match>
@@ -157,6 +160,13 @@ export function Part(props: PartProps) {
             )}
           </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>
+          </div>
+        )}
         {props.message.role === "user" && props.part.type === "file" && (
           <div data-component="attachment">
             <div data-slot="copy">Attachment</div>