@classic-homes/agent-chat 0.3.0 → 0.4.1

package/dist/components/ToolTimeline.svelte

@@ -1,62 +1,146 @@
+<!--
+  @component
+  What the agent did in a turn: tool calls (status icon, readable name, duration) and the
+  specialists it delegated to, with their own calls nested. Open while the turn runs and folded
+  away when it finishes, unless the reader toggled it.
+-->
 <script lang="ts">
-  import { cn, Icon } from '@classic-homes/theme-svelte';
+  import { cn, Collapsible, Icon, Spinner, type IconName } from '@classic-homes/theme-svelte';
   import type { DelegationState, ToolCallState } from '../reducer.js';
+  import { formatDuration, groupToolRuns, humanizeToolName } from '../message-format.js';
 
-  let {
-    tools,
-    delegations,
-    streaming = false,
-  }: { tools: ToolCallState[]; delegations: DelegationState[]; streaming?: boolean } = $props();
-  let expanded = $state(false);
-  const running = $derived(tools.filter((t) => !t.status).length);
-  const label = $derived.by(() => {
-    if (streaming && running > 0)
-      return `Working: ${tools
-        .filter((t) => !t.status)
-        .map((t) => t.name)
-        .join(', ')}`;
-    const children = delegations.map((d) => d.child);
-    const parts = [tools.length ? `${tools.length} tool call${tools.length === 1 ? '' : 's'}` : ''];
-    if (children.length) parts.push(`via ${[...new Set(children)].join(', ')}`);
-    return parts.filter(Boolean).join(' ');
+  interface Props {
+    tools: ToolCallState[];
+    delegations: DelegationState[];
+    streaming?: boolean;
+    /** Readable names by tool name (with or without the `server/` prefix). */
+    toolLabels?: Record<string, string>;
+    class?: string;
+  }
+  let { tools, delegations, streaming = false, toolLabels, class: className }: Props = $props();
+
+  /** The reader's choice; until they make one the timeline follows the turn. */
+  let toggled = $state<boolean | null>(null);
+  const open = $derived(toggled ?? streaming);
+  let details = $state<Record<string, boolean>>({});
+
+  const running = $derived(tools.filter((t) => !t.status));
+  const failed = $derived(
+    tools.filter((t) => t.status === 'error' || t.status === 'unauthenticated').length,
+  );
+  const refused = $derived(tools.filter((t) => t.status === 'refused').length);
+  const groups = $derived(groupToolRuns(tools, delegations));
+
+  function labelFor(tool: ToolCallState): string {
+    const full = tool.server ? `${tool.server}/${tool.name}` : tool.name;
+    return toolLabels?.[full] ?? toolLabels?.[tool.name] ?? humanizeToolName(tool.name);
+  }
+  function statusIcon(tool: ToolCallState): { icon: IconName; tone: string; label: string } {
+    switch (tool.status) {
+      case 'ok':
+        return { icon: 'check-circle', tone: 'text-success', label: 'Done' };
+      case 'error':
+        return { icon: 'x-circle', tone: 'text-destructive', label: 'Failed' };
+      case 'refused':
+        return { icon: 'alert-triangle', tone: 'text-warning', label: 'Refused' };
+      case 'unauthenticated':
+        return { icon: 'lock', tone: 'text-warning', label: 'Needs sign-in' };
+      default:
+        return { icon: 'circle', tone: 'text-muted-foreground', label: 'Interrupted' };
+    }
+  }
+
+  const summary = $derived.by(() => {
+    if (streaming && running.length) return `${labelFor(running[running.length - 1]!)}…`;
+    const parts: string[] = [];
+    if (tools.length) parts.push(`${tools.length} tool call${tools.length === 1 ? '' : 's'}`);
+    const children = [...new Set(delegations.map((d) => d.child))];
+    if (children.length) parts.push(`via ${children.join(', ')}`);
+    if (failed) parts.push(`${failed} failed`);
+    if (refused) parts.push(`${refused} refused`);
+    return parts.join(' · ') || 'Working…';
   });
 </script>
 
-{#if tools.length > 0 || delegations.length > 0}
-  <div class="mb-2 mt-1 text-xs text-muted-foreground">
-    <button
-      type="button"
-      class="inline-flex items-center gap-1.5 rounded-sm py-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      onclick={() => (expanded = !expanded)}
-      aria-expanded={expanded}
-    >
-      <Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={14} />
-      <span>{label}</span>
-      {#if streaming && running > 0}<span
-          class="size-2 rounded-full bg-primary motion-safe:animate-pulse"
-          aria-hidden="true"
-        ></span>{/if}
-    </button>
-    {#if expanded}
-      <ol class="mt-1.5 grid gap-1 pl-4">
-        {#each tools as tool (tool.callId)}
-          <li class="grid grid-cols-[auto_1fr_auto] gap-x-2">
-            <span class="font-mono">{tool.server ? `${tool.server}/` : ''}{tool.name}</span>
-            <span>{tool.agent}</span>
-            <span
-              class={cn(
-                (tool.status === 'error' || tool.status === 'refused') && 'text-destructive',
-              )}
-              >{tool.status ?? 'running'}{tool.durationMs !== undefined
-                ? ` · ${tool.durationMs} ms`
-                : ''}</span
-            >
-            {#if tool.summary}<div class="col-span-full whitespace-pre-wrap opacity-80">
-                {tool.summary}
-              </div>{/if}
-          </li>
-        {/each}
-      </ol>
+{#snippet toolRow(tool: ToolCallState)}
+  {@const s = statusIcon(tool)}
+  {@const preview = [tool.argsPreview, tool.summary].filter(Boolean).join('\n→ ')}
+  <li class="min-w-0">
+    <div class="flex items-center gap-2">
+      {#if !tool.status && streaming}
+        <Spinner size="sm" label="Running" class="shrink-0" />
+      {:else}
+        <span class={cn('shrink-0', s.tone)} title={s.label}>
+          <Icon name={s.icon} size={14} />
+          <span class="sr-only">{s.label}</span>
+        </span>
+      {/if}
+      <span class="min-w-0 truncate text-foreground">{labelFor(tool)}</span>
+      {#if tool.server}<span class="hidden shrink-0 font-mono sm:inline">{tool.server}</span>{/if}
+      {#if tool.durationMs !== undefined}
+        <span class="ml-auto shrink-0 tabular-nums">{formatDuration(tool.durationMs)}</span>
+      {/if}
+    </div>
+    {#if preview}
+      <button
+        type="button"
+        class={cn(
+          'ml-[22px] mt-0.5 block max-w-full whitespace-pre-wrap rounded text-left font-mono text-[11px] leading-snug [overflow-wrap:anywhere] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          !details[tool.callId] && 'line-clamp-2',
+        )}
+        aria-expanded={!!details[tool.callId]}
+        aria-label={details[tool.callId] ? 'Show less' : 'Show the full call'}
+        onclick={() => (details[tool.callId] = !details[tool.callId])}>{preview}</button
+      >
     {/if}
-  </div>
+  </li>
+{/snippet}
+
+{#if tools.length > 0 || delegations.length > 0}
+  <Collapsible
+    {open}
+    onOpenChange={(next) => (toggled = next)}
+    class={cn('text-xs text-muted-foreground', className)}
+    triggerClass="gap-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground"
+    contentClass="pt-1.5"
+  >
+    {#snippet trigger()}
+      <span class="inline-flex items-center gap-1.5">
+        {#if streaming && running.length}
+          <Spinner size="sm" label="Working" />
+        {:else}
+          <Icon name="tool" size={12} />
+        {/if}
+        <span>{summary}</span>
+      </span>
+    {/snippet}
+    <div class="grid gap-2 border-l border-border pl-3">
+      {#each groups as group, gi (group.delegation?.childRunId ?? `top-${gi}`)}
+        {#if group.delegation}
+          <div class="grid gap-1">
+            <div class="flex items-center gap-2 text-foreground">
+              {#if group.delegation.status === 'start' && streaming}
+                <Spinner size="sm" label="Working" class="shrink-0" />
+              {:else}
+                <Icon name="corner-down-right" size={14} class="shrink-0 text-muted-foreground" />
+              {/if}
+              <span>Delegated to <span class="font-medium">{group.delegation.child}</span></span>
+            </div>
+            {#if group.delegation.summary}
+              <p class="ml-[22px] [overflow-wrap:anywhere]">{group.delegation.summary}</p>
+            {/if}
+            {#if group.tools.length}
+              <ol class="ml-[22px] grid gap-1">
+                {#each group.tools as tool (tool.callId)}{@render toolRow(tool)}{/each}
+              </ol>
+            {/if}
+          </div>
+        {:else}
+          <ol class="grid gap-1">
+            {#each group.tools as tool (tool.callId)}{@render toolRow(tool)}{/each}
+          </ol>
+        {/if}
+      {/each}
+    </div>
+  </Collapsible>
 {/if}

package/dist/components/ToolTimeline.svelte.d.ts

@@ -1,10 +1,18 @@
 import type { DelegationState, ToolCallState } from '../reducer.js';
-type $$ComponentProps = {
+interface Props {
     tools: ToolCallState[];
     delegations: DelegationState[];
     streaming?: boolean;
-};
-declare const ToolTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
+    /** Readable names by tool name (with or without the `server/` prefix). */
+    toolLabels?: Record<string, string>;
+    class?: string;
+}
+/**
+ * What the agent did in a turn: tool calls (status icon, readable name, duration) and the
+ * specialists it delegated to, with their own calls nested. Open while the turn runs and folded
+ * away when it finishes, unless the reader toggled it.
+ */
+declare const ToolTimeline: import("svelte").Component<Props, {}, "">;
 type ToolTimeline = ReturnType<typeof ToolTimeline>;
 export default ToolTimeline;
 //# sourceMappingURL=ToolTimeline.svelte.d.ts.map

package/dist/components/ToolTimeline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToolTimeline.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAAC,WAAW,EAAE,eAAe,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAuD1G,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ToolTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToolTimeline.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAIlE,UAAU,KAAK;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6HH;;;;GAIG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/composer.svelte.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=composer.svelte.test.d.ts.map

package/dist/components/composer.svelte.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.svelte.test.d.ts","sourceRoot":"","sources":["../../src/lib/components/composer.svelte.test.ts"],"names":[],"mappings":""}

package/dist/components/composer.svelte.test.js

@@ -0,0 +1,162 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { LIMITS } from '@classic-homes/agent-contracts';
+import { promptMenuKeyAction } from '../composer-keys.js';
+import { filterPrompts, promptQuery } from '../composer-prompts.js';
+import { formatDuration, groupToolRuns, humanizeToolName } from '../message-format.js';
+import Composer from './Composer.svelte';
+import ToolTimeline from './ToolTimeline.svelte';
+afterEach(() => cleanup());
+const prompts = [
+    {
+        id: '1',
+        label: 'Weekly recap',
+        description: 'Summary for a community',
+        text: 'Recap {{community}}',
+    },
+    { id: '2', label: 'Lot report', text: async () => 'Report on lot {{lot}}' },
+    { id: '3', label: 'Draft email', description: 'Weekly buyer update', text: 'Email' },
+];
+describe('prompt menu helpers', () => {
+    it('reads the query only from a bare /command', () => {
+        expect(promptQuery('/')).toBe('');
+        expect(promptQuery('/wee')).toBe('wee');
+        expect(promptQuery('/weekly recap')).toBeNull();
+        expect(promptQuery('hello /x')).toBeNull();
+    });
+    it('ranks label matches over description matches', () => {
+        expect(filterPrompts(prompts, 'weekly').map((p) => p.id)).toEqual(['1', '3']);
+        expect(filterPrompts(prompts, 'lot').map((p) => p.id)).toEqual(['2']);
+        expect(filterPrompts(prompts, '')).toHaveLength(3);
+    });
+    it('maps keys while the menu is open', () => {
+        expect(promptMenuKeyAction({ key: 'ArrowDown' })).toBe('next');
+        expect(promptMenuKeyAction({ key: 'Enter' })).toBe('choose');
+        expect(promptMenuKeyAction({ key: 'Enter', shiftKey: true })).toBeNull();
+        expect(promptMenuKeyAction({ key: 'Enter', isComposing: true })).toBeNull();
+        expect(promptMenuKeyAction({ key: 'Escape' })).toBe('close');
+    });
+});
+describe('tool helpers', () => {
+    it('humanizes names and durations', () => {
+        expect(humanizeToolName('hotsheet/list_plans')).toBe('List plans');
+        expect(humanizeToolName('getLotDetails')).toBe('Get lot details');
+        expect(formatDuration(640)).toBe('640 ms');
+        expect(formatDuration(1234)).toBe('1.2 s');
+        expect(formatDuration(75_000)).toBe('1 min 15 s');
+    });
+    it('groups calls under their delegation', () => {
+        const t = (callId, runId) => ({ callId, runId });
+        const groups = groupToolRuns([t('a', 'root'), t('b', 'child-1'), t('c', 'root')], [{ child: 'research', childRunId: 'child-1', status: 'end' }]);
+        expect(groups.map((g) => [g.delegation?.child, g.tools.map((x) => x.callId)])).toEqual([
+            [undefined, ['a', 'c']],
+            ['research', ['b']],
+        ]);
+    });
+});
+describe('Composer', () => {
+    it('inserts a saved prompt from the / menu with the keyboard', async () => {
+        const user = userEvent.setup();
+        render(Composer, { props: { prompts } });
+        const box = screen.getByRole('combobox', { name: 'Message' });
+        await user.type(box, '/lot');
+        const listbox = await screen.findByRole('listbox', { name: 'Saved prompts' });
+        expect(listbox.textContent).toContain('Lot report');
+        await user.keyboard('{Enter}');
+        await waitFor(() => expect(box.value).toBe('Report on lot {{lot}}'));
+        expect(screen.queryByRole('listbox')).toBeNull();
+    });
+    it('closes the menu on Escape and keeps the draft', async () => {
+        const user = userEvent.setup();
+        render(Composer, { props: { prompts } });
+        const box = screen.getByRole('combobox', { name: 'Message' });
+        await user.type(box, '/');
+        await screen.findByRole('listbox');
+        await user.keyboard('{ArrowDown}{Escape}');
+        await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull());
+        expect(box.value).toBe('/');
+    });
+    it('uploads pasted and dropped files and shows them while uploading', async () => {
+        let finish = () => { };
+        const upload = vi.fn((file) => new Promise((resolve) => {
+            finish = resolve;
+            void file;
+        }));
+        render(Composer, { props: { upload } });
+        const box = screen.getByRole('textbox', { name: 'Message' });
+        const file = new File(['x'], 'shot.png', { type: 'image/png' });
+        await fireEvent.paste(box, { clipboardData: { files: [file], types: ['Files'] } });
+        expect(upload).toHaveBeenCalledWith(file);
+        expect(await screen.findByText('shot.png')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' }).hasAttribute('disabled')).toBe(true);
+        finish({ fileId: 'f1', name: 'shot.png', mimeType: 'image/png', bytes: 1, status: 'uploaded' });
+        expect(await screen.findByRole('button', { name: 'Remove shot.png' })).toBeTruthy();
+        const card = screen.getByRole('group', { name: 'Message composer' });
+        const dropped = new File(['y'], 'plan.pdf', { type: 'application/pdf' });
+        const dataTransfer = { types: ['Files'], files: [dropped], dropEffect: 'none' };
+        await fireEvent.dragEnter(card, { dataTransfer });
+        expect(screen.getByText('Drop files to attach')).toBeTruthy();
+        await fireEvent.drop(card, { dataTransfer });
+        expect(upload).toHaveBeenLastCalledWith(dropped);
+        expect(screen.queryByText('Drop files to attach')).toBeNull();
+    });
+    it('counts characters near the limit', async () => {
+        const { rerender } = render(Composer, { props: { value: 'short' } });
+        expect(screen.queryByText(/\/ 8,000/)).toBeNull();
+        await rerender({ value: 'x'.repeat(Math.ceil(LIMITS.messageChars * 0.85)) });
+        expect(screen.getByText(/\/ 8,000/)).toBeTruthy();
+    });
+});
+describe('ToolTimeline', () => {
+    const tool = (patch) => ({
+        callId: 'c1',
+        name: 'list_plans',
+        server: 'hotsheet',
+        argsPreview: '{"community":"Wolf Ranch"}',
+        agent: 'classic-agent',
+        runId: 'root',
+        ...patch,
+    });
+    it('is open with a spinner while running and folds when the turn ends', async () => {
+        const { rerender } = render(ToolTimeline, {
+            props: { tools: [tool({})], delegations: [], streaming: true },
+        });
+        expect(screen.getAllByText('List plans…').length).toBeGreaterThan(0);
+        expect(screen.getByText('{"community":"Wolf Ranch"}')).toBeTruthy();
+        await rerender({
+            tools: [tool({ status: 'ok', durationMs: 1234 })],
+            delegations: [],
+            streaming: false,
+        });
+        const trigger = screen.getByRole('button', { name: /1 tool call/ });
+        expect(trigger.getAttribute('aria-expanded')).toBe('false');
+        await userEvent.click(trigger);
+        expect(screen.getByText('1.2 s')).toBeTruthy();
+    });
+    it('uses host labels, nests delegations and counts failures', async () => {
+        render(ToolTimeline, {
+            props: {
+                streaming: false,
+                toolLabels: { 'hotsheet/list_plans': 'Look up plans' },
+                tools: [
+                    tool({ status: 'ok' }),
+                    tool({
+                        callId: 'c2',
+                        name: 'web_search',
+                        server: undefined,
+                        runId: 'child',
+                        status: 'error',
+                    }),
+                ],
+                delegations: [{ child: 'research', childRunId: 'child', status: 'end' }],
+            },
+        });
+        const trigger = screen.getByRole('button', { name: /2 tool calls · via research · 1 failed/ });
+        await userEvent.click(trigger);
+        expect(screen.getByText('Look up plans')).toBeTruthy();
+        expect(screen.getByText('research')).toBeTruthy();
+        expect(screen.getByText('Web search')).toBeTruthy();
+        expect(screen.getByText('Failed')).toBeTruthy();
+    });
+});

package/dist/composer-keys.d.ts

@@ -1,5 +1,7 @@
 /** What a keydown in the composer textarea should do. Pure so it can be tested without a DOM. */
 export type ComposerKeyAction = 'send' | 'cancel' | null;
+/** What a keydown does while the `/` prompt menu is open. */
+export type PromptMenuKeyAction = 'next' | 'previous' | 'choose' | 'close' | null;
 export interface ComposerKey {
     key: string;
     shiftKey?: boolean;
@@ -8,4 +10,5 @@ export interface ComposerKey {
     keyCode?: number;
 }
 export declare function composerKeyAction(event: ComposerKey, streaming: boolean): ComposerKeyAction;
+export declare function promptMenuKeyAction(event: ComposerKey): PromptMenuKeyAction;
 //# sourceMappingURL=composer-keys.d.ts.map

package/dist/composer-keys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composer-keys.d.ts","sourceRoot":"","sources":["../src/lib/composer-keys.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,GAAG,iBAAiB,CAM3F"}
+{"version":3,"file":"composer-keys.d.ts","sourceRoot":"","sources":["../src/lib/composer-keys.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEzD,6DAA6D;AAC7D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,GAAG,iBAAiB,CAM3F;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAgB3E"}

package/dist/composer-keys.js

@@ -8,3 +8,21 @@ export function composerKeyAction(event, streaming) {
         return 'send';
     return null;
 }
+export function promptMenuKeyAction(event) {
+    if (event.isComposing || event.keyCode === 229)
+        return null;
+    switch (event.key) {
+        case 'ArrowDown':
+            return 'next';
+        case 'ArrowUp':
+            return 'previous';
+        case 'Enter':
+            return event.shiftKey ? null : 'choose';
+        case 'Tab':
+            return 'choose';
+        case 'Escape':
+            return 'close';
+        default:
+            return null;
+    }
+}

package/dist/composer-prompts.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The composer's `/` prompt menu: which query the draft asks for and which prompts match. Pure,
+ * so the matching can be tested without a DOM.
+ */
+export interface ComposerPrompt {
+    id: string;
+    label: string;
+    description?: string;
+    /** The text to insert, or a loader for it (e.g. fetch the saved template). */
+    text: string | (() => Promise<string>);
+}
+/** The filter text when the draft is a bare `/command` (no spaces or newlines yet), else null. */
+export declare function promptQuery(draft: string): string | null;
+/** Prompts whose label or description contains every word of the query, labels first. */
+export declare function filterPrompts<T extends Pick<ComposerPrompt, 'label' | 'description'>>(prompts: T[], query: string, limit?: number): T[];
+//# sourceMappingURL=composer-prompts.d.ts.map

package/dist/composer-prompts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer-prompts.d.ts","sourceRoot":"","sources":["../src/lib/composer-prompts.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;CACxC;AAED,kGAAkG;AAClG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGxD;AAED,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,aAAa,CAAC,EACnF,OAAO,EAAE,CAAC,EAAE,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,SAAI,GACR,CAAC,EAAE,CAkBL"}

package/dist/composer-prompts.js

@@ -0,0 +1,27 @@
+/** The filter text when the draft is a bare `/command` (no spaces or newlines yet), else null. */
+export function promptQuery(draft) {
+    const match = /^\/(\S*)$/.exec(draft);
+    return match ? match[1] : null;
+}
+/** Prompts whose label or description contains every word of the query, labels first. */
+export function filterPrompts(prompts, query, limit = 8) {
+    const words = query
+        .toLowerCase()
+        .split(/[-_\s]+/)
+        .filter(Boolean);
+    const score = (p) => {
+        const label = p.label.toLowerCase();
+        const haystack = `${label} ${p.description?.toLowerCase() ?? ''}`;
+        if (!words.every((w) => haystack.includes(w)))
+            return -1;
+        if (!words.length)
+            return 1;
+        return words.every((w) => label.includes(w)) ? (label.startsWith(words[0]) ? 3 : 2) : 1;
+    };
+    return prompts
+        .map((p, i) => ({ p, i, s: score(p) }))
+        .filter((x) => x.s >= 0)
+        .sort((a, b) => b.s - a.s || a.i - b.i)
+        .slice(0, limit)
+        .map((x) => x.p);
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './body-lock.js';
 export * from './composer-keys.js';
+export * from './composer-prompts.js';
 export * from './markdown.js';
 export * from './message-format.js';
 export * from './reducer.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from './body-lock.js';
 export * from './composer-keys.js';
+export * from './composer-prompts.js';
 export * from './markdown.js';
 export * from './message-format.js';
 export * from './reducer.js';

package/dist/message-format.d.ts

@@ -27,4 +27,32 @@ export interface ProposalDescription {
 }
 /** Read-only description of a proposed document edit; applying happens in the Office add-in. */
 export declare function describeProposal(op: ProposedOperation): ProposalDescription;
+/** "list_plans" / "listPlans" / "hotsheet/list-plans" → "List plans". */
+export declare function humanizeToolName(name: string): string;
+/** 640 → "640 ms", 1234 → "1.2 s", 75000 → "1 min 15 s". */
+export declare function formatDuration(ms: number): string;
+export interface ToolRunGroup<T extends {
+    runId: string;
+}> {
+    /** The delegation this group ran under; undefined for the top-level agent. */
+    delegation?: {
+        child: string;
+        childRunId: string;
+        status: 'start' | 'end';
+        summary?: string;
+    };
+    tools: T[];
+}
+/**
+ * Group tool calls by the run that made them: the top-level agent's own calls first, then one
+ * group per delegation (in the order the delegations started) with the child's calls.
+ */
+export declare function groupToolRuns<T extends {
+    runId: string;
+}>(tools: T[], delegations: {
+    child: string;
+    childRunId: string;
+    status: 'start' | 'end';
+    summary?: string;
+}[]): ToolRunGroup<T>[];
 //# sourceMappingURL=message-format.d.ts.map

package/dist/message-format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-format.d.ts","sourceRoot":"","sources":["../src/lib/message-format.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7C;AAED,wCAAwC;AACxC,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wCAAwC;AACxC,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CASlE;AAQD,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,SAAa,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAW/E;AAED,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CASrF;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,iBAAiB,GAAG,QAAQ,CAcnE;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,iBAAiB,GAAG,MAAM,CAejE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAQnD;AAED,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,iBAAiB,GAAG,mBAAmB,CAgB3E"}
+{"version":3,"file":"message-format.d.ts","sourceRoot":"","sources":["../src/lib/message-format.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7C;AAED,wCAAwC;AACxC,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wCAAwC;AACxC,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CASlE;AAQD,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,SAAa,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAW/E;AAED,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CASrF;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,iBAAiB,GAAG,QAAQ,CAcnE;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,iBAAiB,GAAG,MAAM,CAejE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAQnD;AAED,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,iBAAiB,GAAG,mBAAmB,CAgB3E;AAED,yEAAyE;AACzE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQrD;AAED,4DAA4D;AAC5D,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IACvD,8EAA8E;IAC9E,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,GAAG,KAAK,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9F,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EACvD,KAAK,EAAE,CAAC,EAAE,EACV,WAAW,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,OAAO,GAAG,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,GAC9F,YAAY,CAAC,CAAC,CAAC,EAAE,CAMnB"}

package/dist/message-format.js

@@ -116,3 +116,34 @@ export function describeProposal(op) {
             return { action: 'Replace selection', host: 'Word' };
     }
 }
+/** "list_plans" / "listPlans" / "hotsheet/list-plans" → "List plans". */
+export function humanizeToolName(name) {
+    const bare = name.includes('/') ? name.slice(name.lastIndexOf('/') + 1) : name;
+    const words = bare
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/[_\-.]+/g, ' ')
+        .trim()
+        .toLowerCase();
+    return words ? words[0].toUpperCase() + words.slice(1) : name;
+}
+/** 640 → "640 ms", 1234 → "1.2 s", 75000 → "1 min 15 s". */
+export function formatDuration(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)} ms`;
+    if (ms < 60_000)
+        return `${(ms / 1000).toFixed(ms < 10_000 ? 1 : 0)} s`;
+    const min = Math.floor(ms / 60_000);
+    const s = Math.round((ms % 60_000) / 1000);
+    return s ? `${min} min ${s} s` : `${min} min`;
+}
+/**
+ * Group tool calls by the run that made them: the top-level agent's own calls first, then one
+ * group per delegation (in the order the delegations started) with the child's calls.
+ */
+export function groupToolRuns(tools, delegations) {
+    const childRuns = new Set(delegations.map((d) => d.childRunId));
+    const groups = [{ tools: tools.filter((t) => !childRuns.has(t.runId)) }];
+    for (const delegation of delegations)
+        groups.push({ delegation, tools: tools.filter((t) => t.runId === delegation.childRunId) });
+    return groups.filter((g) => g.delegation || g.tools.length);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/agent-chat",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "description": "Svelte 5 chat UI for Classic Agent: session state, message list, composer, tool timeline, artifacts and MCP-UI sandbox frames. Consumed by the Classic App.",
@@ -17,8 +17,8 @@
     "dist"
   ],
   "dependencies": {
-    "@classic-homes/agent-client": "0.3.0",
-    "@classic-homes/agent-contracts": "0.3.0",
+    "@classic-homes/agent-client": "0.4.1",
+    "@classic-homes/agent-contracts": "0.4.1",
     "dompurify": "3.4.17"
   },
   "peerDependencies": {