@classic-homes/agent-chat 0.11.0 → 0.12.0

package/dist/components/FloatingWindow.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  /**
+   * The detached chat window: a non-modal floating panel the user can drag by its header and
+   * resize from any edge, so the page under it stays usable. Geometry lives in the `ChatSurface`
+   * it is given. Keyboard: the move handle takes arrow keys (Shift resizes, Alt for small
+   * steps); Escape inside the window minimizes it unless something inside used the key.
+   */
+  import { untrack, type Snippet } from 'svelte';
+  import { Button, cn, Icon } from '@classic-homes/theme-svelte';
+  import type { ChatSurface } from '../surface.svelte.js';
+  import {
+    DRAG_THRESHOLD,
+    KEY_STEP,
+    RESIZE_DIRECTIONS,
+    isDockDrop,
+    type Point,
+    type ResizeDirection,
+  } from '../surface-geometry.js';
+
+  interface Props {
+    surface: ChatSurface;
+    title?: string;
+    id?: string;
+    /** Header buttons before Dock and Minimize, e.g. New chat. */
+    actions?: Snippet;
+    children: Snippet;
+    /** Offer docking (button, and dropping the window on the right edge). */
+    dockable?: boolean;
+    resizable?: boolean;
+    /** Called after the window minimizes, e.g. to move focus to the launcher. */
+    onminimize?: () => void;
+    class?: string;
+  }
+  let {
+    surface,
+    title = 'Classic Agent',
+    id = 'agent-chat-window',
+    actions,
+    children,
+    dockable = true,
+    resizable = true,
+    onminimize,
+    class: className,
+  }: Props = $props();
+
+  const rect = $derived(surface.rect);
+  // Untracked: attaching clamps the saved rect, which must not re-run this effect.
+  $effect(() => untrack(() => surface.attach()));
+
+  function minimize(): void {
+    surface.minimize();
+    onminimize?.();
+  }
+
+  // --- drag by the header -------------------------------------------------------------------
+  let last: Point | null = null;
+  let dragged = false;
+  let dockHint = $state(false);
+  const viewport = () => ({ width: window.innerWidth, height: window.innerHeight });
+
+  function capture(event: PointerEvent): void {
+    (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
+  }
+  function release(event: PointerEvent): void {
+    (event.currentTarget as HTMLElement).releasePointerCapture?.(event.pointerId);
+  }
+
+  function ondragdown(event: PointerEvent): void {
+    if (event.button !== 0) return;
+    // Buttons in the header keep their clicks.
+    if ((event.target as HTMLElement).closest('button, a, input, select, [data-no-drag]')) return;
+    last = { x: event.clientX, y: event.clientY };
+    dragged = false;
+    capture(event);
+  }
+  function ondragmove(event: PointerEvent): void {
+    if (!last) return;
+    const dx = event.clientX - last.x;
+    const dy = event.clientY - last.y;
+    if (!dragged && Math.abs(dx) <= DRAG_THRESHOLD && Math.abs(dy) <= DRAG_THRESHOLD) return;
+    dragged = true;
+    surface.moving = true;
+    last = { x: event.clientX, y: event.clientY };
+    surface.moveBy(dx, dy);
+    dockHint = dockable && isDockDrop(last, viewport());
+  }
+  function ondragup(event: PointerEvent): void {
+    if (!last) return;
+    const pointer = { x: event.clientX, y: event.clientY };
+    last = null;
+    dockHint = false;
+    release(event);
+    if (!dragged) return;
+    surface.commit();
+    if (dockable && isDockDrop(pointer, viewport())) surface.dock();
+  }
+
+  // --- resize from the edges ----------------------------------------------------------------
+  let resizing: { direction: ResizeDirection; last: Point } | null = null;
+  function onresizedown(event: PointerEvent, direction: ResizeDirection): void {
+    if (event.button !== 0) return;
+    resizing = { direction, last: { x: event.clientX, y: event.clientY } };
+    surface.moving = true;
+    capture(event);
+    event.preventDefault();
+  }
+  function onresizemove(event: PointerEvent): void {
+    if (!resizing) return;
+    const dx = event.clientX - resizing.last.x;
+    const dy = event.clientY - resizing.last.y;
+    resizing.last = { x: event.clientX, y: event.clientY };
+    surface.resizeBy(resizing.direction, dx, dy);
+  }
+  function onresizeup(event: PointerEvent): void {
+    if (!resizing) return;
+    resizing = null;
+    release(event);
+    surface.commit();
+  }
+
+  const HANDLE_CLASS: Record<ResizeDirection, string> = {
+    n: 'inset-x-3 top-0 h-1.5 cursor-ns-resize',
+    s: 'inset-x-3 bottom-0 h-1.5 cursor-ns-resize',
+    e: 'inset-y-3 right-0 w-1.5 cursor-ew-resize',
+    w: 'inset-y-3 left-0 w-1.5 cursor-ew-resize',
+    ne: 'right-0 top-0 size-3 cursor-nesw-resize',
+    nw: 'left-0 top-0 size-3 cursor-nwse-resize',
+    se: 'bottom-0 right-0 size-3 cursor-nwse-resize',
+    sw: 'bottom-0 left-0 size-3 cursor-nesw-resize',
+  };
+
+  // --- keyboard ------------------------------------------------------------------------------
+  const ARROWS: Record<string, Point> = {
+    ArrowLeft: { x: -1, y: 0 },
+    ArrowRight: { x: 1, y: 0 },
+    ArrowUp: { x: 0, y: -1 },
+    ArrowDown: { x: 0, y: 1 },
+  };
+  function onhandlekeydown(event: KeyboardEvent): void {
+    const arrow = ARROWS[event.key];
+    if (!arrow) return;
+    event.preventDefault();
+    const step = event.altKey ? 4 : KEY_STEP;
+    if (event.shiftKey) {
+      if (!resizable) return;
+      surface.resizeBy('se', arrow.x * step, arrow.y * step);
+    } else surface.moveBy(arrow.x * step, arrow.y * step);
+    surface.commit();
+  }
+  function onkeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape' || event.defaultPrevented) return;
+    // A menu, popover or dialog opened from inside the window closes first.
+    if (
+      document.querySelector(
+        '[data-state="open"]:is([role="menu"], [role="listbox"], [role="dialog"], [role="alertdialog"])',
+      )
+    )
+      return;
+    event.preventDefault();
+    minimize();
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<section
+  {id}
+  role="dialog"
+  aria-modal="false"
+  aria-labelledby="{id}-title"
+  class={cn(
+    'fixed z-40 flex flex-col overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-2xl',
+    surface.moving && 'select-none',
+    dockHint && 'ring-2 ring-primary',
+    className,
+  )}
+  style:left="{rect.x}px"
+  style:top="{rect.y}px"
+  style:width="{rect.width}px"
+  style:height="{rect.height}px"
+  data-agent-window
+  data-moving={surface.moving ? '' : undefined}
+  {onkeydown}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class={cn(
+      'flex h-11 shrink-0 touch-none items-center gap-1 border-b border-border bg-muted/40 pl-1 pr-2',
+      surface.moving ? 'cursor-grabbing' : 'cursor-grab',
+    )}
+    data-testid="window-header"
+    onpointerdown={ondragdown}
+    onpointermove={ondragmove}
+    onpointerup={ondragup}
+    onpointercancel={ondragup}
+  >
+    <button
+      type="button"
+      class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      aria-label={resizable
+        ? 'Move window: arrow keys move, Shift and arrow keys resize'
+        : 'Move window: arrow keys move'}
+      data-no-drag
+      onkeydown={onhandlekeydown}
+    >
+      <Icon name="grip" size={14} />
+    </button>
+    <h2 id="{id}-title" class="min-w-0 flex-1 truncate text-sm font-semibold">{title}</h2>
+    {@render actions?.()}
+    {#if dockable}
+      <Button
+        variant="ghost"
+        size="sm"
+        aria-label="Dock to the side"
+        onclick={() => surface.dock()}
+      >
+        <Icon name="sidebar" size={14} />
+      </Button>
+    {/if}
+    <Button variant="ghost" size="sm" aria-label="Minimize" onclick={minimize}>
+      <Icon name="minus" size={14} />
+    </Button>
+  </div>
+  <div class={cn('min-h-0 flex-1', surface.moving && 'pointer-events-none')}>
+    {@render children()}
+  </div>
+  {#if resizable}
+    {#each RESIZE_DIRECTIONS as direction (direction)}
+      <div
+        class={cn('absolute touch-none', HANDLE_CLASS[direction])}
+        aria-hidden="true"
+        data-resize={direction}
+        onpointerdown={(event) => onresizedown(event, direction)}
+        onpointermove={onresizemove}
+        onpointerup={onresizeup}
+        onpointercancel={onresizeup}
+      ></div>
+    {/each}
+  {/if}
+</section>

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

@@ -0,0 +1,26 @@
+/**
+   * The detached chat window: a non-modal floating panel the user can drag by its header and
+   * resize from any edge, so the page under it stays usable. Geometry lives in the `ChatSurface`
+   * it is given. Keyboard: the move handle takes arrow keys (Shift resizes, Alt for small
+   * steps); Escape inside the window minimizes it unless something inside used the key.
+   */
+import { type Snippet } from 'svelte';
+import type { ChatSurface } from '../surface.svelte.js';
+interface Props {
+    surface: ChatSurface;
+    title?: string;
+    id?: string;
+    /** Header buttons before Dock and Minimize, e.g. New chat. */
+    actions?: Snippet;
+    children: Snippet;
+    /** Offer docking (button, and dropping the window on the right edge). */
+    dockable?: boolean;
+    resizable?: boolean;
+    /** Called after the window minimizes, e.g. to move focus to the launcher. */
+    onminimize?: () => void;
+    class?: string;
+}
+declare const FloatingWindow: import("svelte").Component<Props, {}, "">;
+type FloatingWindow = ReturnType<typeof FloatingWindow>;
+export default FloatingWindow;
+//# sourceMappingURL=FloatingWindow.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWindow.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FloatingWindow.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAWtD,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkLH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/Markdown.svelte

@@ -70,6 +70,10 @@
       copy.setAttribute('aria-label', lang ? `Copy ${lang} code` : 'Copy code');
       copy.innerHTML = `${COPY_ICON}<span>Copy</span>`;
       header.append(label, copy);
+      // Long lines scroll sideways: keyboard users need to reach (and name) the scroller.
+      pre.tabIndex = 0;
+      pre.setAttribute('role', 'region');
+      pre.setAttribute('aria-label', lang ? `${lang} code` : 'Code');
       pre.replaceWith(wrap);
       wrap.append(header, pre);
     }

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":"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"}
+{"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,CAyBnD;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/MessageFeedback.svelte

@@ -29,14 +29,21 @@
       document.getElementById(noteId)?.focus();
     }
   }
+  let group = $state<HTMLSpanElement | null>(null);
+  /** Close the note and put the keyboard back on the thumbs-down it came from. */
+  async function closeNote(): Promise<void> {
+    asking = false;
+    await tick();
+    group?.querySelector<HTMLButtonElement>('button[aria-label="Bad answer"]')?.focus();
+  }
   async function sendNote(): Promise<void> {
     const text = note.trim();
-    asking = false;
+    void closeNote();
     if (text) await onrate('down', text);
   }
 </script>
 
-<span class="inline-flex items-center" role="group" aria-label="Rate this answer">
+<span bind:this={group} class="inline-flex items-center" role="group" aria-label="Rate this answer">
   <Button
     variant="ghost"
     size="icon"
@@ -79,11 +86,11 @@
       onkeydown={(e: KeyboardEvent) => {
         if (e.key === 'Escape') {
           e.preventDefault();
-          asking = false;
+          void closeNote();
         }
       }}
     />
     <Button type="submit" size="sm" variant="outline" disabled={!note.trim()}>Send</Button>
-    <Button type="button" size="sm" variant="ghost" onclick={() => (asking = false)}>Skip</Button>
+    <Button type="button" size="sm" variant="ghost" onclick={() => void closeNote()}>Skip</Button>
   </form>
 {/if}

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

@@ -1 +1 @@
-{"version":3,"file":"MessageFeedback.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageFeedback.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAK/D,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/E;AAyDH;;;GAGG;AACH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"MessageFeedback.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageFeedback.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAK/D,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/E;AAgEH;;;GAGG;AACH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/MessageFiles.svelte

@@ -2,55 +2,150 @@
   @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.
+
+  The file endpoint needs the bearer, which `<img src>` and download links cannot send. With
+  `loadFile` (e.g. the client's `fetchFile`) files are fetched with it and shown from blob URLs;
+  without it they link to `fileUrl` (cookie-authenticated hosts).
 -->
 <script lang="ts">
   import { cn, Icon, Lightbox } from '@classic-homes/theme-svelte';
+  import { SvelteMap } from 'svelte/reactivity';
   import type { FileState } from '../reducer.js';
   import { fileIcon, formatBytes } from '../message-format.js';
 
   interface Props {
     files: FileState[];
     fileUrl: (fileId: string) => string;
+    /** Fetch a file with the host's credentials; its blob is shown and downloaded. */
+    loadFile?: (fileId: string) => Promise<Blob>;
     class?: string;
   }
-  let { files, fileUrl, class: className }: Props = $props();
+  let { files, fileUrl, loadFile, class: className }: Props = $props();
+
+  type Loaded = { state: 'loading' } | { state: 'ready'; url: string } | { state: 'error' };
+  const loaded = new SvelteMap<string, Loaded>();
+  let destroyed = false;
+
+  function load(fileId: string): Promise<string | undefined> {
+    const known = loaded.get(fileId);
+    if (known?.state === 'ready') return Promise.resolve(known.url);
+    if (!loadFile) return Promise.resolve(undefined);
+    loaded.set(fileId, { state: 'loading' });
+    return loadFile(fileId).then(
+      (blob) => {
+        if (destroyed) return undefined;
+        const url = URL.createObjectURL(blob);
+        loaded.set(fileId, { state: 'ready', url });
+        return url;
+      },
+      () => {
+        if (!destroyed) loaded.set(fileId, { state: 'error' });
+        return undefined;
+      },
+    );
+  }
 
   const images = $derived(files.filter((f) => f.mimeType.startsWith('image/')));
   const others = $derived(files.filter((f) => !f.mimeType.startsWith('image/')));
+
+  // Thumbnails load at once; other files when they are downloaded.
+  $effect(() => {
+    if (!loadFile) return;
+    for (const file of images) if (!loaded.has(file.fileId)) void load(file.fileId);
+  });
+  $effect(() => () => {
+    destroyed = true;
+    for (const entry of loaded.values())
+      if (entry.state === 'ready') URL.revokeObjectURL(entry.url);
+  });
+
+  /** Where an image shows from: its blob once loaded, nothing while loading, else `fileUrl`. */
+  function srcFor(fileId: string): string | undefined {
+    if (!loadFile) return fileUrl(fileId);
+    const entry = loaded.get(fileId);
+    return entry?.state === 'ready' ? entry.url : undefined;
+  }
   const items = $derived(
-    images.map((f) => ({
-      id: f.fileId,
-      kind: 'image' as const,
-      src: fileUrl(f.fileId),
-      alt: f.name,
-      title: f.name,
-    })),
+    images.flatMap((f) => {
+      const src = srcFor(f.fileId);
+      return src ? [{ id: f.fileId, kind: 'image' as const, src, alt: f.name, title: f.name }] : [];
+    }),
   );
   let open = $state(false);
   let index = $state(0);
+
+  async function download(file: FileState): Promise<void> {
+    const url = await load(file.fileId);
+    if (!url) return;
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.name;
+    a.click();
+  }
+  const CARD =
+    'flex max-w-xs items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left text-sm shadow-sm transition hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
 </script>
 
+{#snippet card(file: FileState)}
+  <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">
+      {#if loaded.get(file.fileId)?.state === 'error'}
+        Could not download; try again
+      {:else if loaded.get(file.fileId)?.state === 'loading'}
+        Downloading…
+      {:else}
+        {formatBytes(file.bytes)}
+      {/if}
+    </span>
+  </span>
+  <Icon name="download" size={16} class="text-muted-foreground" />
+{/snippet}
+
 <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)}
+      {#each images as file (file.fileId)}
+        {@const src = srcFor(file.fileId)}
+        {@const state = loadFile ? loaded.get(file.fileId)?.state : 'ready'}
         <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>
+          {#if src}
+            <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 = Math.max(
+                  0,
+                  items.findIndex((item) => item.id === file.fileId),
+                );
+                open = true;
+              }}
+            >
+              <img class="block h-40 max-w-xs object-cover" {src} alt={file.name} loading="lazy" />
+            </button>
+          {:else if state === 'error'}
+            <button
+              type="button"
+              class="flex h-40 w-40 flex-col items-center justify-center gap-1 rounded-lg border border-border bg-muted p-2 text-center text-xs text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`Could not load ${file.name}; try again`}
+              onclick={() => void load(file.fileId)}
+            >
+              <Icon name="refresh" size={16} />
+              <span class="line-clamp-2 break-all">{file.name}</span>
+            </button>
+          {:else}
+            <div
+              class="h-40 w-40 animate-pulse rounded-lg border border-border bg-muted"
+              role="img"
+              aria-label={`Loading ${file.name}`}
+            ></div>
+          {/if}
         </li>
       {/each}
     </ul>
@@ -60,22 +155,20 @@
     <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"
+          {#if loadFile}
+            <button
+              type="button"
+              class={CARD}
+              aria-label={`Download ${file.name}`}
+              onclick={() => void download(file)}
             >
-              <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>
+              {@render card(file)}
+            </button>
+          {:else}
+            <a class={CARD} href={fileUrl(file.fileId)} download={file.name}>
+              {@render card(file)}
+            </a>
+          {/if}
         </li>
       {/each}
     </ul>

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

@@ -2,11 +2,17 @@ import type { FileState } from '../reducer.js';
 interface Props {
     files: FileState[];
     fileUrl: (fileId: string) => string;
+    /** Fetch a file with the host's credentials; its blob is shown and downloaded. */
+    loadFile?: (fileId: string) => Promise<Blob>;
     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.
+ *
+ * The file endpoint needs the bearer, which `<img src>` and download links cannot send. With
+ * `loadFile` (e.g. the client's `fetchFile`) files are fetched with it and shown from blob URLs;
+ * without it they link to `fileUrl` (cookie-authenticated hosts).
  */
 declare const MessageFiles: import("svelte").Component<Props, {}, "">;
 type MessageFiles = ReturnType<typeof MessageFiles>;

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

@@ -1 +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"}
+{"version":3,"file":"MessageFiles.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageFiles.svelte.ts"],"names":[],"mappings":"AAKA,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,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6IH;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/MessageItem.svelte

@@ -14,6 +14,8 @@
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    /** Fetch a file with the host's credentials (blob URLs); without it files link to `fileUrl`. */
+    loadFile?: (fileId: string) => Promise<Blob>;
     toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;

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

@@ -6,6 +6,8 @@ interface Props {
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    /** Fetch a file with the host's credentials (blob URLs); without it files link to `fileUrl`. */
+    loadFile?: (fileId: string) => Promise<Blob>;
     toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,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,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAmBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,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,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAmBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}