@candor-ui/react 1.7.0 → 1.9.0

package/dist/chat/message-actions.js

@@ -20,12 +20,14 @@ function ActionButton({ label, onClick, pressed, children, }) {
 }
 /**
  * Copy, retry and rate under an agent's reply. Each action appears only when
- * its handler is given. Copy reports what the clipboard did. A rating is the
- * caller's state, so it shows only what the service recorded.
+ * its handler is given. Copy reports what the clipboard did: the icon stays a
+ * copy icon until the write settles, then becomes a tick (or a cross when the
+ * clipboard refused). A rating is the caller's state, so it shows only what
+ * the service recorded.
  */
 function MessageActions({ text, onRetry, rating, onRate, meta, className, }) {
     const { state, copy } = useCopy();
     const t = useStrings("messageActions", messageActionsStrings);
-    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? t("copied") : state === "failed" ? t("copyFailed") : t("copy"), onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: t("retry"), onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: t("good"), pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: t("bad"), pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ms-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
+    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? t("copied") : state === "failed" ? t("copyFailed") : t("copy"), onClick: () => copy(text), children: state === "copied" ? (_jsx(Check, { "data-copy": "copied", className: "text-success-text animate-pop-in" })) : state === "failed" ? (_jsx(X, { "data-copy": "failed", className: "text-destructive-text animate-pop-in" })) : (_jsx(Copy, { "data-copy": state })) })), onRetry && (_jsx(ActionButton, { label: t("retry"), onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: t("good"), pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: t("bad"), pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ms-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
 }
 export { MessageActions };

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

@@ -108,6 +108,11 @@ export type PermissionAnswer = {
  * 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.
+ *
+ * It sits in the thread, with no backdrop and nothing that dismisses it: the only ways out are Allow and Deny, and
+ * nothing else is ever counted as a denial. While the decision waits, its shield pulses slowly; a press on inert
+ * space outside it (the gesture that would dismiss a dialog) nudges it instead, so the person sees it is still
+ * waiting. Both stop once the answer is being sent.
  */
 declare function PermissionPrompt({ request, mode, suggestions, editable, onAllow, onDeny, busy, className, }: {
     /** The waiting request. */
@@ -122,7 +127,7 @@ declare function PermissionPrompt({ request, mode, suggestions, editable, onAllo
     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. */
+    /** The answer is being sent: both buttons wait, and the waiting pulse stops. */
     busy?: boolean | undefined;
     className?: string | undefined;
 }): React.JSX.Element;

package/dist/chat/permission-prompt.js

@@ -60,6 +60,8 @@ const modeKeys = {
     bypassPermissions: "modeBypassPermissions",
 };
 const json = (v) => (typeof v === "string" ? v : JSON.stringify(v, null, 2));
+/** What a press lands on when the person is doing something else, rather than clicking around the prompt. */
+const INTERACTIVE = 'a[href], button, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], [role="textbox"], [role="slider"], [tabindex]:not([tabindex="-1"])';
 /** Parses edited JSON into an object, or null when it isn't one. */
 function parseObject(text) {
     try {
@@ -76,6 +78,11 @@ function parseObject(text) {
  * 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.
+ *
+ * It sits in the thread, with no backdrop and nothing that dismisses it: the only ways out are Allow and Deny, and
+ * nothing else is ever counted as a denial. While the decision waits, its shield pulses slowly; a press on inert
+ * space outside it (the gesture that would dismiss a dialog) nudges it instead, so the person sees it is still
+ * waiting. Both stop once the answer is being sent.
  */
 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.
@@ -101,6 +108,29 @@ function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, bus
         if (request.defaultToNo)
             denyRef.current?.focus();
     }, [request.id, request.defaultToNo]);
+    // A press on inert space outside the prompt, while it waits, nudges it rather than dismissing anything.
+    const section = React.useRef(null);
+    const [nudged, setNudged] = React.useState(false);
+    React.useEffect(() => {
+        if (busy)
+            return;
+        const onPress = (e) => {
+            const target = e.target;
+            if (!target || section.current?.contains(target))
+                return;
+            if (target.closest(INTERACTIVE))
+                return;
+            setNudged(true);
+        };
+        document.addEventListener("pointerdown", onPress);
+        return () => document.removeEventListener("pointerdown", onPress);
+    }, [busy]);
+    React.useEffect(() => {
+        if (!nudged)
+            return;
+        const timer = window.setTimeout(() => setNudged(false), 1000);
+        return () => window.clearTimeout(timer);
+    }, [nudged]);
     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];
@@ -133,7 +163,7 @@ function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, bus
             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) => {
+    return (_jsxs("section", { ref: section, "data-slot": "permission-prompt", "data-waiting": busy ? undefined : "", "data-nudged": nudged ? "" : undefined, "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 [--cd-attention-color:var(--warning)]", nudged && "animate-nudge", className), children: [_jsxs("header", { className: "flex items-start gap-2.5 bg-warning-weak/50 px-3.5 py-2.5", children: [_jsx("span", { "aria-hidden": true, className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full text-warning-text", !busy && "animate-attention-wait"), children: _jsx(ShieldQuestion, { className: "size-4" }) }), _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) => {

package/dist/chat/thread.d.ts

@@ -17,6 +17,10 @@ export declare const threadStrings: {
  * It opens at the bottom, or at `anchor` (the `id` of something in it, such as
  * a chapter divider or the card that needs the reader), and then waits for the
  * reader instead of following.
+ *
+ * While the reader is scrolled up, "Jump to latest" pulses once each time a
+ * new message arrives, then stays still; the jump itself scrolls smoothly
+ * unless the OS asks for reduced motion or data-motion is "none".
  */
 declare function Thread({ children, empty, footer, className, contentClassName, virtualize, anchor, scrollerRef, onDrop, fade, }: {
     children?: React.ReactNode | undefined;

package/dist/chat/thread.js

@@ -23,6 +23,10 @@ export const threadStrings = {
  * It opens at the bottom, or at `anchor` (the `id` of something in it, such as
  * a chapter divider or the card that needs the reader), and then waits for the
  * reader instead of following.
+ *
+ * While the reader is scrolled up, "Jump to latest" pulses once each time a
+ * new message arrives, then stays still; the jump itself scrolls smoothly
+ * unless the OS asks for reduced motion or data-motion is "none".
  */
 function Thread({ children, empty, footer, className, contentClassName, virtualize = false, anchor, scrollerRef, onDrop, fade = true, }) {
     const t = useStrings("thread", threadStrings);
@@ -35,9 +39,28 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
     React.useImperativeHandle(scrollerRef, () => scroller.current, []);
     const toBottom = React.useCallback((behavior = "auto") => {
         const el = scroller.current;
-        if (el)
-            el.scrollTo({ top: el.scrollHeight, behavior });
+        if (!el)
+            return;
+        // A smooth jump only when nothing asks for stillness: the OS setting, or data-motion="none" around the thread.
+        const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || el.closest('[data-motion="none"]') !== null;
+        el.scrollTo({ top: el.scrollHeight, behavior: still ? "auto" : behavior });
     }, []);
+    // New messages that arrive while the reader is scrolled up: the Jump to latest control pulses once for each.
+    const count = React.Children.count(children);
+    const lastCount = React.useRef(count);
+    const [arrived, setArrived] = React.useState(false);
+    React.useEffect(() => {
+        const grew = count > lastCount.current;
+        lastCount.current = count;
+        if (grew && !pinnedRef.current)
+            setArrived(true);
+    }, [count]);
+    React.useEffect(() => {
+        if (!arrived)
+            return;
+        const timer = window.setTimeout(() => setArrived(false), 1000);
+        return () => window.clearTimeout(timer);
+    }, [arrived]);
     // Open at the anchor once, when it first appears.
     const anchored = React.useRef(false);
     React.useLayoutEffect(() => {
@@ -102,10 +125,12 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
                             ? (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");
-                        }, className: "absolute bottom-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: [_jsx(ArrowDown, { "aria-hidden": true, className: "size-3" }), " ", t("jumpToLatest")] })), fade && _jsx("div", { "aria-hidden": true, "data-slot": "thread-fade", className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-(--cd-thread-width) px-4 pb-4", children: footer })] }));
+                            : 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 && (
+                    // The entrance is the wrapper's, so the pulse on the button never replays it.
+                    _jsx("span", { className: "absolute bottom-3 left-1/2 z-10 -translate-x-1/2 animate-in fade-in-0 slide-in-from-bottom-1", children: _jsxs("button", { type: "button", "data-slot": "thread-jump", "data-arrived": arrived ? "" : undefined, onClick: () => {
+                                pinnedRef.current = true;
+                                setPinned(true);
+                                toBottom("smooth");
+                            }, className: cn("inline-flex items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float [--cd-attention-color:var(--primary)]", arrived && "animate-attention"), children: [_jsx(ArrowDown, { "aria-hidden": true, className: "size-3" }), " ", t("jumpToLatest")] }) })), fade && _jsx("div", { "aria-hidden": true, "data-slot": "thread-fade", className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-(--cd-thread-width) px-4 pb-4", children: footer })] }));
 }
 export { Thread };

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

@@ -20,7 +20,8 @@ export declare const toolCallStrings: {
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by
- * default and leads with its error.
+ * default and leads with its error. A call that finishes while on screen draws
+ * its tick or cross; one that arrives finished is drawn still.
  */
 declare function ToolCall({ call, className, }: {
     /** The call: tool name, plain-words title, status, input, output, duration or error. */

package/dist/chat/tool-call.js

@@ -26,7 +26,8 @@ export const toolCallStrings = {
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by
- * default and leads with its error.
+ * default and leads with its error. A call that finishes while on screen draws
+ * its tick or cross; one that arrives finished is drawn still.
  */
 function ToolCall({ call, className, }) {
     const t = useStrings("toolCall", toolCallStrings);
@@ -34,7 +35,7 @@ function ToolCall({ call, className, }) {
     const failed = call.status === "failed";
     const [open, setOpen] = React.useState(failed);
     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/80", 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 })] }) })] }));
+    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/80", 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, { 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

@@ -42,6 +42,7 @@ 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/mcp-input.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

@@ -42,6 +42,7 @@ 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/mcp-input.js";
 export * from "./lib/utils.js";
 export { ToolCall } from "./chat/tool-call.js";
 export { Message } from "./chat/message.js";

package/dist/lib/mcp-input.d.ts

@@ -0,0 +1,316 @@
+/**
+ * MCP's "input required" results (spec 2026-07-28, multi round-trip requests) as Candor data: a server's form becomes
+ * questions for ClarifyingQuestions, a plain confirmation or a link to open becomes a two-answer Decision for
+ * ApprovalDecision, and the person's answers become the `inputResponses` the client sends when it retries the call.
+ * Requests it can't show (sampling, roots, anything newer) stay listed as not supported, never dropped.
+ *
+ * Pure functions on plain data, so they run in the browser or on the server, with any MCP client.
+ *
+ * Checked against https://modelcontextprotocol.io/specification/2026-07-28 (basic/patterns/mrtr, client/elicitation
+ * and the schema): `resultType: "input_required"`, `inputRequests` as a map keyed by the server's ids, `requestState`
+ * echoed back unchanged, and the retry's `inputResponses` keyed the same way. Elicitation results are
+ * `{ action: "accept" | "decline" | "cancel", content? }`.
+ */
+/** A form field's schema, as MCP restricts it: a string, number, boolean or enum. Unknown keys pass through. */
+export type McpFieldSchema = {
+    /** "string", "number", "integer", "boolean" or "array" (a multi-select enum). */
+    type?: string | undefined;
+    /** A short name for the field. */
+    title?: string | undefined;
+    /** What the field is for, in a sentence. */
+    description?: string | undefined;
+    /** The server's default. Shown as the server's suggestion; Candor never fills it in for the person. */
+    default?: string | number | boolean | string[] | undefined;
+    /** A single-select enum without titles. */
+    enum?: string[] | undefined;
+    /** Display names for `enum`, in the same order (the legacy form, still sent by older servers). */
+    enumNames?: string[] | undefined;
+    /** A single-select enum with titles. */
+    oneOf?: {
+        const: string;
+        title?: string | undefined;
+    }[] | undefined;
+    /** A multi-select enum's items: `enum` without titles or `anyOf` with them. */
+    items?: {
+        type?: string | undefined;
+        enum?: string[] | undefined;
+        anyOf?: {
+            const: string;
+            title?: string | undefined;
+        }[] | undefined;
+    } | undefined;
+    /** At least this many choices, for a multi-select. */
+    minItems?: number | undefined;
+    /** At most this many choices, for a multi-select. */
+    maxItems?: number | undefined;
+    /** At least this many characters. */
+    minLength?: number | undefined;
+    /** At most this many characters. */
+    maxLength?: number | undefined;
+    /** "email", "uri", "date" or "date-time". */
+    format?: string | undefined;
+    /** The smallest number allowed. */
+    minimum?: number | undefined;
+    /** The largest number allowed. */
+    maximum?: number | undefined;
+};
+/** An `elicitation/create` request in form mode: a message and a flat schema of primitive fields. */
+export type McpElicitFormRequest = {
+    method: "elicitation/create";
+    params: {
+        /** "form", or left out (which means form). */
+        mode?: "form" | undefined;
+        /** Why the server asks, in its own words. */
+        message: string;
+        requestedSchema: {
+            type: "object";
+            properties: Record<string, McpFieldSchema>;
+            required?: string[] | undefined;
+        };
+    };
+};
+/** An `elicitation/create` request in URL mode: a page the person opens outside the client (sign-in, payment). */
+export type McpElicitUrlRequest = {
+    method: "elicitation/create";
+    params: {
+        mode: "url";
+        /** Why the server asks, in its own words. */
+        message: string;
+        /** The page to open, only once the person agrees. */
+        url: string;
+    };
+};
+/**
+ * A result that asks for more input before the call can finish. At least one of `inputRequests` and `requestState`
+ * is present. Values in `inputRequests` are left `unknown`: a server may send kinds this file doesn't know.
+ */
+export type McpInputRequiredResult = {
+    resultType: "input_required";
+    /** The server's requests, keyed by its own ids. */
+    inputRequests?: Record<string, unknown> | undefined;
+    /** Opaque to the client: sent back exactly as received, never read or changed. */
+    requestState?: string | undefined;
+    _meta?: Record<string, unknown> | undefined;
+};
+/** The answer to one elicitation, as MCP takes it back. `content` only when accepted in form mode. */
+export type McpElicitResult = {
+    action: "accept" | "decline" | "cancel";
+    content?: Record<string, string | number | boolean | string[]> | undefined;
+};
+/**
+ * A question in ClarifyingQuestions' shape (`ClarifyingQuestion`), defined here so this free file needs nothing from
+ * a paid one. The question's id is the form field's name.
+ */
+export type McpQuestion = {
+    id: string;
+    kind: "choice";
+    prompt: string;
+    options: {
+        id: string;
+        label: string;
+        detail?: string | undefined;
+    }[];
+    multiple?: boolean | undefined;
+    /** The server's default, marked as a suggestion and never pre-selected. */
+    recommended?: string | undefined;
+    /** A short label shown above the question: the field's title when it also has a description. */
+    tag?: string | undefined;
+    /** Always false: an MCP enum takes only its own values. */
+    other?: boolean | undefined;
+} | {
+    id: string;
+    kind: "text";
+    prompt: string;
+    /** A hint for the expected format, or the server's default, never filled in. */
+    placeholder?: string | undefined;
+    /** The field isn't required: left empty, it isn't sent. */
+    optional?: boolean | undefined;
+    /** A short label shown above the question. */
+    tag?: string | undefined;
+};
+/** A person's answer, in ClarifyingQuestions' shape (`ClarifyingAnswer`). */
+export type McpQuestionAnswer = {
+    questionId: string;
+    choice?: string[] | undefined;
+    text?: string | undefined;
+};
+/**
+ * A two-answer confirmation in ApprovalDecision's shape (`Decision`), defined here so this free file needs nothing
+ * from a paid one. The choices' ids are "accept" and "decline", which is what the retry sends.
+ */
+export type McpDecision = {
+    id: string;
+    question: string;
+    /** What to decide on, as label and value: the page's host and its full address. */
+    facts?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    /** Accept first, decline second. */
+    choices: {
+        id: "accept" | "decline";
+        label: string;
+        detail?: string | undefined;
+    }[];
+    state: "open";
+};
+/** One of the server's requests, as Candor shows it. `key` is the server's id for it. */
+export type McpInputItem = 
+/**
+ * A form: answer it with ClarifyingQuestions. `fields` and `required` are the server's schema, which
+ * `mcpInputResponses` checks the answers against.
+ */
+{
+    key: string;
+    kind: "questions";
+    message: string;
+    questions: McpQuestion[];
+    fields: Record<string, McpFieldSchema>;
+    required: string[];
+}
+/** A form with no fields: the server asks to go ahead. Answer it with ApprovalDecision. */
+ | {
+    key: string;
+    kind: "confirm";
+    message: string;
+    decision: McpDecision;
+}
+/**
+ * A page to open outside the client. Show the full `url` and its `host` before the person agrees, and open it only
+ * once they accept (`decision`). `warnings` say why the address deserves a second look.
+ */
+ | {
+    key: string;
+    kind: "url";
+    message: string;
+    url: string;
+    host: string;
+    warnings: string[];
+    decision: McpDecision;
+}
+/** A request Candor can't show: its method (when it has one) and why. Show it; don't drop it. */
+ | {
+    key: string;
+    kind: "unsupported";
+    method?: string | undefined;
+    reason: string;
+    request: unknown;
+};
+/** An input-required result, ready to show. */
+export type McpInputView = {
+    /** One per request, in the server's order. */
+    items: McpInputItem[];
+    /** Sent back exactly as received; absent when the server sent none. */
+    requestState?: string | undefined;
+    /** The server's name as your app knows it (passed in), so the person can tell which server asks. */
+    server?: string | undefined;
+    /** The name the server gives itself in the result's `_meta`. Its own claim: show it as such, if at all. */
+    serverClaims?: string | undefined;
+};
+/** A person's reply to one item, by its key. */
+export type McpInputReply = 
+/** A form, answered: the answers from ClarifyingQuestions. */
+{
+    key: string;
+    action: "accept";
+    answers?: McpQuestionAnswer[] | undefined;
+}
+/** Declined outright, or dismissed without a choice. */
+ | {
+    key: string;
+    action: "decline" | "cancel";
+};
+/** Why an answer can't be sent yet. */
+export type McpInputProblem = {
+    /** The item's key. */
+    key: string;
+    /** The field, for a form. */
+    questionId?: string | undefined;
+    /** Which rule it broke. */
+    code: "unanswered" | "required" | "notAnOption" | "notANumber" | "notAnInteger" | "tooSmall" | "tooLarge" | "tooShort" | "tooLong" | "format" | "tooFew" | "tooMany";
+    /** The same in words, from `mcpInputWords`. */
+    message: string;
+};
+/** What a retry sends, or why it can't be sent yet. */
+export type McpInputResponses = {
+    ok: true;
+    /** The retry's `inputResponses`, keyed by the server's ids. */
+    inputResponses: Record<string, unknown>;
+    /** Keys of requests nothing was sent for (not supported and not answered by your app). The server may ask again. */
+    notSent: string[];
+} | {
+    ok: false;
+    problems: McpInputProblem[];
+};
+/** The words this file writes into questions, decisions and problems. Pass your own to `mcpInputView` or `mcpInputResponses`. */
+export declare const mcpInputWords: {
+    yes: string;
+    no: string;
+    /** The extra option on a choice the server doesn't require. */
+    skip: string;
+    defaultHint: string;
+    formatEmail: string;
+    formatUri: string;
+    formatDate: string;
+    formatDateTime: string;
+    confirm: string;
+    openPage: string;
+    decline: string;
+    host: string;
+    address: string;
+    punycode: string;
+    notHttps: string;
+    badUrl: string;
+    unsupportedSampling: string;
+    unsupportedRoots: string;
+    unsupportedMethod: string;
+    unsupportedShape: string;
+    unsupportedField: string;
+    unanswered: string;
+    required: string;
+    notAnOption: string;
+    notANumber: string;
+    notAnInteger: string;
+    tooSmall: string;
+    tooLarge: string;
+    tooShort: string;
+    tooLong: string;
+    format: string;
+    tooFew: string;
+    tooMany: string;
+};
+/** The words, with any you pass in place of the defaults. */
+export type McpInputWords = Partial<typeof mcpInputWords>;
+/**
+ * Whether a tools/call (or prompts/get, resources/read) result asks for more input. A result without `resultType`
+ * comes from an older server and counts as complete, as the spec says.
+ */
+export declare function isMcpInputRequired(result: unknown): result is McpInputRequiredResult;
+/**
+ * An input-required result as items to show: forms as questions, confirmations and links as decisions, and anything
+ * else as a visible "not supported". Undefined when the result doesn't ask for input. `server` is your app's own name
+ * for the server, which the person should see beside every request.
+ */
+export declare function mcpInputView(result: unknown, options?: {
+    server?: string | undefined;
+    words?: McpInputWords | undefined;
+}): McpInputView | undefined;
+/**
+ * The retry's `inputResponses` for the person's replies, checked against each form's schema first (the spec asks
+ * clients to validate). Every form, confirmation and link needs a reply; a form is sent only once every required
+ * field has a valid answer. `own` holds responses your app made itself, for requests Candor doesn't show (a sampling
+ * or roots answer), keyed by the server's ids; anything left is listed in `notSent`.
+ */
+export declare function mcpInputResponses(view: McpInputView, replies: McpInputReply[], options?: {
+    own?: Record<string, unknown> | undefined;
+    words?: McpInputWords | undefined;
+}): McpInputResponses;
+/**
+ * The params for retrying the original request: its own params (name and arguments for tools/call) with
+ * `inputResponses` and the result's `requestState` exactly as received. A `requestState` from an earlier round is
+ * removed when this result has none, as the spec requires. Send it as a new request with a new JSON-RPC id.
+ */
+export declare function mcpRetryParams<P extends Record<string, unknown>>(original: P, view: Pick<McpInputView, "requestState">, inputResponses: Record<string, unknown>): Omit<P, "inputResponses" | "requestState"> & {
+    inputResponses: Record<string, unknown>;
+    requestState?: string | undefined;
+};