entasis 0.10.2 → 0.12.0

package/dist/components/AIMessageActions/AIMessageActions.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="TMessage extends AIThreadItem = AIThreadItem">
+	import { getContext } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import { useClipboard } from '../../utils/useClipboard.svelte.js';
 	import Alert from '../Alert/Alert.svelte';
 	import Button from '../Button/Button.svelte';
@@ -7,6 +9,7 @@
 	import { copyIcon } from '../Icons/copy.js';
 	import { pencilSimpleIcon } from '../Icons/pencilSimple.js';
 	import Slot from '../Slot/Slot.svelte';
+	import { tooltip } from '../Tooltip/tooltip.attachment.svelte.js';
 	import type { AIThreadItem } from '../AIThread/aiThread.props.js';
 	import { getAIConversation } from '../AIConversation/aiConversation.state.svelte.js';
 	import type { AIMessageActionState, AIMessageActionsProps } from './aiMessageActions.props.js';
@@ -84,6 +87,12 @@
 			Boolean(customActions || actionState.canCopy || actionState.canEdit || actionState.canRetry)
 	);
 	const buttonSize = $derived(size === 'large' ? 'normal' : 'small');
+	// Icon-only buttons name themselves for assistive technology through `label`; the tooltip shows
+	// the same name to sighted pointer and keyboard users. Tooltips need a Theme (it hosts the
+	// shared surface), so outside one the buttons keep their accessible name only.
+	const hasTooltipHost = Boolean(getContext('entasisTheme'));
+	const withTooltip = (content: string): Attachment<HTMLElement> | undefined =>
+		hasTooltipHost ? tooltip({ content, position: 'bottom' }) : undefined;
 
 	function resolveRoleLayout(
 		value: AIThreadItem['role']
@@ -120,13 +129,11 @@
 		errorMessage = undefined;
 		try {
 			const didCopy = await copyMessage();
-			if (!didCopy) errorMessage = 'Unable to copy this message.';
+			if (!didCopy) errorMessage = t.aiMessageCopyFailed;
 		} catch (error) {
 			setActionError(
 				error,
-				clipboard.copied
-					? 'The message was copied, but the copy action failed.'
-					: 'Unable to copy this message.'
+				clipboard.copied ? t.aiMessageCopyCallbackFailed : t.aiMessageCopyFailed
 			);
 		}
 	}
@@ -136,7 +143,7 @@
 		try {
 			await editMessage();
 		} catch (error) {
-			setActionError(error, 'Unable to edit this message.');
+			setActionError(error, t.aiMessageEditFailed);
 		}
 	}
 
@@ -145,7 +152,7 @@
 		try {
 			await retryMessage();
 		} catch (error) {
-			setActionError(error, 'Unable to retry this message.');
+			setActionError(error, t.aiMessageRetryFailed);
 		}
 	}
 
@@ -170,6 +177,7 @@
 					variant="ghost"
 					label={actionState.copied ? t.copied : t.copy}
 					onclick={() => void handleCopy()}
+					{@attach withTooltip(actionState.copied ? t.copied : t.copy)}
 					class={classes.button({ size })}
 					>{@render (actionState.copied ? checkIcon : copyIcon)({ size: 14 })}</Button
 				>{/if}
@@ -180,6 +188,7 @@
 					variant="ghost"
 					label={t.aiMessageEdit}
 					onclick={() => void handleEdit()}
