@classic-homes/agent-chat 0.2.1 → 0.4.0

package/dist/components/Composer.svelte

@@ -1,8 +1,16 @@
+<!--
+  @component
+  The message box: an autosizing textarea in a card with attach, the host's context chip and
+  Send/Stop. Files can also be dropped on it or pasted. Typing `/` at the start opens the saved
+  prompt menu when the host passes `prompts`.
+-->
 <script lang="ts">
-  import { Button, Icon, Textarea } from '@classic-homes/theme-svelte';
+  import { cn, Button, Icon, Kbd, Popover, Spinner, Textarea } from '@classic-homes/theme-svelte';
   import type { FileRef } from '@classic-homes/agent-contracts';
   import { LIMITS } from '@classic-homes/agent-contracts';
-  import { composerKeyAction } from '../composer-keys.js';
+  import { composerKeyAction, promptMenuKeyAction } from '../composer-keys.js';
+  import { filterPrompts, promptQuery, type ComposerPrompt } from '../composer-prompts.js';
+  import { fileIcon, formatBytes } from '../message-format.js';
 
   interface Props {
     disabled?: boolean;
@@ -12,6 +20,8 @@
     placeholder?: string;
     /** Upload a file; the composer shows it as pending until the message is sent. */
     upload?: (file: File) => Promise<FileRef>;
+    /** Saved prompts for the `/` menu; the menu is off without them. */
+    prompts?: ComposerPrompt[];
     onsend?: (text: string) => void;
     oncancel?: () => void;
     onremovefile?: (fileId: string) => void;
@@ -25,28 +35,76 @@
     files = $bindable([]),
     placeholder = 'Ask Classic Agent…',
     upload,
+    prompts,
     onsend,
     oncancel,
     onremovefile,
     context,
   }: Props = $props();
 
+  const uid = $props.id();
   let textarea = $state<HTMLTextAreaElement | null>(null);
+  let card: HTMLDivElement | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
-  let uploading = $state(0);
+  /** Files being uploaded right now, shown as chips with a spinner. */
+  let pending = $state<{ key: string; name: string; bytes: number; mimeType: string }[]>([]);
   let uploadError = $state<string | undefined>();
+  let dragging = $state(false);
+  let dragDepth = 0;
 
   export function focus(): void {
     textarea?.focus({ preventScroll: true });
   }
 
+  // `/` prompt menu
+  const query = $derived(prompts?.length ? promptQuery(value) : null);
+  const matches = $derived(query === null ? [] : filterPrompts(prompts ?? [], query));
+  let dismissedFor = $state<string | null>(null);
+  const menuOpen = $derived(query !== null && matches.length > 0 && dismissedFor !== value);
+  let active = $state(0);
+  let loadingPrompt = $state(false);
+  $effect(() => {
+    void query;
+    active = 0;
+  });
+  async function choose(prompt: ComposerPrompt | undefined): Promise<void> {
+    if (!prompt) return;
+    if (typeof prompt.text === 'string') value = prompt.text;
+    else {
+      loadingPrompt = true;
+      try {
+        value = await prompt.text();
+      } catch {
+        uploadError = `Could not load “${prompt.label}”`;
+      } finally {
+        loadingPrompt = false;
+      }
+    }
+    focus();
+  }
+
+  const chars = $derived(value.length);
+  const showCount = $derived(chars > LIMITS.messageChars * 0.8);
+  const busy = $derived(pending.length > 0 || loadingPrompt);
+
   function submit(): void {
     const text = value.trim();
-    if (!text || disabled || streaming || uploading > 0) return;
+    if (!text || disabled || streaming || busy) return;
     value = '';
     onsend?.(text);
   }
   function onkeydown(event: KeyboardEvent): void {
+    if (menuOpen) {
+      const menu = promptMenuKeyAction(event);
+      if (menu) {
+        event.preventDefault();
+        if (menu === 'next') active = (active + 1) % matches.length;
+        else if (menu === 'previous') active = (active - 1 + matches.length) % matches.length;
+        else if (menu === 'choose') void choose(matches[active]);
+        else dismissedFor = value;
+        return;
+      }
+    }
     const action = composerKeyAction(event, streaming);
     if (action === 'send') {
       event.preventDefault();
@@ -56,31 +114,70 @@
       oncancel?.();
     }
   }
