@slipstream-ui/ai 0.3.0 → 0.5.0

package/dist/manifests/attachment.manifest.json

@@ -27,6 +27,8 @@
     { "feature": "Upload status", "implementation": "Uploading state is announced via role=status." },
     { "feature": "Decorative thumbnails", "implementation": "Preview images are aria-hidden; the file name carries the meaning." }
   ],
+  "sourceDir": "attachment",
+  "exportName": "Attachment",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/branch.manifest.json

@@ -59,6 +59,8 @@
       "implementation": "N/M indicator uses aria-live=polite."
     }
   ],
+  "sourceDir": "branch",
+  "exportName": "Branch",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/code-block.manifest.json

@@ -44,6 +44,8 @@
       "implementation": "Icon-labeled button with aria-label that flips to Copied."
     }
   ],
+  "sourceDir": "code-block",
+  "exportName": "CodeBlock",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/command-palette.manifest.json

@@ -22,7 +22,13 @@
       "type": "Command[]",
       "required": true,
       "description": "Available commands: { id, label, section?, keywords?, shortcut? }",
-      "examples": [{ "id": "go-docs", "label": "Open documentation", "section": "Navigation" }]
+      "examples": [
+        {
+          "id": "go-docs",
+          "label": "Open documentation",
+          "section": "Navigation"
+        }
+      ]
     },
     {
       "name": "onSelect",
@@ -33,9 +39,34 @@
     {
       "name": "placeholder",
       "type": "string",
-      "defaultValue": "Type a command…",
+      "defaultValue": "Type a command.",
       "required": false,
       "description": "Input placeholder text"
+    },
+    {
+      "name": "loadCommands",
+      "type": "(query: string) => Promise<Command[]>",
+      "required": false,
+      "description": "Async command source; debounced and stale-response guarded."
+    },
+    {
+      "name": "debounceMs",
+      "type": "number",
+      "required": false,
+      "defaultValue": "200",
+      "description": "Debounce for loadCommands in ms."
+    },
+    {
+      "name": "renderCommand",
+      "type": "(command, state: { active: boolean }) => ReactNode",
+      "required": false,
+      "description": "Custom row renderer (icons, type badges)."
+    },
+    {
+      "name": "loadingText",
+      "type": "string",
+      "required": false,
+      "description": "Shown while async commands load."
     }
   ],
   "examples": [
@@ -71,7 +102,10 @@
       "relationship": "CommandPalette switches modes/actions; PromptInput captures free-form chat text."
     }
   ],
-  "relatedComponents": ["PromptInput", "Dialog"],
+  "relatedComponents": [
+    "PromptInput",
+    "Dialog"
+  ],
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1",

package/dist/manifests/confirmation.manifest.json

@@ -137,6 +137,8 @@
       "implementation": "Status chip text announces Approved/Rejected."
     }
   ],
+  "sourceDir": "confirmation",
+  "exportName": "Confirmation",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/inline-citation.manifest.json

@@ -40,6 +40,8 @@
       "implementation": "Card has role=tooltip linked via aria-describedby."
     }
   ],
+  "sourceDir": "inline-citation",
+  "exportName": "InlineCitation",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/message-actions.manifest.json

@@ -9,6 +9,7 @@
     { "name": "onCopy", "type": "(content: string) => void", "required": false, "description": "Called after copy with the copied text." },
     { "name": "onFeedback", "type": "(rating: 'up' | 'down' | undefined) => void", "required": false, "description": "Rating callback; selecting the active rating again passes undefined." },
     { "name": "onRegenerate", "type": "() => void", "required": false, "description": "Regeneration request; omit to hide the action." },
+    { "name": "autohide", "type": "'always' | 'on-hover' | 'not-last'", "required": false, "defaultValue": "always", "enum": ["always", "on-hover", "not-last"], "description": "Controls visibility: always visible, visible on hover/focus, or hidden until hover for non-latest messages." },
     { "name": "labels", "type": "{ copy?, copied?, thumbUp?, thumbDown?, regenerate? }", "required": false, "description": "Overrides for all visible labels; enables localization." }
   ],
   "examples": [
@@ -29,6 +30,8 @@
     { "feature": "Toggle state", "implementation": "Rating buttons expose aria-pressed so screen readers announce selection." },
     { "feature": "Icon buttons", "implementation": "All icon-only controls have accessible labels; labels are localizable." }
   ],
