@candor-ui/react 1.5.0 → 1.8.0

package/dist/chat/reasoning.d.ts

@@ -25,9 +25,9 @@ declare function Reasoning({ entries, thinking, thoughtFor, className, }: {
     /** The steps, each verified (with evidence), believed or assumed. */
     entries: ReasoningEntry[];
     /** The agent is still thinking; opens the panel and shows progress. */
-    thinking?: boolean;
+    thinking?: boolean | undefined;
     /** How long it thought, once known, e.g. "6s". */
-    thoughtFor?: string;
-    className?: string;
+    thoughtFor?: string | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Reasoning };

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: "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))) }) })] }));
+    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/80", 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-divider.d.ts

@@ -10,9 +10,9 @@ export declare const threadDividerStrings: {
  */
 declare function ThreadDivider({ date, label, className, }: {
     /** A day to mark, shown as Today, Yesterday or the date in the locale. With neither this nor `label`, a plain rule. */
-    date?: Date | string;
+    date?: Date | string | undefined;
     /** A chapter or any other label; wins over `date`. */
-    label?: string;
-    className?: string;
+    label?: string | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { ThreadDivider };

package/dist/chat/thread-event.d.ts

@@ -1,19 +1,24 @@
 import * as React from "react";
 import { type LucideIcon } from "lucide-react";
+import type { DateStyle } from "../blocks/locale.js";
 /**
  * A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched
  * to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and
  * system lines look the same. Text here is the app's own, never model output.
  */
-declare function ThreadEvent({ icon: Icon, tone, at, children, className, ...props }: {
+declare function ThreadEvent({ icon: Icon, tone, at, timeFormat, align, children, className, ...props }: {
     /** The glyph before the text; `null` for none. Default: an info mark. */
-    icon?: LucideIcon | null;
+    icon?: LucideIcon | null | undefined;
     /** "quiet" (the default) or "attention", for an event a reader shouldn't miss. */
-    tone?: "quiet" | "attention";
+    tone?: "quiet" | "attention" | undefined;
     /** When it happened, shown after the text as a relative time. */
-    at?: string;
+    at?: string | undefined;
+    /** "relative" (the default) or an absolute "time", "date" or "datetime" in the locale. */
+    timeFormat?: "relative" | DateStyle | undefined;
+    /** "center" (the default), or "start": a left-aligned line (right-aligned in RTL) with the time at its end. */
+    align?: "center" | "start" | undefined;
     /** What happened, in a short line. */
     children: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
 } & Omit<React.ComponentProps<"div">, "children">): React.JSX.Element;
 export { ThreadEvent };

package/dist/chat/thread-event.js

@@ -9,7 +9,8 @@ import { RelativeTime } from "../blocks/relative-time.js";
  * to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and
  * system lines look the same. Text here is the app's own, never model output.
  */
-function ThreadEvent({ icon: Icon = Info, tone = "quiet", at, children, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "thread-event", "data-tone": tone, className: cn("flex items-center justify-center gap-1.5 py-1 text-center text-xs", tone === "attention" ? "text-attention-text" : "text-faint-foreground", className), ...props, children: [Icon && _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), children, at && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx(RelativeTime, { date: at })] }))] }));
+function ThreadEvent({ icon: Icon = Info, tone = "quiet", at, timeFormat, align = "center", children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "thread-event", "data-tone": tone, "data-align": align, className: cn("flex items-center gap-1.5 py-1 text-xs", align === "start" ? "justify-start text-start" : "justify-center text-center", tone === "attention" ? "text-attention-text" : "text-faint-foreground", className), ...props, children: [Icon && _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), children, at &&
+                (align === "start" ? (_jsx(RelativeTime, { date: at, format: timeFormat, className: "ms-auto shrink-0 tabular-nums" })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx(RelativeTime, { date: at, format: timeFormat })] })))] }));
 }
 export { ThreadEvent };

package/dist/chat/thread.d.ts

