From ff067f76dd8e9e05f0528056f1274adf01a54d70 Mon Sep 17 00:00:00 2001
From: Pascal <admin@serveurperso.com>
Date: Sun, 26 Jul 2026 06:51:10 +0200
Subject: [PATCH] ui: fix context gauge card regressions and land at the
 conversation end (#26099)

The context gauge card starts monitoring like the dial does, because
its own processing state instance only follows the live stream while
its monitoring flag is set. It also gets back the text-sm and ring
classes the removed hover card wrapper used to inject, which restores
its layout. Routing to a conversation now lands at the bottom
instantly and keeps the pin one frame at a time until the page height
settles, since content-visibility size realizations and syntax
highlight passes grow the page without DOM mutations.
---
 .../ContextGaugePopup.svelte                  |  9 ++++-
 .../app/chat/ChatScreen/ChatScreen.svelte     | 40 ++++++++++++++++++-
 tools/ui/src/lib/constants/auto-scroll.ts     |  6 +++
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugePopup.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugePopup.svelte
index 81acdbaf7..af9ad010e 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugePopup.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugePopup.svelte
@@ -13,6 +13,13 @@
 
 	const gauge = useContextGauge();
 
+	// The gauge hook wraps a processing state instance that only follows the
+	// live stream while its own monitoring flag is set, so the card instance
+	// starts monitoring like the dial does.
+	$effect(() => {
+		gauge.startMonitoring();
+	});
+
 	let cardEl = $state<HTMLElement | null>(null);
 
 	// Any press outside the card and outside the dial closes the card.
@@ -44,7 +51,7 @@
 	<div
 		role="status"
 		bind:this={cardEl}
-		class="absolute z-50 w-64 -translate-x-1/2 rounded-lg border border-border/50 bg-popover p-3 text-popover-foreground shadow-lg"
+		class="absolute z-50 w-64 -translate-x-1/2 rounded-lg border border-border/50 bg-popover p-3 text-sm text-popover-foreground shadow-lg ring-1 ring-foreground/10"
 		style="left: {gaugePopup.centerX}px; bottom: {gaugePopup.bottom}px"
 		onpointerenter={gaugeCardEnter}
 		onpointerleave={gaugeCardLeave}
diff --git a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index a0d66c642..6e32fc7aa 100644
--- a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -31,11 +31,11 @@
 	import { config } from '$lib/stores/settings.svelte';
 	import { serverLoading, serverError } from '$lib/stores/server.svelte';
 	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount, tick } from 'svelte';
 	import ChatScreenGreeting from './ChatScreenGreeting.svelte';
 	import ChatScreenActionScrollDown from './ChatScreenActionScrollDown.svelte';
 	import ChatScreenDialogsAndAlerts from './ChatScreenDialogsAndAlerts.svelte';
-	import { ROUTES } from '$lib/constants';
+	import { LANDING_SETTLE_MAX_MS, LANDING_STABLE_FRAMES, ROUTES } from '$lib/constants';
 
 	let { showCenteredEmpty = false } = $props();
 
@@ -128,6 +128,41 @@
 		return true;
 	}
 
+	let lastScrolledConversationId: string | null = null;
+
+	// Lands at the bottom of a conversation the first time its messages
+	// render, whether the route comes from another conversation or from a
+	// non-conversation route. The page keeps growing after the first pin
+	// without DOM mutations (content-visibility size realizations, syntax
+	// highlight passes), so the instant pin repeats every frame until the
+	// height settles, bailing out on user scroll or conversation change.
+	async function handleMessagesReady(messageCount: number) {
+		if (messageCount === 0) return;
+		const id = activeConversation()?.id ?? null;
+		if (!id || id === lastScrolledConversationId) return;
+		lastScrolledConversationId = id;
+		await tick();
+		autoScroll.scrollToBottom();
+
+		const container = scroll.chatScrollContainer;
+		if (!container) return;
+		const started = performance.now();
+		let stableFrames = 0;
+		let lastHeight = container.scrollHeight;
+		const settle = () => {
+			if (autoScroll.userScrolledUp) return;
+			if (activeConversation()?.id !== id) return;
+			autoScroll.scrollToBottom();
+			const height = container.scrollHeight;
+			stableFrames = height === lastHeight ? stableFrames + 1 : 0;
+			lastHeight = height;
+			if (stableFrames >= LANDING_STABLE_FRAMES) return;
+			if (performance.now() - started > LANDING_SETTLE_MAX_MS) return;
+			requestAnimationFrame(settle);
+		};
+		requestAnimationFrame(settle);
+	}
+
 	function handleSendLikeScroll() {
 		if (!isMobile.current) {
 			autoScroll.enable();
@@ -246,6 +281,7 @@
 		{#if !isEmpty}
 			<ChatMessages
 				messages={activeMessages()}
+				onMessagesReady={handleMessagesReady}
 				onUserAction={() => {
 					handleSendLikeScroll();
 				}}
diff --git a/tools/ui/src/lib/constants/auto-scroll.ts b/tools/ui/src/lib/constants/auto-scroll.ts
index c629228eb..67c5f9301 100644
--- a/tools/ui/src/lib/constants/auto-scroll.ts
+++ b/tools/ui/src/lib/constants/auto-scroll.ts
@@ -1,4 +1,10 @@
 export const AUTO_SCROLL_INTERVAL = 100;
+// Conversation landing: the page keeps growing after the first bottom pin
+// without DOM mutations (content-visibility size realizations, syntax
+// highlight passes), so the pin repeats every frame until the height holds
+// for this many consecutive frames, bounded by the time cap below.
+export const LANDING_STABLE_FRAMES = 10;
+export const LANDING_SETTLE_MAX_MS = 1000;
 // Chat main view: tight threshold because scroll-here events come from
 // discrete assistant-message appends.
 export const AUTO_SCROLL_AT_BOTTOM_THRESHOLD = 10;