feat(chat): rich, correctly-labelled tool calls on assistant-ui elements

app/src/AppRoutes.guards.test.tsx

@@ -65,6 +65,9 @@ vi.mock('./pages/Accounts', () => ({ default: () => <div /> }));
 vi.mock('./pages/Brain', () => ({ default: () => <div /> }));
 vi.mock('./pages/dev/AgentInsightsPreview', () => ({ default: () => <div /> }));
 vi.mock('./pages/dev/UiGallery', () => ({ default: () => <div data-testid="page-ui-gallery" /> }));
+vi.mock('./pages/dev/ToolCallGallery', () => ({
+  default: () => <div data-testid="page-tool-call-gallery" />,
+}));
 vi.mock('./pages/Invites', () => ({ default: () => <div data-testid="page-invites" /> }));
 vi.mock('./pages/Notifications', () => ({
   default: () => <div data-testid="page-notifications" />,
@@ -102,6 +105,7 @@ const OWNED: Array<{ path: string; page: string; guard: Guard }> = [
   { path: '/notifications', page: 'page-notifications', guard: 'protected' },
   { path: '/ptt-overlay', page: 'page-ptt-overlay', guard: 'none' },
   { path: '/dev/ui', page: 'page-ui-gallery', guard: 'none' },
+  { path: '/dev/tools', page: 'page-tool-call-gallery', guard: 'none' },
 ];
 
 describe('AppRoutes — each route renders its page behind the right guard', () => {
@@ -200,6 +204,7 @@ describe('AppRoutes — the whole route table stays classified', () => {
     '/ptt-overlay': 'none',
     '/dev/agent-insights': 'none',
     '/dev/ui': 'none',
+    '/dev/tools': 'none',
     '/dev/assistant-ui': 'none',
     '*': 'none',
   };

app/src/AppRoutes.tsx

@@ -12,6 +12,7 @@ import Activity from './pages/Activity';
 import Brain from './pages/Brain';
 import AgentInsightsPreview from './pages/dev/AgentInsightsPreview';
 import AssistantUiDemoPage from './pages/dev/assistant-ui-demo';
+import ToolCallGallery from './pages/dev/ToolCallGallery';
 import UiGallery from './pages/dev/UiGallery';
 import FlowCanvasPage, { FlowCanvasDraftPage } from './pages/FlowCanvasPage';
 import FlowsPage from './pages/FlowsPage';
@@ -260,6 +261,9 @@ const AppRoutes = ({ location }: AppRoutesProps = {}) => {
           {/* Gallery of every shared UI primitive, in the active theme. */}
           <Route path="/dev/ui" element={<UiGallery />} />
 
+          {/* Tool-call presentation: every state and the whole core catalog. */}
+          <Route path="/dev/tools" element={<ToolCallGallery />} />
+
           {/* The upstream assistant-ui `base` demo on a mock runtime. */}
           <Route path="/dev/assistant-ui" element={<AssistantUiDemoPage />} />
         </>

app/src/components/assistant-ui/elements/code-diff.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+/**
+ * assistant-ui's code-diff element: a file's added and removed lines.
+ *
+ * Vendored from assistant-ui `packages/ui/src/components/react/assistant-ui/elements/code-diff.tsx`
+ * (commit 1abca347). Only the `cn` import path differs from upstream.
+ */
+import { cn } from '@/components/assistant-ui/lib/utils';
+import type { ComponentProps } from 'react';
+
+import { codeScroll, codeSurface, mono, paper } from './surfaces';
+
+export type DiffKind = 'context' | 'added' | 'removed';
+
+export interface DiffLine {
+  kind: DiffKind;
+  text: string;
+}
+
+const GUTTER: Record<DiffKind, string> = { context: '', added: '+', removed: '−' };
+
+export function CodeDiff({
+  filename,
+  additions,
+  deletions,
+  lines,
+  cycle,
+  className,
+  ...props
+}: Omit<
+  ComponentProps<'div'>,
+  'children' | 'filename' | 'additions' | 'deletions' | 'lines' | 'cycle'
+> & {
+  filename: string;
+  additions: number;
+  deletions: number;
+  lines: readonly DiffLine[];
+  cycle: number;
+}) {
+  return (
+    <div
+      data-slot="code-diff"
+      className={cn(
+        paper,
+        'w-full max-w-md overflow-hidden rounded-2xl font-mono text-xs',
+        className
+      )}
+      {...props}>
+      <div className="flex items-center justify-between px-4 pt-3 pb-2">
+        <span className="text-foreground/90">{filename}</span>
+        <span className={cn(mono, 'tabular-nums')}>
+          <span className="text-emerald-600 dark:text-emerald-400">+{additions}</span>{' '}
+          <span className="text-red-600 dark:text-red-400">−{deletions}</span>
+        </span>
+      </div>
+      <div className={codeScroll}>
+        <div className={codeSurface}>
+          {lines.map((line, i) => (
+            <div
+              key={`${cycle}-${i}-${line.text}`}
+              className={cn(
+                'fade-in animate-in fill-mode-both flex px-4 py-0.5 leading-relaxed whitespace-pre duration-300',
+                line.kind === 'context' && 'text-foreground/45',
+                line.kind === 'added' &&
+                  'bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300',
+                line.kind === 'removed' && 'bg-red-500/10 text-red-700 dark:text-red-300'
+              )}
+              style={{ animationDelay: `${i * 60}ms` }}>
+              <span className="w-4 shrink-0 select-none">{GUTTER[line.kind]}</span>
+              <span>{line.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/src/components/assistant-ui/elements/surfaces.tsx

@@ -3,8 +3,10 @@
 /**
  * Shared surface primitives for the assistant-ui elements, vendored verbatim
  * from the `elements-surfaces` registry item
- * (https://r.assistant-ui.com/elements-surfaces.json). The one local change is
- * `collapsePanel`, adapted from Base UI to Radix (see below).
+ * (https://r.assistant-ui.com/elements-surfaces.json). Local changes, all for
+ * this app's Radix collapsible and jsdom: `collapsePanel` adapted from Base UI
+ * to Radix, an added `openRotate` chevron selector, and a `ResizeObserver`
+ * guard in `SwapLabel`.
  */
 import { cn } from '@/components/assistant-ui/lib/utils';
 import { type ComponentProps, useLayoutEffect, useRef, useState } from 'react';
@@ -47,6 +49,11 @@ export const labelSwapOut = 'pointer-events-none select-none opacity-0 blur-[2px
 export const collapsePanel =
   'overflow-hidden ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down motion-reduce:animate-none';
 
+// Local addition: the Radix trigger reports `data-state=open`, not Base UI's
+// `data-open` / `data-panel-open`, so the chevron rotation needs this selector.
+export const openRotate =
+  'transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[state=open]/trigger:rotate-90 motion-reduce:transition-none';
+
 export const live = 'text-blue-500 dark:text-blue-400';
 
 export const mono = 'font-mono text-[11px] tracking-tight';
@@ -92,6 +99,8 @@ export function SwapLabel({
     if (!target) return undefined;
     const measure = () => setWidth(Math.ceil(target.getBoundingClientRect().width));
     measure();
+    // Local guard: jsdom (unit tests) has no ResizeObserver.
+    if (typeof ResizeObserver === 'undefined') return undefined;
     const observer = new ResizeObserver(measure);
     observer.observe(target);
     return () => observer.disconnect();

app/src/components/assistant-ui/elements/terminal-block.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+/**
+ * assistant-ui's terminal-block element: a command and its output lines,
+ * with a spinner while it runs and an exit marker once it is done.
+ *
+ * Vendored from assistant-ui `packages/ui/src/components/react/assistant-ui/elements/terminal-block.tsx`
+ * (commit 1abca347). Changes from upstream:
+ * - `exitLabel` / `failed`: upstream always reads "exit 0" with a check.
+ * - The output scrolls past `max-h-72`, and the `min-h` floor applies only
+ *   while output is still streaming (a settled one-line result should not
+ *   reserve a tall box).
+ */
+import { cn } from '@/components/assistant-ui/lib/utils';
+import { CheckIcon, CircleXIcon, Loader2Icon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+
+import { take } from '../utils/range';
+import { mono, paper } from './surfaces';
+
+export function TerminalBlock({
+  command,
+  lines,
+  visibleCount,
+  done,
+  failed = false,
+  exitLabel = 'exit 0',
+  variant = 'paper',
+  className,
+  ...props
+}: Omit<
+  ComponentProps<'div'>,
+  'children' | 'command' | 'lines' | 'visibleCount' | 'done' | 'variant'
+> & {
+  command: string;
+  lines: readonly string[];
+  visibleCount: number;
+  done: boolean;
+  failed?: boolean;
+  exitLabel?: string;
+  variant?: 'paper' | 'ink';
+}) {
+  const ink = variant === 'ink';
+
+  return (
+    <div
+      data-slot="terminal-block"
+      className={cn(
+        ink ? 'bg-foreground dark:bg-popover' : paper,
+        'w-full max-w-md overflow-hidden rounded-2xl font-mono text-xs',
+        className
+      )}
+      {...props}>
+      <div className="flex items-center justify-between gap-3 px-4 pt-3 pb-1.5">
+        <span
+          className={cn(
+            'min-w-0 break-all',
+            ink ? 'text-background/90 dark:text-foreground/90' : 'text-foreground/90'
+          )}>
+          {command}
+        </span>
+        {done ? (
+          <div className="flex shrink-0 items-center gap-1">
+            {failed ? (
+              <CircleXIcon className="size-3 text-red-500" />
+            ) : (
+              <CheckIcon className="size-3 text-emerald-500" />
+            )}
+            <span
+              className={cn(
+                mono,
+                ink ? 'text-background/40 dark:text-foreground/40' : 'text-foreground/40'
+              )}>
+              {exitLabel}
+            </span>
+          </div>
+        ) : (
+          <Loader2Icon
+            className={cn(
+              'size-3 shrink-0 animate-spin motion-reduce:animate-none',
+              ink ? 'text-background/35 dark:text-foreground/35' : 'text-foreground/35'
+            )}
+          />
+        )}
+      </div>
+      <div
+        className={cn(
+          'flex max-h-72 flex-col gap-1 overflow-auto px-4 pt-1 pb-3.5 whitespace-pre-wrap break-all',
+          !done && 'min-h-[8.5rem]',
+          ink ? 'text-background/55 dark:text-foreground/50' : 'text-foreground/50'
+        )}>
+        {take(lines, visibleCount).map((line, i) => {
+          const isLast = i === lines.length - 1;
+          return (
+            <div
+              key={`${i}-${line}`}
+              className={cn(
+                'fade-in animate-in fill-mode-both duration-300',
+                isLast &&
+                  (ink ? 'text-background/90 dark:text-foreground/90' : 'text-foreground/90')
+              )}>
+              {line}
+            </div>
+          );
+        })}
+        {!done && (
+          <span
+            aria-hidden
+            className="inline-block h-3 w-1.5 animate-pulse bg-blue-500/70 motion-reduce:animate-none dark:bg-blue-400/70"
+          />
+        )}
+      </div>
+    </div>
+  );
+}