hex-audit 0.7.0 → 0.8.0

package/dashboard/components/DianeNote.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { InlineMarkdown } from './MarkdownRenderer';
+import { Button } from './ui/Button';
+import { InspectorSection } from './ui/Inspector';
+import { useToast } from './ui/Toast';
+import { sendJson } from '@/lib/api';
+import { cn } from '@/lib/cn';
+import type { ContractNoteView, NoteFn, NoteLead } from '@/lib/types';
+
+function matchFn(note: ContractNoteView, id: string, name: string): NoteFn | undefined {
+  return (
+    note.functions.find(
+      (f) => f.fn_ref && (f.fn_ref === id || f.fn_ref === `${note.contract}.${name}`),
+    ) ?? note.functions.find((f) => (f.sig.split('(')[0] ?? '').trim() === name)
+  );
+}
+
+/**
+ * Diane's note for the selected function's contract: what she wrote about
+ * this function, the open questions (answer inline) and the open leads
+ * (dismiss inline). Mutations go through the existing /api/notes routes.
+ */
+export function DianeNote({
+  note,
+  fnId,
+  fnName,
+}: {
+  note: ContractNoteView;
+  fnId: string;
+  fnName: string;
+}) {
+  const router = useRouter();
+  const toast = useToast();
+  const fn = matchFn(note, fnId, fnName);
+  const questions = note.questions.filter((q) => !q.answer?.trim());
+  const leads = note.leads
+    .filter((l) => l.status === 'open')
+    .sort((a, b) => Number(b.text.includes(fnName)) - Number(a.text.includes(fnName)));
+
+  const dismissLead = async (id: string) => {
+    try {
+      await sendJson('/api/notes/lead', {
+        contract: note.target,
+        id,
+        action: 'close',
+        status: 'dismissed',
+      });
+      router.refresh();
+      toast({
+        message: 'Lead dismissed',
+        action: {
+          label: 'Undo',
+          onClick: () =>
+            void sendJson('/api/notes/lead', { contract: note.target, id, action: 'reopen' }).then(
+              () => router.refresh(),
+            ),
+        },
+      });
+    } catch (err) {
+      toast({ message: (err as Error).message, tone: 'error' });
+    }
+  };
+
+  const empty = !fn && questions.length === 0 && leads.length === 0;
+
+  return (
+    <InspectorSection label={`Diane's notes on ${note.contract}`}>
+      {empty && (
+        <p className="text-body text-text-tertiary">
+          Nothing yet. Record a narration, then run{' '}
+          <code className="font-mono text-caption">/diane</code>.
+        </p>
+      )}
+
+      {fn && (
+        <div className="space-y-1.5 text-body text-text-secondary">
+          {fn.purpose && (
+            <p>
+              <InlineMarkdown>{fn.purpose}</InlineMarkdown>
+            </p>
+          )}
+          {fn.access && (
+            <p>
+              <span className="text-text-tertiary">Access </span>
+              <InlineMarkdown>{fn.access}</InlineMarkdown>
+            </p>
+          )}
+          {fn.effects && (
+            <p>
+              <span className="text-text-tertiary">Effects </span>
+              <InlineMarkdown>{fn.effects}</InlineMarkdown>
+            </p>
+          )}
+          {fn.notes.map((n, i) => (
+            <p key={i}>
+              <InlineMarkdown>{n}</InlineMarkdown>
+            </p>
+          ))}
+          {fn.warnings.map((w, i) => (
+            <p key={`w${i}`} className="flex gap-2 text-text-primary">
+              <span
+                className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full"
+                style={{ background: 'var(--high)' }}
+              />
+              <span>
+                <InlineMarkdown>{w}</InlineMarkdown>
+              </span>
+            </p>
+          ))}
+        </div>
+      )}
+
+      {questions.length > 0 && (
+        <div className="mt-5">
+          <div className="flex items-baseline justify-between text-caption text-text-tertiary">
+            <span>Open questions</span>
+            <span className="tabular-nums">{questions.length}</span>
+          </div>
+          <ul className="mt-1.5 divide-y divide-border-subtle border-y border-border-subtle">
+            {questions.map((q) => (
+              <li key={q.id} className="py-2.5">
+                <QuestionItem contract={note.target} id={q.id} text={q.q} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {leads.length > 0 && (
+        <div className="mt-5">
+          <div className="flex items-baseline justify-between text-caption text-text-tertiary">
+            <span>Open leads</span>
+            <span className="tabular-nums">{leads.length}</span>
+          </div>
+          <ul className="mt-1.5 divide-y divide-border-subtle border-y border-border-subtle">
+            {leads.map((l) => (
+              <LeadItem key={l.id} lead={l} onDismiss={() => dismissLead(l.id)} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </InspectorSection>
+  );
+}
+
+const SOURCE_LABEL: Record<string, string> = {
+  'ai-audit': 'AI audit',
+  'init-audit': 'Pre-review',
+  diane: 'Diane',
+  auditagent: 'AuditAgent',
+};
+
+/** One lead: a dot, the text (long ones clamp to three lines), where it came from, Dismiss. */
+function LeadItem({ lead, onDismiss }: { lead: NoteLead; onDismiss: () => void }) {
+  const [open, setOpen] = useState(false);
+  const long = lead.text.length > 220;
+  // Leads without a source were written by Diane from a narration.
+  const source = SOURCE_LABEL[lead.source ?? 'diane'] ?? lead.source;
+  return (
+    <li className="group flex gap-2.5 py-2.5">
+      <span
+        className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full"
+        style={{ background: 'var(--medium)' }}
+      />
+      <div className="min-w-0 flex-1">
+        <p
+          className={cn('text-body text-text-primary', long && !open && 'line-clamp-3')}
+          onClick={() => long && setOpen((v) => !v)}
+        >
+          <InlineMarkdown>{lead.text}</InlineMarkdown>
+        </p>
+        <div className="mt-1 flex items-center gap-2 text-caption text-text-tertiary">
+          {source && <span>{source}</span>}
+          {long && (
+            <button
+              type="button"
+              onClick={() => setOpen((v) => !v)}
+              className="hover:text-text-primary"
+            >
+              {open ? 'Show less' : 'Show more'}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="ml-auto rounded-md px-1.5 py-0.5 opacity-0 hover:bg-surface-2 hover:text-text-primary focus-visible:opacity-100 group-hover:opacity-100"
+          >
+            Dismiss
+          </button>
+        </div>
+      </div>
+    </li>
+  );
+}
+
+function QuestionItem({ contract, id, text }: { contract: string; id: string; text: string }) {
+  const router = useRouter();
+  const toast = useToast();
+  const [answer, setAnswer] = useState('');
+  const [busy, setBusy] = useState(false);
+  useEffect(() => setAnswer(''), [id]);
+
+  const save = async () => {
+    if (!answer.trim()) return;
+    setBusy(true);
+    try {
+      await sendJson('/api/notes/question', { contract, id, answer: answer.trim() });
+      toast({ message: 'Answer saved' });
+      router.refresh();
+    } catch (err) {
+      toast({ message: (err as Error).message, tone: 'error' });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div>
+      <p className="text-body text-text-primary">
+        <InlineMarkdown>{text}</InlineMarkdown>
+      </p>
+      <div className="mt-1.5 flex items-start gap-2">
+        <textarea
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) void save();
+          }}
+          rows={1}
+          placeholder="Answer…"
+          className="min-h-[32px] flex-1 resize-y rounded-md border border-border-subtle bg-surface-0 px-2.5 py-1.5 text-body text-text-primary placeholder:text-text-tertiary focus:border-border-emphasis focus:outline-none"
+        />
+        {answer.trim() && (
+          <Button size="sm" variant="secondary" onClick={save} disabled={busy} className="mt-0.5">
+            Save
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/dashboard/components/LiveStatus.tsx

@@ -1,97 +1,59 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useLive } from '@/lib/live';
 
 interface GithubSync {
   repo: string;
   last_synced_at: string;
 }
 
-function relative(then: Date, now: Date): string {
-  const seconds = Math.round((now.getTime() - then.getTime()) / 1000);
-  if (seconds < 5) return 'just now';
-  if (seconds < 60) return `${seconds}s ago`;
-  if (seconds < 3600) return `${Math.round(seconds / 60)}m ago`;
-  return `${Math.round(seconds / 3600)}h ago`;
+function relative(then: number, now: number): string {
+  const s = Math.round((now - then) / 1000);
+  if (s < 10) return 'just now';
+  if (s < 60) return `${s}s ago`;
+  if (s < 3600) return `${Math.round(s / 60)}m ago`;
+  return `${Math.round(s / 3600)}h ago`;
 }
 
-/**
- * Shows when the dashboard last refreshed from the file watcher, plus a second
- * dot for the GitHub sync timestamp when /sync-github has been run.
- *
- * Lives alongside (but is intentionally a sibling of) the headless AutoRefresh
- * component so the user can see the SSE is connected and recent.
- */
+/** One quiet line: is the dashboard live, and when did `.hex/` last change. */
 export function LiveStatus() {
-  const router = useRouter();
-  const [lastUpdated, setLastUpdated] = useState<Date>(() => new Date());
-  const [connected, setConnected] = useState(false);
-  const [now, setNow] = useState<Date>(() => new Date());
+  const live = useLive();
+  const [now, setNow] = useState(() => Date.now());
   const [github, setGithub] = useState<GithubSync | null>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Fetch the github sync status on mount and after every file-watcher refresh.
-  const refetchGithub = () => {
-    fetch('/api/github-status', { cache: 'no-store' })
-      .then((res) => (res.ok ? res.json() : null))
-      .then((data) => {
-        if (data && typeof data.last_synced_at === 'string') {
-          setGithub({ repo: data.repo ?? '', last_synced_at: data.last_synced_at });
-        } else {
-          setGithub(null);
-        }
-      })
-      .catch(() => setGithub(null));
-  };
-
-  useEffect(() => {
-    refetchGithub();
-    const source = new EventSource('/api/watch');
-    source.onopen = () => setConnected(true);
-    source.onmessage = () => {
-      setLastUpdated(new Date());
-      refetchGithub();
-    };
-    source.onerror = () => setConnected(false);
-    return () => source.close();
-  }, [router]);
 
   useEffect(() => {
-    const interval = setInterval(() => setNow(new Date()), 30_000);
-    return () => clearInterval(interval);
+    const i = setInterval(() => setNow(Date.now()), 30_000);
+    return () => clearInterval(i);
   }, []);
 
-  useEffect(() => () => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-  }, []);
-
-  const watcherLabel = connected
-    ? `Updated ${relative(lastUpdated, now)}`
-    : 'Reconnecting…';
+  useEffect(() => {
+    setNow(Date.now());
+    fetch('/api/github-status', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => setGithub(d && typeof d.last_synced_at === 'string' ? d : null))
+      .catch(() => setGithub(null));
+  }, [live.lastUpdate]);
 
   return (
-    <div className="px-3 py-1 text-caption text-text-tertiary" aria-live="polite">
+    <div className="space-y-1 px-2.5 text-caption text-text-tertiary" aria-live="polite">
       <div
         className="flex items-center gap-2"
-        title={`Last refresh ${lastUpdated.toLocaleTimeString()}${connected ? '' : ' — watcher disconnected'}`}
+        title={live.lastFile ? `Last change: ${live.lastFile}` : undefined}
       >
         <span
-          className={`inline-block h-1.5 w-1.5 rounded-full ${connected ? 'bg-[var(--success)]' : 'bg-[var(--medium)]'}`}
           aria-hidden="true"
+          className="h-1.5 w-1.5 shrink-0 rounded-full"
+          style={{ background: live.connected ? 'var(--success)' : 'var(--medium)' }}
         />
-        <span>{watcherLabel}</span>
+        <span>
+          {live.connected ? `Live · updated ${relative(live.lastUpdate, now)}` : 'Reconnecting…'}
+        </span>
       </div>
       {github && (
-        <div
-          className="mt-1 flex items-center gap-2"
-          title={`GitHub sync with ${github.repo} at ${new Date(github.last_synced_at).toLocaleTimeString()}`}
-        >
-          <span
-            className="inline-block h-1.5 w-1.5 rounded-full bg-accent"
-            aria-hidden="true"
-          />
-          <span>GitHub {relative(new Date(github.last_synced_at), now)}</span>
+        <div className="flex items-center gap-2" title={`GitHub sync with ${github.repo}`}>
+          <span aria-hidden="true" className="h-1.5 w-1.5 shrink-0 rounded-full bg-text-tertiary" />
+          <span>GitHub synced {relative(Date.parse(github.last_synced_at), now)}</span>
         </div>
       )}
     </div>

package/dashboard/components/MarkdownRenderer.tsx

@@ -3,46 +3,48 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-interface MarkdownRendererProps {
-  content: string;
-  className?: string;
-}
-
-export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
+/** Long-form markdown (overviews, descriptions) in the dashboard's reading style. */
+export function MarkdownRenderer({ content, className }: { content: string; className?: string }) {
   return (
     <div
-      className={`prose max-w-none
-        prose-headings:text-text-primary
-        prose-p:text-text-secondary
+      className={`prose max-w-none text-body
+        prose-headings:font-semibold prose-headings:text-text-primary
+        prose-h1:text-title prose-h2:text-heading prose-h3:text-body
+        prose-p:text-text-secondary prose-p:leading-relaxed
         prose-strong:text-text-primary
-        prose-code:text-accent
-        prose-code:before:content-none
-        prose-code:after:content-none
-        prose-pre:bg-surface-0
-        prose-pre:border
-        prose-pre:border-border-default
-        prose-a:text-accent
-        prose-a:no-underline
-        hover:prose-a:underline
-        prose-th:text-text-primary
-        prose-td:text-text-secondary
-        prose-hr:border-border-default
-        prose-blockquote:border-border-emphasis
-        prose-blockquote:text-text-secondary
-        prose-li:text-text-secondary
+        prose-code:rounded prose-code:bg-surface-2 prose-code:px-1 prose-code:py-px prose-code:font-normal prose-code:text-[0.88em] prose-code:text-text-primary
+        prose-code:before:content-none prose-code:after:content-none
+        prose-pre:rounded-md prose-pre:border prose-pre:border-border-subtle prose-pre:bg-surface-1 prose-pre:text-text-primary
+        prose-a:text-accent prose-a:no-underline hover:prose-a:underline
+        prose-th:text-text-primary prose-td:text-text-secondary
+        prose-hr:border-border-subtle
+        prose-blockquote:border-border-default prose-blockquote:text-text-secondary
+        prose-li:text-text-secondary prose-li:marker:text-text-tertiary
         ${className ?? ''}`}
     >
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>
-        {content}
-      </ReactMarkdown>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
     </div>
   );
 }
 
 /**
- * Inline markdown for short strings inside the structured Notes UI (lead text,
- * bullets, function fields, Q&A). Renders without a block <p> wrapper so it
- * sits inline, and styles `code` / **bold** / links to match the design system.
+ * Keep inline text inline: a line that starts like a list ("1. ", "- "), a heading
+ * ("# ") or a quote ("> ") would render a block element inside the caller's <p> or
+ * <span>, which is invalid HTML; the browser re-nests it and hydration fails.
+ * Diane writes flows as "1. … 2. …", so this is the common case, not an edge.
+ */
+export function escapeBlockMarkers(text: string): string {
+  return text
+    .split('\n')
+    .map((l) =>
+      l.replace(/^(\s*)(\d+)([.)])(\s)/, '$1$2\\$3$4').replace(/^(\s*)([-*+#>])(\s)/, '$1\\$2$3'),
+    )
+    .join('\n');
+}
+
+/**
+ * Inline markdown for short strings (lead text, bullets, model claims).
+ * Renders without a block <p> wrapper so it sits inline.
  */
 export function InlineMarkdown({ children }: { children: string }) {
   return (
@@ -51,7 +53,7 @@ export function InlineMarkdown({ children }: { children: string }) {
       components={{
         p: ({ children }) => <>{children}</>,
         code: ({ children }) => (
-          <code className="rounded bg-surface-0 px-1 py-0.5 font-mono text-[0.85em] text-accent">
+          <code className="rounded bg-surface-2 px-1 py-px font-mono text-[0.86em] text-text-primary">
             {children}
           </code>
         ),
@@ -65,7 +67,7 @@ export function InlineMarkdown({ children }: { children: string }) {
         ),
       }}
     >
-      {children}
+      {escapeBlockMarkers(children)}
     </ReactMarkdown>
   );
 }

package/dashboard/components/RecordButton.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from './ui/Button';
+import { IconMic } from './ui/Icons';
+import { useToast } from './ui/Toast';
+
+type RecState = 'idle' | 'recording' | 'transcribing';
+
+function fmt(sec: number): string {
+  return `${Math.floor(sec / 60)}:${String(sec % 60).padStart(2, '0')}`;
+}
+
+/**
+ * Talk to Diane: the browser records locally (MediaRecorder), posts the audio
+ * to `/api/notes/record`, which transcribes it with a local Whisper engine and
+ * registers a session for the `/diane` skill to process.
+ */
+export function RecordButton({ contract, pending }: { contract: string; pending: number }) {
+  const router = useRouter();
+  const toast = useToast();
+  const [state, setState] = useState<RecState>('idle');
+  const [elapsed, setElapsed] = useState(0);
+  const recorder = useRef<MediaRecorder | null>(null);
+  const chunks = useRef<Blob[]>([]);
+  const stream = useRef<MediaStream | null>(null);
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
+  const target = useRef(contract);
+  target.current = contract;
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearInterval(timer.current);
+      stream.current?.getTracks().forEach((t) => t.stop());
+    },
+    [],
+  );
+
+  const upload = useCallback(
+    async (forContract: string) => {
+      setState('transcribing');
+      try {
+        const fd = new FormData();
+        fd.append('audio', new Blob(chunks.current, { type: 'audio/webm' }), 'narration.webm');
+        fd.append('contract', forContract || 'general');
+        const res = await fetch('/api/notes/record', { method: 'POST', body: fd });
+        const data = (await res.json().catch(() => ({}))) as {
+          error?: string;
+          whisperMissing?: boolean;
+          audioSaved?: string;
+          contract?: string;
+        };
+        if (res.status === 422 && data.whisperMissing) {
+          toast({
+            message: `Audio saved, but no local Whisper engine is installed. ${data.error ?? ''}`,
+            tone: 'error',
+          });
+        } else if (!res.ok) {
+          toast({ message: data.error ?? 'Recording failed', tone: 'error' });
+        } else {
+          toast({
+            message: `Narration saved for ${data.contract}. Run /diane in Claude Code to process it.`,
+          });
+          router.refresh();
+        }
+      } catch (err) {
+        toast({ message: err instanceof Error ? err.message : 'Recording failed', tone: 'error' });
+      } finally {
+        setState('idle');
+      }
+    },
+    [router, toast],
+  );
+
+  const start = useCallback(async () => {
+    try {
+      const s = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.current = s;
+      chunks.current = [];
+      const mr = new MediaRecorder(s);
+      const forContract = target.current;
+      mr.ondataavailable = (e) => {
+        if (e.data.size > 0) chunks.current.push(e.data);
+      };
+      mr.onstop = () => {
+        s.getTracks().forEach((t) => t.stop());
+        if (timer.current) clearInterval(timer.current);
+        void upload(forContract);
+      };
+      recorder.current = mr;
+      mr.start();
+      setElapsed(0);
+      timer.current = setInterval(() => setElapsed((e) => e + 1), 1000);
+      setState('recording');
+    } catch {
+      toast({ message: 'Could not access the microphone. Allow it and try again.', tone: 'error' });
+    }
+  }, [toast, upload]);
+
+  if (state === 'recording') {
+    return (
+      <Button
+        variant="secondary"
+        onClick={() => recorder.current?.stop()}
+        title="Stop and transcribe"
+      >
+        <span className="h-2 w-2 rounded-full" style={{ background: 'var(--critical)' }} />
+        Stop · <span className="tabular-nums">{fmt(elapsed)}</span>
+      </Button>
+    );
+  }
+  return (
+    <Button
+      variant="secondary"
+      onClick={start}
+      disabled={state === 'transcribing'}
+      title={`Narrate your reading of ${contract || 'the protocol'} for Diane`}
+    >
+      <IconMic className="h-4 w-4 text-text-secondary" />
+      {state === 'transcribing' ? 'Transcribing…' : 'Record narration'}
+      {pending > 0 && state === 'idle' && (
+        <span
+          className="text-caption text-text-tertiary"
+          title={`${pending} narration session(s) waiting for /diane`}
+        >
+          {pending} waiting
+        </span>
+      )}
+    </Button>
+  );
+}

package/dashboard/components/ui/Button.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import { cn } from '@/lib/cn';
+
+type Variant = 'primary' | 'secondary' | 'ghost';
+type Size = 'sm' | 'md';
+
+const VARIANT: Record<Variant, string> = {
+  primary: 'bg-accent text-accent-contrast hover:bg-accent-secondary shadow-sm',
+  secondary:
+    'bg-surface-0 text-text-primary border border-border-default hover:bg-surface-2 shadow-sm',
+  ghost: 'text-text-secondary hover:bg-surface-2 hover:text-text-primary',
+};
+
+const SIZE: Record<Size, string> = {
+  sm: 'h-7 px-2.5 text-caption gap-1.5',
+  md: 'h-8 px-3 text-body gap-2',
+};
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant; size?: Size }
+>(function Button(
+  { variant = 'secondary', size = 'md', className, type = 'button', ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md font-medium disabled:pointer-events-none disabled:opacity-40',
+        VARIANT[variant],
+        SIZE[size],
+        className,
+      )}
+      {...rest}
+    />
+  );
+});

package/dashboard/components/ui/Chip.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/cn';
+
+export type ChipTone = 'neutral' | 'accent' | 'warn' | 'danger' | 'ok';
+
+const TONE: Record<ChipTone, string> = {
+  neutral: 'bg-surface-2 text-text-secondary',
+  accent: 'bg-accent-subtle text-accent',
+  warn: 'bg-[color-mix(in_oklch,var(--high)_14%,transparent)] text-[var(--high)]',
+  danger: 'bg-[color-mix(in_oklch,var(--critical)_14%,transparent)] text-[var(--critical)]',
+  ok: 'bg-[color-mix(in_oklch,var(--success)_14%,transparent)] text-[var(--success)]',
+};
+
+/** A quiet status chip. Use at most one per row. */
+export function Chip({
+  tone = 'neutral',
+  children,
+  className,
+  title,
+}: {
+  tone?: ChipTone;
+  children: React.ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <span
+      title={title}
+      className={cn(
+        'inline-flex items-center gap-1 whitespace-nowrap rounded-md px-1.5 py-px text-caption font-medium',
+        TONE[tone],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}