entasis 0.11.0 → 0.12.0

package/dist/components/AIThreadToc/aiThreadToc.theme.js

@@ -7,17 +7,18 @@ const defaultRoot = cva({
 const defaultScrollArea = cva({ base: 'h-full w-full overflow-visible' });
 const defaultScrollContent = cva({ base: 'flex min-h-full w-full items-center' });
 const defaultTrack = cva({
-    base: 'relative w-full shrink-0 cursor-default overflow-visible'
+    base: 'group/toc-stack relative w-full shrink-0 cursor-default overflow-visible'
 });
 const defaultPinArea = cva({ base: 'absolute inset-x-0 top-3 bottom-3' });
+// The rail and the visible-range bar are painted: the bar is the "you are here" of the thread.
 const defaultRail = cva({
-    base: 'pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 rounded-full'
+    base: 'pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 rounded-full bg-neutral/10'
 });
 const defaultViewport = cva({
-    base: 'absolute left-1/2 min-h-2 w-1 -translate-x-1/2 rounded-full'
+    base: 'absolute left-1/2 min-h-2 w-1 -translate-x-1/2 rounded-full bg-neutral/25'
 });
 const defaultPin = cva({
-    base: 'group absolute left-0 flex h-[5px] w-full -translate-y-1/2 cursor-default items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-focus/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
+    base: 'group absolute left-0 flex h-2.5 w-full -translate-y-1/2 cursor-default items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-focus/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
     variants: {
         side: {
             left: 'justify-start',
@@ -30,8 +31,14 @@ const defaultPin = cva({
     },
     defaultVariants: { side: 'left', active: false }
 });
+// The pins animate only while the stack is pointed at or focused (the magnification). Scrolling
+// the thread changes which pins are visible on every frame, and transitions restarted on each
+// scroll kept the browser restyling and repainting the TOC, which made the thread scroll stutter.
 const defaultPinIndicator = cva({
-    base: 'h-0.5 w-3 rounded-full bg-neutral [opacity:var(--ai-thread-toc-opacity)] [transform:scaleX(var(--ai-thread-toc-scale))] motion-safe:transition-[opacity,transform] motion-safe:duration-fast motion-safe:ease-standard',
+    // The active turn's pin is longer and fully opaque; pins in view are lighter, the rest faint.
+    // The length follows the pin's own `data-active`, so a scroll that moves the active turn never
+    // rewrites a class.
+    base: 'h-0.5 w-3 rounded-full bg-neutral [opacity:var(--ai-thread-toc-opacity)] [transform:scaleX(var(--ai-thread-toc-scale))] group-data-[active=true]:w-4 motion-safe:group-data-[interacting=true]/toc-stack:transition-[opacity,transform] motion-safe:group-data-[interacting=true]/toc-stack:duration-fast motion-safe:group-data-[interacting=true]/toc-stack:ease-standard',
     variants: {
         side: {
             left: 'origin-left',
@@ -62,6 +69,7 @@ const defaultPreviewExcerpt = cva({
     base: 'line-clamp-4 text-xs leading-relaxed text-neutral/70'
 });
 const defaultPreviewMetadata = cva({ base: 'truncate text-xs text-neutral/70' });
+const defaultPreviewTurn = cva({ base: 'truncate text-xs text-neutral/70 tabular-nums' });
 const defaultPreviewFiles = cva({
     base: 'flex min-w-0 flex-wrap items-center gap-x-lg gap-y-xs pt-micro'
 });
@@ -82,7 +90,8 @@ export const aiThreadTocTheme = {
     previewTitle: defaultPreviewTitle,
     previewExcerpt: defaultPreviewExcerpt,
     previewMetadata: defaultPreviewMetadata,
+    previewTurn: defaultPreviewTurn,
     previewFiles: defaultPreviewFiles
 };
 export const setAIThreadTocTheme = setComponentTheme('ai-thread-toc');
-export const useAIThreadTocTheme = useComponentTheme('aiThreadToc', aiThreadTocTheme);
+export const useAIThreadTocTheme = useComponentTheme('ai-thread-toc', aiThreadTocTheme);

package/dist/components/AITool/AITool.svelte

@@ -1,25 +1,28 @@
 <script lang="ts">
 	import { createBindableValue } from '../../utils/state.svelte.js';
 	import Accordion from '../Accordion/Accordion.svelte';
-	import Spinner from '../Spinner/Spinner.svelte';
-	import type { AIToolCall, AIToolLabels, AIToolProps } from './aiTool.props.js';
+	import type { AIToolCall, AIToolLabels, AIToolProps, AIToolStatus } from './aiTool.props.js';
 	import { useAIToolTheme } from './aiTool.theme.js';
 	import { createAIToolAccordionTheme } from './aiToolPrimitiveThemes.js';
 	import {
-		formatAIToolStatus,
+		getAIToolCallValue,
+		getAIToolGroupSummary,
 		getAIToolGroupValue,
+		getAIToolStatusLabel,
 		getAIToolStatusTone,
-		isActiveAIToolStatus,
 		resolveAIToolGroupStatus,
 		resolveAIToolStatus
 	} from './toolRendering.js';
 	import AIToolCallList from './AIToolCallList.svelte';
+	import AIToolStatusMark from './AIToolStatusMark.svelte';
+	import { createAIToolClock } from './aiToolClock.svelte.js';
 	import { useI18n } from '../../i18n/context.svelte.js';
 
 	type ToolGroupAccordionItem = { id: string; tools: readonly AIToolCall[] };
 
 	let {
 		ref = $bindable(null),
+		size = 'normal',
 		tool,
 		tools = [],
 		defaultValue = [],
@@ -30,8 +33,10 @@
 		toggleIcon = 'none',
 		maxDepth = 8,
 		maxEntries = 80,
+		valueView = 'json',
+		maxLines = 12,
 		labels,
-		formatStatus = formatAIToolStatus,
+		formatStatus: formatStatusProp,
 		icon,
 		title,
 		status,
@@ -62,17 +67,34 @@
 	);
 	const resolvedLabels = $derived<AIToolLabels>({
 		fallbackTitle: labels?.fallbackTitle ?? t.aiToolCall,
-		group: labels?.group ?? t.aiToolCalls,
+		group:
+			labels?.group ??
+			((_count, groupTools) =>
+				getAIToolGroupSummary(groupTools, labels?.fallbackTitle ?? t.aiToolCall, t)),
 		input: labels?.input ?? t.aiToolInput,
 		output: labels?.output ?? t.aiToolOutput,
 		error: labels?.error ?? t.aiToolError,
-		empty: labels?.empty ?? t.aiToolEmpty
+		empty: labels?.empty ?? t.aiToolEmpty,
+		showAll: labels?.showAll ?? t.aiToolShowAll,
+		showLess: labels?.showLess ?? t.aiToolShowLess
 	});
+	const formatStatus = $derived(
+		formatStatusProp ?? ((value: AIToolStatus) => getAIToolStatusLabel(value, t))
+	);
 	const resolvedStatus = $derived(
 		singleTool ? resolveAIToolStatus(singleTool) : resolveAIToolGroupStatus(resolvedTools)
 	);
 	const resolvedTone = $derived(getAIToolStatusTone(resolvedStatus));
 	const classes = $derived(useAIToolTheme(theme));
+	// One clock for every call, above the single/group switch: a lone call that becomes a group
+	// (or a collapsed group whose rows are not mounted) keeps its observed run bounds.
+	const clock = createAIToolClock(() =>
+		resolvedTools.map((call, index) => ({
+			key: getAIToolCallValue(call, index),
+			tool: call,
+			status: resolveAIToolStatus(call)
+		}))
+	);
 	const groupAccordionTheme = $derived(
 		createAIToolAccordionTheme(classes, {
 			scope: 'group',
@@ -85,22 +107,25 @@
 
 {#snippet groupTitle(payload: { item: ToolGroupAccordionItem })}
 	{@const currentStatus = resolveAIToolGroupStatus(payload.item.tools)}
-	<div data-slot="ai-tool-group-trigger-content" class={classes.title()}>
-		<span
-			data-slot="ai-tool-group-icon"
-			role="img"
-			aria-label={formatStatus(currentStatus)}
-			class={classes.groupIcon({ tone: getAIToolStatusTone(currentStatus) })}
-		>
-			{#if isActiveAIToolStatus(currentStatus)}
-				<Spinner size="small" decorative class="motion-reduce:[&_*]:animate-none" />
-			{:else}
-				<span class={classes.indicatorDot()}></span>
-			{/if}
-		</span>
+	{@const tone = getAIToolStatusTone(currentStatus)}
+	{@const statusLabel = formatStatus(currentStatus)}
+	<div data-slot="ai-tool-group-trigger-content" data-tone={tone} class={classes.title()}>
+		<AIToolStatusMark
+			status={currentStatus}
+			label={statusLabel}
+			slot="ai-tool-group-icon"
+			{theme}
+		/>
 		<span data-slot="ai-tool-group-title" class={classes.name()}>
-			{resolvedLabels.group(payload.item.tools.length)}
+			{resolvedLabels.group(payload.item.tools.length, payload.item.tools)}
 		</span>
+		{#if tone !== 'success'}
+			<span data-slot="ai-tool-group-meta" class={classes.meta()}>
+				<span data-slot="ai-tool-group-status" class={classes.statusWord({ tone })}>
+					{statusLabel}
+				</span>
+			</span>
+		{/if}
 	</div>
 {/snippet}
 
@@ -113,6 +138,7 @@
 			{variant}
 			{toggleIcon}
 			labels={resolvedLabels}
+			{clock}
 			{formatStatus}
 			{icon}
 			{title}
@@ -123,6 +149,8 @@
 			{error}
 			{maxDepth}
 			{maxEntries}
+			{valueView}
+			{maxLines}
 			{theme}
 		/>
 	</div>
@@ -134,6 +162,7 @@
 		bind:this={ref}
 		data-slot="ai-tool"
 		data-variant={variant}
+		data-size={size}
 		data-status={resolvedStatus}
 		class={classes.root({ scope: 'single', variant, tone: resolvedTone, className })}
 	>
@@ -143,8 +172,10 @@
 			{onValueChange}
 			{multiple}
 			scope="single"
+			{variant}
 			{toggleIcon}
 			labels={resolvedLabels}
+			{clock}
 			{formatStatus}
 			{icon}
 			{title}
@@ -155,6 +186,8 @@
 			{error}
 			{maxDepth}
 			{maxEntries}
+			{valueView}
+			{maxLines}
 			{theme}
 		/>
 	</div>
@@ -164,10 +197,12 @@
 		bind:this={ref}
 		data-slot="ai-tool"
 		data-variant={variant}
+		data-size={size}
 		data-status={resolvedStatus}
 		class={classes.root({ scope: 'group', variant, tone: resolvedTone, className })}
 	>
 		<Accordion
+			{size}
 			items={groupItems}
 			bind:value={valueState.value}
 			{onValueChange}

package/dist/components/AITool/AIToolCallList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Accordion from '../Accordion/Accordion.svelte';
 	import Slot from '../Slot/Slot.svelte';
-	import Spinner from '../Spinner/Spinner.svelte';
+	import { useI18n } from '../../i18n/context.svelte.js';
 	import type {
 		AIToolCall,
 		AIToolLabels,
@@ -9,6 +9,7 @@
 		AIToolSnippet,
 		AIToolStatus,
 		AIToolToggleIcon,
+		AIToolValueView,
 		AIToolVariant
 	} from './aiTool.props.js';
 	import type { AIToolThemeProps } from './aiTool.theme.js';
@@ -17,17 +18,20 @@
 		createAIToolAccordionTheme,
 		type AIToolAccordionScope
 	} from './aiToolPrimitiveThemes.js';
+	import type { AIToolClock } from './aiToolClock.svelte.js';
 	import {
-		formatAIToolStatus,
+		formatAIElapsed,
 		getAIToolCallValue,
 		getAIToolErrorValue,
 		getAIToolGroupValue,
 		getAIToolOutputValue,
 		getAIToolStatusTone,
+		getAIToolSummary,
+		getAIToolTitle,
 		hasRenderableAIToolValue,
-		isActiveAIToolStatus,
 		resolveAIToolStatus
 	} from './toolRendering.js';
+	import AIToolStatusMark from './AIToolStatusMark.svelte';
 	import AIToolValueSection from './AIToolValueSection.svelte';
 
 	type ToolAccordionItem = { id: string; tool: AIToolCall; index: number };
@@ -41,7 +45,8 @@
 		variant = 'ghost',
 		toggleIcon = 'none',
 		labels,
-		formatStatus = formatAIToolStatus,
+		clock,
+		formatStatus,
 		icon,
 		title,
 		status,
@@ -51,6 +56,8 @@
 		error,
 		maxDepth,
 		maxEntries,
+		valueView,
+		maxLines,
 		theme
 	}: {
 		tools: readonly AIToolCall[];
@@ -61,7 +68,8 @@
 		variant?: AIToolVariant;
 		toggleIcon?: AIToolToggleIcon;
 		labels: AIToolLabels;
-		formatStatus?: (status: AIToolStatus) => string;
+		clock: AIToolClock;
+		formatStatus: (status: AIToolStatus) => string;
 		icon?: AIToolSnippet;
 		title?: AIToolSnippet;
 		status?: AIToolSnippet;
@@ -71,9 +79,12 @@
 		error?: AIToolSnippet;
 		maxDepth: number;
 		maxEntries: number;
+		valueView?: AIToolValueView;
+		maxLines?: number;
 		theme?: AIToolThemeProps;
 	} = $props();
 
+	const t = $derived(useI18n());
 	const items = $derived<ToolAccordionItem[]>(
 		tools.map((tool, index) => ({
 			id: scope === 'single' ? getAIToolGroupValue([tool]) : getAIToolCallValue(tool, index),
@@ -85,44 +96,71 @@
 	const accordionTheme = $derived(
 		createAIToolAccordionTheme(classes, { scope, variant, toggleIcon })
 	);
-
-	function displayName(tool: AIToolCall): string {
-		return tool.title ?? tool.name ?? labels.fallbackTitle;
-	}
 </script>
 
 {#snippet toolTitle(payload: { item: ToolAccordionItem })}
 	{@const tool = payload.item.tool}
 	{@const renderPayload: AIToolRenderPayload = { tool, index: payload.item.index }}
 	{@const currentStatus = resolveAIToolStatus(tool)}
-	<div
-		data-slot="ai-tool-call-trigger-content"
-		data-tone={getAIToolStatusTone(currentStatus)}
-		class={classes.title()}
-	>
-		<span
-			data-slot="ai-tool-call-status-indicator"
-			role="img"
-			aria-label={formatStatus(currentStatus)}
-			class={classes.indicator({ tone: getAIToolStatusTone(currentStatus) })}
-		>
-			{#if icon}
+	{@const tone = getAIToolStatusTone(currentStatus)}
+	{@const statusLabel = formatStatus(currentStatus)}
+	{@const summary = getAIToolSummary(tool)}
+	{@const elapsed = clock.elapsed(
+		getAIToolCallValue(tool, payload.item.index),
+		tool,
+		currentStatus
+	)}
+	{@const showWord = tone !== 'success'}
+	<div data-slot="ai-tool-call-trigger-content" data-tone={tone} class={classes.title()}>
+		{#if icon}
+			<span
+				data-slot="ai-tool-call-status-indicator"
+				role="img"
+				aria-label={statusLabel}
+				class={classes.indicator({ tone })}
+			>
 				<Slot render={icon} payload={renderPayload} />
-			{:else if isActiveAIToolStatus(currentStatus)}
-				<Spinner size="small" decorative class="motion-reduce:[&_*]:animate-none" />
-			{:else}
-				<span class={classes.indicatorDot()}></span>
-			{/if}
-		</span>
+			</span>
+		{:else if tool.icon}
+			<span data-slot="ai-tool-call-icon" aria-hidden="true" class={classes.indicator()}>
+				{@render tool.icon({ size: 16 })}
+			</span>
+		{:else}
+			<AIToolStatusMark status={currentStatus} label={statusLabel} {theme} />
+		{/if}
 		{#if title}
 			<Slot render={title} payload={renderPayload} />
 		{:else}
-			<span data-slot="ai-tool-call-title" class={classes.name()}>{displayName(tool)}</span>
+			<span data-slot="ai-tool-call-title" class={classes.name()}>
+				{getAIToolTitle(tool, labels.fallbackTitle)}
+			</span>
+		{/if}
+		{#if summary}
+			<span data-slot="ai-tool-call-summary" class={classes.summary()}>{summary}</span>
 		{/if}
 		{#if status}
 			<span data-slot="ai-tool-status" class={classes.status()}>
 				<Slot render={status} payload={renderPayload} />
 			</span>
+		{:else if showWord || elapsed !== undefined || (tool.icon && !icon)}
+			<span data-slot="ai-tool-call-meta" class={classes.meta()}>
+				{#if showWord || (tool.icon && !icon)}
+					<span data-slot="ai-tool-call-status" class={classes.statusWord({ tone })}>
+						{#if tool.icon && !icon}
+							<AIToolStatusMark
+								status={currentStatus}
+								label={statusLabel}
+								decorative={showWord}
+								{theme}
+							/>
+						{/if}
+						{#if showWord}{statusLabel}{/if}
+					</span>
+				{/if}
+				{#if elapsed !== undefined}
+					<span data-slot="ai-tool-call-duration">{formatAIElapsed(elapsed, t)}</span>
+				{/if}
+			</span>
 		{/if}
 	</div>
 {/snippet}
@@ -147,6 +185,10 @@
 					snippet={input}
 					{maxDepth}
 					{maxEntries}
+					{valueView}
+					{maxLines}
+					showAllLabel={labels.showAll}
+					showLessLabel={labels.showLess}
 					{theme}
 				/>
 			{/if}
@@ -162,6 +204,10 @@
 					tone="error"
 					{maxDepth}
 					{maxEntries}
+					{valueView}
+					{maxLines}
+					showAllLabel={labels.showAll}
+					showLessLabel={labels.showLess}
 					{theme}
 				/>
 			{:else if hasRenderableAIToolValue(outputValue)}
@@ -174,6 +220,10 @@
 					snippet={output}
 					{maxDepth}
 					{maxEntries}
+					{valueView}
+					{maxLines}
+					showAllLabel={labels.showAll}
+					showLessLabel={labels.showLess}
 					{theme}
 				/>
 			{/if}
@@ -193,7 +243,7 @@
 	title={toolTitle}
 	content={toolContent}
 	icon={toggleIcon}
-	variant={scope === 'single' ? 'outline' : 'classic'}
+	variant="classic"
 	density="compact"
 	theme={accordionTheme}
 />

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

@@ -1,6 +1,7 @@
-import type { AIToolCall, AIToolLabels, AIToolSnippet, AIToolStatus, AIToolToggleIcon, AIToolVariant } from './aiTool.props.js';
+import type { AIToolCall, AIToolLabels, AIToolSnippet, AIToolStatus, AIToolToggleIcon, AIToolValueView, AIToolVariant } from './aiTool.props.js';
 import type { AIToolThemeProps } from './aiTool.theme.js';
 import { type AIToolAccordionScope } from './aiToolPrimitiveThemes.js';
+import type { AIToolClock } from './aiToolClock.svelte.js';
 type $$ComponentProps = {
     tools: readonly AIToolCall[];
     value?: string[];
@@ -10,7 +11,8 @@ type $$ComponentProps = {
     variant?: AIToolVariant;
     toggleIcon?: AIToolToggleIcon;
     labels: AIToolLabels;
-    formatStatus?: (status: AIToolStatus) => string;
+    clock: AIToolClock;
+    formatStatus: (status: AIToolStatus) => string;
     icon?: AIToolSnippet;
     title?: AIToolSnippet;
     status?: AIToolSnippet;
@@ -20,6 +22,8 @@ type $$ComponentProps = {
     error?: AIToolSnippet;
     maxDepth: number;
     maxEntries: number;
+    valueView?: AIToolValueView;
+    maxLines?: number;
     theme?: AIToolThemeProps;
 };
 declare const AIToolCallList: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/AITool/AIToolStatusMark.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { checkIconBold } from '../Icons/check.js';
+	import { handIcon } from '../Icons/hand.js';
+	import { prohibitIcon } from '../Icons/prohibit.js';
+	import { xIconBold } from '../Icons/x.js';
+	import Spinner from '../Spinner/Spinner.svelte';
+	import type { AIToolStatus } from './aiTool.props.js';
+	import { useAIToolTheme, type AIToolThemeProps } from './aiTool.theme.js';
+	import { getAIToolStatusTone, isActiveAIToolStatus } from './toolRendering.js';
+
+	let {
+		status,
+		label,
+		slot = 'ai-tool-call-status-indicator',
+		decorative = false,
+		theme
+	}: {
+		status: AIToolStatus;
+		/** Accessible status word; omitted from the tree when `decorative`. */
+		label: string;
+		slot?: string;
+		/** Set when a visible status word next to the mark already names the status. */
+		decorative?: boolean;
+		theme?: AIToolThemeProps;
+	} = $props();
+
+	const classes = $derived(useAIToolTheme(theme));
+	const tone = $derived(getAIToolStatusTone(status));
+</script>
+
+<span
+	data-slot={slot}
+	data-tone={tone}
+	role={decorative ? undefined : 'img'}
+	aria-label={decorative ? undefined : label}
+	aria-hidden={decorative ? 'true' : undefined}
+	class={classes.indicator({ tone })}
+>
+	{#if isActiveAIToolStatus(status)}
+		<Spinner size="small" color="info" decorative class="motion-reduce:[&_*]:animate-none" />
+	{:else if tone === 'success'}
+		{@render checkIconBold({ size: 14, 'aria-hidden': 'true' })}
+	{:else if tone === 'error'}
+		{@render xIconBold({ size: 14, 'aria-hidden': 'true' })}
+	{:else if tone === 'awaiting'}
+		{@render handIcon({ size: 14, 'aria-hidden': 'true' })}
+	{:else if tone === 'denied' || tone === 'cancelled'}
+		{@render prohibitIcon({ size: 14, 'aria-hidden': 'true' })}
+	{:else}
+		<span class={classes.indicatorDot()}></span>
+	{/if}
+</span>

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

@@ -0,0 +1,14 @@
+import type { AIToolStatus } from './aiTool.props.js';
+import { type AIToolThemeProps } from './aiTool.theme.js';
+type $$ComponentProps = {
+    status: AIToolStatus;
+    /** Accessible status word; omitted from the tree when `decorative`. */
+    label: string;
+    slot?: string;
+    /** Set when a visible status word next to the mark already names the status. */
+    decorative?: boolean;
+    theme?: AIToolThemeProps;
+};
+declare const AIToolStatusMark: import("svelte").Component<$$ComponentProps, {}, "">;
+type AIToolStatusMark = ReturnType<typeof AIToolStatusMark>;
+export default AIToolStatusMark;