+  "sourceDir": "message-actions",
+  "exportName": "MessageActions",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/reasoning.manifest.json

@@ -53,6 +53,12 @@
       "type": "boolean",
       "required": false,
       "description": "Shows a streaming indicator while reasoning is in progress"
+    },
+    {
+      "name": "labels",
+      "type": "{ title?: string; count?: (count: number) => string; thinking?: string; step?: (index: number) => string }",
+      "required": false,
+      "description": "Localized header, count and step labels."
     }
   ],
   "examples": [

package/dist/manifests/response.manifest.json

@@ -45,6 +45,8 @@
       "implementation": "Routed through CodeBlock with accessible copy button."
     }
   ],
+  "sourceDir": "response",
+  "exportName": "Response",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/dist/manifests/tool-call.manifest.json

@@ -30,6 +30,12 @@
       "type": "string",
       "required": false,
       "description": "Additional CSS classes to apply"
+    },
+    {
+      "name": "labels",
+      "type": "{ pending?: string; running?: string; completed?: string; failed?: string; arguments?: string; result?: string; error?: string }",
+      "required": false,
+      "description": "Localized status and section labels."
     }
   ],
   "examples": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slipstream-ui/ai",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/michaelmcshinsky/slipstream-ui.git",
@@ -32,7 +32,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.2.0",
-    "@slipstream-ui/core": "0.3.0"
+    "@slipstream-ui/core": "0.5.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",
@@ -41,7 +41,7 @@
     "@types/react": "^18.2.0",
     "eslint": "^8.56.0",
     "jest-axe": "^9.0.0",
-    "jsdom": "^24.0.0",
+    "jsdom": "^30.1.3",
     "tsup": "^8.0.0",
     "typescript": "^5.3.3",
     "vitest": "^5.0.5",

