@candor-ui/react 1.1.0 → 1.5.0

package/dist/adapters/use-claude-agent.d.ts

@@ -1,11 +1,32 @@
 import * as React from "react";
 import type { EntityRef } from "../lib/chat.js";
-import { type FromClaudeAgentOptions } from "./claude-agent-sdk.js";
+import { type AgentEvent, type ClaudeApprovalAnswer, type ClaudePermissionMode, type FromClaudeAgentOptions } from "./claude-agent-sdk.js";
 export type UseClaudeAgentOptions = Omit<FromClaudeAgentOptions, "running"> & {
-    /** Your route that runs the agent with streamClaudeAgent. It receives `{ prompt, references, sessionId, ...body }`. */
+    /** Your route that runs the agent with streamClaudeAgent. It receives `{ prompt, promptId, references, sessionId, ...body }`. */
     api: string;
-    /** Your route that calls answerClaudeAgentApproval. It receives `{ id, approved, reason }`. */
-    approveApi: string;
+    /**
+     * Your route that records an answer (answerClaudeApproval). It receives `{ id, approved, reason, updatedInput,
+     * answers, alwaysAllow }` and returns `{ ok }`. Not needed with `onRespond`.
+     */
+    approveApi?: string;
+    /**
+     * Answer through your own route instead, e.g. one that signals the workflow running the agent. Resolve true once
+     * the answer is recorded, false if it wasn't (the request had ended).
+     */
+    onRespond?: (approvalId: string, answer: ClaudeApprovalAnswer) => Promise<boolean>;
+    /** Events you kept from earlier (onEvent, a run store): the conversation is folded from them, as it was. */
+    initialEvents?: AgentEvent[];
+    /**
+     * Where to re-attach to a run after a reload: `(runId, from) => \`/api/agent/${runId}?from=${from}\``, a route that
+     * returns attachClaudeAgentRun. With `runId`, the hook re-attaches when it mounts.
+     */
+    attachUrl?: (runId: string, from: number) => string;
+    /** A run to re-attach to when the hook mounts, e.g. the one you saved from `runId` before the reload. */
+    runId?: string;
+    /** Your route that calls stopClaudeAgentRun with `{ runId }`. Needed to stop a run that keeps going without the browser (`detach`). */
+    stopApi?: string;
+    /** Your route that calls setClaudeAgentPermissionMode with `{ runId, mode }`. Enables `setPermissionMode`. */
+    modeApi?: string;
     /** Extra fields for every request, e.g. which project the agent works on. */
     body?: Record<string, unknown>;
     headers?: Record<string, string>;
@@ -26,7 +47,7 @@ export type UseClaudeAgentOptions = Omit<FromClaudeAgentOptions, "running"> & {
 export declare function useClaudeAgent(options: UseClaudeAgentOptions): {
     messages: import("../index.js").MessageData[];
     approvals: import("./claude-agent-sdk.js").ClaudeApproval[];
-    respond: (approvalId: string, approved: boolean, reason?: string) => Promise<void>;
+    respond: (approvalId: string, approved: boolean, reason?: string, more?: Omit<ClaudeApprovalAnswer, "approved" | "reason">) => Promise<boolean>;
     /** What the SDK measured for the session: cost (its estimate), tokens and turns. */
     usage: import("./claude-agent-sdk.js").ClaudeAgentUsage | undefined;
     /** A passing problem the agent is handling itself, such as a retried API call. */
@@ -34,6 +55,14 @@ export declare function useClaudeAgent(options: UseClaudeAgentOptions): {
     /** The request failed; say so, and let the person send again. */
     error: string | undefined;
     sessionId: string | undefined;
+    /** Every event so far, to keep for replay (`initialEvents`). */
+    events: AgentEvent[];
+    /** The current or last run's id (from `x-candor-run-id`): save it to re-attach after a reload. */
+    runId: string | undefined;
+    attach: (id: string, from?: number) => Promise<void>;
+    /** The permission mode last reported by the SDK or set through `setPermissionMode`. */
+    permissionMode: ClaudePermissionMode | undefined;
+    setPermissionMode: (mode: ClaudePermissionMode) => Promise<boolean>;
     /** Forget the conversation and start a new session. */
     reset: () => void;
     composer: {
@@ -42,7 +71,7 @@ export declare function useClaudeAgent(options: UseClaudeAgentOptions): {
         state: "streaming" | "ready" | "sending";
         references: EntityRef[];
         onReferencesChange: React.Dispatch<React.SetStateAction<EntityRef[]>>;
-        onStop: () => void | undefined;
+        onStop: () => void;
         onSubmit: (text: string, refs: EntityRef[]) => void;
     };
 };

package/dist/adapters/use-claude-agent.js

@@ -12,45 +12,54 @@ import { fromClaudeAgentEvents } from "./claude-agent-sdk.js";
  * sent as structured `references`, not pasted into the text.
  */
 export function useClaudeAgent(options) {
-    const { api, approveApi, body, headers, agent, toolTitle, fetch: fetcher } = options;
-    const [events, setEvents] = React.useState([]);
+    const { api, approveApi, onRespond, body, headers, agent, toolTitle, sourcesFrom, fetch: fetcher, attachUrl, stopApi, modeApi } = options;
+    const [events, setEvents] = React.useState(() => options.initialEvents ?? []);
+    const [runId, setRunId] = React.useState(options.runId);
     const [running, setRunning] = React.useState(false);
     const [error, setError] = React.useState();
     const [value, setValue] = React.useState("");
     const [references, setReferences] = React.useState([]);
     const run = React.useRef(null);
-    const state = React.useMemo(() => fromClaudeAgentEvents(events, { agent, toolTitle, running }), [events, agent, toolTitle, running]);
+    const state = React.useMemo(() => fromClaudeAgentEvents(events, { agent, toolTitle, sourcesFrom, running }), [events, agent, toolTitle, sourcesFrom, running]);
     const session = React.useRef(undefined);
     React.useEffect(() => {
         session.current = state.sessionId;
     }, [state.sessionId]);
     // Stop the agent if the component goes away mid-run.
     React.useEffect(() => () => run.current?.abort(), []);
-    const send = React.useCallback(async (text, refs) => {
+    /** Reads one response's events into state, a frame at a time. */
+    const stream = React.useCallback(async (open, before, replace = false) => {
         if (run.current)
             return;
         const controller = new AbortController();
         run.current = controller;
         setError(undefined);
         setRunning(true);
-        setEvents((e) => [...e, { type: "candor_user", id: crypto.randomUUID(), text, references: refs.length ? refs : undefined }]);
+        if (before)
+            setEvents((e) => [...e, before]);
         // Streamed text arrives a few characters at a time; apply it once per frame.
-        const pending = { events: [], frame: 0 };
+        const pending = { events: [], frame: 0, first: replace };
         const flush = () => {
             pending.frame = 0;
             const batch = pending.events.splice(0);
-            if (batch.length)
-                setEvents((e) => [...e, ...batch]);
+            if (!batch.length)
+                return;
+            const first = pending.first ? batch[0] : undefined;
+            pending.first = false;
+            setEvents((e) => {
+                // Re-attaching to a run whose events are already here (from initialEvents): the stored run replaces them,
+                // found by the person's message that starts it, rather than being added a second time.
+                const at = first?.type === "candor_user" ? e.findIndex((x) => x.type === "candor_user" && x.id === first.id) : -1;
+                return [...(at >= 0 ? e.slice(0, at) : e), ...batch];
+            });
         };
         try {
-            const res = await (fetcher ?? fetch)(api, {
-                method: "POST",
-                headers: { "content-type": "application/json", ...headers },
-                body: JSON.stringify({ ...body, prompt: text, references: refs, sessionId: session.current }),
-                signal: controller.signal,
-            });
+            const res = await open(controller.signal);
             if (!res.ok || !res.body)
                 throw new Error(`The agent request failed (${res.status}).`);
+            const id = res.headers.get("x-candor-run-id");
+            if (id)
+                setRunId(id);
             for await (const event of readEvents(res.body)) {
                 pending.events.push(event);
                 pending.frame ||= requestAnimationFrame(flush);
@@ -69,19 +78,77 @@ export function useClaudeAgent(options) {
             run.current = null;
             setRunning(false);
         }
-    }, [api, body, headers, fetcher]);
-    const respond = React.useCallback(async (approvalId, approved, reason) => {
+    }, []);
+    const send = React.useCallback((text, refs) => {
+        const promptId = crypto.randomUUID();
+        return stream((signal) => (fetcher ?? fetch)(api, {
+            method: "POST",
+            headers: { "content-type": "application/json", ...headers },
+            body: JSON.stringify({ ...body, prompt: text, promptId, references: refs, sessionId: session.current }),
+            signal,
+        }), { type: "candor_user", id: promptId, text, references: refs.length ? refs : undefined });
+    }, [api, body, headers, fetcher, stream]);
+    /**
+     * Re-attach to a run after a reload: its events from `from` on (default 0, the whole run), then live until it
+     * ends. Needs `attachUrl`. From 0, when the run store recorded the person's message (the server's `prompt`, with
+     * this hook's `promptId`), the run's events replace any copy of them already in `initialEvents`.
+     */
+    const attach = React.useCallback((id, from = 0) => {
+        if (!attachUrl)
+            return Promise.resolve();
+        setRunId(id);
+        return stream((signal) => (fetcher ?? fetch)(attachUrl(id, from), { headers, signal }), undefined, from === 0);
+    }, [attachUrl, fetcher, headers, stream]);
+    // Re-attach to the run named in options once, when the hook mounts.
+    const attachOnMount = React.useRef(options.runId);
+    React.useEffect(() => {
+        const id = attachOnMount.current;
+        attachOnMount.current = undefined;
+        if (id)
+            void attach(id);
+    }, [attach]);
+    const post = React.useCallback(async (url, payload) => {
+        const res = await (fetcher ?? fetch)(url, { method: "POST", headers: { "content-type": "application/json", ...headers }, body: JSON.stringify(payload) });
+        return res.ok && !!(await res.json()).ok;
+    }, [fetcher, headers]);
+    /**
+     * Answer a waiting request. `more` carries an edited input (`updatedInput`), answers to the agent's questions
+     * (`answers`) and the "always allow" rules the person picked (`alwaysAllow`, indexes into its `suggestions`).
+     */
+    const respond = React.useCallback(async (approvalId, approved, reason, more) => {
+        const answer = { approved, ...(reason !== undefined && { reason }), ...more };
         try {
-            const res = await (fetcher ?? fetch)(approveApi, { method: "POST", headers: { "content-type": "application/json", ...headers }, body: JSON.stringify({ id: approvalId, approved, reason }) });
-            const ok = res.ok && (await res.json()).ok;
+            const ok = onRespond ? await onRespond(approvalId, answer) : approveApi ? await post(approveApi, { id: approvalId, ...answer }) : false;
             if (!ok)
                 setError("Your answer didn’t reach the agent. The request may have ended; try sending the message again.");
+            return ok;
         }
         catch {
             setError("Your answer didn’t reach the agent. Check your connection and try again.");
+            return false;
+        }
+    }, [approveApi, onRespond, post]);
+    const stop = React.useCallback(() => {
+        // A detached run carries on without this browser, so it's stopped on the server too.
+        if (stopApi && runId)
+            void post(stopApi, { runId }).catch(() => { });
+        run.current?.abort();
+    }, [stopApi, runId, post]);
+    /** Change the run's permission mode. Resolves false when there's no run, no `modeApi`, or the server refused. */
+    const setPermissionMode = React.useCallback(async (mode) => {
+        if (!modeApi || !runId || !running)
+            return false;
+        try {
+            const ok = await post(modeApi, { runId, mode });
+            if (!ok)
+                setError("The permission mode didn’t change.");
+            return ok;
+        }
+        catch {
+            setError("The permission mode didn’t change. Check your connection and try again.");
+            return false;
         }
-    }, [approveApi, headers, fetcher]);
-    const stop = React.useCallback(() => run.current?.abort(), []);
+    }, [modeApi, runId, running, post]);
     const composerState = running ? (state.messages.at(-1)?.author.role === "agent" ? "streaming" : "sending") : "ready";
     return {
         messages: state.messages,
@@ -94,10 +161,19 @@ export function useClaudeAgent(options) {
         /** The request failed; say so, and let the person send again. */
         error,
         sessionId: state.sessionId,
+        /** Every event so far, to keep for replay (`initialEvents`). */
+        events,
+        /** The current or last run's id (from `x-candor-run-id`): save it to re-attach after a reload. */
+        runId,
+        attach,
+        /** The permission mode last reported by the SDK or set through `setPermissionMode`. */
+        permissionMode: state.permissionMode,
+        setPermissionMode,
         /** Forget the conversation and start a new session. */
         reset: () => {
             run.current?.abort();
             setEvents([]);
+            setRunId(undefined);
             setError(undefined);
         },
         composer: {

package/dist/chat/ai-disclosure.d.ts

@@ -0,0 +1,37 @@
+import type { AgentIdentity } from "../lib/chat.js";
+/** AiDisclosure's fixed words; override them under `aiDisclosure` in LocaleProvider's `strings`. */
+export declare const aiDisclosureStrings: {
+    /** The line in the thread when the app names the agent. */
+    line: string;
+    /** The line in the thread when no name is given. */
+    lineUnnamed: string;
+    /** The badge's visible text. */
+    badge: string;
+    /** The badge's accessible name when the app names the agent. */
+    badgeLabel: string;
+    /** The badge's accessible name when no name is given. */
+    badgeLabelUnnamed: string;
+    /** The heading of the badge's explanation. */
+    about: string;
+    aboutUnnamed: string;
+    learnMore: string;
+};
+/**
+ * A plain notice that the person is interacting with an AI system: a first line in the thread (`variant="line"`) or
+ * a compact "AI" badge for a thread header (`variant="badge"`) that opens to the app's own explanation. It helps an
+ * app tell people they're talking to an AI, as transparency rules such as Article 50(1) of the EU AI Act ask; whether
+ * a given placement meets those rules, and what else applies, stays the deployer's call. The agent's name and any
+ * details come from the app, never from model text. It's static: read in place, never announced as a live update.
+ */
+declare function AiDisclosure({ agent, variant, details, onLearnMore, className, }: {
+    /** The agent, named by the app: an AgentIdentity or a plain name. Left out, the notice says "an AI system". Never model text. */
+    agent?: AgentIdentity | string;
+    /** "line" (the default) for a first line in the thread; "badge" for a compact mark in a header, e.g. ThreadHeader's. Place each where it fits. */
+    variant?: "line" | "badge";
+    /** The app's own plain text about the system: who operates it, what data it uses, how to reach a person. Shown under the line, or in the badge's explanation. */
+    details?: string;
+    /** Opens the app's own page or dialog about its AI use. A callback, never a URL from the model. Shows a "Learn more" button. */
+    onLearnMore?: () => void;
+    className?: string;
+}): import("react").JSX.Element;
+export { AiDisclosure };

package/dist/chat/ai-disclosure.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bot } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+import { Button } from "../ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+/** AiDisclosure's fixed words; override them under `aiDisclosure` in LocaleProvider's `strings`. */
+export const aiDisclosureStrings = {
+    /** The line in the thread when the app names the agent. */
+    line: "{name} is an AI system, not a person.",
+    /** The line in the thread when no name is given. */
+    lineUnnamed: "You're interacting with an AI system, not a person.",
+    /** The badge's visible text. */
+    badge: "AI",
+    /** The badge's accessible name when the app names the agent. */
+    badgeLabel: "{name} is an AI system",
+    /** The badge's accessible name when no name is given. */
+    badgeLabelUnnamed: "AI system",
+    /** The heading of the badge's explanation. */
+    about: "About {name}",
+    aboutUnnamed: "About this AI system",
+    learnMore: "Learn more",
+};
+/**
+ * A plain notice that the person is interacting with an AI system: a first line in the thread (`variant="line"`) or
+ * a compact "AI" badge for a thread header (`variant="badge"`) that opens to the app's own explanation. It helps an
+ * app tell people they're talking to an AI, as transparency rules such as Article 50(1) of the EU AI Act ask; whether
+ * a given placement meets those rules, and what else applies, stays the deployer's call. The agent's name and any
+ * details come from the app, never from model text. It's static: read in place, never announced as a live update.
+ */
+function AiDisclosure({ agent, variant = "line", details, onLearnMore, className, }) {
+    const t = useStrings("aiDisclosure", aiDisclosureStrings);
+    const name = typeof agent === "string" ? agent : agent?.name;
+    const sentence = name ? t("line", { name }) : t("lineUnnamed");
+    const learnMore = onLearnMore && (_jsx(Button, { type: "button", variant: "link", size: "xs", className: "h-6 px-0 has-[>svg]:px-0", onClick: onLearnMore, children: t("learnMore") }));
+    if (variant === "badge") {
+        const label = name ? t("badgeLabel", { name }) : t("badgeLabelUnnamed");
+        const mark = (_jsxs(_Fragment, { children: [_jsx(Bot, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { "aria-hidden": true, children: t("badge") })] }));
+        const badgeClass = "inline-flex min-h-6 min-w-6 items-center justify-center gap-1 rounded-full border px-2 text-2xs font-medium text-muted-foreground";
+        // Nothing more to say: a static mark with a name, not a button that opens nothing.
+        if (!details && !onLearnMore)
+            return (_jsx("span", { "data-slot": "ai-disclosure", "data-variant": "badge", role: "img", "aria-label": label, className: cn(badgeClass, className), children: mark }));
+        return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { "data-slot": "ai-disclosure", "data-variant": "badge", "aria-label": label, className: cn(badgeClass, "outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", className), children: mark }), _jsxs(PopoverContent, { align: "start", className: "flex w-72 flex-col gap-1.5 p-3 text-xs", children: [_jsx("p", { className: "text-sm font-medium", children: name ? t("about", { name }) : t("aboutUnnamed") }), _jsx("p", { children: sentence }), details && _jsx("p", { className: "text-muted-foreground", children: details }), learnMore && _jsx("div", { children: learnMore })] })] }));
+    }
+    return (_jsxs("div", { "data-slot": "ai-disclosure", "data-variant": "line", role: "note", className: cn("flex items-start justify-center gap-1.5 py-1 text-center text-xs text-muted-foreground", className), children: [_jsx(Bot, { "aria-hidden": true, className: "mt-0.5 size-3 shrink-0" }), _jsxs("p", { className: "flex flex-wrap items-center justify-center gap-x-1.5", children: [_jsx("span", { children: sentence }), details && _jsx("span", { children: details }), learnMore] })] }));
+}
+export { AiDisclosure };

package/dist/chat/attachment-preview.js

@@ -58,7 +58,7 @@ function AttachmentChip({ attachment: a, onRemove, className, }) {
     const t = useStrings("attachmentPreview", attachmentPreviewStrings);
     const fmt = useFormat();
     const thumb = thumbnail(a);
-    return (_jsxs("span", { "data-slot": "attachment-chip", className: cn("relative inline-flex max-w-56 items-center gap-1.5 overflow-hidden rounded-md border bg-card py-1 pe-1 ps-2 text-xs", a.error && "border-destructive/50", className), children: [thumb ? _jsx("img", { src: thumb, alt: "", className: "size-4 shrink-0 rounded-xs object-cover" }) : _jsx(Paperclip, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: a.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ? a.error : a.progress !== undefined ? fmt.number(Math.round(a.progress * 100) / 100, { style: "percent" }) : formatFileSize(a.size, fmt.number, t) }), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: a.name }), onClick: () => onRemove(a.id), className: "rounded-sm p-0.5 text-faint-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { className: "size-3" }) })), a.progress !== undefined && !a.error && _jsx("span", { "aria-hidden": true, className: "absolute bottom-0 start-0 h-0.5 bg-primary transition-[width] duration-300", style: { width: `${a.progress * 100}%` } })] }));
+    return (_jsxs("span", { "data-slot": "attachment-chip", className: cn("relative inline-flex max-w-56 items-center gap-1.5 overflow-hidden rounded-md border bg-card py-1 pe-1 ps-2 text-xs", a.error && "border-destructive/50", className), children: [thumb ? _jsx("img", { src: thumb, alt: "", className: "size-4 shrink-0 rounded-xs object-cover" }) : _jsx(Paperclip, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: a.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ? a.error : a.progress !== undefined ? fmt.number(Math.round(a.progress * 100) / 100, { style: "percent" }) : formatFileSize(a.size, fmt.number, t) }), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: a.name }), onClick: () => onRemove(a.id), className: "relative after:absolute after:-inset-1 rounded-sm p-0.5 text-faint-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { className: "size-3" }) })), a.progress !== undefined && !a.error && _jsx("span", { "aria-hidden": true, className: "absolute bottom-0 start-0 h-0.5 bg-primary transition-[width] duration-300", style: { width: `${a.progress * 100}%` } })] }));
 }
 /**
  * A sent file, as a tile in a message: an image preview when the app supplied one, else an icon for its type, with

package/dist/chat/card-registry.js

@@ -32,7 +32,7 @@ class CardBoundary extends React.Component {
 }
 function Summary({ text, }) {
     const t = useStrings("cardRegistry", cardRegistryStrings);
-    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
+    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-1 inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
 }
 /**
  * Renders one card from the registry. Three honest fallbacks, each with the

package/dist/chat/citation.js

@@ -40,7 +40,9 @@ const kindOf = (kind, t) => {
 function SourceDetail({ source, }) {
     const t = useStrings("citation", citationStrings);
     const { Icon, noun } = kindOf(source.kind, t);
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (_jsx("blockquote", { className: "max-h-40 overflow-auto rounded-md bg-sunken px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (
+            // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            _jsx("blockquote", { tabIndex: 0, className: "max-h-40 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
 }
 /**
  * An inline [n]. Opens the source in a popover on click or Enter, so evidence is
@@ -54,7 +56,7 @@ function Citation({ source, marker, }) {
     }
     return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", source.provisional
                         ? "border border-dashed border-provisional/60 text-provisional hover:bg-muted"
-                        : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: source }) })] }));
+                        : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: source }) })] }));
 }
 /** The sources under a reply, as chips that open the same detail. */
 function SourceList({ sources, className, }) {
@@ -65,7 +67,7 @@ function SourceList({ sources, className, }) {
                 .sort((a, b) => a.marker - b.marker)
                 .map((s) => {
                 const { Icon } = kindOf(s.kind, t);
-                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
+                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
             })] }));
 }
 export { Citation, SourceList, SourceDetail };

package/dist/chat/composer.d.ts

@@ -32,9 +32,10 @@ export type ComposerState = "ready" | "sending" | "streaming" | {
  *
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
  * becomes Stop. A locked composer says why; an offline one says so. With
- * `onAttach`, files can also be pasted or dropped onto it.
+ * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
+ * own controls to the toolbar, such as a dictation button.
  */
-declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, className, }: {
+declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }: {
     /** The text in the box. */
     value: string;
     /** Called with the new text as the person types. */
@@ -72,6 +73,8 @@ declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onS
     placeholder?: string;
     /** The accessible name of the text box; "Message" by default. */
     label?: string;
+    /** Your own controls in the toolbar, after the attach button: a dictation button, a model picker. */
+    tools?: React.ReactNode;
     className?: string;
 }): React.JSX.Element;
 export { Composer };

package/dist/chat/composer.js

@@ -47,9 +47,10 @@ const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"
  *
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
  * becomes Stop. A locked composer says why; an offline one says so. With
- * `onAttach`, files can also be pasted or dropped onto it.
+ * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
+ * own controls to the toolbar, such as a dictation button.
  */
-function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, className, }) {
+function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }) {
     const kindOf = useEntityKinds();
     const t = useStrings("composer", composerStrings);
     const placeholder = placeholderProp ?? t("placeholder");
@@ -211,6 +212,6 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
                                             if (files.length)
                                                 onAttach(files);
                                             e.target.value = "";
-                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
+                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
 }
 export { Composer };

