@classic-homes/agent-chat 0.8.0 → 0.10.0

package/README.md

@@ -43,6 +43,8 @@ agent-api origin that serves `/frame`; artifacts and MCP-UI resources only ever
 `AgentChat` composes the rest; each is also exported for other layouts:
 
 - `ChatHeader`, `ConversationSidebar`: title and conversation actions; the history rail.
+  `ChatHeader`'s menu opens `ShortcutsDialog` (the chat's `CHAT_SHORTCUTS` plus the host's
+  `shortcuts`, e.g. a panel toggle). Hosts implement their own app-level shortcuts.
 - `MessageList`: transcript with day separators and a jump-to-latest button.
 - `MessageItem` → `UserMessage` / `AssistantMessage`, with `MessageActions` (copy, time,
   `MessageFeedback` thumbs up/down with an optional note, Regenerate and Edit on the latest turn),

package/dist/components/AgentChat.svelte

@@ -18,6 +18,7 @@
     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';
@@ -197,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);
   }
@@ -249,7 +261,7 @@
       {suggestions}
       compact={variant === 'panel'}
       disabled={session.status !== 'idle'}
-      onselect={(text) => void send(text)}
+      onselect={(text) => thenFocus(send(text))}
     />
   {/if}
 {/snippet}
@@ -290,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

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,YAAY,EACZ,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAalE,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;AAsOH,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/ChatHeader.svelte

@@ -1,8 +1,9 @@
 <!--
   @component
   Header for a chat: conversation title, agent badge and the conversation menu (rename,
-  open full page, delete). Pass it to `AgentChat` through the `header` snippet. Actions only
-  show when their handler is set; rename and delete also need a `conversationId`.
+  open full page, delete, keyboard shortcuts). Pass it to `AgentChat` through the `header`
+  snippet. Actions only show when their handler is set; rename and delete also need a
+  `conversationId`. "Keyboard shortcuts" always shows and lists the host's `shortcuts` first.
 -->
 <script lang="ts">
   import {
@@ -14,7 +15,9 @@
     type DropdownMenuItem,
   } from '@classic-homes/theme-svelte';
   import type { Snippet } from 'svelte';
+  import type { ChatShortcut } from '../shortcuts.js';
   import ConversationDialogs, { type ConversationRef } from './ConversationDialogs.svelte';
+  import ShortcutsDialog from './ShortcutsDialog.svelte';
 
   interface Props {
     title?: string;
@@ -29,6 +32,8 @@
     onrename?: (conversationId: string, title: string) => void | Promise<void>;
     ondelete?: (conversationId: string) => void | Promise<void>;
     onerror?: (message: string) => void;
+    /** Host shortcuts for the "Keyboard shortcuts" dialog, e.g. opening the panel. */
+    shortcuts?: ChatShortcut[];
     /** Extra controls before the menu. */
     actions?: Snippet;
     class?: string;
@@ -43,12 +48,14 @@
     onrename,
     ondelete,
     onerror,
+    shortcuts,
     actions,
     class: className,
   }: Props = $props();
 
   let renaming = $state<ConversationRef | null>(null);
   let deleting = $state<ConversationRef | null>(null);
+  let showingShortcuts = $state(false);
   let headerEl = $state<HTMLElement | null>(null);
   let returnFocus = $state<HTMLElement | null>(null);
   /** Remember the menu trigger before a dialog takes focus from the closing menu. */
@@ -77,6 +84,12 @@
         onSelect: () => open(() => (deleting = current)),
       });
     }
+    if (list.length) list.push({ type: 'separator' });
+    list.push({
+      label: 'Keyboard shortcuts',
+      icon: 'keyboard',
+      onSelect: () => open(() => (showingShortcuts = true)),
+    });
     return list;
   });
 </script>
@@ -104,19 +117,18 @@
       ><Icon name="plus" size={18} /></Button
     >
   {/if}
