@slipstream-ui/ai 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { CodeBlock } from './CodeBlock';
+
+describe('CodeBlock', () => {
+  it('renders code with a language label', () => {
+    const { container } = render(<CodeBlock code="const x = 1;" language="ts" />);
+    expect(screen.getByText('ts')).toBeInTheDocument();
+    // Prism splits code into tokens; assert on aggregate content.
+    expect(container.textContent).toContain('const x = 1;');
+  });
+
+  it('copies code to the clipboard and confirms', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+
+    render(<CodeBlock code={'line one\nline two'} />);
+    await user.click(screen.getByRole('button', { name: 'Copy code' }));
+
+    expect(writeText).toHaveBeenCalledWith('line one\nline two');
+    expect(await screen.findByText('Copied!')).toBeInTheDocument();
+  });
+
+  it('hides the copy button when showCopyButton is false', () => {
+    render(<CodeBlock code="x" showCopyButton={false} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('trims trailing newline from copied content', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+
+    render(<CodeBlock code={'hello\n'} />);
+    await user.click(screen.getByRole('button', { name: 'Copy code' }));
+    expect(writeText).toHaveBeenCalledWith('hello');
+  });
+});

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

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import { Highlight, themes } from 'prism-react-renderer';
+import { cn } from '@slipstream-ui/core';
+
+export type CodeBlockProps = {
+  /** Raw code to display (no trailing newline needed). */
+  code: string;
+  /** Language identifier used for Prism highlighting. */
+  language?: string;
+  /** Show a copy-to-clipboard button (default true). */
+  showCopyButton?: boolean;
+  className?: string;
+};
+
+/** Tracks whether the `.dark` class is present on `<html>`, staying in sync with toggles. */
+function useIsDark(): boolean {
+  const [dark, setDark] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = document.documentElement;
+    setDark(el.classList.contains('dark'));
+    const observer = new MutationObserver(() => setDark(el.classList.contains('dark')));
+    observer.observe(el, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  return dark;
+}
+
+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$/, '');
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(trimmedCode);
+      } catch {
+        // Clipboard unavailable (insecure context); still show feedback so
+        // consumers can hook onCopy-style behavior via DOM if needed.
+      }
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+      <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.
+          'relative group rounded-md border border-border bg-background overflow-hidden',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/60">
+          <span className="text-xs font-mono text-muted-foreground uppercase">{language}</span>
+          {showCopyButton && (
+            <button
+              type="button"
+              onClick={handleCopy}
+              aria-label={copied ? 'Copied' : 'Copy code'}
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1"
+            >
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          )}
+        </div>
+        <Highlight theme={isDark ? themes.vsDark : themes.github} code={trimmedCode} language={language}>
+          {({ style, tokens, getLineProps, getTokenProps }) => (
+            <pre
+              className="overflow-x-auto p-4 text-xs leading-relaxed m-0"
+              style={{ ...style, background: 'transparent' }}
+            >
+              {tokens.map((line, i) => (
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          )}
+        </Highlight>
+      </div>
+    );
+  }
+);
+CodeBlock.displayName = 'CodeBlock';
+
+export { CodeBlock };