+					{@attach withTooltip(t.aiMessageEdit)}
 					class={classes.button({ size })}>{@render pencilSimpleIcon({ size: 14 })}</Button
 				>{/if}
 			{#if actionState.canRetry}<Button
@@ -189,11 +198,12 @@
 					variant="ghost"
 					label={t.aiMessageRetry}
 					onclick={() => void handleRetry()}
+					{@attach withTooltip(t.aiMessageRetry)}
 					class={classes.button({ size })}>{@render arrowsClockwiseIcon({ size: 14 })}</Button
 				>{/if}
 		{/if}
-		{#if errorMessage}<div data-slot="ai-message-actions-error" class={classes.error()}>
-				<Alert color="danger" variant="soft" description={errorMessage} />
-			</div>{/if}
 	</div>
+	{#if errorMessage}<div data-slot="ai-message-actions-error" class={classes.error()}>
+			<Alert {size} color="danger" variant="soft" description={errorMessage} />
+		</div>{/if}
 {/if}

package/dist/components/AIMessageActions/aiMessageActions.mcp.d.ts

@@ -1 +1 @@
-export declare const aiMessageActionsDescription = "\n# AIMessageActions\n\nCopy, edit, and retry actions for an AI message. Defaults integrate with the nearest AIConversation.\n\n## Resolution and availability\n\n`message` supplies role and content. Direct `role` and `content` win, while `messageIndex`\nwins over the `index` alias. `copyable`, `editable`, and `retryable` win over the\ncompatibility `copy`, `edit`, and `retry` aliases.\n\nCopy requires non-empty content. Edit additionally requires a user role and either `onEdit` or a\nconversation. Retry requires an assistant role and either `onRetry` or a conversation plus a\nmessage index. Direct callbacks take precedence. Otherwise edit writes the content into the\nconversation input and retry targets the indexed message. Pass `conversation={null}` to disable\nscoped conversation lookup.\n\n`visibility` accepts `always`, `hover`, or `none`. `actions={false}` suppresses the\ncomplete surface. A supplied `actions` slot wins over the equivalent `children` slot. Both\nreceive complete `AIMessageActionState`, including the resolved size, capability flags, and\nawaitable copy, edit, and retry methods. `size` accepts `small`, `normal`, or `large` and\nscales the default controls. The copy callback runs only after clipboard success. Failures raised by\nthe default buttons render through the semantic error region.\n\n```svelte\n<script>\n  import { AIMessageActions } from './index.ts';\n</script>\n\n{#snippet actions({ copied, copy })}\n  <button type=\"button\" onclick={() => void copy()}>\n    {copied ? 'Copied' : 'Copy answer'}\n  </button>\n{/snippet}\n\n<AIMessageActions content=\"Answer\" {actions} />\n```\n\nThe root forwards native div attributes and attachments when actions are available, plus bindable\n`ref`, `class`, and `theme`. Theme parts cover `root`, `button`, and `error`, with role,\nvisibility, and size variants on the root and size variants on the button.\n";
+export declare const aiMessageActionsDescription = "\n# AIMessageActions\n\nCopy, edit, and retry actions for an AI message. Defaults integrate with the nearest AIConversation.\n\n## Resolution and availability\n\n`message` supplies role and content. Direct `role` and `content` win, while `messageIndex`\nwins over the `index` alias. `copyable`, `editable`, and `retryable` win over the\ncompatibility `copy`, `edit`, and `retry` aliases.\n\nCopy requires non-empty content. Edit additionally requires a user role and either `onEdit` or a\nconversation. Retry requires an assistant role and either `onRetry` or a conversation plus a\nmessage index. Direct callbacks take precedence. Otherwise edit writes the content into the\nconversation input and retry targets the indexed message. Pass `conversation={null}` to disable\nscoped conversation lookup.\n\n`visibility` accepts `always`, `hover`, or `none`. `hover` reveals the row when its message\n(`group/message`) or the row itself is hovered or focused, and always shows it on touch screens,\nwhich cannot hover. The row takes layout space in every mode but `none`, and its buttons are\npulled out by their own inset so the first icon lines up with the text edge (the end edge for\nuser rows). The row is as wide as its buttons and never wraps, so a one-word message keeps its\nicons on one line. Each icon button keeps its accessible name and, inside a `Theme`, shows it as a\ntooltip. `actions={false}` suppresses the\ncomplete surface. A supplied `actions` slot wins over the equivalent `children` slot. Both\nreceive complete `AIMessageActionState`, including the resolved size, capability flags, and\nawaitable copy, edit, and retry methods. `size` accepts `small`, `normal`, or `large` and\nscales the default controls. The copy callback runs only after clipboard success. Failures raised by\nthe default buttons render through the semantic error region, placed after the button row (not\ninside it) and visible whatever the row's visibility.\n\n```svelte\n<script>\n  import { AIMessageActions } from './index.ts';\n</script>\n\n{#snippet actions({ copied, copy })}\n  <button type=\"button\" onclick={() => void copy()}>\n    {copied ? 'Copied' : 'Copy answer'}\n  </button>\n{/snippet}\n\n<AIMessageActions content=\"Answer\" {actions} />\n```\n\nThe root forwards native div attributes and attachments when actions are available, plus bindable\n`ref`, `class`, and `theme`. `setAIMessageActionsTheme` and `<Theme components>` overrides\napply under the `ai-message-actions` key. Theme parts cover `root`, `button`, and `error`, with role,\nvisibility, and size variants on the root and size variants on the button.\n";

package/dist/components/AIMessageActions/aiMessageActions.mcp.js

@@ -15,12 +15,19 @@ message index. Direct callbacks take precedence. Otherwise edit writes the conte
 conversation input and retry targets the indexed message. Pass \`conversation={null}\` to disable
 scoped conversation lookup.
 
-\`visibility\` accepts \`always\`, \`hover\`, or \`none\`. \`actions={false}\` suppresses the
+\`visibility\` accepts \`always\`, \`hover\`, or \`none\`. \`hover\` reveals the row when its message
+(\`group/message\`) or the row itself is hovered or focused, and always shows it on touch screens,
+which cannot hover. The row takes layout space in every mode but \`none\`, and its buttons are
+pulled out by their own inset so the first icon lines up with the text edge (the end edge for
+user rows). The row is as wide as its buttons and never wraps, so a one-word message keeps its
+icons on one line. Each icon button keeps its accessible name and, inside a \`Theme\`, shows it as a
+tooltip. \`actions={false}\` suppresses the
 complete surface. A supplied \`actions\` slot wins over the equivalent \`children\` slot. Both
 receive complete \`AIMessageActionState\`, including the resolved size, capability flags, and
 awaitable copy, edit, and retry methods. \`size\` accepts \`small\`, \`normal\`, or \`large\` and
 scales the default controls. The copy callback runs only after clipboard success. Failures raised by
-the default buttons render through the semantic error region.
+the default buttons render through the semantic error region, placed after the button row (not
+inside it) and visible whatever the row's visibility.
 
 \`\`\`svelte
 <script>
@@ -37,6 +44,7 @@ the default buttons render through the semantic error region.
 \`\`\`
 
 The root forwards native div attributes and attachments when actions are available, plus bindable
-\`ref\`, \`class\`, and \`theme\`. Theme parts cover \`root\`, \`button\`, and \`error\`, with role,
+\`ref\`, \`class\`, and \`theme\`. \`setAIMessageActionsTheme\` and \`<Theme components>\` overrides
+apply under the \`ai-message-actions\` key. Theme parts cover \`root\`, \`button\`, and \`error\`, with role,
 visibility, and size variants on the root and size variants on the button.
 `;

package/dist/components/AIMessageActions/aiMessageActions.theme.js

@@ -1,24 +1,50 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+// The action row takes layout space (it is never positioned over the next row) and its ghost
+// buttons are pulled out by their own inset, so the first icon lines up with the edge of the text
+// or bubble above: the start edge for assistant rows, the end edge for user rows. The row is as wide
+// as its buttons and never wraps, whatever the width of a short bubble above it.
 const defaultRoot = cva({
-    base: 'flex min-h-[var(--control-height-sm)] w-full flex-wrap items-center gap-xs px-xs transition-opacity motion-reduce:transition-none',
+    base: 'flex min-h-[var(--control-height-sm)] w-max max-w-none shrink-0 flex-nowrap items-center gap-xs transition-opacity motion-reduce:transition-none',
     variants: {
         role: {
-            user: 'justify-end',
+            user: 'ms-auto justify-end',
             assistant: 'justify-start',
-            system: 'justify-center',
+            system: 'mx-auto justify-center',
             tool: 'justify-start'
         },
         visibility: {
-            hover: 'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 hover:opacity-100 focus-within:opacity-100',
+            // Revealed by hovering or focusing the row or its message; a touch screen cannot hover,
+            // so there the row always shows.
+            hover: 'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100',
             always: 'opacity-100',
             none: 'hidden'
         },
         size: {
-            small: 'min-h-6 gap-micro px-micro',
-            normal: 'min-h-[var(--control-height-sm)] gap-xs px-xs',
-            large: 'min-h-[var(--control-height-md)] gap-sm px-xs'
+            small: 'min-h-6 gap-micro',
+            normal: 'min-h-[var(--control-height-sm)] gap-xs',
+            large: 'min-h-[var(--control-height-md)] gap-sm'
         }
     },
+    compoundVariants: [
+        {
+            role: ['assistant', 'tool'],
+            size: 'small',
+            class: '-ms-[calc((var(--spacing)*6-0.75rem)/2)]'
+        },
+        {
+            role: ['assistant', 'tool'],
+            size: 'normal',
+            class: '-ms-[calc((var(--control-height-sm)-0.875rem)/2)]'
+        },
+        {
+            role: ['assistant', 'tool'],
+            size: 'large',
+            class: '-ms-[calc((var(--control-height-md)-1.125rem)/2)]'
+        },
+        { role: 'user', size: 'small', class: '-me-[calc((var(--spacing)*6-0.75rem)/2)]' },
+        { role: 'user', size: 'normal', class: '-me-[calc((var(--control-height-sm)-0.875rem)/2)]' },
+        { role: 'user', size: 'large', class: '-me-[calc((var(--control-height-md)-1.125rem)/2)]' }
+    ],
     defaultVariants: { role: 'assistant', visibility: 'always', size: 'normal' }
 });
 const defaultButton = cva({
@@ -32,11 +58,12 @@ const defaultButton = cva({
     },
     defaultVariants: { size: 'normal' }
 });
-const defaultError = cva({ base: 'w-full basis-full pt-xs' });
+// Rendered after the row, not inside it, so a message never widens or wraps the button row.
+const defaultError = cva({ base: 'w-full min-w-0 pt-xs' });
 export const aiMessageActionsTheme = {
     root: defaultRoot,
     button: defaultButton,
     error: defaultError
 };
 export const setAIMessageActionsTheme = setComponentTheme('ai-message-actions');
-export const useAIMessageActionsTheme = useComponentTheme('aiMessageActions', aiMessageActionsTheme);
+export const useAIMessageActionsTheme = useComponentTheme('ai-message-actions', aiMessageActionsTheme);

package/dist/components/AIModelSelector/AIModelSelector.svelte

@@ -3,7 +3,7 @@
 	import { checkIcon } from '../Icons/check.js';
 	import Button from '../Button/Button.svelte';
 	import type { MenuItem } from '../Menu/menu.props.js';
-	import type { PopoverState } from '../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
 	import PopupMenu from '../PopupMenu/PopupMenu.svelte';
 	import Slot from '../Slot/Slot.svelte';
 	import TextInput from '../Form/TextInput/TextInput.svelte';
@@ -138,13 +138,18 @@
 		if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}K`;
 		return `${tokens}`;
 	}
-	function modelItem(model: AIModelSelectorModel): MenuItem {
+	/**
+	 * `showProvider` is off where a provider heading already names the provider (or every model
+	 * shares one), so a row never repeats it as its description. The selected row keeps its
+	 * context-window badge next to the check.
+	 */
+	function modelItem(model: AIModelSelectorModel, showProvider = true): MenuItem {
 		return {
 			type: 'option',
 			title: model.label,
-			description: model.description ?? model.provider,
+			description: model.description ?? (showProvider ? model.provider : undefined),
 			prefix: model.icon,
-			suffix: selectedValue === model.id ? checkIcon : contextLabel(model.contextWindow),
+			suffix: selectedValue === model.id ? selectedSuffix : contextLabel(model.contextWindow),
 			disabled: disabled || model.disabled,
 			active: selectedValue === model.id,
 			class: classes.option({ selected: selectedValue === model.id }),
@@ -157,7 +162,7 @@
 		};
 	}
 	function groupItem(group: AIModelSelectorGroup): MenuItem {
-		const modelItems = (group.models ?? []).map(modelItem);
+		const modelItems = (group.models ?? []).map((model) => modelItem(model));
 		const groupItems = (group.groups ?? []).map(groupItem);
 		const menu = [
 			...modelItems,
@@ -210,8 +215,8 @@
 			const provider = model.provider ?? resolvedLabels.providerFallback;
 			providers.set(provider, [...(providers.get(provider) ?? []), model]);
 		}
-		if (providers.size === 1 && providers.has(resolvedLabels.providerFallback))
-			return source.map(modelItem);
+		// One provider needs no heading: it would only repeat what every row shares.
+		if (providers.size <= 1) return source.map((model) => modelItem(model, false));
 		return [...providers.entries()].flatMap(([provider, providerModels], index) => [
 			...(index > 0 ? [{ type: 'separator' } satisfies MenuItem] : []),
 			{
@@ -222,7 +227,7 @@
 				fullWidth: true,
 				class: classes.provider()
 			} satisfies MenuItem,
-			...providerModels.map(modelItem)
+			...providerModels.map((model) => modelItem(model, false))
 		]);
 	}
 	function resolveSupplementalItems(source: readonly AIModelSelectorMenuItem[]): MenuItem[] {
@@ -280,6 +285,14 @@
 	]);
 </script>
 
+{#snippet selectedSuffix()}
+	{@const context = contextLabel(selectedModel?.contextWindow)}
+	<span data-slot="ai-model-selector-selected" class={classes.optionMeta()}>
+		{#if context}<span>{context}</span>{/if}
+		{@render checkIcon({ size: 14 })}
+	</span>
+{/snippet}
+
 {#snippet emptyContent()}
 	<span data-slot="ai-model-selector-empty">
 		<Slot render={empty ?? resolvedLabels.empty} payload={selectorState} />
@@ -294,12 +307,13 @@
 				placeholder={resolvedLabels.searchPlaceholder}
 				label={resolvedLabels.searchPlaceholder}
 				theme={{ label: { base: 'sr-only' } }}
+				inputAttrs={{ 'data-1p-ignore': true }}
 				onValueChange={(nextValue: string | null) => setQuery(nextValue ?? '')}
 			/>{/if}
 	</div>
 {/snippet}
 
-{#snippet selectorTrigger(popover: PopoverState)}
+{#snippet selectorTrigger(popover: PopoverApi)}
 	{#if children}
 		<button
 			type="button"
@@ -318,7 +332,8 @@
 		<Button
 			type="button"
 			data-slot="ai-model-selector-trigger"
-			variant="soft"
+			variant="ghost"
+			color="neutral"
 			size="small"
 			{disabled}
 			haspopup="menu"

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

@@ -20,6 +20,7 @@ export declare const aiModelSelectorTheme: {
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    optionMeta: (props?: 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;
 };
@@ -46,6 +47,7 @@ export declare const setAIModelSelectorTheme: (theme: InferComponentTheme<{
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    optionMeta: (props?: 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;
 }>) => void;
@@ -70,6 +72,7 @@ export declare const useAIModelSelectorTheme: import("../../utils/cva/theme.js")
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    optionMeta: (props?: 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;
 }>;

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>