From 8d274dd7c6233ed73c7509cc2a8be9960f7df7d5 Mon Sep 17 00:00:00 2001
From: Tom Tan <29201606+intel00000@users.noreply.github.com>
Date: Tue, 11 Aug 2026 04:42:48 -0700
Subject: [PATCH] ui: fix context gauge for single-model usage (#25738)

* webui: hide loaded model in context gauge at single-model mode

* webui: keep context gauge details open state across reopens
---
 .../ChatFormContextGauge/ContextGaugeDetails.svelte      | 9 +++++----
 tools/ui/src/lib/hooks/use-context-gauge.svelte.ts       | 2 +-
 tools/ui/src/lib/stores/context-gauge-popup.svelte.ts    | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte
index ab36e4a43..eaaba69de 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte
@@ -3,6 +3,7 @@
 	import { ChevronDown } from '@lucide/svelte';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import { STATS_UNITS } from '$lib/constants';
+	import { gaugePopup } from '$lib/stores/context-gauge-popup.svelte';
 
 	interface Props {
 		currentRead: number;
@@ -30,19 +31,19 @@
 		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.Root bind:open={gaugePopup.detailsOpen} 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' : '')} />
+		<ChevronDown
+			class={'ml-auto h-3 w-3 transition-transform' + (gaugePopup.detailsOpen ? ' rotate-180' : '')}
+		/>
 	</Collapsible.Trigger>
 
 	<Collapsible.Content class="flex flex-col gap-4 text-xs pt-4">
diff --git a/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts b/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts
index 76dcd356e..7ab3f83df 100644
--- a/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts
@@ -112,7 +112,7 @@ export function useContextGauge(): UseContextGaugeReturn {
 		return chatStore.getConversationModel(activeMessages() as DatabaseMessage[]);
 	});
 	const isActiveModelLoaded = $derived(
-		activeModelId !== null && modelsStore.isModelLoaded(activeModelId)
+		activeModelId !== null && (!isRouterMode() || modelsStore.isModelLoaded(activeModelId))
 	);
 	const isActiveModelLoading = $derived(
 		activeModelId !== null && modelsStore.isModelOperationInProgress(activeModelId)
diff --git a/tools/ui/src/lib/stores/context-gauge-popup.svelte.ts b/tools/ui/src/lib/stores/context-gauge-popup.svelte.ts
index 654dc9f77..34f25283f 100644
--- a/tools/ui/src/lib/stores/context-gauge-popup.svelte.ts
+++ b/tools/ui/src/lib/stores/context-gauge-popup.svelte.ts
@@ -16,7 +16,7 @@ import {
 let closeTimer: ReturnType<typeof setTimeout> | undefined;
 let lastPointerType = '';
 
-export const gaugePopup = $state({ bottom: 0, centerX: 0, open: false });
+export const gaugePopup = $state({ bottom: 0, centerX: 0, detailsOpen: false, open: false });
 
 function openFrom(trigger: HTMLElement): void {
 	clearTimeout(closeTimer);