@@ -13,17 +13,33 @@ export declare const threadStrings: {
  * 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.
+ *
+ * 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.
  */
-declare function Thread({ children, empty, footer, className, contentClassName, virtualize, }: {
-    children?: React.ReactNode;
+declare function Thread({ children, empty, footer, className, contentClassName, virtualize, anchor, scrollerRef, onDrop, fade, }: {
+    children?: React.ReactNode | undefined;
     /** Shown before the first message. */
-    empty?: React.ReactNode;
+    empty?: React.ReactNode | undefined;
     /** Below the messages, usually the composer. */
-    footer?: React.ReactNode;
-    className?: string;
+    footer?: React.ReactNode | undefined;
+    className?: string | undefined;
     /** Classes for the message column. */
-    contentClassName?: string;
+    contentClassName?: string | undefined;
     /** Render only the messages in or near view, for histories of hundreds of messages. Give each child a `key`. Defaults to false. */
-    virtualize?: boolean;
+    virtualize?: boolean | undefined;
+    /**
+     * The `id` of an element in the thread to open at, instead of the bottom: a chapter divider, or the card that needs
+     * the reader. Read once, when the messages first appear; if it isn't among them, the thread opens at the bottom.
+     * Ignored with `virtualize`, where it may not be rendered yet.
+     */
+    anchor?: string | undefined;
+    /** The scrolling element, for your own scroll handling. */
+    scrollerRef?: React.Ref<HTMLDivElement> | undefined;
+    /** Files or other data dropped on the thread. Dragging over it is allowed only when this is given. */
+    onDrop?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    /** The soft fade at the bottom of the column. Defaults to true. */
+    fade?: boolean | undefined;
 }): React.JSX.Element;
 export { Thread };

package/dist/chat/thread.js

@@ -19,18 +19,41 @@ export const threadStrings = {
  * 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.
+ *
+ * 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.
  */
-function Thread({ children, empty, footer, className, contentClassName, virtualize = false, }) {
+function Thread({ children, empty, footer, className, contentClassName, virtualize = false, anchor, scrollerRef, onDrop, fade = true, }) {
     const t = useStrings("thread", threadStrings);
     const scroller = React.useRef(null);
     const content = React.useRef(null);
-    const pinnedRef = React.useRef(true);
-    const [pinned, setPinned] = React.useState(true);
+    // Opening at an anchor means not following the bottom until the reader gets there.
+    const anchoring = Boolean(anchor) && !virtualize;
+    const pinnedRef = React.useRef(!anchoring);
+    const [pinned, setPinned] = React.useState(!anchoring);
+    React.useImperativeHandle(scrollerRef, () => scroller.current, []);
     const toBottom = React.useCallback((behavior = "auto") => {
         const el = scroller.current;
         if (el)
             el.scrollTo({ top: el.scrollHeight, behavior });
     }, []);
+    // Open at the anchor once, when it first appears.
+    const anchored = React.useRef(false);
+    React.useLayoutEffect(() => {
+        if (!anchoring || anchored.current || !content.current?.childElementCount)
+            return;
+        anchored.current = true;
+        const target = content.current.querySelector(`#${CSS.escape(anchor)}`);
+        if (target) {
+            target.scrollIntoView?.({ block: "start" });
+            return;
+        }
+        // The anchor isn't in the thread: open at the bottom and follow, as without one.
+        pinnedRef.current = true;
+        setPinned(true);
+        toBottom();
+    });
     React.useEffect(() => {
         const el = content.current;
         if (!el)
@@ -75,7 +98,7 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
         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
+    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, onDragOver: onDrop ? (e) => e.preventDefault() : undefined, onDrop: onDrop, onFocus: virtualize
                             ? (e) => {
                                 setFocused(e.target.closest("[data-virtual-key]")?.getAttribute("data-virtual-key") ?? null);
                             }
@@ -83,6 +106,6 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
                             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")] })), _jsx("div", { "aria-hidden": true, 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 })] }));
+                        }, 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 })] }));
 }
 export { Thread };

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

