@classic-homes/agent-chat 0.3.0 → 0.4.0

package/README.md

@@ -47,6 +47,10 @@ agent-api origin that serves `/frame`; artifacts and MCP-UI resources only ever
 - `MessageItem` → `UserMessage` / `AssistantMessage`, with `MessageActions` (copy, time),
   `ArtifactChip`, `MessageFiles` (image lightbox, downloads) and `ProposalCard` (read-only
   document edits; applying stays in the Office add-in).
-- `Composer`, `ToolTimeline`, `ArtifactPanel`, `UiFrame`, `ModeBanner`.
+- `Composer`: attach by button, drop or paste; `prompts` turns on the `/` saved-prompt menu
+  (`ComposerPrompt.text` may be a loader, e.g. fetching the template).
+- `ToolTimeline`: tool calls with status and duration, delegations nested; `toolLabels` maps
+  tool names to readable ones (`AgentChat` passes both through).
+- `ArtifactPanel`, `UiFrame`, `ModeBanner`.
 
 Publishing: `docs/operations/package-publishing.md`.

package/dist/components/AgentChat.svelte

@@ -10,6 +10,7 @@
   import { cn, ResizablePanes, Sheet } from '@classic-homes/theme-svelte';
   import { MediaQuery } from 'svelte/reactivity';
   import { releaseStuckBodyLock } from '../body-lock.js';
+  import type { ComposerPrompt } from '../composer-prompts.js';
   import { ChatSession } from '../session.svelte.js';
   import ArtifactPanel from './ArtifactPanel.svelte';
   import Composer from './Composer.svelte';
@@ -40,6 +41,10 @@
     /** A UI resource asked to run a tool; the host confirms with the user and may send a message. */
     ontoolrequest?: (toolName: string, params?: Record<string, unknown>) => void;
     placeholder?: string;
+    /** Saved prompts offered by the composer's `/` menu. */
+    prompts?: ComposerPrompt[];
+    /** Readable tool names for the timeline, by tool name (`server/name` or `name`). */
+    toolLabels?: Record<string, string>;
     /** Rendered above the transcript, e.g. a `ChatHeader`. */
     header?: import('svelte').Snippet;
     context?: import('svelte').Snippet;
@@ -62,6 +67,8 @@
     onnotify,
     ontoolrequest,
     placeholder,
+    prompts,
+    toolLabels,
     header,
     context,
     empty,
@@ -146,6 +153,7 @@
       streaming={session.streaming}
       {sandboxOrigin}
       fileUrl={(id) => client.fileUrl(id)}
