feat(ui): finished turns keep their tool tree, reasoning and say bubbles, the thread stops dragging the reader down

ui/src/lib/panel/turn-card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import MessageSquareIcon from "@lucide/svelte/icons/message-square";
   import StatusPill from "$lib/components/status-pill.svelte";
   import {
     elapsedMs,
@@ -11,6 +10,8 @@
   import { cn } from "$lib/utils";
   import { isLive, ORIGIN_LABELS, type Turn } from "./activity.svelte";
   import Markdown from "./markdown.svelte";
+  import Reasoning from "./reasoning.svelte";
+  import SayBubble from "./say-bubble.svelte";
   import ToolNodeView from "./tool-node.svelte";
 
   let { turn, now }: { turn: Turn; now: number } = $props();
@@ -59,7 +60,7 @@
         tool {toolCount === 1 ? "call" : "calls"}
       </span>
     {/if}
-    {#if turn.thinking > 0 && turn.status === "running"}
+    {#if turn.thinking > 0 && turn.status === "running" && !turn.reasoning}
       <span class="text-kind-deep">thinking…</span>
     {/if}
     {#if turn.usage}
@@ -79,9 +80,13 @@
   {:else if turn.userText}
     <Markdown
       class="mx-1 rounded-md bg-muted/50 px-2.5 py-1.5"
+      inert
       text={turn.userText}
     />
   {/if}
+  {#if turn.reasoning.trim()}
+    <Reasoning live={turn.status === "running"} text={turn.reasoning} />
+  {/if}
   {#if turn.roots.length > 0}
     <div class="flex flex-col">
       {#each turn.roots as rootId (rootId)}
@@ -92,10 +97,7 @@
     </div>
   {/if}
   {#each turn.says as text, index (index)}
-    <div class="mx-1 flex gap-2 rounded-md bg-primary/8 px-2.5 py-1.5">
-      <MessageSquareIcon class="mt-1 size-3.5 shrink-0 text-link" />
-      <Markdown class="min-w-0 flex-1" {text} />
-    </div>
+    <SayBubble {text} />
   {/each}
   {#if turn.text}
     <Markdown class="mx-1 px-1" text={turn.text} />