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

ui/src/lib/panel/reasoning.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { cn } from "$lib/utils";
+
+  let { text, live = false }: { text: string; live?: boolean } = $props();
+
+  const PREVIEW = 400;
+  const SPACES = /\s+/g;
+  let expanded = $state(false);
+  const flat = $derived(text.replace(SPACES, " ").trim());
+</script>
+
+<div class="flex min-w-0 max-w-full flex-col">
+  <button
+    aria-expanded={expanded}
+    class="row-hover ledger-grid grid-cols-[auto_auto_minmax(0,1fr)] rounded-md px-1.5 py-1 text-left text-sm"
+    onclick={() => {
+      expanded = !expanded;
+    }}
+    type="button"
+  >
+    <ChevronRightIcon
+      class={cn(
+        "size-3.5 text-icon transition-transform duration-150",
+        expanded && "rotate-90"
+      )}
+    />
+    <span class="size-2 rounded-full bg-kind-deep"></span>
+    <span class="flex min-w-0 items-baseline gap-2">
+      <span class="shrink-0 font-medium text-kind-deep">reasoning</span>
+      {#if live && !expanded}
+        <span class="truncate text-left text-muted-foreground" dir="rtl">
+          <bdi dir="ltr">{flat.slice(-PREVIEW)}</bdi>
+        </span>
+      {:else if !expanded}
+        <span class="truncate text-muted-foreground"
+          >{flat.slice(0, PREVIEW)}</span
+        >
+      {/if}
+    </span>
+  </button>
+  {#if expanded}
+    <p
+      class="mb-1 ml-7 @md:max-w-[75ch] whitespace-pre-wrap break-words text-muted-foreground text-sm"
+    >
+      {text.trim()}
+    </p>
+  {/if}
+</div>