+      {toolLabels}
       {onnavigate}
       onopenartifact={(id) => {
         selectedArtifact = id;
@@ -165,6 +173,7 @@
       disabled={session.status === 'loading'}
       streaming={session.streaming}
       {placeholder}
+      {prompts}
       upload={(file) => client.uploadFile(file, file.name)}
       onsend={send}
       oncancel={() => session.cancel()}

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

@@ -1,6 +1,7 @@
 import type { AgentApiClient } from '@classic-homes/agent-client';
 import type { AgentKey, ClientKind, DocumentContext } from '@classic-homes/agent-contracts';
 import type { BackendMode } from '@classic-homes/agent-contracts';
+import type { ComposerPrompt } from '../composer-prompts.js';
 interface Props {
     client: AgentApiClient;
     /** Sandbox origin for artifacts and MCP-UI (agent-api `/frame`). */
@@ -25,6 +26,10 @@ interface Props {
     /** A UI resource asked to run a tool; the host confirms with the user and may send a message. */
     ontoolrequest?: (toolName: string, params?: Record<string, unknown>) => void;
     placeholder?: string;
+    /** Saved prompts offered by the composer's `/` menu. */
+    prompts?: ComposerPrompt[];
+    /** Readable tool names for the timeline, by tool name (`server/name` or `name`). */
+    toolLabels?: Record<string, string>;
     /** Rendered above the transcript, e.g. a `ChatHeader`. */
     header?: import('svelte').Snippet;
     context?: import('svelte').Snippet;

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

@@ -1 +1 @@
-{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAWhE,UAAU,KAAK;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6IH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQ3D,UAAU,KAAK;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgJH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/AssistantMessage.svelte

@@ -23,6 +23,7 @@
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;
@@ -38,6 +39,7 @@
     last = false,
     sandboxOrigin,
     fileUrl,
+    toolLabels,
     onnavigate,
     onopenartifact,
     onprompt,
@@ -101,7 +103,12 @@
   </span>
   <div class="flex min-w-0 flex-1 flex-col gap-2">
     {#if message.tools.length || message.delegations.length}
-      <ToolTimeline tools={message.tools} delegations={message.delegations} {streaming} />
+      <ToolTimeline
+        tools={message.tools}
+        delegations={message.delegations}
+        {streaming}
+        {toolLabels}
+      />
     {/if}
     {#if html}<Markdown {html} streaming={streaming && !!message.text} onclick={handleClick} />{/if}
     {#if thinking}

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

@@ -6,6 +6,7 @@ interface Props {
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"AssistantMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AssistantMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYpD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAuJH;;;GAGG;AACH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AssistantMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AssistantMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYpD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAwJH;;;GAGG;AACH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/Composer.svelte

@@ -1,8 +1,16 @@
+<!--
+  @component
+  The message box: an autosizing textarea in a card with attach, the host's context chip and
+  Send/Stop. Files can also be dropped on it or pasted. Typing `/` at the start opens the saved
+  prompt menu when the host passes `prompts`.
+-->
 <script lang="ts">
-  import { Button, Icon, Textarea } from '@classic-homes/theme-svelte';
+  import { cn, Button, Icon, Kbd, Popover, Spinner, Textarea } from '@classic-homes/theme-svelte';
   import type { FileRef } from '@classic-homes/agent-contracts';
   import { LIMITS } from '@classic-homes/agent-contracts';
-  import { composerKeyAction } from '../composer-keys.js';
+  import { composerKeyAction, promptMenuKeyAction } from '../composer-keys.js';
+  import { filterPrompts, promptQuery, type ComposerPrompt } from '../composer-prompts.js';
+  import { fileIcon, formatBytes } from '../message-format.js';
 
   interface Props {
     disabled?: boolean;
@@ -12,6 +20,8 @@
     placeholder?: string;
     /** Upload a file; the composer shows it as pending until the message is sent. */
     upload?: (file: File) => Promise<FileRef>;
+    /** Saved prompts for the `/` menu; the menu is off without them. */
+    prompts?: ComposerPrompt[];
     onsend?: (text: string) => void;
     oncancel?: () => void;
     onremovefile?: (fileId: string) => void;
@@ -25,28 +35,76 @@
     files = $bindable([]),
     placeholder = 'Ask Classic Agent…',
     upload,
+    prompts,
     onsend,
     oncancel,
     onremovefile,
     context,
   }: Props = $props();
 
+  const uid = $props.id();
   let textarea = $state<HTMLTextAreaElement | null>(null);
+  let card: HTMLDivElement | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
-  let uploading = $state(0);
+  /** Files being uploaded right now, shown as chips with a spinner. */
+  let pending = $state<{ key: string; name: string; bytes: number; mimeType: string }[]>([]);
   let uploadError = $state<string | undefined>();
+  let dragging = $state(false);
+  let dragDepth = 0;
 
   export function focus(): void {
     textarea?.focus({ preventScroll: true });
   }
 
+  // `/` prompt menu
+  const query = $derived(prompts?.length ? promptQuery(value) : null);
+  const matches = $derived(query === null ? [] : filterPrompts(prompts ?? [], query));
+  let dismissedFor = $state<string | null>(null);
+  const menuOpen = $derived(query !== null && matches.length > 0 && dismissedFor !== value);
+  let active = $state(0);
+  let loadingPrompt = $state(false);
+  $effect(() => {
+    void query;
+    active = 0;
+  });
+  async function choose(prompt: ComposerPrompt | undefined): Promise<void> {
+    if (!prompt) return;
+    if (typeof prompt.text === 'string') value = prompt.text;
+    else {
+      loadingPrompt = true;
+      try {
+        value = await prompt.text();
+      } catch {
+        uploadError = `Could not load “${prompt.label}”`;
+      } finally {
+        loadingPrompt = false;
+      }
+    }
+    focus();
+  }
+
+  const chars = $derived(value.length);
+  const showCount = $derived(chars > LIMITS.messageChars * 0.8);
+  const busy = $derived(pending.length > 0 || loadingPrompt);
+
   function submit(): void {
     const text = value.trim();
-    if (!text || disabled || streaming || uploading > 0) return;
+    if (!text || disabled || streaming || busy) return;
     value = '';
     onsend?.(text);
   }
   function onkeydown(event: KeyboardEvent): void {
+    if (menuOpen) {
+      const menu = promptMenuKeyAction(event);
+      if (menu) {
+        event.preventDefault();
+        if (menu === 'next') active = (active + 1) % matches.length;
+        else if (menu === 'previous') active = (active - 1 + matches.length) % matches.length;
+        else if (menu === 'choose') void choose(matches[active]);
+        else dismissedFor = value;
+        return;
+      }
+    }
     const action = composerKeyAction(event, streaming);
     if (action === 'send') {
       event.preventDefault();
@@ -56,31 +114,70 @@
       oncancel?.();
     }
   }
-  async function onfiles(event: Event): Promise<void> {
-    const input = event.currentTarget as HTMLInputElement;
-    const chosen = [...(input.files ?? [])];
-    input.value = '';
+
+  async function addFiles(chosen: File[]): Promise<void> {
     if (!upload || chosen.length === 0) return;
     uploadError = undefined;
     for (const file of chosen) {
+      if (files.length + pending.length >= LIMITS.requestFiles) {
+        uploadError = `Attach up to ${LIMITS.requestFiles} files per message`;
+        break;
+      }
       if (file.size > LIMITS.fileBytes) {
         uploadError = `${file.name} is larger than ${Math.round(LIMITS.fileBytes / 1048576)} MB`;
         continue;
       }
-      uploading += 1;
+      const key = `${file.name}-${file.size}-${Math.random().toString(36).slice(2)}`;
+      pending = [...pending, { key, name: file.name, bytes: file.size, mimeType: file.type }];
       try {
         files = [...files, await upload(file)];
       } catch (err) {
         uploadError = err instanceof Error ? err.message : `Could not upload ${file.name}`;
       } finally {
-        uploading -= 1;
+        pending = pending.filter((p) => p.key !== key);
       }
     }
   }
+  function onfiles(event: Event): void {
+    const input = event.currentTarget as HTMLInputElement;
+    const chosen = [...(input.files ?? [])];
+    input.value = '';
+    void addFiles(chosen);
+  }
+  function onpaste(event: ClipboardEvent): void {
+    const pasted = [...(event.clipboardData?.files ?? [])];
+    if (!upload || pasted.length === 0) return;
+    // Pasting a screenshot or a copied file attaches it; plain text pastes as usual.
+    event.preventDefault();
+    void addFiles(pasted);
+  }
+  const hasFiles = (event: DragEvent) => event.dataTransfer?.types.includes('Files') ?? false;
+  function ondragenter(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth += 1;
+    dragging = true;
+  }
+  function ondragover(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+  }
+  function ondragleave(): void {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) dragging = false;
+  }
+  function ondrop(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth = 0;
+    dragging = false;
+    void addFiles([...(event.dataTransfer?.files ?? [])]);
+  }
 </script>
 
 <form
-  class="bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
+  class="group/composer bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
   onsubmit={(e) => {
     e.preventDefault();
     submit();
@@ -88,29 +185,58 @@
   aria-label="Send a message"
 >
   <div
-    class="mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20"
+    bind:this={card}
+    class={cn(
+      'relative mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20',
+      dragging && 'border-primary ring-2 ring-primary/30',
+    )}
+    role="group"
+    aria-label="Message composer"
+    {ondragenter}
+    {ondragover}
+    {ondragleave}
+    {ondrop}
   >
-    {#if files.length || uploadError}
-      <div class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs">
+    {#if dragging}
+      <div
+        class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center gap-2 rounded-xl bg-background/90 text-sm font-medium text-primary"
+      >
+        <Icon name="paperclip" size={16} /> Drop files to attach
+      </div>
+    {/if}
+    {#if files.length || pending.length || uploadError}
+      <ul class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs" aria-label="Attachments">
         {#each files as file (file.fileId)}
-          <span
-            class="inline-flex max-w-full items-center gap-1 rounded-full bg-muted py-0.5 pl-2 pr-0.5"
+          <li
+            class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-0.5"
           >
-            <Icon name="file" size={12} class="shrink-0 text-muted-foreground" />
+            <Icon name={fileIcon(file.mimeType)} size={14} class="shrink-0 text-muted-foreground" />
             <span class="truncate">{file.name}</span>
-            <button
+            <span class="shrink-0 text-muted-foreground">{formatBytes(file.bytes)}</span>
+            <Button
               type="button"
-              class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              variant="ghost"
+              size="icon"
+              class="size-6 shrink-0 text-muted-foreground"
               aria-label={`Remove ${file.name}`}
               onclick={() => {
                 files = files.filter((f) => f.fileId !== file.fileId);
                 onremovefile?.(file.fileId);
-              }}><Icon name="close" size={12} /></button
+              }}><Icon name="close" size={12} /></Button
             >
-          </span>
+          </li>
         {/each}
-        {#if uploadError}<span class="text-destructive" role="alert">{uploadError}</span>{/if}
-      </div>
+        {#each pending as file (file.key)}
+          <li
+            class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-dashed border-border py-1 pl-2 pr-2 text-muted-foreground"
+          >
+            <Spinner size="sm" label={`Uploading ${file.name}`} class="shrink-0" />
+            <span class="truncate">{file.name}</span>
+            <span class="shrink-0">{formatBytes(file.bytes)}</span>
+          </li>
+        {/each}
+        {#if uploadError}<li class="text-destructive" role="alert">{uploadError}</li>{/if}
+      </ul>
     {/if}
     <Textarea
       bind:ref={textarea}
@@ -122,8 +248,14 @@
       {placeholder}
       aria-label="Message"
       maxlength={LIMITS.messageChars}
+      role={prompts?.length ? 'combobox' : undefined}
+      aria-autocomplete={prompts?.length ? 'list' : undefined}
+      aria-expanded={prompts?.length ? menuOpen : undefined}
+      aria-controls={menuOpen ? `${uid}-prompts` : undefined}
+      aria-activedescendant={menuOpen ? `${uid}-prompt-${active}` : undefined}
       {disabled}
       {onkeydown}
+      {onpaste}
     />
     <div class="flex items-center gap-1 px-2 pb-2">
       {#if upload}
@@ -134,22 +266,31 @@
           size="icon"
           class="size-8 text-muted-foreground"
           aria-label="Attach files"
-          disabled={disabled || uploading > 0}
-          loading={uploading > 0}
+          disabled={disabled || files.length >= LIMITS.requestFiles}
           onclick={() => fileInput?.click()}
         >
-          {#if uploading === 0}<Icon name="paperclip" size={18} />{/if}
+          <Icon name="paperclip" size={18} />
         </Button>
       {/if}
       {#if context}<div class="min-w-0">{@render context()}</div>{/if}
-      <div class="ml-auto">
+      <div class="ml-auto flex items-center gap-2">
+        {#if showCount}
+          <span
+            class={cn(
+              'text-xs tabular-nums text-muted-foreground',
+              chars >= LIMITS.messageChars && 'text-destructive',
+            )}
+            aria-live="polite"
+            >{chars.toLocaleString()} / {LIMITS.messageChars.toLocaleString()}</span
+          >
+        {/if}
         {#if streaming}
           <Button
             type="button"
             variant="outline"
             size="icon"
             class="size-8"
-            aria-label="Stop"
+            aria-label="Stop (Esc)"
             onclick={() => oncancel?.()}><Icon name="stop" size={14} /></Button
           >
         {:else}
@@ -158,11 +299,61 @@
             size="icon"
             class="size-8"
             aria-label="Send"
-            disabled={disabled || !value.trim() || uploading > 0}
-            ><Icon name="send" size={16} /></Button
+            disabled={disabled || !value.trim() || busy}><Icon name="send" size={16} /></Button
           >
         {/if}
       </div>
     </div>
   </div>
+  <p
+    class="mx-auto mt-1.5 hidden max-w-3xl items-center gap-1.5 px-1 text-[11px] text-muted-foreground opacity-0 transition-opacity group-focus-within/composer:opacity-100 sm:flex"
+    aria-hidden="true"
+  >
+    {#if streaming}
+      <Kbd size="sm">Esc</Kbd> to stop
+    {:else}
+      <Kbd size="sm">Enter</Kbd> to send · <Kbd keys={['Shift', 'Enter']} size="sm" /> for a new line
+      {#if prompts?.length}· <Kbd size="sm">/</Kbd> for saved prompts{/if}
+    {/if}
+  </p>
 </form>
+
+{#if prompts?.length}
+  <Popover
+    open={menuOpen}
+    onOpenChange={(next) => {
+      if (!next) dismissedFor = value;
+    }}
+    anchor={card ?? null}
+    side="top"
+    align="start"
+    sideOffset={6}
+    autoFocus={false}
+    aria-label="Saved prompts"
+    class="w-[min(28rem,calc(100vw-2rem))] p-1"
+  >
+    <ul id={`${uid}-prompts`} role="listbox" aria-label="Saved prompts" class="grid gap-0.5">
+      {#each matches as prompt, i (prompt.id)}
+        <!-- Keyboard choice happens in the textarea (combobox + aria-activedescendant). -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <li
+          id={`${uid}-prompt-${i}`}
+          role="option"
+          aria-selected={i === active}
+          class={cn(
+            'cursor-pointer rounded-md px-2.5 py-1.5 text-sm',
+            i === active ? 'bg-muted text-foreground' : 'text-foreground hover:bg-muted/60',
+          )}
+          onpointerdown={(e) => e.preventDefault()}
+          onclick={() => void choose(prompt)}
+          onpointermove={() => (active = i)}
+        >
+          <span class="block truncate font-medium">{prompt.label}</span>
+          {#if prompt.description}
+            <span class="block truncate text-xs text-muted-foreground">{prompt.description}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </Popover>
+{/if}

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

@@ -1,4 +1,5 @@
 import type { FileRef } from '@classic-homes/agent-contracts';
+import { type ComposerPrompt } from '../composer-prompts.js';
 interface Props {
     disabled?: boolean;
     streaming?: boolean;
@@ -7,12 +8,19 @@ interface Props {
     placeholder?: string;
     /** Upload a file; the composer shows it as pending until the message is sent. */
     upload?: (file: File) => Promise<FileRef>;
+    /** Saved prompts for the `/` menu; the menu is off without them. */
+    prompts?: ComposerPrompt[];
     onsend?: (text: string) => void;
     oncancel?: () => void;
     onremovefile?: (fileId: string) => void;
     /** Slot for a host-provided context chip (page context toggle). */
     context?: import('svelte').Snippet;
 }
+/**
+ * The message box: an autosizing textarea in a card with attach, the host's context chip and
+ * Send/Stop. Files can also be dropped on it or pasted. Typing `/` at the start opens the saved
+ * prompt menu when the host passes `prompts`.
+ */
 declare const Composer: import("svelte").Component<Props, {
     focus: () => void;
 }, "value" | "files">;

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

@@ -1 +1 @@
-{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAK5D,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA8GH,QAAA,MAAM,QAAQ;iBArFO,IAAI;qBAqF6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAA8B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIvF,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA2PH;;;;GAIG;AACH,QAAA,MAAM,QAAQ;iBA/NO,IAAI;qBA+N6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/MessageItem.svelte

@@ -13,6 +13,7 @@
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

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

@@ -5,6 +5,7 @@ interface Props {
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAkBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAkBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/MessageList.svelte

@@ -10,6 +10,7 @@
     streaming: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;
@@ -24,6 +25,7 @@
     streaming,
     sandboxOrigin,
     fileUrl,
+    toolLabels,
     onnavigate,
     onopenartifact,
     onprompt,
@@ -133,6 +135,7 @@
             streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
             {sandboxOrigin}
             {fileUrl}
+            {toolLabels}
             {onnavigate}
             {onopenartifact}
             {onprompt}

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

@@ -4,6 +4,7 @@ interface Props {
     streaming: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA2HH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA4HH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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.0",
   "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.0",
+    "@classic-homes/agent-contracts": "0.4.0",
     "dompurify": "3.4.17"
   },
   "peerDependencies": {