@classic-homes/agent-chat 0.1.2 → 0.2.0

package/README.md

@@ -0,0 +1,40 @@
+# @classic-homes/agent-chat
+
+Svelte 5 chat UI for Classic Agent: session state, message list, composer, tool timeline,
+artifacts and MCP-UI sandbox frames. The Classic App's `/agent` page and agent panel use it.
+
+## Requirements
+
+- `svelte` 5 and `@classic-homes/theme-svelte` 1.39 or later (peer dependencies).
+- Tailwind with `@classic-homes/theme-tailwind-preset`. The components are styled with Tailwind
+  utility classes and theme tokens, so the consumer's Tailwind build has to scan this package:
+
+  ```js
+  // tailwind.config.js
+  export default {
+    content: [
+      './src/**/*.{html,js,svelte,ts}',
+      './node_modules/@classic-homes/theme-svelte/**/*.{html,js,svelte,ts}',
+      './node_modules/@classic-homes/agent-chat/**/*.{js,svelte}',
+    ],
+    presets: [require('@classic-homes/theme-tailwind-preset')],
+  };
+  ```
+
+  Without that entry the chat renders unstyled. Markdown prose (rendered from model text) is the
+  one part styled with plain CSS, shipped inside the `Markdown` component.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { AgentChat } from '@classic-homes/agent-chat';
+</script>
+
+<AgentChat {client} sandboxOrigin={AGENT_SANDBOX_ORIGIN} {conversationId} mode={me.mode} />
+```
+
+`client` is an `AgentApiClient` from `@classic-homes/agent-client`. `sandboxOrigin` is the
+agent-api origin that serves `/frame`; artifacts and MCP-UI resources only ever render there.
+
+Publishing: `docs/operations/package-publishing.md`.

package/dist/components/AgentChat.svelte

@@ -7,6 +7,8 @@
     FileRef,
   } from '@classic-homes/agent-contracts';
   import type { BackendMode } from '@classic-homes/agent-contracts';
+  import { cn, ResizablePanes, Sheet } from '@classic-homes/theme-svelte';
+  import { MediaQuery } from 'svelte/reactivity';
   import { ChatSession } from '../session.svelte.js';
   import ArtifactPanel from './ArtifactPanel.svelte';
   import Composer from './Composer.svelte';
@@ -31,6 +33,8 @@
     /** A UI resource asked to run a tool; the host confirms with the user and may send a message. */
     ontoolrequest?: (toolName: string, params?: Record<string, unknown>) => void;
     placeholder?: string;
+    /** Rendered above the transcript, e.g. a `ChatHeader`. */
+    header?: import('svelte').Snippet;
     context?: import('svelte').Snippet;
     empty?: import('svelte').Snippet;
     class?: string;
@@ -50,9 +54,10 @@
     onnotify,
     ontoolrequest,
     placeholder,
+    header,
     context,
     empty,
-    class: className = '',
+    class: className,
   }: Props = $props();
 
   const session = new ChatSession({
@@ -96,15 +101,23 @@
     }
   });
 
+  // The page shows artifacts beside the chat on wide screens; narrow screens and the panel use a
+  // sheet so the transcript keeps its width.
+  const wide = new MediaQuery('(min-width: 1024px)', false);
+  const sidePane = $derived(variant === 'page' && wide.current);
+  const showArtifacts = $derived(artifactsOpen && artifacts.length > 0);
+  const selectedTitle = $derived(
+    artifacts.find((a) => a.artifactId === selectedArtifact)?.title ?? 'Artifact',
+  );
+
   async function send(text: string): Promise<void> {
     const attached = files;
     files = [];
     await session.send(text, { files: attached });
   }
   function retry(): void {
-    const lastUser = [...session.messages].reverse().find((m) => m.role === 'user');
-    if (lastUser && lastUser.role === 'user')
-      void session.send(lastUser.text, { files: lastUser.attachments });
+    const last = session.messages[session.messages.length - 1];
+    if (last?.role === 'assistant') void session.retry(last.requestId);
   }
   function prompt(text: string): void {
     draft = text;
@@ -112,10 +125,11 @@
   }
 </script>
 
-<div class={`agent-chat agent-chat--${variant} ${className}`} data-variant={variant}>
-  <div class="agent-chat__main">
+{#snippet chat()}
+  <div class="flex h-full min-w-0 flex-1 flex-col">
+    {#if header}{@render header()}{/if}
     <ModeBanner mode={session.mode} />
-    {#if session.loadError}<div class="agent-chat__load-error" role="alert">
+    {#if session.loadError}<div class="px-4 py-2 text-sm text-destructive" role="alert">
         {session.loadError}
       </div>{/if}
     <MessageList
@@ -147,42 +161,54 @@
       {context}
     />
   </div>
-  {#if artifactsOpen && artifacts.length}
-    <div class="agent-chat__side">
+{/snippet}
+
+<div
+  class={cn('flex h-full min-h-0 bg-background text-foreground', className)}
+  data-variant={variant}
+>
+  {#if sidePane}
+    <!-- The chat stays mounted while the pane opens and closes (iframes, scroll position): a
+         closed pane hides the end side and the handle and gives the chat the full width. -->
+    <ResizablePanes
+      size={60}
+      min={35}
+      max={75}
+      persistKey="agent-chat:artifacts"
+      handleLabel="Resize artifact pane"
+      class={cn(!showArtifacts && '[&>[role=separator]]:hidden')}
+      startClass={cn('flex', !showArtifacts && '!basis-full')}
+      endClass={cn(!showArtifacts && 'hidden')}
+    >
+      {#snippet start()}{@render chat()}{/snippet}
+      {#snippet end()}
+        {#if showArtifacts}
+          <ArtifactPanel
+            {artifacts}
+            {sandboxOrigin}
+            bind:selectedId={selectedArtifact}
+            onclose={() => (artifactsOpen = false)}
+          />
+        {/if}
+      {/snippet}
+    </ResizablePanes>
+  {:else}
+    {@render chat()}
+    <Sheet
+      open={showArtifacts}
+      onOpenChange={(open) => (artifactsOpen = open)}
+      side="right"
+      size="lg"
+      title={selectedTitle}
+      hideTitle
+    >
       <ArtifactPanel
         {artifacts}
         {sandboxOrigin}
         bind:selectedId={selectedArtifact}
-        onclose={() => (artifactsOpen = false)}
+        class="border-l-0"
+        headerClass="pr-12"
       />
-    </div>
+    </Sheet>
   {/if}
 </div>
-
-<style>
-  .agent-chat {
-    display: flex;
-    height: 100%;
-    min-height: 0;
-    background: hsl(var(--background));
-    color: hsl(var(--foreground));
-  }
-  .agent-chat__main {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-  }
-  .agent-chat__side {
-    width: min(45%, 40rem);
-    min-width: 20rem;
-  }
-  .agent-chat--panel .agent-chat__side {
-    display: none;
-  }
-  .agent-chat__load-error {
-    padding: 0.5rem 1rem;
-    color: hsl(var(--destructive));
-    font-size: 0.875rem;
-  }
-</style>

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

@@ -19,6 +19,8 @@ interface Props {
     /** A UI resource asked to run a tool; the host confirms with the user and may send a message. */
     ontoolrequest?: (toolName: string, params?: Record<string, unknown>) => void;
     placeholder?: string;
+    /** Rendered above the transcript, e.g. a `ChatHeader`. */
+    header?: import('svelte').Snippet;
     context?: import('svelte').Snippet;
     empty?: import('svelte').Snippet;
     class?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAQhE,UAAU,KAAK;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,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,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+GH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAUhE,UAAU,KAAK;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuIH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/ArtifactPanel.svelte

@@ -1,41 +1,58 @@
 <script lang="ts">
-  import { Button, Icon } from '@classic-homes/theme-svelte';
+  import { Button, cn, Icon } from '@classic-homes/theme-svelte';
   import type { Artifact } from '../reducer.js';
   import { parseMarkdown } from '../markdown.js';
-  import { UI_FRAME_RENDER } from '../ui-frame-protocol.js';
+  import Markdown from './Markdown.svelte';
+  import SandboxFrame from './SandboxFrame.svelte';
 
   interface Props {
     artifacts: Artifact[];
     sandboxOrigin: string;
     selectedId?: string | null;
     onclose?: () => void;
+    class?: string;
+    headerClass?: string;
   }
-  let { artifacts, sandboxOrigin, selectedId = $bindable(null), onclose }: Props = $props();
+  let {
+    artifacts,
+    sandboxOrigin,
+    selectedId = $bindable(null),
+    onclose,
+    class: className,
+    headerClass,
+  }: Props = $props();
   const selected = $derived(
     artifacts.find((a) => a.artifactId === selectedId) ?? artifacts[artifacts.length - 1],
   );
-  let frame: HTMLIFrameElement | null = $state(null);
-
-  function sendHtml(): void {
-    if (!selected || !frame?.contentWindow) return;
-    const html =
-      selected.mediaType === 'application/vnd.ant.mermaid'
-        ? mermaidPage(selected.text)
-        : selected.text;
-    frame.contentWindow.postMessage(
-      { type: UI_FRAME_RENDER, html, uri: `artifact://${selected.artifactId}` },
-      sandboxOrigin,
-    );
-  }
+  // Markdown artifacts stream like messages; re-parsing on every token is the dominant cost, so
+  // throttle while the artifact is still open (same budget as MessageItem).
+  const PARSE_THROTTLE_MS = 120;
+  let markdownHtml = $state('');
+  let lastParse = 0;
+  let timer: ReturnType<typeof setTimeout> | null = null;
   $effect(() => {
-    void selected?.text;
-    if (
-      selected &&
-      (selected.mediaType === 'text/html' ||
-        selected.mediaType === 'application/vnd.ant.mermaid' ||
-        selected.mediaType === 'image/svg+xml')
-    )
-      sendHtml();
+    if (selected?.mediaType !== 'text/markdown') return;
+    const text = selected.text;
+    const streaming = selected.open;
+    const now = Date.now();
+    if (!streaming || now - lastParse >= PARSE_THROTTLE_MS) {
+      if (timer) clearTimeout(timer);
+      timer = null;
+      lastParse = now;
+      markdownHtml = parseMarkdown(text);
+    } else if (!timer) {
+      timer = setTimeout(
+        () => {
+          timer = null;
+          lastParse = Date.now();
+          markdownHtml = parseMarkdown(selected?.text ?? '');
+        },
+        PARSE_THROTTLE_MS - (now - lastParse),
+      );
+    }
+  });
+  $effect(() => () => {
+    if (timer) clearTimeout(timer);
   });
 
   function mermaidPage(source: string): string {
@@ -69,93 +86,59 @@
 </script>
 
 {#if selected}
-  <aside class="agent-artifacts" aria-label="Artifacts">
-    <header class="agent-artifacts__header">
-      <select class="agent-artifacts__select" bind:value={selectedId} aria-label="Artifact">
+  <aside
+    class={cn('flex h-full flex-col border-l border-border bg-card', className)}
+    aria-label="Artifacts"
+  >
+    <header class={cn('flex items-center gap-2 border-b border-border px-3 py-2', headerClass)}>
+      <select
+        class="min-w-0 flex-1 truncate rounded-md bg-transparent py-1 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        bind:value={selectedId}
+        aria-label="Artifact"
+      >
         {#each artifacts as a (a.artifactId)}
           <option value={a.artifactId}>{a.title ?? a.artifactId}</option>
         {/each}
       </select>
-      <div class="agent-artifacts__actions">
-        <Button variant="ghost" size="icon" aria-label="Copy" onclick={copy}
+      <div class="flex gap-0.5">
+        <Button variant="ghost" size="icon" class="size-8" aria-label="Copy" onclick={copy}
           ><Icon name="copy" size={16} /></Button
         >
-        <Button variant="ghost" size="icon" aria-label="Download" onclick={download}
+        <Button variant="ghost" size="icon" class="size-8" aria-label="Download" onclick={download}
           ><Icon name="download" size={16} /></Button
         >
-        {#if onclose}<Button variant="ghost" size="icon" aria-label="Close" onclick={onclose}
-            ><Icon name="close" size={16} /></Button
+        {#if onclose}<Button
+            variant="ghost"
+            size="icon"
+            class="size-8"
+            aria-label="Close"
+            onclick={onclose}><Icon name="close" size={16} /></Button
           >{/if}
       </div>
     </header>
-    <div class="agent-artifacts__body">
+    <div class="min-h-0 flex-1 overflow-auto p-3">
       {#if selected.mediaType === 'text/markdown'}
-        <div class="agent-markdown">{@html parseMarkdown(selected.text)}</div>
+        <Markdown html={markdownHtml} />
       {:else if selected.mediaType === 'application/vnd.ant.code'}
-        <pre class="agent-code"><code>{selected.text}</code></pre>
+        <pre class="overflow-auto whitespace-pre font-mono text-[13px] leading-relaxed"><code
+            >{selected.text}</code
+          ></pre>
       {:else}
-        <!-- html, mermaid, svg, react: only ever inside the sandbox origin -->
-        <iframe
-          bind:this={frame}
-          title={selected.title ?? 'Artifact'}
-          src={`${sandboxOrigin}/frame`}
-          sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms"
-          referrerpolicy="no-referrer"
-          onload={sendHtml}
-        ></iframe>
+        <!-- html, mermaid, svg, react: only ever inside the sandbox origin. The sandbox page is
+             transparent and model HTML assumes a white page, so it gets a white surface. -->
+        <div class="h-full min-h-96 overflow-hidden rounded-md border border-border bg-white">
+          <SandboxFrame
+            {sandboxOrigin}
+            html={selected.mediaType === 'application/vnd.ant.mermaid'
+              ? mermaidPage(selected.text)
+              : selected.text}
+            uri={`artifact://${selected.artifactId}`}
+            title={selected.title ?? 'Artifact'}
+            style="height:100%"
+          />
+        </div>
       {/if}
-      {#if selected.open}<div class="agent-artifacts__streaming">Writing…</div>{/if}
+      {#if selected.open}<div class="mt-2 text-xs text-muted-foreground">Writing…</div>{/if}
     </div>
   </aside>
 {/if}
-
-<style>
-  .agent-artifacts {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    border-left: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
-  }
-  .agent-artifacts__header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid hsl(var(--border));
-  }
-  .agent-artifacts__select {
-    flex: 1;
-    min-width: 0;
-    font: inherit;
-    background: transparent;
-    color: inherit;
-    border: 0;
-  }
-  .agent-artifacts__actions {
-    display: flex;
-    gap: 0.125rem;
-  }
-  .agent-artifacts__body {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    padding: 0.75rem;
-  }
-  iframe {
-    width: 100%;
-    height: 100%;
-    min-height: 24rem;
-    border: 0;
-    background: white;
-  }
-  .agent-code {
-    white-space: pre;
-    overflow: auto;
-    font-size: 0.8125rem;
-  }
-  .agent-artifacts__streaming {
-    font-size: 0.75rem;
-    color: hsl(var(--muted-foreground));
-  }
-</style>

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

@@ -4,6 +4,8 @@ interface Props {
     sandboxOrigin: string;
     selectedId?: string | null;
     onclose?: () => void;
+    class?: string;
+    headerClass?: string;
 }
 declare const ArtifactPanel: import("svelte").Component<Props, {}, "selectedId">;
 type ArtifactPanel = ReturnType<typeof ArtifactPanel>;

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

@@ -1 +1 @@
-{"version":3,"file":"ArtifactPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ArtifactPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK5C,UAAU,KAAK;IACb,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiGH,QAAA,MAAM,aAAa,qDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ArtifactPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ArtifactPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5C,UAAU,KAAK;IACb,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkHH,QAAA,MAAM,aAAa,qDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/ChatHeader.svelte

@@ -0,0 +1,122 @@
+<!--
+  @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`.
+-->
+<script lang="ts">
+  import {
+    Badge,
+    Button,
+    cn,
+    DropdownMenu,
+    Icon,
+    type DropdownMenuItem,
+  } from '@classic-homes/theme-svelte';
+  import type { Snippet } from 'svelte';
+  import ConversationDialogs, { type ConversationRef } from './ConversationDialogs.svelte';
+
+  interface Props {
+    title?: string;
+    conversationId?: string | null;
+    /** Agent name shown as a badge, e.g. "Classic Agent". */
+    agentLabel?: string;
+    /** Opens the conversation list; the button only shows below `lg`. */
+    onopenrail?: () => void;
+    onnew?: () => void;
+    /** Opens this conversation as a full page (panel variant). */
+    onexpand?: () => void;
+    onrename?: (conversationId: string, title: string) => void | Promise<void>;
+    ondelete?: (conversationId: string) => void | Promise<void>;
+    onerror?: (message: string) => void;
+    /** Extra controls before the menu. */
+    actions?: Snippet;
+    class?: string;
+  }
+  let {
+    title,
+    conversationId = null,
+    agentLabel,
+    onopenrail,
+    onnew,
+    onexpand,
+    onrename,
+    ondelete,
+    onerror,
+    actions,
+    class: className,
+  }: Props = $props();
+
+  let renaming = $state<ConversationRef | null>(null);
+  let deleting = $state<ConversationRef | null>(null);
+  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. */
+  function open(set: () => void): void {
+    returnFocus = headerEl?.querySelector<HTMLElement>('[aria-haspopup="menu"]') ?? null;
+    set();
+  }
+  const displayTitle = $derived(title?.trim() || 'New chat');
+  const current = $derived(conversationId ? { conversationId, title: displayTitle } : null);
+
+  const items = $derived.by<DropdownMenuItem[]>(() => {
+    const list: DropdownMenuItem[] = [];
+    if (current && onrename)
+      list.push({
+        label: 'Rename',
+        icon: 'edit',
+        onSelect: () => open(() => (renaming = current)),
+      });
+    if (onexpand) list.push({ label: 'Open full page', icon: 'expand', onSelect: onexpand });
+    if (current && ondelete) {
+      if (list.length) list.push({ type: 'separator' });
+      list.push({
+        label: 'Delete',
+        icon: 'trash',
+        destructive: true,
+        onSelect: () => open(() => (deleting = current)),
+      });
+    }
+    return list;
+  });
+</script>
+
+<header
+  bind:this={headerEl}
+  class={cn('flex min-h-12 items-center gap-2 border-b border-border px-3 py-2', className)}
+>
+  {#if onopenrail}
+    <Button
+      variant="ghost"
+      size="icon"
+      class="size-8 lg:hidden"
+      aria-label="Show conversations"
+      onclick={onopenrail}><Icon name="sidebar" size={18} /></Button
+    >
+  {/if}
+  <div class="flex min-w-0 flex-1 items-center gap-2">
+    <h2 class="truncate text-sm font-semibold" title={displayTitle}>{displayTitle}</h2>
+    {#if agentLabel}<Badge variant="outline" size="sm" class="shrink-0">{agentLabel}</Badge>{/if}
+  </div>
+  {#if actions}{@render actions()}{/if}
+  {#if onnew}
+    <Button variant="ghost" size="icon" class="size-8" aria-label="New chat" onclick={onnew}
+      ><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}
+</header>
+
+<ConversationDialogs bind:renaming bind:deleting {onrename} {ondelete} {onerror} {returnFocus} />

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    conversationId?: string | null;
+    /** Agent name shown as a badge, e.g. "Classic Agent". */
+    agentLabel?: string;
+    /** Opens the conversation list; the button only shows below `lg`. */
+    onopenrail?: () => void;
+    onnew?: () => void;
+    /** Opens this conversation as a full page (panel variant). */
+    onexpand?: () => void;
+    onrename?: (conversationId: string, title: string) => void | Promise<void>;
+    ondelete?: (conversationId: string) => void | Promise<void>;
+    onerror?: (message: string) => void;
+    /** 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`.
+ */
+declare const ChatHeader: import("svelte").Component<Props, {}, "">;
+type ChatHeader = ReturnType<typeof ChatHeader>;
+export default ChatHeader;
+//# sourceMappingURL=ChatHeader.svelte.d.ts.map

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

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