@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nm-ai/nm-ai.tsx

@@ -0,0 +1,632 @@
+import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { NmCodeBlock, NmCodeBlockContent, NmCodeBlockHeader, NmCodeBlockTitle } from '../nm-code-block/nm-code-block.tsx';
+import { useState, type ReactNode } from 'react';
+import {
+  NM_AI_CLASSES as C,
+  nmAiTraceStatus,
+  type NmAiBadgeTone,
+  type NmAiStatus,
+  type NmToolState,
+} from '../../config/nm-ai.ts';
+import type { NmTraceGlyphKind } from '../../config/nm-message.ts';
+import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+import { NmDropdown } from '../nm-dropdown/nm-dropdown.tsx';
+import { NmHoverCard, NmHoverCardContent, NmHoverCardTrigger } from '../nm-hover-card/nm-hover-card.tsx';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmProgress } from '../nm-progress/nm-progress.tsx';
+import { nmButtonClassName } from '../../config/nm-button.ts';
+import { NmMessageActions } from '../nm-message/nm-message-actions.tsx';
+import { NmMessageMeta } from '../nm-message/nm-message-meta.tsx';
+import { NmTextShimmer } from '../nm-message/nm-text-shimmer.tsx';
+import {
+  NmTrace,
+  NmTraceBadge,
+  NmTraceBadges,
+  NmTraceCollapsible,
+  NmTraceCollapsibleContent,
+  NmTraceCollapsibleTrigger,
+  NmTraceDescription,
+  NmTraceGlyph,
+  NmTraceIcon,
+  NmTraceLine,
+  NmTraceTitle,
+} from '../nm-message/nm-trace.tsx';
+
+const STATUS_GLYPH: Record<NmAiStatus, NmTraceGlyphKind> = {
+  pending: 'circle',
+  running: 'loader',
+  done: 'check',
+  error: 'alert',
+};
+
+function StatusIcon(props: { status: NmAiStatus }): ReactNode {
+  return (
+    <NmTraceIcon>
+      <NmTraceGlyph kind={STATUS_GLYPH[props.status]} spin={props.status === 'running'} />
+    </NmTraceIcon>
+  );
+}
+
+/* ----- Primitives ----- */
+
+export function NmBubble(props: { role: 'user' | 'assistant'; children: ReactNode }): ReactNode {
+  return <div className={props.role === 'user' ? `${C.bubble} ${C.bubbleUser}` : C.bubble}>{props.children}</div>;
+}
+
+/** Output, errors and logs inside a trace: the NIF Code Block, without line numbers. */
+function NmOutput(props: { children: string; label?: string; nowrap?: boolean; maxHeight?: string }): ReactNode {
+  return (
+    <NmCodeBlock size="sm">
+      {props.label ? <NmCodeBlockHeader><NmCodeBlockTitle>{props.label}</NmCodeBlockTitle></NmCodeBlockHeader> : null}
+      <NmCodeBlockContent wrap={!props.nowrap} style={props.maxHeight ? { maxHeight: props.maxHeight } : undefined}>{props.children}</NmCodeBlockContent>
+    </NmCodeBlock>
+  );
+}
+
+export function NmBadge(props: { tone?: NmAiBadgeTone; children: ReactNode }): ReactNode {
+  return <NmChip size="sm" tone={props.tone ?? 'neutral'}>{props.children}</NmChip>;
+}
+
+export function NmItem(props: { media?: ReactNode; title: ReactNode; description?: ReactNode; actions?: ReactNode }): ReactNode {
+  return (
+    <div className={C.item}>
+      {props.media ? <span className={C.itemMedia}>{props.media}</span> : null}
+      <span className={C.itemBody}>
+        <span className={C.itemTitle}>{props.title}</span>
+        {props.description ? <span className={C.itemDescription}>{props.description}</span> : null}
+      </span>
+      {props.actions ? <span className={C.itemActions}>{props.actions}</span> : null}
+    </div>
+  );
+}
+
+export function NmSheet(props: { title: string; description?: string; onClose: () => void; children: ReactNode }): ReactNode {
+  return (
+    <section className={C.sheet} aria-label={props.title}>
+      <div className={C.sheetHead}>
+        <span>{props.title}</span>
+        <NmButton label="Close" tone="muted" size="compact" icon="x" onClick={props.onClose} />
+      </div>
+      {props.description ? <span className={C.itemDescription}>{props.description}</span> : null}
+      <div className={C.sheetBody}>{props.children}</div>
+    </section>
+  );
+}
+
+/* ----- Message ----- */
+
+export type NmAiMessageAction = { id: string; label: string; icon: 'copy' | 'reload' | 'pen' | 'check' | 'volume' | 'fork' };
+
+export function NmMessage(props: {
+  role: 'user' | 'assistant';
+  children: ReactNode;
+  actions?: readonly NmAiMessageAction[];
+  onAction?: (id: string) => void;
+  footer?: ReactNode;
+}): ReactNode {
+  return (
+    <div className={props.role === 'user' ? `${C.turn} ${C.turnUser}` : C.turn}>
+      <div className={C.turnBody}>
+        {props.role === 'user' ? <NmBubble role="user">{props.children}</NmBubble> : props.children}
+      </div>
+      {props.actions ? (
+        <NmMessageActions>
+          {props.actions.map((action) => (
+            <NmButton key={action.id} label={action.label} tone="muted" size="compact" icon={action.icon} onClick={() => props.onAction?.(action.id)} />
+          ))}
+        </NmMessageActions>
+      ) : null}
+      {props.footer ? <div className={C.turnFooter}>{props.footer}</div> : null}
+    </div>
+  );
+}
+
+/* ----- Reasoning ----- */
+
+export function NmReasoning(props: { text: string; streaming?: boolean; seconds?: number; defaultOpen?: boolean }): ReactNode {
+  const label = props.streaming ? 'Thinking' : `Thought for ${props.seconds ?? 0} seconds`;
+  return (
+    <NmTrace ariaLabel="Reasoning">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine status={props.streaming ? 'running' : undefined}>
+            <NmTraceIcon><NmTraceGlyph kind={props.streaming ? 'loader' : 'check'} spin={props.streaming} /></NmTraceIcon>
+            <NmTraceTitle shimmer={props.streaming}>{label}</NmTraceTitle>
+          </NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent><NmTraceDescription>{props.text}</NmTraceDescription></NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+/* ----- Chain of thought ----- */
+
+export type NmChainStep = { id: string; title: string; status: NmAiStatus; detail?: string; results?: readonly string[] };
+
+export function NmChainOfThought(props: { summary: string; steps: readonly NmChainStep[]; defaultOpen?: boolean }): ReactNode {
+  return (
+    <NmTrace ariaLabel="Chain of thought">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine><NmTraceIcon><NmTraceGlyph kind="plan" /></NmTraceIcon><NmTraceTitle>{props.summary}</NmTraceTitle></NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent>
+          <ol className={C.steps}>
+            {props.steps.map((step) => (
+              <li key={step.id} className={C.stepsItem}>
+                <NmTraceLine status={nmAiTraceStatus(step.status)}>
+                  <StatusIcon status={step.status} />
+                  <NmTraceTitle shimmer={step.status === 'running'}>{step.title}</NmTraceTitle>
+                </NmTraceLine>
+                {step.detail ? <NmTraceDescription>{step.detail}</NmTraceDescription> : null}
+                {step.results ? <NmTraceBadges>{step.results.map((r) => <NmTraceBadge key={r}>{r}</NmTraceBadge>)}</NmTraceBadges> : null}
+              </li>
+            ))}
+          </ol>
+        </NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+/* ----- Checkpoint ----- */
+
+export function NmCheckpoint(props: { label: string; restoreLabel?: string; onRestore?: () => void }): ReactNode {
+  return (
+    <div className="nm-ai-checkpoint" role="separator" aria-label={props.label}>
+      <span className="nm-ai-checkpoint__label">
+        <NmIcon id="folder" />
+        {props.label}
+        {props.onRestore ? <NmButton label={props.restoreLabel ?? 'Restore'} tone="muted" size="chip" icon="reload" onClick={props.onRestore} /> : null}
+      </span>
+    </div>
+  );
+}
+
+/* ----- Confirmation ----- */
+
+export type NmConfirmationState = 'requested' | 'approved' | 'denied';
+
+export function NmConfirmation(props: {
+  title: string;
+  description?: string;
+  state: NmConfirmationState;
+  onApprove?: () => void;
+  onDeny?: () => void;
+}): ReactNode {
+  if (props.state !== 'requested') {
+    return (
+      <NmTrace ariaLabel="Confirmation">
+        <NmTraceLine status={props.state === 'approved' ? 'running' : undefined}>
+          <NmTraceIcon><NmTraceGlyph kind={props.state === 'approved' ? 'check' : 'alert'} /></NmTraceIcon>
+          <NmTraceTitle>{props.state === 'approved' ? `Approved ${props.title}` : `Denied ${props.title}`}</NmTraceTitle>
+        </NmTraceLine>
+      </NmTrace>
+    );
+  }
+  return (
+    <NmItem
+      media={<NmIcon id="terminal" />}
+      title={props.title}
+      description={props.description}
+      actions={<>
+        <NmButton label="Deny" tone="outline" size="compact" onClick={props.onDeny} />
+        <NmButton label="Approve" tone="filled" size="compact" onClick={props.onApprove} />
+      </>}
+    />
+  );
+}
+
+/* ----- Context ----- */
+
+function formatTokens(value: number): string {
+  return value < 1000 ? String(value) : `${(value / 1000).toFixed(1).replace(/\.0$/, '')}k`;
+}
+
+export function NmContext(props: { used: number; max: number; breakdown?: readonly { label: string; value: number }[] }): ReactNode {
+  const percent = Math.round((props.used / props.max) * 100);
+  return (
+    <NmHoverCard>
+      <NmHoverCardTrigger delay={10} closeDelay={100} render={<button type="button" className={nmButtonClassName('outline', 'compact')} />}>
+        {percent}% context
+      </NmHoverCardTrigger>
+      <NmHoverCardContent>
+        <div className="nm-ai-context__head">
+          <span>Context</span>
+          <span>{formatTokens(props.used)} / {formatTokens(props.max)}</span>
+        </div>
+        <NmProgress value={props.used} max={props.max} aria-label="Context used" />
+        {props.breakdown ? (
+          <div className="nm-ai-context__rows">
+            {props.breakdown.map((row) => <div key={row.label}><span>{row.label}</span><span>{formatTokens(row.value)}</span></div>)}
+          </div>
+        ) : null}
+      </NmHoverCardContent>
+    </NmHoverCard>
+  );
+}
+
+/* ----- File tree ----- */
+
+export type NmFileNode = { name: string; children?: readonly NmFileNode[] };
+
+type TreeSelection = { selected?: string; onSelect?: (path: string) => void };
+
+function TreeNodes(props: { nodes: readonly NmFileNode[]; defaultOpen: boolean; parent: string } & TreeSelection): ReactNode {
+  return (
+    <ul className={C.tree} role="group">
+      {props.nodes.map((node) => <TreeNode key={node.name} node={node} path={props.parent ? `${props.parent}/${node.name}` : node.name} defaultOpen={props.defaultOpen} selected={props.selected} onSelect={props.onSelect} />)}
+    </ul>
+  );
+}
+
+function TreeNode(props: { node: NmFileNode; path: string; defaultOpen: boolean } & TreeSelection): ReactNode {
+  const [open, setOpen] = useState(props.defaultOpen);
+  const folder = props.node.children != null;
+  return (
+    <li role="treeitem" aria-expanded={folder ? open : undefined} aria-selected={!folder && props.selected === props.path ? true : undefined}>
+      <button
+        type="button"
+        className={C.treeNode}
+        data-kind={folder ? 'folder' : 'file'}
+        data-selected={!folder && props.selected === props.path ? '' : undefined}
+        onClick={() => (folder ? setOpen(!open) : props.onSelect?.(props.path))}
+      >
+        {folder ? <span className="nm-ai-tree__chevron" data-open={open}><NmIcon id="chevron" /></span> : null}
+        <NmIcon id={folder ? 'folder' : 'file'} />
+        <span>{props.node.name}</span>
+      </button>
+      {folder && open ? <TreeNodes nodes={props.node.children!} defaultOpen={props.defaultOpen} parent={props.path} selected={props.selected} onSelect={props.onSelect} /> : null}
+    </li>
+  );
+}
+
+/** Folders open and close. Give it `onSelect` and a file can be chosen. `selected` is its path, like `src/App.tsx`. */
+export function NmFileTree(props: { nodes: readonly NmFileNode[]; defaultOpen?: boolean } & TreeSelection): ReactNode {
+  return <div role="tree"><TreeNodes nodes={props.nodes} defaultOpen={props.defaultOpen ?? true} parent="" selected={props.selected} onSelect={props.onSelect} /></div>;
+}
+
+/* ----- Inline citation ----- */
+
+export function NmInlineCitation(props: { label: string; title: string; url: string; excerpt?: string }): ReactNode {
+  return (
+    <NmHoverCard>
+      <NmHoverCardTrigger className={C.citation} href={props.url} aria-label={`Source: ${props.title}`}>{props.label}</NmHoverCardTrigger>
+      <NmHoverCardContent>
+        <strong>{props.title}</strong>
+        <span className={C.itemDescription}>{props.url}</span>
+        {props.excerpt ? <span>{props.excerpt}</span> : null}
+      </NmHoverCardContent>
+    </NmHoverCard>
+  );
+}
+
+/* ----- Model selector ----- */
+
+export function NmModelSelector(props: {
+  models: readonly { id: string; label: string }[];
+  model: string;
+  onModel: (id: string) => void;
+  efforts: readonly { id: string; label: string }[];
+  effort: string;
+  onEffort: (id: string) => void;
+}): ReactNode {
+  const items = (rows: readonly { id: string; label: string }[], selected: string): NmDropdownItem[] =>
+    rows.map((row) => ({ id: row.id, label: row.label, checked: row.id === selected }));
+  const labelOf = (rows: readonly { id: string; label: string }[], id: string) => rows.find((r) => r.id === id)?.label ?? id;
+  return (
+    <div className={C.selector}>
+      <NmDropdown label="Model" displayLabel={labelOf(props.models, props.model)} items={items(props.models, props.model)} selected={props.model} onSelect={props.onModel} trigger="text" />
+      <NmDropdown label="Effort" displayLabel={labelOf(props.efforts, props.effort)} items={items(props.efforts, props.effort)} selected={props.effort} onSelect={props.onEffort} trigger="text" />
+    </div>
+  );
+}
+
+/* ----- Plan, queue, task ----- */
+
+export type NmPlanStep = { id: string; title: string; status: NmAiStatus; detail?: string };
+
+export function NmPlan(props: { title: string; steps: readonly NmPlanStep[]; defaultOpen?: boolean }): ReactNode {
+  const done = props.steps.filter((s) => s.status === 'done').length;
+  return (
+    <NmTrace ariaLabel="Plan">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine>
+            <NmTraceIcon><NmTraceGlyph kind="plan" /></NmTraceIcon>
+            <NmTraceTitle>{props.title}</NmTraceTitle>
+            <NmTraceBadges><NmTraceBadge>{done}/{props.steps.length}</NmTraceBadge></NmTraceBadges>
+          </NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent>
+          <ol className={C.steps}>
+            {props.steps.map((s) => (
+              <li key={s.id} className={C.stepsItem}>
+                <NmTraceLine status={nmAiTraceStatus(s.status)}><StatusIcon status={s.status} /><NmTraceTitle>{s.title}</NmTraceTitle></NmTraceLine>
+                {s.detail ? <NmTraceDescription>{s.detail}</NmTraceDescription> : null}
+              </li>
+            ))}
+          </ol>
+        </NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+export type NmQueueItem = { id: string; title: string; description?: string };
+
+export function NmQueue(props: { remaining: readonly NmQueueItem[]; completed: readonly NmQueueItem[]; defaultOpen?: boolean }): ReactNode {
+  const group = (title: string, kind: NmTraceGlyphKind, items: readonly NmQueueItem[], done: boolean) => (
+    <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+      <NmTraceCollapsibleTrigger>
+        <NmTraceLine><NmTraceIcon><NmTraceGlyph kind={kind} /></NmTraceIcon><NmTraceTitle>{title}</NmTraceTitle><NmTraceBadges><NmTraceBadge>{items.length}</NmTraceBadge></NmTraceBadges></NmTraceLine>
+      </NmTraceCollapsibleTrigger>
+      <NmTraceCollapsibleContent>
+        <ul className={C.steps}>
+          {items.map((i) => (
+            <li key={i.id} className={C.stepsItem}>
+              <NmTraceLine status={done ? undefined : 'pending'}><NmTraceIcon><NmTraceGlyph kind={done ? 'check' : 'circle'} /></NmTraceIcon><NmTraceTitle>{i.title}</NmTraceTitle></NmTraceLine>
+              {i.description ? <NmTraceDescription>{i.description}</NmTraceDescription> : null}
+            </li>
+          ))}
+        </ul>
+      </NmTraceCollapsibleContent>
+    </NmTraceCollapsible>
+  );
+  return <NmTrace ariaLabel="Queue">{group('To do', 'todo', props.remaining, false)}{group('Completed', 'completed', props.completed, true)}</NmTrace>;
+}
+
+export type NmTaskStep = { id: string; title: string; status: NmAiStatus; icon?: 'search' | 'file' };
+
+export function NmTask(props: { title: string; steps: readonly NmTaskStep[] }): ReactNode {
+  return (
+    <NmTrace ariaLabel={props.title}>
+      <NmTraceLine><NmTraceIcon><NmTraceGlyph kind="todo" /></NmTraceIcon><NmTraceTitle>{props.title}</NmTraceTitle></NmTraceLine>
+      {props.steps.map((s) => (
+        <NmTraceLine key={s.id} status={nmAiTraceStatus(s.status)}>
+          <NmTraceIcon><NmTraceGlyph kind={s.status === 'done' ? (s.icon === 'search' ? 'search' : 'read') : STATUS_GLYPH[s.status]} spin={s.status === 'running'} /></NmTraceIcon>
+          <NmTraceTitle shimmer={s.status === 'running'}>{s.title}</NmTraceTitle>
+        </NmTraceLine>
+      ))}
+    </NmTrace>
+  );
+}
+
+/* ----- Sources ----- */
+
+export function NmSources(props: { sources: readonly { title: string; url: string }[]; defaultOpen?: boolean }): ReactNode {
+  return (
+    <NmTrace ariaLabel="Sources">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine><NmTraceIcon><NmTraceGlyph kind="source" /></NmTraceIcon><NmTraceTitle>Used {props.sources.length} sources</NmTraceTitle></NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent asList>
+          {props.sources.map((s) => (
+            <NmTraceLine key={s.url} as="li">
+              <NmTraceIcon><NmTraceGlyph kind="external" /></NmTraceIcon>
+              <a className="nm-trace__link" href={s.url}>{s.title}</a>
+            </NmTraceLine>
+          ))}
+        </NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+/* ----- Terminal, stack trace, test results ----- */
+
+export function NmTerminal(props: { command: string; output?: string; exitCode?: number; running?: boolean; defaultOpen?: boolean }): ReactNode {
+  const failed = props.exitCode != null && props.exitCode !== 0;
+  const title = props.running ? `Running ${props.command}` : failed ? `${props.command} exited with code ${props.exitCode}` : `Ran ${props.command}`;
+  return (
+    <NmTrace ariaLabel="Terminal">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine status={props.running ? 'running' : failed ? 'error' : undefined}>
+            <NmTraceIcon><NmTraceGlyph kind="command" /></NmTraceIcon>
+            <NmTraceTitle shimmer={props.running}>{title}</NmTraceTitle>
+          </NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent><NmOutput nowrap maxHeight="16rem">{props.output ?? ''}</NmOutput></NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+export type NmStackFrame = { fn: string; file: string; line: number; internal?: boolean };
+
+export function NmStackTrace(props: { error: string; frames: readonly NmStackFrame[]; defaultOpen?: boolean }): ReactNode {
+  const app = props.frames.filter((f) => !f.internal);
+  const internal = props.frames.filter((f) => f.internal);
+  const row = (f: NmStackFrame) => (
+    <div key={`${f.file}:${f.line}:${f.fn}`} className={C.frame} data-internal={f.internal ? 'true' : undefined}>
+      <span>at {f.fn}</span><span>{f.file}:{f.line}</span>
+    </div>
+  );
+  return (
+    <NmTrace ariaLabel="Stack trace">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine status="error"><NmTraceIcon><NmTraceGlyph kind="alert" /></NmTraceIcon><NmTraceTitle>{props.error}</NmTraceTitle></NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent>
+          <div className={C.stack}>
+            {app.map(row)}
+            {internal.length > 0 ? (
+              <NmTraceCollapsible>
+                <NmTraceCollapsibleTrigger><NmTraceLine><NmTraceTitle>{internal.length} internal frames</NmTraceTitle></NmTraceLine></NmTraceCollapsibleTrigger>
+                <NmTraceCollapsibleContent>{internal.map(row)}</NmTraceCollapsibleContent>
+              </NmTraceCollapsible>
+            ) : null}
+          </div>
+        </NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+export type NmTestStatus = 'passed' | 'failed' | 'skipped';
+export type NmTestSuite = { name: string; tests: readonly { name: string; status: NmTestStatus; error?: string }[] };
+
+export function NmTestResults(props: { suites: readonly NmTestSuite[]; defaultOpen?: boolean }): ReactNode {
+  const all = props.suites.flatMap((s) => s.tests);
+  const failed = all.filter((t) => t.status === 'failed').length;
+  const skipped = all.filter((t) => t.status === 'skipped').length;
+  const passed = all.length - failed - skipped;
+  return (
+    <NmTrace ariaLabel="Test results">
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine status={failed > 0 ? 'error' : undefined}>
+            <NmTraceIcon><NmTraceGlyph kind={failed > 0 ? 'alert' : 'check'} /></NmTraceIcon>
+            <NmTraceTitle>{failed > 0 ? `${failed} of ${all.length} tests failed` : `${all.length} tests passed`}</NmTraceTitle>
+            <NmTraceBadges><NmTraceBadge>{passed} passed</NmTraceBadge>{failed ? <NmTraceBadge>{failed} failed</NmTraceBadge> : null}{skipped ? <NmTraceBadge>{skipped} skipped</NmTraceBadge> : null}</NmTraceBadges>
+          </NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent>
+          {props.suites.map((suite) => (
+            <div key={suite.name} className={C.stack}>
+              <NmTraceDescription>{suite.name}</NmTraceDescription>
+              <ul className={C.tests}>
+                {suite.tests.map((t) => (
+                  <li key={t.name} className={C.testRow} data-status={t.status}>
+                    <NmTraceGlyph kind={t.status === 'passed' ? 'check' : t.status === 'failed' ? 'alert' : 'circle'} />
+                    <span>{t.name}</span>
+                  </li>
+                ))}
+              </ul>
+              {suite.tests.filter((t) => t.error).map((t) => <NmOutput key={t.name} label={t.name}>{t.error!}</NmOutput>)}
+            </div>
+          ))}
+        </NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+/* ----- Tool ----- */
+
+const TOOL_TITLE: Record<NmToolState, (name: string) => string> = {
+  'input-streaming': (n) => `Preparing ${n}`,
+  'input-available': (n) => `Running ${n}`,
+  'approval-requested': (n) => `Waiting to run ${n}`,
+  'approval-responded': (n) => `Running ${n}`,
+  'output-available': (n) => `Ran ${n}`,
+  'output-error': (n) => `Failed to run ${n}`,
+  'output-denied': (n) => `Denied ${n}`,
+};
+
+export function NmTool(props: {
+  name: string;
+  state: NmToolState;
+  input?: string;
+  output?: string;
+  error?: string;
+  onApprove?: () => void;
+  onDeny?: () => void;
+  defaultOpen?: boolean;
+}): ReactNode {
+  const [sheet, setSheet] = useState(false);
+  if (props.state === 'approval-requested') {
+    return <NmConfirmation title={props.name} description={props.input} state="requested" onApprove={props.onApprove} onDeny={props.onDeny} />;
+  }
+  const running = props.state === 'input-streaming' || props.state === 'input-available' || props.state === 'approval-responded';
+  const status = props.state === 'output-error' ? 'error' : running ? 'running' : undefined;
+  return (
+    <>
+      <NmTrace ariaLabel={`Tool ${props.name}`}>
+        <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+          <NmTraceCollapsibleTrigger>
+            <NmTraceLine status={status}>
+              <NmTraceIcon><NmTraceGlyph kind="command" /></NmTraceIcon>
+              <NmTraceTitle shimmer={running}>{TOOL_TITLE[props.state](props.name)}</NmTraceTitle>
+            </NmTraceLine>
+          </NmTraceCollapsibleTrigger>
+          <NmTraceCollapsibleContent>
+            <div className={C.stack}>
+              {props.input ? <NmOutput label="Input">{props.input}</NmOutput> : null}
+              {props.output ? <NmOutput label="Output">{props.output}</NmOutput> : null}
+              {props.error ? <NmOutput label="Error">{props.error}</NmOutput> : null}
+              {props.output ? <NmButton label="Open output" tone="muted" size="compact" icon="expand" onClick={() => setSheet(true)} /> : null}
+            </div>
+          </NmTraceCollapsibleContent>
+        </NmTraceCollapsible>
+      </NmTrace>
+      {sheet ? <NmSheet title={`${props.name} output`} description="The full output of the tool call." onClose={() => setSheet(false)}><NmOutput>{props.output ?? ''}</NmOutput></NmSheet> : null}
+    </>
+  );
+}
+
+/* ----- Subagent ----- */
+
+export function NmSubagent(props: {
+  name: string;
+  task: string;
+  status: NmAiStatus;
+  tools?: readonly { id: string; title: string; status: NmAiStatus }[];
+  result?: string;
+  defaultOpen?: boolean;
+}): ReactNode {
+  return (
+    <NmTrace ariaLabel={`Subagent ${props.name}`}>
+      <NmTraceCollapsible defaultOpen={props.defaultOpen}>
+        <NmTraceCollapsibleTrigger>
+          <NmTraceLine status={nmAiTraceStatus(props.status)}>
+            <StatusIcon status={props.status} />
+            <NmTraceTitle shimmer={props.status === 'running'}>{props.name}</NmTraceTitle>
+            <NmTraceBadges><NmTraceBadge>{props.status}</NmTraceBadge></NmTraceBadges>
+          </NmTraceLine>
+        </NmTraceCollapsibleTrigger>
+        <NmTraceCollapsibleContent>
+          <div className={C.stack}>
+            <NmTraceDescription>{props.task}</NmTraceDescription>
+            {props.tools?.map((t) => (
+              <NmTraceLine key={t.id} status={nmAiTraceStatus(t.status)}><StatusIcon status={t.status} /><NmTraceTitle>{t.title}</NmTraceTitle></NmTraceLine>
+            ))}
+            {props.result ? <NmOutput label="Result">{props.result}</NmOutput> : null}
+          </div>
+        </NmTraceCollapsibleContent>
+      </NmTraceCollapsible>
+    </NmTrace>
+  );
+}
+
+/* ----- Suggestion, prompt input, chat ----- */
+
+export function NmSuggestions(props: { items: readonly string[]; onPick: (text: string) => void; disabled?: boolean }): ReactNode {
+  return (
+    <div className={C.suggestions} role="list">
+      {props.items.map((text) => (
+        <button key={text} type="button" role="listitem" className={C.suggestion} disabled={props.disabled} onClick={() => props.onPick(text)}>{text}</button>
+      ))}
+    </div>
+  );
+}
+
+export type NmChatTurn = { id: string; role: 'user' | 'assistant'; text: string; reasoning?: string; tool?: { name: string; state: NmToolState; output?: string } };
+
+export function NmChat(props: { turns: readonly NmChatTurn[]; empty?: { title: string; description: string }; streaming?: boolean }): ReactNode {
+  if (props.turns.length === 0 && props.empty) {
+    return (
+      <div className={C.thread}>
+        <div className={C.threadEmpty}><NmIcon id="chat-dashed" /><strong>{props.empty.title}</strong><span>{props.empty.description}</span></div>
+      </div>
+    );
+  }
+  return (
+    <div className={C.thread} role="log" aria-live="polite">
+      {props.turns.map((turn) => (
+        <NmMessage key={turn.id} role={turn.role}>
+          {turn.reasoning ? <NmReasoning text={turn.reasoning} seconds={3} /> : null}
+          {turn.tool ? <NmTool name={turn.tool.name} state={turn.tool.state} output={turn.tool.output} /> : null}
+          {turn.text}
+        </NmMessage>
+      ))}
+      {props.streaming ? <NmMessageMeta label="Thinking" live /> : null}
+      {props.streaming ? <NmTextShimmer>Generating response</NmTextShimmer> : null}
+    </div>
+  );
+}