veryfront 0.1.997 → 0.1.999

package/esm/src/react/components/chat/agent-card.js

@@ -1,67 +1,161 @@
+/**
+ * AgentCard — a running agent rendered as a `Card` wrapping the `Message`
+ * anatomy: a header row (agent Avatar + name on the left, `<Status>` on the
+ * right) over the agent's reasoning, tool calls, and message text. Composed
+ * entirely from the shared primitives — `Card`, `Avatar`, `Status`,
+ * `Reasoning`, `ToolCall`, `Markdown` — so it reads like a `Message` inside a
+ * card (mirrors Studio's agent/message anatomy).
+ *
+ * @module react/components/chat/agent-card
+ */
+// ---------------------------------------------------------------------------
+// AgentCard — compound, render-or-compose (mirrors `ToolCall` / `Message`).
+//
+// `<AgentCard {...props} />` renders the default anatomy: `Header` (avatar +
+// name + status) over `Reasoning`, `Tools`, and `Body` (the message text).
+// Pass children to recompose from `AgentCard.Header`, `AgentCard.Reasoning`,
+// `AgentCard.Tools`, `AgentCard.Body` — each reads `useAgentCard()`. Every
+// sub-part takes `className`, merged LAST via `cn`. The preset `<AgentCard>`
+// stays fully back-compatible.
+// ---------------------------------------------------------------------------
 import * as React from "../../../../react/react.js";
-import { AgentContainer, AgentStatus as AgentStatusPrimitive, ThinkingIndicator, ToolInvocation, ToolResult, } from "../../primitives/index.js";
-import { cn, defaultAgentTheme, mergeThemes } from "./theme.js";
-/** Render agent card. */
-export const AgentCard = React.forwardRef(({ messages, toolCalls = [], status, thinking, className, theme: userTheme, renderTool, }, ref) => {
-    const theme = mergeThemes(defaultAgentTheme, userTheme);
-    const toolRenderer = renderTool ??
-        ((tool) => (React.createElement(ToolInvocation, { name: tool.name, input: tool.args, className: theme.tool },
-            tool.result !== undefined
-                ? React.createElement(ToolResult, { output: tool.result, className: theme.toolResult })
-                : null,
-            tool.error
-                ? (React.createElement("div", { className: "mt-2 p-3 bg-red-50 text-red-900 rounded-xl text-sm border border-red-200" },
-                    "Error: ",
-                    tool.error))
-                : null)));
-    const hasToolCalls = toolCalls.length > 0;
-    const hasMessages = (messages?.length ?? 0) > 0;
-    return (React.createElement(AgentContainer, { ref: ref, className: cn(theme.container, className) },
-        React.createElement(AgentStatusPrimitive, { status: status, className: cn(theme.status, getStatusColor(status)) }),
-        thinking
-            ? (React.createElement(ThinkingIndicator, { className: theme.thinking },
-                React.createElement("span", { className: "font-semibold" }, "Thinking:"),
-                thinking))
-            : null,
-        hasToolCalls
-            ? (React.createElement("div", { className: "space-y-3" },
-                React.createElement("h3", { className: "text-sm font-semibold text-[var(--card-foreground)]" }, "Tool Calls"),
-                React.createElement("div", { className: "space-y-3" }, toolCalls.map((tool) => (React.createElement(React.Fragment, { key: tool.id }, toolRenderer(tool)))))))
-            : null,
-        hasMessages
-            ? (React.createElement("div", { className: "space-y-3" },
-                React.createElement("h3", { className: "text-sm font-semibold text-[var(--card-foreground)]" }, "Messages"),
-                React.createElement("div", { className: "space-y-2 max-h-96 overflow-y-auto" }, messages?.map((msg) => {
-                    const text = msg.parts
-                        ?.filter((p) => p.type === "text")
-                        .map((p) => p.text)
-                        .join("") ?? "";
-                    return (React.createElement("div", { key: msg.id, className: "text-sm p-3 rounded-xl bg-[var(--accent)]" },
-                        React.createElement("span", { className: "font-semibold capitalize text-[var(--foreground)]" },
-                            msg.role,
-                            ":"),
-                        React.createElement("span", { className: "text-[var(--card-foreground)] ml-1" },
-                            text.substring(0, 200),
-                            text.length > 200 ? "..." : "")));
-                }))))
-            : null));
-});
-AgentCard.displayName = "AgentCard";
-function getStatusColor(status) {
+import { COMPONENT_ERROR } from "../../../errors/error-registry.js";
+import { cn } from "./theme.js";
+import { Avatar } from "./ui/avatar.js";
+import { Card } from "./ui/card.js";
+import { Status } from "./ui/status.js";
+import { Markdown } from "./markdown.js";
+import { ReasoningCard } from "./chat/components/reasoning.js";
+import { ToolCallCard } from "./chat/components/tool-ui.js";
+/** Map the agent status to a `Status` dot colour, label, and pulse. */
+function statusPresentation(status) {
     switch (status) {
-        case "idle":
-            return "bg-[var(--accent)] text-[var(--card-foreground)]";
         case "thinking":
-            return "bg-blue-100 text-blue-700";
+            return { color: "blue", label: "Thinking", pulse: true };
         case "tool_execution":
-            return "bg-violet-100 text-violet-700";
+            return { color: "yellow", label: "Running tools", pulse: true };
         case "streaming":
-            return "bg-green-100 text-green-700";
+            return { color: "green", label: "Responding", pulse: true };
         case "completed":
-            return "bg-emerald-100 text-emerald-700";
+            return { color: "green", label: "Completed", pulse: false };
         case "error":
-            return "bg-red-100 text-red-700";
+            return { color: "red", label: "Error", pulse: false };
+        case "idle":
         default:
-            return "bg-[var(--accent)] text-[var(--card-foreground)]";
+            return { color: "gray", label: "Idle", pulse: false };
+    }
+}
+const TOOL_STATE = {
+    pending: "input-available",
+    executing: "input-streaming",
+    completed: "output-available",
+    error: "output-error",
+};
+/** Adapt an agent `ToolCall` to the `ToolCall` card's `ChatToolPart` shape. */
+function toToolPart(tool) {
+    return {
+        type: `tool-${tool.name}`,
+        toolCallId: tool.id,
+        toolName: tool.name,
+        state: TOOL_STATE[tool.status],
+        input: tool.args,
+        output: tool.result,
+        errorText: tool.error,
+    };
+}
+/** Extract plain text from an agent message's parts. */
+function messageText(message) {
+    return message.parts
+        ?.filter((p) => p.type === "text")
+        .map((p) => p.text)
+        .join("") ?? "";
+}
+const AgentCardContext = React.createContext(null);
+/** Read the enclosing `AgentCard` state. Throws when used outside an `AgentCard`. */
+export function useAgentCard() {
+    const ctx = React.useContext(AgentCardContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useAgentCard must be used within an AgentCard",
+        });
     }
