entasis 0.10.2 → 0.12.0

package/dist/components/AITool/AIToolValueSection.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { signInIconBold } from '../Icons/signIn.js';
-	import { signOutIconBold } from '../Icons/signOut.js';
-	import ScrollArea from '../ScrollArea/ScrollArea.svelte';
+	import Button from '../Button/Button.svelte';
+	import Code from '../Code/Code.svelte';
 	import Slot from '../Slot/Slot.svelte';
-	import { tooltip } from '../Tooltip/tooltip.attachment.svelte.js';
-	import type { AIToolCall, AIToolSnippet } from './aiTool.props.js';
+	import { useI18n } from '../../i18n/context.svelte.js';
+	import type { AIToolCall, AIToolSnippet, AIToolValueView } from './aiTool.props.js';
 	import type { AIToolThemeProps } from './aiTool.theme.js';
 	import { useAIToolTheme } from './aiTool.theme.js';
-	import { createAIToolScrollAreaTheme, type AIToolValueTone } from './aiToolPrimitiveThemes.js';
+	import type { AIToolValueTone } from './aiToolPrimitiveThemes.js';
 	import AIToolValueTree from './AIToolValueTree.svelte';
+	import {
+		buildToolValueTree,
+		countToolValueTreeRows,
+		getToolErrorSentence,
+		toToolJsonValue
+	} from './toolValueTree.js';
 
 	let {
 		tool,
@@ -20,6 +25,10 @@
 		tone = 'default',
 		maxDepth,
 		maxEntries,
+		valueView = 'json',
+		maxLines = 12,
+		showAllLabel,
+		showLessLabel,
 		theme
 	}: {
 		tool: AIToolCall;
@@ -31,42 +40,131 @@
 		tone?: AIToolValueTone;
 		maxDepth: number;
 		maxEntries: number;
+		valueView?: AIToolValueView;
+		maxLines?: number;
+		showAllLabel: string;
+		showLessLabel: string;
 		theme?: AIToolThemeProps;
 	} = $props();
 
+	const id = $props.id();
+	const t = $derived(useI18n());
 	const classes = $derived(useAIToolTheme(theme));
