@candor-ui/react 1.1.0 → 1.5.0

package/dist/chat/permission-prompt.d.ts

@@ -0,0 +1,129 @@
+import * as React from "react";
+/** PermissionPrompt's fixed words; override them under `permissionPrompt` in LocaleProvider's `strings`. */
+export declare const permissionPromptStrings: {
+    label: string;
+    fallbackTitle: string;
+    why: string;
+    mode: string;
+    modeDefault: string;
+    modeAcceptEdits: string;
+    modePlan: string;
+    modeAuto: string;
+    modeDontAsk: string;
+    modeBypassPermissions: string;
+    blockedPath: string;
+    subagent: string;
+    server: string;
+    input: string;
+    edit: string;
+    editLabel: string;
+    editInvalid: string;
+    changed: string;
+    unchanged: string;
+    cancelEdit: string;
+    remember: string;
+    rememberHint: string;
+    ruleAllow: string;
+    ruleDeny: string;
+    ruleAsk: string;
+    ruleRemove: string;
+    setMode: string;
+    warnBypassPermissions: string;
+    warnAuto: string;
+    directories: string;
+    other: string;
+    scopeSession: string;
+    scopeLocal: string;
+    scopeProject: string;
+    scopeUser: string;
+    allow: string;
+    allowEdited: string;
+    deny: string;
+    answer: string;
+    otherOption: string;
+    otherLabel: string;
+    questions: string;
+};
+/** One "don't ask again" choice, in the plain shape PermissionPrompt shows. claudeSuggestions builds them from the SDK's. */
+export type PermissionSuggestion = {
+    /** What the rule does. */
+    action: "allow" | "deny" | "ask" | "remove" | "mode" | "directories" | "other";
+    /** What it covers, as the source writes it: `Bash(npm test:*)`, a mode's name, directories. Shown as code. */
+    what: string;
+    /** Where it's kept: "session", "local" (this project, this computer), "project" (shared), "user", or the source's own word. */
+    scope?: string;
+};
+/** A question the agent asks through the prompt: pick one or more labels, or answer in its own words. */
+export type PermissionQuestion = {
+    id: string;
+    prompt: string;
+    tag?: string;
+    options: {
+        id: string;
+        label: string;
+        detail?: string;
+    }[];
+    multiple: boolean;
+    other?: boolean;
+};
+/** A tool call waiting on a person, in the shape the adapters give (ClaudeApproval fits it). */
+export type PermissionRequest = {
+    id: string;
+    tool: string;
+    input: unknown;
+    /** The source's own sentence for the request: "Claude wants to run npm test". */
+    title?: string;
+    description?: string;
+    /** Why it reached a person (no rule allowed it, a safety check, a path outside the project). */
+    reason?: string;
+    blockedPath?: string;
+    /** Put the focus on Deny: the request grants more than it looks. */
+    defaultToNo?: boolean;
+    /** Set when a subagent asked. */
+    agentId?: string;
+    mcpServer?: {
+        name: string;
+        source: string;
+    };
+    /** The questions, when the request is the agent asking rather than a tool to allow. */
+    questions?: PermissionQuestion[];
+    /** False when the server won't accept an edited input for this call: no Edit is offered, whatever `editable` says. */
+    editable?: boolean;
+};
+export type PermissionAnswer = {
+    /** The input as edited, when the person changed it. */
+    updatedInput?: Record<string, unknown>;
+    /** The suggestions the person ticked, by index. */
+    alwaysAllow?: number[];
+    /** Answers to `questions`. */
+    answers?: {
+        questionId: string;
+        choice?: string[];
+        text?: string;
+    }[];
+};
+/**
+ * A tool call waiting for a person's go-ahead: what it will do, why it reached them, and the permission mode the
+ * run is in. They can edit the input before allowing it and see exactly what they changed; Allow then sends that
+ * input, nothing else. "Don't ask again" rules are offered as boxes nobody has ticked, and are kept only if the
+ * person ticks them. When the agent is asking questions instead, it shows them as a short form. Words from the
+ * request (its title, reason, input) are shown as text, never markup.
+ */
+declare function PermissionPrompt({ request, mode, suggestions, editable, onAllow, onDeny, busy, className, }: {
+    /** The waiting request. */
+    request: PermissionRequest;
+    /** The run's permission mode, as the SDK names it ("default", "acceptEdits", "plan", "auto"…). Left out, it isn't shown. */
+    mode?: string;
+    /** "Don't ask again" rules to offer. None is ticked. */
+    suggestions?: PermissionSuggestion[];
+    /** Let the person edit the input as JSON before allowing it. */
+    editable?: boolean;
+    /** Called with the edited input, the ticked rules or the answers. */
+    onAllow: (answer: PermissionAnswer) => void;
+    /** Called when the person denies it (or won't answer the questions). */
+    onDeny: () => void;
+    /** The answer is being sent: both buttons wait. */
+    busy?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export { PermissionPrompt };

package/dist/chat/permission-prompt.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Info, Pencil, ShieldAlert, ShieldQuestion } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+import { Payload } from "./payload.js";
+import { Button } from "../ui/button.js";
+/** PermissionPrompt's fixed words; override them under `permissionPrompt` in LocaleProvider's `strings`. */
+export const permissionPromptStrings = {
+    label: "Permission request: {title}",
+    fallbackTitle: "The agent wants to use {tool}",
+    why: "Why you’re asked",
+    mode: "Permission mode",
+    modeDefault: "Ask before acting",
+    modeAcceptEdits: "Accept file edits",
+    modePlan: "Plan only",
+    modeAuto: "Automatic, by a classifier",
+    modeDontAsk: "Don’t ask; deny what isn’t allowed",
+    modeBypassPermissions: "Allow everything",
+    blockedPath: "Path outside what’s allowed: {path}",
+    subagent: "A subagent asked.",
+    server: "From the tool server “{name}”, configured in {source}.",
+    input: "What it will run with",
+    edit: "Edit before allowing",
+    editLabel: "Input, as JSON",
+    editInvalid: "That isn’t a JSON object, so it can’t be used.",
+    changed: "You changed",
+    unchanged: "Nothing changed yet.",
+    cancelEdit: "Use the original",
+    remember: "Don’t ask again for",
+    rememberHint: "Optional. Nothing is remembered unless you tick it.",
+    ruleAllow: "Allow {what}",
+    ruleDeny: "Always deny {what}",
+    ruleAsk: "Always ask for {what}",
+    ruleRemove: "Stop applying the rule for {what}",
+    setMode: "Switch to: {mode}",
+    warnBypassPermissions: "After this, nothing is checked: the agent can run any command and change or delete any file it can reach.",
+    warnAuto: "After this, a classifier allows or blocks each action instead of you.",
+    directories: "Access to {what}",
+    other: "A permission change: {what}",
+    scopeSession: "for this session",
+    scopeLocal: "in this project, on this computer",
+    scopeProject: "in this project, for everyone on it",
+    scopeUser: "for you, in every project",
+    allow: "Allow",
+    allowEdited: "Allow as edited",
+    deny: "Deny",
+    answer: "Send answers",
+    otherOption: "Other",
+    otherLabel: "Your own answer to: {question}",
+    questions: "The agent has questions",
+};
+const modeKeys = {
+    default: "modeDefault",
+    acceptEdits: "modeAcceptEdits",
+    plan: "modePlan",
+    auto: "modeAuto",
+    dontAsk: "modeDontAsk",
+    bypassPermissions: "modeBypassPermissions",
+};
+const json = (v) => (typeof v === "string" ? v : JSON.stringify(v, null, 2));
+/** Parses edited JSON into an object, or null when it isn't one. */
+function parseObject(text) {
+    try {
+        const v = JSON.parse(text);
+        return v && typeof v === "object" && !Array.isArray(v) ? v : null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * A tool call waiting for a person's go-ahead: what it will do, why it reached them, and the permission mode the
+ * run is in. They can edit the input before allowing it and see exactly what they changed; Allow then sends that
+ * input, nothing else. "Don't ask again" rules are offered as boxes nobody has ticked, and are kept only if the
+ * person ticks them. When the agent is asking questions instead, it shows them as a short form. Words from the
+ * request (its title, reason, input) are shown as text, never markup.
+ */
+function PermissionPrompt({ request, mode, suggestions, editable = false, onAllow, onDeny, busy = false, className, }) {
+    // Keyed by the request, so an edit, a ticked rule or an answer never carries over to the next request.
+    return _jsx(PromptBody, { request, mode, suggestions, editable: editable && request.editable !== false, onAllow, onDeny, busy, className }, request.id);
+}
+function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, busy, className, }) {
+    const t = useStrings("permissionPrompt", permissionPromptStrings);
+    const id = React.useId();
+    const original = React.useMemo(() => json(request.input ?? {}), [request.input]);
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(original);
+    const [ticked, setTicked] = React.useState([]);
+    const [answers, setAnswers] = React.useState({});
+    const edited = editing ? parseObject(draft) : null;
+    const proposed = parseObject(original);
+    const changedKeys = edited && proposed ? [...new Set([...Object.keys(proposed), ...Object.keys(edited)])].filter((k) => JSON.stringify(proposed[k]) !== JSON.stringify(edited[k])) : [];
+    const invalid = editing && !edited;
+    const title = request.title ?? t("fallbackTitle", { tool: request.tool });
+    const questions = request.questions;
+    // A request that grants more than it looks opens on Deny, so a stray Enter can't allow it.
+    const denyRef = React.useRef(null);
+    React.useEffect(() => {
+        if (request.defaultToNo)
+            denyRef.current?.focus();
+    }, [request.id, request.defaultToNo]);
+    const word = (s) => {
+        const key = { allow: "ruleAllow", deny: "ruleDeny", ask: "ruleAsk", remove: "ruleRemove", mode: "setMode", directories: "directories", other: "other" }[s.action];
+        const scope = s.scope && { session: "scopeSession", local: "scopeLocal", project: "scopeProject", user: "scopeUser" }[s.scope];
+        const what = s.action === "mode" && modeKeys[s.what] ? t(modeKeys[s.what]) : s.what;
+        return { text: t(key, { what, mode: what }), scope: scope ? t(scope) : s.scope };
+    };
+    const answered = (q) => {
+        const a = answers[q.id];
+        return Boolean(a && (a.choice.length || (a.other && a.text.trim())));
+    };
+    const choose = (q, option) => setAnswers((prev) => {
+        const a = prev[q.id] ?? { choice: [], text: "", other: false };
+        const choice = q.multiple ? (a.choice.includes(option) ? a.choice.filter((c) => c !== option) : [...a.choice, option]) : [option];
+        return { ...prev, [q.id]: { ...a, choice, other: q.multiple ? a.other : false } };
+    });
+    const toggleOther = (q) => setAnswers((prev) => {
+        const a = prev[q.id] ?? { choice: [], text: "", other: false };
+        return { ...prev, [q.id]: { ...a, other: !a.other, choice: q.multiple || a.other ? a.choice : [] } };
+    });
+    const allow = () => {
+        if (busy)
+            return;
+        if (questions) {
+            if (!questions.every(answered))
+                return;
+            onAllow({ answers: questions.map((q) => ({ questionId: q.id, choice: answers[q.id]?.choice, text: answers[q.id]?.other ? answers[q.id]?.text.trim() : undefined })) });
+            return;
+        }
+        if (invalid)
+            return;
+        onAllow({ ...(edited && changedKeys.length && { updatedInput: edited }), ...(ticked.length && { alwaysAllow: ticked }) });
+    };
+    return (_jsxs("section", { "data-slot": "permission-prompt", "aria-label": t("label", { title: questions ? t("questions") : title }), className: cn("overflow-hidden rounded-xl border border-warning/50 bg-card text-sm shadow-xs", className), children: [_jsxs("header", { className: "flex items-start gap-2.5 bg-warning-weak/50 px-3.5 py-2.5", children: [_jsx(ShieldQuestion, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-warning-text" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "font-semibold leading-snug", children: questions ? t("questions") : title }), request.description && _jsx("p", { className: "mt-0.5 text-muted-foreground", children: request.description })] }), _jsx("code", { className: "shrink-0 font-mono text-2xs text-muted-foreground", children: request.tool })] }), _jsxs("dl", { className: "flex flex-col gap-1.5 px-3.5 pt-2.5 text-sm", children: [request.reason && (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: t("why") }), _jsx("dd", { className: "min-w-0", children: request.reason })] })), mode && (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: t("mode") }), _jsx("dd", { "data-slot": "permission-mode", children: modeKeys[mode] ? t(modeKeys[mode]) : _jsx("code", { className: "font-mono text-xs", children: mode }) })] }))] }), (request.blockedPath || request.agentId || request.mcpServer) && (_jsxs("ul", { className: "mt-1.5 flex flex-col gap-0.5 px-3.5 text-xs text-muted-foreground", children: [request.blockedPath && _jsx("li", { children: t("blockedPath", { path: request.blockedPath }) }), request.agentId && _jsx("li", { children: t("subagent") }), request.mcpServer && _jsx("li", { children: t("server", { name: request.mcpServer.name, source: request.mcpServer.source }) })] })), questions ? (_jsx("div", { className: "flex flex-col gap-4 px-3.5 py-3", children: questions.map((q) => {
+                    const a = answers[q.id];
+                    return (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsxs("legend", { className: "mb-1 font-medium", children: [q.tag && _jsx("span", { className: "me-1.5 rounded-xs bg-muted px-1 text-2xs font-medium text-muted-foreground", children: q.tag }), q.prompt] }), q.options.map((o) => (_jsxs("label", { className: "flex min-h-6 items-start gap-2", children: [_jsx("input", { type: q.multiple ? "checkbox" : "radio", name: `${id}-${q.id}`, checked: a?.choice.includes(o.id) ?? false, onChange: () => choose(q, o.id), className: "mt-0.5 size-4 accent-[var(--primary)]" }), _jsxs("span", { children: [o.label, o.detail && _jsx("span", { className: "block text-xs text-muted-foreground", children: o.detail })] })] }, o.id))), q.other && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex min-h-6 items-start gap-2", children: [_jsx("input", { type: q.multiple ? "checkbox" : "radio", name: `${id}-${q.id}`, checked: a?.other ?? false, onChange: () => toggleOther(q), className: "mt-0.5 size-4 accent-[var(--primary)]" }), _jsx("span", { children: t("otherOption") })] }), a?.other && (_jsx("textarea", { "aria-label": t("otherLabel", { question: q.prompt }), rows: 2, value: a.text, onChange: (e) => setAnswers((prev) => ({ ...prev, [q.id]: { ...prev[q.id], text: e.target.value } })), className: "ms-6 block resize-none rounded-md border border-input bg-card px-2.5 py-1.5 text-sm outline-none [field-sizing:content] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30" }))] }))] }, q.id));
+                }) })) : (_jsxs("div", { className: "flex flex-col gap-2 px-3.5 py-3", children: [editing ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: `${id}-edit`, className: "text-xs font-medium text-muted-foreground", children: t("editLabel") }), _jsx("textarea", { id: `${id}-edit`, value: draft, onChange: (e) => setDraft(e.target.value), spellCheck: false, rows: Math.min(12, draft.split("\n").length + 1), "aria-invalid": invalid || undefined, "aria-describedby": `${id}-changes`, className: "block w-full resize-y rounded-md border border-input bg-card px-2.5 py-1.5 font-mono text-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 aria-invalid:border-destructive" }), _jsx("div", { id: `${id}-changes`, role: "status", className: "text-xs", children: invalid ? (_jsx("p", { className: "text-destructive-text", children: t("editInvalid") })) : changedKeys.length ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-muted-foreground", children: t("changed") }), _jsx("ul", { className: "flex flex-col gap-1", children: changedKeys.map((k) => (_jsxs("li", { className: "grid gap-0.5 font-mono", children: [_jsx("span", { className: "text-muted-foreground", children: k }), k in proposed && _jsx("span", { className: "rounded-xs bg-destructive-weak/60 px-1 line-through", children: json(proposed[k]) }), k in edited && _jsx("span", { className: "rounded-xs bg-success-weak/70 px-1", children: json(edited[k]) })] }, k))) })] })) : (_jsx("p", { className: "text-muted-foreground", children: t("unchanged") })) }), _jsx(Button, { size: "sm", variant: "ghost", className: "self-start", onClick: () => (setEditing(false), setDraft(original)), children: t("cancelEdit") })] })) : (_jsxs(_Fragment, { children: [_jsx(Payload, { language: "json", title: t("input"), text: original }), editable && proposed && (_jsxs(Button, { size: "sm", variant: "outline", className: "self-start", onClick: () => setEditing(true), children: [_jsx(Pencil, { "aria-hidden": true }), " ", t("edit")] }))] })), suggestions && suggestions.length > 0 && (_jsxs("fieldset", { className: "mt-1 flex flex-col gap-1 rounded-lg border border-dashed px-3 py-2", children: [_jsx("legend", { className: "px-1 text-xs font-medium", children: t("remember") }), _jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Info, { "aria-hidden": true, className: "size-3" }), " ", t("rememberHint")] }), suggestions.map((s, i) => {
+                                const w = word(s);
+                                return (_jsxs("label", { className: "flex min-h-6 items-start gap-2", children: [_jsx("input", { type: "checkbox", checked: ticked.includes(i), onChange: (e) => setTicked((prev) => (e.target.checked ? [...prev, i] : prev.filter((x) => x !== i))), className: "mt-0.5 size-4 accent-[var(--primary)]" }), _jsxs("span", { children: [_jsx("span", { className: "font-mono text-xs", children: w.text }), w.scope && _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", w.scope] }), s.action === "mode" && (s.what === "bypassPermissions" || s.what === "auto") && (_jsxs("span", { className: "mt-0.5 flex items-start gap-1 text-xs text-warning-text", children: [_jsx(ShieldAlert, { "aria-hidden": true, className: "mt-px size-3.5 shrink-0" }), t(s.what === "auto" ? "warnAuto" : "warnBypassPermissions")] }))] })] }, i));
+                            })] }))] })), _jsxs("footer", { className: "flex flex-wrap justify-end gap-2 border-t bg-sunken px-3.5 py-2", children: [_jsx(Button, { ref: denyRef, size: "sm", variant: "outline", onClick: onDeny, disabled: busy, children: t("deny") }), _jsx(Button, { size: "sm", onClick: allow, disabled: busy || invalid || (questions ? !questions.every(answered) : false), "aria-busy": busy, children: questions ? t("answer") : edited && changedKeys.length ? t("allowEdited") : t("allow") })] })] }));
+}
+export { PermissionPrompt };

package/dist/chat/reasoning.js

@@ -35,6 +35,6 @@ function Reasoning({ entries, thinking = false, thoughtFor, className, }) {
     React.useEffect(() => setOpen(thinking), [thinking]);
     const assumed = entries.filter((e) => e.basis === "assumed").length;
     const summary = thinking ? null : (_jsxs(_Fragment, { children: [t("reasoning"), thoughtFor && _jsxs(_Fragment, { children: [" \u00B7 ", thoughtFor] }), " \u00B7 ", t("steps", { count: entries.length }), assumed > 0 && _jsxs("span", { className: "text-warning-text", children: [" \u00B7 ", t("assumedCount", { count: assumed })] })] }));
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "reasoning", className: cn("group/reasoning", className), children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1.5 rounded-md py-0.5 pe-1.5 text-xs text-muted-foreground outline-none transition-colors duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Brain, { "aria-hidden": true, className: cn("size-3.5", thinking && "text-accent-text") }), thinking ? _jsx(ShimmerLabel, { className: "text-xs", children: t("thinking") }) : summary, _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform duration-200 ease-standard group-data-[state=open]/reasoning:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("ol", { className: "mt-2 ms-1.5 flex flex-col gap-3 border-s ps-4", children: entries.map((e) => (_jsxs("li", { className: "relative animate-rise-in", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-1.5 -start-[1.2rem] size-1.5 rounded-full bg-border-strong" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: e.title }), _jsx("span", { className: cn("rounded-xs px-1 text-2xs font-medium", basisTone[e.basis]), children: t(e.basis) })] }), e.body && _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: e.body }), _jsx("p", { className: "mt-1 text-xs text-faint-foreground", children: e.basis === "verified" ? _jsxs(_Fragment, { children: [t("evidence"), " ", e.evidence] }) : _jsxs(_Fragment, { children: [t("assumption"), " ", e.assumption] }) })] }, e.id))) }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "reasoning", className: cn("group/reasoning", className), children: [_jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex items-center gap-1.5 rounded-md py-0.5 pe-1.5 text-xs text-muted-foreground outline-none transition-colors duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Brain, { "aria-hidden": true, className: cn("size-3.5", thinking && "text-accent-text") }), thinking ? _jsx(ShimmerLabel, { className: "text-xs", children: t("thinking") }) : summary, _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform duration-200 ease-standard group-data-[state=open]/reasoning:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("ol", { className: "mt-2 ms-1.5 flex flex-col gap-3 border-s ps-4", children: entries.map((e) => (_jsxs("li", { className: "relative animate-rise-in", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-1.5 -start-[1.2rem] size-1.5 rounded-full bg-border-strong" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: e.title }), _jsx("span", { className: cn("rounded-xs px-1 text-2xs font-medium", basisTone[e.basis]), children: t(e.basis) })] }), e.body && _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: e.body }), _jsx("p", { className: "mt-1 text-xs text-faint-foreground", children: e.basis === "verified" ? _jsxs(_Fragment, { children: [t("evidence"), " ", e.evidence] }) : _jsxs(_Fragment, { children: [t("assumption"), " ", e.assumption] }) })] }, e.id))) }) })] }));
 }
 export { Reasoning };