package/dist/chat/entity-chip.js

@@ -81,6 +81,6 @@ function EntityChip({ entity, onOpen, onRemove, className, }) {
         : t("title", { noun, name: entity.name });
     const body = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: shown }), _jsxs("span", { className: "sr-only", children: [" (", title, ")"] })] }));
     const base = "inline-flex max-w-full items-center gap-1 rounded-sm border bg-card px-1.5 py-px align-baseline font-mono text-[0.92em] leading-[1.35] text-foreground";
-    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "-ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
+    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "relative after:absolute after:-inset-1 -ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
 }
 export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/folded-turns.js

@@ -24,6 +24,6 @@ function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange,
             setOwn(next);
         onOpenChange?.(next);
     };
-    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-dashed px-3 py-2 text-sm", children: [summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary }), _jsxs(CollapsibleTrigger, { className: "ms-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent-text outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 group-data-[state=open]/folded:[transform:rotate(90deg)]" }), t(isOpen ? "hide" : "show", { count })] })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-7", children: children })] }));
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-dashed px-3 py-2 text-sm", children: [summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary }), _jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-0.5 ms-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent-text outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 group-data-[state=open]/folded:[transform:rotate(90deg)]" }), t(isOpen ? "hide" : "show", { count })] })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-7", children: children })] }));
 }
 export { FoldedTurns };

