@classic-homes/agent-chat 0.1.2 → 0.2.0

package/dist/components/MessageList.svelte

@@ -63,42 +63,31 @@
 </script>
 
 <div class="sr-only" aria-live="polite" aria-atomic="true">{announcement}</div>
-<div class="agent-messages" bind:this={container} {onscroll} role="log" aria-label="Conversation">
+<div
+  class="flex min-h-0 flex-1 flex-col overflow-y-auto py-2"
+  bind:this={container}
+  {onscroll}
+  role="log"
+  aria-label="Conversation"
+>
   {#if messages.length === 0}
     {#if empty}{@render empty()}{/if}
   {:else}
-    {#each messages as message, i (message.id)}
-      <MessageItem
-        {message}
-        streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
-        {sandboxOrigin}
-        {fileUrl}
-        {onnavigate}
-        {onopenartifact}
-        {onprompt}
-        {ontool}
-        {onnotify}
-        onretry={i === messages.length - 1 ? onretry : undefined}
-      />
-    {/each}
+    <div class="mx-auto flex w-full max-w-3xl flex-col">
+      {#each messages as message, i (message.id)}
+        <MessageItem
+          {message}
+          streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
+          {sandboxOrigin}
+          {fileUrl}
+          {onnavigate}
+          {onopenartifact}
+          {onprompt}
+          {ontool}
+          {onnotify}
+          onretry={i === messages.length - 1 ? onretry : undefined}
+        />
+      {/each}
+    </div>
   {/if}
 </div>
-
-<style>
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-  }
-  .agent-messages {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    padding: 0.5rem 0;
-    display: flex;
-    flex-direction: column;
-  }
-</style>

package/dist/components/ModeBanner.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
+  import { Icon } from '@classic-homes/theme-svelte';
   import type { BackendMode } from '@classic-homes/agent-contracts';
   /** Mock must always be visible (AGENTS.md). Rendered whenever the stream reports `mock`. */
   let { mode }: { mode: BackendMode | undefined } = $props();
 </script>
 
 {#if mode === 'mock'}
-  <div class="agent-mode-banner" role="status" data-testid="mode-banner">
+  <div
+    class="flex items-center gap-2 border-b border-border bg-warning px-3 py-1.5 text-xs font-semibold tracking-wide text-warning-foreground"
+    role="status"
+    data-testid="mode-banner"
+  >
+    <Icon name="alert-triangle" size={14} />
     MOCK BACKEND — simulated responses; no AI model or company system is contacted.
   </div>
 {/if}
-
-<style>
-  .agent-mode-banner {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    color: hsl(var(--warning-foreground, 0 0% 10%));
-    background: hsl(var(--warning, 45 93% 58%));
-    border-bottom: 1px solid hsl(var(--border));
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"ModeBanner.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ModeBanner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAEjE,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,CAAC;AAiB5D,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ModeBanner.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ModeBanner.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAEjE,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,CAAC;AAiB5D,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/SandboxFrame.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { createFrameRelay, type FrameRelay } from '../ui-frame-relay.js';
+  import type { FrameAction } from '../ui-frame-protocol.js';
+
+  interface Props {
+    sandboxOrigin: string;
+    html: string;
+    uri: string;
+    title: string;
+    style?: string;
+    onaction?: (action: FrameAction) => void;
+  }
+  let { sandboxOrigin, html, uri, title, style = '', onaction }: Props = $props();
+  let frame: HTMLIFrameElement | null = $state(null);
+  let relay: FrameRelay | undefined = $state();
+
+  onMount(() => {
+    relay = createFrameRelay({
+      frame: () => frame,
+      origin: () => sandboxOrigin,
+      payload: () => ({ html, uri }),
+      onaction: (action) => onaction?.(action),
+    });
+    return () => relay?.destroy();
+  });
+  $effect(() => {
+    void html;
+    void uri;
+    relay?.send();
+  });
+</script>
+
+<iframe
+  bind:this={frame}
+  {title}
+  src={`${sandboxOrigin}/frame`}
+  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms"
+  referrerpolicy="no-referrer"
+  allow=""
+  style={`display:block;width:100%;border:0;${style}`}
+  onload={() => relay?.send()}
+></iframe>

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

@@ -0,0 +1,13 @@
+import type { FrameAction } from '../ui-frame-protocol.js';
+interface Props {
+    sandboxOrigin: string;
+    html: string;
+    uri: string;
+    title: string;
+    style?: string;
+    onaction?: (action: FrameAction) => void;
+}
+declare const SandboxFrame: import("svelte").Component<Props, {}, "">;
+type SandboxFrame = ReturnType<typeof SandboxFrame>;
+export default SandboxFrame;
+//# sourceMappingURL=SandboxFrame.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SandboxFrame.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SandboxFrame.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGzD,UAAU,KAAK;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AA8BH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ToolTimeline.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Icon } from '@classic-homes/theme-svelte';
+  import { cn, Icon } from '@classic-homes/theme-svelte';
   import type { DelegationState, ToolCallState } from '../reducer.js';
 
   let {
@@ -23,91 +23,40 @@
 </script>
 
 {#if tools.length > 0 || delegations.length > 0}
-  <div class="agent-timeline">
+  <div class="mb-2 mt-1 text-xs text-muted-foreground">
     <button
       type="button"
-      class="agent-timeline__toggle"
+      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="agent-timeline__dot" aria-hidden="true"
+      {#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="agent-timeline__list">
+      <ol class="mt-1.5 grid gap-1 pl-4">
         {#each tools as tool (tool.callId)}
-          <li
-            class="agent-timeline__item"
-            class:agent-timeline__item--error={tool.status === 'error' || tool.status === 'refused'}
-          >
-            <span class="agent-timeline__name"
-              >{tool.server ? `${tool.server}/` : ''}{tool.name}</span
-            >
-            <span class="agent-timeline__agent">{tool.agent}</span>
-            <span class="agent-timeline__status"
+          <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="agent-timeline__summary">{tool.summary}</div>{/if}
+            {#if tool.summary}<div class="col-span-full whitespace-pre-wrap opacity-80">
+                {tool.summary}
+              </div>{/if}
           </li>
         {/each}
       </ol>
     {/if}
   </div>
 {/if}
-
-<style>
-  .agent-timeline {
-    margin: 0.25rem 0 0.5rem;
-    font-size: 0.75rem;
-    color: hsl(var(--muted-foreground));
-  }
-  .agent-timeline__toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    background: none;
-    border: 0;
-    padding: 0.125rem 0;
-    color: inherit;
-    cursor: pointer;
-    font: inherit;
-  }
-  .agent-timeline__dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 9999px;
-    background: hsl(var(--primary));
-    animation: agent-pulse 1.2s ease-in-out infinite;
-  }
-  @keyframes agent-pulse {
-    50% {
-      opacity: 0.3;
-    }
-  }
-  .agent-timeline__list {
-    margin: 0.375rem 0 0;
-    padding-left: 1rem;
-    display: grid;
-    gap: 0.25rem;
-  }
-  .agent-timeline__item {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 0 0.5rem;
-  }
-  .agent-timeline__item--error .agent-timeline__status {
-    color: hsl(var(--destructive));
-  }
-  .agent-timeline__name {
-    font-family: ui-monospace, monospace;
-  }
-  .agent-timeline__summary {
-    grid-column: 1 / -1;
-    white-space: pre-wrap;
-    opacity: 0.8;
-  }
-</style>

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;AAqD1G,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;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"}

package/dist/components/UiFrame.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import SandboxFrame from './SandboxFrame.svelte';
   import type { UiResourceState } from '../reducer.js';
-  import {
-    FRAME_TARGET_ORIGIN,
-    MIN_FRAME_HEIGHT,
-    UI_FRAME_RENDER,
-    composerTextFor,
-    isFromFrame,
-    parseFrameMessage,
-    type FrameAction,
-  } from '../ui-frame-protocol.js';
+  import { MIN_FRAME_HEIGHT, composerTextFor, type FrameAction } from '../ui-frame-protocol.js';
 
   interface Props {
     resource: UiResourceState;
@@ -21,22 +13,11 @@
   }
   let { resource, sandboxOrigin, onprompt, ontool, onnotify }: Props = $props();
 
-  let frame: HTMLIFrameElement | null = $state(null);
   let height = $state(MIN_FRAME_HEIGHT);
   const initialHeight = $derived(resource.preferredFrameSize?.[1] ?? `${MIN_FRAME_HEIGHT}px`);
 
-  function send(): void {
-    frame?.contentWindow?.postMessage(
-      { type: UI_FRAME_RENDER, html: resource.html, uri: resource.uri },
-      FRAME_TARGET_ORIGIN,
-    );
-  }
-
   function handle(action: FrameAction): void {
     switch (action.type) {
-      case 'ready':
-        send();
-        break;
       case 'size':
         height = action.height;
         break;
@@ -55,42 +36,15 @@
         break;
     }
   }
-
-  onMount(() => {
-    const listener = (event: MessageEvent) => {
-      if (!isFromFrame(event, frame, sandboxOrigin)) return;
-      const action = parseFrameMessage(event.data);
-      if (action) handle(action);
-    };
-    window.addEventListener('message', listener);
-    return () => window.removeEventListener('message', listener);
-  });
 </script>
 
-<div class="agent-ui-frame">
-  <iframe
-    bind:this={frame}
+<div class="my-2 overflow-hidden rounded-lg border border-border bg-card">
+  <SandboxFrame
+    {sandboxOrigin}
+    html={resource.html}
+    uri={resource.uri}
     title={resource.uri}
-    src={`${sandboxOrigin}/frame`}
-    sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms"
-    referrerpolicy="no-referrer"
-    allow=""
     style={`height:${height > MIN_FRAME_HEIGHT ? `${height}px` : initialHeight}`}
-    onload={send}
-  ></iframe>
+    onaction={handle}
+  />
 </div>
-
-<style>
-  .agent-ui-frame {
-    margin: 0.5rem 0;
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background: hsl(var(--card));
-  }
-  iframe {
-    display: block;
-    width: 100%;
-    border: 0;
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"UiFrame.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UiFrame.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAYnD,UAAU,KAAK;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,gGAAgG;IAChG,aAAa,EAAE,MAAM,CAAC;IACtB,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;CACtC;AA8DH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"UiFrame.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UiFrame.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAInD,UAAU,KAAK;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,gGAAgG;IAChG,aAAa,EAAE,MAAM,CAAC;IACtB,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;CACtC;AAuCH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/conversation-chrome.svelte.test.d.ts

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

package/dist/components/conversation-chrome.svelte.test.d.ts.map

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

package/dist/components/conversation-chrome.svelte.test.js

@@ -0,0 +1,127 @@
+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 ChatHeader from './ChatHeader.svelte';
+import ConversationSidebar from './ConversationSidebar.svelte';
+afterEach(() => {
+    cleanup();
+    // bits-ui locks body pointer events while a menu is open; an unmount mid-open leaves it set.
+    document.body.style.pointerEvents = '';
+    vi.useRealTimers();
+});
+function summary(id, title, extra = {}) {
+    return {
+        conversationId: id,
+        title,
+        agent: 'classic-agent',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        ...extra,
+    };
+}
+const conversations = [summary('c1', 'Lot 12 budget'), summary('c2', 'Warranty letters')];
+describe('ConversationSidebar', () => {
+    it('debounces search and passes the trimmed query', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        const onsearch = vi.fn();
+        render(ConversationSidebar, { props: { conversations, onsearch, searchDelay: 200 } });
+        await user.type(screen.getByRole('searchbox', { name: 'Search conversations' }), ' lot ');
+        expect(onsearch).not.toHaveBeenCalled();
+        await vi.advanceTimersByTimeAsync(200);
+        expect(onsearch).toHaveBeenCalledTimes(1);
+        expect(onsearch).toHaveBeenCalledWith('lot');
+    });
+    it('shows skeleton rows while the first page loads, then an empty state', async () => {
+        const { rerender } = render(ConversationSidebar, {
+            props: { conversations: [], loading: true },
+        });
+        expect(screen.getByLabelText('Loading conversations')).toBeTruthy();
+        await rerender({ conversations: [], loading: false });
+        expect(screen.getByText('No conversations yet')).toBeTruthy();
+    });
+    it('marks the selected row and a running conversation', () => {
+        render(ConversationSidebar, {
+            props: {
+                conversations: [summary('c1', 'Lot 12 budget', { activeRequestId: 'r1' })],
+                selectedId: 'c1',
+            },
+        });
+        const row = screen.getByRole('button', { name: /Lot 12 budget/ });
+        expect(row.getAttribute('aria-current')).toBe('page');
+        expect(screen.getByText('Answering')).toBeTruthy();
+    });
+    it('renames from the row menu and keeps the dialog open on failure', async () => {
+        const user = userEvent.setup();
+        const onrename = vi
+            .fn()
+            .mockRejectedValueOnce(new Error('Title is taken'))
+            .mockResolvedValueOnce(undefined);
+        render(ConversationSidebar, { props: { conversations, onrename } });
+        await user.click(screen.getByRole('button', { name: 'Options for Lot 12 budget' }));
+        await user.click(await screen.findByRole('menuitem', { name: /Rename/ }));
+        const field = await screen.findByRole('textbox', { name: 'Conversation title' });
+        await user.clear(field);
+        await user.type(field, 'Lot 12 final');
+        await user.click(screen.getByRole('button', { name: 'Save' }));
+        expect(onrename).toHaveBeenCalledWith('c1', 'Lot 12 final');
+        expect((await screen.findByRole('alert')).textContent).toContain('Title is taken');
+        await user.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(screen.queryByRole('textbox', { name: 'Conversation title' })).toBeNull());
+        expect(onrename).toHaveBeenCalledTimes(2);
+    });
+    it('returns focus to the row menu after renaming', async () => {
+        const user = userEvent.setup();
+        render(ConversationSidebar, { props: { conversations, onrename: vi.fn() } });
+        const trigger = screen.getByRole('button', { name: 'Options for Lot 12 budget' });
+        await user.click(trigger);
+        await user.click(await screen.findByRole('menuitem', { name: /Rename/ }));
+        await user.click(await screen.findByRole('button', { name: 'Cancel' }));
+        await waitFor(() => expect(document.activeElement).toBe(trigger));
+    });
+    it('deletes only after confirming and reports a failure', async () => {
+        const user = userEvent.setup();
+        const ondelete = vi.fn().mockRejectedValue(new Error('Network down'));
+        const onerror = vi.fn();
+        render(ConversationSidebar, { props: { conversations, ondelete, onerror } });
+        await user.click(screen.getByRole('button', { name: 'Options for Warranty letters' }));
+        await user.click(await screen.findByRole('menuitem', { name: /Delete/ }));
+        expect(ondelete).not.toHaveBeenCalled();
+        expect(await screen.findByText('Delete this conversation?')).toBeTruthy();
+        await user.click(screen.getByRole('button', { name: 'Delete' }));
+        await waitFor(() => expect(onerror).toHaveBeenCalledWith('Network down'));
+        expect(ondelete).toHaveBeenCalledWith('c2');
+    });
+});
+describe('ChatHeader', () => {
+    it('shows the title, falls back to "New chat" and hides actions without handlers', () => {
+        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();
+    });
+    const handlers = () => ({ title: 'Lot 12 budget', onrename: vi.fn(), ondelete: vi.fn() });
+    it('offers no rename or delete before the conversation is saved', async () => {
+        const user = userEvent.setup();
+        render(ChatHeader, { props: { ...handlers(), onexpand: vi.fn() } });
+        await user.click(screen.getByRole('button', { name: 'Conversation options' }));
+        expect(await screen.findByRole('menuitem', { name: /Open full page/ })).toBeTruthy();
+        expect(screen.queryByRole('menuitem', { name: /Rename/ })).toBeNull();
+        expect(screen.queryByRole('menuitem', { name: /Delete/ })).toBeNull();
+    });
+    it('offers rename and delete for a saved conversation', async () => {
+        const user = userEvent.setup();
+        render(ChatHeader, { props: { ...handlers(), conversationId: 'c1' } });
+        await user.click(screen.getByRole('button', { name: 'Conversation options' }));
+        expect(await screen.findByRole('menuitem', { name: /Rename/ })).toBeTruthy();
+        expect(screen.getByRole('menuitem', { name: /Delete/ })).toBeTruthy();
+    });
+    it('opens the conversation rail', async () => {
+        const user = userEvent.setup();
+        const onopenrail = vi.fn();
+        render(ChatHeader, { props: { title: 'x', onopenrail, agentLabel: 'Classic Agent' } });
+        expect(screen.getByText('Classic Agent')).toBeTruthy();
+        await user.click(screen.getByRole('button', { name: 'Show conversations' }));
+        expect(onopenrail).toHaveBeenCalledOnce();
+    });
+});

package/dist/components/markdown-prose.svelte.test.d.ts

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

package/dist/components/markdown-prose.svelte.test.d.ts.map

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

package/dist/components/markdown-prose.svelte.test.js

@@ -0,0 +1,26 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import { parseMarkdown } from '../markdown.js';
+import { errorTitle } from '../reducer.js';
+import Markdown from './Markdown.svelte';
+afterEach(cleanup);
+describe('Markdown', () => {
+    // The Classic App's cascade-layers polyfill outranks plain component CSS, so the prose rules
+    // must be utilities on the container (classic-agent visual check, 2026-11-03).
+    it('styles prose with utility classes, not a stylesheet', () => {
+        const { container } = render(Markdown, {
+            props: { html: parseMarkdown('- one\n- two'), class: 'text-sm' },
+        });
+        const root = container.firstElementChild;
+        expect(root.className).toContain('[&_ul]:list-disc');
+        expect(root.className).toContain('[&_td]:border');
+        expect(root.className).toContain('text-sm');
+        expect(root.querySelectorAll('li')).toHaveLength(2);
+        expect(document.querySelectorAll('style')).toHaveLength(0);
+    });
+});
+describe('errorTitle', () => {
+    it('falls back for a code this client does not know', () => {
+        expect(errorTitle('upstream')).toBe('Something went wrong');
+    });
+});

package/dist/composer-keys.d.ts

@@ -0,0 +1,11 @@
+/** What a keydown in the composer textarea should do. Pure so it can be tested without a DOM. */
+export type ComposerKeyAction = 'send' | 'cancel' | null;
+export interface ComposerKey {
+    key: string;
+    shiftKey?: boolean;
+    isComposing?: boolean;
+    /** 229 is what browsers report for keys consumed by an input method editor. */
+    keyCode?: number;
+}
+export declare function composerKeyAction(event: ComposerKey, streaming: boolean): ComposerKeyAction;
+//# sourceMappingURL=composer-keys.d.ts.map

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

@@ -0,0 +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"}

package/dist/composer-keys.js

@@ -0,0 +1,10 @@
+export function composerKeyAction(event, streaming) {
+    // Enter that confirms an IME candidate (Japanese, Chinese, Korean input) must not send.
+    if (event.isComposing || event.keyCode === 229)
+        return null;
+    if (event.key === 'Escape')
+        return streaming ? 'cancel' : null;
+    if (event.key === 'Enter' && !event.shiftKey)
+        return 'send';
+    return null;
+}

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

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

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

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

package/dist/composer-keys.test.js

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { composerKeyAction } from './composer-keys.js';
+describe('composerKeyAction', () => {
+    it('sends on Enter and keeps Shift+Enter for a newline', () => {
+        expect(composerKeyAction({ key: 'Enter' }, false)).toBe('send');
+        expect(composerKeyAction({ key: 'Enter', shiftKey: true }, false)).toBeNull();
+    });
+    it('ignores Enter that confirms an IME candidate', () => {
+        expect(composerKeyAction({ key: 'Enter', isComposing: true }, false)).toBeNull();
+        expect(composerKeyAction({ key: 'Enter', keyCode: 229 }, false)).toBeNull();
+    });
+    it('stops a running reply on Escape only while streaming', () => {
+        expect(composerKeyAction({ key: 'Escape' }, true)).toBe('cancel');
+        expect(composerKeyAction({ key: 'Escape' }, false)).toBeNull();
+    });
+});

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './composer-keys.js';
 export * from './markdown.js';
 export * from './reducer.js';
 export * from './session.svelte.js';
@@ -11,4 +12,5 @@ export { default as MessageList } from './components/MessageList.svelte';
 export { default as ModeBanner } from './components/ModeBanner.svelte';
 export { default as ToolTimeline } from './components/ToolTimeline.svelte';
 export { default as UiFrame } from './components/UiFrame.svelte';
+export { default as ChatHeader } from './components/ChatHeader.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,eAAe,CAAC;AAC9B,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,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"}

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './composer-keys.js';
 export * from './markdown.js';
 export * from './reducer.js';
 export * from './session.svelte.js';
@@ -11,3 +12,4 @@ export { default as MessageList } from './components/MessageList.svelte';
 export { default as ModeBanner } from './components/ModeBanner.svelte';
 export { default as ToolTimeline } from './components/ToolTimeline.svelte';
 export { default as UiFrame } from './components/UiFrame.svelte';
+export { default as ChatHeader } from './components/ChatHeader.svelte';