@candor-ui/react 1.0.1 → 1.1.0

package/dist/chat/entity-chip.js

@@ -3,6 +3,30 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import { Box, Braces, ChartColumn, File, FileText, Gauge, Link, Table2, TextCursorInput, UserRound, Waypoints, } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+/** EntityChip's fixed words; override them under `entityChip` in LocaleProvider's `strings`. */
+export const entityChipStrings = {
+    record: "Record",
+    document: "Document",
+    file: "File",
+    table: "Table",
+    field: "Field",
+    person: "Person",
+    link: "Link",
+    code: "Code",
+    workflow: "Workflow",
+    report: "Report",
+    dashboard: "Dashboard",
+    /** An unregistered kind. */
+    item: "Item",
+    title: "{noun}: {name}",
+    titleIn: "{noun}: {name} in {location}",
+    remove: "Remove {name}",
+};
+const baseKindNames = {
+    record: 1, document: 1, file: 1, table: 1, field: 1, person: 1, link: 1, code: 1, workflow: 1, report: 1, dashboard: 1,
+};
+const isBaseKind = (kind) => Object.hasOwn(baseKindNames, kind);
 /** Kinds most apps have. Add your own (or a preset) with EntityKindsProvider. */
 export const baseKinds = {
     record: { Icon: FileText, noun: "Record" },
@@ -32,7 +56,14 @@ function EntityKindsProvider({ kinds, children, }) {
 /** Look up a kind's icon and noun; unknown kinds read as "Item". */
 function useEntityKinds() {
     const kinds = React.useContext(KindsContext);
-    return React.useCallback((kind) => kinds[kind] ?? unknownKind, [kinds]);
+    const t = useStrings("entityChip", entityChipStrings);
+    return React.useCallback((kind) => {
+        const info = kinds[kind];
+        if (!info)
+            return { ...unknownKind, noun: t("item") };
+        // Built-in kinds take their noun from the strings table; an app's own kinds keep theirs.
+        return isBaseKind(kind) && info === baseKinds[kind] ? { ...info, noun: t(kind) } : info;
+    }, [kinds, t]);
 }
 /**
  * A thing in the user's system (a record, a table, a field, a workflow…) named
@@ -43,10 +74,13 @@ function useEntityKinds() {
  */
 function EntityChip({ entity, onOpen, onRemove, className, }) {
     const { Icon, noun } = useEntityKinds()(entity.kind);
+    const t = useStrings("entityChip", entityChipStrings);
     const shown = entity.label ?? entity.name;
-    const title = `${noun}: ${entity.name}${entity.location ? ` in ${entity.location}` : ""}`;
+    const title = entity.location
+        ? t("titleIn", { noun, name: entity.name, location: entity.location })
+        : t("title", { noun, name: entity.name });
     const body = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: shown }), _jsxs("span", { className: "sr-only", children: [" (", title, ")"] })] }));
     const base = "inline-flex max-w-full items-center gap-1 rounded-sm border bg-card px-1.5 py-px align-baseline font-mono text-[0.92em] leading-[1.35] text-foreground";
