@candor-ui/react 1.3.0 → 1.7.0

package/dist/chat/message.js

@@ -26,7 +26,8 @@ export const messageStrings = {
 /**
  * One message in a thread.
  *
- * - A person's message sits right, on the user surface.
+ * - A person's message sits right, on the user surface, with their name and
+ *   time under it (`meta` hides or replaces that line).
  * - An agent's sits left, under its avatar, name and role, with reasoning above
  *   the answer, sources and actions below. While streaming, a caret follows the
  *   last block; an interrupted reply keeps what arrived and says it stopped.
@@ -35,8 +36,13 @@ export const messageStrings = {
  * - A system line is centred and quiet.
  * - A reply a person checked (or edited) before it went out can say so in a
  *   caption under it, so a reader knows a person stood behind it.
+ * - Times are relative ("5 minutes ago") unless `timeFormat` asks for an
+ *   absolute "time", "date" or "datetime" in the locale.
+ *
+ * Build `blocks` with `plainBlocks(text)` for a person's words and
+ * `markdownBlocks(text)` for an agent's, from `safe-markdown`.
  */
-function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }) {
+function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, footer, actions, meta, timeFormat, density = "default", bareCode, className, }) {
     const { author } = message;
     const roleOf = useAgentRoles();
     const t = useStrings("message", messageStrings);
@@ -44,24 +50,24 @@ function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry,
         return (_jsx(ThreadEvent, { "data-slot": "message", "data-role": "system", className: className, children: _jsx(MessageContent, { blocks: message.blocks, className: "text-xs leading-normal" }) }));
     }
     if (author.role === "user") {
-        return (_jsx("div", { "data-slot": "message", "data-role": "user", className: cn("flex justify-end ps-10 sm:ps-24 animate-rise-in", className), children: _jsxs("div", { className: "flex max-w-full flex-col items-end gap-1", children: [_jsx("div", { className: "rounded-xl rounded-ee-sm bg-surface-user px-3.5 py-2.5", children: _jsx(MessageContent, { blocks: message.blocks, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, className: "gap-2" }) }), _jsxs("span", { className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? t("you"), message.createdAt && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: message.createdAt })] }))] })] }) }));
+        return (_jsx("div", { "data-slot": "message", "data-role": "user", className: cn("flex justify-end ps-10 sm:ps-24 animate-rise-in", className), children: _jsxs("div", { className: "flex max-w-full flex-col items-end gap-1", children: [_jsx("div", { className: "rounded-xl rounded-ee-sm bg-surface-user px-3.5 py-2.5", children: _jsx(MessageContent, { blocks: message.blocks, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, bareCode: bareCode, className: "gap-2" }) }), meta === undefined ? (_jsxs("span", { "data-slot": "message-meta", className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? t("you"), message.createdAt && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: message.createdAt, format: timeFormat })] }))] })) : (meta)] }) }));
     }
     if (author.role === "person") {
-        return (_jsxs("article", { "data-slot": "message", "data-role": "person", "aria-label": author.team ? t("personLabel", { name: author.name, team: author.team }) : author.name, className: cn("flex gap-3 animate-rise-in", className), children: [_jsx("span", { "aria-hidden": true, className: "mt-px flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(MessageHeader, { name: author.name, detail: author.team, createdAt: message.createdAt }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, className: "mt-1" })] })] }));
+        return (_jsxs("article", { "data-slot": "message", "data-role": "person", "aria-label": author.team ? t("personLabel", { name: author.name, team: author.team }) : author.name, className: cn("flex gap-3 animate-rise-in", className), children: [_jsx("span", { "aria-hidden": true, className: "mt-px flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(MessageHeader, { name: author.name, detail: author.team, createdAt: message.createdAt, timeFormat: timeFormat, density: density }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, bareCode: bareCode, className: "mt-1" })] })] }));
     }
     const { agent } = author;
     const streaming = message.status === "streaming";
-    return (_jsxs("article", { "data-slot": "message", "data-role": "agent", "data-status": message.status, "aria-busy": streaming, "aria-label": t("agentLabel", { name: agent.name, noun: roleOf(agent.role).noun }), className: cn("group/message flex gap-3 animate-rise-in", className), children: [_jsx(AgentAvatar, { agent: agent, className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(MessageHeader, { name: agent.name, detail: agent.specialty, createdAt: message.createdAt }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", children: [_jsx(MessageBody, { message: message, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment }), _jsx(MessageFooter, { message: message, onRetry: onRetry, onContinue: onContinue, rating: rating, onRate: onRate, reviewedBy: reviewedBy, actions: actions })] })] })] }));
+    return (_jsxs("article", { "data-slot": "message", "data-role": "agent", "data-status": message.status, "aria-busy": streaming, "aria-label": t("agentLabel", { name: agent.name, noun: roleOf(agent.role).noun }), className: cn("group/message flex gap-3 animate-rise-in", className), children: [_jsx(AgentAvatar, { agent: agent, className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(MessageHeader, { name: agent.name, detail: agent.specialty, createdAt: message.createdAt, timeFormat: timeFormat, density: density }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", children: [_jsx(MessageBody, { message: message, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, bareCode: bareCode }), _jsx(MessageFooter, { message: message, onRetry: onRetry, onContinue: onContinue, rating: rating, onRate: onRate, reviewedBy: reviewedBy, footer: footer, actions: actions, timeFormat: timeFormat })] })] })] }));
 }
 /** The row above a reply: who sent it, a detail (their specialty or team), and when. */
-function MessageHeader({ name, detail, createdAt, children, className, }) {
-    return (_jsxs("header", { "data-slot": "message-header", className: cn("flex h-7 items-center gap-2", className), children: [_jsx("span", { className: "text-sm font-semibold", children: name }), detail && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: detail }), createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: createdAt }) })), children] }));
+function MessageHeader({ name, detail, createdAt, timeFormat, density = "default", children, className, }) {
+    return (_jsxs("header", { "data-slot": "message-header", "data-density": density, className: cn("flex items-center gap-2", density === "compact" ? "h-6" : "h-7", className), children: [_jsx("span", { className: cn("font-semibold", density === "compact" ? "text-xs" : "text-sm"), children: name }), detail && _jsx("span", { className: cn("truncate text-muted-foreground", density === "compact" ? "text-2xs" : "text-xs"), children: detail }), createdAt && (_jsx("span", { className: cn("text-faint-foreground", density === "compact" ? "text-2xs" : "text-xs"), children: _jsx(RelativeTime, { date: createdAt, format: timeFormat }) })), children] }));
 }
 /** A reply's content: its reasoning, then its blocks, with a caret after the last one while it streams. */
-function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, className, }) {
+function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, bareCode, className, }) {
     const streaming = message.status === "streaming";
     const thinking = streaming && message.blocks.length === 0;
-    return (_jsxs("div", { "data-slot": "message-body", className: cn("flex flex-col gap-3", className), children: [message.reasoning && message.reasoning.length > 0 && _jsx(Reasoning, { entries: message.reasoning, thinking: thinking, thoughtFor: message.thoughtFor }), message.blocks.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment }), streaming && _jsx("span", { "aria-hidden": true, className: "ms-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" })] }))] }));
+    return (_jsxs("div", { "data-slot": "message-body", className: cn("flex flex-col gap-3", className), children: [message.reasoning && message.reasoning.length > 0 && _jsx(Reasoning, { entries: message.reasoning, thinking: thinking, thoughtFor: message.thoughtFor }), message.blocks.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, bareCode: bareCode }), streaming && _jsx("span", { "aria-hidden": true, className: "ms-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" })] }))] }));
 }
 /** Model and cost, on a line of their own: what the actions row shows, for when it's hidden or replaced. */
 function MessageAttribution({ attribution, className, }) {
@@ -75,11 +81,11 @@ function MessageAttribution({ attribution, className, }) {
  * and cost. `actions={false}` hides the row and a node replaces it; either way the model and cost stay, on their own
  * line, because a reader should always see what produced the answer.
  */
-function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }) {
+function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, footer, actions, timeFormat, className, }) {
     const t = useStrings("message", messageStrings);
     const streaming = message.status === "streaming";
     const settled = !streaming && message.status !== "failed";
     const meta = [message.attribution?.model, message.attribution?.cost].filter(Boolean).join(" · ");
-    return (_jsxs("div", { "data-slot": "message-footer", className: cn("flex flex-col gap-3 empty:hidden", className), children: [message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), t("interrupted"), onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "font-medium text-accent-text hover:underline", children: t("continue") }))] })), message.status === "failed" && _jsx(DegradedPanel, { reason: t("failed"), missing: t("failedMissing"), onRetry: onRetry }), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), t(reviewedBy.edited ? "editedBy" : "checkedBy", { name: reviewedBy.name }), reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), settled && actions === undefined && (_jsx(MessageActions, { text: blocksToText(message.blocks, message.sources), onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ms-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" })), settled && actions !== undefined && actions !== false && actions, settled && actions !== undefined && _jsx(MessageAttribution, { attribution: message.attribution })] }));
+    return (_jsxs("div", { "data-slot": "message-footer", className: cn("flex flex-col gap-3 empty:hidden", className), children: [message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), t("interrupted"), onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "relative after:absolute after:inset-x-0 after:-inset-y-1 font-medium text-accent-text hover:underline", children: t("continue") }))] })), message.status === "failed" && _jsx(DegradedPanel, { reason: t("failed"), missing: t("failedMissing"), onRetry: onRetry }), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), t(reviewedBy.edited ? "editedBy" : "checkedBy", { name: reviewedBy.name }), reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at, format: timeFormat })] }))] })), footer, settled && actions === undefined && (_jsx(MessageActions, { text: blocksToText(message.blocks, message.sources), onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ms-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" })), settled && actions !== undefined && actions !== false && actions, settled && actions !== undefined && _jsx(MessageAttribution, { attribution: message.attribution })] }));
 }
 export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };

package/dist/chat/payload.d.ts

@@ -23,11 +23,11 @@ declare function Payload({ language, text, title, bare, highlight, className, }:
     /** The code or query, shown as text. */
     text: string;
     /** What it is, e.g. "The query I ran". Not shown when `bare`. */
-    title?: string;
+    title?: string | undefined;
     /** Just the code: no border, language label or copy button, for inside something that has them. */
-    bare?: boolean;
+    bare?: boolean | undefined;
     /** Colour the code by its syntax. Left out, it follows the nearest `data-syntax` attribute (off by default). */
-    highlight?: boolean;
-    className?: string;
+    highlight?: boolean | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Payload };

package/dist/chat/payload.js

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

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

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

package/dist/chat/permission-prompt.js

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

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

@@ -14,11 +14,11 @@ declare function PromptSuggestions({ suggestions, onChoose, label: labelProp, lo
     /** Called with the chosen one; put it in the composer to edit rather than sending it. */
     onChoose: (suggestion: PromptSuggestion) => void;
     /** The heading above the suggestions; "Try asking" by default. */
-    label?: string;
+    label?: string | undefined;
     /** Shows placeholders while suggestions load. */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /** Compact chips, or larger cards for an empty thread. */
-    variant?: "chips" | "cards";
-    className?: string;
+    variant?: "chips" | "cards" | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element | null;
 export { PromptSuggestions };

package/dist/chat/prompt-suggestions.js

@@ -20,6 +20,6 @@ function PromptSuggestions({ suggestions, onChoose, label: labelProp, loading =
         return null;
     return (_jsxs("section", { "data-slot": "prompt-suggestions", "aria-label": label, className: cn("flex flex-col gap-2", className), children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Sparkles, { "aria-hidden": true, className: "size-3" }), " ", label] }), _jsx("div", { className: cn(variant === "cards" ? "grid gap-2 sm:grid-cols-2" : "flex flex-wrap gap-1.5"), children: loading
                     ? Array.from({ length: variant === "cards" ? 4 : 3 }, (_, i) => (_jsx(Skeleton, { className: variant === "cards" ? "h-16 rounded-xl" : "h-8 w-44 rounded-lg" }, i)))
-                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-start text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: s.text }, s.id))) })] }));
+                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-start text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/80", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80", children: s.text }, s.id))) })] }));
 }
 export { PromptSuggestions };

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: "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 };