package/src/components/code-block/index.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';

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

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { useState } from 'react';
+import { CommandPalette, type Command } from './CommandPalette';
+
+const commands: Command[] = [
+  { id: 'go-docs', label: 'Open documentation', section: 'Navigation', keywords: ['docs', 'help'] },
+  { id: 'go-billing', label: 'Open billing', section: 'Navigation', keywords: ['plan', 'invoices'] },
+  { id: 'act-copy', label: 'Copy code', section: 'Actions', keywords: ['clipboard'], shortcut: '⌘C' },
+];
+
+function Harness({ onSelect }: { onSelect: (command: Command) => void }) {
+  const [open, setOpen] = useState(true);
+  return <CommandPalette open={open} onOpenChange={setOpen} commands={commands} onSelect={onSelect} />;
+}
+
+describe('CommandPalette', () => {
+  it('renders commands grouped by section as listbox options', () => {
+    render(<Harness onSelect={() => undefined} />);
+    expect(screen.getByRole('combobox', { name: 'Command palette' })).toBeInTheDocument();
+    const labels = screen.getAllByRole('option').map((option) => option.textContent);
+    expect(labels).toEqual(['Open documentation', 'Open billing', 'Copy code⌘C']);
+    expect(screen.getByText('Navigation')).toBeInTheDocument(); // header rendered once per section
+    expect(screen.getByText('Actions')).toBeInTheDocument();
+  });
+
+  it('filters lexically by label and keywords', async () => {
+    const user = userEvent.setup();
+    render(<Harness onSelect={() => undefined} />);
+    await user.type(screen.getByRole('combobox'), 'invoice');
+    expect(screen.getAllByRole('option')).toHaveLength(1);
+    expect(screen.getByRole('option', { name: /Open billing/ })).toBeInTheDocument();
+  });
+
+  it('navigates with arrows and selects with Enter', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<Harness onSelect={onSelect} />);
+    const input = screen.getByRole('combobox');
+    await user.keyboard('{ArrowDown}');
+    expect(screen.getByRole('option', { name: /Open billing/ })).toHaveAttribute('aria-selected', 'true');
+    expect(input).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: /Open billing/ }).id);
+    await user.keyboard('{Enter}');
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'go-billing' }));
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+  });
+
+  it('closes on Escape and backdrop click', async () => {
+    const user = userEvent.setup();
+    render(<Harness onSelect={() => undefined} />);
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+  });
+
+  it('shows an empty state for no matches', async () => {
+    const user = userEvent.setup();
+    render(<Harness onSelect={() => undefined} />);
+    await user.type(screen.getByRole('combobox'), 'zzzznope');
+    expect(screen.queryAllByRole('option')).toHaveLength(0);
+    expect(screen.getByText('No matching commands.')).toBeInTheDocument();
+  });
+
+  it('renders nothing when closed', () => {
+    render(<CommandPalette open={false} onOpenChange={() => undefined} commands={commands} onSelect={() => undefined} />);
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Harness onSelect={() => undefined} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

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

@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@slipstream-ui/core';
+
+export type Command = {
+  id: string;
+  label: string;
+  /** Optional grouping header, e.g. "Navigation". */
+  section?: string;
+  /** Extra lexical search terms. */
+  keywords?: string[];
+  shortcut?: string;
+};
+
+export type CommandPaletteProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  commands: Command[];
+  onSelect: (command: Command) => void;
+  placeholder?: string;
+};
+
+/**
+ * Cmd+K command palette: combobox + listbox with aria-activedescendant
+ * keyboard navigation, lexical filtering over label/keywords, and
+ * Escape-to-close. No focus leaves the input while navigating.
+ */
+export function CommandPalette({
+  open,
+  onOpenChange,
+  commands,
+  onSelect,
+  placeholder = 'Type a command…',
+}: CommandPaletteProps) {
+  const [query, setQuery] = React.useState('');
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const listboxId = React.useId();
+  const optionId = (index: number) => `${listboxId}-option-${index}`;
+
+  const filtered = React.useMemo(() => {
+    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]);
+
+  React.useEffect(() => {
+    if (open) {
+      setQuery('');
+      setActiveIndex(0);
+      // Focus after paint so the portal/DOM node exists.
+      const timer = setTimeout(() => inputRef.current?.focus(), 0);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [open]);
+
+  React.useEffect(() => {
+    setActiveIndex((index) => Math.min(index, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+
+  if (!open) return null;
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onOpenChange(false);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setActiveIndex((index) => (filtered.length === 0 ? 0 : (index + 1) % filtered.length));
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setActiveIndex((index) => (filtered.length === 0 ? 0 : (index - 1 + filtered.length) % filtered.length));
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const command = filtered[activeIndex];
+      if (command) {
+        onSelect(command);
+        onOpenChange(false);
+      }
+    }
+  };
+
+  let lastSection: string | undefined;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-background/80 p-4 pt-[15vh]"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onOpenChange(false);
+      }}
+    >
+      <div className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
+        <input
+          ref={inputRef}
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls={listboxId}
+          aria-activedescendant={filtered.length > 0 ? optionId(activeIndex) : undefined}
+          aria-autocomplete="list"
+          aria-label="Command palette"
+          placeholder={placeholder}
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setActiveIndex(0);
+          }}
+          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 && (
+            <li role="presentation" className="px-4 py-3 text-sm text-muted-foreground">
+              No matching commands.
+            </li>
+          )}
+          {filtered.map((command, index) => {
+            const showSection = command.section && command.section !== lastSection;
+            lastSection = command.section ?? lastSection;
+            return (
+              <React.Fragment key={command.id}>
+                {showSection && (
+                  <li role="presentation" className="px-4 pb-1 pt-3 text-xs font-medium uppercase text-muted-foreground">
+                    {command.section}
+                  </li>
+                )}
+                <li
+                  id={optionId(index)}
+                  role="option"
+                  aria-selected={index === activeIndex}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  onClick={() => {
+                    onSelect(command);
+                    onOpenChange(false);
+                  }}
+                  className={cn(
+                    'flex cursor-pointer items-center justify-between px-4 py-2 text-sm',
+                    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>}
+                </li>
+              </React.Fragment>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/components/command-palette/index.ts

@@ -0,0 +1,2 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, Command } from './CommandPalette';

package/src/components/confirmation/Confirmation.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { Confirmation } from './Confirmation';
+
+describe('Confirmation', () => {
+  it('renders a pending alertdialog with approve/reject', () => {
+    render(<Confirmation title="Delete file" toolName="delete_file" />);
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Approve' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reject' })).toBeInTheDocument();
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('reports approval and hides the buttons', async () => {
+    const user = userEvent.setup();
+    const onApprove = vi.fn();
+    const onReject = vi.fn();
+    render(<Confirmation title="Delete file" onApprove={onApprove} onReject={onReject} />);
+
+    await user.click(screen.getByRole('button', { name: 'Approve' }));
+    expect(onApprove).toHaveBeenCalledOnce();
+    expect(onReject).not.toHaveBeenCalled();
+    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
+    expect(screen.getByText('Approved')).toBeInTheDocument();
+  });
+
+  it('reports rejection', async () => {
+    const user = userEvent.setup();
+    const onApprove = vi.fn();
+    const onReject = vi.fn();
+    render(<Confirmation title="Delete file" onApprove={onApprove} onReject={onReject} />);
+
+    await user.click(screen.getByRole('button', { name: 'Reject' }));
+    expect(onReject).toHaveBeenCalledOnce();
+    expect(onApprove).not.toHaveBeenCalled();
+    expect(screen.getByText('Rejected')).toBeInTheDocument();
+  });
+
+  it('respects controlled status', () => {
+    render(<Confirmation title="Delete" status="rejected" onReject={() => {}} />);
+    expect(screen.queryByRole('button', { name: 'Reject' })).not.toBeInTheDocument();
+    expect(screen.getByText('Rejected')).toBeInTheDocument();
+  });
+
+  it('supports localized labels', () => {
+    render(
+      <Confirmation
+        title="Datei löschen"
+        labels={{ approve: 'Genehmigen', reject: 'Ablehnen' }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Genehmigen' })).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations while pending', async () => {
+    const { container } = render(<Confirmation title="Delete file" description="notes.txt" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe('Confirmation action variants and visibility', () => {
+  it('showActions={false} hides both action buttons but keeps the status chip', () => {
+    render(
+      <Confirmation title="Delete" description="This cannot be undone." showActions={false} />
+    );
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Reject' })).not.toBeInTheDocument();
+  });
+
+  it('approveVariant/rejectVariant control button themes', () => {
+    render(
+      <Confirmation
+        title="Terminate run"
+        description="The run is still active."
+        labels={{ approve: 'Terminate', reject: 'Keep running' }}
+        approveVariant="destructive"
+        rejectVariant="ghost"
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Terminate' })).toHaveClass('bg-destructive');
+    expect(screen.getByRole('button', { name: 'Keep running' })).toHaveClass('hover:bg-accent');
+  });
+
+  it('rejecting flips the chip to Rejected and calls onReject', async () => {
+    const user = userEvent.setup();
+    const onReject = vi.fn();
+    render(<Confirmation title="Confirm" description="Sure?" onReject={onReject} />);
+    await user.click(screen.getByRole('button', { name: 'Reject' }));
+    expect(onReject).toHaveBeenCalledOnce();
+    expect(screen.getByText('Rejected')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Reject' })).not.toBeInTheDocument();
+  });
+});

package/src/components/confirmation/Confirmation.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@slipstream-ui/core';
+import { cn } from '@slipstream-ui/core';
+
+export type ConfirmationStatus = 'pending' | 'approved' | 'rejected';
+
+export type ConfirmationVariant = 'default' | 'warning' | 'destructive' | 'info' | 'success';
+
+/** Button variants accepted for the approve/reject actions (Button's variant union). */
+export type ConfirmationActionVariant =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link';
+
+export type ConfirmationProps = {
+  /** Human-readable summary of the action requiring approval. */
+  title: string;
+  /** Optional detail: affected resource, arguments preview, risk note. */
+  description?: string;
+  /** Tool or action name shown as a mono chip. */
+  toolName?: string;
+  /** Controlled outcome; omit for fully interactive uncontrolled use. */
+  status?: ConfirmationStatus;
+  /** Accent color of the pending card (outcome chips always follow the result). */
+  variant?: ConfirmationVariant;
+  onApprove?: () => void;
+  onReject?: () => void;
+  /** Button styling for the approve/reject actions. */
+  approveVariant?: ConfirmationActionVariant;
+  rejectVariant?: ConfirmationActionVariant;
+  /** Hide the action buttons (controlled-only gate; status drives the chip). */
+  showActions?: boolean;
+  labels?: {
+    approve?: string;
+    reject?: string;
+    approved?: string;
+    rejected?: string;
+  };
+  className?: string;
+};
+
+const statusChipClasses: Record<ConfirmationStatus, string> = {
+  pending: 'bg-warning/10 text-warning border-warning/20',
+  approved: 'bg-success/10 text-success border-success/20',
+  rejected: 'bg-destructive/10 text-destructive border-destructive/20',
+};
+
+const pendingVariantClasses: Record<ConfirmationVariant, string> = {
+  default: 'border-warning/40',
+  warning: 'border-warning/40',
+  destructive: 'border-destructive/40 bg-destructive/5',
+  info: 'border-info/40',
+  success: 'border-success/40',
+};
+
+/**
+ * Human-in-the-loop approval gate for agent actions (tool execution,
+ * destructive operations). The agent pauses until the user decides.
+ */
+const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
+  (
+    {
+      title,
+      description,
+      toolName,
+      status: controlledStatus,
+      variant = 'default',
+      onApprove,
+      onReject,
+      approveVariant = 'default',
+      rejectVariant = 'outline',
+      showActions = true,
+      labels,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalStatus, setInternalStatus] = React.useState<ConfirmationStatus>('pending');
+    const status = controlledStatus ?? internalStatus;
+
+    const t = {
+      approve: labels?.approve ?? 'Approve',
+      reject: labels?.reject ?? 'Reject',
+      approved: labels?.approved ?? 'Approved',
+      rejected: labels?.rejected ?? 'Rejected',
+    };
+
+    const decide = (next: Exclude<ConfirmationStatus, 'pending'>) => {
+      setInternalStatus(next);
+      (next === 'approved' ? onApprove : onReject)?.();
+    };
+
+    return (
+      <div
+        ref={ref}
+        role={status === 'pending' ? 'alertdialog' : undefined}
+        aria-label={status === 'pending' ? title : undefined}
+        className={cn(
+          'rounded-lg border p-4 bg-muted/30 max-w-md',
+          status === 'pending' && pendingVariantClasses[variant],
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between gap-2 mb-2">
+          <div className="text-sm font-medium text-foreground">{title}</div>
+          <span
+            className={cn(
+              'text-xs px-2 py-0.5 rounded-full border whitespace-nowrap',
+              statusChipClasses[status]
+            )}
+          >
+            {status === 'approved' ? t.approved : status === 'rejected' ? t.rejected : 'Pending'}
+          </span>
+        </div>
+
+        {description && (
+          <div className="text-sm text-muted-foreground mb-1">{description}</div>
+        )}
+        {toolName && (
+          <div className="text-xs font-mono text-muted-foreground mb-3">{toolName}</div>
+        )}
+
+        {status === 'pending' && showActions && (
+          <div className="flex gap-2 mt-2">
+            <Button size="sm" variant={approveVariant} onClick={() => decide('approved')}>
+              {t.approve}
+            </Button>
+            <Button size="sm" variant={rejectVariant} onClick={() => decide('rejected')}>
+              {t.reject}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Confirmation.displayName = 'Confirmation';
+
+export { Confirmation };

package/src/components/confirmation/index.ts

@@ -0,0 +1,2 @@
+export { Confirmation } from './Confirmation';
+export type { ConfirmationProps, ConfirmationStatus } from './Confirmation';

package/src/components/conversation/Conversation.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { Conversation } from './Conversation';
+import type { Message as MessageType } from '../../types';
+
+const messages: MessageType[] = [
+  { id: 'm1', role: 'user', content: 'Hello!' },
+  { id: 'm2', role: 'assistant', content: 'Hi, how can I help?' },
+];
+
+describe('Conversation', () => {
+  it('renders every message in order', () => {
+    render(<Conversation messages={messages} />);
+    expect(screen.getByText('Hello!')).toBeInTheDocument();
+    expect(screen.getByText('Hi, how can I help?')).toBeInTheDocument();
+  });
+
+  it('shows a loading placeholder while isLoading is true', () => {
+    render(<Conversation messages={messages} isLoading />);
+    expect(screen.getByText('Thinking...')).toBeInTheDocument();
+  });
+
+  it('supports a custom loading message', () => {
+    render(<Conversation messages={messages} isLoading loadingMessage="Generiere..." />);
+    expect(screen.getByText('Generiere...')).toBeInTheDocument();
+  });
+
+  it('hides the loading placeholder by default', () => {
+    render(<Conversation messages={messages} />);
+    expect(screen.queryByText('Thinking...')).not.toBeInTheDocument();
+  });
+
+  it('renders a streaming cursor on the message with streamingMessageId', () => {
+    render(<Conversation messages={messages} streamingMessageId="m2" />);
+    expect(screen.getByTestId('streaming-cursor')).toBeInTheDocument();
+    expect(screen.getByText(messages[1].content).closest('[aria-busy]')).not.toBeNull();
+  });
+
+  it('does not render a cursor when no streamingMessageId is given', () => {
+    render(<Conversation messages={messages} />);
+    expect(screen.queryByTestId('streaming-cursor')).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Conversation messages={messages} isLoading />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});