-    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${shown}`, onClick: () => onRemove(entity), className: "-ml-px rounded-r-sm border border-l-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
+    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "-ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
 }
 export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/folded-turns.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/** FoldedTurns' fixed words; override them under `foldedTurns` in LocaleProvider's `strings`. */
+export declare const foldedTurnsStrings: {
+    show: {
+        one: string;
+        other: string;
+    };
+    hide: {
+        one: string;
+        other: string;
+    };
+};
+/**
+ * A run of turns folded into one line, for long agent work a reader doesn't need to see step by step: "Drafted three
+ * versions and compared them". The line says how many turns are inside and opens them in place; `summary` is yours
+ * (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.
+ */
+declare function FoldedTurns({ count, summary, defaultOpen, open, onOpenChange, children, className, }: {
+    /** How many turns are inside, for the button ("Show 12 turns"). */
+    count: number;
+    /** What happened in them, shown on the folded line: text or your own small summary. */
+    summary?: React.ReactNode;
+    /** Start open. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when a person opens or closes it. */
+    onOpenChange?: (open: boolean) => void;
+    /** The turns, usually Messages. */
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export { FoldedTurns };

package/dist/chat/folded-turns.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+/** FoldedTurns' fixed words; override them under `foldedTurns` in LocaleProvider's `strings`. */
+export const foldedTurnsStrings = {
+    show: { one: "Show {count} turn", other: "Show {count} turns" },
+    hide: { one: "Hide {count} turn", other: "Hide {count} turns" },
+};
+/**
+ * A run of turns folded into one line, for long agent work a reader doesn't need to see step by step: "Drafted three
+ * versions and compared them". The line says how many turns are inside and opens them in place; `summary` is yours
+ * (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.
+ */
+function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange, children, className, }) {
+    const t = useStrings("foldedTurns", foldedTurnsStrings);
+    const [own, setOwn] = React.useState(defaultOpen);
+    const isOpen = open ?? own;
+    const set = (next) => {
+        if (open === undefined)
+            setOwn(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-dashed px-3 py-2 text-sm", children: [summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary }), _jsxs(CollapsibleTrigger, { className: "ms-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent-text outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 group-data-[state=open]/folded:[transform:rotate(90deg)]" }), t(isOpen ? "hide" : "show", { count })] })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-7", children: children })] }));
+}
+export { FoldedTurns };

package/dist/chat/message-actions.d.ts

@@ -1,4 +1,13 @@
 import * as React from "react";
+/** MessageActions' fixed words; override them under `messageActions` in LocaleProvider's `strings`. */
+export declare const messageActionsStrings: {
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    retry: string;
+    good: string;
+    bad: string;
+};
 export type Rating = "up" | "down" | null;
 /**
  * Copy, retry and rate under an agent's reply. Each action appears only when

package/dist/chat/message-actions.js

@@ -5,6 +5,16 @@ import { Check, Copy, RotateCw, ThumbsDown, ThumbsUp, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useCopy } from "../lib/use-copy.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { useStrings } from "../blocks/locale.js";
+/** MessageActions' fixed words; override them under `messageActions` in LocaleProvider's `strings`. */
+export const messageActionsStrings = {
+    copy: "Copy",
+    copied: "Copied",
+    copyFailed: "Couldn’t copy",
+    retry: "Retry",
+    good: "Good answer",
+    bad: "Bad answer",
+};
 function ActionButton({ label, onClick, pressed, children, }) {
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "aria-pressed": pressed, onClick: onClick, className: "flex size-7 items-center justify-center rounded-md text-faint-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 aria-pressed:text-accent-text [&_svg]:size-3.5", children: children }) }), _jsx(TooltipContent, { children: label })] }));
 }
@@ -15,6 +25,7 @@ function ActionButton({ label, onClick, pressed, children, }) {
  */
 function MessageActions({ text, onRetry, rating, onRate, meta, className, }) {
     const { state, copy } = useCopy();
-    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? "Copied" : state === "failed" ? "Couldn’t copy" : "Copy", onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: "Retry", onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: "Good answer", pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: "Bad answer", pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ml-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
+    const t = useStrings("messageActions", messageActionsStrings);
+    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? t("copied") : state === "failed" ? t("copyFailed") : t("copy"), onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: t("retry"), onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: t("good"), pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: t("bad"), pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ms-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
 }
 export { MessageActions };

package/dist/chat/message-content.d.ts

@@ -1,5 +1,12 @@
 import * as React from "react";
-import type { EntityRef, InlineNode, MessageBlock, MessageSource } from "../lib/chat.js";
+import type { Attachment, EntityRef, InlineNode, MessageBlock, MessageSource } from "../lib/chat.js";
+/** MessageContent's fixed words; override them under `messageContent` in LocaleProvider's `strings`. */
+export declare const messageContentStrings: {
+    measured: string;
+    measuredFrom: string;
+    notVerified: string;
+    provisional: string;
+};
 /**
  * Inline nodes. Every string here may come from a model or the user's system, so it is
  * only ever rendered as a React text child: no markdown parsing, no HTML.
@@ -9,8 +16,8 @@ declare function Inline({ nodes, }: {
     nodes: InlineNode[];
 }): React.JSX.Element;
 /** A message's blocks, in order. */
-declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, className, }: {
-    /** The reply as typed blocks: paragraphs, lists, payloads, tool calls, cards. */
+declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, onOpenAttachment, className, }: {
+    /** The reply as typed blocks: paragraphs, lists, payloads, tool calls, cards, attachments. */
     blocks: MessageBlock[];
     /** Sources the blocks cite by marker. */
     sources?: MessageSource[];
@@ -18,6 +25,8 @@ declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, cla
     onOpenEntity?: (entity: EntityRef) => void;
     /** Follows in-app links; links from a model are never rendered. */
     onNavigate?: (to: string) => void;
+    /** Makes attachment tiles buttons that open their file. */
+    onOpenAttachment?: (attachment: Attachment) => void;
     className?: string;
 }): React.JSX.Element;
 /** Plain text of a message, for copy. Citations become [n]; entities their API name. */

package/dist/chat/message-content.js

@@ -9,7 +9,16 @@ import { Citation } from "./citation.js";
 import { EntityChip } from "./entity-chip.js";
 import { Card } from "./card-registry.js";
 import { Payload } from "./payload.js";
+import { AttachmentList } from "./attachment-preview.js";
 import { ToolCallGroup } from "./tool-call.js";
+import { useStrings } from "../blocks/locale.js";
+/** MessageContent's fixed words; override them under `messageContent` in LocaleProvider's `strings`. */
+export const messageContentStrings = {
+    measured: "From the {environment}",
+    measuredFrom: "From the {environment}: {source}",
+    notVerified: " (not verified)",
+    provisional: "The agent hasn’t verified this against the {environment}.",
+};
 const ContentContext = React.createContext({ sources: new Map() });
 /**
  * Inline nodes. Every string here may come from a model or the user's system, so it is
@@ -17,6 +26,7 @@ const ContentContext = React.createContext({ sources: new Map() });
  */
 function Inline({ nodes, }) {
     const terms = useTerms();
+    const t = useStrings("messageContent", messageContentStrings);
     const ctx = React.useContext(ContentContext);
     return (_jsx(_Fragment, { children: nodes.map((n, i) => {
             switch (n.kind) {
@@ -30,9 +40,9 @@ function Inline({ nodes, }) {
                     return (_jsx("code", { className: "rounded-xs bg-muted px-1 py-px font-mono text-[0.88em]", children: n.text }, i));
                 case "measured":
                 case "orgData":
-                    return (_jsx("span", { title: n.source ? `From the ${terms.environment}: ${n.source}` : `From the ${terms.environment}`, className: "font-medium tabular-nums text-foreground", children: n.text }, i));
+                    return (_jsx("span", { title: n.source ? t("measuredFrom", { environment: terms.environment, source: n.source }) : t("measured", { environment: terms.environment }), className: "font-medium tabular-nums text-foreground", children: n.text }, i));
                 case "provisional":
-                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-provisional": true, className: "inline rounded-xs text-left text-provisional underline decoration-provisional/50 decoration-dotted underline-offset-[3px] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Inline, { nodes: n.nodes }), _jsx("span", { className: "sr-only", children: " (not verified)" })] }) }), _jsx(TooltipContent, { children: n.reason ?? `The agent hasn’t verified this against the ${terms.environment}.` })] }, i));
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-provisional": true, className: "inline rounded-xs text-start text-provisional underline decoration-provisional/50 decoration-dotted underline-offset-[3px] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Inline, { nodes: n.nodes }), _jsx("span", { className: "sr-only", children: t("notVerified") })] }) }), _jsx(TooltipContent, { children: n.reason ?? t("provisional", { environment: terms.environment }) })] }, i));
                 case "citation":
                     return _jsx(Citation, { source: ctx.sources.get(n.sourceId) }, i);
                 case "entity":
@@ -47,6 +57,10 @@ function Inline({ nodes, }) {
             }
         }) }));
 }
+function AttachmentBlock({ files }) {
+    const ctx = React.useContext(ContentContext);
+    return _jsx(AttachmentList, { attachments: files, onOpen: ctx.onOpenAttachment });
+}
 function Block({ block, }) {
     switch (block.kind) {
         case "paragraph":
@@ -62,7 +76,7 @@ function Block({ block, }) {
         }
         case "list": {
             const List = block.ordered ? "ol" : "ul";
-            return (_jsx(List, { className: cn("flex flex-col gap-1 pl-5", block.ordered ? "list-decimal" : "list-disc marker:text-faint-foreground"), children: block.items.map((item, i) => (_jsx("li", { className: "pl-0.5", children: _jsx(Inline, { nodes: item }) }, i))) }));
+            return (_jsx(List, { className: cn("flex flex-col gap-1 ps-5", block.ordered ? "list-decimal" : "list-disc marker:text-faint-foreground"), children: block.items.map((item, i) => (_jsx("li", { className: "ps-0.5", children: _jsx(Inline, { nodes: item }) }, i))) }));
         }
         case "payload":
             return _jsx(Payload, { language: block.language, text: block.text, title: block.title });
@@ -72,12 +86,14 @@ function Block({ block, }) {
             return _jsx(DegradedPanel, { reason: block.reason, missing: block.missing });
         case "card":
             return _jsx(Card, { name: block.card, props: block.props, summary: block.summary });
+        case "attachments":
+            return _jsx(AttachmentBlock, { files: block.files });
     }
 }
 /** A message's blocks, in order. */
-function MessageContent({ blocks, sources = [], onOpenEntity, onNavigate, className, }) {
-    const ctx = React.useMemo(() => ({ sources: new Map(sources.map((s) => [s.id, s])), onOpenEntity, onNavigate }), [sources, onOpenEntity, onNavigate]);
-    return (_jsx(ContentContext.Provider, { value: ctx, children: _jsx("div", { "data-slot": "message-content", className: cn("flex flex-col gap-3 text-base leading-relaxed", className), children: blocks.map((b, i) => (_jsx(Block, { block: b }, i))) }) }));
+function MessageContent({ blocks, sources = [], onOpenEntity, onNavigate, onOpenAttachment, className, }) {
+    const ctx = React.useMemo(() => ({ sources: new Map(sources.map((s) => [s.id, s])), onOpenEntity, onNavigate, onOpenAttachment }), [sources, onOpenEntity, onNavigate, onOpenAttachment]);
+    return (_jsx(ContentContext.Provider, { value: ctx, children: _jsx("div", { "data-slot": "message-content", className: cn("flex flex-col gap-3 text-prose leading-relaxed", className), children: blocks.map((b, i) => (_jsx(Block, { block: b }, i))) }) }));
 }
 /** Plain text of a message, for copy. Citations become [n]; entities their API name. */
 export function blocksToText(blocks, sources = []) {
@@ -112,6 +128,8 @@ export function blocksToText(blocks, sources = []) {
                 return b.reason;
             case "card":
                 return b.summary;
+            case "attachments":
+                return b.files.map((f) => f.name).join("\n");
             case "tools":
                 return "";
         }

package/dist/chat/message.d.ts

@@ -1,5 +1,18 @@
-import type { EntityRef, Message as MessageData } from "../lib/chat.js";
+import type * as React from "react";
+import type { Attachment, EntityRef, Message as MessageData } from "../lib/chat.js";
 import { type Rating } from "./message-actions.js";
+/** Message's fixed words; override them under `message` in LocaleProvider's `strings`. */
+export declare const messageStrings: {
+    you: string;
+    personLabel: string;
+    agentLabel: string;
+    interrupted: string;
+    continue: string;
+    failed: string;
+    failedMissing: string;
+    checkedBy: string;
+    editedBy: string;
+};
 /**
  * One message in a thread.
  *
@@ -13,13 +26,15 @@ import { type Rating } from "./message-actions.js";
  * - 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.
  */
-declare function Message({ message, onOpenEntity, onNavigate, onRetry, onContinue, rating, onRate, reviewedBy, className, }: {
+declare function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }: {
     /** The message: author, status, blocks, and optional reasoning, sources and attribution. */
     message: MessageData;
     /** Makes entity chips open their thing. */
     onOpenEntity?: (entity: EntityRef) => void;
     /** Follows in-app links. */
     onNavigate?: (to: string) => void;
+    /** Makes attachment tiles buttons that open their file. */
+    onOpenAttachment?: (attachment: Attachment) => void;
     /** Shows Retry on a failed or finished reply. */
     onRetry?: () => void;
     /** Shows Continue on an interrupted reply. */
@@ -34,6 +49,68 @@ declare function Message({ message, onOpenEntity, onNavigate, onRetry, onContinu
         at?: string;
         edited?: boolean;
     };
+    /**
+     * The row under an agent reply (copy, retry, rating). `false` hides it; a node replaces it, e.g. your own buttons.
+     * Model and cost still show, on their own line. To rebuild a message, use MessageHeader, MessageBody and
+     * MessageFooter.
+     */
+    actions?: false | React.ReactNode;
     className?: string;
-}): import("react").JSX.Element;
-export { Message };
+}): React.JSX.Element;
+/** The row above a reply: who sent it, a detail (their specialty or team), and when. */
+declare function MessageHeader({ name, detail, createdAt, children, className, }: {
+    /** The sender's displayed name. */
+    name: string;
+    /** A quieter detail after the name: an agent's specialty, a person's team. */
+    detail?: string;
+    /** When it was sent; shown as a relative time. */
+    createdAt?: string;
+    /** Anything else for the row, after the time (a badge, a menu). */
+    children?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** A reply's content: its reasoning, then its blocks, with a caret after the last one while it streams. */
+declare function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, className, }: {
+    /** The message whose reasoning and blocks to show. */
+    message: MessageData;
+    /** Makes entity chips open their thing. */
+    onOpenEntity?: (entity: EntityRef) => void;
+    /** Follows in-app links. */
+    onNavigate?: (to: string) => void;
+    /** Makes attachment tiles buttons that open their file. */
+    onOpenAttachment?: (attachment: Attachment) => void;
+    className?: string;
+}): React.JSX.Element;
+/** Model and cost, on a line of their own: what the actions row shows, for when it's hidden or replaced. */
+declare function MessageAttribution({ attribution, className, }: {
+    /** The service's measured values; nothing shows when both are absent. */
+    attribution?: MessageData["attribution"];
+    className?: string;
+}): React.JSX.Element | null;
+/**
+ * What sits under a reply: that it stopped or failed, its sources, who checked it, then the actions row with model
+ * 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.
+ */
+declare function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }: {
+    /** The message the footer belongs to. */
+    message: MessageData;
+    /** Shows Retry on a failed or finished reply. */
+    onRetry?: () => void;
+    /** Shows Continue on an interrupted reply. */
+    onContinue?: () => void;
+    /** The current rating. */
+    rating?: Rating;
+    /** Shows thumbs up and down. */
+    onRate?: (rating: Rating) => void;
+    /** A person who checked the reply before it was sent. */
+    reviewedBy?: {
+        name: string;
+        at?: string;
+        edited?: boolean;
+    };
+    /** `false` hides the actions row, a node replaces it; model and cost still show. */
+    actions?: false | React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };

package/dist/chat/message.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CircleStop, Info, UserCheck, UserRound } from "lucide-react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleStop, UserCheck, UserRound } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { DegradedPanel } from "../blocks/degraded-panel.js";
 import { RelativeTime } from "../blocks/relative-time.js";
@@ -9,6 +9,20 @@ import { SourceList } from "./citation.js";
 import { blocksToText, MessageContent } from "./message-content.js";
 import { MessageActions } from "./message-actions.js";
 import { Reasoning } from "./reasoning.js";
+import { ThreadEvent } from "./thread-event.js";
+import { useStrings } from "../blocks/locale.js";
+/** Message's fixed words; override them under `message` in LocaleProvider's `strings`. */
+export const messageStrings = {
+    you: "You",
+    personLabel: "{name}, {team}",
+    agentLabel: "{name}, {noun} agent",
+    interrupted: "Stopped before it finished. What arrived is kept.",
+    continue: "Continue",
+    failed: "The agent couldn’t finish this reply.",
+    failedMissing: "The rest of the answer",
+    checkedBy: "Checked by {name} before sending",
+    editedBy: "Edited by {name} before sending",
+};
 /**
  * One message in a thread.
  *
@@ -22,23 +36,50 @@ import { Reasoning } from "./reasoning.js";
  * - 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.
  */
-function Message({ message, onOpenEntity, onNavigate, onRetry, onContinue, rating, onRate, reviewedBy, className, }) {
+function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }) {
     const { author } = message;
     const roleOf = useAgentRoles();
+    const t = useStrings("message", messageStrings);
     if (author.role === "system") {
-        return (_jsxs("div", { "data-slot": "message", "data-role": "system", className: cn("flex items-center justify-center gap-1.5 py-1 text-xs text-faint-foreground", className), children: [_jsx(Info, { "aria-hidden": true, className: "size-3" }), _jsx(MessageContent, { blocks: message.blocks, className: "text-xs leading-normal" })] }));
+        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 pl-10 sm:pl-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-br-sm bg-surface-user px-3.5 py-2.5", children: _jsx(MessageContent, { blocks: message.blocks, onOpenEntity: onOpenEntity, onNavigate: onNavigate, className: "gap-2" }) }), _jsxs("span", { className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? "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, 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 })] }))] })] }) }));
     }
     if (author.role === "person") {
-        return (_jsxs("article", { "data-slot": "message", "data-role": "person", "aria-label": author.team ? `${author.name}, ${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: [_jsxs("header", { className: "flex h-7 items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: author.name }), author.team && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: author.team }), message.createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: message.createdAt }) }))] }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, 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 }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, 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 })] })] })] }));
+}
+/** 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] }));
+}
+/** 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, }) {
     const streaming = message.status === "streaming";
     const thinking = streaming && message.blocks.length === 0;
-    const text = blocksToText(message.blocks, message.sources);
+    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" })] }))] }));
+}
+/** 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, }) {
+    const meta = [attribution?.model, attribution?.cost].filter(Boolean).join(" · ");
+    if (!meta)
+        return null;
+    return (_jsx("p", { "data-slot": "message-attribution", className: cn("text-xs text-faint-foreground", className), children: meta }));
+}
+/**
+ * What sits under a reply: that it stopped or failed, its sources, who checked it, then the actions row with model
+ * 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, }) {
+    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("article", { "data-slot": "message", "data-role": "agent", "data-status": message.status, "aria-busy": streaming, "aria-label": `${agent.name}, ${roleOf(agent.role).noun} agent`, 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: [_jsxs("header", { className: "flex h-7 items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: agent.name }), agent.specialty && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: agent.specialty }), message.createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: message.createdAt }) }))] }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", 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 }), streaming && (_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" }))] })), 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" }), "Stopped before it finished. What arrived is kept.", onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "font-medium text-accent-text hover:underline", children: "Continue" }))] })), message.status === "failed" && (_jsx(DegradedPanel, { reason: "The agent couldn\u2019t finish this reply.", missing: "The rest of the answer", 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" }), reviewedBy.edited ? "Edited" : "Checked", " by ", reviewedBy.name, " before sending", reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), !streaming && message.status !== "failed" && (_jsx(MessageActions, { text: text, onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ml-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" }))] })] })] }));
+    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 })] }));
 }
-export { Message };
+export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };

package/dist/chat/payload.d.ts

@@ -1,16 +1,33 @@
+import * as React from "react";
 import type { PayloadLanguage } from "../lib/chat.js";
+/** Payload's fixed words; override them under `payload` in LocaleProvider's `strings`. */
+export declare const payloadStrings: {
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    shell: string;
+    text: string;
+};
 /**
  * A block of code or query text from the agent: a query it ran, code it
  * wrote, a config file. Rendered as text in a sunken well, with its language and a copy
- * control that only says "Copied" once the clipboard took it.
+ * control that only says "Copied" once the clipboard took it. `bare` drops the frame and
+ * the caption, for a card or panel that already has its own.
+ *
+ * Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured
+ * when `highlight` is set, or anywhere under `data-syntax="highlight"` (set it on `<html>` for the whole app).
  */
-declare function Payload({ language, text, title, className, }: {
+declare function Payload({ language, text, title, bare, highlight, className, }: {
     /** Shown as the label, e.g. json, sql, python. Never executed or highlighted as HTML. */
     language: PayloadLanguage;
     /** The code or query, shown as text. */
     text: string;
-    /** What it is, e.g. "The query I ran". */
+    /** What it is, e.g. "The query I ran". Not shown when `bare`. */
     title?: string;
+    /** Just the code: no border, language label or copy button, for inside something that has them. */
+    bare?: boolean;
+    /** Colour the code by its syntax. Left out, it follows the nearest `data-syntax` attribute (off by default). */
+    highlight?: boolean;
     className?: string;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 export { Payload };

package/dist/chat/payload.js

@@ -1,18 +1,51 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { Check, Copy, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useCopy } from "../lib/use-copy.js";
-const knownLabels = { json: "JSON", xml: "XML", sql: "SQL", yaml: "YAML", html: "HTML", css: "CSS", js: "JavaScript", ts: "TypeScript", tsx: "TSX", python: "Python", bash: "Shell", sh: "Shell", text: "Text" };
+import { tokenize } from "../lib/highlight.js";
+import { useStrings } from "../blocks/locale.js";
+/** Payload's fixed words; override them under `payload` in LocaleProvider's `strings`. */
+export const payloadStrings = {
+    copy: "Copy",
+    copied: "Copied",
+    copyFailed: "Couldn’t copy",
+    shell: "Shell",
+    text: "Text",
+};
+// Language names are the same in every language; only the generic ones ("Shell", "Text") come from the strings table.
+const knownLabels = { json: "JSON", xml: "XML", sql: "SQL", yaml: "YAML", html: "HTML", css: "CSS", js: "JavaScript", ts: "TypeScript", tsx: "TSX", python: "Python" };
+const translatedLabels = { bash: "shell", sh: "shell", text: "text" };
 /** "json" → "JSON", "python" → "Python", short unknown ones upper-cased ("hcl" → "HCL"). */
-const languageLabel = (lang) => knownLabels[lang] ?? (lang.length <= 4 ? lang.toUpperCase() : lang.charAt(0).toUpperCase() + lang.slice(1));
+const languageLabel = (lang, t) => {
+    const key = translatedLabels[lang];
+    if (key)
+        return t(key);
+    return knownLabels[lang] ?? (lang.length <= 4 ? lang.toUpperCase() : lang.charAt(0).toUpperCase() + lang.slice(1));
+};
 /**
  * A block of code or query text from the agent: a query it ran, code it
  * wrote, a config file. Rendered as text in a sunken well, with its language and a copy
- * control that only says "Copied" once the clipboard took it.
+ * control that only says "Copied" once the clipboard took it. `bare` drops the frame and
+ * the caption, for a card or panel that already has its own.
+ *
+ * Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured
+ * when `highlight` is set, or anywhere under `data-syntax="highlight"` (set it on `<html>` for the whole app).
  */
-function Payload({ language, text, title, className, }) {
+function Payload({ language, text, title, bare = false, highlight, className, }) {
     const { state, copy } = useCopy();
-    return (_jsxs("figure", { "data-slot": "payload", 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) }), 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" }), " Copied"] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " Couldn\u2019t copy"] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " Copy"] })) })] }), _jsx("pre", { className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", children: _jsx("code", { children: text }) })] }));
+    const t = useStrings("payload", payloadStrings);
+    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 (_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 })] }));
+}
+/** The code as token spans. Each token is a text child, so nothing in it is parsed as markup. */
+function Code({ text, language }) {
+    const tokens = React.useMemo(() => tokenize(text, language), [text, language]);
+    return (_jsx("code", { children: tokens.map((tok, i) => tok.type === "plain" ? (_jsx(React.Fragment, { children: tok.text }, i)) : (_jsx("span", { "data-token": tok.type, children: tok.text }, i))) }));
 }
 export { Payload };