+    return ctx;
 }
+/**
+ * `AgentCard.Root` — context provider + the `Card` wrapper. No children renders
+ * the default anatomy (`Header` + `Reasoning` + `Tools` + `Body`); pass children
+ * to recompose.
+ */
+const AgentCardRoot = React.forwardRef(function AgentCard({ name = "Agent", avatarUrl, messages, toolCalls = [], status, thinking, className, renderTool, children, }, ref) {
+    const presentation = statusPresentation(status);
+    const context = {
+        name,
+        avatarUrl,
+        messages,
+        toolCalls,
+        status,
+        thinking,
+        renderTool,
+        presentation,
+    };
+    return (React.createElement(AgentCardContext.Provider, { value: context },
+        React.createElement(Card, { ref: ref, surface: "outline", padding: "md", className: cn("flex flex-col gap-3", className) }, children ?? (React.createElement(React.Fragment, null,
+            React.createElement(AgentCardHeader, null),
+            React.createElement(AgentCardReasoning, null),
+            React.createElement(AgentCardTools, null),
+            React.createElement(AgentCardBody, null))))));
+});
+AgentCardRoot.displayName = "AgentCard.Root";
+/**
+ * The header row: Avatar + name (left), Status (right). Mirrors
+ * `ChatMessageHeader` / `Message.Header`.
+ */
+function AgentCardHeader({ className }) {
+    const { name, avatarUrl, presentation } = useAgentCard();
+    return (React.createElement("div", { className: cn("flex items-center gap-2", className) },
+        React.createElement(Avatar, { name: name, avatarSrc: avatarUrl, className: "size-8" }),
+        React.createElement("span", { className: "min-w-0 truncate font-medium text-[var(--foreground)]" }, name),
+        React.createElement(Status, { className: "ml-auto", color: presentation.color, label: presentation.label, pulse: presentation.pulse })));
+}
+AgentCardHeader.displayName = "AgentCard.Header";
+/** The reasoning block. Renders only when `thinking` text is present. */
+function AgentCardReasoning({ className }) {
+    const { thinking } = useAgentCard();
+    if (!thinking)
+        return null;
+    return React.createElement(ReasoningCard, { text: thinking, className: className });
+}
+AgentCardReasoning.displayName = "AgentCard.Reasoning";
+/** The tool-call list. Renders one `ToolCall` card per entry, or `renderTool`. */
+function AgentCardTools({ className }) {
+    const { toolCalls, renderTool } = useAgentCard();
+    if (toolCalls.length === 0)
+        return null;
+    return (React.createElement("div", { className: cn("flex flex-col gap-2", className) }, toolCalls.map((tool) => (React.createElement(React.Fragment, { key: tool.id }, renderTool ? renderTool(tool) : React.createElement(ToolCallCard, { tool: toToolPart(tool) }))))));
+}
+AgentCardTools.displayName = "AgentCard.Tools";
+/** The message body — each message's text rendered as `Markdown`. */
+function AgentCardBody({ className }) {
+    const { messages } = useAgentCard();
+    if (!messages || messages.length === 0)
+        return null;
+    return (React.createElement("div", { className: cn("flex flex-col gap-2", className) }, messages.map((message) => {
+        const text = messageText(message);
+        if (!text)
+            return null;
+        return (React.createElement(Markdown, { key: message.id, className: "text-[15px] leading-7" }, text));
+    })));
+}
+AgentCardBody.displayName = "AgentCard.Body";
+/**
+ * AgentCard — render `<AgentCard {...props} />` for the default card, or compose
+ * `AgentCard.Header` / `Reasoning` / `Tools` / `Body` for a custom layout.
+ * Mirrors the `ToolCall` compound: render it, or compose it.
+ */
+export const AgentCard = Object.assign(AgentCardRoot, {
+    Root: AgentCardRoot,
+    Header: AgentCardHeader,
+    Reasoning: AgentCardReasoning,
+    Tools: AgentCardTools,
+    Body: AgentCardBody,
+});

