@classic-homes/agent-chat 0.0.0-stage → 0.1.1

package/dist/components/ConversationSidebar.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import { Button, Icon } from '@classic-homes/theme-svelte';
+  import type { ConversationSummary } from '@classic-homes/agent-contracts';
+
+  interface Props {
+    conversations: ConversationSummary[];
+    selectedId?: string | null;
+    loading?: boolean;
+    hasMore?: boolean;
+    query?: string;
+    onselect?: (conversationId: string) => void;
+    onnew?: () => void;
+    onsearch?: (query: string) => void;
+    onmore?: () => void;
+    onrename?: (conversationId: string, title: string) => void;
+    ondelete?: (conversationId: string) => void;
+  }
+  let {
+    conversations,
+    selectedId = null,
+    loading = false,
+    hasMore = false,
+    query = $bindable(''),
+    onselect,
+    onnew,
+    onsearch,
+    onmore,
+    onrename,
+    ondelete,
+  }: Props = $props();
+
+  function groupLabel(iso: string): string {
+    const d = new Date(iso);
+    const today = new Date();
+    const days = Math.floor(
+      (today.setHours(0, 0, 0, 0) - new Date(d).setHours(0, 0, 0, 0)) / 86_400_000,
+    );
+    if (days <= 0) return 'Today';
+    if (days === 1) return 'Yesterday';
+    if (days < 7) return 'This week';
+    if (days < 30) return 'This month';
+    return 'Older';
+  }
+  const groups = $derived.by(() => {
+    const map = new Map<string, ConversationSummary[]>();
+    for (const c of conversations) {
+      const key = groupLabel(c.updatedAt);
+      map.set(key, [...(map.get(key) ?? []), c]);
+    }
+    return [...map.entries()];
+  });
+  function rename(c: ConversationSummary): void {
+    const title = window.prompt('Rename conversation', c.title);
+    if (title && title.trim() && title !== c.title) onrename?.(c.conversationId, title.trim());
+  }
+</script>
+
+<nav class="agent-sidebar" aria-label="Conversations">
+  <div class="agent-sidebar__top">
+    <Button size="sm" onclick={() => onnew?.()}><Icon name="plus" size={14} /> New chat</Button>
+    <input
+      class="agent-sidebar__search"
+      type="search"
+      placeholder="Search"
+      aria-label="Search conversations"
+      bind:value={query}
+      oninput={() => onsearch?.(query)}
+    />
+  </div>
+  <div class="agent-sidebar__list">
+    {#each groups as [label, items] (label)}
+      <div class="agent-sidebar__group">{label}</div>
+      {#each items as c (c.conversationId)}
+        <div
+          class="agent-sidebar__row"
+          class:agent-sidebar__row--active={c.conversationId === selectedId}
+        >
+          <button
+            type="button"
+            class="agent-sidebar__title"
+            onclick={() => onselect?.(c.conversationId)}
+            title={c.title}
+          >
+            {c.title}{c.activeRequestId ? ' …' : ''}
+          </button>
+          <div class="agent-sidebar__actions">
+            {#if onrename}<button type="button" aria-label="Rename" onclick={() => rename(c)}
+                ><Icon name="edit" size={13} /></button
+              >{/if}
+            {#if ondelete}<button
+                type="button"
+                aria-label="Delete"
+                onclick={() => ondelete(c.conversationId)}><Icon name="trash" size={13} /></button
+              >{/if}
+          </div>
+        </div>
+      {/each}
+    {/each}
+    {#if !loading && conversations.length === 0}<div class="agent-sidebar__empty">
+        No conversations yet.
+      </div>{/if}
+    {#if hasMore}<Button variant="ghost" size="sm" {loading} onclick={() => onmore?.()}
+        >Load more</Button
+      >{/if}
+  </div>
+</nav>
+
+<style>
+  .agent-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-right: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+    width: 16rem;
+  }
+  .agent-sidebar__top {
+    display: grid;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
+  .agent-sidebar__search {
+    font: inherit;
+    font-size: 0.875rem;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    background: hsl(var(--background));
+    color: inherit;
+  }
+  .agent-sidebar__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 0.5rem 0.75rem;
+  }
+  .agent-sidebar__group {
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: hsl(var(--muted-foreground));
+    padding: 0.75rem 0.5rem 0.25rem;
+  }
+  .agent-sidebar__row {
+    display: flex;
+    align-items: center;
+    border-radius: 0.5rem;
+  }
+  .agent-sidebar__row:hover,
+  .agent-sidebar__row--active {
+    background: hsl(var(--muted));
+  }
+  .agent-sidebar__title {
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+    background: none;
+    border: 0;
+    padding: 0.375rem 0.5rem;
+    font: inherit;
+    font-size: 0.875rem;
+    color: inherit;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .agent-sidebar__actions {
+    display: none;
+    gap: 0.125rem;
+    padding-right: 0.25rem;
+  }
+  .agent-sidebar__row:hover .agent-sidebar__actions,
+  .agent-sidebar__row--active .agent-sidebar__actions {
+    display: flex;
+  }
+  .agent-sidebar__actions button {
+    border: 0;
+    background: none;
+    cursor: pointer;
+    color: hsl(var(--muted-foreground));
+    padding: 0.25rem;
+  }
+  .agent-sidebar__empty {
+    font-size: 0.8125rem;
+    color: hsl(var(--muted-foreground));
+    padding: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { ConversationSummary } from '@classic-homes/agent-contracts';
+interface Props {
+    conversations: ConversationSummary[];
+    selectedId?: string | null;
+    loading?: boolean;
+    hasMore?: boolean;
+    query?: string;
+    onselect?: (conversationId: string) => void;
+    onnew?: () => void;
+    onsearch?: (query: string) => void;
+    onmore?: () => void;
+    onrename?: (conversationId: string, title: string) => void;
+    ondelete?: (conversationId: string) => void;
+}
+declare const ConversationSidebar: import("svelte").Component<Props, {}, "query">;
+type ConversationSidebar = ReturnType<typeof ConversationSidebar>;
+export default ConversationSidebar;
+//# sourceMappingURL=ConversationSidebar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationSidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ConversationSidebar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,UAAU,KAAK;IACb,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AA4EH,QAAA,MAAM,mBAAmB,gDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/MessageItem.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import { Button, Icon } from '@classic-homes/theme-svelte';
+  import type { ChatMessage } from '../reducer.js';
+  import { errorTitle } from '../reducer.js';
+  import { parseMarkdown } from '../markdown.js';
+  import ToolTimeline from './ToolTimeline.svelte';
+  import UiFrame from './UiFrame.svelte';
+
+  interface Props {
+    message: ChatMessage;
+    streaming?: 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;
+  }
+  let {
+    message,
+    streaming = false,
+    sandboxOrigin,
+    fileUrl,
+    onnavigate,
+    onopenartifact,
+    onprompt,
+    ontool,
+    onnotify,
+    onretry,
+  }: 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(() => {
+    if (message.role !== 'assistant') return;
+    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.role === 'assistant' ? 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);
+  }
+
+  function formatBytes(n: number): string {
+    return n < 1024
+      ? `${n} B`
+      : n < 1048576
+        ? `${(n / 1024).toFixed(0)} KB`
+        : `${(n / 1048576).toFixed(1)} MB`;
+  }
+</script>
+
+{#if message.role === 'user'}
+  <div class="agent-msg agent-msg--user">
+    {#if message.contextLabel}<div class="agent-msg__context">
+        Context: {message.contextLabel}
+      </div>{/if}
+    <div class="agent-msg__bubble">{message.text}</div>
+    {#if message.attachments.length}
+      <ul class="agent-msg__attachments">
+        {#each message.attachments as file (file.fileId)}<li>
+            <Icon name="file" size={12} />
+            {file.name}
+          </li>{/each}
+      </ul>
+    {/if}
+  </div>
+{:else}
+  <div class="agent-msg agent-msg--assistant" data-status={message.status}>
+    <ToolTimeline tools={message.tools} delegations={message.delegations} {streaming} />
+    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+    <div class="agent-markdown" onclick={handleClick}>
+      {@html html}
+      {#if streaming && !message.text}<span class="agent-msg__thinking">Thinking…</span>{/if}
+    </div>
+    {#if message.artifacts.length}
+      <div class="agent-msg__chips">
+        {#each message.artifacts as a (a.artifactId)}
+          <Button variant="outline" size="sm" onclick={() => onopenartifact?.(a.artifactId)}>
+            <Icon name="file-text" size={14} />
+            {a.title ?? a.artifactId}{a.open ? '…' : ''}
+          </Button>
+        {/each}
+      </div>
+    {/if}
+    {#each message.ui as resource (resource.callId + resource.uri)}
+      <UiFrame {resource} {sandboxOrigin} {onprompt} {ontool} {onnotify} />
+    {/each}
+    {#if message.files.length}
+      <ul class="agent-msg__files">
+        {#each message.files as file (file.fileId)}
+          <li>
+            {#if file.mimeType.startsWith('image/')}
+              <img
+                class="agent-msg__image"
+                src={fileUrl(file.fileId)}
+                alt={file.name}
+                loading="lazy"
+              />
+            {/if}
+            <a href={fileUrl(file.fileId)} download={file.name}
+              ><Icon name="download" size={14} /> {file.name} ({formatBytes(file.bytes)})</a
+            >
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if message.proposals.length}
+      <div class="agent-msg__note">
+        Proposed {message.proposals.length} document edit{message.proposals.length === 1
+          ? ''
+          : 's'}; apply them from the Excel or Word add-in.
+      </div>
+    {/if}
+    {#if message.error}
+      <div class="agent-msg__error" role="alert">
+        <strong>{errorTitle(message.error.code)}.</strong>
+        {message.error.message}
+        {#if message.error.retryable && onretry}<Button variant="link" size="sm" onclick={onretry}
+            >Try again</Button
+          >{/if}
+      </div>
+    {:else if message.status === 'cancelled'}
+      <div class="agent-msg__note">Stopped.</div>
+    {:else if message.status === 'incomplete'}
+      <div class="agent-msg__note">The answer was cut short.</div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .agent-msg {
+    padding: 0.5rem 1rem;
+    max-width: 48rem;
+  }
+  .agent-msg--user {
+    margin-left: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  .agent-msg__bubble {
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    border-radius: 1rem 1rem 0.25rem 1rem;
+    padding: 0.5rem 0.875rem;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .agent-msg__context,
+  .agent-msg__attachments,
+  .agent-msg__note {
+    font-size: 0.75rem;
+    color: hsl(var(--muted-foreground));
+  }
+  .agent-msg__attachments,
+  .agent-msg__files {
+    list-style: none;
+    padding: 0;
+    margin: 0.25rem 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .agent-msg__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin: 0.5rem 0;
+  }
+  .agent-msg__image {
+    display: block;
+    max-width: 100%;
+    max-height: 24rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+  .agent-msg__thinking {
+    color: hsl(var(--muted-foreground));
+    font-style: italic;
+  }
+  .agent-msg__error {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    background: hsl(var(--destructive) / 0.1);
+    color: hsl(var(--destructive));
+    font-size: 0.875rem;
+  }
+  :global(.agent-markdown) {
+    overflow-wrap: anywhere;
+    line-height: 1.6;
+  }
+  :global(.agent-markdown pre) {
+    background: hsl(var(--muted));
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    overflow: auto;
+    font-size: 0.8125rem;
+  }
+  :global(.agent-markdown code) {
+    font-family: ui-monospace, monospace;
+    font-size: 0.875em;
+  }
+  :global(.agent-markdown table) {
+    border-collapse: collapse;
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+  }
+  :global(.agent-markdown th),
+  :global(.agent-markdown td) {
+    border: 1px solid hsl(var(--border));
+    padding: 0.25rem 0.5rem;
+    text-align: left;
+  }
+  :global(.agent-markdown blockquote) {
+    border-left: 3px solid hsl(var(--border));
+    margin: 0.5rem 0;
+    padding-left: 0.75rem;
+    color: hsl(var(--muted-foreground));
+  }
+  :global(.agent-markdown img) {
+    max-width: 100%;
+    border-radius: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { ChatMessage } from '../reducer.js';
+interface Props {
+    message: ChatMessage;
+    streaming?: 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;
+}
+declare const MessageItem: import("svelte").Component<Props, {}, "">;
+type MessageItem = ReturnType<typeof MessageItem>;
+export default MessageItem;
+//# sourceMappingURL=MessageItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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;CACtB;AA6IH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/MessageList.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { ChatMessage } from '../reducer.js';
+  import MessageItem from './MessageItem.svelte';
+
+  interface Props {
+    messages: ChatMessage[];
+    streaming: 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;
+    empty?: import('svelte').Snippet;
+  }
+  let {
+    messages,
+    streaming,
+    sandboxOrigin,
+    fileUrl,
+    onnavigate,
+    onopenartifact,
+    onprompt,
+    ontool,
+    onnotify,
+    onretry,
+    empty,
+  }: Props = $props();
+
+  let container: HTMLDivElement | undefined = $state();
+  let follow = true;
+  const FOLLOW_THRESHOLD_PX = 80;
+  function onscroll(): void {
+    if (!container) return;
+    follow =
+      container.scrollTop + container.clientHeight >= container.scrollHeight - FOLLOW_THRESHOLD_PX;
+  }
+  const count = $derived(messages.length);
+  const lastRole = $derived(messages[messages.length - 1]?.role);
+  let prevCount = 0;
+  $effect(() => {
+    void messages;
+    if (streaming && follow && container) container.scrollTop = container.scrollHeight;
+  });
+  $effect(() => {
+    void count;
+    void lastRole;
+    if (count > prevCount && lastRole === 'user') follow = true;
+    prevCount = count;
+    void tick().then(() => {
+      if (container && follow) container.scrollTop = container.scrollHeight;
+    });
+  });
+  // Announce the finished answer once, not every token.
+  const announcement = $derived.by(() => {
+    if (streaming) return '';
+    const last = messages[messages.length - 1];
+    return last?.role === 'assistant' ? last.text : '';
+  });
+</script>
+
+<div class="sr-only" aria-live="polite" aria-atomic="true">{announcement}</div>
+<div class="agent-messages" bind:this={container} {onscroll} role="log" aria-label="Conversation">
+  {#if messages.length === 0}
+    {#if empty}{@render empty()}{/if}
+  {:else}
+    {#each messages as message, i (message.id)}
+      <MessageItem
+        {message}
+        streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
+        {sandboxOrigin}
+        {fileUrl}
+        {onnavigate}
+        {onopenartifact}
+        {onprompt}
+        {ontool}
+        {onnotify}
+        onretry={i === messages.length - 1 ? onretry : undefined}
+      />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+  .agent-messages {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { ChatMessage } from '../reducer.js';
+interface Props {
+    messages: ChatMessage[];
+    streaming: 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;
+    empty?: import('svelte').Snippet;
+}
+declare const MessageList: import("svelte").Component<Props, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;
+//# sourceMappingURL=MessageList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,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,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAmEH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/ModeBanner.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { BackendMode } from '@classic-homes/agent-contracts';
+  /** Mock must always be visible (AGENTS.md). Rendered whenever the stream reports `mock`. */
+  let { mode }: { mode: BackendMode | undefined } = $props();
+</script>
+
+{#if mode === 'mock'}
+  <div class="agent-mode-banner" role="status" data-testid="mode-banner">
+    MOCK BACKEND — simulated responses; no AI model or company system is contacted.
+  </div>
+{/if}
+
+<style>
+  .agent-mode-banner {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: hsl(var(--warning-foreground, 0 0% 10%));
+    background: hsl(var(--warning, 45 93% 58%));
+    border-bottom: 1px solid hsl(var(--border));
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { BackendMode } from '@classic-homes/agent-contracts';
+type $$ComponentProps = {
+    mode: BackendMode | undefined;
+};
+declare const ModeBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModeBanner = ReturnType<typeof ModeBanner>;
+export default ModeBanner;
+//# sourceMappingURL=ModeBanner.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModeBanner.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ModeBanner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAEjE,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,CAAC;AAiB5D,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}