entasis 0.11.0 → 0.13.0

package/dist/components/AIModelSelector/aiModelSelector.mcp.d.ts

@@ -1 +1 @@
-export declare const aiModelSelectorDescription = "\n# AIModelSelector\n\nModel selection built on Entasis `PopupMenu` and `Menu`. It accepts flat `models`, recursive `groups`, disabled entries, provider labels, optional keyword search, context-window metadata, and supplemental standard Menu items.\n\nBind `value`, `open`, and `query` for direct control. `defaultValue` and `defaultOpen` apply once when their live props are omitted; `onValueChange` receives `{ value, model }`, and `onOpenChange` reports component-owned disclosure changes. Set `searchable={false}` to remove the search header and ignore, without erasing, a bound query. When `value` is omitted or undefined inside `AIConversation`, selection reads and updates `conversation.selectedModel`. A direct string or `null` wins over provider state; `null` is the bindable controlled-empty value because Svelte substitutes prop fallbacks for `undefined`. `placeholder` follows the same omission rule before the compact `labels` object and conversation placeholder, with `null` suppressing visible placeholder text.\n\nThe `children` trigger, `search` header, and `empty` snippets receive `{ model, value, open, query, searchable, disabled, labels, select, setQuery, setOpen, toggle }`. The resolved `labels` cover the empty trigger, its accessible fallback name, search field, empty result, and providerless-group heading. The trigger remains owned by PopupMenu, so keyboard navigation and focus return continue to work with custom content. Theme slots cover the root, trigger, trigger content/icon/label, popover, search header, menu, provider headings, model options, nested groups, and empty state.\n\nSearch is case-insensitive across model id, label, provider, description, and `keywords`. A matching group label preserves that group; otherwise recursive groups retain only matching descendants. `menuItems` uses the public `MenuItem` union and is appended after the models, so recursive checked submenus can own reasoning effort, speed, verbosity, or provider-specific controls. Models without a provider use the configurable `providerFallback` heading, while option descriptions fall back to the provider name. Disabled selectors recursively disable supplemental menu items as well as groups and models.\n\n```svelte\n<AIModelSelector\n\t  models={[{ id: 'fast', label: 'Fast', provider: 'Acme', contextWindow: 128000 }]}\n\t  groups={[{ label: 'Research', models: researchModels }]}\n\t  searchable={false}\n\t  menuItems={[{ type: 'submenu', title: 'Reasoning effort', menu: reasoningItems }]}\n\t  bind:value\n  onValueChange={({ value, model }) => selectModel(value, model)}\n/>\n```\n";
+export declare const aiModelSelectorDescription = "\n# AIModelSelector\n\nModel selection built on Entasis `PopupMenu` and `Menu`. It accepts flat `models`, recursive `groups`, disabled entries, provider labels, optional keyword search, context-window metadata, and supplemental standard Menu items.\n\nBind `value`, `open`, and `query` for direct control. `defaultValue` and `defaultOpen` apply once when their live props are omitted; `onValueChange` receives `{ value, model }`, and `onOpenChange` reports component-owned disclosure changes. Set `searchable={false}` to remove the search header and ignore, without erasing, a bound query. When `value` is omitted or undefined inside `AIConversation`, selection reads and updates `conversation.selectedModel`. A direct string or `null` wins over provider state; `null` is the bindable controlled-empty value because Svelte substitutes prop fallbacks for `undefined`. `placeholder` follows the same omission rule before the compact `labels` object and conversation placeholder, with `null` suppressing visible placeholder text.\n\nThe `children` trigger, `search` header, and `empty` snippets receive `{ model, value, open, query, searchable, disabled, labels, select, setQuery, setOpen, toggle }`. The resolved `labels` cover the empty trigger, its accessible fallback name, search field, empty result, and providerless-group heading. The trigger remains owned by PopupMenu, so keyboard navigation and focus return continue to work with custom content. Theme slots cover the root, trigger, trigger content/icon/label, popover, search header, menu, provider headings, model options, nested groups, and empty state.\n\nSearch is case-insensitive across model id, label, provider, description, and `keywords`. A matching group label preserves that group; otherwise recursive groups retain only matching descendants. `menuItems` uses the public `MenuItem` union and is appended after the models, so recursive checked submenus can own reasoning effort, speed, verbosity, or provider-specific controls. Models without a provider use the configurable `providerFallback` heading. When every flat model shares one provider no heading is shown, and a row never repeats a provider that a heading already names; only rows inside `groups` fall back to the provider as their description. The selected row keeps its context-window badge next to the check mark. The default trigger is a ghost text button sized to its label that can shrink and truncate in a crowded footer; the `optionMeta` theme slot styles the selected row's badge and check. Disabled selectors recursively disable supplemental menu items as well as groups and models.\n\n```svelte\n<AIModelSelector\n\t  models={[{ id: 'fast', label: 'Fast', provider: 'Acme', contextWindow: 128000 }]}\n\t  groups={[{ label: 'Research', models: researchModels }]}\n\t  searchable={false}\n\t  menuItems={[{ type: 'submenu', title: 'Reasoning effort', menu: reasoningItems }]}\n\t  bind:value\n  onValueChange={({ value, model }) => selectModel(value, model)}\n/>\n```\n";

