@classic-homes/agent-chat 0.11.0 → 0.13.0

package/dist/components/ChatLauncher.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  /**
+   * The floating launcher: a round button that opens the chat. It starts in a viewport corner;
+   * the user can drag it anywhere and it stays where it is dropped (kept inside the viewport),
+   * independent of where the chat window sits. It also reports what the chat
+   * is doing while collapsed (answering, an unseen answer, an error) and keeps the mock backend
+   * visible (AGENTS.md: mock must always be visible).
+   */
+  import { cn, Icon } from '@classic-homes/theme-svelte';
+  import type { LauncherStatus } from '../surface.svelte.js';
+  import { DRAG_THRESHOLD, clampLauncher, type Corner, type Point } from '../surface-geometry.js';
+
+  interface Props {
+    /** Where it sits until the user places it. */
+    corner?: Corner;
+    /** Where the user placed it (top-left, viewport px); null or absent uses `corner`. */
+    position?: Point | null;
+    status?: LauncherStatus;
+    /** The backend is the mock: show the marker on the button. */
+    mock?: boolean;
+    label?: string;
+    /** Id of the surface this button opens, for `aria-controls`. */
+    controls?: string;
+    expanded?: boolean;
+    draggable?: boolean;
+    onclick?: () => void;
+    /** The user dropped the button here (top-left, already inside the viewport). */
+    onmove?: (position: Point) => void;
+    class?: string;
+  }
+  let {
+    corner = 'bottom-right',
+    position = null,
+    status = 'idle',
+    mock = false,
+    label = 'Classic Agent',
+    controls,
+    expanded = false,
+    draggable = true,
+    onclick,
+    onmove,
+    class: className,
+  }: Props = $props();
+
+  let button: HTMLButtonElement | undefined = $state();
+  export function focus(): void {
+    button?.focus();
+  }
+
+  const STATUS_TEXT: Record<LauncherStatus, string> = {
+    idle: '',
+    streaming: 'answering',
+    unread: 'new answer',
+    error: 'something went wrong',
+  };
+  const name = $derived(
+    [label, STATUS_TEXT[status], mock ? 'mock backend' : ''].filter(Boolean).join(', '),
+  );
+
+  const CORNER_CLASS: Record<Corner, string> = {
+    'bottom-right': 'bottom-5 right-5',
+    'bottom-left': 'bottom-5 left-5',
+    'top-right': 'top-5 right-5',
+    'top-left': 'top-5 left-5',
+  };
+
+  const viewport = () => ({ width: window.innerWidth, height: window.innerHeight });
+  // A placed button has to stay reachable when the window shrinks.
+  let size = $state(typeof window === 'undefined' ? { width: 1280, height: 800 } : viewport());
+  const placed = $derived(position ? clampLauncher(position, size) : null);
+
+  let start: Point | null = null;
+  let offset = $state<Point>({ x: 0, y: 0 });
+  let dragging = $state(false);
+  // A drag ends in a click event on the same button; that click must not open the chat.
+  let suppressClick = false;
+
+  function onpointerdown(event: PointerEvent): void {
+    if (!draggable || event.button !== 0) return;
+    start = { x: event.clientX, y: event.clientY };
+    button?.setPointerCapture?.(event.pointerId);
+  }
+  function onpointermove(event: PointerEvent): void {
+    if (!start) return;
+    const dx = event.clientX - start.x;
+    const dy = event.clientY - start.y;
+    if (!dragging && Math.abs(dx) <= DRAG_THRESHOLD && Math.abs(dy) <= DRAG_THRESHOLD) return;
+    dragging = true;
+    offset = { x: dx, y: dy };
+  }
+  function onpointerup(event: PointerEvent): void {
+    if (!start) return;
+    start = null;
+    button?.releasePointerCapture?.(event.pointerId);
+    if (!dragging) return;
+    dragging = false;
+    suppressClick = true;
+    // Where the button is now, drag offset included.
+    const box = button?.getBoundingClientRect();
+    offset = { x: 0, y: 0 };
+    if (box) onmove?.(clampLauncher({ x: box.left, y: box.top }, viewport()));
+  }
+  function onpointercancel(): void {
+    start = null;
+    dragging = false;
+    offset = { x: 0, y: 0 };
+  }
+  function handleClick(): void {
+    if (suppressClick) {
+      suppressClick = false;
+      return;
+    }
+    onclick?.();
+  }
+</script>
+
+<svelte:window onresize={() => (size = viewport())} />
+
+<button
+  bind:this={button}
+  type="button"
+  class={cn(
+    'fixed z-40 flex size-14 touch-none select-none items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg outline-none ring-offset-background transition-shadow hover:shadow-xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    !placed && CORNER_CLASS[corner],
+    dragging ? 'scale-105 cursor-grabbing opacity-85' : 'cursor-pointer',
+    className,
+  )}
+  style:left={placed ? `${placed.x}px` : undefined}
+  style:top={placed ? `${placed.y}px` : undefined}
+  style:transform={dragging ? `translate(${offset.x}px, ${offset.y}px)` : undefined}
+  aria-label={name}
+  aria-expanded={expanded}
+  aria-controls={controls}
+  data-agent-launcher
+  data-corner={corner}
+  data-status={status}
+  onclick={handleClick}
+  {onpointerdown}
+  {onpointermove}
+  {onpointerup}
+  {onpointercancel}
+>
+  {#if status === 'streaming'}
+    <!-- Answering: an arc orbits just outside the button and the icon breathes. With reduced motion
+         the rim stays as a still ring. -->
+    <span
+      class="pointer-events-none absolute -inset-[7px] rounded-full animate-spin [animation-duration:1.1s] motion-reduce:animate-none"
+      style="background: conic-gradient(from 0deg, transparent 0 35%, hsl(var(--primary)) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));"
+      aria-hidden="true"
+      data-testid="launcher-ring"
+    ></span>
+  {/if}
+  <span class={cn('flex', status === 'streaming' && 'motion-safe:animate-pulse')}>
+    <Icon name="sparkles" size={24} />
+  </span>
+  {#if status === 'unread' || status === 'error'}
+    <span
+      class={cn(
+        'pointer-events-none absolute right-0.5 top-0.5 size-3.5 rounded-full border-2 border-background',
+        status === 'error' ? 'bg-destructive' : 'bg-success',
+      )}
+      aria-hidden="true"
+      data-testid="launcher-dot"
+    ></span>
+  {/if}
+  {#if mock}
+    <span
+      class="pointer-events-none absolute -bottom-1 left-1/2 -translate-x-1/2 rounded bg-warning px-1 text-[10px] font-bold leading-4 tracking-wide text-warning-foreground"
+      aria-hidden="true"
+      data-testid="launcher-mock"
+    >
+      MOCK
+    </span>
+  {/if}
+</button>

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

@@ -0,0 +1,26 @@
+import type { LauncherStatus } from '../surface.svelte.js';
+import { type Corner, type Point } from '../surface-geometry.js';
+interface Props {
+    /** Where it sits until the user places it. */
+    corner?: Corner;
+    /** Where the user placed it (top-left, viewport px); null or absent uses `corner`. */
+    position?: Point | null;
+    status?: LauncherStatus;
+    /** The backend is the mock: show the marker on the button. */
+    mock?: boolean;
+    label?: string;
+    /** Id of the surface this button opens, for `aria-controls`. */
+    controls?: string;
+    expanded?: boolean;
+    draggable?: boolean;
+    onclick?: () => void;
+    /** The user dropped the button here (top-left, already inside the viewport). */
+    onmove?: (position: Point) => void;
+    class?: string;
+}
+declare const ChatLauncher: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
+type ChatLauncher = ReturnType<typeof ChatLauncher>;
+export default ChatLauncher;
+//# sourceMappingURL=ChatLauncher.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLauncher.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ChatLauncher.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAiC,KAAK,MAAM,EAAE,KAAK,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG9F,UAAU,KAAK;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2HH,QAAA,MAAM,YAAY;iBArGG,IAAI;MAqGiC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/Composer.svelte

@@ -150,6 +150,8 @@
   function onpaste(event: ClipboardEvent): void {
     const pasted = [...(event.clipboardData?.files ?? [])];
     if (!upload || pasted.length === 0) return;
+    // Excel and Word put both text and a picture of the cells on the clipboard: paste the text.
+    if (event.clipboardData?.getData?.('text/plain')) return;
     // Pasting a screenshot or a copied file attaches it; plain text pastes as usual.
     event.preventDefault();
     void addFiles(pasted);
@@ -281,9 +283,11 @@
             class={cn(
               'text-xs tabular-nums text-muted-foreground',
               chars >= LIMITS.messageChars && 'text-destructive',
-            )}
-            aria-live="polite"
-            >{chars.toLocaleString()} / {LIMITS.messageChars.toLocaleString()}</span
+            )}>{chars.toLocaleString()} / {LIMITS.messageChars.toLocaleString()}</span
+          >
+          <!-- Announced once when the limit is crossed, not on every keystroke. -->
+          <span class="sr-only" aria-live="polite"
+            >{chars > LIMITS.messageChars ? 'Message is over the length limit' : ''}</span
           >
         {/if}
         {#if streaming}

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;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;IACnC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA6PH;;;;GAIG;AACH,QAAA,MAAM,QAAQ;iBAhOO,IAAI;qBAgO6B,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;IACnC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAiQH;;;;GAIG;AACH,QAAA,MAAM,QAAQ;iBApOO,IAAI;qBAoO6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/FloatingWindow.svelte

@@ -0,0 +1,280 @@
+<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 { onMount, 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;
+    /** A second, quieter line under the title, e.g. the conversation's name. */
+    subtitle?: string;
+    /** Replaces the mark before the title. */
+    icon?: Snippet;
+    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;
+    /**
+     * Take the keyboard when the window appears and nothing inside has it yet: the first text
+     * field, or the window itself. Without it Escape and Tab start from the page underneath.
+     */
+    autofocus?: boolean;
+    class?: string;
+  }
+  let {
+    surface,
+    title = 'Classic Agent',
+    subtitle,
+    icon,
+    id = 'agent-chat-window',
+    actions,
+    children,
+    dockable = true,
+    resizable = true,
+    onminimize,
+    autofocus = true,
+    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()));
+
+  let root: HTMLElement | undefined = $state();
+  // After the content has mounted (and had its own chance to focus something).
+  onMount(() => {
+    if (!autofocus || !root || root.contains(document.activeElement)) return;
+    const field = root.querySelector<HTMLElement>(
+      'textarea:not([disabled]), input:not([disabled])',
+    );
+    (field ?? root).focus({ preventScroll: true });
+  });
+
+  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, a11y_no_noninteractive_element_to_interactive_role -->
+<section
+  bind:this={root}
+  {id}
+  tabindex="-1"
+  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 outline-none',
+    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-12 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>
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <span
+        class="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary"
+        aria-hidden="true"
+      >
+        <Icon name="sparkles" size={14} />
+      </span>
+    {/if}
+    <div class="ml-1 flex min-w-0 flex-1 flex-col leading-tight">
+      <h2 id="{id}-title" class="truncate text-sm font-semibold">{title}</h2>
+      {#if subtitle}
+        <span class="truncate text-[11px] text-muted-foreground" data-testid="window-subtitle"
+          >{subtitle}</span
+        >
+      {/if}
+    </div>
+    {@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,35 @@
+/**
+   * 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;
+    /** A second, quieter line under the title, e.g. the conversation's name. */
+    subtitle?: string;
+    /** Replaces the mark before the title. */
+    icon?: Snippet;
+    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;
+    /**
+     * Take the keyboard when the window appears and nothing inside has it yet: the first text
+     * field, or the window itself. Without it Escape and Tab start from the page underneath.
+     */
+    autofocus?: boolean;
+    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,EAAoB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAWtD,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,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;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2MH,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"}