-  async function onfiles(event: Event): Promise<void> {
-    const input = event.currentTarget as HTMLInputElement;
-    const chosen = [...(input.files ?? [])];
-    input.value = '';
+
+  async function addFiles(chosen: File[]): Promise<void> {
     if (!upload || chosen.length === 0) return;
     uploadError = undefined;
     for (const file of chosen) {
+      if (files.length + pending.length >= LIMITS.requestFiles) {
+        uploadError = `Attach up to ${LIMITS.requestFiles} files per message`;
+        break;
+      }
       if (file.size > LIMITS.fileBytes) {
         uploadError = `${file.name} is larger than ${Math.round(LIMITS.fileBytes / 1048576)} MB`;
         continue;
       }
-      uploading += 1;
+      const key = `${file.name}-${file.size}-${Math.random().toString(36).slice(2)}`;
+      pending = [...pending, { key, name: file.name, bytes: file.size, mimeType: file.type }];
       try {
         files = [...files, await upload(file)];
       } catch (err) {
         uploadError = err instanceof Error ? err.message : `Could not upload ${file.name}`;
       } finally {
-        uploading -= 1;
+        pending = pending.filter((p) => p.key !== key);
       }
     }
   }
+  function onfiles(event: Event): void {
+    const input = event.currentTarget as HTMLInputElement;
+    const chosen = [...(input.files ?? [])];
+    input.value = '';
+    void addFiles(chosen);
+  }
+  function onpaste(event: ClipboardEvent): void {
+    const pasted = [...(event.clipboardData?.files ?? [])];
+    if (!upload || pasted.length === 0) return;
+    // Pasting a screenshot or a copied file attaches it; plain text pastes as usual.
+    event.preventDefault();
+    void addFiles(pasted);
+  }
+  const hasFiles = (event: DragEvent) => event.dataTransfer?.types.includes('Files') ?? false;
+  function ondragenter(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth += 1;
+    dragging = true;
+  }
+  function ondragover(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+  }
+  function ondragleave(): void {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) dragging = false;
+  }
+  function ondrop(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth = 0;
+    dragging = false;
+    void addFiles([...(event.dataTransfer?.files ?? [])]);
+  }
 </script>
 
 <form
