ui: Context usage gauge and panel (#25340)

* feat: WIP * feat: Retire ChatScreenProcessingInfo component, context, and keepStatsVisible settings * feat: Always-on gauge with active-model /props, conversation stats and live-reactive reading/output/avg * feat: Add /tokenize endpoint, TokenizeService, FNV-1a and JSON Schema utilities * feat: Surface enabled-tools token count in context hover card * refactor(tools): make toolsStore the sole owner of the OpenAI wire format Previously mcpStore.getToolDefinitionsForLLM() owned the MCP->OpenAI shape conversion (plus normalizeSchemaProperties). That created two sources of truth for what gets sent to the LLM, with the duplication-prone risk of the deduplicated enabled list (which feeds the token-count cache) drifting from the bytes actually shipped on chat. Now: - mcpStore: pure protocol state + routing. Drop getToolDefinitionsForLLM and the inline OpenAIToolDefinition conversion + normalizeSchemaProperties. Doc comment adjusted to declare wire-format ownership as belonging to toolsStore. Connection lifecycle, health checks, executeTool, and the connections/toolsIndex remain. - toolsStore: owns the wire shape (added earlier this series). mcpEntries() inlines the MCP tool conversion; uses normalizeJsonSchema (the JSON Schema util extracted in the prior commit) so missing 'type' fields are inferred from defaults. mcpTools getter iterates mcpEntries() so the Settings UI and the deduplicated enabled list see the same definitions. getEnabledToolsForLLM iterates mcpEntries() instead of calling mcpStore, so the JSON sent to the LLM is identical to what toolsStore.refreshEnabledToolsTokenCount tokenizes. - agentic: the chat-completion tools field's type was annotated as ReturnType<typeof mcpStore.getToolDefinitionsForLLM>, claiming the shape was owned by mcpStore. Switch to ReturnType<typeof toolsStore.getEnabledToolsForLLM>, the actual source. Assisted-by: Claude * feat: UI WIP * feat: UI WIP * feat: UI WIP * feat: Adjust reasoning submenu layout and spacing * feat: Adjust context usage gauge thresholds and styling * feat: Split context usage gauge stats into current and cumulative breakdowns * chore: Format * refactor: Cleanup * refactor: Cleanup * feat: improve token gauge accuracy and display * refactor: remove MCP recommendation gating and simplify server visibility * feat: add token audit logging to ChatStore for debugging * refactor: Simplify context token reading to use server promptTokens directly * feat: Replace last-known token tracking with live server-derived stats for accurate streaming gauges * feat: UI Improvements * feat: Move prompt processing stats to the preceding user message * feat: Fix context token double-counting and refine gauge layout * refactor: remove always-show-agentic-turns setting and simplify agentic turn display * feat: track and display cache tokens in context gauge * feat: add diagnostic logging for chat completion requests * refactor: improve token audit console output with fresh/cached breakdown * fix: invalidate enabled tools token count cache on tool changes * test: add unit tests for tools store token count invalidation * refactor: Remove tools token counting infrastructure * refactor: Update ChatFormContextGauge to use simplified token tracking * refactor: Update ChatStore to remove tools token counting * chore: Formatting * feat: Improve UI text * feat: simplify context usage derivation and refine gauge labels * refactor: cleanup logs * cleaning * fix: UI * refactor: Enums * refactor: Extract context gauge logic into hook and split UI into sub-components * refactor: Cleanup comments --------- Co-authored-by: Pascal <admin@serveurperso.com>
2026-07-08 09:22:35 +02:00
parent da46e59cbf
commit f1161b15f2
53 changed files with 1234 additions and 659 deletions
@@ -11,7 +11,8 @@
 	} from '$lib/constants';
 	import {
 		ChatFormActionAddToolsSubmenu,
-		ChatFormActionAddMcpServersSubmenu
+		ChatFormActionAddMcpServersSubmenu,
+		ChatFormActionAddReasoningSubmenu
 	} from '$lib/components/app';
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';

@@ -92,7 +93,11 @@
 			</Tooltip.Content>
 		</Tooltip.Root>

-		<DropdownMenu.Content align="start" class="w-48">
+		<DropdownMenu.Content align="start" class="w-52">
+			<ChatFormActionAddReasoningSubmenu />
+
+			<DropdownMenu.Separator />
+
 			<DropdownMenu.Sub>
 				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
 					<File class="h-4 w-4" />
@@ -2,7 +2,7 @@
 	import { Lightbulb, LightbulbOff, Check, Info } from '@lucide/svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { ReasoningEffort, MessageRole } from '$lib/enums';
+	import { ReasoningEffort } from '$lib/enums';
 	import { REASONING_EFFORT_TOKENS } from '$lib/constants/reasoning-effort-tokens';
 	import { REASONING_EFFORT_LEVELS } from '$lib/constants/reasoning-effort';
 	import type { ReasoningEffortLevel } from '$lib/types';
@@ -18,31 +18,23 @@
 	import { isRouterMode } from '$lib/stores/server.svelte';
 	import type { DatabaseMessage } from '$lib/types/database';

-	let thinkingEnabled = $derived(conversationsStore.getThinkingEnabled());
-	let currentEffort = $derived(conversationsStore.getReasoningEffort());
-	let isOff = $derived(!thinkingEnabled);
-	let tooltipText = $derived(thinkingEnabled ? `${currentEffort} Reasoning` : 'Disabled Reasoning');
 	let subOpen = $state(false);

-	// Get conversation model from message history
 	let conversationModel = $derived(
 		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
 	);

-	// Fallback: if model props aren't available, check if any assistant messages
-	// for this model in the active conversation have reasoning content.
 	let modelSupportsThinkingFromMessages = $derived.by(() => {
 		const modelId = isRouterMode() ? modelsStore.selectedModelName || conversationModel : null;
 		if (!modelId) return false;
+
 		const messages = conversationsStore.activeMessages;
+
 		return messages.some(
-			(m: DatabaseMessage) =>
-				m.role === MessageRole.ASSISTANT && m.model === modelId && !!m.reasoningContent
+			(m) => m.role === 'assistant' && m.model === modelId && !!m.reasoningContent
 		);
 	});

-	// Check if model supports thinking. Primary: chat template from /props.
-	// Fallback: message history (reasoning content in assistant messages).
 	let modelSupportsThinking = $derived.by(() => {
 		loadedModelIds();
 		propsCacheVersion();
@@ -52,15 +44,15 @@
 			return checkModelSupportsThinking(modelId ?? '') || modelSupportsThinkingFromMessages;
 		}

-		// In non-router mode, use the built-in supportsThinking
 		return supportsThinking() || modelSupportsThinkingFromMessages;
 	});

-	// Check if current item is selected
+	let thinkingEnabled = $derived(conversationsStore.getThinkingEnabled());
+	let currentEffort = $derived(conversationsStore.getReasoningEffort());
+	let isOff = $derived(!thinkingEnabled);
+
 	function isSelected(item: ReasoningEffortLevel): boolean {
-		if (item.isOff) {
-			return isOff;
-		}
+		if (item.isOff) return isOff;
 		return thinkingEnabled && currentEffort === item.value;
 	}

