@classic-homes/agent-chat 0.2.1 → 0.3.0

package/README.md

@@ -21,8 +21,9 @@ artifacts and MCP-UI sandbox frames. The Classic App's `/agent` page and agent p
   };
   ```
 
-  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.
+  Without that entry the chat renders unstyled. Markdown prose (rendered from model text) uses
+  arbitrary-variant utilities on its container (`[&_ul]:list-disc`), not a stylesheet: the
+  Classic App's cascade-layers polyfill outranks plain component CSS.
 
 ## Usage
 
@@ -37,4 +38,15 @@ artifacts and MCP-UI sandbox frames. The Classic App's `/agent` page and agent p
 `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.
 
+## Components
+
+`AgentChat` composes the rest; each is also exported for other layouts:
+
+- `ChatHeader`, `ConversationSidebar`: title and conversation actions; the history rail.
+- `MessageList`: transcript with day separators and a jump-to-latest button.
+- `MessageItem` → `UserMessage` / `AssistantMessage`, with `MessageActions` (copy, time),
+  `ArtifactChip`, `MessageFiles` (image lightbox, downloads) and `ProposalCard` (read-only
+  document edits; applying stays in the Office add-in).
+- `Composer`, `ToolTimeline`, `ArtifactPanel`, `UiFrame`, `ModeBanner`.
+
 Publishing: `docs/operations/package-publishing.md`.

package/dist/components/AgentChat.svelte

@@ -155,6 +155,7 @@
       ontool={(name, params) => ontoolrequest?.(name, params)}
       {onnotify}
       onretry={retry}
+      oncontinue={() => void session.send('Continue.')}
       {empty}
     />
     <Composer

package/dist/components/ArtifactChip.svelte