-	const scrollAreaTheme = $derived(createAIToolScrollAreaTheme(classes, tone));
+	let expanded = $state(false);
+
+	// A primitive error is one sentence, not a key/value inspector.
+	const errorSentence = $derived(kind === 'error' ? getToolErrorSentence(value) : undefined);
+	// Tools often return JSON as text; show it structured. Multi-line strings stay prose; a one-line
+	// string is shown quoted like any JSON value, so the output "3" never reads as the number 3.
+	const structured = $derived(parseJsonText(value));
+	const plainText = $derived(
+		typeof structured === 'string' && /[\r\n]/.test(structured) ? structured : undefined
+	);
+	const presentation = $derived<'text' | 'tree' | 'json'>(
+		plainText !== undefined ? 'text' : valueView === 'tree' ? 'tree' : 'json'
+	);
+	// JSON is code and reads left to right in an RTL page (else braces mirror and lines align to the
+	// right); multi-line prose takes the direction of its own text.
+	const valueDir = $derived(
+		presentation === 'json' ? 'ltr' : presentation === 'text' ? 'auto' : undefined
+	);
+	const treeNodes = $derived(
+		presentation === 'tree' ? buildToolValueTree(structured, maxDepth, maxEntries, t) : []
+	);
+	const codeText = $derived(
+		presentation === 'text'
+			? (plainText ?? '')
+			: presentation === 'json'
+				? stringify(toToolJsonValue(structured, maxDepth, maxEntries, t))
+				: ''
+	);
+	const lineCount = $derived(
+		presentation === 'tree' ? countToolValueTreeRows(treeNodes) : countLines(codeText)
+	);
+	const lineLimit = $derived(Math.max(1, Math.floor(maxLines)));
+	const collapsible = $derived(lineCount > lineLimit);
+	const collapsed = $derived(collapsible && !expanded);
+	const codeTheme = $derived({
+		root: { base: classes.code({ tone }) },
+		container: { base: classes.codeContainer() }
+	});
+
+	function parseJsonText(input: unknown): unknown {
+		if (typeof input !== 'string') return input;
+		const trimmed = input.trim();
+		if (!/^[[{]/.test(trimmed)) return input;
+		try {
+			return JSON.parse(trimmed) as unknown;
+		} catch {
+			return input;
+		}
+	}
+
+	function stringify(input: unknown): string {
+		return JSON.stringify(input, null, 2) ?? 'null';
+	}
+
+	function countLines(text: string): number {
+		let count = 1;
+		for (
+			let position = text.indexOf('\n');
+			position !== -1;
+			position = text.indexOf('\n', position + 1)
+		) {
+			count += 1;
+		}
+		return count;
+	}
 </script>
 
 <section
 	data-slot={tone === 'error' ? 'ai-tool-error' : 'ai-tool-value'}
 	data-tone={tone}
 	data-kind={kind}
+	aria-labelledby={`${id}-label`}
 	class={classes.section({ tone })}
 >
-	{#if kind === 'input' || kind === 'output'}
-		<span
-			data-slot="ai-tool-value-label"
-			role="img"
-			aria-label={label}
-			class={classes.label({ tone, kind: 'icon' })}
-			{@attach tooltip({ content: label, position: 'top', size: 'small', delay: 350 })}
-		>
-			{@render (kind === 'input' ? signInIconBold : signOutIconBold)({
-				size: 14,
-				'aria-hidden': 'true'
-			})}
-		</span>
-	{:else}
-		<div data-slot="ai-tool-value-label" class={classes.label({ tone, kind: 'text' })}>
-			{label}
-		</div>
-	{/if}
+	<div id={`${id}-label`} data-slot="ai-tool-value-label" class={classes.label({ tone })}>
+		{label}
+	</div>
 	{#if snippet}
 		<Slot render={snippet} payload={{ tool, index }} />
+	{:else if errorSentence !== undefined}
+		<p data-slot="ai-tool-error-message" class={classes.errorMessage()}>{errorSentence}</p>
 	{:else}
-		<ScrollArea type="hover" label={`${label} details`} theme={scrollAreaTheme}>
-			<AIToolValueTree {value} {tone} {maxDepth} {maxEntries} {theme} />
-		</ScrollArea>
+		<div
+			id={`${id}-value`}
+			data-slot="ai-tool-value-content"
+			data-view={presentation}
+			data-collapsed={collapsed || undefined}
+			dir={valueDir}
+			class={classes.clamp({ collapsed })}
+			style:max-height={collapsed ? `calc(${lineLimit} * 1lh + 1.5rem)` : undefined}
+		>
+			{#if presentation === 'tree'}
+				<AIToolValueTree nodes={treeNodes} {tone} {theme} />
+			{:else}
+				<Code
+					code={codeText}
+					language={presentation === 'json' ? 'json' : 'text'}
+					showHeader={false}
+					wrap
+					theme={codeTheme}
+				/>
+			{/if}
+		</div>
+		{#if collapsible}
+			<Button
+				type="button"
+				variant="ghost"
+				color="neutral"
+				size="small"
+				class={classes.showAll()}
+				{expanded}
+				onclick={() => (expanded = !expanded)}
+			>
+				{expanded ? showLessLabel : showAllLabel}
+			</Button>
+		{/if}
 	{/if}
 </section>

package/dist/components/AITool/AIToolValueSection.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { AIToolCall, AIToolSnippet } from './aiTool.props.js';
+import type { AIToolCall, AIToolSnippet, AIToolValueView } from './aiTool.props.js';
 import type { AIToolThemeProps } from './aiTool.theme.js';
-import { type AIToolValueTone } from './aiToolPrimitiveThemes.js';
+import type { AIToolValueTone } from './aiToolPrimitiveThemes.js';
 type $$ComponentProps = {
     tool: AIToolCall;
     index: number;
@@ -11,6 +11,10 @@ type $$ComponentProps = {
     tone?: AIToolValueTone;
     maxDepth: number;
     maxEntries: number;
+    valueView?: AIToolValueView;
+    maxLines?: number;
+    showAllLabel: string;
+    showLessLabel: string;
     theme?: AIToolThemeProps;
 };
 declare const AIToolValueSection: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/AITool/AIToolValueTree.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
 	import type { AIToolValueTreeNode } from './toolValueTree.js';
-	import { buildToolValueTree } from './toolValueTree.js';
 	import { useAIToolTheme } from './aiTool.theme.js';
 	import type { AIToolThemeProps } from './aiTool.theme.js';
 
 	let {
-		value,
+		nodes,
 		tone = 'default',
-		maxDepth = 8,
-		maxEntries = 80,
 		theme
 	}: {
-		value: unknown;
+		nodes: readonly AIToolValueTreeNode[];
 		tone?: 'default' | 'error';
-		maxDepth?: number;
-		maxEntries?: number;
 		theme?: AIToolThemeProps;
 	} = $props();
-	const nodes = $derived(buildToolValueTree(value, maxDepth, maxEntries));
 	const classes = $derived(useAIToolTheme(theme));
 </script>
 
@@ -25,9 +19,10 @@
 	<li data-slot="ai-tool-value-tree-node" class={classes.treeNode()}>
 		{#if node.kind === 'branch'}
 			<div data-slot="ai-tool-value-tree-branch" class={classes.treeBranch()}>
-				<span data-slot="ai-tool-value-tree-key" class={classes.treeKey()}>{node.key}</span><span
-					data-slot="ai-tool-value-tree-summary"
-					class={classes.treeSummary()}>{node.summary}</span
+				{#if node.key}<span data-slot="ai-tool-value-tree-key" class={classes.treeKey()}
+						>{node.key}</span
+					>{/if}<span data-slot="ai-tool-value-tree-summary" class={classes.treeSummary()}
+					>{node.summary}</span
 				>
 			</div>
 			<ul data-slot="ai-tool-value-tree-children" class={classes.treeChildren()}>
@@ -36,10 +31,10 @@
 					)}{/each}
 			</ul>
 		{:else}
-			<div data-slot="ai-tool-value-tree-leaf" class={classes.treeLeaf()}>
-				<span data-slot="ai-tool-value-tree-key" class={classes.treeKey()}
-					>{node.key || 'value'}</span
-				><span
+			<div data-slot="ai-tool-value-tree-leaf" class={classes.treeLeaf({ keyed: node.key !== '' })}>
+				{#if node.key}<span data-slot="ai-tool-value-tree-key" class={classes.treeKey()}
+						>{node.key}</span
+					>{/if}<span
 					data-slot="ai-tool-value-tree-value"
 					class={classes.treeValue({ kind: node.valueKind, tone })}>{node.value}</span
 				>
@@ -48,6 +43,6 @@
 	</li>
 {/snippet}
 
-<ul data-slot="ai-tool-value-tree" class={classes.tree()}>
+<ul data-slot="ai-tool-value-tree" class={classes.tree({ tone })}>
 	{#each nodes as node, index (`${node.key}-${index}`)}{@render treeNode(node)}{/each}
 </ul>

package/dist/components/AITool/AIToolValueTree.svelte.d.ts

@@ -1,9 +1,8 @@
+import type { AIToolValueTreeNode } from './toolValueTree.js';
 import type { AIToolThemeProps } from './aiTool.theme.js';
 type $$ComponentProps = {
-    value: unknown;
+    nodes: readonly AIToolValueTreeNode[];
     tone?: 'default' | 'error';
-    maxDepth?: number;
-    maxEntries?: number;
     theme?: AIToolThemeProps;
 };
 declare const AIToolValueTree: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/AITool/aiTool.mcp.d.ts

@@ -1 +1 @@
-export declare const aiToolDescription = "\n# AITool\n\nRender one AI tool call or one collapsible group of consecutive calls. Non-empty `tools` takes precedence over `tool`. Missing statuses are inferred from output and errors, while arbitrary values use circular-safe depth and entry limits.\n\nExpanded call/group IDs use bindable `value`, initial `defaultValue`, and `onValueChange(value)`. The callback fires once for each user expansion change; parent prop updates stay silent. Nested rows inside a grouped call keep their own expansion state.\n\n```svelte\n<script lang=\"ts\">\n  import { AITool, type AIToolCall } from './index.ts';\n\n  const tools: AIToolCall[] = [\n    { id: 'search', name: 'search_docs', input: { query: 'Svelte' }, output: { count: 4 } },\n    { id: 'read', name: 'read_page', status: 'running', input: { path: '/docs' } }\n  ];\n  let open = $state(['search']);\n</script>\n\n<AITool {tools} bind:value={open} multiple />\n```\n\nUse `icon`, `title`, `status`, `input`, `output`, `error`, or `content` snippets with a `{ tool, index }` payload. Default value panels use the existing Entasis ScrollArea and are capped vertically while supporting both scroll axes.\n\nDefault status is a bare mark on the left, no badge: a spinner for active calls and a coloured dot for settled calls (info while running, success, danger, muted when cancelled). Use the `status` snippet only when a visible custom status treatment is required.\n\nDefault input and output sections use compact sign-in and sign-out icons. Their configured labels remain available to assistive technology and on hover.\n\nUse `toggleIcon=\"none\"` for the default minimal trigger, `chevron` for a rotating disclosure icon, or `plus-minus` for plus/minus expansion controls. The choice applies to both group and child triggers.\n\nThe default `ghost` variant renders an unframed tool call. Use `card` for an elevated surface, `outline` for a transparent bounded surface, or `soft` for a subtle status-aware tint. Group triggers keep intrinsic width independently from their expanded call content, while each child call receives the same variant around its complete row and panel.\n";
+export declare const aiToolDescription = "\n# AITool\n\nRender one AI tool call or one collapsible group of consecutive calls. Non-empty `tools` takes precedence over `tool`. Missing statuses are inferred from output and errors, while arbitrary values use circular-safe depth and entry limits.\n\nExpanded call/group IDs use bindable `value`, initial `defaultValue`, and `onValueChange(value)`. The callback fires once for each user expansion change; parent prop updates stay silent. Nested rows inside a grouped call keep their own expansion state; a group's `value` entry is the first call's id.\n\n```svelte\n<script lang=\"ts\">\n  import { AITool, type AIToolCall } from './index.ts';\n\n  const tools: AIToolCall[] = [\n    { id: 'search', name: 'searchDocs', input: { query: 'Svelte' }, output: { count: 4 }, duration: 1400 },\n    { id: 'read', name: 'read_page', status: 'running', input: { path: '/docs' }, startedAt: Date.now() }\n  ];\n  let open = $state(['search']);\n</script>\n\n<AITool {tools} bind:value={open} multiple />\n```\n\n## Statuses and the AI SDK\n\n`AIToolStatus` covers `pending`, `loading`, `running`, `streaming`, `success`, `error`, `cancelled`, and the approval states `approval-requested`, `approval-responded` and `output-denied`; any other string renders as a neutral settled status with its readable name. Map AI SDK UI tool parts with `getAIToolStatusFromState(part.state)`:\n\n| AI SDK `part.state` | AITool `status` | Shown as |\n| --- | --- | --- |\n| `input-streaming` | `streaming` | spinner, \"Preparing\" |\n| `input-available` | `running` | spinner, \"Running\" |\n| `approval-requested` | `approval-requested` | hand glyph, \"Awaiting approval\" (never spins) |\n| `approval-responded` | `approval-responded` | spinner, \"Approved\", until an output state follows |\n| `output-available` | `success` | check glyph |\n| `output-error` | `error` | x glyph, \"Failed\" |\n| `output-denied` | `output-denied` | slashed circle, \"Denied\" (never spins) |\n\nPass the part's `approval` object too: `approval: { approved: false }` renders as denied even while the state still reads `approval-responded`. Unknown states return `undefined`, so status falls back to inference: an error is `error`, any output is `success`, nothing yet is `pending`.\n\n## Row anatomy\n\nEach row reads: status mark (spinner, then a check, x, hand or slashed-circle glyph, so status never relies on colour alone), readable title, a muted one-line input summary, then the status word (omitted on success) and the duration.\n\n- Title: `title` wins unless it only repeats `name`; raw names are humanized (`searchDocs` \u2192 \"Search docs\", `analyze_release` \u2192 \"Analyze release\", `mcp__github__list_issues` \u2192 \"List issues\").\n- `icon`: an entasis icon snippet per call; it takes the leading place and the status glyph moves next to the status word.\n- `summary`: overrides the input summary (first primitive input value, strings quoted); `''` hides it.\n- Duration: `duration` (ms), or `startedAt` + `completedAt`. A running call counts its elapsed time live (from `startedAt`, or from when the AITool first saw it running) and keeps its final duration after it settles, also when a lone call grows into a group: \"<1s\", \"6s\", \"1m 12s\". A duration the AITool only observed lives as long as that AITool; a row that remounts (a virtualized transcript) keeps it only when the call carries `duration` or `startedAt` + `completedAt`.\n- Group header: \"Search docs \u00B7 2 calls\" from the distinct tool titles and the call count; override with `labels.group(count, tools)`.\n\nUse `icon`, `title`, `status`, `input`, `output`, `error`, or `content` snippets with a `{ tool, index }` payload. The `icon` snippet replaces the leading mark and `status` replaces the trailing word and duration. `formatStatus` changes the status word and the mark's accessible name (defaults are localized).\n\n## Values\n\nInput, output and error sections share one text label style (\"Input\", \"Output\", \"Error\"). `valueView=\"json\"` (default) shows highlighted, wrapped JSON through the Code component with a copy button; `valueView=\"tree\"` shows a key/value tree with quoted strings and no array index keys. String values that hold JSON are shown structured; other one-line strings are quoted like JSON (so the output `\"3\"` never reads as the number `3`), and multi-line strings stay plain wrapped text. A primitive error (a string, an Error, an MCP `isError` result with text content) renders as one plain sentence. Values longer than `maxLines` (12) lines or rows collapse behind \"Show all\".\n\n## Variants\n\nThe default `ghost` variant renders unframed rows. `card` is an elevated surface, `outline` a transparent bounded surface, and `soft` a status-aware tint that doubles in dark mode. `size` (`small`, `normal` or `large`, default `normal`) scales row text, values and icons with the AIMessage size scale; AIThread and AIChat pass their `messageSize`. A lone call and a group share the same surface; group rows are divided inside it and align with the group header. The block is `w-full max-w-[32rem]` of its container, never sized from the viewport.\n\nUse `toggleIcon=\"none\"` for the default minimal trigger, `chevron` for a rotating disclosure icon, or `plus-minus` for plus/minus expansion controls. The choice applies to both group and child triggers.\n";

package/dist/components/AITool/aiTool.mcp.js

@@ -3,15 +3,15 @@ export const aiToolDescription = `
 
 Render one AI tool call or one collapsible group of consecutive calls. Non-empty \`tools\` takes precedence over \`tool\`. Missing statuses are inferred from output and errors, while arbitrary values use circular-safe depth and entry limits.
 
-Expanded call/group IDs use bindable \`value\`, initial \`defaultValue\`, and \`onValueChange(value)\`. The callback fires once for each user expansion change; parent prop updates stay silent. Nested rows inside a grouped call keep their own expansion state.
+Expanded call/group IDs use bindable \`value\`, initial \`defaultValue\`, and \`onValueChange(value)\`. The callback fires once for each user expansion change; parent prop updates stay silent. Nested rows inside a grouped call keep their own expansion state; a group's \`value\` entry is the first call's id.
 
 \`\`\`svelte
 <script lang="ts">
   import { AITool, type AIToolCall } from './index.ts';
 
   const tools: AIToolCall[] = [
-    { id: 'search', name: 'search_docs', input: { query: 'Svelte' }, output: { count: 4 } },
-    { id: 'read', name: 'read_page', status: 'running', input: { path: '/docs' } }
+    { id: 'search', name: 'searchDocs', input: { query: 'Svelte' }, output: { count: 4 }, duration: 1400 },
+    { id: 'read', name: 'read_page', status: 'running', input: { path: '/docs' }, startedAt: Date.now() }
   ];
   let open = $state(['search']);
 </script>
@@ -19,13 +19,41 @@ Expanded call/group IDs use bindable \`value\`, initial \`defaultValue\`, and \`
 <AITool {tools} bind:value={open} multiple />
 \`\`\`
 
-Use \`icon\`, \`title\`, \`status\`, \`input\`, \`output\`, \`error\`, or \`content\` snippets with a \`{ tool, index }\` payload. Default value panels use the existing Entasis ScrollArea and are capped vertically while supporting both scroll axes.
+## Statuses and the AI SDK
 
-Default status is a bare mark on the left, no badge: a spinner for active calls and a coloured dot for settled calls (info while running, success, danger, muted when cancelled). Use the \`status\` snippet only when a visible custom status treatment is required.
+\`AIToolStatus\` covers \`pending\`, \`loading\`, \`running\`, \`streaming\`, \`success\`, \`error\`, \`cancelled\`, and the approval states \`approval-requested\`, \`approval-responded\` and \`output-denied\`; any other string renders as a neutral settled status with its readable name. Map AI SDK UI tool parts with \`getAIToolStatusFromState(part.state)\`:
 
-Default input and output sections use compact sign-in and sign-out icons. Their configured labels remain available to assistive technology and on hover.
+| AI SDK \`part.state\` | AITool \`status\` | Shown as |
+| --- | --- | --- |
+| \`input-streaming\` | \`streaming\` | spinner, "Preparing" |
+| \`input-available\` | \`running\` | spinner, "Running" |
+| \`approval-requested\` | \`approval-requested\` | hand glyph, "Awaiting approval" (never spins) |
+| \`approval-responded\` | \`approval-responded\` | spinner, "Approved", until an output state follows |
+| \`output-available\` | \`success\` | check glyph |
+| \`output-error\` | \`error\` | x glyph, "Failed" |
+| \`output-denied\` | \`output-denied\` | slashed circle, "Denied" (never spins) |
 
-Use \`toggleIcon="none"\` for the default minimal trigger, \`chevron\` for a rotating disclosure icon, or \`plus-minus\` for plus/minus expansion controls. The choice applies to both group and child triggers.
+Pass the part's \`approval\` object too: \`approval: { approved: false }\` renders as denied even while the state still reads \`approval-responded\`. Unknown states return \`undefined\`, so status falls back to inference: an error is \`error\`, any output is \`success\`, nothing yet is \`pending\`.
+
+## Row anatomy
+
+Each row reads: status mark (spinner, then a check, x, hand or slashed-circle glyph, so status never relies on colour alone), readable title, a muted one-line input summary, then the status word (omitted on success) and the duration.
+
+- Title: \`title\` wins unless it only repeats \`name\`; raw names are humanized (\`searchDocs\` → "Search docs", \`analyze_release\` → "Analyze release", \`mcp__github__list_issues\` → "List issues").
+- \`icon\`: an entasis icon snippet per call; it takes the leading place and the status glyph moves next to the status word.
+- \`summary\`: overrides the input summary (first primitive input value, strings quoted); \`''\` hides it.
+- Duration: \`duration\` (ms), or \`startedAt\` + \`completedAt\`. A running call counts its elapsed time live (from \`startedAt\`, or from when the AITool first saw it running) and keeps its final duration after it settles, also when a lone call grows into a group: "<1s", "6s", "1m 12s". A duration the AITool only observed lives as long as that AITool; a row that remounts (a virtualized transcript) keeps it only when the call carries \`duration\` or \`startedAt\` + \`completedAt\`.
+- Group header: "Search docs · 2 calls" from the distinct tool titles and the call count; override with \`labels.group(count, tools)\`.
+
+Use \`icon\`, \`title\`, \`status\`, \`input\`, \`output\`, \`error\`, or \`content\` snippets with a \`{ tool, index }\` payload. The \`icon\` snippet replaces the leading mark and \`status\` replaces the trailing word and duration. \`formatStatus\` changes the status word and the mark's accessible name (defaults are localized).
 
-The default \`ghost\` variant renders an unframed tool call. Use \`card\` for an elevated surface, \`outline\` for a transparent bounded surface, or \`soft\` for a subtle status-aware tint. Group triggers keep intrinsic width independently from their expanded call content, while each child call receives the same variant around its complete row and panel.
+## Values
+
+Input, output and error sections share one text label style ("Input", "Output", "Error"). \`valueView="json"\` (default) shows highlighted, wrapped JSON through the Code component with a copy button; \`valueView="tree"\` shows a key/value tree with quoted strings and no array index keys. String values that hold JSON are shown structured; other one-line strings are quoted like JSON (so the output \`"3"\` never reads as the number \`3\`), and multi-line strings stay plain wrapped text. A primitive error (a string, an Error, an MCP \`isError\` result with text content) renders as one plain sentence. Values longer than \`maxLines\` (12) lines or rows collapse behind "Show all".
+
+## Variants
+
+The default \`ghost\` variant renders unframed rows. \`card\` is an elevated surface, \`outline\` a transparent bounded surface, and \`soft\` a status-aware tint that doubles in dark mode. \`size\` (\`small\`, \`normal\` or \`large\`, default \`normal\`) scales row text, values and icons with the AIMessage size scale; AIThread and AIChat pass their \`messageSize\`. A lone call and a group share the same surface; group rows are divided inside it and align with the group header. The block is \`w-full max-w-[32rem]\` of its container, never sized from the viewport.
+
+Use \`toggleIcon="none"\` for the default minimal trigger, \`chevron\` for a rotating disclosure icon, or \`plus-minus\` for plus/minus expansion controls. The choice applies to both group and child triggers.
 `;

package/dist/components/AITool/aiTool.props.d.ts

@@ -1,9 +1,26 @@
 import type { Slot } from '../Slot/slot.js';
-import type { DisclosureIndicator } from '../../types/theme.js';
+import type { DisclosureIndicator, Sizes } from '../../types/theme.js';
 import type { WithAttachments } from '../../types/props.js';
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { AIToolThemeProps } from './aiTool.theme.js';
-export type AIToolStatus = 'pending' | 'loading' | 'running' | 'streaming' | 'success' | 'error' | 'cancelled' | (string & {});
+/**
+ * Lifecycle of one call. AI SDK UI tool part states map onto it with
+ * `getAIToolStatusFromState`: `input-streaming` → `streaming`, `input-available` → `running`,
+ * `approval-requested` → `approval-requested`, `approval-responded` → `approval-responded`,
+ * `output-available` → `success`, `output-error` → `error`, `output-denied` → `output-denied`.
+ * Only `pending`, `loading`, `running`, `streaming` and `approval-responded` show a spinner;
+ * app-defined strings render as a neutral, settled status.
+ */
+export type AIToolStatus = 'pending' | 'loading' | 'running' | 'streaming' | 'success' | 'error' | 'cancelled'
+/** Waiting for the user to approve or deny the call. Never spins. */
+ | 'approval-requested'
+/** The user approved; the call runs until an output state follows. */
+ | 'approval-responded'
+/** The user denied the call. Never spins. */
+ | 'output-denied' | (string & {});
+/** How the default renderer shows input, output and object errors. */
+export type AIToolValueView = 'json' | 'tree';
 export type AIToolVariant = 'card' | 'ghost' | 'outline' | 'soft';
 export type AIToolToggleIcon = DisclosureIndicator;
 export type AIToolCall = {
@@ -16,6 +33,23 @@ export type AIToolCall = {
     structuredContent?: unknown;
     result?: unknown;
     error?: unknown;
+    /** Approval decision recorded by AI SDK approval flows. `approved: false` renders as denied. */
+    approval?: {
+        approved?: boolean;
+        reason?: string;
+    };
+    /** One-line muted summary shown after the title. Defaults to the first input value; `''` hides it. */
+    summary?: string;
+    /** Icon shown in place of the leading status mark; the status then moves next to its word. */
+    icon?: Snippet<[{
+        size?: number | string;
+    }]>;
+    /** When the call started. Enables a live elapsed time while the call runs. */
+    startedAt?: Date | number | string;
+    /** When the call settled. With `startedAt`, gives the final duration. */
+    completedAt?: Date | number | string;
+    /** Final duration in milliseconds. Takes precedence over `startedAt` and `completedAt`. */
+    duration?: number;
     _meta?: Record<string, unknown>;
 };
 export type AIToolRenderPayload = {
@@ -24,17 +58,25 @@ export type AIToolRenderPayload = {
 };
 export type AIToolSnippet = Slot<AIToolRenderPayload>;
 export type AIToolLabels = {
+    /** Title for calls without `title` or `name`. */
     fallbackTitle: string;
-    group: (count: number) => string;
+    /** Group header text. Defaults to the distinct tool titles and the call count: "Search docs · 2 calls". */
+    group: (count: number, tools: readonly AIToolCall[]) => string;
     input: string;
     output: string;
     error: string;
     empty: string;
+    /** Expands a long value. */
+    showAll: string;
+    /** Collapses an expanded long value. */
+    showLess: string;
 };
 type AIToolRootAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'content' | 'icon' | 'input' | 'output' | 'title'>;
 export type AIToolProps = WithAttachments<AIToolRootAttributes & {
     /** Bindable reference to the root tool-call group. */
     ref?: HTMLDivElement | null;
+    /** Type and icon scale: `small`, `normal` (default) or `large`, matching AIMessage sizes. AIThread passes its `messageSize`. */
+    size?: Sizes;
     /** Single call fallback used when `tools` is empty. */
     tool?: AIToolCall;
     /** Consecutive calls rendered as one aggregate accordion group. Takes precedence over `tool`. */
@@ -55,11 +97,15 @@ export type AIToolProps = WithAttachments<AIToolRootAttributes & {
     maxDepth?: number;
     /** Maximum entries rendered per object or array. */
     maxEntries?: number;
+    /** Default value renderer: highlighted, copyable JSON or a key/value tree. @default 'json' */
+    valueView?: AIToolValueView;
+    /** Lines (JSON) or rows (tree) shown before a value collapses behind "Show all". @default 12 */
+    maxLines?: number;
     /** Overrides labels used by the default renderer. */
     labels?: Partial<AIToolLabels>;
-    /** Formats the accessible label for the default status indicator. */
+    /** Formats the status word and the status mark's accessible label. Defaults to localized words. */
     formatStatus?: (status: AIToolStatus) => string;
-    /** Custom renderer for the tool icon. */
+    /** Replaces the leading status mark of each call row. */
     icon?: Slot<AIToolRenderPayload>;
     /** Custom renderer for the tool title. */
     title?: Slot<AIToolRenderPayload>;
@@ -71,7 +117,7 @@ export type AIToolProps = WithAttachments<AIToolRootAttributes & {
     output?: Slot<AIToolRenderPayload>;
     /** Custom renderer for an error section. */
     error?: Slot<AIToolRenderPayload>;
-    /** Custom status renderer. */
+    /** Replaces the trailing status word and duration of each call row. */
     status?: Slot<AIToolRenderPayload>;
     /** Class applied to the root tool-call group. */
     class?: string;