-  {#if items.length}
-    <DropdownMenu
-      {items}
-      align="end"
-      triggerVariant="ghost"
-      triggerSize="icon"
-      triggerClass="size-8"
-      triggerLabel="Conversation options"
-      showChevron={false}
-    >
-      {#snippet trigger()}<Icon name="more-horizontal" size={18} />{/snippet}
-    </DropdownMenu>
-  {/if}
+  <DropdownMenu
+    {items}
+    align="end"
+    triggerVariant="ghost"
+    triggerSize="icon"
+    triggerClass="size-8"
+    triggerLabel="Conversation options"
+    showChevron={false}
+  >
+    {#snippet trigger()}<Icon name="more-horizontal" size={18} />{/snippet}
+  </DropdownMenu>
 </header>
 
 <ConversationDialogs bind:renaming bind:deleting {onrename} {ondelete} {onerror} {returnFocus} />
+<ShortcutsDialog bind:open={showingShortcuts} {shortcuts} {returnFocus} />

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ChatShortcut } from '../shortcuts.js';
 interface Props {
     title?: string;
     conversationId?: string | null;
@@ -12,14 +13,17 @@ interface Props {
     onrename?: (conversationId: string, title: string) => void | Promise<void>;
     ondelete?: (conversationId: string) => void | Promise<void>;
     onerror?: (message: string) => void;
+    /** Host shortcuts for the "Keyboard shortcuts" dialog, e.g. opening the panel. */
+    shortcuts?: ChatShortcut[];
     /** Extra controls before the menu. */
     actions?: Snippet;
     class?: string;
 }
 /**
  * Header for a chat: conversation title, agent badge and the conversation menu (rename,
- * open full page, delete). Pass it to `AgentChat` through the `header` snippet. Actions only
- * show when their handler is set; rename and delete also need a `conversationId`.
+ * open full page, delete, keyboard shortcuts). Pass it to `AgentChat` through the `header`
+ * snippet. Actions only show when their handler is set; rename and delete also need a
+ * `conversationId`. "Keyboard shortcuts" always shows and lists the host's `shortcuts` first.
  */
 declare const ChatHeader: import("svelte").Component<Props, {}, "">;
 type ChatHeader = ReturnType<typeof ChatHeader>;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ChatHeader.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8EH;;;;GAIG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ChatHeader.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKlD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,kFAAkF;IAClF,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuFH;;;;;GAKG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Composer.svelte

@@ -251,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}
@@ -338,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/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/ShortcutsDialog.svelte

@@ -0,0 +1,56 @@
+<!--
+  @component
+  Lists the chat's keyboard shortcuts (`CHAT_SHORTCUTS`) and the host's own (`shortcuts`, shown
+  first). Opened from the `ChatHeader` menu; focus returns to `returnFocus` on close.
+-->
+<script lang="ts">
+  import { Dialog, Kbd } from '@classic-homes/theme-svelte';
+  import { releaseStuckBodyLock } from '../body-lock.js';
+  import { CHAT_SHORTCUTS, type ChatShortcut } from '../shortcuts.js';
+
+  interface Props {
+    open?: boolean;
+    /** Host shortcuts, e.g. opening the agent panel or starting a new chat. */
+    shortcuts?: ChatShortcut[];
+    returnFocus?: HTMLElement | null;
+  }
+  let { open = $bindable(false), shortcuts = [], returnFocus = null }: Props = $props();
+
+  const groups = $derived(
+    [
+      { title: 'App', items: shortcuts },
+      { title: 'Chat', items: [...CHAT_SHORTCUTS] },
+    ].filter((g) => g.items.length),
+  );
+</script>
+
+<Dialog
+  bind:open
+  title="Keyboard shortcuts"
+  size="sm"
+  onCloseAutoFocus={(event: Event) => {
+    if (returnFocus?.isConnected) {
+      event.preventDefault();
+      returnFocus.focus();
+    }
+    releaseStuckBodyLock();
+  }}
+>
+  <div class="grid gap-4">
+    {#each groups as group (group.title)}
+      <section>
+        <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+          {group.title}
+        </h3>
+        <dl class="divide-y divide-border text-sm">
+          {#each group.items as s (s.label)}
+            <div class="flex items-center justify-between gap-4 py-1.5">
+              <dt>{s.label}</dt>
+              <dd class="shrink-0"><Kbd keys={s.keys} size="sm" /></dd>
+            </div>
+          {/each}
+        </dl>
+      </section>
+    {/each}
+  </div>
+</Dialog>

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

@@ -0,0 +1,15 @@
+import { type ChatShortcut } from '../shortcuts.js';
+interface Props {
+    open?: boolean;
+    /** Host shortcuts, e.g. opening the agent panel or starting a new chat. */
+    shortcuts?: ChatShortcut[];
+    returnFocus?: HTMLElement | null;
+}
+/**
+ * Lists the chat's keyboard shortcuts (`CHAT_SHORTCUTS`) and the host's own (`shortcuts`, shown
+ * first). Opened from the `ChatHeader` menu; focus returns to `returnFocus` on close.
+ */
+declare const ShortcutsDialog: import("svelte").Component<Props, {}, "open">;
+type ShortcutsDialog = ReturnType<typeof ShortcutsDialog>;
+export default ShortcutsDialog;
+//# sourceMappingURL=ShortcutsDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ShortcutsDialog.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGlE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2EAA2E;IAC3E,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC;AA6CH;;;GAGG;AACH,QAAA,MAAM,eAAe,+CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,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,183 @@
+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 ChatHeader from './ChatHeader.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 keyboard shortcuts dialog', async () => {
+        const user = userEvent.setup();
+        render(ChatHeader, {
+            props: { title: 'x', shortcuts: [{ keys: ['Mod', 'J'], label: 'Open the agent panel' }] },
+        });
+        await user.click(screen.getByRole('button', { name: 'Conversation options' }));
+        await user.click(await screen.findByRole('menuitem', { name: /Keyboard shortcuts/ }));
+        await screen.findByRole('dialog', { name: 'Keyboard shortcuts' });
+        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/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/components/conversation-chrome.svelte.test.js

@@ -94,11 +94,31 @@ describe('ConversationSidebar', () => {
     });
 });
 describe('ChatHeader', () => {
-    it('shows the title, falls back to "New chat" and hides actions without handlers', () => {
+    it('shows the title, falls back to "New chat" and hides actions without handlers', async () => {
+        const user = userEvent.setup();
         render(ChatHeader, { props: { title: '  ' } });
         expect(screen.getByRole('heading', { name: 'New chat' })).toBeTruthy();
-        expect(screen.queryByRole('button', { name: 'Conversation options' })).toBeNull();
         expect(screen.queryByRole('button', { name: 'Show conversations' })).toBeNull();
+        // Only the shortcuts entry is left in the menu.
+        await user.click(screen.getByRole('button', { name: 'Conversation options' }));
+        const items = await screen.findAllByRole('menuitem');
+        expect(items.map((i) => i.textContent?.trim())).toEqual(['Keyboard shortcuts']);
+    });
+    it('lists host and chat shortcuts, then returns focus to the menu button', async () => {
+        const user = userEvent.setup();
+        render(ChatHeader, {
+            props: { title: 'x', shortcuts: [{ keys: ['Mod', 'Shift', 'O'], label: 'New chat' }] },
+        });
+        const trigger = screen.getByRole('button', { name: 'Conversation options' });
+        await user.click(trigger);
+        await user.click(await screen.findByRole('menuitem', { name: /Keyboard shortcuts/ }));
+        const dialog = await screen.findByRole('dialog', { name: 'Keyboard shortcuts' });
+        expect(dialog.textContent).toContain('New chat');
+        expect(dialog.textContent).toContain('Stop the reply');
+        expect(dialog.textContent).toContain('Insert a saved prompt');
+        await user.keyboard('{Escape}');
+        await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+        await waitFor(() => expect(document.activeElement).toBe(trigger));
     });
     const handlers = () => ({ title: 'Lot 12 budget', onrename: vi.fn(), ondelete: vi.fn() });
     it('offers no rename or delete before the conversation is saved', async () => {

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './markdown.js';
 export * from './message-format.js';
 export * from './reducer.js';
 export * from './session.svelte.js';
+export * from './shortcuts.js';
 export * from './ui-frame-protocol.js';
 export * from './welcome.js';
 export { default as AgentChat } from './components/AgentChat.svelte';
@@ -24,4 +25,5 @@ export { default as ArtifactChip } from './components/ArtifactChip.svelte';
 export { default as MessageFiles } from './components/MessageFiles.svelte';
 export { default as ProposalCard } from './components/ProposalCard.svelte';
 export { default as Welcome } from './components/Welcome.svelte';
+export { default as ShortcutsDialog } from './components/ShortcutsDialog.svelte';
 //# sourceMappingURL=index.d.ts.map

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,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,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;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,6BAA6B,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,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,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;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/index.js

@@ -5,6 +5,7 @@ export * from './markdown.js';
 export * from './message-format.js';
 export * from './reducer.js';
 export * from './session.svelte.js';
+export * from './shortcuts.js';
 export * from './ui-frame-protocol.js';
 export * from './welcome.js';
 export { default as AgentChat } from './components/AgentChat.svelte';
@@ -24,3 +25,4 @@ export { default as ArtifactChip } from './components/ArtifactChip.svelte';
 export { default as MessageFiles } from './components/MessageFiles.svelte';
 export { default as ProposalCard } from './components/ProposalCard.svelte';
 export { default as Welcome } from './components/Welcome.svelte';
+export { default as ShortcutsDialog } from './components/ShortcutsDialog.svelte';

package/dist/shortcuts.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keyboard shortcuts listed in the chat's "Keyboard shortcuts" dialog. `keys` use the theme
+ * `Kbd` names ("Mod" shows as ⌘ on Apple devices and Ctrl elsewhere).
+ */
+export interface ChatShortcut {
+    keys: string[];
+    label: string;
+}
+/** What the chat itself handles, in the composer. Hosts add their own (e.g. a panel toggle). */
+export declare const CHAT_SHORTCUTS: readonly ChatShortcut[];
+//# sourceMappingURL=shortcuts.d.ts.map

package/dist/shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcuts.d.ts","sourceRoot":"","sources":["../src/lib/shortcuts.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,gGAAgG;AAChG,eAAO,MAAM,cAAc,EAAE,SAAS,YAAY,EAMjD,CAAC"}

package/dist/shortcuts.js

@@ -0,0 +1,8 @@
+/** What the chat itself handles, in the composer. Hosts add their own (e.g. a panel toggle). */
+export const CHAT_SHORTCUTS = [
+    { keys: ['Enter'], label: 'Send the message' },
+    { keys: ['Shift', 'Enter'], label: 'New line' },
+    { keys: ['Esc'], label: 'Stop the reply' },
+    { keys: ['/'], label: 'Insert a saved prompt' },
+    { keys: ['Esc'], label: 'Cancel editing a message' },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/agent-chat",
-  "version": "0.8.0",
+  "version": "0.10.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.8.0",
-    "@classic-homes/agent-contracts": "0.8.0",
+    "@classic-homes/agent-client": "0.10.0",
+    "@classic-homes/agent-contracts": "0.10.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",