package/src/components/code-block/CodeBlock.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Highlight, themes } from 'prism-react-renderer';
+import { Highlight, type PrismTheme } from 'prism-react-renderer';
 import { cn } from '@slipstream-ui/core';
 
 export type CodeBlockProps = {
@@ -29,12 +29,95 @@ function useIsDark(): boolean {
   return dark;
 }
 
+/**
+ * AA-safe syntax palettes.
+ *
+ * prism-react-renderer's stock themes put comments (#999988) and constants
+ * (#36acaa) at ~2.7-2.9:1 on the code surface. Every colour below clears
+ * 4.5:1 against its background (white light / near-black dark).
+ */
+const LIGHT_CODE_THEME: PrismTheme = {
+  plain: { color: '#1f2328', backgroundColor: 'transparent' },
+  styles: [
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: '#57606a' } },
+    { types: ['punctuation', 'operator'], style: { color: '#24292f' } },
+    { types: ['namespace'], style: { color: '#6f42c1' } },
+    { types: ['tag', 'deleted', 'keyword', 'atrule', 'important'], style: { color: '#b31d28' } },
+    { types: ['attr-name', 'variable'], style: { color: '#953800' } },
+    { types: ['string', 'char', 'attr-value', 'inserted', 'regex'], style: { color: '#0a5c2f' } },
+    {
+      types: [
+        'function',
+        'class-name',
+        'number',
+        'boolean',
+        'constant',
+        'symbol',
+        'property',
+        'selector',
+        'builtin',
+        'entity',
+        'url',
+      ],
+      style: { color: '#0550ae' },
+    },
+  ],
+};
+
+const DARK_CODE_THEME: PrismTheme = {
+  plain: { color: '#e6edf3', backgroundColor: 'transparent' },
+  styles: [
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: '#8b949e' } },
+    { types: ['punctuation', 'operator'], style: { color: '#c9d1d9' } },
+    { types: ['namespace'], style: { color: '#d2a8ff' } },
+    { types: ['tag', 'deleted', 'keyword', 'atrule', 'important'], style: { color: '#ff7b72' } },
+    { types: ['attr-name', 'variable'], style: { color: '#ffa657' } },
+    { types: ['string', 'char', 'attr-value', 'inserted', 'regex'], style: { color: '#7ee787' } },
+    {
+      types: [
+        'function',
+        'class-name',
+        'number',
+        'boolean',
+        'constant',
+        'symbol',
+        'property',
+        'selector',
+        'builtin',
+        'entity',
+        'url',
+      ],
+      style: { color: '#79c0ff' },
+    },
+  ],
+};
+
 const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
   ({ code, language = 'tsx', showCopyButton = true, className, ...props }, ref) => {
     const [copied, setCopied] = React.useState(false);
     const isDark = useIsDark();
     const trimmedCode = code.replace(/\n$/, '');
 
+    // Horizontally scrollable code must be reachable by keyboard (WCAG 2.1.1).
+    // Only make it a tab stop when it actually overflows, so short snippets
+    // do not add noise to the tab order.
+    const preRef = React.useRef<HTMLPreElement>(null);
+    const [scrollable, setScrollable] = React.useState(false);
+    React.useEffect(() => {
+      const element = preRef.current;
+      if (!element) return;
+      const update = () => setScrollable(element.scrollWidth > element.clientWidth + 1);
+      update();
+      // jsdom (tests) has no ResizeObserver; window resize is the fallback.
+      if (typeof ResizeObserver === 'undefined') {
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+      }
+      const observer = new ResizeObserver(update);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [trimmedCode, language]);
+
     const handleCopy = async () => {
       try {
         await navigator.clipboard.writeText(trimmedCode);
@@ -50,8 +133,8 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       <div
         ref={ref}
         className={cn(
-          // bg-background (not muted): Prism light themes assume a white
-          // surface — on gray the comment/keyword tokens fall below AA.
+          // bg-background (not muted): the light syntax palette is tuned for
+          // a white surface; on gray the token contrast drops below AA.
           'relative group rounded-md border border-border bg-background overflow-hidden',
           className
         )}
@@ -70,10 +153,13 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
             </button>
           )}
         </div>
-        <Highlight theme={isDark ? themes.vsDark : themes.github} code={trimmedCode} language={language}>
+        <Highlight theme={isDark ? DARK_CODE_THEME : LIGHT_CODE_THEME} code={trimmedCode} language={language}>
           {({ style, tokens, getLineProps, getTokenProps }) => (
             <pre
-              className="overflow-x-auto p-4 text-xs leading-relaxed m-0"
+              ref={preRef}
+              tabIndex={scrollable ? 0 : undefined}
+              aria-label={scrollable ? `${language} code, scrollable` : undefined}
+              className="overflow-x-auto p-4 text-xs leading-relaxed m-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               style={{ ...style, background: 'transparent' }}
             >
               {tokens.map((line, i) => (

package/src/components/command-palette/CommandPalette.test.tsx

@@ -72,3 +72,24 @@ describe('CommandPalette', () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+
+describe('CommandPalette async commands', () => {
+  it('loads commands from loadCommands', async () => {
+    const user = userEvent.setup();
+    const loadCommands = vi.fn(async () => [{ id: 'remote', label: 'Remote result' }]);
+    render(
+      <CommandPalette
+        open
+        onOpenChange={() => undefined}
+        commands={[]}
+        onSelect={() => undefined}
+        loadCommands={loadCommands}
+        debounceMs={1}
+      />
+    );
+    expect(await screen.findByText('Remote result')).toBeInTheDocument();
+    expect(loadCommands).toHaveBeenCalled();
+    expect(user).toBeTruthy();
+  });
+});

package/src/components/command-palette/CommandPalette.tsx

@@ -11,13 +11,26 @@ export type Command = {
   /** Extra lexical search terms. */
   keywords?: string[];
   shortcut?: string;
+  /** Optional leading icon (rendered by the default row or renderCommand). */
+  icon?: React.ReactNode;
+  /** Optional secondary line in the default row. */
+  description?: string;
 };
 
 export type CommandPaletteProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Static command set (ignored for filtering when loadCommands is set). */
   commands: Command[];
   onSelect: (command: Command) => void;
+  /** Async source; called with the current query (debounced). */
+  loadCommands?: (query: string) => Promise<Command[]>;
+  /** Debounce for loadCommands, in ms. Default 200. */
+  debounceMs?: number;
+  /** Custom row renderer (icons, type badges, metadata). */
+  renderCommand?: (command: Command, state: { active: boolean }) => React.ReactNode;
+  /** Shown while async commands load. */
+  loadingText?: string;
   placeholder?: string;
 };
 
@@ -31,22 +44,49 @@ export function CommandPalette({
   onOpenChange,
   commands,
   onSelect,
-  placeholder = 'Type a command…',
+  loadCommands,
+  debounceMs = 200,
+  renderCommand,
+  loadingText = 'Searching…',
+  placeholder = 'Type a command.',
 }: CommandPaletteProps) {
   const [query, setQuery] = React.useState('');
   const [activeIndex, setActiveIndex] = React.useState(0);
+  const [asyncCommands, setAsyncCommands] = React.useState<Command[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const requestId = React.useRef(0);
+  const asyncSignature = loadCommands ? String(loadCommands.length) : '';
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const listboxId = React.useId();
   const optionId = (index: number) => `${listboxId}-option-${index}`;
 
+  React.useEffect(() => {
+    if (!open || !loadCommands) return;
+    const id = ++requestId.current;
+    setLoading(true);
+    const timer = setTimeout(async () => {
+      try {
+        const result = await loadCommands(query);
+        if (requestId.current === id) setAsyncCommands(result);
+      } catch {
+        if (requestId.current === id) setAsyncCommands([]);
+      } finally {
+        if (requestId.current === id) setLoading(false);
+      }
+    }, debounceMs);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, query, debounceMs, asyncSignature]);
+
   const filtered = React.useMemo(() => {
+    if (loadCommands) return asyncCommands;
     const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
     if (terms.length === 0) return commands;
     return commands.filter((command) => {
       const haystack = `${command.label} ${command.section ?? ''} ${(command.keywords ?? []).join(' ')}`.toLowerCase();
       return terms.every((term) => haystack.includes(term));
     });
-  }, [commands, query]);
+  }, [commands, query, asyncCommands, loadCommands]);
 
   React.useEffect(() => {
     if (open) {
@@ -113,8 +153,19 @@ export function CommandPalette({
           onKeyDown={onKeyDown}
           className="w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring placeholder:text-muted-foreground"
         />
-        <ul id={listboxId} role="listbox" aria-label="Commands" className="max-h-72 overflow-y-auto py-1">
-          {filtered.length === 0 && (
+        <ul
+          id={listboxId}
+          role="listbox"
+          aria-label="Commands"
+          aria-busy={loading || undefined}
+          className="max-h-72 overflow-y-auto py-1"
+        >
+          {loading && filtered.length === 0 && (
+            <li role="presentation" className="px-4 py-3 text-sm text-muted-foreground">
+              {loadingText}
+            </li>
+          )}
+          {!loading && filtered.length === 0 && (
             <li role="presentation" className="px-4 py-3 text-sm text-muted-foreground">
               No matching commands.
             </li>
@@ -143,8 +194,22 @@ export function CommandPalette({
                     index === activeIndex ? 'bg-primary/10 text-foreground' : 'text-muted-foreground'
                   )}
                 >
-                  <span>{command.label}</span>
-                  {command.shortcut && <span className="font-mono text-xs">{command.shortcut}</span>}
+                  {renderCommand ? (
+                    renderCommand(command, { active: index === activeIndex })
+                  ) : (
+                    <>
+                      <span className="flex min-w-0 items-center gap-2">
+                        {command.icon && <span className="shrink-0 [&_svg]:size-4">{command.icon}</span>}
+                        <span className="min-w-0">
+                          <span className="block truncate">{command.label}</span>
+                          {command.description && (
+                            <span className="block text-xs text-muted-foreground">{command.description}</span>
+                          )}
+                        </span>
+                      </span>
+                      {command.shortcut && <span className="font-mono text-xs">{command.shortcut}</span>}
+                    </>
+                  )}
                 </li>
               </React.Fragment>
             );

package/src/components/confirmation/Confirmation.tsx

@@ -45,7 +45,7 @@ export type ConfirmationProps = {
 };
 
 const statusChipClasses: Record<ConfirmationStatus, string> = {
-  pending: 'bg-warning/10 text-warning border-warning/20',
+  pending: 'bg-warning/10 text-warning-ink border-warning/20',
   approved: 'bg-success/10 text-success border-success/20',
   rejected: 'bg-destructive/10 text-destructive border-destructive/20',
 };

package/src/components/conversation/Conversation.tsx

@@ -192,7 +192,12 @@ const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(
 
     return (
       <div ref={ref} className={cn('relative h-full w-full', className)} {...props}>
-        <div ref={scrollRef} className="flex flex-col gap-4 p-4 overflow-y-auto h-full">
+        <div
+          ref={scrollRef}
+          tabIndex={0}
+          aria-label="Conversation transcript"
+          className="flex flex-col gap-4 p-4 overflow-y-auto h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
           {(hasMoreHistory || isLoadingMore) && (
             <button
               type="button"

package/src/components/reasoning/Reasoning.tsx

@@ -13,10 +13,17 @@ export type ReasoningProps = {
   duration?: number | string;
   /** Marks reasoning as still arriving: animated header state. */
   isStreaming?: boolean;
+  /** Localized header, count and step labels. */
+  labels?: {
+    title?: string;
+    count?: (count: number) => string;
+    thinking?: string;
+    step?: (index: number) => string;
+  };
 };
 
 const Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(
-  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, ...props }, ref) => {
+  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, labels, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
     const contentId = React.useId();
 
@@ -25,10 +32,10 @@ const Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(
     }
 
     const headerText = [
-      'Reasoning',
-      `(${steps.length} ${steps.length === 1 ? 'step' : 'steps'})`,
+      labels?.title ?? 'Reasoning',
+      labels?.count ? labels.count(steps.length) : `(${steps.length} ${steps.length === 1 ? 'step' : 'steps'})`,
       typeof duration === 'number' ? `· ${duration}s` : duration ? `· ${duration}` : '',
-      isStreaming ? '· thinking…' : '',
+      isStreaming ? `· ${labels?.thinking ?? 'thinking…'}` : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -42,7 +49,7 @@ const Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(
             aria-expanded={isExpanded}
             aria-controls={contentId}
           >
-            <span className={cn('transition-transform', isExpanded ? 'rotate-90' : '')}>▶</span>
+            <span className={cn('transition-transform', isExpanded ? 'rotate-90' : '')}>?</span>
             <span>{headerText}</span>
             {isStreaming && (
               <span className="flex gap-0.5" aria-hidden="true">
@@ -64,7 +71,7 @@ const Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(
               <div key={step.id} className="flex gap-3">
                 <div className="w-3 h-3 rounded-full bg-primary/20 border-2 border-primary flex-shrink-0 mt-1" />
                 <div className="text-sm flex-1">
-                  <div className="font-medium text-foreground mb-1">Step {index + 1}</div>
+                  <div className="font-medium text-foreground mb-1">{labels?.step?.(index + 1) ?? `Step ${index + 1}`}</div>
                   <div className="text-muted-foreground">{step.content}</div>
                   {step.timestamp && (
                     <div className="text-xs text-muted-foreground mt-1">

package/src/components/tool-call/ToolCall.tsx

@@ -8,16 +8,26 @@ export type ToolCallProps = {
   toolCall: ToolCallType;
   className?: string;
   showResult?: boolean;
+  /** Localized status and section labels. */
+  labels?: {
+    pending?: string;
+    running?: string;
+    completed?: string;
+    failed?: string;
+    arguments?: string;
+    result?: string;
+    error?: string;
+  };
 };
 
 const statusChipClasses: Record<ToolCallType['status'], string> = {
-  pending: 'bg-warning/10 text-warning border-warning/20',
-  running: 'bg-info/10 text-info border-info/20',
+  pending: 'bg-warning/10 text-warning-ink border-warning/20',
+  running: 'bg-info/10 text-info-ink border-info/20',
   completed: 'bg-success/10 text-success border-success/20',
   failed: 'bg-destructive/10 text-destructive border-destructive/20',
 };
 
-const statusLabels: Record<ToolCallType['status'], string> = {
+const defaultStatusLabels: Record<ToolCallType['status'], string> = {
   pending: 'Pending',
   running: 'Running',
   completed: 'Completed',
@@ -29,8 +39,7 @@ const statusLabels: Record<ToolCallType['status'], string> = {
  * arguments, optional result, and an error block on failure.
  */
 const ToolCall = React.forwardRef<HTMLDivElement, ToolCallProps>(
-  ({ toolCall, className, showResult = true, ...props }, ref) => {
-    // Serialize once per tool-call change instead of on every render.
+  ({ toolCall, className, showResult = true, labels, ...props }, ref) => {
     const serializedArguments = React.useMemo(
       () => JSON.stringify(toolCall.arguments, null, 2),
       [toolCall.arguments]
@@ -42,6 +51,13 @@ const ToolCall = React.forwardRef<HTMLDivElement, ToolCallProps>(
         : JSON.stringify(toolCall.result, null, 2);
     }, [toolCall.result]);
 
+    const statusLabels: Record<ToolCallType['status'], string> = {
+      pending: labels?.pending ?? defaultStatusLabels.pending,
+      running: labels?.running ?? defaultStatusLabels.running,
+      completed: labels?.completed ?? defaultStatusLabels.completed,
+      failed: labels?.failed ?? defaultStatusLabels.failed,
+    };
+
     return (
       <div
         ref={ref}
@@ -68,7 +84,7 @@ const ToolCall = React.forwardRef<HTMLDivElement, ToolCallProps>(
 
         <div className="space-y-2">
           <div>
-            <div className="text-xs font-medium text-muted-foreground mb-1">Arguments</div>
+            <div className="text-xs font-medium text-muted-foreground mb-1">{labels?.arguments ?? 'Arguments'}</div>
             <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
               <code>{serializedArguments}</code>
             </pre>
@@ -76,7 +92,7 @@ const ToolCall = React.forwardRef<HTMLDivElement, ToolCallProps>(
 
           {showResult && serializedResult !== undefined && (
             <div>
-              <div className="text-xs font-medium text-muted-foreground mb-1">Result</div>
+              <div className="text-xs font-medium text-muted-foreground mb-1">{labels?.result ?? 'Result'}</div>
               <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
                 <code>{serializedResult}</code>
               </pre>
@@ -85,7 +101,7 @@ const ToolCall = React.forwardRef<HTMLDivElement, ToolCallProps>(
 
           {toolCall.status === 'failed' && toolCall.error && (
             <div role="alert">
-              <div className="text-xs font-medium text-destructive mb-1">Error</div>
+              <div className="text-xs font-medium text-destructive mb-1">{labels?.error ?? 'Error'}</div>
               <pre className="text-xs bg-destructive/10 text-destructive p-2 rounded overflow-x-auto whitespace-pre-wrap">
                 <code>{toolCall.error}</code>
               </pre>

package/src/manifests/attachment.manifest.json

@@ -27,6 +27,8 @@
     { "feature": "Upload status", "implementation": "Uploading state is announced via role=status." },
     { "feature": "Decorative thumbnails", "implementation": "Preview images are aria-hidden; the file name carries the meaning." }
   ],
+  "sourceDir": "attachment",
+  "exportName": "Attachment",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"

package/src/manifests/branch.manifest.json

@@ -59,6 +59,8 @@
       "implementation": "N/M indicator uses aria-live=polite."
     }
   ],
+  "sourceDir": "branch",
+  "exportName": "Branch",
   "package": "@slipstream-ui/ai",
   "importPath": "@slipstream-ui/ai",
   "version": "0.0.1"