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

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 ab36e4a43f74da4c182e39d36550a5b1accc74ce..eaaba69de6223cf99228e39f5d6257cc1c63d3d8 100644 (file)
--- 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 76dcd356ec296011ae3895435c0af4197ec82930..7ab3f83df609aae41d6850d9c9adb9a578de7eb2 100644 (file)
--- 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 654dc9f7787b620050bdeb31d531511ebe76e35f..34f25283f89ebf0f6b77f03755742a1b66293c7c 100644 (file)
--- 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);