package/dist/chat/message.js

@@ -80,6 +80,6 @@ function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedB
     const streaming = message.status === "streaming";
     const settled = !streaming && message.status !== "failed";
     const meta = [message.attribution?.model, message.attribution?.cost].filter(Boolean).join(" · ");
-    return (_jsxs("div", { "data-slot": "message-footer", className: cn("flex flex-col gap-3 empty:hidden", className), children: [message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), t("interrupted"), onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "font-medium text-accent-text hover:underline", children: t("continue") }))] })), message.status === "failed" && _jsx(DegradedPanel, { reason: t("failed"), missing: t("failedMissing"), onRetry: onRetry }), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), t(reviewedBy.edited ? "editedBy" : "checkedBy", { name: reviewedBy.name }), reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), settled && actions === undefined && (_jsx(MessageActions, { text: blocksToText(message.blocks, message.sources), onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ms-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" })), settled && actions !== undefined && actions !== false && actions, settled && actions !== undefined && _jsx(MessageAttribution, { attribution: message.attribution })] }));
+    return (_jsxs("div", { "data-slot": "message-footer", className: cn("flex flex-col gap-3 empty:hidden", className), children: [message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), t("interrupted"), onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "relative after:absolute after:inset-x-0 after:-inset-y-1 font-medium text-accent-text hover:underline", children: t("continue") }))] })), message.status === "failed" && _jsx(DegradedPanel, { reason: t("failed"), missing: t("failedMissing"), onRetry: onRetry }), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), t(reviewedBy.edited ? "editedBy" : "checkedBy", { name: reviewedBy.name }), reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), settled && actions === undefined && (_jsx(MessageActions, { text: blocksToText(message.blocks, message.sources), onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ms-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" })), settled && actions !== undefined && actions !== false && actions, settled && actions !== undefined && _jsx(MessageAttribution, { attribution: message.attribution })] }));
 }
 export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };

package/dist/chat/payload.js

@@ -39,9 +39,12 @@ function Payload({ language, text, title, bare = false, highlight, className, })
     const syntax = highlight === undefined ? undefined : highlight ? "highlight" : "off";
     const code = _jsx(Code, { text: text, language: language });
     if (bare) {
-        return (_jsx("pre", { "data-slot": "payload", "data-bare": "", "data-language": language, "data-syntax": syntax, className: cn("max-h-80 overflow-auto rounded-md bg-sunken px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", className), children: code }));
+        return (
+        // It scrolls on its own, so it takes focus: keyboard users can scroll long output.
+        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        _jsx("pre", { "data-slot": "payload", "data-bare": "", "data-language": language, "data-syntax": syntax, tabIndex: 0, className: cn("max-h-80 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", className), children: code }));
     }
-    return (_jsxs("figure", { "data-slot": "payload", "data-language": language, "data-syntax": syntax, className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language, t) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " ", t("copyFailed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] }), _jsx("pre", { className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", children: code })] }));
+    return (_jsxs("figure", { "data-slot": "payload", "data-language": language, "data-syntax": syntax, className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language, t) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " ", t("copyFailed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] }), _jsx("pre", { tabIndex: 0, className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset", children: code })] }));
 }
 /** The code as token spans. Each token is a text child, so nothing in it is parsed as markup. */
 function Code({ text, language }) {