@@ -0,0 +1,45 @@
+<!--
+  @component
+  A card-like button for one artifact in a message: type icon, title and kind, and a spinner while
+  the artifact is still being written. Opens it in the artifact pane.
+-->
+<script lang="ts">
+  import { cn, Icon, Spinner } from '@classic-homes/theme-svelte';
+  import type { Artifact } from '../reducer.js';
+  import { artifactIcon, artifactKind } from '../message-format.js';
+
+  interface Props {
+    artifact: Artifact;
+    onopen?: (artifactId: string) => void;
+    class?: string;
+  }
+  let { artifact, onopen, class: className }: Props = $props();
+  const title = $derived(artifact.title ?? 'Untitled artifact');
+</script>
+
+<button
+  type="button"
+  class={cn(
+    'flex w-full max-w-sm items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left shadow-sm transition hover:border-primary/40 hover:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    className,
+  )}
+  aria-label={artifact.open ? `${title} (writing)` : `Open ${title}`}
+  onclick={() => onopen?.(artifact.artifactId)}
+>
+  <span
+    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+  >
+    <Icon name={artifactIcon(artifact.mediaType)} size={18} />
+  </span>
+  <span class="min-w-0 flex-1">
+    <span class="block truncate text-sm font-medium text-foreground">{title}</span>
+    <span class="block text-xs text-muted-foreground">
+      {artifact.open ? 'Writing…' : artifactKind(artifact.mediaType)}
+    </span>
+  </span>
+  {#if artifact.open}
+    <Spinner size="sm" label="Writing" />
+  {:else}
+    <Icon name="chevron-right" size={16} class="text-muted-foreground" />
+  {/if}
+</button>

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

@@ -0,0 +1,14 @@
+import type { Artifact } from '../reducer.js';
+interface Props {
+    artifact: Artifact;
+    onopen?: (artifactId: string) => void;
+    class?: string;
+}
+/**
+ * A card-like button for one artifact in a message: type icon, title and kind, and a spinner while
+ * the artifact is still being written. Opens it in the artifact pane.
+ */
+declare const ArtifactChip: import("svelte").Component<Props, {}, "">;
+type ArtifactChip = ReturnType<typeof ArtifactChip>;
+export default ArtifactChip;
+//# sourceMappingURL=ArtifactChip.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArtifactChip.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ArtifactChip.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI5C,UAAU,KAAK;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiCH;;;GAGG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/AssistantMessage.svelte

@@ -0,0 +1,179 @@
+<!--
+  @component
+  The agent's turn: identity mark, tool timeline, the answer (throttled markdown with a caret
+  while streaming), artifacts, UI frames, files, proposed edits, the turn's outcome and actions.
+-->
+<script lang="ts">
+  import { Alert, Button, Icon } from '@classic-homes/theme-svelte';
+  import type { AssistantMessage } from '../reducer.js';
+  import { errorTitle } from '../reducer.js';
+  import { parseMarkdown } from '../markdown.js';
+  import ArtifactChip from './ArtifactChip.svelte';
+  import Markdown from './Markdown.svelte';
+  import MessageActions from './MessageActions.svelte';
+  import MessageFiles from './MessageFiles.svelte';
+  import ProposalCard from './ProposalCard.svelte';
+  import ToolTimeline from './ToolTimeline.svelte';
+  import UiFrame from './UiFrame.svelte';
+
+  interface Props {
+    message: AssistantMessage;
+    streaming?: boolean;
+    /** The last message: actions stay visible and the turn can be retried or continued. */
+    last?: boolean;
+    sandboxOrigin: string;
+    fileUrl: (fileId: string) => string;
+    onnavigate?: (href: string) => void;
+    onopenartifact?: (artifactId: string) => void;
+    onprompt?: (text: string) => void;
+    ontool?: (toolName: string, params?: Record<string, unknown>) => void;
+    onnotify?: (message: string) => void;
+    onretry?: () => void;
+    /** Ask the agent to pick up a stopped or cut-short answer. */
+    oncontinue?: () => void;
+  }
+  let {
+    message,
+    streaming = false,
+    last = false,
+    sandboxOrigin,
+    fileUrl,
+    onnavigate,
+    onopenartifact,
+    onprompt,
+    ontool,
+    onnotify,
+    onretry,
+    oncontinue,
+  }: Props = $props();
+
+  // Re-parsing markdown on every token is the dominant streaming cost; throttle it.
+  const PARSE_THROTTLE_MS = 120;
+  let html = $state('');
+  let lastParse = 0;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  $effect(() => {
+    const text = message.text;
+    const now = Date.now();
+    if (!streaming || now - lastParse >= PARSE_THROTTLE_MS) {
+      if (timer) clearTimeout(timer);
+      timer = null;
+      lastParse = now;
+      html = parseMarkdown(text);
+    } else if (!timer) {
+      timer = setTimeout(
+        () => {
+          timer = null;
+          lastParse = Date.now();
+          html = parseMarkdown(message.text);
+        },
+        PARSE_THROTTLE_MS - (now - lastParse),
+      );
+    }
+  });
+  $effect(() => () => {
+    if (timer) clearTimeout(timer);
+  });
+
+  function handleClick(event: MouseEvent): void {
+    if (!onnavigate) return;
+    const anchor = (event.target as HTMLElement | null)?.closest?.('a.agent-internal-link');
+    if (!(anchor instanceof HTMLAnchorElement)) return;
+    event.preventDefault();
+    onnavigate(anchor.getAttribute('href') ?? anchor.href);
+  }
+
+  const thinking = $derived(
+    streaming &&
+      !message.text &&
+      !message.tools.some((t) => !t.status) &&
+      !message.artifacts.some((a) => a.open),
+  );
+  const canContinue = $derived(last && !!oncontinue);
+</script>
+
+<div class="group/message flex gap-3 px-4 py-2" data-role="assistant" data-status={message.status}>
+  <span
+    class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary"
+    aria-hidden="true"
+  >
+    <Icon name="sparkles" size={14} />
+  </span>
+  <div class="flex min-w-0 flex-1 flex-col gap-2">
+    {#if message.tools.length || message.delegations.length}
+      <ToolTimeline tools={message.tools} delegations={message.delegations} {streaming} />
+    {/if}
+    {#if html}<Markdown {html} streaming={streaming && !!message.text} onclick={handleClick} />{/if}
+    {#if thinking}
+      <div class="flex items-center gap-2 text-sm text-muted-foreground" role="status">
+        <span class="flex gap-1" aria-hidden="true">
+          <span class="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce"></span>
+          <span
+            class="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce [animation-delay:150ms]"
+          ></span>
+          <span
+            class="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce [animation-delay:300ms]"
+          ></span>
+        </span>
+        Thinking
+      </div>
+    {/if}
+    {#if message.artifacts.length}
+      <div class="flex flex-col gap-1.5">
+        {#each message.artifacts as artifact (artifact.artifactId)}
+          <ArtifactChip {artifact} onopen={onopenartifact} />
+        {/each}
+      </div>
+    {/if}
+    {#each message.ui as resource (resource.callId + resource.uri)}
+      <UiFrame {resource} {sandboxOrigin} {onprompt} {ontool} {onnotify} />
+    {/each}
+    {#if message.files.length}<MessageFiles files={message.files} {fileUrl} />{/if}
+    {#if message.proposals.length}
+      <div class="flex flex-col gap-1.5">
+        {#each message.proposals as operation (operation.operationId)}
+          <ProposalCard {operation} />
+        {/each}
+      </div>
+    {/if}
+    {#if message.error}
+      <Alert variant="error">
+        <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+          <p class="min-w-0 flex-1">
+            <strong class="font-semibold">{errorTitle(message.error.code)}.</strong>
+            {message.error.message}
+          </p>
+          {#if message.error.retryable && onretry}
+            <Button variant="outline" size="sm" onclick={onretry}>
+              <Icon name="refresh" size={14} /> Try again
+            </Button>
+          {/if}
+        </div>
+      </Alert>
+    {:else if message.status === 'cancelled'}
+      <div class="flex items-center gap-2 text-sm text-muted-foreground">
+        <Icon name="stop" size={14} /> Stopped
+        {#if canContinue}
+          <Button variant="link" size="sm" class="h-auto p-0" onclick={oncontinue}>Continue</Button>
+        {/if}
+      </div>
+    {:else if message.status === 'incomplete'}
+      <Alert variant="warning">
+        <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+          <p class="min-w-0 flex-1">The answer was cut short.</p>
+          {#if canContinue}
+            <Button variant="outline" size="sm" onclick={oncontinue}>Continue</Button>
+          {/if}
+        </div>
+      </Alert>
+    {/if}
+    {#if !streaming && message.status !== 'streaming'}
+      <MessageActions
+        text={message.text}
+        createdAt={message.createdAt}
+        visible={last}
+        class="-ml-1.5"
+      />
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import type { AssistantMessage } from '../reducer.js';
+interface Props {
+    message: AssistantMessage;
+    streaming?: boolean;
+    /** The last message: actions stay visible and the turn can be retried or continued. */
+    last?: boolean;
+    sandboxOrigin: string;
+    fileUrl: (fileId: string) => string;
+    onnavigate?: (href: string) => void;
+    onopenartifact?: (artifactId: string) => void;
+    onprompt?: (text: string) => void;
+    ontool?: (toolName: string, params?: Record<string, unknown>) => void;
+    onnotify?: (message: string) => void;
+    onretry?: () => void;
+    /** Ask the agent to pick up a stopped or cut-short answer. */
+    oncontinue?: () => void;
+}
+/**
+ * The agent's turn: identity mark, tool timeline, the answer (throttled markdown with a caret
+ * while streaming), artifacts, UI frames, files, proposed edits, the turn's outcome and actions.
+ */
+declare const AssistantMessage: import("svelte").Component<Props, {}, "">;
+type AssistantMessage = ReturnType<typeof AssistantMessage>;
+export default AssistantMessage;
+//# sourceMappingURL=AssistantMessage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssistantMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AssistantMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYpD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,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,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAuJH;;;GAGG;AACH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/Markdown.svelte

@@ -4,7 +4,8 @@
   Tailwind arbitrary variants on the container rather than a stylesheet: the Classic App's
   cascade-layers polyfill raises the specificity of its base styles above any plain component
   CSS, while utilities still win. Values follow theme-docs `.markdown-content`, sized for chat. Tables don't break words (the
-  column would squeeze "$1,075,000" to two lines); they scroll sideways instead.
+  column would squeeze "$1,075,000" to two lines); their wrapper scrolls sideways instead. Code
+  blocks get a language label and a copy button; external links an arrow.
 -->
 <script lang="ts" module>
   const PROSE = [
@@ -15,21 +16,78 @@
     '[&_h3]:mb-2 [&_h3]:mt-5 [&_h3]:text-[1.125em] [&_h3]:font-semibold [&_h3]:leading-snug',
     '[&_h4]:mb-2 [&_h4]:mt-4 [&_h4]:text-[1em] [&_h4]:font-semibold [&_h4]:leading-snug',
     '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:text-primary/80',
+    "[&_a.agent-external-link]:after:ml-0.5 [&_a.agent-external-link]:after:text-[0.8em] [&_a.agent-external-link]:after:content-['↗']",
     '[&_ul]:mb-3 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:mb-3 [&_ol]:list-decimal [&_ol]:pl-6',
     '[&_li]:mb-1 [&_li>ul]:mb-0 [&_li>ul]:mt-1 [&_li>ol]:mb-0 [&_li>ol]:mt-1',
     '[&_ul.agent-tasklist]:list-none [&_ul.agent-tasklist]:pl-1',
     '[&_.agent-tasklist_input]:mr-1.5 [&_.agent-tasklist_input]:accent-primary',
     '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em]',
     '[&_pre]:mb-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/60 [&_pre]:px-4 [&_pre]:py-3 [&_pre]:text-[13px] [&_pre]:leading-relaxed',
+    // Code blocks get a header (language + copy) from `enhanceCode`; the block then drops its own frame.
+    '[&_.agent-codeblock]:mb-3 [&_.agent-codeblock]:overflow-hidden [&_.agent-codeblock]:rounded-lg [&_.agent-codeblock]:border [&_.agent-codeblock]:border-border',
+    '[&_.agent-codeblock_pre]:mb-0 [&_.agent-codeblock_pre]:rounded-none [&_.agent-codeblock_pre]:border-0',
     '[&_pre_code]:rounded-none [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[length:inherit]',
     '[&_blockquote]:mb-3 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:bg-muted/50 [&_blockquote]:px-4 [&_blockquote]:py-2 [&_blockquote]:text-muted-foreground',
     '[&_hr]:my-5 [&_hr]:border-border',
-    '[&_table]:mb-3 [&_table]:block [&_table]:max-w-full [&_table]:border-collapse [&_table]:overflow-x-auto [&_table]:text-[0.875em] [&_table]:[overflow-wrap:normal]',
+    '[&_.agent-table-wrap]:mb-3 [&_.agent-table-wrap]:max-w-full [&_.agent-table-wrap]:overflow-x-auto',
+    '[&_table]:border-collapse [&_table]:text-[0.875em] [&_table]:[overflow-wrap:normal]',
     '[&_th]:border [&_th]:border-border [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top',
     '[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-1.5 [&_td]:text-left [&_td]:align-top',
     '[&_th]:bg-muted [&_th]:font-semibold',
     '[&_img]:max-w-full [&_img]:rounded-lg',
   ].join(' ');
+
+  /** Blinking caret after the last block while the answer streams. */
+  const STREAMING =
+    "[&>:last-child]:after:ml-0.5 [&>:last-child]:after:text-muted-foreground [&>:last-child]:after:content-['▍'] motion-safe:[&>:last-child]:after:animate-pulse";
+
+  const HEADER =
+    'flex items-center justify-between gap-2 border-b border-border bg-muted px-3 py-1 text-xs text-muted-foreground';
+  const COPY =
+    'inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-medium hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+  const COPY_ICON =
+    '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+
+  /**
+   * Wrap each rendered code block with a header that names the language and copies the code.
+   * Runs on the DOM after `{@html}` updates; the HTML itself stays as DOMPurify left it.
+   */
+  export function enhanceCode(root: HTMLElement): void {
+    for (const pre of root.querySelectorAll<HTMLPreElement>('pre.agent-code')) {
+      if (pre.parentElement?.classList.contains('agent-codeblock')) continue;
+      const lang = /agent-lang-([a-z0-9-]+)/.exec(pre.className)?.[1];
+      const wrap = document.createElement('div');
+      wrap.className = 'agent-codeblock';
+      const header = document.createElement('div');
+      header.className = HEADER;
+      const label = document.createElement('span');
+      label.className = 'font-mono';
+      label.textContent = lang ?? 'code';
+      const copy = document.createElement('button');
+      copy.type = 'button';
+      copy.className = COPY;
+      copy.dataset.agentCopy = '';
+      copy.setAttribute('aria-label', lang ? `Copy ${lang} code` : 'Copy code');
+      copy.innerHTML = `${COPY_ICON}<span>Copy</span>`;
+      header.append(label, copy);
+      pre.replaceWith(wrap);
+      wrap.append(header, pre);
+    }
+  }
+
+  async function copyCode(button: HTMLButtonElement): Promise<void> {
+    const code = button.closest('.agent-codeblock')?.querySelector('pre')?.textContent ?? '';
+    const text = button.querySelector('span');
+    try {
+      await navigator.clipboard.writeText(code);
+      if (text) text.textContent = 'Copied';
+    } catch {
+      if (text) text.textContent = 'Copy failed';
+    }
+    setTimeout(() => {
+      if (text) text.textContent = 'Copy';
+    }, 2000);
+  }
 </script>
 
 <script lang="ts">
@@ -39,11 +97,35 @@
     /** Output of `parseMarkdown` (already sanitized by DOMPurify). */
     html: string;
     class?: string;
+    /** Show a caret after the last block (the answer is still streaming). */
+    streaming?: boolean;
     onclick?: (event: MouseEvent) => void;
   }
-  let { html, class: className, onclick }: Props = $props();
+  let { html, class: className, streaming = false, onclick }: Props = $props();
+
+  let root: HTMLDivElement | undefined = $state();
+  $effect(() => {
+    void html;
+    if (root) enhanceCode(root);
+  });
+
+  function handleClick(event: MouseEvent): void {
+    const button = (event.target as HTMLElement | null)?.closest?.('button[data-agent-copy]');
+    if (button instanceof HTMLButtonElement) {
+      void copyCode(button);
+      return;
+    }
+    onclick?.(event);
+  }
 </script>
 
-<!-- Clicks are delegated to internal links inside the HTML; the links themselves are focusable. -->
+<!-- PROSE stays out of tailwind-merge, which could drop rules it reads as conflicting. Clicks are
+     delegated to internal links and code copy buttons inside the HTML; those are focusable. -->
 <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-<div class={className ? `${PROSE} ${cn(className)}` : PROSE} {onclick}>{@html html}</div>
+<div
+  bind:this={root}
+  class={[PROSE, streaming ? STREAMING : '', className ? cn(className) : ''].join(' ')}
+  onclick={handleClick}
+>
+  {@html html}
+</div>

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

@@ -1,7 +1,14 @@
+/**
+ * Wrap each rendered code block with a header that names the language and copies the code.
+ * Runs on the DOM after `{@html}` updates; the HTML itself stays as DOMPurify left it.
+ */
+export declare function enhanceCode(root: HTMLElement): void;
 interface Props {
     /** Output of `parseMarkdown` (already sanitized by DOMPurify). */
     html: string;
     class?: string;
+    /** Show a caret after the last block (the answer is still streaming). */
+    streaming?: boolean;
     onclick?: (event: MouseEvent) => void;
 }
 /**
@@ -9,7 +16,8 @@ interface Props {
  * Tailwind arbitrary variants on the container rather than a stylesheet: the Classic App's
  * cascade-layers polyfill raises the specificity of its base styles above any plain component
  * CSS, while utilities still win. Values follow theme-docs `.markdown-content`, sized for chat. Tables don't break words (the
- * column would squeeze "$1,075,000" to two lines); they scroll sideways instead.
+ * column would squeeze "$1,075,000" to two lines); their wrapper scrolls sideways instead. Code
+ * blocks get a language label and a copy button; external links an arrow.
  */
 declare const Markdown: import("svelte").Component<Props, {}, "">;
 type Markdown = ReturnType<typeof Markdown>;

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Markdown.svelte.ts"],"names":[],"mappings":"AA+BE,UAAU,KAAK;IACb,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAgBH;;;;;;GAMG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Markdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Markdown.svelte.ts"],"names":[],"mappings":"AA2CE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAqBnD;AAoBD,UAAU,KAAK;IACb,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAiCH;;;;;;;GAOG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/MessageActions.svelte

@@ -0,0 +1,56 @@
+<!--
+  @component
+  Per-message action bar: copy the raw text and the time it was sent. Hidden until the message is
+  hovered or holds focus, except where `visible` (the last message) or on touch screens, which
+  have no hover.
+-->
+<script lang="ts">
+  import { cn, CopyButton, Tooltip } from '@classic-homes/theme-svelte';
+  import { formatDateTime, formatTime } from '../message-format.js';
+
+  interface Props {
+    text: string;
+    createdAt: number;
+    /** Keep the bar visible without hover (the last message). */
+    visible?: boolean;
+    align?: 'start' | 'end';
+    class?: string;
+  }
+  let { text, createdAt, visible = false, align = 'start', class: className }: Props = $props();
+</script>
+
+<div
+  class={cn(
+    'flex items-center gap-0.5 text-xs text-muted-foreground transition-opacity',
+    align === 'end' && 'justify-end',
+    !visible &&
+      'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 [@media(hover:none)]:opacity-100',
+    className,
+  )}
+  data-message-actions
+>
+  {#if text}
+    <CopyButton
+      value={text}
+      label="Copy message"
+      copiedLabel="Copied"
+      variant="ghost"
+      size="icon"
+      class="h-7 w-7"
+    />
+  {/if}
+  <Tooltip content={formatDateTime(createdAt)}>
+    {#snippet children({ props })}
+      <!-- Focusable so keyboard users can read the full date in the tooltip. -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <time
+        {...props}
+        tabindex="0"
+        class="rounded px-1.5 py-0.5 tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        datetime={new Date(createdAt).toISOString()}
+      >
+        {formatTime(createdAt)}
+      </time>
+    {/snippet}
+  </Tooltip>
+</div>

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

@@ -0,0 +1,17 @@
+interface Props {
+    text: string;
+    createdAt: number;
+    /** Keep the bar visible without hover (the last message). */
+    visible?: boolean;
+    align?: 'start' | 'end';
+    class?: string;
+}
+/**
+ * Per-message action bar: copy the raw text and the time it was sent. Hidden until the message is
+ * hovered or holds focus, except where `visible` (the last message) or on touch screens, which
+ * have no hover.
+ */
+declare const MessageActions: import("svelte").Component<Props, {}, "">;
+type MessageActions = ReturnType<typeof MessageActions>;
+export default MessageActions;
+//# sourceMappingURL=MessageActions.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageActions.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgCH;;;;GAIG;AACH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/MessageFiles.svelte

@@ -0,0 +1,83 @@
+<!--
+  @component
+  Files the agent produced in a turn: images as thumbnails that open in a lightbox, everything
+  else as a download card with a type icon and size.
+-->
+<script lang="ts">
+  import { cn, Icon, Lightbox } from '@classic-homes/theme-svelte';
+  import type { FileState } from '../reducer.js';
+  import { fileIcon, formatBytes } from '../message-format.js';
+
+  interface Props {
+    files: FileState[];
+    fileUrl: (fileId: string) => string;
+    class?: string;
+  }
+  let { files, fileUrl, class: className }: Props = $props();
+
+  const images = $derived(files.filter((f) => f.mimeType.startsWith('image/')));
+  const others = $derived(files.filter((f) => !f.mimeType.startsWith('image/')));
+  const items = $derived(
+    images.map((f) => ({
+      id: f.fileId,
+      kind: 'image' as const,
+      src: fileUrl(f.fileId),
+      alt: f.name,
+      title: f.name,
+    })),
+  );
+  let open = $state(false);
+  let index = $state(0);
+</script>
+
+<div class={cn('flex flex-col gap-2', className)}>
+  {#if images.length}
+    <ul class="flex flex-wrap gap-2" aria-label="Images">
+      {#each images as file, i (file.fileId)}
+        <li>
+          <button
+            type="button"
+            class="block overflow-hidden rounded-lg border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={`View ${file.name}`}
+            onclick={() => {
+              index = i;
+              open = true;
+            }}
+          >
+            <img
+              class="block h-40 max-w-xs object-cover"
+              src={fileUrl(file.fileId)}
+              alt={file.name}
+              loading="lazy"
+            />
+          </button>
+        </li>
+      {/each}
+    </ul>
+    <Lightbox {items} bind:open bind:index downloadable showCaption />
+  {/if}
+  {#if others.length}
+    <ul class="flex flex-wrap gap-2" aria-label="Files">
+      {#each others as file (file.fileId)}
+        <li>
+          <a
+            class="flex max-w-xs items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm transition hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            href={fileUrl(file.fileId)}
+            download={file.name}
+          >
+            <span
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+            >
+              <Icon name={fileIcon(file.mimeType)} size={18} />
+            </span>
+            <span class="min-w-0 flex-1">
+              <span class="block truncate font-medium text-foreground">{file.name}</span>
+              <span class="block text-xs text-muted-foreground">{formatBytes(file.bytes)}</span>
+            </span>
+            <Icon name="download" size={16} class="text-muted-foreground" />
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { FileState } from '../reducer.js';
+interface Props {
+    files: FileState[];
+    fileUrl: (fileId: string) => string;
+    class?: string;
+}
+/**
+ * Files the agent produced in a turn: images as thumbnails that open in a lightbox, everything
+ * else as a download card with a type icon and size.
+ */
+declare const MessageFiles: import("svelte").Component<Props, {}, "">;
+type MessageFiles = ReturnType<typeof MessageFiles>;
+export default MessageFiles;
+//# sourceMappingURL=MessageFiles.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFiles.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageFiles.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI7C,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8DH;;;GAGG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}