Lumpiasty/llama.cpp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: fix context gauge for single-model usage (#25738)

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

* webui: keep context gauge details open state across reopens
This commit is contained in:
Tom Tan
2026-08-11 13:42:48 +02:00
committed by GitHub
parent 704485942a
commit 8d274dd7c6
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte
+5 -4
View File
@@ -3,6 +3,7 @@
import { ChevronDown } from '@lucide/svelte'; import { ChevronDown } from '@lucide/svelte';
import * as Collapsible from '$lib/components/ui/collapsible'; import * as Collapsible from '$lib/components/ui/collapsible';
import { STATS_UNITS } from '$lib/constants'; import { STATS_UNITS } from '$lib/constants';
import { gaugePopup } from '$lib/stores/context-gauge-popup.svelte';
interface Props { interface Props {
currentRead: number; currentRead: number;
@@ -30,19 +31,19 @@
transientDetails transientDetails
}: Props = $props(); }: Props = $props();
let open = $state(false);
const hasCumulative = $derived(cumulativeRead > 0 || cumulativeOutput > 0); const hasCumulative = $derived(cumulativeRead > 0 || cumulativeOutput > 0);
const hasCurrent = $derived(currentRead > 0 || currentOutput > 0); const hasCurrent = $derived(currentRead > 0 || currentOutput > 0);
</script> </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 <Collapsible.Trigger
class="flex w-full cursor-pointer items-center gap-1 text-xs text-muted-foreground hover:text-foreground" class="flex w-full cursor-pointer items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
> >
<span>Token usage details</span> <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.Trigger>
<Collapsible.Content class="flex flex-col gap-4 text-xs pt-4"> <Collapsible.Content class="flex flex-col gap-4 text-xs pt-4">
tools/ui/src/lib/hooks/use-context-gauge.svelte.ts
+1 -1
View File
@@ -112,7 +112,7 @@ export function useContextGauge(): UseContextGaugeReturn {
return chatStore.getConversationModel(activeMessages() as DatabaseMessage[]); return chatStore.getConversationModel(activeMessages() as DatabaseMessage[]);
}); });
const isActiveModelLoaded = $derived( const isActiveModelLoaded = $derived(
activeModelId !== null && modelsStore.isModelLoaded(activeModelId) activeModelId !== null && (!isRouterMode() || modelsStore.isModelLoaded(activeModelId))
); );
const isActiveModelLoading = $derived( const isActiveModelLoading = $derived(
activeModelId !== null && modelsStore.isModelOperationInProgress(activeModelId) activeModelId !== null && modelsStore.isModelOperationInProgress(activeModelId)
tools/ui/src/lib/stores/context-gauge-popup.svelte.ts
+1 -1
View File
@@ -16,7 +16,7 @@ import {
let closeTimer: ReturnType<typeof setTimeout> | undefined; let closeTimer: ReturnType<typeof setTimeout> | undefined;
let lastPointerType = ''; 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 { function openFrom(trigger: HTMLElement): void {
clearTimeout(closeTimer); clearTimeout(closeTimer);