@@ -25,12 +25,12 @@ export declare const toolCallStrings: {
 declare function ToolCall({ call, className, }: {
     /** The call: tool name, plain-words title, status, input, output, duration or error. */
     call: ToolCallData;
-    className?: string;
+    className?: string | undefined;
 }): React.JSX.Element;
 /** A run of tool calls, with a count when it's long enough to fold. */
 declare function ToolCallGroup({ calls, className, }: {
     /** Several calls, summarised as a group. */
     calls: ToolCallData[];
-    className?: string;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { ToolCall, ToolCallGroup };

package/dist/chat/tool-call.js

@@ -34,7 +34,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/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 })] }) })] }));
+    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 })] }) })] }));
 }
 /** A run of tool calls, with a count when it's long enough to fold. */
 function ToolCallGroup({ calls, className, }) {
@@ -46,6 +46,6 @@ function ToolCallGroup({ calls, className, }) {
     if (calls.length <= 2) {
         return (_jsx("div", { "data-slot": "tool-call-group", className: cn("flex flex-col", className), children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }));
     }
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call-group", className: cn("group/tools rounded-lg border bg-card", className), children: [_jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 px-3 py-2 text-start text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-lg", children: [_jsx(Wrench, { "aria-hidden": true, className: "size-3.5" }), _jsxs("span", { className: "flex-1", children: [t("calls", { count: calls.length }), done > 0 && ` · ${t("done", { count: done })}`, failed > 0 && _jsxs("span", { className: "text-destructive-text", children: [" \u00B7 ", t("failed", { count: failed })] }), running && ` · ${t("working")}`] }), _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 ease-standard group-data-[state=open]/tools:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col border-t px-1.5 py-1.5", children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call-group", className: cn("group/tools rounded-lg border bg-card", className), children: [_jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 px-3 py-2 text-start text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80 rounded-lg", children: [_jsx(Wrench, { "aria-hidden": true, className: "size-3.5" }), _jsxs("span", { className: "flex-1", children: [t("calls", { count: calls.length }), done > 0 && ` · ${t("done", { count: done })}`, failed > 0 && _jsxs("span", { className: "text-destructive-text", children: [" \u00B7 ", t("failed", { count: failed })] }), running && ` · ${t("working")}`] }), _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 ease-standard group-data-[state=open]/tools:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col border-t px-1.5 py-1.5", children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }) })] }));
 }
 export { ToolCall, ToolCallGroup };

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/chat.d.ts

