ui: reduce per-token render cost when streaming (#26053)

* performance harness - the empirical root Assisted-by: Claude Opus 4.8 * 210.36ms -> 2.67ms per streamed token Assisted-by: Claude Opus 4.8 * 11.58ms -> 0.62ms per streamed token Assisted-by: Claude Opus 4.8 * 22.02ms -> 3.33ms per streamed token Assisted-by: Claude Opus 4.8 * 3.07ms -> 1.36ms per streamed token at 40 messages Assisted-by: Claude Opus 4.8 --------- Co-authored-by: Zach Winter <dmtommy@icloud.com>
2026-07-24 22:09:46 +02:00
parent 96013c5112
commit 555881ebc8
18 changed files with 1037 additions and 35 deletions
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import ChatMessageAgenticContent from '$lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte';
+	import { perfState } from './agentic-perf-state.svelte';
+</script>
+
+<Tooltip.Provider>
+	{#if perfState.message}
+		<ChatMessageAgenticContent
+			message={perfState.message}
+			toolMessages={perfState.toolMessages}
+			isStreaming={perfState.isStreaming}
+			isLastAssistantMessage
+		/>
+	{/if}
+</Tooltip.Provider>
@@ -0,0 +1,12 @@
+<script lang="ts">
+	// Mounts the real ChatMessages list against the real conversations store, so
+	// the harness exercises `displayMessages` (which rebuilds every message's
+	// toolMessages array) rather than a single message subtree.
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import ChatMessages from '$lib/components/app/chat/ChatMessages/ChatMessages.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+</script>
+
+<Tooltip.Provider>
+	<ChatMessages messages={conversationsStore.activeMessages} />
+</Tooltip.Provider>
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import CollapsibleContentBlock from '$lib/components/app/content/CollapsibleContentBlock.svelte';
+	import CollapsibleTerminalBlock from '$lib/components/app/content/CollapsibleTerminalBlock.svelte';
+
+	interface Props {
+		variant: 'content' | 'terminal';
+		open: boolean;
+	}
+
+	let { variant, open }: Props = $props();
+</script>
+
+{#if variant === 'content'}
+	<CollapsibleContentBlock {open} title="Block">
+		<span>collapsible-body-marker</span>
+	</CollapsibleContentBlock>
+{:else}
+	<CollapsibleTerminalBlock {open} title="Block">
+		<span>collapsible-body-marker</span>
+	</CollapsibleTerminalBlock>
+{/if}
@@ -0,0 +1,17 @@
+// Shared reactive fixture state for the Tier 1 perf harness.
+//
+// The wrapper component reads this module directly rather than taking props,
+// so the driver can mutate it without depending on how the test renderer
+// forwards props.
+
+import type { DatabaseMessage } from '$lib/types';
+
+export const perfState = $state<{
+	message: DatabaseMessage | null;
+	toolMessages: DatabaseMessage[];
+	isStreaming: boolean;
+}>({
+	message: null,
+	toolMessages: [],
+	isStreaming: true
+});