@classic-homes/agent-chat 0.7.0 → 0.9.0

package/README.md

@@ -52,6 +52,9 @@ agent-api origin that serves `/frame`; artifacts and MCP-UI resources only ever
   (`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).
+- Agent picker: pass `agents` (from `/api/agents`); with more than one, a new conversation offers
+  a picker in the composer until its first message. The conversation keeps that agent; `header`
+  receives `{ agent, agentName }` and `onagentchange` reports it.
 - `Welcome`: the empty conversation, with a greeting (`userName`), a capability line and up to
   four `suggestions` that send when chosen. `AgentChat` shows it unless the host passes an
   `empty` snippet, a loading skeleton while an existing conversation's transcript arrives, and

package/dist/components/AgentChat.svelte

@@ -2,6 +2,7 @@
   import type { AgentApiClient } from '@classic-homes/agent-client';
   import type {
     AgentKey,
+    AgentSummary,
     ClientKind,
     DocumentContext,
     FileRef,
@@ -13,9 +14,11 @@
     cn,
     Icon,
     ResizablePanes,
+    Select,
     Sheet,
     Skeleton,
   } from '@classic-homes/theme-svelte';
+  import { onMount } from 'svelte';
   import { MediaQuery } from 'svelte/reactivity';
   import { releaseStuckBodyLock } from '../body-lock.js';
   import type { ComposerPrompt } from '../composer-prompts.js';
@@ -34,7 +37,15 @@
     conversationId?: string | null;
     /** Backend mode from `/api/me`; shows the mock banner before any turn runs. */
     mode?: BackendMode;
+    /** Agent for a new conversation; a loaded conversation keeps its own. */
     agent?: AgentKey;
+    /**
+     * Agents the user may address (`/api/agents`). With more than one, a new conversation offers
+     * a picker in the composer until its first message; the agent is fixed after that.
+     */
+    agents?: AgentSummary[];
+    /** The agent of this conversation changed (picked, or learned from a loaded conversation). */
+    onagentchange?: (agent: AgentKey) => void;
     clientKind?: ClientKind;
     variant?: 'page' | 'panel';
     getContext?: () => DocumentContext | null | undefined;
@@ -63,8 +74,8 @@
     welcomeTitle?: string;
     /** Replaces the welcome's capability line. */
     welcomeDescription?: string;
-    /** Rendered above the transcript, e.g. a `ChatHeader`. */
-    header?: import('svelte').Snippet;
+    /** Rendered above the transcript, e.g. a `ChatHeader`; receives the conversation's agent. */
+    header?: import('svelte').Snippet<[{ agent: AgentKey; agentName?: string }]>;
     context?: import('svelte').Snippet;
     /** Replaces the default `Welcome` on an empty conversation. */
     empty?: import('svelte').Snippet;
@@ -76,6 +87,8 @@
     conversationId = null,
     mode,
     agent = 'classic-agent',
+    agents,
+    onagentchange,
     clientKind,
     variant = 'page',
     getContext,
@@ -163,6 +176,19 @@
     const last = session.messages[session.messages.length - 1];
     if (last?.role === 'assistant') void session.retry(last.requestId);
   }
+  const agentName = $derived(agents?.find((a) => a.key === session.agent)?.name);
+  const pickAgent = $derived(
+    (agents?.length ?? 0) > 1 && !conversationId && session.messages.length === 0,
+  );
+  let reportedAgent: AgentKey | undefined;
+  $effect(() => {
+    const current = session.agent;
+    if (current !== reportedAgent) {
+      reportedAgent = current;
+      onagentchange?.(current);
+    }
+  });
+
   // An existing conversation whose transcript has not arrived yet: show a skeleton, not the
   // welcome (which would flash before the messages).
   const pending = $derived(
@@ -172,6 +198,17 @@
         !session.loadError &&
         session.messages.length === 0),
   );
+  // A new chat starts in the composer.
+  onMount(() => {
+    if (!conversationId) composer?.focus();
+  });
+  /** Run a turn started from a control that goes away (suggestion, Regenerate, Edit), then put
+   * the keyboard back in the composer instead of on the page body. */
+  function thenFocus(run: Promise<void>): void {
+    composer?.focus();
+    void run.finally(() => composer?.focus());
+  }
+
   function reload(): void {
     if (conversationId) void session.load(conversationId);
   }
@@ -181,6 +218,17 @@
   }
 </script>
 
+{#snippet agentPicker()}
+  <Select
+    value={session.agent}
+    onValueChange={(value) => (session.agent = value as AgentKey)}
+    options={(agents ?? []).map((a) => ({ value: a.key, label: a.name }))}
+    aria-label="Agent"
+    disabled={session.status !== 'idle'}
+    class="h-8 w-auto min-w-36 border-0 bg-transparent text-xs shadow-none hover:bg-muted"
+  />
+{/snippet}
+
 {#snippet emptyState()}
   {#if pending}
     <div
@@ -213,14 +261,14 @@
       {suggestions}
       compact={variant === 'panel'}
       disabled={session.status !== 'idle'}
-      onselect={(text) => void send(text)}
+      onselect={(text) => thenFocus(send(text))}
     />
   {/if}
 {/snippet}
 
 {#snippet chat()}
   <div class="flex h-full min-w-0 flex-1 flex-col">
-    {#if header}{@render header()}{/if}
+    {#if header}{@render header({ agent: session.agent, agentName })}{/if}
     <ModeBanner mode={session.mode} />
     {#if session.loadError}
       <div class="mx-auto w-full max-w-3xl px-4 pt-3">
@@ -254,8 +302,8 @@
       ontool={(name, params) => ontoolrequest?.(name, params)}
       {onnotify}
       onretry={retry}
-      onregenerate={(requestId) => void session.regenerate(requestId)}
-      onedit={(requestId, text) => void session.edit(requestId, text)}
+      onregenerate={(requestId) => thenFocus(session.regenerate(requestId))}
+      onedit={(requestId, text) => thenFocus(session.edit(requestId, text))}
       onrate={session.conversationId
         ? (requestId, rating, comment) =>
             session
@@ -277,6 +325,7 @@
       onsend={send}
       oncancel={() => session.cancel()}
       {context}
+      tools={pickAgent ? agentPicker : undefined}
     />
   </div>
 {/snippet}

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

@@ -1,5 +1,5 @@
 import type { AgentApiClient } from '@classic-homes/agent-client';
-import type { AgentKey, ClientKind, DocumentContext } from '@classic-homes/agent-contracts';
+import type { AgentKey, AgentSummary, ClientKind, DocumentContext } from '@classic-homes/agent-contracts';
 import type { BackendMode } from '@classic-homes/agent-contracts';
 import type { ComposerPrompt } from '../composer-prompts.js';
 import type { WelcomeSuggestion } from '../welcome.js';
@@ -10,7 +10,15 @@ interface Props {
     conversationId?: string | null;
     /** Backend mode from `/api/me`; shows the mock banner before any turn runs. */
     mode?: BackendMode;
+    /** Agent for a new conversation; a loaded conversation keeps its own. */
     agent?: AgentKey;
+    /**
+     * Agents the user may address (`/api/agents`). With more than one, a new conversation offers
+     * a picker in the composer until its first message; the agent is fixed after that.
+     */
+    agents?: AgentSummary[];
+    /** The agent of this conversation changed (picked, or learned from a loaded conversation). */
+    onagentchange?: (agent: AgentKey) => void;
     clientKind?: ClientKind;
     variant?: 'page' | 'panel';
     getContext?: () => DocumentContext | null | undefined;
@@ -39,8 +47,11 @@ interface Props {
     welcomeTitle?: string;
     /** Replaces the welcome's capability line. */
     welcomeDescription?: string;
-    /** Rendered above the transcript, e.g. a `ChatHeader`. */
-    header?: import('svelte').Snippet;
+    /** Rendered above the transcript, e.g. a `ChatHeader`; receives the conversation's agent. */
+    header?: import('svelte').Snippet<[{
+        agent: AgentKey;
+        agentName?: string;
+    }]>;
     context?: import('svelte').Snippet;
     /** Replaces the default `Welcome` on an empty conversation. */
     empty?: 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;AAYlE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQrD,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,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmNH,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,YAAY,EACZ,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAclE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQrD,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,yEAAyE;IACzE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,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,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6FAA6F;IAC7F,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkPH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/Composer.svelte

@@ -27,6 +27,8 @@
     onremovefile?: (fileId: string) => void;
     /** Slot for a host-provided context chip (page context toggle). */
     context?: import('svelte').Snippet;
+    /** Toolbar controls before the context chip (e.g. the agent picker). */
+    tools?: import('svelte').Snippet;
   }
   let {
     disabled = false,
@@ -40,6 +42,7 @@
     oncancel,
     onremovefile,
     context,
+    tools,
   }: Props = $props();
 
   const uid = $props.id();
@@ -248,9 +251,7 @@
       {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}
@@ -272,6 +273,7 @@
           <Icon name="paperclip" size={18} />
         </Button>
       {/if}
+      {#if tools}<div class="min-w-0">{@render tools()}</div>{/if}
       {#if context}<div class="min-w-0">{@render context()}</div>{/if}
       <div class="ml-auto flex items-center gap-2">
         {#if showCount}
@@ -334,7 +336,8 @@
   >
     <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). -->
+        <!-- Keyboard choice happens in the textarea (textbox + aria-activedescendant; a textarea
+             may not take role=combobox). -->
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <li
           id={`${uid}-prompt-${i}`}

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

@@ -15,6 +15,8 @@ interface Props {
     onremovefile?: (fileId: string) => void;
     /** Slot for a host-provided context chip (page context toggle). */
     context?: import('svelte').Snippet;
+    /** Toolbar controls before the context chip (e.g. the agent picker). */
+    tools?: import('svelte').Snippet;
 }
 /**
  * The message box: an autosizing textarea in a card with attach, the host's context chip and

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;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"}
+{"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;IACnC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA6PH;;;;GAIG;AACH,QAAA,MAAM,QAAQ;iBAhOO,IAAI;qBAgO6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/MessageList.svelte

@@ -113,6 +113,7 @@
     });
   });
 
+  const RENDER_TAIL = 6;
   const separators = $derived(daySeparators(messages));
   // Only show day labels when the transcript spans more than one day.
   const multiDay = $derived(separators.size > 1);
@@ -150,35 +151,43 @@
               <span class="h-px flex-1 bg-border"></span>
             </div>
           {/if}
-          <MessageItem
-            {message}
-            last={i === messages.length - 1}
-            streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
-            {sandboxOrigin}
-            {fileUrl}
-            {toolLabels}
-            {onnavigate}
-            {onopenartifact}
-            {onprompt}
-            {ontool}
-            {onnotify}
-            onretry={i === messages.length - 1 ? onretry : undefined}
-            oncontinue={i === messages.length - 1 && !streaming ? oncontinue : undefined}
-            onregenerate={latest &&
-            onregenerate &&
-            i === messages.length - 1 &&
-            message.role === 'assistant' &&
-            message.status === 'done'
-              ? () => onregenerate(latest)
+          <!-- Long transcripts: let the browser skip layout and paint of turns far above the
+               fold (the last few always render, they change while streaming). -->
+          <div
+            class={i < messages.length - RENDER_TAIL
+              ? '[contain-intrinsic-size:auto_12rem] [content-visibility:auto]'
               : undefined}
-            onrate={onrate && message.role === 'assistant'
-              ? (rating: TurnRating | null, comment?: string) =>
-                  onrate(message.requestId, rating, comment)
-              : undefined}
-            onedit={latest && onedit && i === messages.length - 2
-              ? (text: string) => onedit(latest, text)
-              : undefined}
-          />
+          >
+            <MessageItem
+              {message}
+              last={i === messages.length - 1}
+              streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
+              {sandboxOrigin}
+              {fileUrl}
+              {toolLabels}
+              {onnavigate}
+              {onopenartifact}
+              {onprompt}
+              {ontool}
+              {onnotify}
+              onretry={i === messages.length - 1 ? onretry : undefined}
+              oncontinue={i === messages.length - 1 && !streaming ? oncontinue : undefined}
+              onregenerate={latest &&
+              onregenerate &&
+              i === messages.length - 1 &&
+              message.role === 'assistant' &&
+              message.status === 'done'
+                ? () => onregenerate(latest)
+                : undefined}
+              onrate={onrate && message.role === 'assistant'
+                ? (rating: TurnRating | null, comment?: string) =>
+                    onrate(message.requestId, rating, comment)
+                : undefined}
+              onedit={latest && onedit && i === messages.length - 2
+                ? (text: string) => onedit(latest, text)
+                : undefined}
+            />
+          </div>
         {/each}
       </div>
     {/if}

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,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,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,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yCAAyC;IACzC,MAAM,CAAC,EAAE,CACP,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,mDAAmD;IACnD,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAkJH,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,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,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,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yCAAyC;IACzC,MAAM,CAAC,EAAE,CACP,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,mDAAmD;IACnD,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAwJH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/UserMessage.svelte

@@ -22,6 +22,13 @@
   let editing = $state(false);
   let draft = $state('');
   let field = $state<HTMLTextAreaElement | null>(null);
+  let root = $state<HTMLDivElement | null>(null);
+  /** Leaving the editor without sending returns focus to its Edit button. */
+  async function cancel(): Promise<void> {
+    editing = false;
+    await tick();
+    root?.querySelector<HTMLButtonElement>('button[aria-label="Edit message"]')?.focus();
+  }
   async function startEdit(): Promise<void> {
     draft = message.text;
     editing = true;
@@ -39,7 +46,7 @@
     if (event.isComposing || event.keyCode === 229) return;
     if (event.key === 'Escape') {
       event.preventDefault();
-      editing = false;
+      void cancel();
     } else if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       save();
@@ -47,7 +54,11 @@
   }
 </script>
 
-<div class="group/message flex flex-col items-end gap-1 px-4 py-2" data-role="user">
+<div
+  bind:this={root}
+  class="group/message flex flex-col items-end gap-1 px-4 py-2"
+  data-role="user"
+>
   {#if message.attachments.length || message.contextLabel}
     <ul class="flex max-w-[85%] flex-wrap justify-end gap-1.5" aria-label="Attached">
       {#if message.contextLabel}
@@ -90,8 +101,7 @@
         {onkeydown}
       />
       <div class="flex justify-end gap-2">
-        <Button type="button" variant="ghost" size="sm" onclick={() => (editing = false)}
-          >Cancel</Button
+        <Button type="button" variant="ghost" size="sm" onclick={() => void cancel()}>Cancel</Button
         >
         <Button type="submit" size="sm" disabled={!draft.trim()}>Send</Button>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UserMessage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AA+EH;;;GAGG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UserMessage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAsFH;;;GAGG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

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

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

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

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

@@ -0,0 +1,172 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, waitFor } from '@testing-library/svelte';
+import axe from 'axe-core';
+import userEvent from '@testing-library/user-event';
+import AgentChat from './AgentChat.svelte';
+import ConversationSidebar from './ConversationSidebar.svelte';
+afterEach(() => {
+    cleanup();
+    document.body.removeAttribute('style');
+});
+/** axe in jsdom: no layout, so colour contrast is checked separately (tokens), not here. */
+async function violations(root = document.body) {
+    const result = await axe.run(root, {
+        rules: { 'color-contrast': { enabled: false }, region: { enabled: false } },
+    });
+    return result.violations.map((v) => `${v.id}: ${v.nodes.map((n) => n.html).join(' | ')}`);
+}
+const scope = { agent: 'classic-agent', runId: 'run-1' };
+function fakeClient() {
+    return {
+        fileUrl: (id) => `#${id}`,
+        uploadFile: vi.fn(),
+        cancel: vi.fn(),
+        resumeTurn: vi.fn(),
+        sendFeedback: vi.fn().mockResolvedValue(undefined),
+        getConversation: vi.fn(),
+        streamChat: vi.fn(async (req, opts) => {
+            [
+                { type: 'start', conversationId: 'c-1', mode: 'live' },
+                { type: 'tool_call', callId: 't1', name: 'hotsheet/list_communities', argsPreview: '{}' },
+                { type: 'tool_result', callId: 't1', status: 'ok', durationMs: 640, summary: '24 rows' },
+                { type: 'delta', text: '| A | B |\n|---|---|\n| 1 | 2 |\n\n```ts\nconst a = 1;\n```\n' },
+                {
+                    type: 'artifact',
+                    ...scope,
+                    artifactId: 'a1',
+                    op: 'open',
+                    mediaType: 'text/markdown',
+                    title: 'Memo',
+                },
+                { type: 'artifact', ...scope, artifactId: 'a1', op: 'delta', text: '# Memo' },
+                { type: 'artifact', ...scope, artifactId: 'a1', op: 'close' },
+                { type: 'done', finishReason: 'stop' },
+            ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
+            return { kind: 'done' };
+        }),
+    };
+}
+const base = { sandboxOrigin: 'https://frame.test' };
+describe('accessibility (axe)', () => {
+    it('has no violations on the welcome screen with the agent picker', async () => {
+        render(AgentChat, {
+            props: {
+                ...base,
+                client: fakeClient(),
+                userName: 'Pat',
+                suggestions: [{ label: 'Open lots', description: 'By community', icon: 'home' }],
+                agents: [
+                    { key: 'classic-agent', name: 'Classic Agent' },
+                    { key: 'elevation-studio', name: 'Elevation Studio' },
+                ],
+                prompts: [{ id: 'p1', label: 'Weekly recap', text: 'Recap' }],
+            },
+        });
+        expect(await violations()).toEqual([]);
+        // With the saved-prompt menu open.
+        await userEvent.type(screen.getByRole('textbox', { name: 'Message' }), '/');
+        await screen.findByRole('listbox', { name: 'Saved prompts' });
+        expect(await violations()).toEqual([]);
+    });
+    it('has no violations on a failed turn with Try again, and while editing', async () => {
+        const user = userEvent.setup();
+        const client = fakeClient();
+        client.streamChat.mockImplementationOnce(async (req, opts) => {
+            [
+                { type: 'start', conversationId: 'c-1', mode: 'live' },
+                { type: 'error', code: 'upstream_error', message: 'Model failed.', retryable: true },
+            ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
+            return { kind: 'done' };
+        });
+        render(AgentChat, { props: { ...base, client: client } });
+        await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
+        await screen.findByRole('button', { name: /Try again/ });
+        expect(await violations()).toEqual([]);
+        await user.click(screen.getByRole('button', { name: /Try again/ }));
+        // The retried answer opens its artifact in a (modal) sheet; close it first.
+        await screen.findByRole('dialog', { name: 'Memo' });
+        await user.keyboard('{Escape}');
+        await waitFor(() => expect(document.body.style.pointerEvents).not.toBe('none'));
+        await user.click(await screen.findByRole('button', { name: 'Edit message' }));
+        await screen.findByRole('textbox', { name: 'Edited message' });
+        expect(await violations()).toEqual([]);
+    });
+    it('has no violations on a finished turn with tools, code, a table and an artifact', async () => {
+        const user = userEvent.setup();
+        render(AgentChat, { props: { ...base, client: fakeClient(), variant: 'panel' } });
+        await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
+        await screen.findByRole('button', { name: /Open Memo|Memo/ });
+        // The artifact opened in a sheet; close it to check the transcript itself.
+        await user.keyboard('{Escape}');
+        expect(await violations()).toEqual([]);
+    });
+    it('has no violations in the conversation rail', async () => {
+        const now = new Date().toISOString();
+        render(ConversationSidebar, {
+            props: {
+                conversations: [
+                    {
+                        conversationId: 'c1',
+                        agent: 'classic-agent',
+                        title: 'Lot 12',
+                        createdAt: now,
+                        updatedAt: now,
+                    },
+                    {
+                        conversationId: 'c2',
+                        agent: 'classic-agent',
+                        title: 'Running',
+                        createdAt: now,
+                        updatedAt: now,
+                        activeRequestId: '11111111-1111-4111-8111-111111111111',
+                    },
+                ],
+                selectedId: 'c1',
+                onrename: vi.fn(),
+                ondelete: vi.fn(),
+            },
+        });
+        expect(await violations()).toEqual([]);
+    });
+});
+/** Answers "ok" with no artifact (an artifact opens a modal sheet, which takes focus). */
+function plainAnswers(client) {
+    client.streamChat.mockImplementation(async (req, opts) => {
+        [
+            { type: 'start', conversationId: 'c-1', mode: 'live' },
+            { type: 'delta', text: 'ok' },
+            { type: 'done', finishReason: 'stop' },
+        ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
+        return { kind: 'done' };
+    });
+}
+describe('focus', () => {
+    it('starts a new chat in the composer and returns there after a suggestion', async () => {
+        const user = userEvent.setup();
+        const client = fakeClient();
+        plainAnswers(client);
+        render(AgentChat, {
+            props: { ...base, client: client, suggestions: [{ label: 'Open lots' }] },
+        });
+        const box = screen.getByRole('textbox', { name: 'Message' });
+        await waitFor(() => expect(document.activeElement).toBe(box));
+        await user.click(screen.getByRole('button', { name: 'Open lots' }));
+        await waitFor(() => expect(document.activeElement).toBe(box));
+    });
+    it('returns to the Edit button when an edit is cancelled', async () => {
+        const user = userEvent.setup();
+        const client = fakeClient();
+        plainAnswers(client);
+        render(AgentChat, { props: { ...base, client: client } });
+        await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
+        await user.click(await screen.findByRole('button', { name: 'Edit message' }));
+        await user.keyboard('{Escape}');
+        await waitFor(() => expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Edit message' })));
+    });
+    it('does not steal focus when opening an existing conversation', () => {
+        const client = fakeClient();
+        client.getConversation.mockReturnValue(new Promise(() => { }));
+        render(AgentChat, { props: { ...base, client: client, conversationId: 'c-9' } });
+        expect(document.activeElement).toBe(document.body);
+    });
+});

package/dist/components/agent-picker.svelte.test.d.ts

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

package/dist/components/agent-picker.svelte.test.d.ts.map

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

package/dist/components/agent-picker.svelte.test.js

@@ -0,0 +1,84 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { ChatSession } from '../session.svelte.js';
+import AgentChat from './AgentChat.svelte';
+afterEach(() => cleanup());
+const agents = [
+    { key: 'classic-agent', name: 'Classic Agent' },
+    { key: 'elevation-studio', name: 'Elevation Studio' },
+];
+function fakeClient() {
+    return {
+        fileUrl: (id) => `#${id}`,
+        uploadFile: vi.fn(),
+        cancel: vi.fn(),
+        resumeTurn: vi.fn(),
+        sendFeedback: vi.fn(),
+        getConversation: vi.fn().mockResolvedValue({
+            conversation: { conversationId: 'c-9', agent: 'elevation-studio' },
+            messages: [],
+            files: [],
+        }),
+        streamChat: vi.fn(async (req, opts) => {
+            [
+                { type: 'start', conversationId: 'c-1', mode: 'live' },
+                { type: 'delta', text: 'Hello' },
+                { type: 'done', finishReason: 'stop' },
+            ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
+            return { kind: 'done' };
+        }),
+    };
+}
+const base = { sandboxOrigin: 'https://frame.test' };
+describe('ChatSession agent', () => {
+    it('sends the chosen agent and adopts a loaded conversation’s agent', async () => {
+        const client = fakeClient();
+        const session = new ChatSession({ client: client });
+        expect(session.agent).toBe('classic-agent');
+        session.agent = 'elevation-studio';
+        await session.send('hi');
+        expect(client.streamChat.mock.calls[0][0]).toMatchObject({ agent: 'elevation-studio' });
+        const other = new ChatSession({ client: client, conversationId: 'c-9' });
+        await other.load('c-9');
+        expect(other.agent).toBe('elevation-studio');
+    });
+});
+describe('AgentChat agent picker', () => {
+    it('offers a picker for a new conversation only, and hides it after the first message', async () => {
+        const user = userEvent.setup();
+        const client = fakeClient();
+        const onagentchange = vi.fn();
+        render(AgentChat, {
+            props: { ...base, client: client, agents, onagentchange },
+        });
+        expect(onagentchange).toHaveBeenLastCalledWith('classic-agent');
+        const picker = screen.getByRole('button', { name: 'Agent' });
+        await user.click(picker);
+        await user.click(await screen.findByRole('option', { name: 'Elevation Studio' }));
+        await waitFor(() => expect(onagentchange).toHaveBeenLastCalledWith('elevation-studio'));
+        await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
+        await screen.findAllByText('Hello');
+        expect(client.streamChat.mock.calls[0][0]).toMatchObject({ agent: 'elevation-studio' });
+        expect(screen.queryByRole('button', { name: 'Agent' })).toBeNull();
+    });
+    it('has no picker with a single agent or on an existing conversation', async () => {
+        const { unmount } = render(AgentChat, {
+            props: { ...base, client: fakeClient(), agents: agents.slice(0, 1) },
+        });
+        expect(screen.queryByRole('button', { name: 'Agent' })).toBeNull();
+        unmount();
+        const onagentchange = vi.fn();
+        render(AgentChat, {
+            props: {
+                ...base,
+                client: fakeClient(),
+                agents,
+                conversationId: 'c-9',
+                onagentchange,
+            },
+        });
+        expect(screen.queryByRole('button', { name: 'Agent' })).toBeNull();
+        await waitFor(() => expect(onagentchange).toHaveBeenLastCalledWith('elevation-studio'));
+    });
+});

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

@@ -59,7 +59,7 @@ 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' });
+        const box = screen.getByRole('textbox', { name: 'Message' });
         await user.type(box, '/lot');
         const listbox = await screen.findByRole('listbox', { name: 'Saved prompts' });
         expect(listbox.textContent).toContain('Lot report');
@@ -70,7 +70,7 @@ describe('Composer', () => {
     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' });
+        const box = screen.getByRole('textbox', { name: 'Message' });
         await user.type(box, '/');
         await screen.findByRole('listbox');
         await user.keyboard('{ArrowDown}{Escape}');

package/dist/session.svelte.d.ts

@@ -35,6 +35,8 @@ export declare class ChatSession {
     /** The conversation whose transcript `messages` holds (loaded or started here); null before. */
     loadedConversationId: string | null;
     mode: "mock" | "live" | undefined;
+    /** Who answers. Set before the first message; a loaded conversation keeps its own agent. */
+    agent: string;
     loadError: string | undefined;
     pendingFiles: {
         fileId: string;

package/dist/session.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"session.svelte.d.ts","sourceRoot":"","sources":["../src/lib/session.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"session.svelte.d.ts","sourceRoot":"","sources":["../src/lib/session.svelte.ts"],"names":[],"mappings":"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"}

package/dist/session.svelte.js

@@ -11,6 +11,8 @@ export class ChatSession {
     /** The conversation whose transcript `messages` holds (loaded or started here); null before. */
     loadedConversationId = $state(null);
     mode = $state(undefined);
+    /** Who answers. Set before the first message; a loaded conversation keeps its own agent. */
+    agent = $state('classic-agent');
     loadError = $state(undefined);
     pendingFiles = $state([]);
     controller;
@@ -19,6 +21,7 @@ export class ChatSession {
         this.options = options;
         this.conversationId = options.conversationId ?? null;
         this.mode = options.mode;
+        this.agent = options.agent ?? 'classic-agent';
     }
     get streaming() {
         return this.status === 'streaming';
@@ -51,6 +54,7 @@ export class ChatSession {
                         ? { feedback: detail.feedback[m.id.replace(/^a-/, '')] }
                         : {}),
                 });
+            this.agent = detail.conversation.agent;
             const active = detail.conversation.activeRequestId;
             this.status = 'idle';
             if (active)
@@ -75,7 +79,7 @@ export class ChatSession {
         this.pendingFiles = [];
         const request = {
             requestId,
-            agent: this.options.agent ?? 'classic-agent',
+            agent: this.agent,
             message,
             ...(this.conversationId ? { conversationId: this.conversationId } : {}),
             ...(context ? { context } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/agent-chat",
-  "version": "0.7.0",
+  "version": "0.9.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.7.0",
-    "@classic-homes/agent-contracts": "0.7.0",
+    "@classic-homes/agent-client": "0.9.0",
+    "@classic-homes/agent-contracts": "0.9.0",
     "dompurify": "3.4.17"
   },
   "peerDependencies": {
@@ -31,6 +31,7 @@
     "@sveltejs/vite-plugin-svelte": "7.3.1",
     "@testing-library/svelte": "5.4.2",
     "@testing-library/user-event": "14.6.1",
+    "axe-core": "4.13.0",
     "jsdom": "30.1.3",
     "svelte": "5.57.3",
     "svelte-check": "4.7.7",