package/dist/components/AIModelSelector/aiModelSelector.mcp.js

@@ -7,7 +7,7 @@ Bind \`value\`, \`open\`, and \`query\` for direct control. \`defaultValue\` and
 
 The \`children\` trigger, \`search\` header, and \`empty\` snippets receive \`{ model, value, open, query, searchable, disabled, labels, select, setQuery, setOpen, toggle }\`. The resolved \`labels\` cover the empty trigger, its accessible fallback name, search field, empty result, and providerless-group heading. The trigger remains owned by PopupMenu, so keyboard navigation and focus return continue to work with custom content. Theme slots cover the root, trigger, trigger content/icon/label, popover, search header, menu, provider headings, model options, nested groups, and empty state.
 
-Search is case-insensitive across model id, label, provider, description, and \`keywords\`. A matching group label preserves that group; otherwise recursive groups retain only matching descendants. \`menuItems\` uses the public \`MenuItem\` union and is appended after the models, so recursive checked submenus can own reasoning effort, speed, verbosity, or provider-specific controls. Models without a provider use the configurable \`providerFallback\` heading, while option descriptions fall back to the provider name. Disabled selectors recursively disable supplemental menu items as well as groups and models.
+Search is case-insensitive across model id, label, provider, description, and \`keywords\`. A matching group label preserves that group; otherwise recursive groups retain only matching descendants. \`menuItems\` uses the public \`MenuItem\` union and is appended after the models, so recursive checked submenus can own reasoning effort, speed, verbosity, or provider-specific controls. Models without a provider use the configurable \`providerFallback\` heading. When every flat model shares one provider no heading is shown, and a row never repeats a provider that a heading already names; only rows inside \`groups\` fall back to the provider as their description. The selected row keeps its context-window badge next to the check mark. The default trigger is a ghost text button sized to its label that can shrink and truncate in a crowded footer; the \`optionMeta\` theme slot styles the selected row's badge and check. Disabled selectors recursively disable supplemental menu items as well as groups and models.
 
 \`\`\`svelte
 <AIModelSelector

package/dist/components/AIModelSelector/aiModelSelector.theme.d.ts

@@ -1,75 +1,78 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const aiModelSelectorTheme: {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerContent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerIcon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerLabel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    trigger: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerContent: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerIcon: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerLabel: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         selected: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    search: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    menu: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    provider: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    option: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    search: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    popover: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    menu: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    provider: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    option: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         selected: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    group: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    optionMeta: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    group: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    empty: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type AIModelSelectorTheme = typeof aiModelSelectorTheme;
 export type AIModelSelectorThemeProps = InferComponentTheme<AIModelSelectorTheme>;
 export declare const setAIModelSelectorTheme: (theme: InferComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerContent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerIcon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerLabel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    trigger: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerContent: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerIcon: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerLabel: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         selected: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    search: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    menu: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    provider: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    option: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    search: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    popover: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    menu: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    provider: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    option: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         selected: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    group: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    optionMeta: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    group: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    empty: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useAIModelSelectorTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerContent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerIcon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    triggerLabel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useAIModelSelectorTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    trigger: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerContent: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerIcon: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    triggerLabel: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         selected: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    search: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    menu: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    provider: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    option: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    search: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    popover: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    menu: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    provider: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    option: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         selected: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    group: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    optionMeta: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    group: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    empty: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>;

package/dist/components/AIModelSelector/aiModelSelector.theme.js

@@ -1,7 +1,9 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 const defaultRoot = cva({ base: 'inline-flex min-w-0' });
-const defaultTrigger = cva({ base: 'min-w-44 justify-between gap-md' });
-const defaultTriggerContent = cva({ base: 'flex min-w-0 items-center gap-md' });
+// A ghost text button sized to its label, like the model picker beside send in Claude and
+// ChatGPT. It may shrink inside a crowded composer footer; the label truncates first.
+const defaultTrigger = cva({ base: 'min-w-0 max-w-full shrink justify-between gap-xs' });
+const defaultTriggerContent = cva({ base: 'flex min-w-0 items-center gap-sm' });
 const defaultTriggerIcon = cva({
     base: 'flex size-5 shrink-0 items-center justify-center rounded-sm border border-neutral-muted bg-surface text-xs'
 });
@@ -19,6 +21,7 @@ const defaultOption = cva({
     variants: { selected: { true: '', false: '' } },
     defaultVariants: { selected: false }
 });
+const defaultOptionMeta = cva({ base: 'inline-flex items-center gap-sm' });
 const defaultGroup = cva({ base: '' });
 const defaultEmpty = cva({ base: 'justify-start text-neutral/70' });
 export const aiModelSelectorTheme = {
@@ -32,8 +35,9 @@ export const aiModelSelectorTheme = {
     menu: defaultMenu,
     provider: defaultProvider,
     option: defaultOption,
+    optionMeta: defaultOptionMeta,
     group: defaultGroup,
     empty: defaultEmpty
 };
 export const setAIModelSelectorTheme = setComponentTheme('ai-model-selector');
-export const useAIModelSelectorTheme = useComponentTheme('aiModelSelector', aiModelSelectorTheme);
+export const useAIModelSelectorTheme = useComponentTheme('ai-model-selector', aiModelSelectorTheme);

package/dist/components/AIReasoning/AIReasoning.svelte

@@ -4,8 +4,9 @@
 	import { brainIcon } from '../Icons/brain.js';
 	import Markdown from '../Markdown/Markdown.svelte';
 	import Slot from '../Slot/Slot.svelte';
-	import SpinnerText from '../SpinnerText/SpinnerText.svelte';
+	import { formatAIElapsed } from '../AITool/toolRendering.js';
 	import { untrack } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import type { CollapsibleThemeProps } from '../Collapsible/collapsible.theme.js';
 	import type {
 		AIReasoningLabels,
@@ -18,9 +19,11 @@
 	const AUTO_CLOSE_DELAY = 1000;
 	const MS_IN_S = 1000;
 	const MESSAGE_INTERVAL = 2000;
+	const ELAPSED_TICK = 1000;
 
 	let {
 		ref = $bindable(),
+		size = 'normal',
 		content,
 		streaming = false,
 		defaultOpen,
@@ -48,22 +51,30 @@
 	const autoOpen = untrack(() => defaultOpen !== false);
 	let computedDuration = $state<number | undefined>(undefined);
 	let messageIndex = $state(0);
+	let streamStartedAt = $state<number | null>(null);
+	let now = $state(0);
+	let overflowing = $state(false);
 	const duration = $derived(durationProp ?? computedDuration);
 	const resolvedLabels = $derived<AIReasoningLabels>({
 		thinking: labels?.thinking ?? t.aiReasoningThinking,
 		thoughtForFewSeconds: labels?.thoughtForFewSeconds ?? t.aiReasoningFewSeconds,
-		duration: labels?.duration ?? t.aiReasoningDuration
+		duration: labels?.duration ?? formatDuration
 	});
+	const messages = $derived(
+		thinkingMessages?.length ? [...new Set(thinkingMessages)] : [resolvedLabels.thinking]
+	);
 	const thinkingMessage = $derived(
-		thinkingMessages?.length
-			? (thinkingMessages[messageIndex % thinkingMessages.length] ?? resolvedLabels.thinking)
-			: resolvedLabels.thinking
+		messages[messageIndex % messages.length] ?? resolvedLabels.thinking
+	);
+	// Elapsed seconds while streaming, shown once the first second has passed.
+	const elapsed = $derived(
+		streaming && streamStartedAt !== null ? Math.max(0, now - streamStartedAt) : undefined
 	);
-	const displayedThinkingMessages = $derived([thinkingMessage]);
 	const reasoningState = $derived<AIReasoningState>({
 		open: openState.value,
 		streaming,
 		duration,
+		elapsed: elapsed === undefined ? undefined : Math.floor(elapsed / MS_IN_S),
 		message: thinkingMessage,
 		labels: resolvedLabels
 	});
@@ -80,7 +91,12 @@
 
 	let hasAutoClosed = false;
 	let didAutoOpen = false;
-	let startedAt: number | null = null;
+
+	function formatDuration(seconds: number): string {
+		if (seconds <= 0) return t.aiReasoningUnderSecond;
+		if (seconds < 60) return t.aiReasoningDuration(seconds);
+		return t.aiReasoningDurationLong(formatAIElapsed(seconds * MS_IN_S, t));
+	}
 
 	function setOpen(nextOpen: boolean) {
 		if (openState.value === nextOpen) return;
@@ -91,31 +107,56 @@
 	$effect(() => {
 		if (!streaming) return;
 		messageIndex = 0;
-		const messages = thinkingMessages;
-		if (!messages || messages.length <= 1) return;
+		const count = messages.length;
+		if (count <= 1) return;
 		const interval = setInterval(() => {
-			messageIndex = (messageIndex + 1) % messages.length;
+			messageIndex = (messageIndex + 1) % count;
 		}, MESSAGE_INTERVAL);
 		return () => clearInterval(interval);
 	});
 
 	$effect(() => {
 		if (streaming) {
-			if (startedAt === null) {
-				startedAt = Date.now();
-				hasAutoClosed = false;
-			}
-			if (!didAutoOpen && autoOpen) {
-				setOpen(true);
-				didAutoOpen = true;
-			}
-		} else if (startedAt !== null) {
-			computedDuration = Math.ceil((Date.now() - startedAt) / MS_IN_S);
-			startedAt = null;
-			didAutoOpen = false;
+			untrack(() => {
+				if (streamStartedAt === null) {
+					streamStartedAt = Date.now();
+					now = streamStartedAt;
+					hasAutoClosed = false;
+				}
+				if (!didAutoOpen && autoOpen) {
+					setOpen(true);
+					didAutoOpen = true;
+				}
+			});
+		} else {
+			untrack(() => {
+				if (streamStartedAt === null) return;
+				// Rounded, so a sub-half-second thought reads "less than a second" rather than 1.
+				computedDuration = Math.round((Date.now() - streamStartedAt) / MS_IN_S);
+				streamStartedAt = null;
+				didAutoOpen = false;
+			});
 		}
 	});
 
+	/** The widest elapsed reading in the same unit as `milliseconds` (59s, 59m 59s, 99h 59m). */
+	function widestElapsed(milliseconds: number): number {
+		const seconds = Math.floor(milliseconds / MS_IN_S);
+		if (seconds < 60) return 59 * MS_IN_S;
+		if (seconds < 3600) return 3599 * MS_IN_S;
+		const hourDigits = String(Math.floor(seconds / 3600)).length;
+		return (Number('9'.repeat(hourDigits)) * 3600 + 59 * 60) * MS_IN_S;
+	}
+
+	// Live elapsed time: one tick per second, only while streaming.
+	$effect(() => {
+		if (!streaming) return;
+		const timer = setInterval(() => {
+			now = Date.now();
+		}, ELAPSED_TICK);
+		return () => clearInterval(timer);
+	});
+
 	$effect(() => {
 		if (computedDuration === undefined || streaming || !openState.value || hasAutoClosed) return;
 		const closeTimer = setTimeout(
@@ -127,30 +168,79 @@
 		);
 		return () => clearTimeout(closeTimer);
 	});
+
+	// While streaming, the body is a bounded window pinned to its latest lines; the top fades only
+	// once earlier lines have actually scrolled out of it.
+	const followLatest: Attachment<HTMLElement> = (node) => {
+		const body = node.firstElementChild;
+		if (!(body instanceof HTMLElement) || typeof ResizeObserver === 'undefined') return;
+		const measure = () => {
+			overflowing = body.offsetHeight > node.clientHeight + 1;
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		observer.observe(body);
+		measure();
+		return () => {
+			observer.disconnect();
+			overflowing = false;
+		};
+	};
 </script>
 
 {#snippet defaultTrigger()}
-	{@render brainIcon({ size: 16, class: classes.icon() })}
-	{#if streaming || duration === 0}
-		<SpinnerText
-			texts={displayedThinkingMessages}
-			shimmer
-			showSpinner={false}
-			size="small"
-			class={classes.status()}
-		/>
+	{@render brainIcon({ size: 16, class: classes.icon(), 'aria-hidden': 'true' })}
+	{#if streaming}
+		<!-- Every label sits in one grid cell, so the trigger keeps the widest label's width and the
+		     chevron never shifts while messages cycle. Only the current one is visible and named. -->
+		<span data-slot="ai-reasoning-status" class={classes.status()}>
+			{#each messages as message, index (message)}
+				<span
+					class={classes.message({ current: index === messageIndex % messages.length })}
+					aria-hidden={index === messageIndex % messages.length ? undefined : 'true'}
+				>
+					{message}
+				</span>
+			{/each}
+		</span>
+		{#if elapsed !== undefined && elapsed >= MS_IN_S}
+			<!-- The widest reading of the current unit shares the cell, so the chevron holds still as
+			     the count gains a digit (9s → 10s) and only steps once per unit change. -->
+			<span data-slot="ai-reasoning-elapsed" aria-hidden="true" class={classes.elapsed()}>
+				<span class={classes.elapsedReserve()}>· {formatAIElapsed(widestElapsed(elapsed), t)}</span>
+				<span>· {formatAIElapsed(elapsed, t)}</span>
+			</span>
+		{/if}
 	{:else if duration === undefined}
-		<span class={classes.duration()}>{resolvedLabels.thoughtForFewSeconds}</span>
+		<span data-slot="ai-reasoning-duration" class={classes.duration()}>
+			{resolvedLabels.thoughtForFewSeconds}
+		</span>
 	{:else}
-		<span class={classes.duration()}>{resolvedLabels.duration(duration)}</span>
+		<span data-slot="ai-reasoning-duration" class={classes.duration()}>
+			{resolvedLabels.duration(duration)}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet body()}
+	{#if content != null}
+		<Markdown
+			{content}
+			size={size === 'large' ? 'normal' : 'small'}
+			{...markdown}
+			renderHtml={false}
+		/>
+	{:else if childrenSlot}
+		<Slot render={childrenSlot} payload={reasoningState} />
 	{/if}
 {/snippet}
 
 <Collapsible
 	bind:ref
 	bind:open={openState.value}
-	{onOpenChange}
+	onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}
 	icon={triggerSlot === undefined ? undefined : 'none'}
+	{size}
 	class={classes.root({ className })}
 	theme={collapsibleTheme}
 	{...rootAttributes}
@@ -158,9 +248,16 @@
 	{#snippet trigger()}
 		<Slot render={triggerSlot ?? defaultTrigger} payload={reasoningState} />
 	{/snippet}
-	{#if content != null}
-		<Markdown {content} size="small" {...markdown} renderHtml={false} />
-	{:else if childrenSlot}
-		<Slot render={childrenSlot} payload={reasoningState} />
+	{#if streaming}
+		<div
+			data-slot="ai-reasoning-stream"
+			data-overflowing={overflowing || undefined}
+			class={classes.stream({ overflowing })}
+			{@attach followLatest}
+		>
+			<div class={classes.streamBody()}>{@render body()}</div>
+		</div>
+	{:else}
+		{@render body()}
 	{/if}
 </Collapsible>

package/dist/components/AIReasoning/aiReasoning.mcp.d.ts

@@ -1 +1 @@
-export declare const aiReasoningDescription = "\n# AIReasoning\n\nAIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive. It opens when a stream starts, measures elapsed time in seconds, and closes shortly after the first streamed completion.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { AIReasoning } from 'entasis/ai-reasoning';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\t{streaming}\n\tthinkingMessages={['Planning', 'Checking constraints', 'Preparing response']}\n/>\n```\n\nThe default trigger displays a brain icon and a shimmer-only `SpinnerText` label while streaming. A supplied `thinkingMessages` list replaces the resolved `labels.thinking` value and advances every two seconds when it contains more than one message. The compact `labels` object also overrides the unknown-duration sentence and completed-duration formatter.\n\n## Streaming lifecycle\n\n- `open` starts from `defaultOpen ?? streaming`.\n- At the start of a streaming session, the component auto-opens once unless `defaultOpen={false}`.\n- Closing the panel manually during that stream keeps it closed; streaming does not force it open again.\n- When streaming ends, the measured duration is rounded up to whole seconds.\n- After the first observed stream completes, an open panel closes after `1000` ms by default. A trace that never streamed is not auto-closed.\n- An explicit `duration` is expressed in seconds and takes precedence over the measured duration.\n\nUse `defaultOpen={false}` to opt out of streaming auto-open without disabling manual toggling:\n\n```svelte\n<AIReasoning content={reasoningText} streaming defaultOpen={false} />\n```\n\n## Controlled state\n\n`open` is bindable. `onOpenChange` runs once for user toggles and automatic stream-driven open or close changes. Initialization and parent assignments do not invoke it.\n\n```svelte\n<script lang=\"ts\">\n\tlet open = $state(true);\n\tlet lastUserState = $state(open);\n\n\tfunction handleOpenChange(nextOpen: boolean) {\n\t\tlastUserState = nextOpen;\n\t}\n</script>\n\n<AIReasoning\n\tcontent={reasoningText}\n\tduration={8}\n\tbind:open\n\tonOpenChange={handleOpenChange}\n/>\n<p>Last user-selected state: {lastUserState ? 'open' : 'closed'}</p>\n```\n\n## Custom trigger and body\n\nA custom `trigger` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is `{ open, streaming, duration, message }`, where `message` is the currently displayed thinking label.\n\n```svelte\n<AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>\n\t{#snippet trigger({ open, streaming, duration, message })}\n\t\t<span class=\"flex w-full items-center justify-between\">\n\t\t\t{#if streaming}\n\t\t\t\t<span>{message}</span>\n\t\t\t{:else if duration !== undefined}\n\t\t\t\t<span>Thought for {duration}s</span>\n\t\t\t{/if}\n\t\t\t<span>{open ? 'Hide' : 'Show'}</span>\n\t\t</span>\n\t{/snippet}\n\n\t{#snippet children({ message })}\n\t\t<p>Current step: {message}</p>\n\t{/snippet}\n</AIReasoning>\n```\n\n`content` is optional. When it is non-null, it is rendered as Markdown and takes precedence over `children`:\n\n```svelte\n<AIReasoning content=\"**This Markdown is rendered.**\" defaultOpen>\n\t<p>This custom body is ignored because content was supplied.</p>\n</AIReasoning>\n```\n\n## Markdown safety\n\nPass Markdown options through `markdown`. AIReasoning owns `content` and always forces `renderHtml={false}`, even if renderer options are spread into Markdown.\n\n```svelte\n<AIReasoning content={reasoningText} markdown={markdownOptions} />\n```\n\n## Theme slots\n\nThe AIReasoning `trigger` and `content` theme slots are composed into the actual Collapsible trigger button and content panel. `root` styles the Collapsible root; `icon`, `status`, and `duration` style the default trigger regions.\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\tdefaultOpen\n\ttheme={{\n\t\troot: { base: 'w-full' },\n\t\ttrigger: { base: 'rounded-md px-2' },\n\t\tcontent: { base: 'mt-3 pl-5' }\n\t}}\n/>\n```\n\nGlobal overrides use `setAIReasoningTheme` from the same package entry.\n\n## Props\n\n- `content?: string`: Markdown trace. Takes precedence over custom children.\n- `streaming?: boolean`: Drives status labels, auto-open, duration measurement, and completion close.\n- `thinkingMessages?: readonly string[]`: Optional labels cycled every two seconds while streaming; takes precedence over `labels.thinking`.\n- `labels?: Partial<AIReasoningLabels>`: Default thinking text, unknown-duration text, and duration formatter.\n- `open?: boolean`: Bindable open state.\n- `defaultOpen?: boolean`: Initial state; false also opts out of streaming auto-open.\n- `onOpenChange?: (open: boolean) => void`: Component-owned open-state callback.\n- `duration?: number`: Controlled duration in seconds.\n- `autoCloseDelay?: number`: First-completion close delay in milliseconds; defaults to 1000.\n- `trigger?: Slot<AIReasoningState>`: Complete trigger replacement.\n- `children?: Slot<AIReasoningState>`: Custom body used only when content is omitted.\n- `markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>`: Markdown renderer options.\n- `class?: string`: Class merged onto the Collapsible root.\n- `theme?: AIReasoningThemeProps`: Root, trigger, and content theme overrides.\n- Additional attachments and DOM attributes are forwarded to the Collapsible root.\n";
+export declare const aiReasoningDescription = "\n# AIReasoning\n\nAIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive. It opens when a stream starts, measures elapsed time in seconds, and closes shortly after the first streamed completion.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { AIReasoning } from 'entasis/ai-reasoning';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\t{streaming}\n\tthinkingMessages={['Planning', 'Checking constraints', 'Preparing response']}\n/>\n```\n\nThe default trigger is a compact, muted row about 28px tall with no filled background. It displays a brain icon and a shimmering label while streaming, followed by a live elapsed time once a second has passed (\"Thinking\u2026 \u00B7 6s\"). A supplied `thinkingMessages` list replaces the resolved `labels.thinking` value and advances every two seconds when it contains more than one message. Every message sits in the same grid cell, so the trigger keeps the widest message's width (the caret never shifts) and only the current message is visible and part of the button's accessible name; the elapsed time is hidden from assistive technology and reserves the width of its unit's widest reading (59s, then 59m 59s), so the caret holds still as the count gains a digit and steps only when the unit changes. The compact `labels` object also overrides the unknown-duration sentence and completed-duration formatter.\n\nCompleted durations read \"Thought for less than a second\" for `0`, \"Thought for 6 seconds\" under a minute, and \"Thought for 1m 12s\" from a minute on.\n\nWhile streaming, the body is a bounded window (`max-h-40`) that follows the newest lines; once earlier lines leave the window its top edge fades. The full body returns when streaming ends. The body renders small Markdown (12px, tight paragraph spacing; one step larger at `size=\"large\"`) in a muted colour that Markdown paragraphs and lists inherit, so reasoning reads quieter than the answer. The root has no outer margin: the surrounding thread or message owns the spacing.\n\n`size` (`small`, `normal` or `large`, default `normal`) scales the trigger text, icon and body with the AIMessage size scale; AIThread and AIChat pass their `messageSize`.\n\n## Streaming lifecycle\n\n- `open` starts from `defaultOpen ?? streaming`.\n- At the start of a streaming session, the component auto-opens once unless `defaultOpen={false}`.\n- Closing the panel manually during that stream keeps it closed; streaming does not force it open again.\n- When streaming ends, the measured duration is rounded to whole seconds (under half a second becomes `0`).\n- After the first observed stream completes, an open panel closes after `1000` ms by default. A trace that never streamed is not auto-closed.\n- An explicit `duration` is expressed in seconds and takes precedence over the measured duration.\n\nUse `defaultOpen={false}` to opt out of streaming auto-open without disabling manual toggling:\n\n```svelte\n<AIReasoning content={reasoningText} streaming defaultOpen={false} />\n```\n\n## Controlled state\n\n`open` is bindable. `onOpenChange` runs once for user toggles and automatic stream-driven open or close changes. Initialization and parent assignments do not invoke it.\n\n```svelte\n<script lang=\"ts\">\n\tlet open = $state(true);\n\tlet lastUserState = $state(open);\n\n\tfunction handleOpenChange(nextOpen: boolean) {\n\t\tlastUserState = nextOpen;\n\t}\n</script>\n\n<AIReasoning\n\tcontent={reasoningText}\n\tduration={8}\n\tbind:open\n\tonOpenChange={handleOpenChange}\n/>\n<p>Last user-selected state: {lastUserState ? 'open' : 'closed'}</p>\n```\n\n## Custom trigger and body\n\nA custom `trigger` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is `{ open, streaming, duration, elapsed, message, labels }`, where `message` is the currently displayed thinking label and `elapsed` the whole seconds of the current stream.\n\n```svelte\n<AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>\n\t{#snippet trigger({ open, streaming, duration, message })}\n\t\t<span class=\"flex w-full items-center justify-between\">\n\t\t\t{#if streaming}\n\t\t\t\t<span>{message}</span>\n\t\t\t{:else if duration !== undefined}\n\t\t\t\t<span>Thought for {duration}s</span>\n\t\t\t{/if}\n\t\t\t<span>{open ? 'Hide' : 'Show'}</span>\n\t\t</span>\n\t{/snippet}\n\n\t{#snippet children({ message })}\n\t\t<p>Current step: {message}</p>\n\t{/snippet}\n</AIReasoning>\n```\n\n`content` is optional. When it is non-null, it is rendered as Markdown and takes precedence over `children`:\n\n```svelte\n<AIReasoning content=\"**This Markdown is rendered.**\" defaultOpen>\n\t<p>This custom body is ignored because content was supplied.</p>\n</AIReasoning>\n```\n\n## Markdown safety\n\nPass Markdown options through `markdown`. AIReasoning owns `content` and always forces `renderHtml={false}`, even if renderer options are spread into Markdown.\n\n```svelte\n<AIReasoning content={reasoningText} markdown={markdownOptions} />\n```\n\n## Theme slots\n\nThe AIReasoning `trigger` and `content` theme slots are composed into the actual Collapsible trigger button and content panel. `root` styles the Collapsible root; `icon`, `status` (the stacked label cell), `message` (each cycled label, `current` variant), `elapsed` (with `elapsedReserve`, its invisible widest reading), and `duration` style the default trigger regions; `stream` and `streamBody` style the streaming window.\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\tdefaultOpen\n\ttheme={{\n\t\troot: { base: 'w-full' },\n\t\ttrigger: { base: 'rounded-md px-2' },\n\t\tcontent: { base: 'mt-3 pl-5' }\n\t}}\n/>\n```\n\nGlobal overrides use `setAIReasoningTheme` from the same package entry.\n\n## Props\n\n- `content?: string`: Markdown trace. Takes precedence over custom children.\n- `streaming?: boolean`: Drives status labels, the live elapsed time, the following window, auto-open, duration measurement, and completion close.\n- `thinkingMessages?: readonly string[]`: Optional labels cycled every two seconds while streaming; takes precedence over `labels.thinking`.\n- `labels?: Partial<AIReasoningLabels>`: Default thinking text, unknown-duration text, and duration formatter.\n- `open?: boolean`: Bindable open state.\n- `defaultOpen?: boolean`: Initial state; false also opts out of streaming auto-open.\n- `onOpenChange?: (open: boolean) => void`: Component-owned open-state callback.\n- `duration?: number`: Controlled duration in seconds.\n- `autoCloseDelay?: number`: First-completion close delay in milliseconds; defaults to 1000.\n- `trigger?: Slot<AIReasoningState>`: Complete trigger replacement.\n- `children?: Slot<AIReasoningState>`: Custom body used only when content is omitted.\n- `markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>`: Markdown renderer options.\n- `class?: string`: Class merged onto the Collapsible root.\n- `theme?: AIReasoningThemeProps`: Root, trigger, and content theme overrides.\n- Additional attachments and DOM attributes are forwarded to the Collapsible root.\n";

