@calliopelabs/ui 0.13.0 → 0.14.0

package/dist/appearance/brands.d.ts

@@ -1,6 +1,8 @@
 /**
- * The two consoles' brands, kept here so both apps and the catalog read the
- * same values. An app adds its navigation:
+ * The family's brands, kept here so every app and the catalog read the same
+ * values. Their colours (sidebar and the product's own accent) live in
+ * `tokens/brand/*.json`; this file adds names, grounds, defaults and themes.
+ * An app adds its navigation:
  *
  *   export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
  */
@@ -78,12 +80,12 @@ export declare const zentinelleBrand: {
     readonly id: "zentinelle";
     readonly name: "Zentinelle AI";
     readonly accent: {
-        readonly key: "teal";
-        readonly label: "Teal";
         readonly dark: "#37efed";
         readonly onDark: "#0b0b19";
         readonly light: "#0d7470";
         readonly onLight: "#f3fbf7";
+        readonly key: "teal";
+        readonly label: "Teal";
     };
     readonly sidebar: "#0b0b19";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
@@ -102,12 +104,12 @@ export declare const workbenchBrand: {
     readonly id: "workbench";
     readonly name: "Calliope AI Workbench";
     readonly accent: {
-        readonly key: "workbench-blue";
-        readonly label: "Workbench blue";
         readonly dark: "#8fb8e8";
         readonly onDark: "#0b1120";
         readonly light: "#2f5d94";
         readonly onLight: "#f3fbf7";
+        readonly key: "workbench-blue";
+        readonly label: "Workbench blue";
     };
     readonly sidebar: "#0e1730";
     readonly grounds: readonly ["navy", "black", "charcoal", "graphite", "paper", "mist"];
@@ -124,12 +126,12 @@ export declare const chatStudioBrand: {
     readonly id: "chat-studio";
     readonly name: "Calliope AI Chat Studio";
     readonly accent: {
-        readonly key: "studio-blue";
-        readonly label: "Studio blue";
         readonly dark: "#8ab4f8";
         readonly onDark: "#0c0c0c";
         readonly light: "#1d4ed8";
         readonly onLight: "#ffffff";
+        readonly key: "studio-blue";
+        readonly label: "Studio blue";
     };
     readonly sidebar: "#080808";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
@@ -147,12 +149,12 @@ export declare const loadrBrand: {
     readonly id: "loadr";
     readonly name: "Calliope AI Loadr";
     readonly accent: {
-        readonly key: "loadr-blue";
-        readonly label: "Loadr blue";
         readonly dark: "#89b4fa";
         readonly onDark: "#11111b";
         readonly light: "#1e66f5";
         readonly onLight: "#ffffff";
+        readonly key: "loadr-blue";
+        readonly label: "Loadr blue";
     };
     readonly sidebar: "#181825";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
@@ -171,12 +173,12 @@ export declare const cykickBrand: {
     readonly id: "cykick";
     readonly name: "Cykick";
     readonly accent: {
-        readonly key: "cykick-cyan";
-        readonly label: "Cykick cyan";
         readonly dark: "#22d3ee";
         readonly onDark: "#07090e";
         readonly light: "#0e7490";
         readonly onLight: "#ffffff";
+        readonly key: "cykick-cyan";
+        readonly label: "Cykick cyan";
     };
     readonly sidebar: "#07090e";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];

package/dist/appearance/brands.js

@@ -1,6 +1,9 @@
+import { TOKENS } from "../theme/tokens.generated.js";
 /**
- * The two consoles' brands, kept here so both apps and the catalog read the
- * same values. An app adds its navigation:
+ * The family's brands, kept here so every app and the catalog read the same
+ * values. Their colours (sidebar and the product's own accent) live in
+ * `tokens/brand/*.json`; this file adds names, grounds, defaults and themes.
+ * An app adds its navigation:
  *
  *   export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
  */
@@ -13,7 +16,7 @@ export const astroliftBrand = {
     id: "astrolift",
     name: "Astrolift AI",
     accent: "green",
-    sidebar: "#04231a",
+    sidebar: TOKENS.brand.astrolift.sidebar,
     grounds: ["black", "charcoal", "graphite", "emerald", "paper", "mist"],
     defaultGround: { dark: "graphite", light: "mist" },
     themes: [
@@ -47,15 +50,8 @@ export const astroliftBrand = {
 export const zentinelleBrand = {
     id: "zentinelle",
     name: "Zentinelle AI",
-    accent: {
-        key: "teal",
-        label: "Teal",
-        dark: "#37efed",
-        onDark: "#0b0b19",
-        light: "#0d7470",
-        onLight: "#f3fbf7",
-    },
-    sidebar: "#0b0b19",
+    accent: { key: "teal", label: "Teal", ...TOKENS.brand.zentinelle.accent },
+    sidebar: TOKENS.brand.zentinelle.sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "mist" },
 };
@@ -63,7 +59,8 @@ export const zentinelleBrand = {
  * The brands below are copied from what each product ships today, so nothing
  * changes when an app moves onto the library. Where a product has no value
  * the model needs (usually a light-ground accent), the nearest one that
- * passes the contrast tests is used and marked "derived" for the designer.
+ * passes the contrast tests is used and its token's description says
+ * "Derived" for the designer.
  */
 /**
  * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
@@ -74,16 +71,8 @@ export const zentinelleBrand = {
 export const workbenchBrand = {
     id: "workbench",
     name: "Calliope AI Workbench",
-    accent: {
-        key: "workbench-blue",
-        label: "Workbench blue",
-        dark: "#8fb8e8",
-        onDark: "#0b1120",
-        // derived: the hub has no light ground
-        light: "#2f5d94",
-        onLight: "#f3fbf7",
-    },
-    sidebar: "#0e1730",
+    accent: { key: "workbench-blue", label: "Workbench blue", ...TOKENS.brand.workbench.accent },
+    sidebar: TOKENS.brand.workbench.sidebar,
     grounds: ["navy", "black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "navy", light: "mist" },
 };
@@ -94,15 +83,8 @@ export const workbenchBrand = {
 export const chatStudioBrand = {
     id: "chat-studio",
     name: "Calliope AI Chat Studio",
-    accent: {
-        key: "studio-blue",
-        label: "Studio blue",
-        dark: "#8ab4f8",
-        onDark: "#0c0c0c",
-        light: "#1d4ed8",
-        onLight: "#ffffff",
-    },
-    sidebar: "#080808",
+    accent: { key: "studio-blue", label: "Studio blue", ...TOKENS.brand["chat-studio"].accent },
+    sidebar: TOKENS.brand["chat-studio"].sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "paper" },
 };
@@ -114,15 +96,8 @@ export const chatStudioBrand = {
 export const loadrBrand = {
     id: "loadr",
     name: "Calliope AI Loadr",
-    accent: {
-        key: "loadr-blue",
-        label: "Loadr blue",
-        dark: "#89b4fa",
-        onDark: "#11111b",
-        light: "#1e66f5",
-        onLight: "#ffffff",
-    },
-    sidebar: "#181825",
+    accent: { key: "loadr-blue", label: "Loadr blue", ...TOKENS.brand.loadr.accent },
+    sidebar: TOKENS.brand.loadr.sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "charcoal", light: "paper" },
 };
@@ -135,16 +110,8 @@ export const loadrBrand = {
 export const cykickBrand = {
     id: "cykick",
     name: "Cykick",
-    accent: {
-        key: "cykick-cyan",
-        label: "Cykick cyan",
-        dark: "#22d3ee",
-        onDark: "#07090e",
-        // derived: no light accent in native-themes.json
-        light: "#0e7490",
-        onLight: "#ffffff",
-    },
-    sidebar: "#07090e",
+    accent: { key: "cykick-cyan", label: "Cykick cyan", ...TOKENS.brand.cykick.accent },
+    sidebar: TOKENS.brand.cykick.sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "mist" },
     defaultCorners: 0,

package/dist/chat/AgentProgress.d.ts

@@ -0,0 +1,19 @@
+import type { StatusTone } from "../status/tones.js";
+import type { RunStage } from "../workflow/run.js";
+import type { ChatRunStatus, ChatStep, ChatView } from "./model.js";
+export interface AgentProgressProps {
+    /** The run: a `ChatView`, or the part of one this reads. */
+    view: Pick<ChatView, "status" | "steps" | "error">;
+    /** Names the section. Defaults to "Agent progress". */
+    label?: string;
+    className?: string;
+}
+export declare const CHAT_RUN_TONE: Record<ChatRunStatus, StatusTone>;
+/** A run's steps as the run timeline's stages. */
+export declare function chatStepStages(steps: readonly ChatStep[]): RunStage[];
+/**
+ * Where the agent's run stands: its status, and its steps on the library's
+ * RunTimeline, so a chat run reads like any other run. The error, when the
+ * run failed, sits beside the status.
+ */
+export declare function AgentProgress({ view, label, className }: AgentProgressProps): import("react").JSX.Element;

package/dist/chat/AgentProgress.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusBadge } from "../status/StatusBadge.js";
+import { RunTimeline } from "../workflow/RunTimeline.js";
+export const CHAT_RUN_TONE = {
+    idle: "muted",
+    running: "info",
+    finished: "ok",
+    interrupted: "warn",
+    cancelled: "muted",
+    error: "error",
+};
+const STAGE = {
+    running: "running",
+    finished: "passed",
+    failed: "failed",
+    cancelled: "cancelled",
+};
+/** A run's steps as the run timeline's stages. */
+export function chatStepStages(steps) {
+    return steps.map((step, i) => ({ id: String(i), label: step.name, status: STAGE[step.status] }));
+}
+/**
+ * Where the agent's run stands: its status, and its steps on the library's
+ * RunTimeline, so a chat run reads like any other run. The error, when the
+ * run failed, sits beside the status.
+ */
+export function AgentProgress({ view, label, className }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    return (_jsxs("section", { "aria-label": label ?? t.progress, "data-slot": "agent-progress", className: cn("flex min-w-0 flex-col gap-3", className), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(StatusBadge, { tone: CHAT_RUN_TONE[view.status], pulse: view.status === "running", children: t.runStatus(view.status) }), view.status === "error" && view.error && (_jsx("p", { className: "min-w-0 text-sm [overflow-wrap:anywhere] text-danger-fg", children: view.error.message }))] }), view.steps.length > 0 && _jsx(RunTimeline, { stages: chatStepStages(view.steps), label: t.steps })] }));
+}

package/dist/chat/Composer.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface ComposerProps {
+    /** The draft, when the host holds it. Leave it out and the composer keeps its own. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Sends the trimmed draft. A composer that keeps its own draft clears it;
+     * a host that holds it clears it when it wants to.
+     */
+    onSubmit: (text: string) => void;
+    /** A run is in flight: send is held, and stop shows when `onStop` is given. */
+    running?: boolean;
+    onStop?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Names the field. Defaults to "Message". */
+    label?: string;
+    /** Above the field: the files the host has attached, as chips. */
+    attachments?: React.ReactNode;
+    /** Beside send: an attach button, a ModelPicker. */
+    actions?: React.ReactNode;
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * Where the person writes. Multi-line, growing with the text; Enter sends,
+ * Shift+Enter breaks the line, and nothing sends while an input method is
+ * composing. While a run is in flight, send is held and stop is offered.
+ * Attachments and actions are slots: the host owns files and models.
+ */
+export declare function Composer({ value, onValueChange, onSubmit, running, onStop, disabled, placeholder, label, attachments, actions, autoFocus, className, }: ComposerProps): React.JSX.Element;

package/dist/chat/Composer.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, SquareIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * Where the person writes. Multi-line, growing with the text; Enter sends,
+ * Shift+Enter breaks the line, and nothing sends while an input method is
+ * composing. While a run is in flight, send is held and stop is offered.
+ * Attachments and actions are slots: the host owns files and models.
+ */
+export function Composer({ value, onValueChange, onSubmit, running = false, onStop, disabled = false, placeholder, label, attachments, actions, autoFocus, className, }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    const hintId = React.useId();
+    const [own, setOwn] = React.useState("");
+    const draft = value ?? own;
+    const canSend = !disabled && !running && draft.trim() !== "";
+    const change = (next) => {
+        if (value === undefined)
+            setOwn(next);
+        onValueChange?.(next);
+    };
+    const submit = () => {
+        if (!canSend)
+            return;
+        onSubmit(draft.trim());
+        if (value === undefined)
+            setOwn("");
+    };
+    return (_jsxs("form", { "data-slot": "composer", onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, className: cn("flex min-w-0 flex-col rounded-lg border border-input bg-background focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30", disabled && "opacity-50", className), children: [attachments && (_jsx("div", { role: "group", "aria-label": t.attachments, className: "flex min-w-0 flex-wrap gap-2 px-3 pt-2", children: attachments })), _jsx("textarea", { "aria-label": label ?? t.composer, "aria-describedby": hintId, value: draft, disabled: disabled, placeholder: placeholder ?? t.placeholder, rows: 1, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus -- the host asks for it, on a chat screen
+                autoFocus: autoFocus, onChange: (event) => change(event.target.value), onKeyDown: (event) => {
+                    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing)
+                        return;
+                    event.preventDefault();
+                    submit();
+                }, className: "field-sizing-content max-h-48 min-h-10 w-full min-w-0 resize-none bg-transparent px-3 py-2 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm" }), _jsx("p", { id: hintId, className: "sr-only", children: t.composerHint }), _jsxs("div", { className: "flex min-w-0 items-center gap-2 px-2 pb-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: actions }), running && onStop ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onStop, children: [_jsx(SquareIcon, { "aria-hidden": true }), t.stop] })) : (_jsxs(Button, { type: "submit", size: "sm", disabled: !canSend, children: [_jsx(ArrowUpIcon, { "aria-hidden": true }), t.send] }))] })] }));
+}

package/dist/chat/MessageBubble.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import type { ChatMessage } from "./model.js";
+/**
+ * Renders a message's text: the host's markdown renderer, say. It receives
+ * the text so far (it grows while the message streams) and must treat it as
+ * untrusted. Without one, the text shows as plain text.
+ */
+export type ChatContentRenderer = (content: string, message: ChatMessage) => React.ReactNode;
+export interface MessageBubbleProps {
+    message: ChatMessage;
+    renderContent?: ChatContentRenderer;
+    /** Beside the speaker: a time, a copy button. */
+    meta?: React.ReactNode;
+    className?: string;
+}
+/**
+ * One message, by role: the person's on the right in a muted bubble, the
+ * assistant's full width, system and developer notes dashed and quiet, a tool
+ * message in mono. While it streams, an empty one says it is thinking and a
+ * growing one shows a caret. Text is plain unless the host passes
+ * `renderContent`; plain text is never parsed as HTML.
+ */
+export declare function MessageBubble({ message, renderContent, meta, className }: MessageBubbleProps): React.JSX.Element;

package/dist/chat/MessageBubble.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusDot } from "../status/StatusDot.js";
+const ROLE_CLASS = {
+    user: "ml-auto max-w-[85%] rounded-lg bg-muted px-3 py-2",
+    assistant: "",
+    system: "rounded-lg border border-dashed px-3 py-2 text-xs text-muted-foreground",
+    developer: "rounded-lg border border-dashed px-3 py-2 text-xs text-muted-foreground",
+    tool: "rounded-lg border bg-card px-3 py-2 font-mono text-xs",
+};
+/**
+ * One message, by role: the person's on the right in a muted bubble, the
+ * assistant's full width, system and developer notes dashed and quiet, a tool
+ * message in mono. While it streams, an empty one says it is thinking and a
+ * growing one shows a caret. Text is plain unless the host passes
+ * `renderContent`; plain text is never parsed as HTML.
+ */
+export function MessageBubble({ message, renderContent, meta, className }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    const speaker = message.name ?? t.role(message.role);
+    const empty = message.content === "";
+    return (_jsxs("article", { "aria-label": t.messageFrom(speaker), "aria-busy": message.streaming || undefined, "data-slot": "message-bubble", "data-role": message.role, className: cn("flex min-w-0 flex-col gap-1", ROLE_CLASS[message.role], className), children: [(message.role !== "user" || meta) && (_jsxs("header", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [message.role !== "user" && _jsx("span", { className: "font-medium", children: speaker }), meta && _jsx("span", { className: "ml-auto flex items-center gap-2", children: meta })] })), message.streaming && empty ? (_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(StatusDot, { tone: "info", pulse: true }), t.thinking] })) : (_jsxs("div", { className: "min-w-0 text-sm [overflow-wrap:anywhere]", children: [renderContent ? (renderContent(message.content, message)) : (_jsx("p", { className: "whitespace-pre-wrap", children: message.content })), message.streaming && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-4 w-1.5 translate-y-0.5 bg-foreground/60 motion-safe:animate-pulse" }), _jsx("span", { className: "sr-only", children: t.writing })] }))] }))] }));
+}

package/dist/chat/MessageList.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { type ChatContentRenderer } from "./MessageBubble.js";
+import type { ChatToolCall, ChatView } from "./model.js";
+import { type ToolCallCardProps } from "./ToolCallCard.js";
+export interface MessageListProps {
+    /** The conversation: a `ChatView`, or the part of one the list reads. */
+    view: Pick<ChatView, "messages" | "toolCalls" | "timeline" | "status" | "error">;
+    renderContent?: ChatContentRenderer;
+    /**
+     * Draws a tool call the host has its own component for; return undefined
+     * for the default `ToolCallCard`.
+     */
+    renderToolCall?: (call: ChatToolCall) => React.ReactNode;
+    /** The tool's name for people, per call. */
+    toolTitle?: (call: ChatToolCall) => string | undefined;
+    onApprove?: ToolCallCardProps["onApprove"];
+    onDeny?: ToolCallCardProps["onDeny"];
+    /** Offered beside a failed run's error. */
+    onRetry?: () => void;
+    /** The first page of history is loading. */
+    loading?: boolean;
+    /** Replaces the default empty state. */
+    empty?: React.ReactNode;
+    /** Names the list. Defaults to "Conversation". */
+    label?: string;
+    className?: string;
+}
+/**
+ * The conversation in arrival order: message bubbles with tool call cards
+ * between them, a failed run's error at the end. It follows the stream while
+ * the person is at the bottom and stops following when they scroll up, with
+ * a button back to the latest. Each bubble re-renders only when its message
+ * changes, so a long conversation streams without virtualization; a host
+ * with thousands of turns pages its history.
+ */
+export declare function MessageList({ view, renderContent, renderToolCall, toolTitle, onApprove, onDeny, onRetry, loading, empty, label, className, }: MessageListProps): React.JSX.Element;

package/dist/chat/MessageList.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { EmptyState } from "../states/EmptyState.js";
+import { LoadingState } from "../states/LoadingState.js";
+import { MessageBubble } from "./MessageBubble.js";
+import { ToolCallCard } from "./ToolCallCard.js";
+const MemoBubble = React.memo(MessageBubble);
+const MemoToolCall = React.memo(ToolCallCard);
+/** How close to the end, in pixels, still counts as reading the latest. */
+const PINNED = 48;
+/**
+ * The conversation in arrival order: message bubbles with tool call cards
+ * between them, a failed run's error at the end. It follows the stream while
+ * the person is at the bottom and stops following when they scroll up, with
+ * a button back to the latest. Each bubble re-renders only when its message
+ * changes, so a long conversation streams without virtualization; a host
+ * with thousands of turns pages its history.
+ */
+export function MessageList({ view, renderContent, renderToolCall, toolTitle, onApprove, onDeny, onRetry, loading = false, empty, label, className, }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    const scroller = React.useRef(null);
+    const [pinned, setPinned] = React.useState(true);
+    const byId = React.useMemo(() => ({
+        messages: new Map(view.messages.map((m) => [m.id, m])),
+        calls: new Map(view.toolCalls.map((c) => [c.id, c])),
+    }), [view.messages, view.toolCalls]);
+    React.useLayoutEffect(() => {
+        const el = scroller.current;
+        if (pinned && el)
+            el.scrollTop = el.scrollHeight;
+    }, [pinned, byId, view.error]);
+    const jump = () => {
+        const el = scroller.current;
+        if (el)
+            el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+        setPinned(true);
+    };
+    let body;
+    if (loading)
+        body = _jsx(LoadingState, { variant: "rows", rows: 3 });
+    else if (view.timeline.length === 0 && !view.error)
+        body = empty ?? _jsx(EmptyState, { title: t.empty, description: t.emptyDescription });
+    else
+        body = (_jsxs(_Fragment, { children: [view.timeline.map((item) => {
+                    if (item.kind === "message") {
+                        const message = byId.messages.get(item.id);
+                        return message ? (_jsx(MemoBubble, { message: message, renderContent: renderContent }, `m:${item.id}`)) : null;
+                    }
+                    const call = byId.calls.get(item.id);
+                    if (!call)
+                        return null;
+                    const custom = renderToolCall?.(call);
+                    return custom !== undefined ? (_jsx(React.Fragment, { children: custom }, `t:${item.id}`)) : (_jsx(MemoToolCall, { call: call, title: toolTitle?.(call), onApprove: onApprove, onDeny: onDeny }, `t:${item.id}`));
+                }), view.status === "error" && view.error && (_jsxs("div", { role: "alert", className: "flex min-w-0 flex-col gap-2 rounded-lg border border-danger-border bg-danger-bg px-3 py-2 text-sm text-danger-fg sm:flex-row sm:items-center", children: [_jsxs("p", { className: "min-w-0 flex-1 [overflow-wrap:anywhere]", children: [_jsx("span", { className: "font-medium", children: t.runFailed }), ": ", view.error.message] }), onRetry && (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: t.retry }))] }))] }));
+    return (_jsxs("div", { "data-slot": "message-list", className: cn("relative flex min-h-0 flex-col", className), children: [_jsx("div", { ref: scroller, role: "log", "aria-label": label ?? t.conversation, "aria-busy": view.status === "running" || loading || undefined, 
+                // A scrolling region is reached by keyboard (WCAG 2.1.1).
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, onScroll: (event) => {
+                    const el = event.currentTarget;
+                    setPinned(el.scrollHeight - el.scrollTop - el.clientHeight < PINNED);
+                }, className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: body }), !pinned && (_jsxs(Button, { variant: "outline", size: "sm", onClick: jump, className: "absolute bottom-3 left-1/2 -translate-x-1/2 shadow-md", children: [_jsx(ArrowDownIcon, { "aria-hidden": true }), t.jumpToLatest] }))] }));
+}

package/dist/chat/ModelPicker.d.ts

@@ -0,0 +1,17 @@
+import { type SelectOption } from "../primitives/Select.js";
+export interface ModelPickerProps {
+    /** The models this host offers, in its words. The package names none. */
+    options: readonly SelectOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    /** Names the picker. Defaults to "Model". */
+    label?: string;
+    className?: string;
+}
+/**
+ * The model for the next turn, from the options the host passes: which
+ * models exist, which the person may use and what each costs are the host's.
+ * Small enough for a composer's actions.
+ */
+export declare function ModelPicker({ options, value, onValueChange, disabled, label, className, }: ModelPickerProps): import("react").JSX.Element;

package/dist/chat/ModelPicker.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUI } from "../provider/UIProvider.js";
+import { Select } from "../primitives/Select.js";
+/**
+ * The model for the next turn, from the options the host passes: which
+ * models exist, which the person may use and what each costs are the host's.
+ * Small enough for a composer's actions.
+ */
+export function ModelPicker({ options, value, onValueChange, disabled, label, className, }) {
+    const { messages } = useUI();
+    return (_jsx(Select, { options: options, value: value, onValueChange: onValueChange, disabled: disabled, "aria-label": label ?? messages.chat.model, size: "sm", className: className }));
+}

package/dist/chat/ToolCallCard.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type ChatToolCall } from "./model.js";
+export interface ToolCallCardProps {
+    call: ChatToolCall;
+    /** The tool's name for people ("Run SQL"). Defaults to the call's name. */
+    title?: string;
+    /** Draws the result: a table, a chart. Defaults to the result as text, pretty-printed when it is JSON. */
+    renderResult?: (call: ChatToolCall) => React.ReactNode;
+    /** Whether the details start open. A call waiting for approval always starts open. */
+    defaultOpen?: boolean;
+    /**
+     * Approves a call the run paused on, after the confirm step. Awaited; see
+     * ConfirmDialog. The host resumes the run (AG-UI `resume`); the card only
+     * reports the decision.
+     */
+    onApprove?: (call: ChatToolCall) => Promise<unknown> | unknown;
+    /** Denies it, after the confirm step, with the reason the person gave. */
+    onDeny?: (call: ChatToolCall, reason: string) => Promise<unknown> | unknown;
+    className?: string;
+}
+/**
+ * One tool call: its name and status, its arguments as they stream and its
+ * result or error behind a disclosure, and, when the run paused on it,
+ * approve and deny through the library's confirm flow (a denial always with
+ * a reason). Host-driven: it never runs or resumes anything.
+ */
+export declare function ToolCallCard({ call, title, renderResult, defaultOpen, onApprove, onDeny, className, }: ToolCallCardProps): React.JSX.Element;

package/dist/chat/ToolCallCard.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, WrenchIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { ConfirmDialog } from "../overlays/ConfirmDialog.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusBadge } from "../status/StatusBadge.js";
+import { parseToolCallArgs } from "./model.js";
+const TONE = {
+    streaming: "info",
+    running: "info",
+    complete: "ok",
+    failed: "error",
+    cancelled: "muted",
+    approval: "warn",
+};
+/** JSON text shown indented when it parses, as it came otherwise. */
+const pretty = (text) => {
+    const value = parseToolCallArgs(text);
+    return value === undefined ? text : JSON.stringify(value, null, 2);
+};
+/**
+ * One tool call: its name and status, its arguments as they stream and its
+ * result or error behind a disclosure, and, when the run paused on it,
+ * approve and deny through the library's confirm flow (a denial always with
+ * a reason). Host-driven: it never runs or resumes anything.
+ */
+export function ToolCallCard({ call, title, renderResult, defaultOpen = false, onApprove, onDeny, className, }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    const id = React.useId();
+    const name = title ?? call.name;
+    const waiting = call.approval !== undefined;
+    const [open, setOpen] = React.useState(defaultOpen || waiting);
+    const [confirming, setConfirming] = React.useState(null);
+    // A call that comes to wait for approval opens, so the person sees what they approve.
+    const [wasWaiting, setWasWaiting] = React.useState(waiting);
+    if (waiting !== wasWaiting) {
+        setWasWaiting(waiting);
+        if (waiting)
+            setOpen(true);
+    }
+    const status = waiting ? "approval" : call.status;
+    const detailsId = `${id}-details`;
+    return (_jsxs("section", { "aria-label": t.toolCall(name), "data-slot": "tool-call-card", "data-status": status, className: cn("flex min-w-0 flex-col rounded-lg border bg-card text-sm", className), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 px-3 py-2", children: [_jsx(WrenchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": detailsId, onClick: () => setOpen((o) => !o), className: "inline-flex min-w-0 items-center gap-1 rounded-sm text-left outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(ChevronRightIcon, { "aria-hidden": true, className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") }), _jsx("span", { className: "font-mono text-xs font-medium [overflow-wrap:anywhere]", children: name }), " ", _jsx("span", { className: "sr-only", children: t.details })] }), _jsx(StatusBadge, { tone: TONE[status], pulse: status === "streaming" || status === "running", className: "ml-auto", children: t.toolStatus(status) })] }), open && (_jsxs("div", { id: detailsId, className: "flex min-w-0 flex-col gap-2 border-t px-3 py-2", children: [_jsx(Block, { label: t.arguments, children: call.args ? pretty(call.args) : t.noArguments }), call.error !== undefined && (_jsx(Block, { label: t.toolError, tone: "error", children: call.error })), call.result !== undefined &&
+                        (renderResult ? (_jsx("div", { className: "min-w-0", children: renderResult(call) })) : (_jsx(Block, { label: t.result, children: pretty(call.result) })))] })), waiting && (onApprove || onDeny) && (_jsxs("div", { className: "flex min-w-0 flex-col gap-2 border-t px-3 py-2 sm:flex-row sm:items-center", children: [_jsx("p", { className: "min-w-0 flex-1 [overflow-wrap:anywhere]", children: call.approval?.message ?? t.approvalNeeded }), _jsxs("div", { className: "flex gap-2", children: [onDeny && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setConfirming("deny"), children: t.deny })), onApprove && (_jsx(Button, { size: "sm", onClick: () => setConfirming("approve"), children: t.approve }))] })] })), _jsx(ConfirmDialog, { open: confirming === "approve", onOpenChange: (next) => !next && setConfirming(null), title: t.approveTitle(name), description: call.approval?.message ?? t.approveDescription, confirmLabel: t.approve, onConfirm: () => onApprove?.(call) }), _jsx(ConfirmDialog, { open: confirming === "deny", onOpenChange: (next) => !next && setConfirming(null), title: t.denyTitle(name), description: t.denyDescription, confirmLabel: t.deny, destructive: true, reason: { label: t.denyReason }, onConfirm: (reason) => onDeny?.(call, reason) })] }));
+}
+function Block({ label, tone, children, }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("p", { className: "font-mono text-2xs font-medium tracking-wider text-muted-foreground uppercase", children: label }), _jsx("pre", { role: "region", "aria-label": label, tabIndex: 0, className: cn("max-h-64 min-w-0 overflow-auto rounded-md bg-muted p-2 font-mono text-xs [overflow-wrap:anywhere] whitespace-pre-wrap outline-none focus-visible:ring-2 focus-visible:ring-ring", tone === "error" && "bg-danger-bg text-danger-fg"), children: children })] }));
+}