@candor-ui/react 1.3.0 → 1.7.0

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,14 +98,14 @@ 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);
                             }
-                            : undefined, onBlur: virtualize ? (e) => !e.currentTarget.contains(e.relatedTarget) && setFocused(null) : undefined, 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 ? (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: () => {
+                            : 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")] })), _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

@@ -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
@@ -20,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

@@ -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/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, }) {
@@ -41,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

@@ -40,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

@@ -40,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

@@ -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,16 +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 | undefined;
 };
 type ReasoningBase = {
     id: string;
     title: string;
-    body?: string;
-    streaming?: boolean;
+    body?: string | undefined;
+    streaming?: boolean | undefined;
 };
 export type ReasoningEntry = (ReasoningBase & {
     basis: "verified";
@@ -129,13 +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 | undefined;
+        /** The input as the agent proposed it, when a person edited it before it ran; `input` is then what ran. */
+        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;
@@ -158,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[];
@@ -173,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
@@ -196,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;

package/dist/lib/render-prop.d.ts

@@ -6,11 +6,11 @@ import * as React from "react";
  */
 export type RenderProp = {
     /** Base UI's way to render as another element; the same as `asChild` with that element as the child. */
-    render?: React.ReactElement;
+    render?: React.ReactElement | undefined;
     /** Base UI's flag for a button rendered as another element; shadcn adds it with `render`. Radix doesn't need it. */
-    nativeButton?: boolean;
+    nativeButton?: boolean | undefined;
 };
 export declare function withRender<P extends {
-    asChild?: boolean;
-    children?: React.ReactNode;
+    asChild?: boolean | undefined;
+    children?: React.ReactNode | undefined;
 }>({ render, nativeButton: _nativeButton, ...props }: P & RenderProp): P;

package/dist/lib/safe-markdown.d.ts

@@ -4,7 +4,7 @@ import type { InlineNode, MessageBlock } from "./chat.js";
  * unless `headings` is set, when `#`, `##` and `###` (and deeper, as level 3) become heading blocks.
  */
 export declare function markdownBlocks(text: string, { headings }?: {
-    headings?: boolean;
+    headings?: boolean | undefined;
 }): MessageBlock[];
 /** `code`, **strong**, *em* and links (as text). Everything else stays literal. */
 export declare function inline(text: string): InlineNode[];

package/dist/lib/status.d.ts

@@ -34,3 +34,24 @@ export declare const statusTone: {
     readonly skipped: "outline";
 };
 export declare function isTerminal(status: RunStatus): status is "succeeded" | "failed" | "cancelled" | "skipped";
+/** The machine or worker a run is on, when the app can't reach it. */
+export type HostOffline = {
+    /** The host's name as the app knows it: "Build runner 3", "Priya’s laptop". Left out, it's "The host". */
+    host?: string | undefined;
+    /** When the app lost contact. */
+    since?: string | undefined;
+};
+/**
+ * Whether a run can be called alive. "live": heard from recently, or the app doesn't track it. "stale": running, but
+ * nothing heard for longer than `staleAfter`, so it may have stopped. "offline": its host can't be reached.
+ * "unchecked": there's no clock yet (rendering on the server), so freshness isn't claimed either way. "settled": it
+ * has finished, so silence is expected. Only a running run goes stale: a queued or waiting one is quiet by design.
+ */
+export type RunLiveness = "live" | "stale" | "offline" | "unchecked" | "settled";
+/** Two minutes: the default silence after which a running run is no longer called running. */
+export declare const STALE_AFTER = 120000;
+export declare function runLiveness(run: {
+    status: RunStatus;
+    lastHeardAt?: Date | string | undefined;
+    hostOffline?: HostOffline | undefined;
+}, now: number | null, staleAfter?: number): RunLiveness;

package/dist/lib/status.js

@@ -33,3 +33,20 @@ export const statusTone = {
 export function isTerminal(status) {
     return status === "succeeded" || status === "failed" || status === "cancelled" || status === "skipped";
 }
+/** Two minutes: the default silence after which a running run is no longer called running. */
+export const STALE_AFTER = 120_000;
+export function runLiveness(run, now, staleAfter = STALE_AFTER) {
+    if (isTerminal(run.status))
+        return "settled";
+    if (run.hostOffline)
+        return "offline";
+    if (run.status !== "running" || run.lastHeardAt === undefined)
+        return "live";
+    const heard = new Date(run.lastHeardAt).getTime();
+    // An unreadable time ("", "10:42") is no evidence the run is alive.
+    if (Number.isNaN(heard))
+        return "stale";
+    if (now === null)
+        return "unchecked";
+    return now - heard > staleAfter ? "stale" : "live";
+}

package/dist/lib/use-shortcut.d.ts

@@ -11,5 +11,5 @@ export declare function comboKeys(combo: string): string[];
  * the person is typing in a field, so "?" still types a question mark.
  */
 export declare function useShortcut(combo: string, handler: (e: KeyboardEvent) => void, { enabled }?: {
-    enabled?: boolean;
+    enabled?: boolean | undefined;
 }): void;

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

@@ -27,13 +27,13 @@ export declare function useVirtualList({ enabled, count, keyOf, scroller, estima
     count: number;
     keyOf: (index: number) => React.Key;
     scroller: React.RefObject<HTMLElement | null>;
-    estimate?: number;
-    overscan?: number;
-    initial?: number;
+    estimate?: number | undefined;
+    overscan?: number | undefined;
+    initial?: number | undefined;
     /** 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";
+    anchor?: "start" | "end" | undefined;
     /** The gap between items, in pixels, read once the scroller is measured (e.g. from the list's computed `row-gap`). */
-    gap?: () => number;
+    gap?: (() => number) | undefined;
     /** The key of an item to keep rendered, such as the one holding focus. */
-    pin?: string | null;
+    pin?: string | null | undefined;
 }): VirtualList;

package/dist/styles.css

@@ -238,6 +238,9 @@
  * (--primary, --background…), everything else by its --cd-* name. A brand theme
  * is just such a file.
  *
+ * Font: Inter when the font-inter item is installed (styles/candor-font-inter.css),
+ * else the system's sans-serif. Point --cd-font at your own font to use it instead.
+ *
  * Density: data-density="compact" on <html> (or any container) tightens type for
  * dense apps: 14px conversation text and 13px body and label text, with a narrower
  * thread and sidebar.
@@ -476,7 +479,7 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border outline-ring/80;
   }
   body {
     @apply bg-background text-foreground font-sans text-sm;

package/dist/ui/button.d.ts

@@ -7,6 +7,6 @@ declare const buttonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button(allProps: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     /** Render the child element (a link, say) with the button's styles instead of a <button>. */
-    asChild?: boolean;
+    asChild?: boolean | undefined;
 } & RenderProp): React.JSX.Element;
 export { Button, buttonVariants };

package/dist/ui/button.js

@@ -7,7 +7,7 @@ import { withRender } from "../lib/render-prop.js";
 import { cn } from "../lib/utils.js";
 // The accent fills the one primary act, the radius is the theme's
 // --cd-radius-button, and buttons press down slightly on :active.
-const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-button text-sm font-medium whitespace-nowrap outline-none select-none transition-[background-color,color,border-color,box-shadow,transform,opacity] duration-150 ease-standard active:scale-[0.98] focus-visible:ring-[3px] focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[locked]:active:scale-100 aria-invalid:ring-destructive/25 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-button text-sm font-medium whitespace-nowrap outline-none select-none transition-[background-color,color,border-color,box-shadow,transform,opacity] duration-150 ease-standard active:scale-[0.98] focus-visible:ring-[3px] focus-visible:ring-ring/80 disabled:pointer-events-none disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[locked]:active:scale-100 aria-invalid:ring-destructive/25 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary-hover",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "1.3.0",
+  "version": "1.7.0",
   "description": "Candor UI's free tier as an npm package: React components for agents that do real work, on shadcn/ui and Tailwind 4.",
   "license": "MIT",
   "author": "Methodic LLC",