@@ -76,39 +68,30 @@
 </script>

 {#if modelSupportsThinking}
-	<DropdownMenu.Root bind:open={subOpen}>
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				<DropdownMenu.Trigger
-					class={[
-						'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full p-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-						thinkingEnabled ? 'bg-amber-400/10 hover:bg-amber-400/20' : 'bg-muted'
-					]}
-					aria-label={`${tooltipText}. Click to configure.`}
-				>
-					{#if thinkingEnabled}
-						<Lightbulb class="h-3 w-3 text-amber-400" />
-					{:else}
-						<LightbulbOff class="h-3 w-3 text-muted-foreground" />
-					{/if}
-				</DropdownMenu.Trigger>
-			</Tooltip.Trigger>
+	<DropdownMenu.Sub bind:open={subOpen}>
+		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+			{#if thinkingEnabled}
+				<Lightbulb class="h-4 w-4 shrink-0 text-amber-400" />
+			{:else}
+				<LightbulbOff class="h-4 w-4 shrink-0 text-muted-foreground" />
+			{/if}

-			<Tooltip.Content>
-				<p class="capitalize">{tooltipText}</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
+			<span class="text-sm inline-flex gap-2 {!thinkingEnabled ? 'text-muted-foreground' : ''}">
+				Reasoning

-		<DropdownMenu.Content
-			align="start"
-			class="w-60 rounded-xl bg-popover p-3 text-popover-foreground shadow-md outline-none"
+				<span class="capitalize text-muted-foreground">
+					{thinkingEnabled ? currentEffort : 'off'}
+				</span>
+			</span>
+		</DropdownMenu.SubTrigger>
+
+		<DropdownMenu.SubContent
+			class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
 		>
-			<div class="mb-2 px-2.5 text-sm font-medium">Reasoning effort</div>
-
 			{#each REASONING_EFFORT_LEVELS as level (level.value)}
 				<button
 					type="button"
-					class="flex w-full cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-accent"
+					class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent"
 					class:bg-accent={isSelected(level)}
 					onclick={() => handleSelection(level)}
 				>
@@ -140,6 +123,6 @@
 					{/if}
 				</button>
 			{/each}
-		</DropdownMenu.Content>
-	</DropdownMenu.Root>
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
 {/if}
@@ -7,14 +7,20 @@
 		ChatFormActionModels,
 		ChatFormActionRecord,
 		ChatFormActionSubmit,
-		ChatFormReasoningToggle
+		ChatFormContextGauge
 	} from '$lib/components/app';
-	import { FileTypeCategory } from '$lib/enums';
+	import { FileTypeCategory, MessageRole } from '$lib/enums';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
 	import { config } from '$lib/stores/settings.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { activeMessages, conversationsStore } from '$lib/stores/conversations.svelte';
+	import {
+		activeProcessingState,
+		isChatStreaming,
+		isLoading as chatIsLoading
+	} from '$lib/stores/chat.svelte';
 	import { getFileTypeCategory } from '$lib/utils';
 	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import { ROUTES } from '$lib/constants/routes';

 	interface Props {
@@ -93,6 +99,36 @@
 	let activeMessage = $derived(
 		conversationsStore.activeMessages[conversationsStore.activeMessages.length - 1]
 	);
+
+	let hasProcessedTokens = $derived.by(() => {
+		if (!page.params.id) return false;
+
+		const messages = activeMessages() as DatabaseMessage[];
+		let totalHistoricalTokens = 0;
+		for (const m of messages) {
+			if (m.role !== MessageRole.ASSISTANT) continue;
+			const timings = m.timings;
+			if (!timings) continue;
+			const agenticLlm = timings.agentic?.llm;
+			if (agenticLlm?.prompt_n != null || agenticLlm?.predicted_n != null) {
+				totalHistoricalTokens += (agenticLlm?.prompt_n ?? 0) + (agenticLlm?.predicted_n ?? 0);
+			} else {
+				totalHistoricalTokens += (timings.prompt_n ?? 0) + (timings.predicted_n ?? 0);
+			}
+		}
+		if (totalHistoricalTokens > 0) return true;
+
+		if (!chatIsLoading() && !isChatStreaming()) return false;
+
+		const processingState = activeProcessingState();
+		if (!processingState) return false;
+		const livePromptTokens = Math.max(
+			processingState.promptTokens ?? 0,
+			processingState.promptProgress?.processed ?? 0
+		);
+		const liveOutputTokens = processingState.outputTokensUsed ?? 0;
+		return livePromptTokens > 0 || liveOutputTokens > 0;
+	});
 </script>

 <div
@@ -100,7 +136,7 @@
 	style="container-type: inline-size"
 >
 	{#if showAddButton}
-		<div class="mr-auto flex items-center gap-3">
+		<div class="mr-auto flex items-center gap-2">
 			<ChatFormActionsAdd
 				{disabled}
 				{hasAudioModality}
@@ -117,8 +153,10 @@
 		</div>
 	{/if}

-	<div class="flex items-center gap-2">
-		<ChatFormReasoningToggle />
+	<div class="flex items-center gap-1.5">
+		{#if hasProcessedTokens}
+			<ChatFormContextGauge />
+		{/if}

 		{#if showModelSelector}
 			<ChatFormActionModels
@@ -6,6 +6,7 @@
 	import { REASONING_EFFORT_TOKENS } from '$lib/constants/reasoning-effort-tokens';
 	import { REASONING_EFFORT_LEVELS } from '$lib/constants/reasoning-effort';
 	import type { ReasoningEffortLevel } from '$lib/types';
+	import { DIALOG_SUBMENU_CONTENT } from '$lib/constants/css-classes';
 	import {
 		modelsStore,
 		checkModelSupportsThinking,
@@ -71,9 +72,7 @@

 {#if modelSupportsThinking}
 	<DropdownMenu.Sub bind:open={subOpen}>
-		<DropdownMenu.SubTrigger
-			class="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors outline-none hover:bg-accent focus:bg-accent"
-		>
+		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
 			{#if thinkingEnabled}
 				<Lightbulb class="h-4 w-4 shrink-0 text-amber-400" />
 			{:else}
@@ -89,23 +88,15 @@
 			{/if}
 		</DropdownMenu.SubTrigger>

-		<DropdownMenu.SubContent
-			class="w-60 rounded-xl bg-popover p-3 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
-		>
+		<DropdownMenu.SubContent class={DIALOG_SUBMENU_CONTENT}>
 			{#each REASONING_EFFORT_LEVELS as level (level.value)}
 				<button
 					type="button"
-					class="flex w-full cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-accent"
+					class="flex w-full cursor-pointer items-center gap-2"
 					class:bg-accent={isSelected(level)}
 					onclick={() => handleSelection(level)}
 				>
-					{#if isSelected(level)}
-						<Check class="h-4 w-4 shrink-0 text-foreground" />
-					{:else}
-						<div class="h-4 w-4 shrink-0"></div>
-					{/if}
-
-					<span class="flex-1">{level.label}</span>
+					<span class="flex-1 text-left">{level.label}</span>

 					{#if !level.isOff}
 						<span class="text-[11px] text-muted-foreground opacity-60">
@@ -125,6 +116,10 @@
 							</Tooltip.Content>
 						</Tooltip.Root>
 					{/if}
+
+					{#if isSelected(level)}
+						<Check class="h-4 w-4 shrink-0 text-foreground" />
+					{/if}
 				</button>
 			{/each}
 		</DropdownMenu.SubContent>
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import * as HoverCard from '$lib/components/ui/hover-card';
+	import { activeConversation, activeMessages } from '$lib/stores/conversations.svelte';
+	import { chatStore, isChatStreaming, isLoading } from '$lib/stores/chat.svelte';
+	import { formatParameters } from '$lib/utils/formatters';
+	import { useContextGauge } from '$lib/hooks/use-context-gauge.svelte';
+	import ContextGaugeDial from './ContextGaugeDial.svelte';
+	import ContextGaugeDetails from './ContextGaugeDetails.svelte';
+	import ContextGaugeLoadModel from './ContextGaugeLoadModel.svelte';
+	import { colorLevelBgClass, colorLevelTextClass } from './context-gauge';
+
+	const gauge = useContextGauge();
+
+	$effect(() => {
+		const conv = activeConversation();
+		untrack(() => chatStore.setActiveProcessingConversation(conv?.id ?? null));
+	});
+
+	$effect(() => {
+		const conv = activeConversation();
+		const messages = activeMessages() as DatabaseMessage[];
+		if (!conv) return;
+		if (isLoading() || isChatStreaming()) return;
+
+		if (messages.length === 0) {
+			untrack(() => chatStore.clearProcessingState(conv.id));
+			return;
+		}
+
+		untrack(() => chatStore.restoreProcessingStateFromMessages(messages, conv.id));
+	});
+
+	$effect(() => {
+		gauge.startMonitoring();
+	});
+
+	const showProgressBar = $derived(
+		gauge.contextTotal !== null &&
+			gauge.contextTotal > 0 &&
+			(gauge.activeModelId !== null || gauge.isActiveModelLoaded)
+	);
+</script>
+
+<HoverCard.Root>
+	<HoverCard.Trigger class="flex h-5 w-5 cursor-default items-center justify-center">
+		<ContextGaugeDial percent={gauge.contextPercent} level={gauge.colorLevel} />
+	</HoverCard.Trigger>
+
+	<HoverCard.Content
+		side="bottom"
+		class="z-50 w-64 rounded-lg border border-border/50 bg-popover p-3 text-popover-foreground shadow-lg"
+	>
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<span class="font-medium">Context</span>
+				<span class="text-muted-foreground">·</span>
+				<span class="font-mono text-muted-foreground">
+					{formatParameters(gauge.contextUsed)}
+					/ {gauge.contextTotal !== null ? formatParameters(gauge.contextTotal) : '-'}
+				</span>
+			</div>
+
+			{#if gauge.activeModelId !== null && !gauge.isActiveModelLoaded}
+				<ContextGaugeLoadModel
+					modelId={gauge.activeModelId}
+					isLoading={gauge.isActiveModelLoading}
+					onLoad={gauge.loadModel}
+				/>
+			{:else if showProgressBar}
+				<div class="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+					<div
+						class="h-full rounded-full transition-all duration-300 {colorLevelBgClass(
+							gauge.colorLevel
+						)}"
+						style="width: {gauge.contextPercent}%"
+					></div>
+				</div>
+
+				<div class="flex justify-between text-xs text-muted-foreground">
+					<span>
+						<span class={colorLevelTextClass(gauge.colorLevel)}>{gauge.contextPercent}%</span> used
+					</span>
+					<span>
+						{formatParameters((gauge.contextTotal ?? 0) - gauge.contextUsed)} remaining
+					</span>
+				</div>
+			{:else}
+				<div class="text-xs text-muted-foreground">No context info available</div>
+			{/if}
+
+			{#if gauge.hasAnyUsage}
+				<ContextGaugeDetails
+					currentRead={gauge.currentRead}
+					currentFresh={gauge.currentFresh}
+					currentCache={gauge.currentCache}
+					currentOutput={gauge.currentOutput}
+					kvTotal={gauge.kvTotal}
+					cumulativeRead={gauge.cumulativeRead}
+					cumulativeOutput={gauge.cumulativeOutput}
+					cumulativeCacheTotal={gauge.cumulativeCacheTotal}
+					averageTokensPerSecond={gauge.averageTokensPerSecond}
+					transientDetails={gauge.transientDetails}
+				/>
+			{/if}
+		</div>
+	</HoverCard.Content>
+</HoverCard.Root>
@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		subtitle?: string;
+	}
+
+	let { label, value, subtitle }: Props = $props();
+</script>
+
+<div class="grid gap-1.5">
+	<div class="flex items-baseline justify-between">
+		<span class="text-muted-foreground">{label}</span>
+		<span class="font-mono text-muted-foreground">{value}</span>
+	</div>
+
+	{#if subtitle}
+		<div class="text-[10px] leading-tight text-muted-foreground/70">{subtitle}</div>
+	{/if}
+</div>
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { ChevronDown } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { STATS_UNITS } from '$lib/constants';
+	import ContextGaugeDetailRow from './ContextGaugeDetailRow.svelte';
+
+	interface Props {
+		currentRead: number;
+		currentFresh: number;
+		currentCache: number;
+		currentOutput: number;
+		kvTotal: number;
+		cumulativeRead: number;
+		cumulativeOutput: number;
+		cumulativeCacheTotal: number;
+		averageTokensPerSecond: number | null;
+		transientDetails: string[];
+	}
+
+	let {
+		currentRead,
+		currentFresh,
+		currentCache,
+		currentOutput,
+		kvTotal,
+		cumulativeRead,
+		cumulativeOutput,
+		cumulativeCacheTotal,
+		averageTokensPerSecond,
+		transientDetails
+	}: Props = $props();
+
+	let open = $state(false);
+
+	const hasCumulative = $derived(cumulativeRead > 0 || cumulativeOutput > 0);
+	const hasCurrent = $derived(currentRead > 0 || currentOutput > 0);
+</script>
+
+<Collapsible.Root bind:open class="mt-3 border-t border-border/50 pt-4">
+	<Collapsible.Trigger
+		class="flex w-full cursor-pointer items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+	>
+		<span>Token usage details</span>
+
+		<ChevronDown class={'ml-auto h-3 w-3 transition-transform' + (open ? ' rotate-180' : '')} />
+	</Collapsible.Trigger>
+
+	<Collapsible.Content class="flex flex-col gap-4 text-xs pt-4">
+		{#if hasCumulative}
+			<div>
+				<h3 class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-2">
+					Across all turns
+				</h3>
+
+				<div class="flex flex-col gap-2">
+					{#if cumulativeRead > 0}
+						<ContextGaugeDetailRow
+							label="Prompt tokens evaluated"
+							value={`${cumulativeRead.toLocaleString()} tok`}
+							subtitle={cumulativeCacheTotal > 0
+								? `${cumulativeCacheTotal.toLocaleString()} reused from KV cache`
+								: undefined}
+						/>
+					{/if}
+					{#if cumulativeOutput > 0}
+						<ContextGaugeDetailRow
+							label="Tokens generated"
+							value={`${cumulativeOutput.toLocaleString()} tok`}
+						/>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if hasCurrent}
+			<div>
+				<h3 class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-2">
+					This turn · KV cache
+				</h3>
+
+				<div class="flex flex-col gap-2">
+					{#if currentRead > 0}
+						<ContextGaugeDetailRow
+							label="Prompt"
+							value={`${currentRead.toLocaleString()} tok`}
+							subtitle={currentCache > 0
+								? `${currentFresh.toLocaleString()} fresh + ${currentCache.toLocaleString()} cached`
+								: undefined}
+						/>
+					{/if}
+
+					{#if currentOutput > 0}
+						<ContextGaugeDetailRow
+							label="Generated"
+							value={`${currentOutput.toLocaleString()} tok`}
+						/>
+					{/if}
+
+					<div class="pt-1 mt-0.5 border-t border-border/30">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">KV cache total</span>
+							<span class="font-mono font-medium">{kvTotal.toLocaleString()} tok</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		{#if averageTokensPerSecond !== null}
+			<div class="pt-1.5 mt-1 border-t border-border/30">
+				<ContextGaugeDetailRow
+					label="Avg speed"
+					value={`${averageTokensPerSecond.toFixed(1)}${STATS_UNITS.TOKENS_PER_SECOND}`}
+				/>
+			</div>
+		{/if}
+
+		{#each transientDetails as detail (detail)}
+			<div class="font-mono text-muted-foreground">{detail}</div>
+		{/each}
+	</Collapsible.Content>
+</Collapsible.Root>
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { ColorLevel } from './context-gauge';
+	import { colorLevelTextClass } from './context-gauge';
+
+	interface Props {
+		percent: number | null;
+		level: ColorLevel;
+		size?: 'sm' | 'md';
+	}
+
+	let { percent, level, size = 'sm' }: Props = $props();
+
+	const RADIUS = 11;
+	const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+	const strokeLevelClass = $derived(colorLevelTextClass(level));
+	const dimensions = $derived(size === 'md' ? 'h-6 w-6' : 'h-5 w-5');
+	const strokeWidth = $derived(size === 'md' ? 4 : 3);
+</script>
+
+<svg viewBox="0 0 32 32" fill="none" class={dimensions}>
+	<circle
+		cx="16"
+		cy="16"
+		r={RADIUS}
+		stroke="currentColor"
+		stroke-opacity="0.1"
+		stroke-width={strokeWidth}
+	/>
+
+	<circle
+		cx="16"
+		cy="16"
+		r={RADIUS}
+		class="transition-colors duration-300 {strokeLevelClass}"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-dasharray={CIRCUMFERENCE}
+		stroke-dashoffset={percent !== null ? CIRCUMFERENCE * (1 - percent / 100) : CIRCUMFERENCE}
+		transform="rotate(-90 16 16)"
+	/>
+</svg>
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Loader2 } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		modelId: string | null;
+		isLoading: boolean;
+		onLoad: () => void;
+	}
+
+	let { modelId, isLoading, onLoad }: Props = $props();
+</script>
+
+{#if modelId !== null && !isLoading}
+	<div class="flex flex-col gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
+		<span>Available context size is only visible once the model is loaded.</span>
+		<Button size="sm" variant="secondary" class="self-start" onclick={onLoad}>Load model</Button>
+	</div>
+{:else if isLoading}
+	<div class="flex items-center gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
+		<Loader2 class="h-3.5 w-3.5 animate-spin" />
+		<span>Loading model...</span>
+	</div>
+{/if}
@@ -0,0 +1,37 @@
+export type ColorLevel = 'ok' | 'warning' | 'critical' | 'neutral';
+
+const WARNING_THRESHOLD = 80;
+const CRITICAL_THRESHOLD = 95;
+
+export function colorLevelFromPercent(percent: number | null): ColorLevel {
+	if (percent === null) return 'neutral';
+	if (percent >= CRITICAL_THRESHOLD) return 'critical';
+	if (percent >= WARNING_THRESHOLD) return 'warning';
+	return 'ok';
+}
+
+export function colorLevelTextClass(level: ColorLevel): string {
+	switch (level) {
+		case 'critical':
+			return 'text-red-400';
+		case 'warning':
+			return 'text-amber-400';
+		case 'ok':
+			return 'text-muted-foreground';
+		default:
+			return 'text-muted-foreground';
+	}
+}
+
+export function colorLevelBgClass(level: ColorLevel): string {
+	switch (level) {
+		case 'critical':
+			return 'bg-red-500';
+		case 'warning':
+			return 'bg-amber-500';
+		case 'ok':
+			return 'bg-green-500';
+		default:
+			return 'bg-muted';
+	}
+}
@@ -24,6 +24,8 @@
 		message: DatabaseMessage;
 		toolMessages?: DatabaseMessage[];
 		isLastAssistantMessage?: boolean;
+		isLastUserMessage?: boolean;
+		nextAssistantMessage?: DatabaseMessage | null;
 		siblingInfo?: ChatMessageSiblingInfo | null;
 	}

@@ -32,6 +34,8 @@
 		message,
 		toolMessages = [],
 		isLastAssistantMessage = false,
+		isLastUserMessage = false,
+		nextAssistantMessage = null,
 		siblingInfo = null
 	}: Props = $props();

@@ -359,7 +363,9 @@
 		<ChatMessageUser
 			class={className}
 			{deletionInfo}
+			{isLastUserMessage}
 			{message}
+			{nextAssistantMessage}
 			onConfirmDelete={handleConfirmDelete}
 			onCopy={handleCopy}
 			onDelete={handleDelete}
@@ -11,11 +11,10 @@
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
 	import { copyToClipboard, deriveAgenticSections, modelLoadProgressText } from '$lib/utils';
-	import { AgenticSectionType } from '$lib/enums';
+	import { AgenticSectionType, ChatMessageStatisticsMode } from '$lib/enums';
 	import { REASONING_TAGS } from '$lib/constants/agentic';
-	import { tick } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { MessageRole, ChatMessageStatsView } from '$lib/enums';
+	import { MessageRole } from '$lib/enums';
 	import { config } from '$lib/stores/settings.svelte';
 	import { isRouterMode } from '$lib/stores/server.svelte';
 	import { modelsStore } from '$lib/stores/models.svelte';
@@ -122,62 +121,6 @@
 		return parts.join('\n\n\n');
 	});

-	let activeStatsView = $state<ChatMessageStatsView>(ChatMessageStatsView.GENERATION);
-	let statsContainerEl: HTMLDivElement | undefined = $state();
-
-	function getScrollParent(el: HTMLElement): HTMLElement | null {
-		let parent = el.parentElement;
-		while (parent) {
-			const style = getComputedStyle(parent);
-			if (/(auto|scroll)/.test(style.overflowY)) {
-				return parent;
-			}
-			parent = parent.parentElement;
-		}
-		return null;
-	}
-
-	async function handleStatsViewChange(view: ChatMessageStatsView) {
-		const el = statsContainerEl;
-		if (!el) {
-			activeStatsView = view;
-
-			return;
-		}
-
-		const scrollParent = getScrollParent(el);
-		if (!scrollParent) {
-			activeStatsView = view;
-
-			return;
-		}
-
-		const yBefore = el.getBoundingClientRect().top;
-
-		activeStatsView = view;
-
-		await tick();
-
-		const delta = el.getBoundingClientRect().top - yBefore;
-		if (delta !== 0) {
-			scrollParent.scrollTop += delta;
-		}
-
-		// Correct any drift after browser paint
-		requestAnimationFrame(() => {
-			const drift = el.getBoundingClientRect().top - yBefore;
-
-			if (Math.abs(drift) > 1) {
-				scrollParent.scrollTop += drift;
-			}
-		});
-	}
-
-	let highlightAgenticTurns = $derived(
-		isAgentic &&
-			(currentConfig.alwaysShowAgenticTurns || activeStatsView === ChatMessageStatsView.SUMMARY)
-	);
-
 	let displayedModel = $derived(message.model ?? null);

 	// model being switched to while it loads, so the selector bar tracks it
@@ -291,7 +234,6 @@
 				{toolMessages}
 				isStreaming={isChatStreaming()}
 				{isLastAssistantMessage}
-				highlightTurns={highlightAgenticTurns}
 			/>
 		{/if}
 	{:else}
@@ -315,10 +257,7 @@

 	<div class="info my-6 grid gap-4 tabular-nums">
 		{#if displayedModel}
-			<div
-				bind:this={statsContainerEl}
-				class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground"
-			>
+			<div class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground">
 				{#if isRouter}
 					<ModelsSelectorDropdown
 						currentModel={pendingModel ?? displayedModel}
@@ -347,28 +286,25 @@
 				{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
 					{@const agentic = message.timings.agentic}
 					<ChatMessageStatistics
+						mode={ChatMessageStatisticsMode.GENERATION}
 						promptTokens={agentic ? agentic.llm.prompt_n : message.timings.prompt_n}
 						promptMs={agentic ? agentic.llm.prompt_ms : message.timings.prompt_ms}
 						predictedTokens={agentic ? agentic.llm.predicted_n : message.timings.predicted_n}
 						predictedMs={agentic ? agentic.llm.predicted_ms : message.timings.predicted_ms}
 						agenticTimings={agentic}
-						onActiveViewChange={handleStatsViewChange}
 					/>
 				{:else if isLoading() && currentConfig.showMessageStats}
 					{@const liveStats = processingState.getLiveProcessingStats()}
 					{@const genStats = processingState.getLiveGenerationStats()}
-					{@const promptProgress = processingState.processingState?.promptProgress}
-					{@const isStillProcessingPrompt =
-						promptProgress && promptProgress.processed < promptProgress.total}

-					{#if liveStats || genStats}
+					{#if genStats}
 						<ChatMessageStatistics
+							mode={ChatMessageStatisticsMode.GENERATION}
 							isLive
-							isProcessingPrompt={!!isStillProcessingPrompt}
 							promptTokens={liveStats?.tokensProcessed}
 							promptMs={liveStats?.timeMs}
-							predictedTokens={genStats?.tokensGenerated}
-							predictedMs={genStats?.timeMs}
+							predictedTokens={genStats.tokensGenerated}
+							predictedMs={genStats.timeMs}
 						/>
 					{/if}
 				{/if}
@@ -2,10 +2,14 @@
 	import {
 		ChatMessageActionIcons,
 		ChatMessageEditForm,
+		ChatMessageStatistics,
 		ChatMessageUserBubble
 	} from '$lib/components/app/chat';
 	import { getMessageEditContext } from '$lib/contexts';
-	import { MessageRole } from '$lib/enums';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { isLoading } from '$lib/stores/chat.svelte';
+	import { MessageRole, ChatMessageStatisticsMode } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';

 	interface Props {
 		class?: string;
@@ -17,6 +21,8 @@
 			assistantMessages: number;
 			messageTypes: string[];
 		} | null;
+		isLastUserMessage?: boolean;
+		nextAssistantMessage?: DatabaseMessage | null;
 		showDeleteDialog: boolean;
 		onEdit: () => void;
 		onDelete: () => void;
@@ -32,6 +38,8 @@
 		message,
 		siblingInfo = null,
 		deletionInfo,
+		isLastUserMessage = false,
+		nextAssistantMessage = null,
 		showDeleteDialog,
 		onEdit,
 		onDelete,
@@ -44,6 +52,37 @@

 	// Get contexts
 	const editCtx = getMessageEditContext();
+	const processingState = useProcessingState();
+
+	const currentConfig = $derived(config());
+	const isActivelyProcessing = $derived(isLastUserMessage && isLoading());
+
+	// For agentic turns, prefer the cumulative agentic.llm totals over per-call timings.
+	let storedReadingStats = $derived.by(() => {
+		const timings = nextAssistantMessage?.timings;
+		if (!timings?.prompt_n || !timings?.prompt_ms) return null;
+
+		const agentic = timings.agentic;
+
+		return {
+			promptTokens: agentic ? agentic.llm.prompt_n : timings.prompt_n,
+			promptMs: agentic ? agentic.llm.prompt_ms : timings.prompt_ms
+		};
+	});
+
+	let showStoredReadingStats = $derived(
+		Boolean(currentConfig.showMessageStats) && storedReadingStats !== null
+	);
+
+	let showLiveReadingStats = $derived(
+		Boolean(currentConfig.showMessageStats) && isActivelyProcessing && storedReadingStats === null
+	);
+
+	$effect(() => {
+		if (showLiveReadingStats) {
+			processingState.startMonitoring();
+		}
+	});
 </script>

 <div
@@ -60,6 +99,37 @@
 			renderMarkdown={true}
 		/>

+		{#if showStoredReadingStats}
+			<!-- Reading stats sourced from the assistant message that followed this turn -->
+			<div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
+				<div
+					class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
+				>
+					<ChatMessageStatistics
+						mode={ChatMessageStatisticsMode.READING}
+						promptTokens={storedReadingStats!.promptTokens}
+						promptMs={storedReadingStats!.promptMs}
+					/>
+				</div>
+			</div>
+		{:else if showLiveReadingStats}
+			{@const liveStats = processingState.getLiveProcessingStats()}
+			{#if liveStats}
+				<div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
+					<div
+						class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
+					>
+						<ChatMessageStatistics
+							mode={ChatMessageStatisticsMode.READING}
+							isLive
+							promptTokens={liveStats.tokensProcessed}
+							promptMs={liveStats.timeMs}
+						/>
+					</div>
+				</div>
+			{/if}
+		{/if}
+
 		{#if message.timestamp}
 			<div class="max-w-[80%]">
 				<ChatMessageActionIcons
@@ -2,7 +2,6 @@
 	import { ActionIcon, ChatMessageEditForm, ChatMessageUserBubble } from '$lib/components/app';
 	import { fadeInView } from '$lib/actions/fade-in-view.svelte';
 	import { ArrowUp, Edit, Trash2 } from '@lucide/svelte';
-	import { getProcessingInfoContext } from '$lib/contexts';
 	import { useMessageEditContext } from '$lib/hooks/use-message-edit-context.svelte';

 	interface Props {
@@ -23,9 +22,6 @@
 		onDelete
 	}: Props = $props();

-	const processingInfoCtx = getProcessingInfoContext();
-	let showProcessingInfo = $derived(processingInfoCtx.showProcessingInfo);
-
 	const editCtx = useMessageEditContext({
 		getContent: () => content,
 		getExtras: () => extras,
@@ -36,9 +32,7 @@
 <div
 	use:fadeInView
 	aria-label="Pending user message"
-	class="group flex flex-col items-end gap-3 transition-opacity hover:opacity-80 md:gap-2 {className} sticky {showProcessingInfo
-		? 'bottom-44'
-		: 'bottom-32'}"
+	class="group flex flex-col items-end gap-3 transition-opacity hover:opacity-80 md:gap-2 {className} sticky bottom-32"
 	role="group"
 >
 	{#if editCtx.isEditing}
@@ -41,15 +41,13 @@
 		toolMessages?: DatabaseMessage[];
 		isStreaming?: boolean;
 		isLastAssistantMessage?: boolean;
-		highlightTurns?: boolean;
 	}

 	let {
 		message,
 		toolMessages = [],
 		isStreaming = false,
-		isLastAssistantMessage = false,
-		highlightTurns = false
+		isLastAssistantMessage = false
 	}: Props = $props();

 	let expandedStates: Record<number, boolean> = $state({});
@@ -57,6 +55,7 @@
 	const showToolCallInProgress = $derived(config().showToolCallInProgress as boolean);
 	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
 	const renderThinkingAsMarkdown = $derived(config().renderThinkingAsMarkdown as boolean);
+	const showMessageStats = $derived(config().showMessageStats as boolean);

 	const hasReasoningError = $derived(
 		isLastAssistantMessage ? !!agenticLastError(message.convId) : false
@@ -354,16 +353,17 @@
 {/snippet}

 <div class="agentic-content">
-	{#if highlightTurns && turnGroups.length > 1}
+	{#if turnGroups.length > 1}
 		{#each turnGroups as turn, turnIndex (turnIndex)}
 			{@const turnStats = message?.timings?.agentic?.perTurn?.[turnIndex]}
-			<div class="agentic-turn my-2 hover:bg-muted/80 dark:hover:bg-muted/30">
-				<span class="agentic-turn-label">Turn {turnIndex + 1}</span>
+
+			<div class="agentic-turn group/turn grid gap-3 mb-4">
 				{#each turn.sections as section, sIdx (turn.flatIndices[sIdx])}
 					{@render renderSection(section, turn.flatIndices[sIdx])}
 				{/each}
-				{#if turnStats}
-					<div class="turn-stats">
+
+				{#if turnStats && showMessageStats}
+					<div class="turn-stats transition-opacity duration-150">
 						<ChatMessageStatistics
 							promptTokens={turnStats.llm.prompt_n}
 							promptMs={turnStats.llm.prompt_ms}
@@ -402,39 +402,21 @@
 	.agentic-content {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
 		width: 100%;
 		max-width: 48rem;
+		gap: 1rem;
+	}
+
+	.agentic-content > :global(*),
+	.agentic-turn > :global(*) {
+		min-width: 0;
 	}

 	.agentic-text {
 		width: 100%;
 	}

-	.agentic-turn {
-		position: relative;
-		border: 1.5px dashed var(--muted-foreground);
-		border-radius: 0.75rem;
-		padding: 1rem;
-		transition: background 0.1s;
-	}
-
-	.agentic-turn-label {
-		position: absolute;
-		top: -1rem;
-		left: 0.75rem;
-		padding: 0 0.375rem;
-		background: var(--background);
-		font-size: 0.7rem;
-		font-weight: 500;
-		color: var(--muted-foreground);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
 	.turn-stats {
-		margin-top: 0.75rem;
-		padding-top: 0.5rem;
 		border-top: 1px solid hsl(var(--muted) / 0.5);
 	}
 </style>
@@ -2,7 +2,7 @@
 	import { Clock, Gauge, WholeWord, BookOpenText, Sparkles, Wrench, Layers } from '@lucide/svelte';
 	import { ChatMessageStatisticsBadge } from '$lib/components/app';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { ChatMessageStatsView } from '$lib/enums';
+	import { ChatMessageStatsView, ChatMessageStatisticsMode } from '$lib/enums';
 	import type { ChatMessageAgenticTimings } from '$lib/types/chat';
 	import { formatPerformanceTime } from '$lib/utils';
 	import { MS_PER_SECOND, DEFAULT_PERFORMANCE_TIME } from '$lib/constants';
@@ -19,6 +19,7 @@
 		agenticTimings?: ChatMessageAgenticTimings;
 		onActiveViewChange?: (view: ChatMessageStatsView) => void;
 		hideSummary?: boolean;
+		mode?: ChatMessageStatisticsMode;
 	}

 	let {
@@ -31,19 +32,30 @@
 		initialView = ChatMessageStatsView.GENERATION,
 		agenticTimings,
 		onActiveViewChange,
-		hideSummary = false
+		hideSummary = false,
+		mode = ChatMessageStatisticsMode.SWITCHABLE
 	}: Props = $props();

-	let activeView: ChatMessageStatsView = $derived(initialView);
+	let isSwitchable = $derived(mode === ChatMessageStatisticsMode.SWITCHABLE);
+
+	let activeView: ChatMessageStatsView = $derived(
+		mode === ChatMessageStatisticsMode.READING
+			? ChatMessageStatsView.READING
+			: mode === ChatMessageStatisticsMode.GENERATION
+				? ChatMessageStatsView.GENERATION
+				: initialView
+	);
 	let hasAutoSwitchedToGeneration = $state(false);

 	$effect(() => {
-		onActiveViewChange?.(activeView);
+		if (isSwitchable) {
+			onActiveViewChange?.(activeView);
+		}
 	});

 	// In live mode: auto-switch to GENERATION tab when prompt processing completes
 	$effect(() => {
-		if (isLive) {
+		if (isLive && isSwitchable) {
 			// Auto-switch to generation tab only when prompt processing is done (once)
 			if (
 				!hasAutoSwitchedToGeneration &&
@@ -91,8 +103,7 @@
 			formattedPromptTime !== undefined
 	);

-	// In live mode, generation tab is disabled until we have generation stats
-	let isGenerationDisabled = $derived(isLive && !hasGenerationStats);
+	let isGenerationDisabled = $derived(isLive && isSwitchable && !hasGenerationStats);

 	let hasAgenticStats = $derived(agenticTimings !== undefined && agenticTimings.toolCallsCount > 0);

@@ -153,44 +164,44 @@
 {/snippet}

 <div class="inline-flex items-center text-xs text-muted-foreground">
-	<div class="inline-flex items-center rounded-sm bg-muted-foreground/15 p-0.5">
-		{#if hasPromptStats || isLive}
-			{@render viewButton({
-				view: ChatMessageStatsView.READING,
-				icon: BookOpenText,
-				label: 'Reading',
-				tooltipText: 'Reading (prompt processing)'
-			})}
-		{/if}
-
-		{@render viewButton({
-			view: ChatMessageStatsView.GENERATION,
-			icon: Sparkles,
-			label: 'Generation',
-			tooltipText: isGenerationDisabled
-				? 'Generation (waiting for tokens...)'
-				: 'Generation (token output)',
-			disabled: isGenerationDisabled
-		})}
-
-		{#if hasAgenticStats}
-			{@render viewButton({
-				view: ChatMessageStatsView.TOOLS,
-				icon: Wrench,
-				label: 'Tools',
-				tooltipText: 'Tool calls'
-			})}
-
-			{#if !hideSummary}
+	{#if isSwitchable}
+		<div class="inline-flex items-center rounded-sm bg-muted-foreground/15 p-0.5">
+			{#if hasPromptStats || isLive}
 				{@render viewButton({
-					view: ChatMessageStatsView.SUMMARY,
-					icon: Layers,
-					label: 'Summary',
-					tooltipText: 'Agentic summary'
+					view: ChatMessageStatsView.READING,
+					icon: BookOpenText,
+					label: 'Reading',
+					tooltipText: 'Processing'
 				})}
 			{/if}
-		{/if}
-	</div>
+
+			{@render viewButton({
+				view: ChatMessageStatsView.GENERATION,
+				icon: Sparkles,
+				label: 'Generation',
+				tooltipText: isGenerationDisabled ? 'Waiting for tokens...' : 'Generation',
+				disabled: isGenerationDisabled
+			})}
+
+			{#if hasAgenticStats}
+				{@render viewButton({
+					view: ChatMessageStatsView.TOOLS,
+					icon: Wrench,
+					label: 'Tools',
+					tooltipText: 'Tool calls'
+				})}
+
+				{#if !hideSummary}
+					{@render viewButton({
+						view: ChatMessageStatsView.SUMMARY,
+						icon: Layers,
+						label: 'Summary',
+						tooltipText: 'Agentic summary'
+					})}
+				{/if}
+			{/if}
+		</div>
+	{/if}

 	<div class="flex items-center gap-1 px-2">
 		{#if activeView === ChatMessageStatsView.GENERATION && hasGenerationStats}
@@ -256,7 +267,7 @@
 				value={formattedAgenticTotalTime}
 				tooltipLabel="Total time (LLM + tools)"
 			/>
-		{:else if hasPromptStats}
+		{:else if hasPromptStats && (mode === ChatMessageStatisticsMode.READING || isSwitchable)}
 			<ChatMessageStatisticsBadge
 				class="bg-transparent"
 				icon={WholeWord}
@@ -186,6 +186,8 @@
 			message: DatabaseMessage;
 			toolMessages: DatabaseMessage[];
 			isLastAssistantMessage: boolean;
+			isLastUserMessage: boolean;
+			nextAssistantMessage: DatabaseMessage | null;
 			siblingInfo: ChatMessageSiblingInfo;
 		}> = [];

@@ -236,18 +238,36 @@
 				message: msg,
 				toolMessages,
 				isLastAssistantMessage: false,
+				isLastUserMessage: false,
+				nextAssistantMessage: null,
 				siblingInfo
 			});
 		}

-		// Mark the last assistant message
+		let lastAssistantIdx = -1;
 		for (let i = result.length - 1; i >= 0; i--) {
 			if (result[i].message.role === MessageRole.ASSISTANT) {
 				result[i].isLastAssistantMessage = true;
+				lastAssistantIdx = i;
 				break;
 			}
 		}

+		if (lastAssistantIdx > 0 && result[lastAssistantIdx - 1].message.role === MessageRole.USER) {
+			result[lastAssistantIdx - 1].isLastUserMessage = true;
+		}
+
+		for (let i = 0; i < result.length; i++) {
+			if (result[i].message.role !== MessageRole.USER) continue;
+
+			for (let j = i + 1; j < result.length; j++) {
+				if (result[j].message.role === MessageRole.ASSISTANT) {
+					result[i].nextAssistantMessage = result[j].message;
+					break;
+				}
+			}
+		}
+
 		return result;
 	});
 </script>
@@ -257,12 +277,14 @@
 		{isVisible ? 'opacity-100' : 'opacity-0'}
 		{previousRouteId === '/(chat)/chat/[id]' ? '' : 'delay-300'}"
 >
-	{#each displayMessages as { message, toolMessages, isLastAssistantMessage, siblingInfo } (message.id)}
+	{#each displayMessages as { message, toolMessages, isLastAssistantMessage, isLastUserMessage, nextAssistantMessage, siblingInfo } (message.id)}
 		<ChatMessage
 			class="mx-auto mt-12 w-full max-w-3xl"
 			{message}
 			{toolMessages}
 			{isLastAssistantMessage}
+			{isLastUserMessage}
+			{nextAssistantMessage}
 			{siblingInfo}
 		/>
 	{/each}
@@ -4,12 +4,10 @@
 		ChatScreenForm,
 		ChatMessages,
 		ChatScreenDragOverlay,
-		ChatScreenProcessingInfo,
 		ChatScreenStreamResumeStatus,
 		ServerLoadingSplash,
 		ChatScreenServerError
 	} from '$lib/components/app';
-	import { setProcessingInfoContext } from '$lib/contexts';
 	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
 	import { useChatScreenActiveModel } from '$lib/hooks/use-chat-screen-active-model.svelte';
 	import { useChatScreenDragAndDrop } from '$lib/hooks/use-chat-screen-drag-and-drop.svelte';
@@ -23,8 +21,7 @@
 		errorDialog,
 		isLoading,
 		isChatStreaming,
-		isEditing,
-		activeProcessingState
+		isEditing
 	} from '$lib/stores/chat.svelte';
 	import {
 		conversationsStore,
@@ -42,12 +39,6 @@

 	let { showCenteredEmpty = false } = $props();

-	setProcessingInfoContext({
-		get showProcessingInfo() {
-			return showProcessingInfo;
-		}
-	});
-
 	let disableAutoScroll = $derived(Boolean(config().disableAutoScroll) || isMobile.current);
 	let isMobileUserScrolledUp = $state(false);
 	let mobileScrollDownHint = $state(false);
@@ -63,11 +54,6 @@
 	let isServerLoading = $derived(serverLoading());
 	let hasPropsError = $derived(!!serverError());
 	let isCurrentConversationLoading = $derived(isLoading() || isChatStreaming());
-	let showProcessingInfo = $derived(
-		isCurrentConversationLoading ||
-			(config().keepStatsVisible && !!page.params.id) ||
-			activeProcessingState() !== null
-	);
 	let chatFormBottomPosition = $derived.by(() => {
 		if (!isMobile.current) return '1rem';
 		if (device.isStandalone) return '1.5rem';
@@ -298,10 +284,6 @@
 						}}
 					/>
 				{/if}
-
-				{#if showProcessingInfo}
-					<ChatScreenProcessingInfo />
-				{/if}
 			</div>

 			<ChatScreenForm
@@ -1,127 +0,0 @@
-<script lang="ts">
-	import { untrack } from 'svelte';
-	import { PROCESSING_INFO_TIMEOUT } from '$lib/constants';
-	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
-	import { chatStore, isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
-	import { activeMessages, activeConversation } from '$lib/stores/conversations.svelte';
-	import { config } from '$lib/stores/settings.svelte';
-
-	const processingState = useProcessingState();
-
-	let isCurrentConversationLoading = $derived(isLoading());
-	let isStreaming = $derived(isChatStreaming());
-	let processingDetails = $derived(processingState.getTechnicalDetails());
-
-	let processingVisible = $derived(processingDetails.length > 0);
-
-	let { onVisibilityChange }: { onVisibilityChange?: (visible: boolean) => void } = $props();
-
-	$effect(() => {
-		onVisibilityChange?.(processingVisible);
-	});
-
-	$effect(() => {
-		const conversation = activeConversation();
-
-		untrack(() => chatStore.setActiveProcessingConversation(conversation?.id ?? null));
-	});
-
-	$effect(() => {
-		const keepStatsVisible = config().keepStatsVisible;
-		const shouldMonitor = keepStatsVisible || isCurrentConversationLoading || isStreaming;
-
-		if (shouldMonitor) {
-			processingState.startMonitoring();
-		}
-
-		if (!isCurrentConversationLoading && !isStreaming && !keepStatsVisible) {
-			const timeout = setTimeout(() => {
-				if (!config().keepStatsVisible && !isChatStreaming()) {
-					processingState.stopMonitoring();
-				}
-			}, PROCESSING_INFO_TIMEOUT);
-
-			return () => clearTimeout(timeout);
-		}
-	});
-
-	$effect(() => {
-		const conversation = activeConversation();
-		const messages = activeMessages() as DatabaseMessage[];
-		const keepStatsVisible = config().keepStatsVisible;
-
-		if (keepStatsVisible && conversation) {
-			if (messages.length === 0) {
-				untrack(() => chatStore.clearProcessingState(conversation.id));
-				return;
-			}
-
-			if (!isCurrentConversationLoading && !isStreaming) {
-				untrack(() => chatStore.restoreProcessingStateFromMessages(messages, conversation.id));
-			}
-		}
-	});
-</script>
-
-<div
-	class={[
-		'chat-processing-info-container pointer-events-none relative w-full hidden md:block',
-		processingVisible && 'visible'
-	]}
->
-	<div class="chat-processing-info-content absolute bottom-4 left-1/2 -translate-x-1/2">
-		{#each processingDetails as detail (detail)}
-			<span class="chat-processing-info-detail pointer-events-auto backdrop-blur-sm">{detail}</span>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.chat-processing-info-container {
-		position: sticky;
-		top: 0;
-		z-index: 10;
-		padding: 0 1rem 0.75rem;
-		opacity: 0;
-		transform: translateY(50%);
-		transition:
-			opacity 300ms ease-out,
-			transform 300ms ease-out;
-	}
-
-	.chat-processing-info-container.visible {
-		opacity: 1;
-		transform: translateY(0);
-	}
-
-	.chat-processing-info-content {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 1rem;
-		justify-content: center;
-		max-width: 48rem;
-		margin: 0 auto;
-	}
-
-	.chat-processing-info-detail {
-		color: var(--muted-foreground);
-		font-size: 0.75rem;
-		padding: 0.25rem 0.75rem;
-		border-radius: 0.375rem;
-		font-family:
-			ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
-		white-space: nowrap;
-	}
-
-	@media (max-width: 768px) {
-		.chat-processing-info-content {
-			gap: 0.5rem;
-		}
-
-		.chat-processing-info-detail {
-			font-size: 0.7rem;
-			padding: 0.2rem 0.5rem;
-		}
-	}
-</style>
@@ -241,13 +241,18 @@ export { default as ChatFormActionAddToolsSubmenu } from './ChatForm/ChatFormAct
 export { default as ChatFormActionAddMcpServersSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte';

 /**
- * **ChatFormReasoningToggle** - Thinking toggle button with effort dropdown
+ * Dropdown submenu for selecting reasoning effort level.
 *
- * A toggle button with lightbulb icon that indicates thinking status.
- * Shows the reasoning effort dropdown when clicked.
+ * Shows a "Reasoning" sub-menu item with a lightbulb icon indicating
+ * thinking status, and a nested list of effort levels.
 * Only visible when the current model supports thinking.
 */
-export { default as ChatFormReasoningToggle } from './ChatForm/ChatFormActions/ChatFormReasoningToggle.svelte';
+export { default as ChatFormActionAddReasoningSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte';
+
+/**
+ * Compact context-usage gauge with per-turn and cumulative breakdown in the tooltip.
+ */
+export { default as ChatFormContextGauge } from './ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte';

 /**
 * Hidden file input element for programmatic file selection.
@@ -669,14 +674,6 @@ export { default as ChatScreenDragOverlay } from './ChatScreen/ChatScreenDragOve
 */
 export { default as ChatScreenForm } from './ChatScreen/ChatScreenForm.svelte';

-/**
- * Processing info display during generation. Shows real-time statistics:
- * tokens per second, prompt/completion token counts, and elapsed time.
- * Data sourced from slotsService polling during active generation.
- * Only visible when `isCurrentConversationLoading` is true.
- */
-export { default as ChatScreenProcessingInfo } from './ChatScreen/ChatScreenProcessingInfo.svelte';
-
 /**
 * Server error alert displayed when the server is unreachable.
 * Shows the error message with a retry button.
@@ -76,7 +76,7 @@
 		open = value;
 		onToggle?.();
 	}}
-	class={className}
+	class="{className} my-0!"
 >
 	<Card class="gap-0 border-muted bg-muted/30 py-0">
 		<Collapsible.Trigger class="flex w-full cursor-pointer items-start justify-between gap-2 p-3">
@@ -72,8 +72,8 @@
 </script>

 <div
-	class="code-preview-wrapper rounded-lg border border-border bg-muted {className}"
-	style="max-height: {maxHeight}; max-width: {maxWidth};"
+	class="code-preview-wrapper min-w-0 max-w-full overflow-x-auto rounded-lg border border-border bg-muted {className}"
+	style="max-height: {maxHeight}; {maxWidth ? `max-width: ${maxWidth};` : ''}"
 >
 	<!-- Needs to be formatted as single line for proper rendering -->
 	<pre class="m-0"><code class="hljs text-sm leading-relaxed">{@html highlightedHtml}</code></pre>
@@ -4,9 +4,10 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { fly } from 'svelte/transition';
 	import { McpServerCardCompact, McpServerForm } from '$lib/components/app/mcp';
-	import { RECOMMENDED_MCP_SERVERS } from '$lib/constants';
+	import { RECOMMENDED_MCP_SERVERS, SETTINGS_KEYS } from '$lib/constants';
 	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
 	import { uuid } from '$lib/utils';
 	import { MCP_SERVERS_ADDED_TO_CHAT_LOCALSTORAGE_KEY, MCP_SERVER_ID_PREFIX } from '$lib/constants';
 	import type { MCPServerSettingsEntry } from '$lib/types';
@@ -24,6 +25,22 @@
 	);

 	let addedServers = $state<MCPServerSettingsEntry[]>([]);
+	let didAddAny = $state(false);
+
+	let selectedRecommendedCount = $derived.by(
+		() => RECOMMENDED_MCP_SERVERS.filter((server) => selected[server.id]).length
+	);
+
+	let footerLabel = $derived.by(() => {
+		const recommended = selectedRecommendedCount;
+		const custom = addedServers.length;
+		const total = recommended + custom;
+
+		if (total === 0) return 'Continue';
+		if (recommended === 0) return custom === 1 ? 'Add server' : `Add ${custom} servers`;
+		if (custom === 0) return recommended === 1 ? 'Add server' : `Add ${recommended} servers`;
+		return `Add ${recommended} servers and ${custom} custom`;
+	});

 	let showAddForm = $state(false);
 	let newServerUrl = $state('');
@@ -44,9 +61,14 @@
 			showAddForm = false;
 			newServerUrl = '';
 			newServerHeaders = '';
-			addedServers = [];
+
+			if (!didAddAny) {
+				settingsStore.updateConfig(SETTINGS_KEYS.MCP_SERVERS, []);
+			}

 			localStorage.setItem(MCP_SERVERS_ADDED_TO_CHAT_LOCALSTORAGE_KEY, 'true');
+			addedServers = [];
+			didAddAny = false;
 		}
 		open = value;
 		onOpenChange?.(value);
@@ -59,6 +81,7 @@
 	}

 	function enableSelected() {
+		didAddAny = true;
 		localStorage.setItem(MCP_SERVERS_ADDED_TO_CHAT_LOCALSTORAGE_KEY, 'true');

 		for (const server of RECOMMENDED_MCP_SERVERS) {
@@ -83,6 +106,8 @@
 	function saveNewServer() {
 		if (newServerUrlError) return;

+		didAddAny = true;
+
 		const newServerId = uuid() ?? `${MCP_SERVER_ID_PREFIX}-${Date.now()}`;

 		localStorage.setItem(MCP_SERVERS_ADDED_TO_CHAT_LOCALSTORAGE_KEY, 'true');
@@ -174,7 +199,12 @@
 		<Dialog.Footer>
 			<Button variant="secondary" size="sm" onclick={() => handleOpenChange(false)}>Not now</Button>

-			<Button variant="default" size="sm" onclick={enableSelected}>Add selected</Button>
+			<Button
+				variant="default"
+				size="sm"
+				onclick={enableSelected}
+				disabled={footerLabel === 'Continue'}>{footerLabel}</Button
+			>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
@@ -39,13 +39,17 @@
 					{@const faviconUrl = group.serverId ? mcpStore.getServerFavicon(group.serverId) : null}

 					<span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
-						<McpServerIdentity
-							iconClass="h-4 w-4"
-							iconRounded="rounded-sm"
-							showVersion={false}
-							displayName={group.label}
-							{faviconUrl}
-						/>
+						{#if group.source === 'mcp'}
+							<McpServerIdentity
+								iconClass="h-4 w-4"
+								iconRounded="rounded-sm"
+								showVersion={false}
+								displayName={group.label}
+								{faviconUrl}
+							/>
+						{:else}
+							<TruncatedText text={group.label} class="font-medium" />
+						{/if}
 					</span>

 					<span class="ml-auto shrink-0 text-xs text-muted-foreground">
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+	import HoverCardPortal from './hover-card-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = 'center',
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof HoverCardPortal>>;
+	} = $props();
+</script>
+
+<HoverCardPortal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden',
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPortal>
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+	let { ...restProps }: HoverCardPrimitive.PortalProps = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...restProps} />
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: HoverCardPrimitive.RootProps = $props();
+</script>
+
+<HoverCardPrimitive.Root bind:open {...restProps} />
@@ -0,0 +1,15 @@
+import Root from './hover-card.svelte';
+import Content from './hover-card-content.svelte';
+import Trigger from './hover-card-trigger.svelte';
+import Portal from './hover-card-portal.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Portal,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+	Portal as HoverCardPortal
+};