-  class="bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
+  class="group/composer bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
   onsubmit={(e) => {
     e.preventDefault();
     submit();
@@ -88,29 +185,58 @@
   aria-label="Send a message"
 >
   <div
-    class="mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20"
+    bind:this={card}
+    class={cn(
+      'relative mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20',
+      dragging && 'border-primary ring-2 ring-primary/30',
+    )}
+    role="group"
+    aria-label="Message composer"
+    {ondragenter}
+    {ondragover}
+    {ondragleave}
+    {ondrop}
   >
-    {#if files.length || uploadError}
-      <div class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs">
+    {#if dragging}
+      <div
+        class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center gap-2 rounded-xl bg-background/90 text-sm font-medium text-primary"
+      >
+        <Icon name="paperclip" size={16} /> Drop files to attach
+      </div>
+    {/if}
+    {#if files.length || pending.length || uploadError}
+      <ul class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs" aria-label="Attachments">
         {#each files as file (file.fileId)}
-          <span
-            class="inline-flex max-w-full items-center gap-1 rounded-full bg-muted py-0.5 pl-2 pr-0.5"
+          <li
+            class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-0.5"
           >
-            <Icon name="file" size={12} class="shrink-0 text-muted-foreground" />
+            <Icon name={fileIcon(file.mimeType)} size={14} class="shrink-0 text-muted-foreground" />
             <span class="truncate">{file.name}</span>
-            <button
+            <span class="shrink-0 text-muted-foreground">{formatBytes(file.bytes)}</span>
+            <Button
               type="button"
-              class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              variant="ghost"
+              size="icon"
+              class="size-6 shrink-0 text-muted-foreground"
               aria-label={`Remove ${file.name}`}
               onclick={() => {
                 files = files.filter((f) => f.fileId !== file.fileId);
                 onremovefile?.(file.fileId);
-              }}><Icon name="close" size={12} /></button
+              }}><Icon name="close" size={12} /></Button
             >
-          </span>
+          </li>
         {/each}
-        {#if uploadError}<span class="text-destructive" role="alert">{uploadError}</span>{/if}
-      </div>
+        {#each pending as file (file.key)}
+          <li
+            class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-dashed border-border py-1 pl-2 pr-2 text-muted-foreground"
+          >
+            <Spinner size="sm" label={`Uploading ${file.name}`} class="shrink-0" />
+            <span class="truncate">{file.name}</span>
+            <span class="shrink-0">{formatBytes(file.bytes)}</span>
+          </li>
+        {/each}
+        {#if uploadError}<li class="text-destructive" role="alert">{uploadError}</li>{/if}
+      </ul>
     {/if}
     <Textarea
       bind:ref={textarea}
@@ -122,8 +248,14 @@
       {placeholder}
       aria-label="Message"
       maxlength={LIMITS.messageChars}
+      role={prompts?.length ? 'combobox' : undefined}
+      aria-autocomplete={prompts?.length ? 'list' : undefined}
+      aria-expanded={prompts?.length ? menuOpen : undefined}
+      aria-controls={menuOpen ? `${uid}-prompts` : undefined}
+      aria-activedescendant={menuOpen ? `${uid}-prompt-${active}` : undefined}
       {disabled}
       {onkeydown}
+      {onpaste}
     />
     <div class="flex items-center gap-1 px-2 pb-2">
       {#if upload}
@@ -134,22 +266,31 @@
           size="icon"
           class="size-8 text-muted-foreground"
           aria-label="Attach files"
-          disabled={disabled || uploading > 0}
-          loading={uploading > 0}
+          disabled={disabled || files.length >= LIMITS.requestFiles}
           onclick={() => fileInput?.click()}
         >
-          {#if uploading === 0}<Icon name="paperclip" size={18} />{/if}
+          <Icon name="paperclip" size={18} />
         </Button>
       {/if}
       {#if context}<div class="min-w-0">{@render context()}</div>{/if}
-      <div class="ml-auto">
+      <div class="ml-auto flex items-center gap-2">
+        {#if showCount}
+          <span
+            class={cn(
+              'text-xs tabular-nums text-muted-foreground',
+              chars >= LIMITS.messageChars && 'text-destructive',
+            )}
+            aria-live="polite"
+            >{chars.toLocaleString()} / {LIMITS.messageChars.toLocaleString()}</span
+          >
+        {/if}
         {#if streaming}
           <Button
             type="button"
             variant="outline"
             size="icon"
             class="size-8"
-            aria-label="Stop"
+            aria-label="Stop (Esc)"
             onclick={() => oncancel?.()}><Icon name="stop" size={14} /></Button
           >
         {:else}
@@ -158,11 +299,61 @@
             size="icon"
             class="size-8"
             aria-label="Send"
-            disabled={disabled || !value.trim() || uploading > 0}
-            ><Icon name="send" size={16} /></Button
+            disabled={disabled || !value.trim() || busy}><Icon name="send" size={16} /></Button
           >
         {/if}
       </div>
     </div>
   </div>
+  <p
+    class="mx-auto mt-1.5 hidden max-w-3xl items-center gap-1.5 px-1 text-[11px] text-muted-foreground opacity-0 transition-opacity group-focus-within/composer:opacity-100 sm:flex"
+    aria-hidden="true"
+  >
+    {#if streaming}
+      <Kbd size="sm">Esc</Kbd> to stop
+    {:else}
+      <Kbd size="sm">Enter</Kbd> to send · <Kbd keys={['Shift', 'Enter']} size="sm" /> for a new line
+      {#if prompts?.length}· <Kbd size="sm">/</Kbd> for saved prompts{/if}
+    {/if}
+  </p>
 </form>
+
+{#if prompts?.length}
+  <Popover
+    open={menuOpen}
+    onOpenChange={(next) => {
+      if (!next) dismissedFor = value;
+    }}
+    anchor={card ?? null}
+    side="top"
+    align="start"
+    sideOffset={6}
+    autoFocus={false}
+    aria-label="Saved prompts"
+    class="w-[min(28rem,calc(100vw-2rem))] p-1"
+  >
+    <ul id={`${uid}-prompts`} role="listbox" aria-label="Saved prompts" class="grid gap-0.5">
+      {#each matches as prompt, i (prompt.id)}
+        <!-- Keyboard choice happens in the textarea (combobox + aria-activedescendant). -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <li
+          id={`${uid}-prompt-${i}`}
+          role="option"
+          aria-selected={i === active}
+          class={cn(
+            'cursor-pointer rounded-md px-2.5 py-1.5 text-sm',
+            i === active ? 'bg-muted text-foreground' : 'text-foreground hover:bg-muted/60',
+          )}
+          onpointerdown={(e) => e.preventDefault()}
+          onclick={() => void choose(prompt)}
+          onpointermove={() => (active = i)}
+        >
+          <span class="block truncate font-medium">{prompt.label}</span>
+          {#if prompt.description}
+            <span class="block truncate text-xs text-muted-foreground">{prompt.description}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </Popover>
+{/if}

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

@@ -1,4 +1,5 @@
 import type { FileRef } from '@classic-homes/agent-contracts';
+import { type ComposerPrompt } from '../composer-prompts.js';
 interface Props {
     disabled?: boolean;
     streaming?: boolean;
@@ -7,12 +8,19 @@ interface Props {
     placeholder?: string;
     /** Upload a file; the composer shows it as pending until the message is sent. */
     upload?: (file: File) => Promise<FileRef>;
+    /** Saved prompts for the `/` menu; the menu is off without them. */
+    prompts?: ComposerPrompt[];
     onsend?: (text: string) => void;
     oncancel?: () => void;
     onremovefile?: (fileId: string) => void;
     /** Slot for a host-provided context chip (page context toggle). */
     context?: import('svelte').Snippet;
 }
+/**
+ * The message box: an autosizing textarea in a card with attach, the host's context chip and
+ * Send/Stop. Files can also be dropped on it or pasted. Typing `/` at the start opens the saved
+ * prompt menu when the host passes `prompts`.
+ */
 declare const Composer: import("svelte").Component<Props, {
     focus: () => void;
 }, "value" | "files">;

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

@@ -1 +1 @@
-{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAK5D,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA8GH,QAAA,MAAM,QAAQ;iBArFO,IAAI;qBAqF6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAA8B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIvF,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA2PH;;;;GAIG;AACH,QAAA,MAAM,QAAQ;iBA/NO,IAAI;qBA+N6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,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"}