Merge branch 'dev' into feature/heartbeat

# Conflicts:
#	src/app/App.svelte
#	src/app/store.svelte.ts
#	src/app/store.test.ts
#	src/features/workspaces/ui/WorkspaceCard.test.ts

5 files changed, 756 insertions, 703 deletions

diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte
index f2899c7..e72f639 100644
--- a/src/features/chat/ui/ChatView.svelte
+++ b/src/features/chat/ui/ChatView.svelte
@@ -1,294 +1,347 @@
 <script lang="ts">
-	import type { TurnProviderRetryEvent } from "@dispatch/wire";
-	import { groupRenderedChunks, type RenderedChunk, viewProviderRetry } from "../index";
-	import {
-		interleaveTurnMetrics,
-		viewCacheRate,
-		viewExpectedCache,
-		viewStepMetrics,
-		viewTurnMetrics,
-		type TurnMetricsEntry,
-	} from "../../../core/metrics";
-	import { Markdown } from "../../markdown";
+  import type { TurnProviderRetryEvent } from "@dispatch/wire";
+  import { groupRenderedChunks, type RenderedChunk, viewProviderRetry } from "../index";
+  import {
+    interleaveTurnMetrics,
+    viewCacheRate,
+    viewExpectedCache,
+    viewStepMetrics,
+    viewTurnMetrics,
+    type TurnMetricsEntry,
+  } from "../../../core/metrics";
+  import { Markdown } from "../../markdown";
 
-	const badgeClass = {
-		success: "badge-success",
-		warning: "badge-warning",
-		error: "badge-error",
-	} as const;
+  const badgeClass = {
+    success: "badge-success",
+    warning: "badge-warning",
+    error: "badge-error",
+  } as const;
 
-	let {
-		chunks,
-		turnMetrics = [],
-		hasEarlier = false,
-		onShowEarlier,
-		thinkingKeyBase = 0,
-		providerRetry = null,
-	}: {
-		chunks: readonly RenderedChunk[];
-		turnMetrics?: readonly TurnMetricsEntry[];
-		/** Earlier history is unloaded (chat limit) and can be paged back in. */
-		hasEarlier?: boolean;
-		/** Page earlier history back in; the caller owns scroll-position preservation. */
-		onShowEarlier?: () => Promise<void>;
-		/**
-		 * Ordinal base for thinking-collapse keys: the count of thinking chunks
-		 * unloaded by the chat limit, so the remaining ordinals don't shift (and
-		 * swap collapse state) when a trim removes older thinking blocks.
-		 */
-		thinkingKeyBase?: number;
-		/**
-		 * The latest `provider-retry` event for the current turn, or `null` when
-		 * no retry is pending → renders the transient yellow "retrying…" banner.
-		 * Never persisted (never part of the message history); coalesces to the
-		 * newest attempt + delay, and is cleared when content resumes / turn ends.
-		 */
-		providerRetry?: TurnProviderRetryEvent | null;
-	} = $props();
+  let {
+    chunks,
+    turnMetrics = [],
+    hasEarlier = false,
+    onShowEarlier,
+    thinkingKeyBase = 0,
+    providerRetry = null,
+  }: {
+    chunks: readonly RenderedChunk[];
+    turnMetrics?: readonly TurnMetricsEntry[];
+    /** Earlier history is unloaded (chat limit) and can be paged back in. */
+    hasEarlier?: boolean;
+    /** Page earlier history back in; the caller owns scroll-position preservation. */
+    onShowEarlier?: () => Promise<void>;
+    /**
+     * Ordinal base for thinking-collapse keys: the count of thinking chunks
+     * unloaded by the chat limit, so the remaining ordinals don't shift (and
+     * swap collapse state) when a trim removes older thinking blocks.
+     */
+    thinkingKeyBase?: number;
+    /**
+     * The latest `provider-retry` event for the current turn, or `null` when
+     * no retry is pending → renders the transient yellow "retrying…" banner.
+     * Never persisted (never part of the message history); coalesces to the
+     * newest attempt + delay, and is cleared when content resumes / turn ends.
+     */
+    providerRetry?: TurnProviderRetryEvent | null;
+  } = $props();
 
-	// True while a show-earlier page-in is awaited (disables the button).
-	let loadingEarlier = $state(false);
+  // True while a show-earlier page-in is awaited (disables the button).
+  let loadingEarlier = $state(false);
 
-	async function showEarlier() {
-		if (!onShowEarlier || loadingEarlier) return;
-		loadingEarlier = true;
-		try {
-			await onShowEarlier();
-		} finally {
-			loadingEarlier = false;
-		}
-	}
+  async function showEarlier() {
+    if (!onShowEarlier || loadingEarlier) return;
+    loadingEarlier = true;
+    try {
+      await onShowEarlier();
+    } finally {
+      loadingEarlier = false;
+    }
+  }
 
-	const groups = $derived(groupRenderedChunks(chunks));
+  const groups = $derived(groupRenderedChunks(chunks));
 
-	const rows = $derived(interleaveTurnMetrics(groups, turnMetrics));
+  const rows = $derived(interleaveTurnMetrics(groups, turnMetrics));
 