package/esm/src/react/components/chat/agent-picker.d.ts

@@ -0,0 +1,166 @@
+/**
+ * AgentPicker — Popover + Command combobox for switching the active agent.
+ * Forked dependency-light 1:1 from Veryfront Studio's `AgentPicker`: a Pill (or
+ * input-style) trigger opens a searchable list of agent rows (Avatar + name),
+ * a Check marks the selection, and optional "Create Agent" / "Manage Agents"
+ * affordances sit at the bottom. Studio's mobile `Drawer`/`ResponsiveSwitch`
+ * branch is dropped (Studio-only deps) — the overlay always portals via our
+ * `Floating` (through `PopoverContent`) so it never clips in the iframe.
+ *
+ * Semantic Studio classes remapped to veryfront's `[var(--token)]` vocabulary;
+ * icons inherit the Command row's sizing. Composes the private chat/ui
+ * primitives (Popover, Command, Avatar) — no radix / cva / `@/` imports.
+ *
+ * @module react/components/chat/agent-picker
+ */
+import * as React from "../../../../react/react.js";
+/** A selectable agent entry. */
+export interface AgentOption {
+    /** Stable identifier — used as the selection value. */
+    id: string;
+    /** Display name (also the search keyword). */
+    name: string;
+    /** Avatar image URL; initials are shown when absent. */
+    avatarSrc?: string;
+    /** Dims the row and blocks selection. */
+    disabled?: boolean;
+}
+/** A labelled group of agents (e.g. "Connected Agents"). */
+export interface AgentPickerSection {
+    /** Omit to render an unlabelled group. */
+    label?: string;
+    agents: AgentOption[];
+}
+/**
+ * Icon overrides for {@link AgentPicker}. Each defaults to the built-in glyph.
+ */
+export interface AgentPickerIcons {
+    check?: React.ReactNode;
+    chevron?: React.ReactNode;
+    create?: React.ReactNode;
+    more?: React.ReactNode;
+}
+/** Props accepted by `<AgentPicker>`. */
+export interface AgentPickerProps {
+    /** Agents shown in the default (top) group. */
+    agents: AgentOption[];
+    /** Selected agent id. */
+    value?: string;
+    /** Called with the chosen agent id. */
+    onValueChange?: (id: string) => void;
+    /** Extra labelled groups rendered below the default group. */
+    sections?: AgentPickerSection[];
+    /** Shows a "Manage Agents" row at the bottom when provided. */
+    onManage?: () => void;
+    /** Shows a "Create Agent" row at the bottom when provided. */
+    onCreate?: () => void;
+    /** Notified whenever the popover opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Render the trigger as an input-style field instead of a pill. */
+    inputStyle?: boolean;
+    /** Mark the input-style trigger invalid. */
+    invalid?: boolean;
+    /** Show skeleton rows while agents are being fetched. */
+    isLoading?: boolean;
+    /** Additional class names for the trigger. */
+    className?: string;
+    /** Override any of the picker icons. */
+    icons?: AgentPickerIcons;
+    /**
+     * Compose your own menu from `AgentPicker.Trigger` / `Content` / `List` /
+     * `Item`. When omitted, the default data-driven preset is rendered.
+     */
+    children?: React.ReactNode;
+}
+/** Shared selection + open state exposed to `AgentPicker.*` sub-parts. */
+export interface AgentPickerContextValue {
+    /** Selected agent id. */
+    value?: string;
+    /** Select an agent by id (also closes the menu). */
+    onSelect: (id: string) => void;
+    /** Popover open state. */
+    open: boolean;
+    /** Set the popover open state (notifies `onOpenChange`). */
+    setOpen: (open: boolean) => void;
+    /** Icon overrides passed to the picker. */
+    icons?: AgentPickerIcons;
+}
+/**
+ * Read the enclosing `AgentPicker` selection + open state. Throws when used
+ * outside an `<AgentPicker>`.
+ */
+export declare function useAgentPicker(): AgentPickerContextValue;
+/** Props for `AgentPicker.Trigger` — the pill/input combobox button. */
+export interface AgentPickerTriggerProps {
+    /** Render as an input-style field instead of a pill. */
+    inputStyle?: boolean;
+    /** Mark the input-style trigger invalid. */
+    invalid?: boolean;
+    /** Override the trigger contents; defaults to the selected agent's row. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/** The pill (or input-style) combobox trigger. Toggles the popover. */
+declare function AgentPickerTrigger({ inputStyle, invalid, children, className }: AgentPickerTriggerProps): React.ReactElement;
+declare namespace AgentPickerTrigger {
+    var displayName: string;
+}
+/** Props for `AgentPicker.Content` — the popover surface + `Command` shell. */
+export interface AgentPickerContentProps {
+    /** Show the search input above the list. */
+    showSearch?: boolean;
+    /** Search input placeholder. */
+    searchPlaceholder?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/** The popover surface wrapping a `Command` (search + list region). */
+declare function AgentPickerContent({ showSearch, searchPlaceholder, children, className, }: AgentPickerContentProps): React.ReactElement;
+declare namespace AgentPickerContent {
+    var displayName: string;
+}
+/** The scrollable `Command` list region. */
+declare function AgentPickerList({ children, className }: {
+    children?: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+declare namespace AgentPickerList {
+    var displayName: string;
+}
+/** Props for `AgentPicker.Item` — a single selectable agent row. */
+export interface AgentPickerItemProps {
+    /** The agent this row represents. Its `id` is the selection value. */
+    agent: AgentOption;
+    /** Force selected styling; defaults to matching the context `value`. */
+    selected?: boolean;
+    className?: string;
+}
+/** A single agent row (Avatar + name + selection check). */
+declare function AgentPickerItem({ agent, selected, className }: AgentPickerItemProps): React.ReactElement;
+declare namespace AgentPickerItem {
+    var displayName: string;
+}
+/**
+ * `AgentPicker.Root` — context provider + the popover shell. No children
+ * renders the default data-driven preset; pass children to recompose from
+ * `AgentPicker.Trigger` / `Content` / `List` / `Item`.
+ */
+declare function AgentPickerRoot({ agents, value, onValueChange, sections, onManage, onCreate, onOpenChange, inputStyle, invalid, isLoading, className, icons, children, }: AgentPickerProps): React.ReactElement;
+declare namespace AgentPickerRoot {
+    var displayName: string;
+}
+/**
+ * AgentPicker — render `<AgentPicker agents={...} .../>` for the default
+ * data-driven combobox, or compose `AgentPicker.Trigger` / `Content` / `List` /
+ * `Item` for a custom menu. Mirrors the `ToolCall` compound: render it, or
+ * compose it.
+ */
+export declare const AgentPicker: typeof AgentPickerRoot & {
+    Root: typeof AgentPickerRoot;
+    Trigger: typeof AgentPickerTrigger;
+    Content: typeof AgentPickerContent;
+    List: typeof AgentPickerList;
+    Item: typeof AgentPickerItem;
+};
+export {};
+//# sourceMappingURL=agent-picker.d.ts.map

package/esm/src/react/components/chat/agent-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-picker.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/chat/agent-picker.tsx"],"names":[],"mappings":"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"}

package/esm/src/react/components/chat/agent-picker.js

@@ -0,0 +1,183 @@
+/**
+ * AgentPicker — Popover + Command combobox for switching the active agent.
+ * Forked dependency-light 1:1 from Veryfront Studio's `AgentPicker`: a Pill (or
+ * input-style) trigger opens a searchable list of agent rows (Avatar + name),
+ * a Check marks the selection, and optional "Create Agent" / "Manage Agents"
+ * affordances sit at the bottom. Studio's mobile `Drawer`/`ResponsiveSwitch`
+ * branch is dropped (Studio-only deps) — the overlay always portals via our
+ * `Floating` (through `PopoverContent`) so it never clips in the iframe.
+ *
+ * Semantic Studio classes remapped to veryfront's `[var(--token)]` vocabulary;
+ * icons inherit the Command row's sizing. Composes the private chat/ui
+ * primitives (Popover, Command, Avatar) — no radix / cva / `@/` imports.
+ *
+ * @module react/components/chat/agent-picker
+ */
+import * as React from "../../../../react/react.js";
+import { cn } from "./theme.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { Pill } from "./ui/pill.js";
+import { Avatar } from "./ui/avatar.js";
+import { CheckIcon, ChevronDownIcon, PlusIcon, SparklesIcon } from "./icons/index.js";
+import { COMPONENT_ERROR } from "../../../errors/error-registry.js";
+/** Search box appears once the combined agent count crosses this. */
+const SEARCH_THRESHOLD = 5;
+const LOADING_ROW_WIDTHS = ["w-3/5", "w-3/4", "w-2/3"];
+function totalAgentCount(agents, sections) {
+    return agents.length +
+        sections.reduce((acc, section) => acc + section.agents.length, 0);
+}
+function findAgent(id, agents, sections) {
+    if (id === undefined)
+        return undefined;
+    const top = agents.find((agent) => agent.id === id);
+    if (top)
+        return top;
+    for (const section of sections) {
+        const hit = section.agents.find((agent) => agent.id === id);
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+function AgentPickerLoadingRows() {
+    return (React.createElement("output", { "aria-label": "Loading agents", className: "block px-1 py-1" },
+        React.createElement("span", { className: "sr-only" }, "Loading agents"),
+        LOADING_ROW_WIDTHS.map((widthClass, index) => (React.createElement("div", { key: `${index}-${widthClass}`, "aria-hidden": "true", className: "flex items-center gap-3 px-3 py-2" },
+            React.createElement("div", { className: "size-5 shrink-0 rounded-full bg-[var(--accent)] animate-pulse" }),
+            React.createElement("div", { className: cn("h-3 rounded-md bg-[var(--accent)] animate-pulse", widthClass) }))))));
+}
+const AgentPickerContext = React.createContext(null);
+/**
+ * Read the enclosing `AgentPicker` selection + open state. Throws when used
+ * outside an `<AgentPicker>`.
+ */
+export function useAgentPicker() {
+    const ctx = React.useContext(AgentPickerContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useAgentPicker must be used within a AgentPicker",
+        });
+    }
+    return ctx;
+}
+/** The pill (or input-style) combobox trigger. Toggles the popover. */
+function AgentPickerTrigger({ inputStyle = false, invalid = false, children, className }) {
+    const { value, icons } = useAgentPicker();
+    const sections = React.useContext(AgentDataContext);
+    const selected = sections ? findAgent(value, sections.agents, sections.sections) : undefined;
+    const triggerLabel = selected?.name ?? "Select agent";
+    const content = children ?? (React.createElement(React.Fragment, null,
+        selected && (React.createElement(Avatar, { name: selected.name, avatarSrc: selected.avatarSrc, tone: "muted", "aria-hidden": "true", className: "size-5! bg-[var(--background)]" })),
+        React.createElement("span", { className: "min-w-0 truncate" }, triggerLabel),
+        inputStyle
+            ? (icons?.chevron ??
+                React.createElement(ChevronDownIcon, { className: "ml-auto size-3.5 opacity-50" }))
+            : (icons?.chevron ?? React.createElement(ChevronDownIcon, { className: "ml-auto" }))));
+    const trigger = inputStyle
+        ? (React.createElement("button", { type: "button", "data-invalid": invalid || undefined, className: cn("flex w-full items-center gap-2.5 rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] h-[50px] px-3 text-base text-[var(--foreground)]", "data-[invalid=true]:border-[var(--status-error)]", className) }, content))
+        : (React.createElement(Pill, { className: cn("min-w-0 max-w-full", className) }, content));
+    return React.createElement(PopoverTrigger, { asChild: true }, trigger);
+}
+AgentPickerTrigger.displayName = "AgentPicker.Trigger";
+/** The popover surface wrapping a `Command` (search + list region). */
+function AgentPickerContent({ showSearch = false, searchPlaceholder = "Search agents...", children, className, }) {
+    return (React.createElement(PopoverContent, { align: "start", className: cn("min-w-[280px] p-0! rounded-lg", className) },
+        React.createElement(Command, { className: "bg-transparent" },
+            showSearch && React.createElement(CommandInput, { placeholder: searchPlaceholder }),
+            children)));
+}
+AgentPickerContent.displayName = "AgentPicker.Content";
+/** The scrollable `Command` list region. */
+function AgentPickerList({ children, className }) {
+    return (React.createElement(CommandList, { className: cn("max-h-[320px]", className) }, children));
+}
+AgentPickerList.displayName = "AgentPicker.List";
+/** A single agent row (Avatar + name + selection check). */
+function AgentPickerItem({ agent, selected, className }) {
+    const { value, onSelect, icons } = useAgentPicker();
+    const isSelected = selected ?? agent.id === value;
+    return (React.createElement(CommandItem, { value: agent.name, disabled: agent.disabled, onSelect: () => onSelect(agent.id), className: className },
+        React.createElement(Avatar, { name: agent.name, avatarSrc: agent.avatarSrc, tone: "muted", "aria-hidden": "true", className: "size-5! bg-[var(--background)]" }),
+        React.createElement("span", { className: "min-w-0 flex-1 truncate" }, agent.name),
+        isSelected &&
+            (icons?.check ?? React.createElement(CheckIcon, { className: "ml-auto opacity-70" }))));
+}
+AgentPickerItem.displayName = "AgentPicker.Item";
+/**
+ * Data passed down so the default `Trigger` can resolve the selected label from
+ * the preset `agents` / `sections`. Only populated on the preset (childless)
+ * path; a fully-composed tree supplies its own trigger contents.
+ */
+const AgentDataContext = React.createContext(null);
+/** The default preset body — the data-driven groups + action rows. */
+function AgentPickerPresetBody({ agents, value, sections, onManage, onCreate, isLoading, icons, }) {
+    const hasSectionAgents = sections.some((section) => section.agents.length > 0);
+    const showLoading = isLoading && !hasSectionAgents;
+    return (React.createElement(React.Fragment, null,
+        !showLoading && React.createElement(CommandEmpty, null, "No agents found."),
+        agents.length > 0 && (React.createElement(CommandGroup, null, agents.map((agent) => (React.createElement(AgentPickerItem, { key: agent.id, agent: agent, selected: agent.id === value }))))),
+        showLoading && React.createElement(AgentPickerLoadingRows, null),
+        sections.map((section, index) => (React.createElement(CommandGroup, { key: section.label ?? `section-${index}`, heading: section.label }, section.agents.map((agent) => (React.createElement(AgentPickerItem, { key: agent.id, agent: agent, selected: agent.id === value })))))),
+        (onCreate || onManage) && (React.createElement(CommandGroup, null,
+            onCreate && (React.createElement(CommandItem, { value: "Create Agent", onSelect: onCreate },
+                icons?.create ?? React.createElement(PlusIcon, null),
+                "Create Agent")),
+            onManage && (React.createElement(CommandItem, { value: "Manage Agents", onSelect: onManage },
+                icons?.more ?? React.createElement(SparklesIcon, null),
+                "Manage Agents"))))));
+}
+/**
+ * `AgentPicker.Root` — context provider + the popover shell. No children
+ * renders the default data-driven preset; pass children to recompose from
+ * `AgentPicker.Trigger` / `Content` / `List` / `Item`.
+ */
+function AgentPickerRoot({ agents, value, onValueChange, sections = [], onManage, onCreate, onOpenChange, inputStyle = false, invalid = false, isLoading = false, className, icons, children, }) {
+    const [open, setOpen] = React.useState(false);
+    const showSearch = totalAgentCount(agents, sections) > SEARCH_THRESHOLD;
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        setOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange]);
+    const handleSelect = React.useCallback((id) => {
+        handleOpenChange(false);
+        onValueChange?.(id);
+    }, [handleOpenChange, onValueChange]);
+    const handleManage = () => {
+        handleOpenChange(false);
+        onManage?.();
+    };
+    const handleCreate = () => {
+        handleOpenChange(false);
+        onCreate?.();
+    };
+    const context = {
+        value,
+        onSelect: handleSelect,
+        open,
+        setOpen: handleOpenChange,
+        icons,
+    };
+    return (React.createElement(AgentPickerContext.Provider, { value: context },
+        React.createElement(AgentDataContext.Provider, { value: { agents, sections } },
+            React.createElement(Popover, { open: open, onOpenChange: handleOpenChange }, children ?? (React.createElement(React.Fragment, null,
+                React.createElement(AgentPickerTrigger, { inputStyle: inputStyle, invalid: invalid, className: className }),
+                React.createElement(AgentPickerContent, { showSearch: showSearch },
+                    React.createElement(AgentPickerList, null,
+                        React.createElement(AgentPickerPresetBody, { agents: agents, value: value, sections: sections, onManage: onManage ? handleManage : undefined, onCreate: onCreate ? handleCreate : undefined, isLoading: isLoading, icons: icons })))))))));
+}
+AgentPickerRoot.displayName = "AgentPicker.Root";
+/**
+ * AgentPicker — render `<AgentPicker agents={...} .../>` for the default
+ * data-driven combobox, or compose `AgentPicker.Trigger` / `Content` / `List` /
+ * `Item` for a custom menu. Mirrors the `ToolCall` compound: render it, or
+ * compose it.
+ */
+export const AgentPicker = Object.assign(AgentPickerRoot, {
+    Root: AgentPickerRoot,
+    Trigger: AgentPickerTrigger,
+    Content: AgentPickerContent,
+    List: AgentPickerList,
+    Item: AgentPickerItem,
+});

package/esm/src/react/components/chat/chat/components/animations.js

@@ -8,7 +8,7 @@ export function Shimmer({ children }) {
 /** Render loader. */
 export function Loader({ className, size = 16, }) {
     const dotSize = size / 4;
-    return (React.createElement("div", { className: cn("flex items-center gap-1", className) }, ["0ms", "150ms", "300ms"].map((animationDelay) => (React.createElement("span", { key: animationDelay, className: "animate-bounce rounded-full bg-[var(--muted-foreground)]", style: { width: dotSize, height: dotSize, animationDelay } })))));
+    return (React.createElement("div", { className: cn("flex items-center gap-1", className) }, ["0ms", "150ms", "300ms"].map((animationDelay) => (React.createElement("span", { key: animationDelay, className: "animate-bounce rounded-full bg-[var(--faint)]", style: { width: dotSize, height: dotSize, animationDelay } })))));
 }
 /** Render fade in. */
 export function FadeIn({ children, duration = 300, className, }) {