package/dist/components/AIReasoning/aiReasoning.mcp.js

@@ -21,14 +21,20 @@ AIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive.
 />
 \`\`\`
 
-The default trigger displays a brain icon and a shimmer-only \`SpinnerText\` label while streaming. A supplied \`thinkingMessages\` list replaces the resolved \`labels.thinking\` value and advances every two seconds when it contains more than one message. The compact \`labels\` object also overrides the unknown-duration sentence and completed-duration formatter.
+The default trigger is a compact, muted row about 28px tall with no filled background. It displays a brain icon and a shimmering label while streaming, followed by a live elapsed time once a second has passed ("Thinking… · 6s"). A supplied \`thinkingMessages\` list replaces the resolved \`labels.thinking\` value and advances every two seconds when it contains more than one message. Every message sits in the same grid cell, so the trigger keeps the widest message's width (the caret never shifts) and only the current message is visible and part of the button's accessible name; the elapsed time is hidden from assistive technology and reserves the width of its unit's widest reading (59s, then 59m 59s), so the caret holds still as the count gains a digit and steps only when the unit changes. The compact \`labels\` object also overrides the unknown-duration sentence and completed-duration formatter.
+
+Completed durations read "Thought for less than a second" for \`0\`, "Thought for 6 seconds" under a minute, and "Thought for 1m 12s" from a minute on.
+
+While streaming, the body is a bounded window (\`max-h-40\`) that follows the newest lines; once earlier lines leave the window its top edge fades. The full body returns when streaming ends. The body renders small Markdown (12px, tight paragraph spacing; one step larger at \`size="large"\`) in a muted colour that Markdown paragraphs and lists inherit, so reasoning reads quieter than the answer. The root has no outer margin: the surrounding thread or message owns the spacing.
+
+\`size\` (\`small\`, \`normal\` or \`large\`, default \`normal\`) scales the trigger text, icon and body with the AIMessage size scale; AIThread and AIChat pass their \`messageSize\`.
 
 ## Streaming lifecycle
 
 - \`open\` starts from \`defaultOpen ?? streaming\`.
 - At the start of a streaming session, the component auto-opens once unless \`defaultOpen={false}\`.
 - Closing the panel manually during that stream keeps it closed; streaming does not force it open again.
-- When streaming ends, the measured duration is rounded up to whole seconds.
+- When streaming ends, the measured duration is rounded to whole seconds (under half a second becomes \`0\`).
 - After the first observed stream completes, an open panel closes after \`1000\` ms by default. A trace that never streamed is not auto-closed.
 - An explicit \`duration\` is expressed in seconds and takes precedence over the measured duration.
 
@@ -63,7 +69,7 @@ Use \`defaultOpen={false}\` to opt out of streaming auto-open without disabling
 
 ## Custom trigger and body
 
-A custom \`trigger\` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is \`{ open, streaming, duration, message }\`, where \`message\` is the currently displayed thinking label.
+A custom \`trigger\` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is \`{ open, streaming, duration, elapsed, message, labels }\`, where \`message\` is the currently displayed thinking label and \`elapsed\` the whole seconds of the current stream.
 
 \`\`\`svelte
 <AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>
@@ -102,7 +108,7 @@ Pass Markdown options through \`markdown\`. AIReasoning owns \`content\` and alw
 
 ## Theme slots
 
-The AIReasoning \`trigger\` and \`content\` theme slots are composed into the actual Collapsible trigger button and content panel. \`root\` styles the Collapsible root; \`icon\`, \`status\`, and \`duration\` style the default trigger regions.
+The AIReasoning \`trigger\` and \`content\` theme slots are composed into the actual Collapsible trigger button and content panel. \`root\` styles the Collapsible root; \`icon\`, \`status\` (the stacked label cell), \`message\` (each cycled label, \`current\` variant), \`elapsed\` (with \`elapsedReserve\`, its invisible widest reading), and \`duration\` style the default trigger regions; \`stream\` and \`streamBody\` style the streaming window.
 
 \`\`\`svelte
 <AIReasoning
@@ -121,7 +127,7 @@ Global overrides use \`setAIReasoningTheme\` from the same package entry.
 ## Props
 
 - \`content?: string\`: Markdown trace. Takes precedence over custom children.
-- \`streaming?: boolean\`: Drives status labels, auto-open, duration measurement, and completion close.
+- \`streaming?: boolean\`: Drives status labels, the live elapsed time, the following window, auto-open, duration measurement, and completion close.
 - \`thinkingMessages?: readonly string[]\`: Optional labels cycled every two seconds while streaming; takes precedence over \`labels.thinking\`.
 - \`labels?: Partial<AIReasoningLabels>\`: Default thinking text, unknown-duration text, and duration formatter.
 - \`open?: boolean\`: Bindable open state.

package/dist/components/AIReasoning/aiReasoning.props.d.ts

@@ -1,3 +1,4 @@
+import type { Sizes } from '../../types/theme.js';
 import type { Slot } from '../Slot/slot.js';
 import type { WithAttachments } from '../../types/props.js';
 import type { MarkdownProps } from '../Markdown/markdown.props.js';
@@ -8,19 +9,26 @@ export type AIReasoningLabels = {
     thinking: string;
     /** Completed status when no measured or explicit duration is available. */
     thoughtForFewSeconds: string;
-    /** Formats the completed status from a duration in seconds. */
+    /**
+     * Formats the completed status from a duration in seconds. The default reads "Thought for less
+     * than a second" for 0, "Thought for 6 seconds" under a minute, then "Thought for 1m 12s".
+     */
     duration: (seconds: number) => string;
 };
 export type AIReasoningState = {
     open: boolean;
     streaming: boolean;
     duration: number | undefined;
+    /** Whole seconds elapsed in the current stream; `undefined` when not streaming. */
+    elapsed: number | undefined;
     message: string;
     labels: AIReasoningLabels;
 };
 export type AIReasoningProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'content'> & {
     /** Bindable reference to the collapsible root. */
     ref?: HTMLElement | null;
+    /** Type and icon scale: `small`, `normal` (default) or `large`, matching AIMessage sizes. AIThread passes its `messageSize`. */
+    size?: Sizes;
     /** Markdown reasoning content. Takes precedence over custom children when provided. */
     content?: string;
     /** Bindable controlled open state. */
@@ -29,9 +37,12 @@ export type AIReasoningProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElemen
     defaultOpen?: boolean;
     /** Called once after a user or stream lifecycle change updates `open`. */
     onOpenChange?: (open: boolean) => void;
-    /** Keeps reasoning open and displays cycling progress labels. */
+    /**
+     * Keeps reasoning open, displays cycling progress labels with a live elapsed time
+     * ("Thinking… · 6s"), and shows the body as a bounded window that follows the latest lines.
+     */
     streaming?: boolean;
-    /** Elapsed reasoning duration in seconds; measured automatically when omitted. */
+    /** Elapsed reasoning duration in seconds; measured automatically when omitted. `0` reads "less than a second". */
     duration?: number;
     /** Delay before the first streamed completion closes, in milliseconds. @default 1000 */
     autoCloseDelay?: number;
@@ -43,7 +54,7 @@ export type AIReasoningProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElemen
     trigger?: Slot<AIReasoningState>;
     /** Custom body used only when `content` is omitted. */
     children?: Slot<AIReasoningState>;
-    /** Props forwarded to Markdown except for its owned content. */
+    /** Props forwarded to Markdown except for its owned content. Markdown renders at `size="normal"` (text-sm) by default. */
     markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>;
     /** Class applied to the collapsible root. */
     class?: string;