-	// Stable per-row keys. Thinking blocks get an ordinal key (`think<n>`) that
-	// survives the provisional→committed (seq null → seq N) transition, so the
-	// collapse's open/close state is NOT lost when a turn seals. The ordinal
-	// starts at `thinkingKeyBase` so keys also survive a chat-limit trim removing
-	// older thinking blocks. (App isolates these keys per conversation via {#key}.)
-	const keyedRows = $derived.by(() => {
-		let thinking = thinkingKeyBase;
-		return rows.map((row, i) => {
-			if (row.kind === "step-metrics") {
-				return { row, key: `s${row.step.stepId}` };
-			}
-			if (row.kind === "turn-metrics") {
-				return { row, key: `m${row.turn.turnId}` };
-			}
-			const group = row.group;
-			let key: string;
-			if (group.kind === "tool-batch") {
-				key = `b${group.stepId}`;
-			} else if (group.chunk.chunk.type === "thinking") {
-				key = `think${thinking++}`;
-			} else if (group.chunk.seq != null) {
-				key = `c${group.chunk.seq}`;
-			} else {
-				key = `p${i}`;
-			}
-			return { row, key };
-		});
-	});
+  // Stable per-row keys. Thinking blocks get an ordinal key (`think<n>`) that
+  // survives the provisional→committed (seq null → seq N) transition, so the
+  // collapse's open/close state is NOT lost when a turn seals. The ordinal
+  // starts at `thinkingKeyBase` so keys also survive a chat-limit trim removing
+  // older thinking blocks. (App isolates these keys per conversation via {#key}.)
+  const keyedRows = $derived.by(() => {
+    let thinking = thinkingKeyBase;
+    return rows.map((row, i) => {
+      if (row.kind === "step-metrics") {
+        return { row, key: `s${row.step.stepId}` };
+      }
+      if (row.kind === "turn-metrics") {
+        return { row, key: `m${row.turn.turnId}` };
+      }
+      const group = row.group;
+      let key: string;
+      if (group.kind === "tool-batch") {
+        key = `b${group.stepId}`;
+      } else if (group.chunk.chunk.type === "thinking") {
+        key = `think${thinking++}`;
+      } else if (group.chunk.seq != null) {
+        key = `c${group.chunk.seq}`;
+      } else {
+        key = `p${i}`;
+      }
+      return { row, key };
+    });
+  });
 </script>
 
 {#snippet chunkRow(rendered: RenderedChunk)}
-	{#if rendered.role === "user"}
-		<!-- User: a speech bubble, left-aligned -->
-		<div class="chat chat-start">
-			<div class="chat-bubble chat-bubble-primary">
-				{#if rendered.chunk.type === "text"}
-					<p>{rendered.chunk.text}</p>
-				{/if}
-			</div>
-		</div>
-	{:else if rendered.chunk.type === "thinking"}
-		<!-- Thinking: a visible bubble (like tool cards), holding a checkbox collapse
-		     (no arrow icon, smooth open/close). Title reads "Thinking" + loading dots
-		     while generating, then "Thoughts" with no dots once complete. -->
-		<div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0">
-			<div class="chat-bubble w-full bg-transparent">
-				<div class="collapse w-full rounded-box bg-base-200 text-sm">
-					<input type="checkbox" aria-label="Toggle thoughts" />
-					<div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium">
-						<span>{rendered.streaming ? "Thinking" : "Thoughts"}</span>
-						{#if rendered.streaming}
-							<span class="loading loading-dots loading-sm" aria-label="Generating"></span>
-						{/if}
-					</div>
-					<div class="collapse-content">
-						<p class="whitespace-pre-wrap">{rendered.chunk.text}</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	{:else if rendered.chunk.type === "tool-call" || rendered.chunk.type === "tool-result"}
-		<!-- Single tool call/result: a collapsible card (collapsed by default,
-		     like thinking). Title shows the tool name; content shows the
-		     input/output. Same chat-start grid shim as the thinking block. -->
-		<div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0">
-			<div class="chat-bubble w-full bg-transparent">
-				{#if rendered.chunk.type === "tool-call"}
-					<div class="collapse w-full rounded-box bg-base-200 text-sm">
-						<input type="checkbox" aria-label="Toggle tool call" />
-						<div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium">
-							<svg class="h-4 w-4 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-							<span>{rendered.chunk.toolName}</span>
-						</div>
-						<div class="collapse-content">
-							<pre class="overflow-x-auto text-xs">{JSON.stringify(rendered.chunk.input, null, 2)}</pre>
-						</div>
-					</div>
-				{:else}
-					<div class="collapse w-full rounded-box bg-base-200 text-sm">
-						<input type="checkbox" aria-label="Toggle tool result" />
-						<div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium" class:text-error={rendered.chunk.isError}>
-							<svg class="h-4 w-4 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-							<span>{rendered.chunk.toolName}</span>
-							{#if rendered.chunk.isError}
-								<span class="badge badge-error badge-xs">error</span>
-							{/if}
-						</div>
-						<div class="collapse-content">
-							<pre class="max-h-96 overflow-auto text-xs">{rendered.chunk.content}</pre>
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-	{:else}
-		<!-- Assistant text / system / error: an INVISIBLE speech bubble — same
-		     chat-start grid as the user bubble, so it inherits identical left spacing. -->
-		<div class="chat chat-start [&>.chat-bubble]:max-w-5xl">
-			<div class="chat-bubble w-full bg-transparent">
-				{#if rendered.chunk.type === "text"}
-					<Markdown text={rendered.chunk.text} streaming={rendered.streaming ?? false} />
-				{:else if rendered.chunk.type === "error"}
-					<div class="text-error" role="alert">
-						{rendered.chunk.message}
-						{#if rendered.chunk.code}
-							<span class="text-xs opacity-70">[{rendered.chunk.code}]</span>
-						{/if}
-					</div>
-				{:else if rendered.chunk.type === "system"}
-					<div class="text-sm opacity-70">{rendered.chunk.text}</div>
-				{/if}
-			</div>
-		</div>
-	{/if}
+  {#if rendered.role === "user"}
+    <!-- User: a speech bubble, left-aligned -->
+    <div class="chat chat-start">
+      <div class="chat-bubble chat-bubble-primary">
+        {#if rendered.chunk.type === "text"}
+          <p>{rendered.chunk.text}</p>
+        {/if}
+      </div>
+    </div>
+  {:else if rendered.chunk.type === "thinking"}
+    <!-- Thinking: a visible bubble (like tool cards), holding a checkbox collapse
+         (no arrow icon, smooth open/close). Title reads "Thinking" + loading dots
+         while generating, then "Thoughts" with no dots once complete. -->
+    <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0">
+      <div class="chat-bubble w-full bg-transparent">
+        <div class="collapse w-full rounded-box bg-base-200 text-sm">
+          <input type="checkbox" aria-label="Toggle thoughts" />
+          <div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium">
+            <span>{rendered.streaming ? "Thinking" : "Thoughts"}</span>
+            {#if rendered.streaming}
+              <span class="loading loading-dots loading-sm" aria-label="Generating"></span>
+            {/if}
+          </div>
+          <div class="collapse-content">
+            <p class="whitespace-pre-wrap">{rendered.chunk.text}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  {:else if rendered.chunk.type === "tool-call" || rendered.chunk.type === "tool-result"}
+    <!-- Single tool call/result: a collapsible card (collapsed by default,
+         like thinking). Title shows the tool name; content shows the
+         input/output. Same chat-start grid shim as the thinking block. -->
+    <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0">
+      <div class="chat-bubble w-full bg-transparent">
+        {#if rendered.chunk.type === "tool-call"}
+          <div class="collapse w-full rounded-box bg-base-200 text-sm">
+            <input type="checkbox" aria-label="Toggle tool call" />
+            <div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium">
+              <svg
+                class="h-4 w-4 opacity-60"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                ><path
+                  d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                /></svg
+              >
+              <span>{rendered.chunk.toolName}</span>
+            </div>
+            <div class="collapse-content">
+              <pre class="overflow-x-auto text-xs">{JSON.stringify(
+                  rendered.chunk.input,
+                  null,
+                  2,
+                )}</pre>
+            </div>
+          </div>
+        {:else}
+          <div class="collapse w-full rounded-box bg-base-200 text-sm">
+            <input type="checkbox" aria-label="Toggle tool result" />
+            <div
+              class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium"
+              class:text-error={rendered.chunk.isError}
+            >
+              <svg
+                class="h-4 w-4 opacity-60"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                ><path
+                  d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                /></svg
+              >
+              <span>{rendered.chunk.toolName}</span>
+              {#if rendered.chunk.isError}
+                <span class="badge badge-error badge-xs">error</span>
+              {/if}
+            </div>
+            <div class="collapse-content">
+              <pre class="max-h-96 overflow-auto text-xs">{rendered.chunk.content}</pre>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {:else}
+    <!-- Assistant text / system / error: an INVISIBLE speech bubble — same
+         chat-start grid as the user bubble, so it inherits identical left spacing. -->
+    <div class="chat chat-start [&>.chat-bubble]:max-w-5xl">
+      <div class="chat-bubble w-full bg-transparent">
+        {#if rendered.chunk.type === "text"}
+          <Markdown text={rendered.chunk.text} streaming={rendered.streaming ?? false} />
+        {:else if rendered.chunk.type === "error"}
+          <div class="text-error" role="alert">
+            {rendered.chunk.message}
+            {#if rendered.chunk.code}
+              <span class="text-xs opacity-70">[{rendered.chunk.code}]</span>
+            {/if}
+          </div>
+        {:else if rendered.chunk.type === "system"}
+          <div class="text-sm opacity-70">{rendered.chunk.text}</div>
+        {/if}
+      </div>
+    </div>
+  {/if}
 {/snippet}
 
 <div class="flex flex-col gap-2 p-4 pl-6" role="log" aria-live="polite">
-	{#if hasEarlier && onShowEarlier}
-		<!-- Chat limit: older chunks are unloaded; offer to page them back in. -->
-		<div class="flex justify-center">
-			<button class="btn btn-ghost btn-xs" disabled={loadingEarlier} onclick={showEarlier}>
-				{#if loadingEarlier}
-					<span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
-					Loading earlier messages…
-				{:else}
-					Show earlier messages
-				{/if}
-			</button>
-		</div>
-	{/if}
-	{#each keyedRows as { row, key } (key)}
-		{#if row.kind === "step-metrics"}
-			{@const sv = viewStepMetrics(row.step, row.index)}
-			<div class="chat chat-start">
-				<div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
-					<div class="text-xs opacity-70">
-						{sv.label} · {sv.tokensLabel}
-						{#if sv.tps} · {sv.tps}{/if}
-						{#if sv.genTotal} · {sv.genTotal}{/if}
-					</div>
-				</div>
-			</div>
-		{:else if row.kind === "turn-metrics"}
-			{@const turnView = viewTurnMetrics(row.turn, row.turnNumber)}
-			{@const lastCache = viewCacheRate(row.turn.usage)}
-			{@const chatCache = viewCacheRate(row.cumulativeUsage)}
-			{@const retention = viewExpectedCache(row.turn.usage, row.prevTurnUsage)}
-			<div class="chat chat-start">
-				<div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
-					<div class="flex flex-col gap-1 text-xs">
-						<div class="opacity-70">
-							{turnView.label} · {turnView.tokensLabel} ({turnView.breakdown})
-							{#if turnView.tps} · {turnView.tps}{/if}
-							{#if turnView.duration} · {turnView.duration}{/if}
-						</div>
-						<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
-							<span class="flex items-center gap-1">
-								<span class="opacity-70">Last turn:</span>
-								<span class="badge badge-sm {badgeClass[lastCache.level]}">{lastCache.pct}%</span>
-							</span>
-							<span class="flex items-center gap-1">
-								<span class="opacity-70">Chat Total:</span>
-								<span class="badge badge-sm {badgeClass[chatCache.level]}">{chatCache.pct}%</span>
-							</span>
-							{#if retention}
-								<span class="flex items-center gap-1">
-									<span class="opacity-70">Retention:</span>
-									<span class="badge badge-sm {badgeClass[retention.level]}">{retention.pct}%</span>
-								</span>
-							{/if}
-						</div>
-					</div>
-				</div>
-			</div>
-		{:else if row.group.kind === "single"}
-			{@render chunkRow(row.group.chunk)}
-		{:else}
-			<!-- Batched tool calls (one step): each entry is a collapsible card.
-			     Click to expand and see the input/output. -->
-			<div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0">
-				<div class="chat-bubble w-full bg-transparent">
-					<div class="flex flex-col gap-1">
-						{#each row.group.entries as entry (entry.call.toolCallId)}
-							<div class="collapse w-full rounded-box bg-base-200 text-sm">
-								<input type="checkbox" aria-label="Toggle tool call" />
-								<div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium">
-									<svg class="h-4 w-4 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-									<span>{entry.call.toolName}</span>
-									{#if entry.result?.isError}
-										<span class="badge badge-error badge-xs">error</span>
-									{:else if entry.result === null}
-										<span class="loading loading-spinner loading-xs" aria-label="Running"></span>
-									{/if}
-								</div>
-								<div class="collapse-content">
-									<pre class="overflow-x-auto text-xs">{JSON.stringify(entry.call.input, null, 2)}</pre>
-									{#if entry.result}
-										<pre class="mt-1 max-h-96 overflow-auto text-xs" class:text-error={entry.result.isError}>{entry.result.content}</pre>
-									{/if}
-								</div>
-							</div>
-						{/each}
-					</div>
-				</div>
-			</div>
-		{/if}
-	{/each}
-	{#if providerRetry}
-		{@const rv = viewProviderRetry(providerRetry)}
-		<!-- Transient yellow warning: a provider error is being retried with backoff.
-		     NOT a message chunk (never persisted/replayed) — a live UI notification only,
-		     shown where the reply would appear. Coalesces to the newest attempt + delay,
-		     and is cleared (foldEvent) when content resumes or the turn ends. -->
-		<div class="chat chat-start [&>.chat-bubble]:max-w-5xl">
-			<div class="chat-bubble w-full bg-transparent">
-				<div class="alert alert-warning flex-wrap items-start gap-2 py-2 text-sm" role="status">
-					<div class="flex flex-wrap items-center gap-2 font-medium">
-						<span aria-hidden="true">⚠</span>
-						<span>{rv.attemptLabel} — retrying in {rv.delayLabel}…</span>
-						{#if rv.code}
-							<span class="badge badge-warning badge-sm font-mono">{rv.code}</span>
-						{/if}
-					</div>
-					<div class="w-full font-mono text-xs opacity-70">{rv.message}</div>
-				</div>
-			</div>
-		</div>
-	{/if}
+  {#if hasEarlier && onShowEarlier}
+    <!-- Chat limit: older chunks are unloaded; offer to page them back in. -->
+    <div class="flex justify-center">
+      <button class="btn btn-ghost btn-xs" disabled={loadingEarlier} onclick={showEarlier}>
+        {#if loadingEarlier}
+          <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
+          Loading earlier messages…
+        {:else}
+          Show earlier messages
+        {/if}
+      </button>
+    </div>
+  {/if}
+  {#each keyedRows as { row, key } (key)}
+    {#if row.kind === "step-metrics"}
+      {@const sv = viewStepMetrics(row.step, row.index)}
+      <div class="chat chat-start">
+        <div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
+          <div class="text-xs opacity-70">
+            {sv.label} · {sv.tokensLabel}
+            {#if sv.tps}
+              · {sv.tps}{/if}
+            {#if sv.genTotal}
+              · {sv.genTotal}{/if}
+          </div>
+        </div>
+      </div>
+    {:else if row.kind === "turn-metrics"}
+      {@const turnView = viewTurnMetrics(row.turn, row.turnNumber)}
+      {@const lastCache = viewCacheRate(row.turn.usage)}
+      {@const chatCache = viewCacheRate(row.cumulativeUsage)}
+      {@const retention = viewExpectedCache(row.turn.usage, row.prevTurnUsage)}
+      <div class="chat chat-start">
+        <div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
+          <div class="flex flex-col gap-1 text-xs">
+            <div class="opacity-70">
+              {turnView.label} · {turnView.tokensLabel} ({turnView.breakdown})
+              {#if turnView.tps}
+                · {turnView.tps}{/if}
+              {#if turnView.duration}
+                · {turnView.duration}{/if}
+            </div>
+            <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+              <span class="flex items-center gap-1">
+                <span class="opacity-70">Last turn:</span>
+                <span class="badge badge-sm {badgeClass[lastCache.level]}">{lastCache.pct}%</span>
+              </span>
+              <span class="flex items-center gap-1">
+                <span class="opacity-70">Chat Total:</span>
+                <span class="badge badge-sm {badgeClass[chatCache.level]}">{chatCache.pct}%</span>
+              </span>
+              {#if retention}
+                <span class="flex items-center gap-1">
+                  <span class="opacity-70">Retention:</span>
+                  <span class="badge badge-sm {badgeClass[retention.level]}">{retention.pct}%</span>
+                </span>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </div>
+    {:else if row.group.kind === "single"}
+      {@render chunkRow(row.group.chunk)}
+    {:else}
+      <!-- Batched tool calls (one step): each entry is a collapsible card.
+           Click to expand and see the input/output. -->
+      <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0">
+        <div class="chat-bubble w-full bg-transparent">
+          <div class="flex flex-col gap-1">
+            {#each row.group.entries as entry (entry.call.toolCallId)}
+              <div class="collapse w-full rounded-box bg-base-200 text-sm">
+                <input type="checkbox" aria-label="Toggle tool call" />
+                <div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium">
+                  <svg
+                    class="h-4 w-4 opacity-60"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path
+                      d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                    /></svg
+                  >
+                  <span>{entry.call.toolName}</span>
+                  {#if entry.result?.isError}
+                    <span class="badge badge-error badge-xs">error</span>
+                  {:else if entry.result === null}
+                    <span class="loading loading-spinner loading-xs" aria-label="Running"></span>
+                  {/if}
+                </div>
+                <div class="collapse-content">
+                  <pre class="overflow-x-auto text-xs">{JSON.stringify(
+                      entry.call.input,
+                      null,
+                      2,
+                    )}</pre>
+                  {#if entry.result}
+                    <pre
+                      class="mt-1 max-h-96 overflow-auto text-xs"
+                      class:text-error={entry.result.isError}>{entry.result.content}</pre>
+                  {/if}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/if}
+  {/each}
+  {#if providerRetry}
+    {@const rv = viewProviderRetry(providerRetry)}
+    <!-- Transient yellow warning: a provider error is being retried with backoff.
+         NOT a message chunk (never persisted/replayed) — a live UI notification only,
+         shown where the reply would appear. Coalesces to the newest attempt + delay,
+         and is cleared (foldEvent) when content resumes or the turn ends. -->
+    <div class="chat chat-start [&>.chat-bubble]:max-w-5xl">
+      <div class="chat-bubble w-full bg-transparent">
+        <div class="alert alert-warning flex-wrap items-start gap-2 py-2 text-sm" role="status">
+          <div class="flex flex-wrap items-center gap-2 font-medium">
+            <span aria-hidden="true">⚠</span>
+            <span>{rv.attemptLabel} — retrying in {rv.delayLabel}…</span>
+            {#if rv.code}
+              <span class="badge badge-warning badge-sm font-mono">{rv.code}</span>
+            {/if}
+          </div>
+          <div class="w-full font-mono text-xs opacity-70">{rv.message}</div>
+        </div>
+      </div>
+    </div>
+  {/if}
 </div>
diff --git a/src/features/chat/ui/CompactionView.svelte b/src/features/chat/ui/CompactionView.svelte
index 7bec984..5014e5c 100644
--- a/src/features/chat/ui/CompactionView.svelte
+++ b/src/features/chat/ui/CompactionView.svelte
@@ -1,154 +1,154 @@
 <script lang="ts">
-	export type CompactNowResult =
-		| { readonly ok: true; readonly messagesSummarized: number; readonly messagesKept: number }
-		| { readonly ok: false; readonly error: string };
+  export type CompactNowResult =
+    | { readonly ok: true; readonly messagesSummarized: number; readonly messagesKept: number }
+    | { readonly ok: false; readonly error: string };
 
-	export type SaveCompactPercentResult =
-		| { readonly ok: true; readonly percent: number }
-		| { readonly ok: false; readonly error: string };
+  export type SaveCompactPercentResult =
+    | { readonly ok: true; readonly percent: number }
+    | { readonly ok: false; readonly error: string };
 
-	let {
-		percent,
-		canCompact,
-		compactNow,
-		savePercent,
-	}: {
-		/** The conversation's auto-compact percent (0-100), or null when not yet fetched. 0 = disabled. */
-		percent: number | null;
-		/** Whether a real conversation is focused (a draft has nothing to compact). */
-		canCompact: boolean;
-		compactNow: () => Promise<CompactNowResult | null>;
-		savePercent: (percent: number) => Promise<SaveCompactPercentResult | null>;
-	} = $props();
+  let {
+    percent,
+    canCompact,
+    compactNow,
+    savePercent,
+  }: {
+    /** The conversation's auto-compact percent (0-100), or null when not yet fetched. 0 = disabled. */
+    percent: number | null;
+    /** Whether a real conversation is focused (a draft has nothing to compact). */
+    canCompact: boolean;
+    compactNow: () => Promise<CompactNowResult | null>;
+    savePercent: (percent: number) => Promise<SaveCompactPercentResult | null>;
+  } = $props();
 
-	const DEFAULT_PERCENT = 85;
+  const DEFAULT_PERCENT = 85;
 
-	let compacting = $state(false);
-	let compactError = $state<string | null>(null);
-	let compactResult = $state<{ summarized: number; kept: number } | null>(null);
+  let compacting = $state(false);
+  let compactError = $state<string | null>(null);
+  let compactResult = $state<{ summarized: number; kept: number } | null>(null);
 
-	let percentInput = $state("");
-	let savingPercent = $state(false);
-	let percentError = $state<string | null>(null);
-	let percentSaved = $state(false);
+  let percentInput = $state("");
+  let savingPercent = $state(false);
+  let percentError = $state<string | null>(null);
+  let percentSaved = $state(false);
 
-	// Sync the input from the prop when it changes (focus switch / initial load).
-	let lastPercent = $state<number | null>(null);
-	$effect(() => {
-		if (percent !== lastPercent) {
-			lastPercent = percent;
-			percentInput = percent !== null ? String(percent) : "";
-			percentError = null;
-			percentSaved = false;
-		}
-	});
+  // Sync the input from the prop when it changes (focus switch / initial load).
+  let lastPercent = $state<number | null>(null);
+  $effect(() => {
+    if (percent !== lastPercent) {
+      lastPercent = percent;
+      percentInput = percent !== null ? String(percent) : "";
+      percentError = null;
+      percentSaved = false;
+    }
+  });
 
-	const percentLabel = $derived(
-		percent == null
-			? "Loading…"
-			: percent === 0
-				? "Disabled (manual only)"
-				: percent === DEFAULT_PERCENT
-					? `${percent}% (default)`
-					: `${percent}%`,
-	);
+  const percentLabel = $derived(
+    percent == null
+      ? "Loading…"
+      : percent === 0
+        ? "Disabled (manual only)"
+        : percent === DEFAULT_PERCENT
+          ? `${percent}% (default)`
+          : `${percent}%`,
+  );
 
-	async function handleCompact() {
-		if (compacting || !canCompact) return;
-		compacting = true;
-		compactError = null;
-		compactResult = null;
-		const result = await compactNow();
-		compacting = false;
-		if (result === null) return;
-		if (result.ok) {
-			compactResult = { summarized: result.messagesSummarized, kept: result.messagesKept };
-		} else {
-			compactError = result.error;
-		}
-	}
+  async function handleCompact() {
+    if (compacting || !canCompact) return;
+    compacting = true;
+    compactError = null;
+    compactResult = null;
+    const result = await compactNow();
+    compacting = false;
+    if (result === null) return;
+    if (result.ok) {
+      compactResult = { summarized: result.messagesSummarized, kept: result.messagesKept };
+    } else {
+      compactError = result.error;
+    }
+  }
 
-	async function handleSavePercent() {
-		const value = Number.parseInt(percentInput, 10);
-		if (Number.isNaN(value) || value < 0 || value > 100) {
-			percentError = "Must be 0-100";
-			return;
-		}
-		savingPercent = true;
-		percentError = null;
-		percentSaved = false;
-		const result = await savePercent(value);
-		savingPercent = false;
-		if (result === null) return;
-		if (result.ok) {
-			percentSaved = true;
-		} else {
-			percentError = result.error;
-		}
-	}
+  async function handleSavePercent() {
+    const value = Number.parseInt(percentInput, 10);
+    if (Number.isNaN(value) || value < 0 || value > 100) {
+      percentError = "Must be 0-100";
+      return;
+    }
+    savingPercent = true;
+    percentError = null;
+    percentSaved = false;
+    const result = await savePercent(value);
+    savingPercent = false;
+    if (result === null) return;
+    if (result.ok) {
+      percentSaved = true;
+    } else {
+      percentError = result.error;
+    }
+  }
 </script>
 
 <div class="flex flex-col gap-3">
-	<!-- Manual compaction -->
-	<section class="flex flex-col gap-1">
-		<span class="text-xs font-semibold uppercase opacity-60">Manual compaction</span>
-		<button
-			type="button"
-			class="btn btn-sm btn-outline"
-			disabled={!canCompact || compacting}
-			onclick={handleCompact}
-		>
-			{#if compacting}
-				<span class="loading loading-spinner loading-xs"></span>
-				Compacting…
-			{:else}
-				Compact now
-			{/if}
-		</button>
-		{#if !canCompact}
-			<p class="text-xs opacity-60">Open or start a conversation to compact its history.</p>
-		{:else if compactError}
-			<p class="text-xs text-error">{compactError}</p>
-		{:else if compactResult}
-			<p class="text-xs text-success">
-				Compacted — {compactResult.summarized} messages summarized, {compactResult.kept} kept.
-			</p>
-		{:else}
-			<p class="text-xs opacity-50">
-				Summarizes old messages into a system summary + retains the most recent messages.
-			</p>
-		{/if}
-	</section>
+  <!-- Manual compaction -->
+  <section class="flex flex-col gap-1">
+    <span class="text-xs font-semibold uppercase opacity-60">Manual compaction</span>
+    <button
+      type="button"
+      class="btn btn-sm btn-outline"
+      disabled={!canCompact || compacting}
+      onclick={handleCompact}
+    >
+      {#if compacting}
+        <span class="loading loading-spinner loading-xs"></span>
+        Compacting…
+      {:else}
+        Compact now
+      {/if}
+    </button>
+    {#if !canCompact}
+      <p class="text-xs opacity-60">Open or start a conversation to compact its history.</p>
+    {:else if compactError}
+      <p class="text-xs text-error">{compactError}</p>
+    {:else if compactResult}
+      <p class="text-xs text-success">
+        Compacted — {compactResult.summarized} messages summarized, {compactResult.kept} kept.
+      </p>
+    {:else}
+      <p class="text-xs opacity-50">
+        Summarizes old messages into a system summary + retains the most recent messages.
+      </p>
+    {/if}
+  </section>
 
-	<!-- Auto-compact percent -->
-	<section class="flex flex-col gap-1">
-		<span class="text-xs font-semibold uppercase opacity-60">Auto-compact percent</span>
-		<div class="flex items-center gap-2">
-			<input
-				type="number"
-				class="input input-bordered input-sm w-24"
-				min="0"
-				max="100"
-				placeholder={String(DEFAULT_PERCENT)}
-				value={percentInput}
-				disabled={savingPercent}
-				onchange={handleSavePercent}
-				aria-label="Compact percent (0-100)"
-			/>
-			<span class="text-xs opacity-60">%</span>
-			{#if savingPercent}
-				<span class="loading loading-spinner loading-xs"></span>
-			{/if}
-		</div>
-		<p class="text-xs opacity-50">
-			Current: {percentLabel}
-			<br />
-			0 disables auto-compact. Default is {DEFAULT_PERCENT}%.
-		</p>
-		{#if percentError}
-			<p class="text-xs text-error">{percentError}</p>
-		{:else if percentSaved}
-			<p class="text-xs text-success">Saved.</p>
-		{/if}
-	</section>
+  <!-- Auto-compact percent -->
+  <section class="flex flex-col gap-1">
+    <span class="text-xs font-semibold uppercase opacity-60">Auto-compact percent</span>
+    <div class="flex items-center gap-2">
+      <input
+        type="number"
+        class="input input-bordered input-sm w-24"
+        min="0"
+        max="100"
+        placeholder={String(DEFAULT_PERCENT)}
+        value={percentInput}
+        disabled={savingPercent}
+        onchange={handleSavePercent}
+        aria-label="Compact percent (0-100)"
+      />
+      <span class="text-xs opacity-60">%</span>
+      {#if savingPercent}
+        <span class="loading loading-spinner loading-xs"></span>
+      {/if}
+    </div>
+    <p class="text-xs opacity-50">
+      Current: {percentLabel}
+      <br />
+      0 disables auto-compact. Default is {DEFAULT_PERCENT}%.
+    </p>
+    {#if percentError}
+      <p class="text-xs text-error">{percentError}</p>
+    {:else if percentSaved}
+      <p class="text-xs text-success">Saved.</p>
+    {/if}
+  </section>
 </div>
diff --git a/src/features/chat/ui/Composer.svelte b/src/features/chat/ui/Composer.svelte
index fe9ea94..96b4b3a 100644
--- a/src/features/chat/ui/Composer.svelte
+++ b/src/features/chat/ui/Composer.svelte
@@ -1,198 +1,198 @@
 <script lang="ts">
-	import { computeContextUsage, formatCompactTokens } from "../../../core/metrics";
+  import { computeContextUsage, formatCompactTokens } from "../../../core/metrics";
 
-	const FALLBACK_CONTEXT_WINDOW = 1_000_000;
-	const MAX_LINES = 7;
+  const FALLBACK_CONTEXT_WINDOW = 1_000_000;
+  const MAX_LINES = 7;
 
-	let {
-		onSend,
-		onQueue,
-		onStop,
-		contextSize = undefined,
-		contextWindow = undefined,
-		status = "idle",
-	}: {
-		onSend: (text: string) => void;
-		/**
-		 * Enqueue a steering message (`chat.queue`). When provided AND the status
-		 * is `running`, the send button becomes a "Queue" button that steers the
-		 * in-flight turn instead of starting a new one. When absent, `onSend` is
-		 * used regardless (tests / non-steering contexts).
-		 */
-		onQueue?: (text: string) => void;
-		/** Stop the in-flight generation (`POST /conversations/:id/stop`). */
-		onStop?: () => void;
-		// Current context occupancy (latest turn's contextSize), or `undefined`
-		// when unknown — the status bar then shows "— tokens", never 0%.
-		contextSize?: number | undefined;
-		/** Per-model context window (max tokens) from `GET /models` modelInfo. */
-		contextWindow?: number | undefined;
-		// Coarse agent status for the status-bar icon.
-		status?: "idle" | "running" | "error";
-	} = $props();
+  let {
+    onSend,
+    onQueue,
+    onStop,
+    contextSize = undefined,
+    contextWindow = undefined,
+    status = "idle",
+  }: {
+    onSend: (text: string) => void;
+    /**
+     * Enqueue a steering message (`chat.queue`). When provided AND the status
+     * is `running`, the send button becomes a "Queue" button that steers the
+     * in-flight turn instead of starting a new one. When absent, `onSend` is
+     * used regardless (tests / non-steering contexts).
+     */
+    onQueue?: (text: string) => void;
+    /** Stop the in-flight generation (`POST /conversations/:id/stop`). */
+    onStop?: () => void;
+    // Current context occupancy (latest turn's contextSize), or `undefined`
+    // when unknown — the status bar then shows "— tokens", never 0%.
+    contextSize?: number | undefined;
+    /** Per-model context window (max tokens) from `GET /models` modelInfo. */
+    contextWindow?: number | undefined;
+    // Coarse agent status for the status-bar icon.
+    status?: "idle" | "running" | "error";
+  } = $props();
 
-	let text = $state("");
-	let inputEl: HTMLTextAreaElement | undefined;
+  let text = $state("");
+  let inputEl: HTMLTextAreaElement | undefined;
 
-	const hasText = $derived(text.trim().length > 0);
-	const effectiveMax = $derived(contextWindow ?? FALLBACK_CONTEXT_WINDOW);
-	const usage = $derived(computeContextUsage(contextSize, effectiveMax));
-	const hasUsage = $derived(contextSize !== undefined);
+  const hasText = $derived(text.trim().length > 0);
+  const effectiveMax = $derived(contextWindow ?? FALLBACK_CONTEXT_WINDOW);
+  const usage = $derived(computeContextUsage(contextSize, effectiveMax));
+  const hasUsage = $derived(contextSize !== undefined);
 
-	// One button, three modes:
-	// - idle → "Send" (starts a turn via chat.send)
-	// - running + text → "Queue" (steers via chat.queue)
-	// - running + empty → "Stop" (aborts via POST /stop)
-	const buttonMode = $derived.by<"send" | "queue" | "stop">(() => {
-		if (status === "running" && !hasText && onStop !== undefined) return "stop";
-		if (status === "running" && hasText && onQueue !== undefined) return "queue";
-		return "send";
-	});
-	const placeholder = $derived(status === "running" ? "Steer the conversation..." : "Type a message...");
+  // One button, three modes:
+  // - idle → "Send" (starts a turn via chat.send)
+  // - running + text → "Queue" (steers via chat.queue)
+  // - running + empty → "Stop" (aborts via POST /stop)
+  const buttonMode = $derived.by<"send" | "queue" | "stop">(() => {
+    if (status === "running" && !hasText && onStop !== undefined) return "stop";
+    if (status === "running" && hasText && onQueue !== undefined) return "queue";
+    return "send";
+  });
+  const placeholder = $derived(
+    status === "running" ? "Steer the conversation..." : "Type a message...",
+  );
 
-	// As the window fills, escalate color: calm → warning → danger.
-	function fillClass(pct: number): string {
-		if (pct >= 90) return "progress-error";
-		if (pct >= 70) return "progress-warning";
-		return "progress-success";
-	}
+  // As the window fills, escalate color: calm → warning → danger.
+  function fillClass(pct: number): string {
+    if (pct >= 90) return "progress-error";
+    if (pct >= 70) return "progress-warning";
+    return "progress-success";
+  }
 
-	function resize(): void {
-		const el = inputEl;
-		if (!el) return;
-		el.style.height = "auto";
-		const style = getComputedStyle(el);
-		const lineHeight = Number.parseFloat(style.lineHeight) || 20;
-		const paddingY =
-			Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
-		const borderY =
-			Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
-		const maxHeight = lineHeight * MAX_LINES + paddingY + borderY;
-		const next = Math.min(el.scrollHeight, maxHeight);
-		el.style.height = `${next}px`;
-		el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
-	}
+  function resize(): void {
+    const el = inputEl;
+    if (!el) return;
+    el.style.height = "auto";
+    const style = getComputedStyle(el);
+    const lineHeight = Number.parseFloat(style.lineHeight) || 20;
+    const paddingY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+    const borderY =
+      Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
+    const maxHeight = lineHeight * MAX_LINES + paddingY + borderY;
+    const next = Math.min(el.scrollHeight, maxHeight);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+  }
 
-	// Re-run resize whenever the value changes (covers programmatic clears too).
-	$effect(() => {
-		void text;
-		resize();
-	});
+  // Re-run resize whenever the value changes (covers programmatic clears too).
+  $effect(() => {
+    void text;
+    resize();
+  });
 
-	function handleSubmit(): void {
-		const trimmed = text.trim();
-		if (trimmed.length === 0) return;
-		if (buttonMode === "queue") {
-			onQueue?.(trimmed);
-		} else {
-			onSend(trimmed);
-		}
-		text = "";
-	}
+  function handleSubmit(): void {
+    const trimmed = text.trim();
+    if (trimmed.length === 0) return;
+    if (buttonMode === "queue") {
+      onQueue?.(trimmed);
+    } else {
+      onSend(trimmed);
+    }
+    text = "";
+  }
 
-	function handleKeydown(e: KeyboardEvent): void {
-		if (e.key === "Enter" && !e.shiftKey) {
-			e.preventDefault();
-			handleSubmit();
-		}
-	}
+  function handleKeydown(e: KeyboardEvent): void {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
 </script>
 
 <form
-	class="flex flex-col"
-	onsubmit={(e) => {
-		e.preventDefault();
-		handleSubmit();
-	}}
+  class="flex flex-col"
+  onsubmit={(e) => {
+    e.preventDefault();
+    handleSubmit();
+  }}
 >
-	<!-- Top bar: expanding textarea + single context-aware button -->
-	<div class="flex items-end gap-2 px-4 pt-3 pb-2">
-		<textarea
-			bind:this={inputEl}
-			class="textarea textarea-bordered flex-1 resize-none leading-normal !min-h-0 h-auto"
-			bind:value={text}
-			onkeydown={handleKeydown}
-			placeholder={placeholder}
-			rows="1"
-			aria-label="Message input"
-		></textarea>
-		{#if buttonMode === "stop"}
-			<button
-				class="btn btn-error w-20 shrink-0"
-				type="button"
-				aria-label="Stop generation"
-				onclick={() => onStop?.()}
-			>
-				Stop
-			</button>
-		{:else}
-			<button class="btn btn-primary w-20 shrink-0" type="submit" disabled={!hasText}>
-				{buttonMode === "queue" ? "Queue" : "Send"}
-			</button>
-		{/if}
-	</div>
+  <!-- Top bar: expanding textarea + single context-aware button -->
+  <div class="flex items-end gap-2 px-4 pt-3 pb-2">
+    <textarea
+      bind:this={inputEl}
+      class="textarea textarea-bordered flex-1 resize-none leading-normal !min-h-0 h-auto"
+      bind:value={text}
+      onkeydown={handleKeydown}
+      {placeholder}
+      rows="1"
+      aria-label="Message input"></textarea>
+    {#if buttonMode === "stop"}
+      <button
+        class="btn btn-error w-20 shrink-0"
+        type="button"
+        aria-label="Stop generation"
+        onclick={() => onStop?.()}
+      >
+        Stop
+      </button>
+    {:else}
+      <button class="btn btn-primary w-20 shrink-0" type="submit" disabled={!hasText}>
+        {buttonMode === "queue" ? "Queue" : "Send"}
+      </button>
+    {/if}
+  </div>
 
-	<!-- Bottom status bar: status icon · context-window fill · token count -->
-	<div class="flex items-center gap-2 px-4 pb-2 text-xs text-base-content/50">
-		<span class="shrink-0">
-			{#if status === "running"}
-				<span class="loading loading-spinner loading-xs text-primary"></span>
-			{:else if status === "error"}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="h-4 w-4 text-error"
-					aria-label="Error"
-				>
-					<circle cx="12" cy="12" r="10"></circle>
-					<line x1="12" y1="8" x2="12" y2="12"></line>
-					<line x1="12" y1="16" x2="12.01" y2="16"></line>
-				</svg>
-			{:else}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="h-4 w-4 text-success"
-					aria-label="Idle"
-				>
-					<polyline points="20 6 9 17 4 12"></polyline>
-				</svg>
-			{/if}
-		</span>
+  <!-- Bottom status bar: status icon · context-window fill · token count -->
+  <div class="flex items-center gap-2 px-4 pb-2 text-xs text-base-content/50">
+    <span class="shrink-0">
+      {#if status === "running"}
+        <span class="loading loading-spinner loading-xs text-primary"></span>
+      {:else if status === "error"}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4 text-error"
+          aria-label="Error"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+      {:else}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4 text-success"
+          aria-label="Idle"
+        >
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      {/if}
+    </span>
 
-		{#if usage.percent !== null}
-			<progress
-				class="progress h-2 flex-1 {fillClass(usage.percent)}"
-				value={usage.percent}
-				max="100"
-			></progress>
-		{:else}
-			<progress class="progress h-2 flex-1 opacity-40" value="0" max="100"></progress>
-		{/if}
+    {#if usage.percent !== null}
+      <progress
+        class="progress h-2 flex-1 {fillClass(usage.percent)}"
+        value={usage.percent}
+        max="100"
+      ></progress>
+    {:else}
+      <progress class="progress h-2 flex-1 opacity-40" value="0" max="100"></progress>
+    {/if}
 
-		<span class="shrink-0 whitespace-nowrap font-mono">
-			{#if hasUsage}
-				{formatCompactTokens(usage.current)}{#if usage.max !== null}<span
-						class="text-base-content/40"
-					>
-						/ {formatCompactTokens(usage.max)}</span
-					>{/if}
-				{#if usage.percent !== null}
-					<span class="ml-1">· {usage.percent.toFixed(1)}%</span>
-				{/if}
-			{:else}
-				<span class="text-base-content/40">— tokens</span>
-			{/if}
-		</span>
-	</div>
+    <span class="shrink-0 whitespace-nowrap font-mono">
+      {#if hasUsage}
+        {formatCompactTokens(usage.current)}{#if usage.max !== null}<span
+            class="text-base-content/40"
+          >
+            / {formatCompactTokens(usage.max)}</span
+          >{/if}
+        {#if usage.percent !== null}
+          <span class="ml-1">· {usage.percent.toFixed(1)}%</span>
+        {/if}
+      {:else}
+        <span class="text-base-content/40">— tokens</span>
+      {/if}
+    </span>
+  </div>
 </form>
diff --git a/src/features/chat/ui/ModelSelector.svelte b/src/features/chat/ui/ModelSelector.svelte
index a288cb8..03acb79 100644
--- a/src/features/chat/ui/ModelSelector.svelte
+++ b/src/features/chat/ui/ModelSelector.svelte
@@ -1,50 +1,50 @@
 <script lang="ts">
-	import { joinModelName, modelKeys, modelsForKey, splitModelName } from "../model-select";
+  import { joinModelName, modelKeys, modelsForKey, splitModelName } from "../model-select";
 
-	let {
-		models,
-		selected,
-		onSelect,
-	}: {
-		models: readonly string[];
-		selected: string;
-		onSelect: (model: string) => void;
-	} = $props();
+  let {
+    models,
+    selected,
+    onSelect,
+  }: {
+    models: readonly string[];
+    selected: string;
+    onSelect: (model: string) => void;
+  } = $props();
 
-	const keys = $derived(modelKeys(models));
-	const current = $derived(splitModelName(selected));
-	const keyModels = $derived(modelsForKey(models, current.key));
+  const keys = $derived(modelKeys(models));
+  const current = $derived(splitModelName(selected));
+  const keyModels = $derived(modelsForKey(models, current.key));
 
-	// Switching key jumps to the first model available under it.
-	function selectKey(key: string): void {
-		const first = modelsForKey(models, key)[0] ?? "";
-		onSelect(joinModelName(key, first));
-	}
+  // Switching key jumps to the first model available under it.
+  function selectKey(key: string): void {
+    const first = modelsForKey(models, key)[0] ?? "";
+    onSelect(joinModelName(key, first));
+  }
 
-	function selectModel(model: string): void {
-		onSelect(joinModelName(current.key, model));
-	}
+  function selectModel(model: string): void {
+    onSelect(joinModelName(current.key, model));
+  }
 </script>
 
 <div class="flex flex-col gap-2">
-	<select
-		class="select w-full"
-		value={current.key}
-		onchange={(e) => selectKey(e.currentTarget.value)}
-		aria-label="Key selector"
-	>
-		{#each keys as key (key)}
-			<option value={key}>{key}</option>
-		{/each}
-	</select>
-	<select
-		class="select w-full"
-		value={current.model}
-		onchange={(e) => selectModel(e.currentTarget.value)}
-		aria-label="Model selector"
-	>
-		{#each keyModels as model (model)}
-			<option value={model}>{model}</option>
-		{/each}
-	</select>
+  <select
+    class="select w-full"
+    value={current.key}
+    onchange={(e) => selectKey(e.currentTarget.value)}
+    aria-label="Key selector"
+  >
+    {#each keys as key (key)}
+      <option value={key}>{key}</option>
+    {/each}
+  </select>
+  <select
+    class="select w-full"
+    value={current.model}
+    onchange={(e) => selectModel(e.currentTarget.value)}
+    aria-label="Model selector"
+  >
+    {#each keyModels as model (model)}
+      <option value={model}>{model}</option>
+    {/each}
+  </select>
 </div>
diff --git a/src/features/chat/ui/ReasoningEffortSelector.svelte b/src/features/chat/ui/ReasoningEffortSelector.svelte
index 8c7b193..d982905 100644
--- a/src/features/chat/ui/ReasoningEffortSelector.svelte
+++ b/src/features/chat/ui/ReasoningEffortSelector.svelte
@@ -1,75 +1,75 @@
 <script lang="ts">
-	import type { ReasoningEffort } from "@dispatch/transport-contract";
-	import {
-		effectiveEffort,
-		effortOptions,
-		isReasoningEffort,
-		type SaveReasoningEffort,
-	} from "../reasoning-effort";
+  import type { ReasoningEffort } from "@dispatch/transport-contract";
+  import {
+    effectiveEffort,
+    effortOptions,
+    isReasoningEffort,
+    type SaveReasoningEffort,
+  } from "../reasoning-effort";
 
-	let {
-		persisted,
-		save,
-	}: {
-		/** The conversation's persisted level, or null when never set (default applies). */
-		persisted: ReasoningEffort | null;
-		save: SaveReasoningEffort;
-	} = $props();
+  let {
+    persisted,
+    save,
+  }: {
+    /** The conversation's persisted level, or null when never set (default applies). */
+    persisted: ReasoningEffort | null;
+    save: SaveReasoningEffort;
+  } = $props();
 
-	const options = effortOptions();
+  const options = effortOptions();
 
-	// The user's in-flight choice; null = mirror the (async-loaded) persisted prop.
-	// Re-mounted per conversation, so there is no cross-tab bleed.
-	let chosen = $state<ReasoningEffort | null>(null);
-	let saving = $state(false);
-	let error = $state<string | null>(null);
-	let justSaved = $state(false);
+  // The user's in-flight choice; null = mirror the (async-loaded) persisted prop.
+  // Re-mounted per conversation, so there is no cross-tab bleed.
+  let chosen = $state<ReasoningEffort | null>(null);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+  let justSaved = $state(false);
 
-	const selected = $derived(chosen ?? effectiveEffort(persisted));
+  const selected = $derived(chosen ?? effectiveEffort(persisted));
 
-	async function handleChange(value: string) {
-		if (!isReasoningEffort(value) || saving) return;
-		chosen = value;
-		saving = true;
-		error = null;
-		justSaved = false;
-		const result = await save(value);
-		saving = false;
-		if (result === null) return;
-		if (result.ok) {
-			justSaved = true;
-		} else {
-			error = result.error;
-			chosen = null; // revert to the persisted value
-		}
-	}
+  async function handleChange(value: string) {
+    if (!isReasoningEffort(value) || saving) return;
+    chosen = value;
+    saving = true;
+    error = null;
+    justSaved = false;
+    const result = await save(value);
+    saving = false;
+    if (result === null) return;
+    if (result.ok) {
+      justSaved = true;
+    } else {
+      error = result.error;
+      chosen = null; // revert to the persisted value
+    }
+  }
 </script>
 
 <div class="flex flex-col gap-1">
-	<span class="text-xs font-semibold uppercase opacity-60">Reasoning effort</span>
-	<div class="flex items-center gap-2">
-		<select
-			class="select select-sm w-full"
-			value={selected}
-			disabled={saving}
-			onchange={(e) => handleChange(e.currentTarget.value)}
-			aria-label="Reasoning effort"
-		>
-			{#each options as option (option.value)}
-				<option value={option.value}>{option.label}</option>
-			{/each}
-		</select>
-		{#if saving}
-			<span class="loading loading-spinner loading-xs" aria-label="Saving reasoning effort"></span>
-		{/if}
-	</div>
-	{#if error}
-		<p class="text-xs text-error">{error}</p>
-	{:else if justSaved}
-		<p class="text-xs text-success">Saved — applies from the next turn.</p>
-	{:else}
-		<p class="text-xs opacity-50">
-			How long the model thinks before answering. Changing it can re-prefill the prompt cache once.
-		</p>
-	{/if}
+  <span class="text-xs font-semibold uppercase opacity-60">Reasoning effort</span>
+  <div class="flex items-center gap-2">
+    <select
+      class="select select-sm w-full"
+      value={selected}
+      disabled={saving}
+      onchange={(e) => handleChange(e.currentTarget.value)}
+      aria-label="Reasoning effort"
+    >
+      {#each options as option (option.value)}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+    {#if saving}
+      <span class="loading loading-spinner loading-xs" aria-label="Saving reasoning effort"></span>
+    {/if}
+  </div>
+  {#if error}
+    <p class="text-xs text-error">{error}</p>
+  {:else if justSaved}
+    <p class="text-xs text-success">Saved — applies from the next turn.</p>
+  {:else}
+    <p class="text-xs opacity-50">
+      How long the model thinks before answering. Changing it can re-prefill the prompt cache once.
+    </p>
+  {/if}
 </div>