@@ -17,11 +17,11 @@ export type AgentIdentity = {
     /** The displayed name, e.g. "Architect agent". Never derived from model output. */
     name: string;
     role: AgentRole;
-    specialty?: string;
+    specialty?: string | undefined;
 };
 export type MessageAuthor = {
     role: "user";
-    name?: string;
+    name?: string | undefined;
 } | {
     role: "agent";
     agent: AgentIdentity;
@@ -30,7 +30,7 @@ export type MessageAuthor = {
  | {
     role: "person";
     name: string;
-    team?: string;
+    team?: string | undefined;
 }
 /** System lines are the app's own strings, never model text. */
  | {
@@ -47,9 +47,9 @@ export type EntityRef = {
     /** The identifier, e.g. "orders.status" or "billing.invoice.due_date". */
     name: string;
     /** A friendlier label when there is one, e.g. "Region". */
-    label?: string;
+    label?: string | undefined;
     /** Where it lives, when more than one place is in scope, e.g. "Shop staging". */
-    location?: string;
+    location?: string | undefined;
 };
 export type InlineNode = {
     kind: "text";
@@ -68,19 +68,19 @@ export type InlineNode = {
  | {
     kind: "measured";
     text: string;
-    source?: string;
+    source?: string | undefined;
 }
 /** @deprecated Renamed `measured`; still rendered the same way until 2.0. */
  | {
     kind: "orgData";
     text: string;
-    source?: string;
+    source?: string | undefined;
 }
 /** The agent asserts this but has not verified it. */
  | {
     kind: "provisional";
     nodes: InlineNode[];
-    reason?: string;
+    reason?: string | undefined;
 } | {
     kind: "citation";
     sourceId: string;
@@ -103,21 +103,21 @@ export type MessageSource = {
     kind: SourceKind;
     label: string;
     /** An inert excerpt shown in the popover. Text only. */
-    snippet?: string;
+    snippet?: string | undefined;
     /** Where it came from in a human sense: "Docs · Sales process v3", "Query on orders". */
-    origin?: string;
-    provisional?: boolean;
+    origin?: string | undefined;
+    provisional?: boolean | undefined;
 };
 /** 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;
+    key?: string | undefined;
 };
 type ReasoningBase = {
     id: string;
     title: string;
-    body?: string;
-    streaming?: boolean;
+    body?: string | undefined;
+    streaming?: boolean | undefined;
 };
 export type ReasoningEntry = (ReasoningBase & {
     basis: "verified";
@@ -134,23 +134,23 @@ export type ToolCall = {
     title: string;
     status: RunStatus;
     /** Shown when expanded. Text only; long values scroll. */
-    input?: string;
-    output?: string;
-    outputLanguage?: PayloadLanguage;
+    input?: string | undefined;
+    output?: string | undefined;
+    outputLanguage?: PayloadLanguage | undefined;
     /** e.g. "1.2s". Absent while running; never estimated. */
-    duration?: string;
+    duration?: string | undefined;
     /** Required when status is "failed": what went wrong, in a sentence. */
-    error?: string;
+    error?: string | undefined;
     /**
      * 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;
+        note?: string | undefined;
         /** The input as the agent proposed it, when a person edited it before it ran; `input` is then what ran. */
-        originalInput?: string;
-    };
+        originalInput?: string | undefined;
+    } | undefined;
 };
 /** The block's language, e.g. "json", "sql", "python", "text". Shown as a label; never executed or highlighted as HTML. */
 export type PayloadLanguage = string;
@@ -173,13 +173,13 @@ export type MessageBlock = {
     nodes: InlineNode[];
 } | {
     kind: "list";
-    ordered?: boolean;
+    ordered?: boolean | undefined;
     items: InlineNode[][];
 } | {
     kind: "payload";
     language: PayloadLanguage;
     text: string;
-    title?: string;
+    title?: string | undefined;
 } | {
     kind: "tools";
     calls: ToolCall[];
@@ -188,7 +188,7 @@ export type MessageBlock = {
  | {
     kind: "degraded";
     reason: string;
-    missing?: string;
+    missing?: string | undefined;
 }
 /**
  * A typed card (a result table, a plan, an approval) rendered by the app's
@@ -211,53 +211,53 @@ export type Message = {
     id: string;
     author: MessageAuthor;
     /** When it was sent. Absent when the source doesn't say; then no time is shown. */
-    createdAt?: string;
+    createdAt?: string | undefined;
     status: MessageStatus;
     blocks: MessageBlock[];
-    reasoning?: ReasoningEntry[];
+    reasoning?: ReasoningEntry[] | undefined;
     /** How long the agent spent before answering, e.g. "6s". Only once known. */
-    thoughtFor?: string;
-    sources?: MessageSource[];
+    thoughtFor?: string | undefined;
+    sources?: MessageSource[] | undefined;
     /** Shown under an agent's reply: model, cost. Only values the service measured. */
     attribution?: {
-        model?: string;
-        cost?: string;
-    };
+        model?: string | undefined;
+        cost?: string | undefined;
+    } | undefined;
 };
 /** Where the next message's work lands. */
 export type ComposerScope = {
-    account?: string;
+    account?: string | undefined;
     environment: string;
-    detail?: string;
+    detail?: string | undefined;
     production: boolean;
 };
 export type MentionOption = {
     id: string;
     /** The heading it sits under in the menu, e.g. "Files", "People". Groups appear in the order first used. */
     group: string;
-    entity?: EntityRef;
+    entity?: EntityRef | undefined;
     label: string;
-    description?: string;
+    description?: string | undefined;
 };
 export type SlashCommand = {
     id: string;
     name: string;
     description: string;
     /** e.g. "<object>" — shown after the name. */
-    args?: string;
+    args?: string | undefined;
 };
 export type Attachment = {
     id: string;
     name: string;
     /** In bytes. */
-    size?: number;
+    size?: number | undefined;
     /** e.g. "image/png", "application/pdf": picks the icon, and allows an image preview. */
-    mediaType?: string;
+    mediaType?: string | undefined;
     /** A thumbnail your app serves (or a blob: URL), shown for images. Never a URL from model output. */
-    previewUrl?: string;
+    previewUrl?: string | undefined;
     /** 0–1 while uploading; absent when done. */
-    progress?: number;
-    error?: string;
+    progress?: number | undefined;
+    error?: string | undefined;
 };
 export type PromptSuggestion = {
     id: string;

package/dist/lib/know.d.ts

@@ -14,17 +14,17 @@ export type KnowSource = {
     door: KnowDoor;
     label: string;
     /** Who added it, for files, links and answers. */
-    addedBy?: string;
-    addedAt?: string;
+    addedBy?: string | undefined;
+    addedAt?: string | undefined;
     /** When it was last read; null if never. */
     readAt: string | null;
     /** How often it should be re-read, in hours, when it has a schedule. */
-    everyHours?: number;
+    everyHours?: number | undefined;
     status: RunStatus;
     /** "214 objects", "38 pages" — only when counted. */
-    extent?: string;
+    extent?: string | undefined;
     /** Required when status is "failed". */
-    error?: string;
+    error?: string | undefined;
 };
 export type Confidence = "high" | "medium" | "low" | "unknown";
 export type RaciRole = "R" | "A" | "C" | "I";
@@ -42,7 +42,7 @@ export type RetrievedPassage = {
     /** Whether the answer actually cites it. */
     cited: boolean;
     /** Why it ranked where it did, when the retriever says. */
-    why?: string;
+    why?: string | undefined;
     readAt: string | null;
 };
 /** A sentence in an answer and the passages it rests on. */
@@ -57,7 +57,7 @@ export type ModelOption = {
     vendor: ModelVendor;
     name: string;
     /** One line on what it's good for. */
-    note?: string;
+    note?: string | undefined;
     /** Relative cost, 1 (cheapest) to 4. */
     cost: 1 | 2 | 3 | 4;
     /** The vendor's zero-retention contract has been attested by an operator. */
@@ -70,7 +70,7 @@ export type ModelSettingsValue = {
     /** Most tool-calling steps per run before it stops and asks. */
     stepLimit: number;
     /** Used when the primary is unavailable; must also be attested. */
-    fallback?: string;
+    fallback?: string | undefined;
 };
 export type ToolPermission = "always" | "ask" | "never";
 export type ToolSetting = {
@@ -81,7 +81,7 @@ export type ToolSetting = {
     effect: "read" | "write" | "deploy" | "outside";
     permission: ToolPermission;
     /** Permissions this tool can't take, with why. */
-    locked?: Partial<Record<ToolPermission, string>>;
+    locked?: Partial<Record<ToolPermission, string | undefined>> | undefined;
 };
 export type AgentConfig = {
     agent: AgentIdentity;
@@ -93,7 +93,7 @@ export type AgentConfig = {
         ok: number;
         failed: number;
     }[];
-    lastFailure?: string;
+    lastFailure?: string | undefined;
 };
 export type Memory = {
     id: string;
@@ -106,15 +106,17 @@ export type Memory = {
     };
     createdAt: string;
     scope: "account" | "environment";
-    environmentId?: string;
+    environmentId?: string | undefined;
 };
+/** Whether agents use memory: on, paused (kept and not used for now), or off. */
+export type MemoryModeValue = "on" | "paused" | "off";
 export type Version = {
     id: string;
     label: string;
     state: "live" | "draft" | "past";
     at: string;
     by: string;
-    note?: string;
+    note?: string | undefined;
 };
 export type ContextSegment = {
     label: string;