entasis 0.11.0 → 0.12.0

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

@@ -1,57 +1,59 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+const tones = {
+    active: '',
+    awaiting: '',
+    success: '',
+    error: '',
+    denied: '',
+    cancelled: '',
+    default: ''
+};
+// One call and a group share one surface per variant, so a lone call and a group of calls read
+// as the same block. The block follows its container, never the viewport, and caps at 32rem.
 const defaultRoot = cva({
-    base: 'inline-grid max-w-full min-w-0 align-top text-neutral transition-[color,background-color,box-shadow]',
+    base: 'group/ai-tool-size grid w-full max-w-[32rem] min-w-0 text-sm data-[size=small]:text-xs data-[size=large]:text-base text-neutral transition-[color,background-color,box-shadow]',
     variants: {
         scope: {
             single: '',
             group: ''
         },
         variant: {
-            card: '',
+            card: 'rounded-lg bg-surface-raised ring-1 ring-neutral-muted lift-1',
             ghost: '',
-            outline: '',
-            soft: ''
+            outline: 'rounded-lg ring-1 ring-neutral-muted',
+            soft: 'rounded-lg'
         },
-        tone: {
-            active: '',
-            success: '',
-            error: '',
-            cancelled: '',
-            default: ''
-        }
+        tone: tones
     },
+    // The soft tint doubles on the dark surface, where `/5` disappears.
     compoundVariants: [
-        {
-            scope: 'single',
-            variant: 'card',
-            class: 'rounded-lg bg-surface-raised ring-1 ring-neutral-muted lift-1'
-        },
-        { scope: 'single', variant: 'outline', class: 'rounded-lg ring-1 ring-neutral-muted' },
-        { scope: 'single', variant: 'soft', tone: 'active', class: 'rounded-lg bg-info/5' },
-        { scope: 'single', variant: 'soft', tone: 'success', class: 'rounded-lg bg-success/5' },
-        { scope: 'single', variant: 'soft', tone: 'error', class: 'rounded-lg bg-danger/5' },
-        { scope: 'single', variant: 'soft', tone: 'cancelled', class: 'rounded-lg bg-neutral/5' },
-        { scope: 'single', variant: 'soft', tone: 'default', class: 'rounded-lg bg-neutral/5' }
+        { variant: 'soft', tone: 'active', class: 'bg-info/5 dark:bg-info/10' },
+        { variant: 'soft', tone: 'awaiting', class: 'bg-warning/5 dark:bg-warning/10' },
+        { variant: 'soft', tone: 'success', class: 'bg-success/5 dark:bg-success/10' },
+        { variant: 'soft', tone: 'error', class: 'bg-danger/5 dark:bg-danger/10' },
+        { variant: 'soft', tone: 'denied', class: 'bg-neutral/5 dark:bg-neutral/10' },
+        { variant: 'soft', tone: 'cancelled', class: 'bg-neutral/5 dark:bg-neutral/10' },
+        { variant: 'soft', tone: 'default', class: 'bg-neutral/5 dark:bg-neutral/10' }
     ],
     defaultVariants: { scope: 'single', variant: 'ghost', tone: 'default' }
 });
 const defaultAccordionRoot = cva({
-    base: 'max-w-full gap-xs',
+    base: 'w-full min-w-0 gap-0',
     variants: {
         scope: {
-            single: 'w-[min(32rem,100%)]',
-            group: 'w-fit',
-            calls: 'w-[min(32rem,calc(100vw-2rem))]'
+            single: '',
+            group: '',
+            calls: ''
         }
     }
 });
 const defaultAccordionItem = cva({
-    base: 'max-w-full',
+    base: 'w-full min-w-0 border-b-0',
     variants: {
         scope: {
-            single: 'w-full',
-            group: 'w-fit',
-            calls: 'w-full'
+            single: '',
+            group: '',
+            calls: ''
         },
         variant: {
             card: '',
@@ -61,70 +63,40 @@ const defaultAccordionItem = cva({
         }
     },
     compoundVariants: [
-        {
-            scope: 'calls',
-            variant: 'card',
-            class: 'mb-md rounded-sm border-b-0 bg-surface-raised ring-1 ring-neutral-muted lift-1 last:mb-0'
-        },
-        {
-            scope: 'calls',
-            variant: 'outline',
-            class: 'mb-md rounded-sm border-b-0 ring-1 ring-neutral-muted last:mb-0'
-        },
-        {
-            scope: 'calls',
-            variant: 'soft',
-            class: 'mb-md rounded-sm border-b-0 bg-neutral/5 last:mb-0 has-[[data-tone=active]]:bg-info/5 has-[[data-tone=success]]:bg-success/5 has-[[data-tone=error]]:bg-danger/5'
-        }
+        // Calls inside a framed group are divided rows of the one surface.
+        { scope: 'calls', variant: 'card', class: 'border-t border-neutral-muted first:border-t-0' },
+        { scope: 'calls', variant: 'outline', class: 'border-t border-neutral-muted first:border-t-0' },
+        { scope: 'calls', variant: 'soft', class: 'border-t border-neutral/10 first:border-t-0' }
     ],
     defaultVariants: { variant: 'ghost' }
 });
 const defaultAccordionHeader = cva({ base: 'min-w-0 flex-1' });
+// Group and call rows share padding, so the group header lines up with the calls below it.
 const defaultAccordionTrigger = cva({
-    base: 'state-layer relative min-h-row-sm max-w-full items-center gap-md rounded-sm text-left text-xs text-neutral/70 hover:text-neutral',
+    base: 'state-layer relative min-h-row-sm w-full min-w-0 items-center gap-md rounded-sm text-left text-sm group-data-[size=small]/ai-tool-size:text-xs group-data-[size=large]/ai-tool-size:text-base text-neutral/70 hover:text-neutral',
     variants: {
         scope: {
-            single: 'px-md py-sm',
-            group: 'w-fit',
+            single: '',
+            group: '',
             calls: ''
         },
         variant: {
-            card: 'px-lg py-md',
-            ghost: 'px-md py-sm',
-            outline: 'px-lg py-md',
-            soft: 'px-lg py-md'
-        },
-        tone: {
-            active: '',
-            success: '',
-            error: '',
-            cancelled: '',
-            default: ''
+            card: 'px-md py-sm',
+            ghost: 'px-sm py-xs',
+            outline: 'px-md py-sm',
+            soft: 'px-md py-sm'
         },
+        tone: tones,
         toggleIcon: {
             none: '',
             chevron: 'pr-layout-md',
             'plus-minus': 'pr-layout-md'
         }
     },
-    compoundVariants: [
-        { scope: 'group', variant: 'ghost', class: 'pl-md' },
-        {
-            scope: 'group',
-            variant: 'card',
-            class: 'bg-surface-raised ring-1 ring-neutral-muted lift-1'
-        },
-        { scope: 'group', variant: 'outline', class: 'ring-1 ring-neutral-muted' },
-        { scope: 'group', variant: 'soft', tone: 'active', class: 'bg-info/5' },
-        { scope: 'group', variant: 'soft', tone: 'success', class: 'bg-success/5' },
-        { scope: 'group', variant: 'soft', tone: 'error', class: 'bg-danger/5' },
-        { scope: 'group', variant: 'soft', tone: 'cancelled', class: 'bg-neutral/5' },
-        { scope: 'group', variant: 'soft', tone: 'default', class: 'bg-neutral/5' }
-    ],
     defaultVariants: { variant: 'ghost', tone: 'default', toggleIcon: 'none' }
 });
 const defaultAccordionTitle = cva({
-    base: 'min-w-0 w-full no-underline group-hover/accordion-trigger:no-underline'
+    base: 'w-full min-w-0 no-underline group-hover/accordion-trigger:no-underline'
 });
 const defaultAccordionIcon = cva({ base: 'size-2.5 text-neutral/45' });
 const defaultAccordionIconWrapper = cva({
@@ -134,9 +106,9 @@ const defaultAccordionContent = cva({
     base: 'min-w-0 pt-0',
     variants: {
         scope: {
-            single: 'px-md pb-md',
-            group: 'px-0 pb-xs',
-            calls: 'px-0 pb-md'
+            single: '',
+            group: 'px-0 pb-0',
+            calls: ''
         },
         variant: {
             card: '',
@@ -146,118 +118,148 @@ const defaultAccordionContent = cva({
         }
     },
     compoundVariants: [
-        { scope: 'calls', variant: 'card', class: 'px-lg pt-md pb-lg' },
-        { scope: 'calls', variant: 'outline', class: 'px-lg pt-md pb-lg' },
-        { scope: 'calls', variant: 'soft', class: 'px-lg pt-md pb-lg' }
+        { scope: 'single', variant: 'ghost', class: 'px-sm pb-sm' },
+        { scope: 'calls', variant: 'ghost', class: 'px-sm pb-sm' },
+        { scope: 'single', variant: ['card', 'outline', 'soft'], class: 'px-md pb-md' },
+        { scope: 'calls', variant: ['card', 'outline', 'soft'], class: 'px-md pb-md' }
     ],
     defaultVariants: { variant: 'ghost' }
 });
-const defaultTitle = cva({ base: 'flex min-w-0 flex-1 items-center gap-md text-xs' });
-// Status is a bare mark, no badge: a spinner while the call runs, a dot once it has settled,
-// coloured by outcome. The box is the icon size so rows and the group title line up.
+const defaultTitle = cva({
+    base: 'flex min-w-0 flex-1 items-center gap-md text-sm group-data-[size=small]/ai-tool-size:text-xs group-data-[size=large]/ai-tool-size:text-base'
+});
+// The leading mark: a spinner while the call runs, then a glyph for the outcome, so status reads
+// by shape as well as colour. The box is the icon size so rows and the group title line up.
 const defaultIndicator = cva({
     base: 'flex size-icon-md shrink-0 items-center justify-center',
     variants: {
         tone: {
             active: 'text-info',
-            success: 'text-success',
-            error: 'text-danger',
-            cancelled: 'text-neutral/45',
+            awaiting: 'text-warning-readable',
+            success: 'text-success-readable',
+            error: 'text-danger-readable',
+            denied: 'text-neutral/70',
+            cancelled: 'text-neutral/70',
             default: 'text-neutral/45'
         }
-    }
+    },
+    defaultVariants: { tone: 'default' }
 });
 const defaultIndicatorDot = cva({ base: 'size-1.5 rounded-full bg-current' });
-const defaultGroupIcon = cva({
-    base: 'flex size-icon-md shrink-0 items-center justify-center',
+const defaultGroupIcon = defaultIndicator;
+const defaultName = cva({ base: 'min-w-0 truncate font-medium text-neutral' });
+const defaultSummary = cva({ base: 'min-w-0 flex-1 truncate text-neutral/70' });
+// Trailing status word and duration. `ms-auto` keeps them at the row end when there is no summary.
+const defaultMeta = cva({
+    base: 'ms-auto flex shrink-0 items-center gap-sm text-xs group-data-[size=large]/ai-tool-size:text-sm text-neutral/70 tabular-nums'
+});
+const defaultStatusWord = cva({
+    base: 'flex items-center gap-xs',
     variants: {
         tone: {
-            active: 'text-info',
-            success: 'text-success',
-            error: 'text-danger',
-            cancelled: 'text-neutral/45',
-            default: 'text-neutral/45'
+            active: '',
+            awaiting: 'text-warning-readable',
+            success: '',
+            error: 'text-danger-readable',
+            denied: '',
+            cancelled: '',
+            default: ''
         }
     },
     defaultVariants: { tone: 'default' }
 });
-const defaultName = cva({ base: 'min-w-0 flex-1 truncate font-medium text-neutral' });
-const defaultStatus = cva({ base: 'shrink-0' });
-const defaultContent = cva({ base: 'grid min-w-0 gap-md pb-xs' });
+const defaultStatus = cva({ base: 'ms-auto shrink-0' });
+const defaultContent = cva({ base: 'grid min-w-0 gap-md' });
 const defaultGroupContent = cva({
-    base: 'min-w-0 pl-xs',
+    base: 'min-w-0',
     variants: {
         variant: {
-            card: 'pt-md',
+            card: 'border-t border-neutral-muted',
             ghost: '',
-            outline: 'pt-md',
-            soft: 'pt-md'
+            outline: 'border-t border-neutral-muted',
+            soft: 'border-t border-neutral/10'
         }
     },
     defaultVariants: { variant: 'ghost' }
 });
+// Input, output and error sections share one label style and no nested frames.
 const defaultSection = cva({
-    base: 'relative grid min-w-0 gap-sm rounded-sm border bg-surface p-md',
+    base: 'grid min-w-0 gap-xs',
     variants: {
         tone: {
-            default: 'border-neutral-muted',
-            error: 'border-danger/20 bg-danger/5'
+            default: '',
+            error: ''
         }
     }
 });
 const defaultLabel = cva({
-    base: 'flex h-3.5 w-fit items-center',
+    base: 'text-xs group-data-[size=large]/ai-tool-size:text-sm font-medium text-neutral/70',
     variants: {
-        kind: {
-            icon: 'absolute top-2 right-2 z-10',
-            text: 'text-xs font-medium tracking-wide uppercase'
-        },
         tone: {
-            default: 'text-neutral/70',
-            error: 'text-danger-readable'
+            default: '',
+            error: ''
         }
     },
-    defaultVariants: { kind: 'text' }
+    defaultVariants: { tone: 'default' }
+});
+const defaultErrorMessage = cva({
+    base: 'min-w-0 rounded-sm bg-danger/5 px-md py-sm text-sm group-data-[size=small]/ai-tool-size:text-xs group-data-[size=large]/ai-tool-size:text-base leading-relaxed break-words whitespace-pre-wrap text-danger-readable [overflow-wrap:anywhere] dark:bg-danger/10'
 });
-// A full-width block flush inside `section`'s padding box, so its own `sm` step is capped by what
-// that padding leaves: `rounded-sm p-md` → `min(4px, 4 - 8)` → 0, a square corner, rather than a
-// repeat of the section's own radius.
-const defaultScrollArea = cva({
-    base: 'flex max-h-48 min-w-0 flex-col rounded-sm-concentric',
+const defaultCode = cva({
+    base: 'my-0 rounded-sm text-xs group-data-[size=large]/ai-tool-size:text-sm',
     variants: {
         tone: {
-            default: 'bg-surface-raised/60',
-            error: 'bg-danger/5'
+            default: '',
+            error: 'border-danger/30'
         }
     }
 });
-const defaultScrollViewport = cva({ base: 'max-h-48 w-full' });
-const defaultScrollContent = cva({ base: 'min-w-full' });
-const defaultScrollScrollbar = cva({ base: '' });
-const defaultScrollScrollbarX = cva({ base: '' });
-const defaultScrollThumb = cva({
-    base: '',
+const defaultCodeContainer = cva({
+    base: 'text-xs group-data-[size=large]/ai-tool-size:text-sm leading-relaxed [&_pre]:!px-md [&_pre]:!py-sm'
+});
+// A long value collapses to `maxLines` with a bottom fade; "Show all" lifts the cap.
+const defaultClamp = cva({
+    base: 'relative min-w-0 text-xs group-data-[size=large]/ai-tool-size:text-sm leading-relaxed',
+    variants: {
+        collapsed: {
+            true: 'overflow-hidden [mask-image:linear-gradient(to_bottom,black_70%,transparent)]',
+            false: ''
+        }
+    },
+    defaultVariants: { collapsed: false }
+});
+const defaultShowAll = cva({ base: 'justify-self-start' });
+const defaultEmpty = cva({
+    base: 'py-xs text-sm group-data-[size=small]/ai-tool-size:text-xs group-data-[size=large]/ai-tool-size:text-base text-neutral/70'
+});
+const defaultTree = cva({
+    base: 'grid min-w-0 gap-xs rounded-sm border border-neutral-muted bg-surface p-md font-mono text-xs group-data-[size=large]/ai-tool-size:text-sm leading-relaxed',
     variants: {
         tone: {
-            default: 'bg-neutral-muted',
-            error: 'bg-danger/45'
+            default: '',
+            error: 'border-danger/30'
         }
     }
 });
-const defaultEmpty = cva({ base: 'py-xs text-xs text-neutral/70' });
-const defaultTree = cva({ base: 'grid min-w-full gap-xs p-md text-xs' });
 const defaultTreeNode = cva({ base: 'min-w-0' });
 const defaultTreeBranch = cva({ base: 'flex min-w-0 items-baseline gap-md' });
-const defaultTreeKey = cva({ base: 'min-w-0 truncate text-neutral/70' });
-const defaultTreeSummary = cva({ base: 'shrink-0 text-xs text-neutral/70' });
+const defaultTreeKey = cva({ base: 'max-w-[12rem] min-w-0 truncate text-neutral/70' });
+const defaultTreeSummary = cva({ base: 'shrink-0 text-neutral/70' });
 const defaultTreeChildren = cva({
-    base: 'mt-xs ml-xs grid gap-xs border-l border-neutral-muted pl-lg'
+    base: 'mt-xs ms-xs grid min-w-0 gap-xs border-s border-neutral-muted ps-lg'
 });
 const defaultTreeLeaf = cva({
-    base: 'grid w-max min-w-full grid-cols-[minmax(4rem,8rem)_max-content] items-baseline gap-lg'
+    base: 'grid min-w-0 items-baseline gap-md',
+    variants: {
+        keyed: {
+            true: 'grid-cols-[minmax(3rem,max-content)_minmax(0,1fr)]',
+            false: 'grid-cols-1'
+        }
+    },
+    defaultVariants: { keyed: true }
 });
 const defaultTreeValue = cva({
-    base: 'whitespace-pre font-mono text-xs leading-relaxed',
+    base: 'min-w-0 break-words whitespace-pre-wrap [overflow-wrap:anywhere]',
     variants: {
         kind: {
             string: 'text-neutral',
@@ -289,17 +291,19 @@ export const aiToolTheme = {
     indicatorDot: defaultIndicatorDot,
     groupIcon: defaultGroupIcon,
     name: defaultName,
+    summary: defaultSummary,
+    meta: defaultMeta,
+    statusWord: defaultStatusWord,
     status: defaultStatus,
     content: defaultContent,
     groupContent: defaultGroupContent,
     section: defaultSection,
     label: defaultLabel,
-    scrollArea: defaultScrollArea,
-    scrollViewport: defaultScrollViewport,
-    scrollContent: defaultScrollContent,
-    scrollScrollbar: defaultScrollScrollbar,
-    scrollScrollbarX: defaultScrollScrollbarX,
-    scrollThumb: defaultScrollThumb,
+    errorMessage: defaultErrorMessage,
+    code: defaultCode,
+    codeContainer: defaultCodeContainer,
+    clamp: defaultClamp,
+    showAll: defaultShowAll,
     empty: defaultEmpty,
     tree: defaultTree,
     treeNode: defaultTreeNode,

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

@@ -0,0 +1,18 @@
+import type { AIToolCall, AIToolStatus } from './aiTool.props.js';
+export type AIToolClockEntry = {
+    key: string;
+    tool: AIToolCall;
+    status: AIToolStatus;
+};
+/**
+ * Elapsed time per call: the call's own `duration` or `startedAt`/`completedAt` when given,
+ * otherwise measured from when this AITool first saw the call running until it settled. While any
+ * call runs, a one-second tick keeps the live durations current; no timer runs otherwise. Observed
+ * bounds live as long as the AITool: a call that must keep its duration across remounts (a
+ * virtualized transcript) carries `duration` or `startedAt`/`completedAt` itself.
+ */
+export declare function createAIToolClock(entries: () => readonly AIToolClockEntry[]): {
+    /** Elapsed milliseconds for one call, or `undefined` when nothing is known. */
+    elapsed(key: string, tool: AIToolCall, status: AIToolStatus): number | undefined;
+};
+export type AIToolClock = ReturnType<typeof createAIToolClock>;

package/dist/components/AITool/aiToolClock.svelte.js

@@ -0,0 +1,62 @@
+import { untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { getAIToolTiming, isActiveAIToolStatus } from './toolRendering.js';
+const TICK = 1000;
+/**
+ * Elapsed time per call: the call's own `duration` or `startedAt`/`completedAt` when given,
+ * otherwise measured from when this AITool first saw the call running until it settled. While any
+ * call runs, a one-second tick keeps the live durations current; no timer runs otherwise. Observed
+ * bounds live as long as the AITool: a call that must keep its duration across remounts (a
+ * virtualized transcript) carries `duration` or `startedAt`/`completedAt` itself.
+ */
+export function createAIToolClock(entries) {
+    let now = $state(Date.now());
+    // Observed run bounds, so a call without `completedAt` still keeps its final duration (client
+    // only: effects never run during SSR, where only a call's own timing is shown).
+    const observed = new SvelteMap();
+    $effect(() => {
+        const list = entries();
+        untrack(() => {
+            const time = Date.now();
+            for (const { key, tool, status } of list) {
+                const timing = getAIToolTiming(tool);
+                const record = observed.get(key);
+                if (isActiveAIToolStatus(status)) {
+                    if (timing.duration !== undefined)
+                        continue;
+                    if (!record || record.end !== undefined) {
+                        observed.set(key, { start: timing.startedAt ?? time });
+                    }
+                }
+                else if (record && record.end === undefined) {
+                    observed.set(key, { ...record, end: time });
+                }
+            }
+        });
+    });
+    $effect(() => {
+        if (!entries().some((entry) => isActiveAIToolStatus(entry.status)))
+            return;
+        now = Date.now();
+        const timer = setInterval(() => {
+            now = Date.now();
+        }, TICK);
+        return () => clearInterval(timer);
+    });
+    return {
+        /** Elapsed milliseconds for one call, or `undefined` when nothing is known. */
+        elapsed(key, tool, status) {
+            const timing = getAIToolTiming(tool);
+            if (timing.duration !== undefined)
+                return timing.duration;
+            const record = observed.get(key);
+            if (isActiveAIToolStatus(status)) {
+                const start = timing.startedAt ?? record?.start;
+                return start === undefined ? undefined : Math.max(0, now - start);
+            }
+            if (record?.end === undefined)
+                return undefined;
+            return Math.max(0, record.end - (timing.startedAt ?? record.start));
+        }
+    };
+}

package/dist/components/AITool/aiToolPrimitiveThemes.d.ts

@@ -1,5 +1,4 @@
 import type { AccordionThemeProps } from '../Accordion/accordion.theme.js';
-import type { ScrollAreaThemeProps } from '../ScrollArea/scrollArea.theme.js';
 import type { AIToolToggleIcon } from './aiTool.props.js';
 import type { AIToolVariant } from './aiTool.props.js';
 import type { AIToolTheme } from './aiTool.theme.js';
@@ -12,4 +11,3 @@ export declare function createAIToolAccordionTheme(classes: AIToolTheme, { scope
     tone?: AIToolStatusTone;
     toggleIcon?: AIToolToggleIcon;
 }): AccordionThemeProps;
-export declare function createAIToolScrollAreaTheme(classes: AIToolTheme, tone: AIToolValueTone): ScrollAreaThemeProps;

package/dist/components/AITool/aiToolPrimitiveThemes.js

@@ -10,13 +10,3 @@ export function createAIToolAccordionTheme(classes, { scope, variant, tone, togg
         content: { base: classes.accordionContent({ scope, variant }) }
     };
 }
-export function createAIToolScrollAreaTheme(classes, tone) {
-    return {
-        root: { base: classes.scrollArea({ tone }) },
-        viewport: { base: classes.scrollViewport() },
-        content: { base: classes.scrollContent() },
-        scrollbar: { base: classes.scrollScrollbar() },
-        scrollbarX: { base: classes.scrollScrollbarX() },
-        scrollbarThumb: { base: classes.scrollThumb({ tone }) }
-    };
-}

package/dist/components/AITool/index.d.ts

@@ -1,3 +1,4 @@
 export { default as AITool } from './AITool.svelte';
-export type { AIToolCall, AIToolLabels, AIToolProps, AIToolRenderPayload, AIToolSnippet, AIToolStatus, AIToolToggleIcon, AIToolVariant } from './aiTool.props.js';
+export type { AIToolCall, AIToolLabels, AIToolProps, AIToolRenderPayload, AIToolSnippet, AIToolStatus, AIToolToggleIcon, AIToolValueView, AIToolVariant } from './aiTool.props.js';
+export { getAIToolStatusFromState } from './toolRendering.js';
 export { aiToolTheme, setAIToolTheme, useAIToolTheme, type AIToolTheme, type AIToolThemeProps } from './aiTool.theme.js';

package/dist/components/AITool/index.js

@@ -1,2 +1,3 @@
 export { default as AITool } from './AITool.svelte';
+export { getAIToolStatusFromState } from './toolRendering.js';
 export { aiToolTheme, setAIToolTheme, useAIToolTheme } from './aiTool.theme.js';

package/dist/components/AITool/toolRendering.d.ts

@@ -1,10 +1,19 @@
+import type { Messages } from '../../i18n/en.js';
 import type { Colors } from '../../types/theme.js';
 import type { AIToolCall, AIToolStatus } from './aiTool.props.js';
-export type AIToolStatusTone = 'active' | 'success' | 'error' | 'cancelled' | 'default';
+export type AIToolStatusTone = 'active' | 'awaiting' | 'success' | 'error' | 'denied' | 'cancelled' | 'default';
+/**
+ * Maps an AI SDK UI tool part `state` onto an AITool status. Unknown states return `undefined`
+ * so callers can fall back to inference from output and errors.
+ */
+export declare function getAIToolStatusFromState(state: string | undefined): AIToolStatus | undefined;
 export declare function resolveAIToolStatus(tool: AIToolCall): AIToolStatus;
 export declare function resolveAIToolGroupStatus(tools: readonly AIToolCall[]): AIToolStatus;
 export declare function isActiveAIToolStatus(status: AIToolStatus): boolean;
+/** Readable fallback for app-defined statuses: `needs-review` → "Needs review". */
 export declare function formatAIToolStatus(status: AIToolStatus): string;
+/** Localized word for a built-in status; app-defined statuses fall back to their readable form. */
+export declare function getAIToolStatusLabel(status: AIToolStatus, t: Messages): string;
 export declare function getAIToolStatusColor(status: AIToolStatus): Colors;
 export declare function getAIToolStatusTone(status: AIToolStatus): AIToolStatusTone;
 export declare function hasRenderableAIToolValue(value: unknown): boolean;
@@ -12,3 +21,26 @@ export declare function getAIToolOutputValue(tool: AIToolCall): unknown;
 export declare function getAIToolErrorValue(tool: AIToolCall): unknown;
 export declare function getAIToolCallValue(tool: AIToolCall, index: number): string;
 export declare function getAIToolGroupValue(tools: readonly AIToolCall[]): string;
+/**
+ * Readable tool title. An explicit `title` wins unless it only repeats the raw `name`, which is
+ * humanized: `searchDocs` → "Search docs", `analyze_release` → "Analyze release",
+ * `mcp__github__list_issues` → "List issues".
+ */
+export declare function getAIToolTitle(tool: AIToolCall, fallback: string): string;
+export declare function humanizeAIToolName(name: string): string;
+/**
+ * One-line summary of a call's input: an explicit `summary` wins (an empty string hides it),
+ * otherwise the first primitive input value. Strings are quoted so `"3"` differs from `3`.
+ */
+export declare function getAIToolSummary(tool: AIToolCall): string | undefined;
+/** Group header text: "Search docs · 2 calls", or the distinct tool titles when they differ. */
+export declare function getAIToolGroupSummary(tools: readonly AIToolCall[], fallbackTitle: string, t: Messages): string;
+export type AIToolTiming = {
+    startedAt?: number;
+    completedAt?: number;
+    duration?: number;
+};
+/** Reads the call's own timing fields as epoch milliseconds and a duration in milliseconds. */
+export declare function getAIToolTiming(tool: AIToolCall): AIToolTiming;
+/** Compact elapsed time: "<1s", "6s", "1m 12s", "1h 4m". */
+export declare function formatAIElapsed(milliseconds: number, t: Messages): string;