@classic-homes/agent-chat 0.2.1 → 0.4.0

package/dist/components/ToolTimeline.svelte

@@ -1,62 +1,146 @@
+<!--
+  @component
+  What the agent did in a turn: tool calls (status icon, readable name, duration) and the
+  specialists it delegated to, with their own calls nested. Open while the turn runs and folded
+  away when it finishes, unless the reader toggled it.
+-->
 <script lang="ts">
-  import { cn, Icon } from '@classic-homes/theme-svelte';
+  import { cn, Collapsible, Icon, Spinner, type IconName } from '@classic-homes/theme-svelte';
   import type { DelegationState, ToolCallState } from '../reducer.js';
+  import { formatDuration, groupToolRuns, humanizeToolName } from '../message-format.js';
 
-  let {
-    tools,
-    delegations,
-    streaming = false,
-  }: { tools: ToolCallState[]; delegations: DelegationState[]; streaming?: boolean } = $props();
-  let expanded = $state(false);
-  const running = $derived(tools.filter((t) => !t.status).length);
-  const label = $derived.by(() => {
-    if (streaming && running > 0)
-      return `Working: ${tools
-        .filter((t) => !t.status)
-        .map((t) => t.name)
-        .join(', ')}`;
-    const children = delegations.map((d) => d.child);
-    const parts = [tools.length ? `${tools.length} tool call${tools.length === 1 ? '' : 's'}` : ''];
-    if (children.length) parts.push(`via ${[...new Set(children)].join(', ')}`);
-    return parts.filter(Boolean).join(' ');
+  interface Props {
+    tools: ToolCallState[];
+    delegations: DelegationState[];
+    streaming?: boolean;
+    /** Readable names by tool name (with or without the `server/` prefix). */
+    toolLabels?: Record<string, string>;
+    class?: string;
+  }
+  let { tools, delegations, streaming = false, toolLabels, class: className }: Props = $props();
+
+  /** The reader's choice; until they make one the timeline follows the turn. */
+  let toggled = $state<boolean | null>(null);
+  const open = $derived(toggled ?? streaming);
+  let details = $state<Record<string, boolean>>({});
+
+  const running = $derived(tools.filter((t) => !t.status));
+  const failed = $derived(
+    tools.filter((t) => t.status === 'error' || t.status === 'unauthenticated').length,
+  );
+  const refused = $derived(tools.filter((t) => t.status === 'refused').length);
+  const groups = $derived(groupToolRuns(tools, delegations));
+
+  function labelFor(tool: ToolCallState): string {
+    const full = tool.server ? `${tool.server}/${tool.name}` : tool.name;
+    return toolLabels?.[full] ?? toolLabels?.[tool.name] ?? humanizeToolName(tool.name);
+  }
+  function statusIcon(tool: ToolCallState): { icon: IconName; tone: string; label: string } {
+    switch (tool.status) {
+      case 'ok':
+        return { icon: 'check-circle', tone: 'text-success', label: 'Done' };
+      case 'error':
+        return { icon: 'x-circle', tone: 'text-destructive', label: 'Failed' };
+      case 'refused':
+        return { icon: 'alert-triangle', tone: 'text-warning', label: 'Refused' };
+      case 'unauthenticated':
+        return { icon: 'lock', tone: 'text-warning', label: 'Needs sign-in' };
+      default:
+        return { icon: 'circle', tone: 'text-muted-foreground', label: 'Interrupted' };
+    }
+  }
+
+  const summary = $derived.by(() => {
+    if (streaming && running.length) return `${labelFor(running[running.length - 1]!)}…`;
+    const parts: string[] = [];
+    if (tools.length) parts.push(`${tools.length} tool call${tools.length === 1 ? '' : 's'}`);
+    const children = [...new Set(delegations.map((d) => d.child))];
+    if (children.length) parts.push(`via ${children.join(', ')}`);
+    if (failed) parts.push(`${failed} failed`);
+    if (refused) parts.push(`${refused} refused`);
+    return parts.join(' · ') || 'Working…';
   });
 </script>
 
-{#if tools.length > 0 || delegations.length > 0}
-  <div class="mb-2 mt-1 text-xs text-muted-foreground">
-    <button
-      type="button"
-      class="inline-flex items-center gap-1.5 rounded-sm py-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      onclick={() => (expanded = !expanded)}
-      aria-expanded={expanded}
-    >
-      <Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={14} />
-      <span>{label}</span>
-      {#if streaming && running > 0}<span
-          class="size-2 rounded-full bg-primary motion-safe:animate-pulse"
-          aria-hidden="true"
-        ></span>{/if}
-    </button>
-    {#if expanded}
-      <ol class="mt-1.5 grid gap-1 pl-4">
-        {#each tools as tool (tool.callId)}
-          <li class="grid grid-cols-[auto_1fr_auto] gap-x-2">
-            <span class="font-mono">{tool.server ? `${tool.server}/` : ''}{tool.name}</span>
-            <span>{tool.agent}</span>
-            <span
-              class={cn(
-                (tool.status === 'error' || tool.status === 'refused') && 'text-destructive',
-              )}
-              >{tool.status ?? 'running'}{tool.durationMs !== undefined
-                ? ` · ${tool.durationMs} ms`
-                : ''}</span
-            >
-            {#if tool.summary}<div class="col-span-full whitespace-pre-wrap opacity-80">
-                {tool.summary}
-              </div>{/if}
-          </li>
-        {/each}
-      </ol>
+{#snippet toolRow(tool: ToolCallState)}
+  {@const s = statusIcon(tool)}
+  {@const preview = [tool.argsPreview, tool.summary].filter(Boolean).join('\n→ ')}
+  <li class="min-w-0">
+    <div class="flex items-center gap-2">
+      {#if !tool.status && streaming}
+        <Spinner size="sm" label="Running" class="shrink-0" />
+      {:else}
+        <span class={cn('shrink-0', s.tone)} title={s.label}>
+          <Icon name={s.icon} size={14} />
+          <span class="sr-only">{s.label}</span>
+        </span>
+      {/if}
+      <span class="min-w-0 truncate text-foreground">{labelFor(tool)}</span>
+      {#if tool.server}<span class="hidden shrink-0 font-mono sm:inline">{tool.server}</span>{/if}
+      {#if tool.durationMs !== undefined}
+        <span class="ml-auto shrink-0 tabular-nums">{formatDuration(tool.durationMs)}</span>
+      {/if}
+    </div>
+    {#if preview}
+      <button
+        type="button"
+        class={cn(
+          'ml-[22px] mt-0.5 block max-w-full whitespace-pre-wrap rounded text-left font-mono text-[11px] leading-snug [overflow-wrap:anywhere] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          !details[tool.callId] && 'line-clamp-2',
+        )}
+        aria-expanded={!!details[tool.callId]}
+        aria-label={details[tool.callId] ? 'Show less' : 'Show the full call'}
+        onclick={() => (details[tool.callId] = !details[tool.callId])}>{preview}</button
+      >
     {/if}
-  </div>
+  </li>
+{/snippet}
+
+{#if tools.length > 0 || delegations.length > 0}
+  <Collapsible
+    {open}
+    onOpenChange={(next) => (toggled = next)}
+    class={cn('text-xs text-muted-foreground', className)}
+    triggerClass="gap-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground"
+    contentClass="pt-1.5"
+  >
+    {#snippet trigger()}
+      <span class="inline-flex items-center gap-1.5">
+        {#if streaming && running.length}
+          <Spinner size="sm" label="Working" />
+        {:else}
+          <Icon name="tool" size={12} />
+        {/if}
+        <span>{summary}</span>
+      </span>
+    {/snippet}
+    <div class="grid gap-2 border-l border-border pl-3">
+      {#each groups as group, gi (group.delegation?.childRunId ?? `top-${gi}`)}
+        {#if group.delegation}
+          <div class="grid gap-1">
+            <div class="flex items-center gap-2 text-foreground">
+              {#if group.delegation.status === 'start' && streaming}
+                <Spinner size="sm" label="Working" class="shrink-0" />
+              {:else}
+                <Icon name="corner-down-right" size={14} class="shrink-0 text-muted-foreground" />
+              {/if}
+              <span>Delegated to <span class="font-medium">{group.delegation.child}</span></span>
+            </div>
+            {#if group.delegation.summary}
+              <p class="ml-[22px] [overflow-wrap:anywhere]">{group.delegation.summary}</p>
+            {/if}
+            {#if group.tools.length}
+              <ol class="ml-[22px] grid gap-1">
+                {#each group.tools as tool (tool.callId)}{@render toolRow(tool)}{/each}
+              </ol>
+            {/if}
+          </div>
+        {:else}
+          <ol class="grid gap-1">
+            {#each group.tools as tool (tool.callId)}{@render toolRow(tool)}{/each}
+          </ol>
+        {/if}
+      {/each}
+    </div>
+  </Collapsible>
 {/if}

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

@@ -1,10 +1,18 @@
 import type { DelegationState, ToolCallState } from '../reducer.js';
-type $$ComponentProps = {
+interface Props {
     tools: ToolCallState[];
     delegations: DelegationState[];
     streaming?: boolean;
-};
-declare const ToolTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
+    /** Readable names by tool name (with or without the `server/` prefix). */
+    toolLabels?: Record<string, string>;
+    class?: string;
+}
+/**
+ * What the agent did in a turn: tool calls (status icon, readable name, duration) and the
+ * specialists it delegated to, with their own calls nested. Open while the turn runs and folded
+ * away when it finishes, unless the reader toggled it.
+ */
+declare const ToolTimeline: import("svelte").Component<Props, {}, "">;
 type ToolTimeline = ReturnType<typeof ToolTimeline>;
 export default ToolTimeline;
 //# sourceMappingURL=ToolTimeline.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToolTimeline.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAAC,WAAW,EAAE,eAAe,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAuD1G,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ToolTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToolTimeline.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAIlE,UAAU,KAAK;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6HH;;;;GAIG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/UserMessage.svelte

@@ -0,0 +1,46 @@
+<!--
+  @component
+  The user's turn: attachments and context above a right-aligned muted bubble, then the action bar.
+-->
+<script lang="ts">
+  import { Icon } from '@classic-homes/theme-svelte';
+  import type { UserMessage } from '../reducer.js';
+  import { fileIcon, formatBytes } from '../message-format.js';
+  import MessageActions from './MessageActions.svelte';
+
+  interface Props {
+    message: UserMessage;
+    last?: boolean;
+  }
+  let { message, last = false }: Props = $props();
+</script>
+
+<div class="group/message flex flex-col items-end gap-1 px-4 py-2" data-role="user">
+  {#if message.attachments.length || message.contextLabel}
+    <ul class="flex max-w-[85%] flex-wrap justify-end gap-1.5" aria-label="Attached">
+      {#if message.contextLabel}
+        <li
+          class="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground"
+        >
+          <Icon name="link" size={12} />
+          {message.contextLabel}
+        </li>
+      {/if}
+      {#each message.attachments as file (file.fileId)}
+        <li
+          class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-xs"
+        >
+          <Icon name={fileIcon(file.mimeType)} size={14} class="shrink-0 text-muted-foreground" />
+          <span class="truncate text-foreground">{file.name}</span>
+          <span class="shrink-0 text-muted-foreground">{formatBytes(file.bytes)}</span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  <div
+    class="max-w-[85%] whitespace-pre-wrap rounded-2xl rounded-br-md bg-muted px-4 py-2.5 text-foreground [overflow-wrap:anywhere]"
+  >
+    {message.text}
+  </div>
+  <MessageActions text={message.text} createdAt={message.createdAt} visible={last} align="end" />
+</div>

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

@@ -0,0 +1,10 @@
+import type { UserMessage } from '../reducer.js';
+interface Props {
+    message: UserMessage;
+    last?: boolean;
+}
+/** The user's turn: attachments and context above a right-aligned muted bubble, then the action bar. */
+declare const UserMessage: import("svelte").Component<Props, {}, "">;
+type UserMessage = ReturnType<typeof UserMessage>;
+export default UserMessage;
+//# sourceMappingURL=UserMessage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UserMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAqCH,wGAAwG;AACxG,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/composer.svelte.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=composer.svelte.test.d.ts.map

package/dist/components/composer.svelte.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.svelte.test.d.ts","sourceRoot":"","sources":["../../src/lib/components/composer.svelte.test.ts"],"names":[],"mappings":""}

package/dist/components/composer.svelte.test.js

@@ -0,0 +1,162 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { LIMITS } from '@classic-homes/agent-contracts';
+import { promptMenuKeyAction } from '../composer-keys.js';
+import { filterPrompts, promptQuery } from '../composer-prompts.js';
+import { formatDuration, groupToolRuns, humanizeToolName } from '../message-format.js';
+import Composer from './Composer.svelte';
+import ToolTimeline from './ToolTimeline.svelte';
+afterEach(() => cleanup());
+const prompts = [
+    {
+        id: '1',
+        label: 'Weekly recap',
+        description: 'Summary for a community',
+        text: 'Recap {{community}}',
+    },
+    { id: '2', label: 'Lot report', text: async () => 'Report on lot {{lot}}' },
+    { id: '3', label: 'Draft email', description: 'Weekly buyer update', text: 'Email' },
+];
+describe('prompt menu helpers', () => {
+    it('reads the query only from a bare /command', () => {
+        expect(promptQuery('/')).toBe('');
+        expect(promptQuery('/wee')).toBe('wee');
+        expect(promptQuery('/weekly recap')).toBeNull();
+        expect(promptQuery('hello /x')).toBeNull();
+    });
+    it('ranks label matches over description matches', () => {
+        expect(filterPrompts(prompts, 'weekly').map((p) => p.id)).toEqual(['1', '3']);
+        expect(filterPrompts(prompts, 'lot').map((p) => p.id)).toEqual(['2']);
+        expect(filterPrompts(prompts, '')).toHaveLength(3);
+    });
+    it('maps keys while the menu is open', () => {
+        expect(promptMenuKeyAction({ key: 'ArrowDown' })).toBe('next');
+        expect(promptMenuKeyAction({ key: 'Enter' })).toBe('choose');
+        expect(promptMenuKeyAction({ key: 'Enter', shiftKey: true })).toBeNull();
+        expect(promptMenuKeyAction({ key: 'Enter', isComposing: true })).toBeNull();
+        expect(promptMenuKeyAction({ key: 'Escape' })).toBe('close');
+    });
+});
+describe('tool helpers', () => {
+    it('humanizes names and durations', () => {
+        expect(humanizeToolName('hotsheet/list_plans')).toBe('List plans');
+        expect(humanizeToolName('getLotDetails')).toBe('Get lot details');
+        expect(formatDuration(640)).toBe('640 ms');
+        expect(formatDuration(1234)).toBe('1.2 s');
+        expect(formatDuration(75_000)).toBe('1 min 15 s');
+    });
+    it('groups calls under their delegation', () => {
+        const t = (callId, runId) => ({ callId, runId });
+        const groups = groupToolRuns([t('a', 'root'), t('b', 'child-1'), t('c', 'root')], [{ child: 'research', childRunId: 'child-1', status: 'end' }]);
+        expect(groups.map((g) => [g.delegation?.child, g.tools.map((x) => x.callId)])).toEqual([
+            [undefined, ['a', 'c']],
+            ['research', ['b']],
+        ]);
+    });
+});
+describe('Composer', () => {
+    it('inserts a saved prompt from the / menu with the keyboard', async () => {
+        const user = userEvent.setup();
+        render(Composer, { props: { prompts } });
+        const box = screen.getByRole('combobox', { name: 'Message' });
+        await user.type(box, '/lot');
+        const listbox = await screen.findByRole('listbox', { name: 'Saved prompts' });
+        expect(listbox.textContent).toContain('Lot report');
+        await user.keyboard('{Enter}');
+        await waitFor(() => expect(box.value).toBe('Report on lot {{lot}}'));
+        expect(screen.queryByRole('listbox')).toBeNull();
+    });
+    it('closes the menu on Escape and keeps the draft', async () => {
+        const user = userEvent.setup();
+        render(Composer, { props: { prompts } });
+        const box = screen.getByRole('combobox', { name: 'Message' });
+        await user.type(box, '/');
+        await screen.findByRole('listbox');
+        await user.keyboard('{ArrowDown}{Escape}');
+        await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull());
+        expect(box.value).toBe('/');
+    });
+    it('uploads pasted and dropped files and shows them while uploading', async () => {
+        let finish = () => { };
+        const upload = vi.fn((file) => new Promise((resolve) => {
+            finish = resolve;
+            void file;
+        }));
+        render(Composer, { props: { upload } });
+        const box = screen.getByRole('textbox', { name: 'Message' });
+        const file = new File(['x'], 'shot.png', { type: 'image/png' });
+        await fireEvent.paste(box, { clipboardData: { files: [file], types: ['Files'] } });
+        expect(upload).toHaveBeenCalledWith(file);
+        expect(await screen.findByText('shot.png')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' }).hasAttribute('disabled')).toBe(true);
+        finish({ fileId: 'f1', name: 'shot.png', mimeType: 'image/png', bytes: 1, status: 'uploaded' });
+        expect(await screen.findByRole('button', { name: 'Remove shot.png' })).toBeTruthy();
+        const card = screen.getByRole('group', { name: 'Message composer' });
+        const dropped = new File(['y'], 'plan.pdf', { type: 'application/pdf' });
+        const dataTransfer = { types: ['Files'], files: [dropped], dropEffect: 'none' };
+        await fireEvent.dragEnter(card, { dataTransfer });
+        expect(screen.getByText('Drop files to attach')).toBeTruthy();
+        await fireEvent.drop(card, { dataTransfer });
+        expect(upload).toHaveBeenLastCalledWith(dropped);
+        expect(screen.queryByText('Drop files to attach')).toBeNull();
+    });
+    it('counts characters near the limit', async () => {
+        const { rerender } = render(Composer, { props: { value: 'short' } });
+        expect(screen.queryByText(/\/ 8,000/)).toBeNull();
+        await rerender({ value: 'x'.repeat(Math.ceil(LIMITS.messageChars * 0.85)) });
+        expect(screen.getByText(/\/ 8,000/)).toBeTruthy();
+    });
+});
+describe('ToolTimeline', () => {
+    const tool = (patch) => ({
+        callId: 'c1',
+        name: 'list_plans',
+        server: 'hotsheet',
+        argsPreview: '{"community":"Wolf Ranch"}',
+        agent: 'classic-agent',
+        runId: 'root',
+        ...patch,
+    });
+    it('is open with a spinner while running and folds when the turn ends', async () => {
+        const { rerender } = render(ToolTimeline, {
+            props: { tools: [tool({})], delegations: [], streaming: true },
+        });
+        expect(screen.getAllByText('List plans…').length).toBeGreaterThan(0);
+        expect(screen.getByText('{"community":"Wolf Ranch"}')).toBeTruthy();
+        await rerender({
+            tools: [tool({ status: 'ok', durationMs: 1234 })],
+            delegations: [],
+            streaming: false,
+        });
+        const trigger = screen.getByRole('button', { name: /1 tool call/ });
+        expect(trigger.getAttribute('aria-expanded')).toBe('false');
+        await userEvent.click(trigger);
+        expect(screen.getByText('1.2 s')).toBeTruthy();
+    });
+    it('uses host labels, nests delegations and counts failures', async () => {
+        render(ToolTimeline, {
+            props: {
+                streaming: false,
+                toolLabels: { 'hotsheet/list_plans': 'Look up plans' },
+                tools: [
+                    tool({ status: 'ok' }),
+                    tool({
+                        callId: 'c2',
+                        name: 'web_search',
+                        server: undefined,
+                        runId: 'child',
+                        status: 'error',
+                    }),
+                ],
+                delegations: [{ child: 'research', childRunId: 'child', status: 'end' }],
+            },
+        });
+        const trigger = screen.getByRole('button', { name: /2 tool calls · via research · 1 failed/ });
+        await userEvent.click(trigger);
+        expect(screen.getByText('Look up plans')).toBeTruthy();
+        expect(screen.getByText('research')).toBeTruthy();
+        expect(screen.getByText('Web search')).toBeTruthy();
+        expect(screen.getByText('Failed')).toBeTruthy();
+    });
+});

package/dist/components/messages.svelte.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=messages.svelte.test.d.ts.map

package/dist/components/messages.svelte.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.svelte.test.d.ts","sourceRoot":"","sources":["../../src/lib/components/messages.svelte.test.ts"],"names":[],"mappings":""}