@classic-homes/agent-chat 0.1.3 → 0.2.1

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/live-fixes.svelte.test.d.ts

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

package/dist/components/live-fixes.svelte.test.d.ts.map

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

package/dist/components/live-fixes.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 TwoSheets from '../../test-fixtures/TwoSheets.svelte';
+import { releaseStuckBodyLock } from '../body-lock.js';
+import { parseMarkdown } from '../markdown.js';
+import { ChatSession } from '../session.svelte.js';
+import AgentChat from './AgentChat.svelte';
+import ConversationSidebar from './ConversationSidebar.svelte';
+import Markdown from './Markdown.svelte';
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+afterEach(() => {
+    cleanup();
+    document.body.removeAttribute('style');
+});
+/** A client whose streamChat replays `events` (all in one tick) and reports done. */
+function fakeClient(events) {
+    return {
+        fileUrl: (id) => `#${id}`,
+        uploadFile: vi.fn(),
+        cancel: vi.fn(),
+        getConversation: vi.fn(),
+        resumeTurn: vi.fn(),
+        streamChat: vi.fn(async (req, opts) => {
+            events(req.requestId).forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
+            return { kind: 'done' };
+        }),
+    };
+}
+const scope = { agent: 'classic-agent', runId: 'run-1' };
+const turn = (requestId) => [
+    { type: 'start', conversationId: 'c-1', mode: 'live' },
+    { type: 'delta', text: 'Here it is.' },
+    {
+        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' },
+].map((e) => ({ ...e, requestId }));
+describe('body lock guard', () => {
+    it('clears the lock the bits-ui race leaves behind once no modal is open', async () => {
+        // Reproduces the race: A closes and B opens in the same tick, then B closes.
+        const { rerender } = render(TwoSheets, { props: { a: true, b: false } });
+        await wait(100);
+        await rerender({ a: false, b: false });
+        await wait(0);
+        await rerender({ a: false, b: true });
+        await wait(300);
+        await rerender({ a: false, b: false });
+        await wait(600);
+        expect(document.body.style.pointerEvents).toBe('none');
+        releaseStuckBodyLock(0);
+        await wait(10);
+        expect(document.body.style.pointerEvents).toBe('');
+        expect(document.body.style.overflow).toBe('');
+    });
+    it('leaves the lock alone while a modal is open', async () => {
+        render(TwoSheets, { props: { a: true } });
+        await wait(300);
+        releaseStuckBodyLock(0);
+        await wait(10);
+        expect(document.body.style.pointerEvents).toBe('none');
+    });
+});
+describe('ChatSession onTurnEnd', () => {
+    it('reports the finished turn with its conversation and status', async () => {
+        const onTurnEnd = vi.fn();
+        const client = fakeClient(turn);
+        const session = new ChatSession({ client: client, onTurnEnd });
+        await session.send('hi');
+        expect(onTurnEnd).toHaveBeenCalledOnce();
+        expect(onTurnEnd.mock.calls[0][0]).toMatchObject({ conversationId: 'c-1', status: 'done' });
+    });
+});
+describe('AgentChat artifacts', () => {
+    it('opens an artifact that starts and finishes within one tick', async () => {
+        const user = userEvent.setup();
+        const onturnend = vi.fn();
+        render(AgentChat, {
+            props: { client: fakeClient(turn), sandboxOrigin: 'https://frame.test', onturnend },
+        });
+        await user.type(screen.getByRole('textbox', { name: 'Message' }), 'memo{Enter}');
+        // jsdom has no wide viewport, so the artifact opens in the sheet.
+        expect(await screen.findByRole('dialog', { name: 'Memo' })).toBeTruthy();
+        await waitFor(() => expect(onturnend).toHaveBeenCalledOnce());
+    });
+});
+describe('rename dialog', () => {
+    it('starts in the title field with the title selected', async () => {
+        const user = userEvent.setup();
+        const now = new Date().toISOString();
+        render(ConversationSidebar, {
+            props: {
+                conversations: [
+                    {
+                        conversationId: 'c1',
+                        agent: 'classic-agent',
+                        title: 'Lot 12',
+                        createdAt: now,
+                        updatedAt: now,
+                    },
+                ],
+                onrename: vi.fn(),
+            },
+        });
+        await user.click(screen.getByRole('button', { name: 'Options for Lot 12' }));
+        await user.click(await screen.findByRole('menuitem', { name: /Rename/ }));
+        const field = await screen.findByRole('textbox', { name: 'Conversation title' });
+        await waitFor(() => expect(document.activeElement).toBe(field));
+        const input = field;
+        expect([input.selectionStart, input.selectionEnd]).toEqual([0, 'Lot 12'.length]);
+    });
+});
+describe('Markdown tables', () => {
+    it('keep words whole so wide tables scroll instead of breaking numbers', () => {
+        const { container } = render(Markdown, {
+            props: { html: parseMarkdown('| a | b |\n| - | - |\n| $1,075,000 | x |') },
+        });
+        expect(container.firstElementChild.className).toContain('[&_table]:[overflow-wrap:normal]');
+    });
+});

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":""}