package/dist/chat/thread.d.ts

@@ -9,8 +9,12 @@ export declare const threadStrings: {
  * bottom and stops following the moment you scroll up to read, offering a
  * "Jump to latest" button instead. Pass `empty` for the first-run state and
  * the composer as `footer`.
+ *
+ * For long histories, `virtualize` renders only the messages in or near view
+ * (each child is one item, keyed by its `key`). The column stays a `log`, the
+ * message holding focus stays rendered, and Jump to latest works the same.
  */
-declare function Thread({ children, empty, footer, className, contentClassName, }: {
+declare function Thread({ children, empty, footer, className, contentClassName, virtualize, }: {
     children?: React.ReactNode;
     /** Shown before the first message. */
     empty?: React.ReactNode;
@@ -19,5 +23,7 @@ declare function Thread({ children, empty, footer, className, contentClassName,
     className?: string;
     /** Classes for the message column. */
     contentClassName?: string;
+    /** Render only the messages in or near view, for histories of hundreds of messages. Give each child a `key`. Defaults to false. */
+    virtualize?: boolean;
 }): React.JSX.Element;
 export { Thread };

package/dist/chat/thread.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowDown } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useStrings } from "../blocks/locale.js";
+import { useVirtualList } from "../lib/use-virtual-list.js";
 /** Thread's fixed words; override them under `thread` in LocaleProvider's `strings`. */
 export const threadStrings = {
     messages: "Messages",
@@ -14,8 +15,12 @@ export const threadStrings = {
  * bottom and stops following the moment you scroll up to read, offering a
  * "Jump to latest" button instead. Pass `empty` for the first-run state and
  * the composer as `footer`.
+ *
+ * For long histories, `virtualize` renders only the messages in or near view
+ * (each child is one item, keyed by its `key`). The column stays a `log`, the
+ * message holding focus stays rendered, and Jump to latest works the same.
  */
-function Thread({ children, empty, footer, className, contentClassName, }) {
+function Thread({ children, empty, footer, className, contentClassName, virtualize = false, }) {
     const t = useStrings("thread", threadStrings);
     const scroller = React.useRef(null);
     const content = React.useRef(null);
@@ -58,7 +63,23 @@ function Thread({ children, empty, footer, className, contentClassName, }) {
         lastTop.current = top;
     };
     const hasMessages = React.Children.count(children) > 0;
-    return (_jsxs("div", { "data-slot": "thread", className: cn("flex min-h-0 flex-col", className), children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scroller, onScroll: onScroll, className: "h-full overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": t("messages"), className: cn("mx-auto flex w-full max-w-(--cd-thread-width) flex-col gap-7 px-4 py-6", contentClassName), children: hasMessages ? children : empty }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
+    const items = virtualize ? React.Children.toArray(children) : [];
+    const keyOf = (i) => (React.isValidElement(items[i]) ? (items[i].key ?? i) : i);
+    // The message holding focus stays rendered, so focus isn't lost when it scrolls out of view.
+    const [focused, setFocused] = React.useState(null);
+    const list = useVirtualList({
+        enabled: virtualize,
+        count: items.length,
+        keyOf,
+        scroller,
+        pin: focused,
+        gap: () => (content.current ? Number.parseFloat(getComputedStyle(content.current).rowGap) || 0 : 0),
+    });
+    return (_jsxs("div", { "data-slot": "thread", className: cn("flex min-h-0 flex-col", className), children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scroller, onScroll: onScroll, onFocus: virtualize
+                            ? (e) => {
+                                setFocused(e.target.closest("[data-virtual-key]")?.getAttribute("data-virtual-key") ?? null);
+                            }
+                            : undefined, onBlur: virtualize ? (e) => !e.currentTarget.contains(e.relatedTarget) && setFocused(null) : undefined, className: "h-full scroll-pb-14 overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": t("messages"), className: cn("mx-auto flex w-full max-w-(--cd-thread-width) flex-col gap-7 px-4 py-6", contentClassName), children: !hasMessages ? (empty) : virtualize ? (_jsx(_Fragment, { children: list.rows.map((row) => "spacer" in row ? (_jsx("div", { "aria-hidden": true, style: { height: row.spacer } }, row.key)) : (_jsx("div", { ref: list.measure, "data-virtual-key": String(keyOf(row.index)), className: "flex flex-col", children: items[row.index] }, keyOf(row.index)))) })) : (children) }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
                             pinnedRef.current = true;
                             setPinned(true);
                             toBottom("smooth");

package/dist/chat/tool-call.d.ts

@@ -11,6 +11,11 @@ export declare const toolCallStrings: {
     done: string;
     failed: string;
     working: string;
+    approvedAutomatically: string;
+    approvedByPerson: string;
+    editedBeforeRun: string;
+    editedNote: string;
+    proposed: string;
 };
 /**
  * One tool call as a compact row: what it did in plain words, its status, and

package/dist/chat/tool-call.js

@@ -17,6 +17,11 @@ export const toolCallStrings = {
     done: "{count} done",
     failed: "{count} failed",
     working: "working",
+    approvedAutomatically: "Approved automatically",
+    approvedByPerson: "Approved by a person",
+    editedBeforeRun: "Edited before it ran",
+    editedNote: "A person changed the input before allowing it. Input is what ran.",
+    proposed: "As the agent proposed it",
 };
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
@@ -28,8 +33,8 @@ function ToolCall({ call, className, }) {
     const statusLabel = useStatusLabel();
     const failed = call.status === "failed";
     const [open, setOpen] = React.useState(failed);
-    const hasDetail = Boolean(call.input || call.output || call.error);
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-start outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(call.status)] })] }), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:[transform:rotate(90deg)]" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ms-[1.375rem] flex flex-col gap-2 border-s ps-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.input && _jsx(Payload, { language: "json", title: t("input"), text: call.input }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: t("output"), text: call.output })] }) })] }));
+    const hasDetail = Boolean(call.input || call.output || call.error || call.approval?.note || call.approval?.originalInput);
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-start outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(call.status)] })] }), call.approval?.originalInput !== undefined && (_jsx("span", { "data-slot": "tool-call-edited", className: "shrink-0 rounded-xs bg-warning-weak px-1 text-2xs text-warning-text", children: t("editedBeforeRun") })), call.approval?.by === "automatic" && (_jsx("span", { "data-slot": "tool-call-approval", className: "shrink-0 rounded-xs bg-muted px-1 text-2xs text-muted-foreground", children: t("approvedAutomatically") })), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:[transform:rotate(90deg)]" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ms-[1.375rem] flex flex-col gap-2 border-s ps-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.approval?.note && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [call.approval.by === "automatic" ? t("approvedAutomatically") : t("approvedByPerson"), ": ", call.approval.note] })), call.approval?.originalInput !== undefined && _jsx("p", { className: "text-xs text-muted-foreground", children: t("editedNote") }), call.input && _jsx(Payload, { language: "json", title: t("input"), text: call.input }), call.approval?.originalInput !== undefined && _jsx(Payload, { language: "json", title: t("proposed"), text: call.approval.originalInput }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: t("output"), text: call.output })] }) })] }));
 }
 /** A run of tool calls, with a count when it's long enough to fold. */
 function ToolCallGroup({ calls, className, }) {

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from "./lib/chat.js";
 export * from "./lib/status.js";
 export * from "./lib/use-copy.js";
 export * from "./lib/use-shortcut.js";
+export * from "./lib/use-virtual-list.js";
 export * from "./blocks/terms.js";
 export * from "./blocks/locale.js";
 export * from "./blocks/locked.js";
@@ -39,6 +40,8 @@ export * from "./ui/popover.js";
 export * from "./ui/skeleton.js";
 export * from "./lib/know.js";
 export * from "./lib/render-prop.js";
+export * from "./chat/ai-disclosure.js";
+export * from "./chat/permission-prompt.js";
 export * from "./lib/utils.js";
 export { ToolCall } from "./chat/tool-call.js";
 export type { ToolCall as ToolCallData } from "./lib/chat.js";

package/dist/index.js

@@ -2,6 +2,7 @@ export * from "./lib/chat.js";
 export * from "./lib/status.js";
 export * from "./lib/use-copy.js";
 export * from "./lib/use-shortcut.js";
+export * from "./lib/use-virtual-list.js";
 export * from "./blocks/terms.js";
 export * from "./blocks/locale.js";
 export * from "./blocks/locked.js";
@@ -39,6 +40,8 @@ export * from "./ui/popover.js";
 export * from "./ui/skeleton.js";
 export * from "./lib/know.js";
 export * from "./lib/render-prop.js";
+export * from "./chat/ai-disclosure.js";
+export * from "./chat/permission-prompt.js";
 export * from "./lib/utils.js";
 export { ToolCall } from "./chat/tool-call.js";
 export { Message } from "./chat/message.js";

package/dist/lib/chat.d.ts

@@ -108,6 +108,11 @@ export type MessageSource = {
     origin?: string;
     provisional?: boolean;
 };
+/** A source a tool's result supports, without the id and [n] an adapter assigns. */
+export type ToolSource = Omit<MessageSource, "id" | "marker"> & {
+    /** Makes two results naming the same thing one source; defaults to `kind` and `label`. */
+    key?: string;
+};
 type ReasoningBase = {
     id: string;
     title: string;
@@ -136,6 +141,16 @@ export type ToolCall = {
     duration?: string;
     /** Required when status is "failed": what went wrong, in a sentence. */
     error?: string;
+    /**
+     * Who let it run, when it needed a go-ahead: a person, or something automatic (a policy, a classifier, a rule).
+     * `note` is why, in the source's words. Left out when it needed none or the source doesn't say.
+     */
+    approval?: {
+        by: "person" | "automatic";
+        note?: string;
+        /** The input as the agent proposed it, when a person edited it before it ran; `input` is then what ran. */
+        originalInput?: string;
+    };
 };
 /** The block's language, e.g. "json", "sql", "python", "text". Shown as a label; never executed or highlighted as HTML. */
 export type PayloadLanguage = string;

package/dist/lib/use-virtual-list.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+/** What to render, in order: an item by its index, or a spacer standing in for the items between. */
+export type VirtualRow = {
+    index: number;
+} | {
+    spacer: number;
+    key: string;
+};
+export type VirtualList = {
+    /** The items to render and the spacers between them, in order. */
+    rows: VirtualRow[];
+    /** The ref for every rendered item, which also carries `data-virtual-key={key}`, so its real height is measured and kept. */
+    measure: (el: HTMLElement | null) => void | (() => void);
+};
+/**
+ * Render only the items of a long list that are in or near view, for Thread's and SessionList's `virtualize`.
+ * Items keep their measured heights by key, so a list that grows or reorders keeps its place; unmeasured items count
+ * as `estimate`. Spacers stand in for the rest. `pin` (an item's key) keeps that item rendered (the one holding
+ * focus), on its own if it's far from view, so focus is never lost to an item scrolling away. Until the scroller is
+ * measured (on the server, on the first render in the browser, and while it's hidden) the first or last `initial`
+ * items render, by `anchor`, so server and browser agree.
+ *
+ * Give each rendered item `ref={list.measure}` and `data-virtual-key={key}`.
+ */
+export declare function useVirtualList({ enabled, count, keyOf, scroller, estimate, overscan, initial, anchor, gap, pin, }: {
+    enabled: boolean;
+    count: number;
+    keyOf: (index: number) => React.Key;
+    scroller: React.RefObject<HTMLElement | null>;
+    estimate?: number;
+    overscan?: number;
+    initial?: number;
+    /** Which end to show before the scroller is measured: "end" for a thread (newest last), "start" for a list. Defaults to "end". */
+    anchor?: "start" | "end";
+    /** The gap between items, in pixels, read once the scroller is measured (e.g. from the list's computed `row-gap`). */
+    gap?: () => number;
+    /** The key of an item to keep rendered, such as the one holding focus. */
+    pin?: string | null;
+}): VirtualList;