veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/chat/components/step-indicator.d.ts

@@ -1,10 +1,49 @@
 import * as React from "../../../../../../react/react.js";
 /** Props accepted by step indicator. */
-export interface StepIndicatorProps {
+export interface StepIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     stepIndex: number;
     isComplete: boolean;
     className?: string;
+    /** Override the complete/pending status glyph. */
+    icon?: React.ReactNode;
+    /** Compose your own divider; when omitted, the default anatomy is rendered. */
+    children?: React.ReactNode;
 }
-/** Render step indicator. */
-export declare function StepIndicator({ stepIndex, isComplete, className, }: StepIndicatorProps): React.ReactElement;
+/** Per-indicator state shared with `StepIndicator.*` sub-parts. */
+export interface StepIndicatorContextValue {
+    stepIndex: number;
+    isComplete: boolean;
+    /** Optional override for the complete/pending status glyph. */
+    icon?: React.ReactNode;
+}
+/**
+ * Read the enclosing `StepIndicator` state. Throws when used outside a
+ * `StepIndicator`.
+ */
+export declare function useStepIndicator(): StepIndicatorContextValue;
+/** `StepIndicator.Rule` — one of the flanking horizontal rules. */
+declare function StepIndicatorRule({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare namespace StepIndicatorRule {
+    var displayName: string;
+}
+/** `StepIndicator.Label` — the status glyph + `Step N` pill. */
+declare function StepIndicatorLabel({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare namespace StepIndicatorLabel {
+    var displayName: string;
+}
+/**
+ * StepIndicator — render `<StepIndicator stepIndex={…} isComplete />` for the
+ * default divider, or compose `StepIndicator.Root` + `.Rule` / `.Label` for a
+ * custom layout. Mirrors the `ToolCall` / `Sources` compounds.
+ */
+export declare const StepIndicator: React.ForwardRefExoticComponent<StepIndicatorProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<StepIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+    Rule: typeof StepIndicatorRule;
+    Label: typeof StepIndicatorLabel;
+};
+export {};
 //# sourceMappingURL=step-indicator.d.ts.map

package/esm/src/react/components/chat/chat/components/step-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/step-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAI1D,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAkBzC"}
+{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/step-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAK1D,wCAAwC;AACxC,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC/D,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAWD,mEAAmE;AACnE,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAMD;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,yBAAyB,CAQ5D;AAyCD,mEAAmE;AACnE,iBAAS,iBAAiB,CACxB,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC,KAAK,CAAC,GAAG,CAAC,OAAO,CAEnB;kBAJQ,iBAAiB;;;AAO1B,gEAAgE;AAChE,iBAAS,kBAAkB,CACzB,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC,KAAK,CAAC,GAAG,CAAC,OAAO,CAenB;kBAjBQ,kBAAkB;;;AAoB3B;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;CAIxB,CAAC"}

package/esm/src/react/components/chat/chat/components/step-indicator.js

@@ -1,16 +1,59 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 import { CheckCircleIcon } from "../../icons/index.js";
-/** Render step indicator. */
-export function StepIndicator({ stepIndex, isComplete, className, }) {
-    return (React.createElement("div", { className: cn("flex items-center gap-3 py-3 text-xs text-[var(--muted-foreground)]", className) },
-        React.createElement("div", { className: "flex-1 h-px bg-[var(--border)]" }),
-        React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-[var(--border)] bg-[var(--accent)]" },
-            isComplete
-                ? React.createElement(CheckCircleIcon, { className: "size-3.5 text-[var(--success)]" })
-                : React.createElement("span", { className: "size-2 rounded-full bg-[var(--muted-foreground)] animate-pulse" }),
-            React.createElement("span", { className: "font-medium" },
-                "Step ",
-                stepIndex + 1)),
-        React.createElement("div", { className: "flex-1 h-px bg-[var(--border)]" })));
+import { COMPONENT_ERROR } from "../../../../../errors/error-registry.js";
+const StepIndicatorContext = React.createContext(null);
+/**
+ * Read the enclosing `StepIndicator` state. Throws when used outside a
+ * `StepIndicator`.
+ */
+export function useStepIndicator() {
+    const ctx = React.useContext(StepIndicatorContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useStepIndicator must be used within a StepIndicator",
+        });
+    }
+    return ctx;
 }
+/**
+ * `StepIndicator.Root` — context provider + the flex container. No children
+ * renders the default anatomy (`Rule` + `Label` + `Rule`); pass children to
+ * recompose.
+ */
+const StepIndicatorRoot = React.forwardRef(function StepIndicator({ stepIndex, isComplete, className, icon, children, ...props }, ref) {
+    const context = { stepIndex, isComplete, icon };
+    return (React.createElement(StepIndicatorContext.Provider, { value: context },
+        React.createElement("div", { ...props, ref: ref, className: cn("flex items-center gap-3 py-3 text-xs text-[var(--faint)]", className) }, children ?? (React.createElement(React.Fragment, null,
+            React.createElement(StepIndicatorRule, null),
+            React.createElement(StepIndicatorLabel, null),
+            React.createElement(StepIndicatorRule, null))))));
+});
+StepIndicatorRoot.displayName = "StepIndicator.Root";
+/** `StepIndicator.Rule` — one of the flanking horizontal rules. */
+function StepIndicatorRule({ className }) {
+    return React.createElement("div", { className: cn("flex-1 h-px bg-[var(--edge)]", className) });
+}
+StepIndicatorRule.displayName = "StepIndicator.Rule";
+/** `StepIndicator.Label` — the status glyph + `Step N` pill. */
+function StepIndicatorLabel({ className }) {
+    const { stepIndex, isComplete, icon } = useStepIndicator();
+    return (React.createElement("div", { className: cn("flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-[var(--outline-border)] bg-transparent", className) },
+        icon ?? (isComplete
+            ? React.createElement(CheckCircleIcon, { className: "size-3.5 text-[var(--success)]" })
+            : React.createElement("span", { className: "size-2 rounded-full bg-[var(--faint)] animate-pulse" })),
+        React.createElement("span", { className: "font-medium" },
+            "Step ",
+            stepIndex + 1)));
+}
+StepIndicatorLabel.displayName = "StepIndicator.Label";
+/**
+ * StepIndicator — render `<StepIndicator stepIndex={…} isComplete />` for the
+ * default divider, or compose `StepIndicator.Root` + `.Rule` / `.Label` for a
+ * custom layout. Mirrors the `ToolCall` / `Sources` compounds.
+ */
+export const StepIndicator = Object.assign(StepIndicatorRoot, {
+    Root: StepIndicatorRoot,
+    Rule: StepIndicatorRule,
+    Label: StepIndicatorLabel,
+});

package/esm/src/react/components/chat/chat/components/tab-switcher.d.ts

@@ -7,7 +7,7 @@
  */
 import * as React from "../../../../../../react/react.js";
 /** Public API contract for chat tab. */
-export type ChatTab = "chat" | "uploads";
+export type ChatTab = "chat" | "attachments";
 /** Props accepted by tab switcher. */
 export interface TabSwitcherProps {
     activeTab: ChatTab;

package/esm/src/react/components/chat/chat/components/tab-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-switcher.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/tab-switcher.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,wCAAwC;AACxC,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzC,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,2BAA2B;AAC3B,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAwCvC"}
+{"version":3,"file":"tab-switcher.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/tab-switcher.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,wCAAwC;AACxC,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;AAE7C,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,2BAA2B;AAC3B,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAwCvC"}

package/esm/src/react/components/chat/chat/components/tab-switcher.js

@@ -9,7 +9,7 @@ import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 const TABS = [
     { value: "chat", label: "Chat" },
-    { value: "uploads", label: "Uploads" },
+    { value: "attachments", label: "Attachments" },
 ];
 /** Render tab switcher. */
 export function TabSwitcher({ activeTab, onTabChange, className, }) {
@@ -19,10 +19,10 @@ export function TabSwitcher({ activeTab, onTabChange, className, }) {
             return (React.createElement("button", { key: tab.value, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, onClick: () => onTabChange(tab.value), onKeyDown: (e) => {
                     if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
                         e.preventDefault();
-                        const next = tab.value === "chat" ? "uploads" : "chat";
+                        const next = tab.value === "chat" ? "attachments" : "chat";
                         onTabChange(next);
                     }
-                }, className: cn("inline-flex items-center h-full px-5 text-sm font-medium rounded-full transition-colors cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]", isActive
+                }, className: cn("inline-flex items-center h-full px-5 text-sm font-medium rounded-full transition-colors cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)]", isActive
                     ? "bg-[var(--tab-active-background)] text-[var(--tab-active-foreground)]"
                     : "text-[var(--tab-foreground)]") }, tab.label));
         }))));

package/esm/src/react/components/chat/chat/components/tool-ui.d.ts

@@ -5,14 +5,107 @@
 import * as React from "../../../../../../react/react.js";
 import type { ChatDynamicToolPart, ChatToolPart } from "../../../../../agent/react/index.js";
 /** Render tool status badge. */
-export declare function ToolStatusBadge({ state }: {
+export declare function ToolStatusBadge({ state, className }: {
     state: string;
+    className?: string;
 }): React.JSX.Element;
 /**
  * Tool call card component - renders tool invocations with parameters and results
  * Styled to match AI Elements (https://ai-sdk.dev/elements)
+ *
+ * Skill tools (`load_skill`, `load_skill_reference`, `execute_skill_script`)
+ * are a compact single-line variant of a tool call, so they render as the
+ * `SkillTool` row rather than the full params/result card. This keeps skills
+ * and tools under one component — callers render `<ToolCall tool={part} />` for
+ * either.
  */
-export declare function ToolCallCard({ tool, }: {
+/** Per-tool state shared with `ToolCall.*` sub-parts. */
+export interface ToolCallContextValue {
     tool: ChatToolPart | ChatDynamicToolPart;
-}): React.JSX.Element;
+    isExpanded: boolean;
+    toggle: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    hasOutput: boolean;
+    hasError: boolean;
+}
+/** Read the enclosing `ToolCall` state. Throws when used outside a `ToolCall`. */
+export declare function useToolCall(): ToolCallContextValue;
+/** Props accepted by `ToolCall` / `ToolCall.Root` (aka `ToolCallCard`). */
+export interface ToolCallProps {
+    tool: ChatToolPart | ChatDynamicToolPart;
+    className?: string;
+    /** Override the leading tool icon (card variant). */
+    icon?: React.ReactNode;
+    /**
+     * `card` (full params/result) or `compact` (single-line row). Defaults to
+     * `compact` for skill tools, `card` otherwise. This is a presentation axis —
+     * NOT a severity/type.
+     */
+    variant?: "card" | "compact";
+    /** Initial expanded state of the card (default: auto from tool state). */
+    defaultExpanded?: boolean;
+    /** Called when the card is toggled; receives the next state + event. */
+    onToggle?: (next: boolean, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Override the compact/skill row rendering. */
+    renderSkill?: (tool: ChatToolPart | ChatDynamicToolPart) => React.ReactNode;
+    /** Compose your own card; when omitted, the default anatomy is rendered. */
+    children?: React.ReactNode;
+}
+/** Props for `ToolCall.Trigger` — the header button. */
+export interface ToolCallTriggerProps {
+    /** Override the leading tool icon. */
+    icon?: React.ReactNode;
+    className?: string;
+}
+/** The header row: tool icon + name + status badge + expand chevron. */
+declare function ToolCallTrigger({ icon, className }: ToolCallTriggerProps): React.JSX.Element;
+declare namespace ToolCallTrigger {
+    var displayName: string;
+}
+/** The collapsible region below the trigger. Renders only when expanded. */
+declare function ToolCallBody({ className, children }: {
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+declare namespace ToolCallBody {
+    var displayName: string;
+}
+/** The `Parameters` block. Pass children to replace the highlighted JSON. */
+declare function ToolCallInput({ className, children }: {
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+declare namespace ToolCallInput {
+    var displayName: string;
+}
+/** The `Result` block. Pass children to replace the JSON / auto-table output. */
+declare function ToolCallOutput({ className, children }: {
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+declare namespace ToolCallOutput {
+    var displayName: string;
+}
+/** The error `Alert`. Renders only when the tool carries `errorText`. */
+declare function ToolCallError({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+declare namespace ToolCallError {
+    var displayName: string;
+}
+/**
+ * ToolCall — render `<ToolCall tool={part} />` for the default card, or compose
+ * `ToolCall.Trigger` / `Body` / `Input` / `Output` / `Error` for a custom
+ * layout. Mirrors the `Message` compound: render it, or compose it.
+ */
+export declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: typeof ToolCallTrigger;
+    Body: typeof ToolCallBody;
+    Input: typeof ToolCallInput;
+    Output: typeof ToolCallOutput;
+    Error: typeof ToolCallError;
+};
+/** Back-compat alias — `message.tsx` and others import `ToolCallCard`. */
+export declare const ToolCallCard: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=tool-ui.d.ts.map

package/esm/src/react/components/chat/chat/components/tool-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-ui.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/tool-ui.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAU1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AA4B7F,gCAAgC;AAChC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAS/E;AAkFD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,GACL,EAAE;IACD,IAAI,EAAE,YAAY,GAAG,mBAAmB,CAAC;CAC1C,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiEpB"}
+{"version":3,"file":"tool-ui.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/tool-ui.tsx"],"names":[],"mappings":"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"}

package/esm/src/react/components/chat/chat/components/tool-ui.js

@@ -5,11 +5,21 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from "../../icons/index.js";
+import { Alert, AlertContent, AlertIcon } from "../../ui/alert.js";
+import { COMPONENT_ERROR } from "../../../../../errors/error-registry.js";
 import { escapeHtml } from "../../../../../utils/html-escape.js";
+import { isSkillToolPart } from "../utils/message-parts.js";
+import { getSkillToolProps, SkillTool } from "./skill-tool.js";
 /** Tool status configuration mapping state to label and icon */
 const TOOL_STATUS_CONFIG = {
-    "input-streaming": { label: "Pending", icon: React.createElement(CircleIcon, { className: "size-3.5" }) },
-    "input-available": { label: "Running", icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }) },
+    "input-streaming": {
+        label: "Pending",
+        icon: React.createElement(CircleIcon, { className: "size-3.5" }),
+    },
+    "input-available": {
+        label: "Running",
+        icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }),
+    },
     "approval-requested": {
         label: "Awaiting Approval",
         icon: React.createElement(ClockIcon, { className: "size-3.5 text-yellow-600" }),
@@ -22,18 +32,36 @@ const TOOL_STATUS_CONFIG = {
         label: "Completed",
         icon: React.createElement(CheckCircleIcon, { className: "size-3.5 text-green-600" }),
     },
-    "output-error": { label: "Error", icon: React.createElement(XCircleIcon, { className: "size-3.5 text-red-600" }) },
-    "output-denied": { label: "Denied", icon: React.createElement(XCircleIcon, { className: "size-3.5 text-orange-600" }) },
+    "output-error": {
+        label: "Error",
+        icon: React.createElement(XCircleIcon, { className: "size-3.5 text-red-600" }),
+    },
+    "output-denied": {
+        label: "Denied",
+        icon: React.createElement(XCircleIcon, { className: "size-3.5 text-orange-600" }),
+    },
     // Legacy states
-    call: { label: "Running", icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }) },
-    "partial-call": { label: "Running", icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }) },
-    result: { label: "Completed", icon: React.createElement(CheckCircleIcon, { className: "size-3.5 text-green-600" }) },
-    error: { label: "Error", icon: React.createElement(XCircleIcon, { className: "size-3.5 text-red-600" }) },
+    call: {
+        label: "Running",
+        icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }),
+    },
+    "partial-call": {
+        label: "Running",
+        icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }),
+    },
+    result: {
+        label: "Completed",
+        icon: React.createElement(CheckCircleIcon, { className: "size-3.5 text-green-600" }),
+    },
+    error: {
+        label: "Error",
+        icon: React.createElement(XCircleIcon, { className: "size-3.5 text-red-600" }),
+    },
 };
 /** Render tool status badge. */
-export function ToolStatusBadge({ state }) {
+export function ToolStatusBadge({ state, className }) {
     const config = TOOL_STATUS_CONFIG[state];
-    return (React.createElement("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-2.5 py-0.5 text-xs font-medium text-[var(--foreground)] border border-[var(--border)]" },
+    return (React.createElement("span", { className: cn("inline-flex items-center gap-1.5 rounded-full border border-[var(--outline-border)] px-2 py-0.5 text-[11px] font-medium leading-none text-[var(--foreground)]", className) },
         config?.icon ?? React.createElement(CircleIcon, { className: "size-3.5" }),
         config?.label ?? state));
 }
@@ -52,7 +80,7 @@ function formatJsonWithHighlight(obj) {
         .replace(/: &quot;([^&]*)&quot;/g, ': <span class="text-amber-600">&quot;$1&quot;</span>')
         .replace(/: (\d+)/g, ': <span class="text-blue-600">$1</span>')
         .replace(/: (true|false)/g, ': <span class="text-purple-600">$1</span>');
-    return (React.createElement("pre", { className: "text-sm font-mono whitespace-pre-wrap", dangerouslySetInnerHTML: { __html: highlighted } }));
+    return (React.createElement("pre", { className: "whitespace-pre-wrap font-mono text-sm", dangerouslySetInnerHTML: { __html: highlighted } }));
 }
 function renderOutputAsTable(output) {
     if (!Array.isArray(output) || output.length === 0)
@@ -66,40 +94,134 @@ function renderOutputAsTable(output) {
     return (React.createElement("div", { className: "overflow-x-auto" },
         React.createElement("table", { className: "min-w-full text-sm" },
             React.createElement("thead", null,
-                React.createElement("tr", { className: "border-b border-[var(--border)]" }, keys.map((key) => (React.createElement("th", { key: key, className: "px-4 py-2 text-left font-semibold text-[var(--foreground)]" }, key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())))))),
+                React.createElement("tr", { className: "border-b border-[var(--edge)]" }, keys.map((key) => (React.createElement("th", { key: key, className: "px-4 py-2 text-left font-medium text-[var(--foreground)]" }, key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())))))),
             React.createElement("tbody", null, output.map((row, i) => {
                 const record = row;
-                return (React.createElement("tr", { key: i, className: "border-b border-[var(--border)]" }, keys.map((key) => (React.createElement("td", { key: key, className: "px-4 py-2 text-[var(--card-foreground)]" }, String(record?.[key] ?? ""))))));
+                return (React.createElement("tr", { key: i, className: "border-b border-[var(--edge)]" }, keys.map((key) => (React.createElement("td", { key: key, className: "px-4 py-2 text-[var(--foreground)]" }, String(record?.[key] ?? ""))))));
             })))));
 }
 function hasVisibleToolOutput(output) {
     return output !== undefined && output !== null;
 }
+const ToolCallContext = React.createContext(null);
+/** Read the enclosing `ToolCall` state. Throws when used outside a `ToolCall`. */
+export function useToolCall() {
+    const ctx = React.useContext(ToolCallContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useToolCall must be used within a ToolCall",
+        });
+    }
+    return ctx;
+}
 /**
- * Tool call card component - renders tool invocations with parameters and results
- * Styled to match AI Elements (https://ai-sdk.dev/elements)
+ * `ToolCall.Root` — context provider + the card wrapper. No children renders
+ * the default anatomy (`Trigger` + `Body`); pass children to recompose. Skill /
+ * compact tools short-circuit to the single-line row (not composable).
  */
-export function ToolCallCard({ tool, }) {
+const ToolCallRoot = React.forwardRef(function ToolCall({ tool, className, icon, variant, defaultExpanded, onToggle, renderSkill, children }, ref) {
     const hasOutput = hasVisibleToolOutput(tool.output);
     const hasError = Boolean(tool.errorText);
-    const shouldExpandByDefault = tool.state !== "output-available" || hasOutput || hasError;
-    const [isExpanded, setIsExpanded] = React.useState(shouldExpandByDefault);
-    const tableOutput = hasOutput ? renderOutputAsTable(tool.output) : null;
-    return (React.createElement("div", { className: "not-prose w-full rounded-xl border border-[var(--border)] bg-[var(--card)]" },
-        React.createElement("button", { type: "button", onClick: () => setIsExpanded((v) => !v), className: "group flex w-full items-center justify-between gap-4 p-3 hover:bg-[var(--accent)] transition-all rounded-t-xl" },
-            React.createElement("div", { className: "flex items-center gap-2" },
-                React.createElement(WrenchIcon, { className: "size-4 text-[var(--muted-foreground)]" }),
-                React.createElement("span", { className: "font-medium text-sm text-[var(--foreground)]" }, tool.toolName),
-                React.createElement(ToolStatusBadge, { state: tool.state })),
-            React.createElement(ChevronDownIcon, { className: cn("size-4 text-[var(--muted-foreground)] transition-transform", isExpanded && "rotate-180") })),
-        !isExpanded ? null : (React.createElement("div", { className: "border-t border-[var(--border)]" },
-            tool.input === undefined ? null : (React.createElement("div", { className: "space-y-2 overflow-hidden p-4" },
-                React.createElement("h4", { className: "font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-wide" }, "Parameters"),
-                React.createElement("div", { className: "rounded-lg bg-[var(--accent)] p-3" }, formatJsonWithHighlight(tool.input)))),
-            !hasOutput ? null : (React.createElement("div", { className: "space-y-2 p-4 border-t border-[var(--border)]" },
-                React.createElement("h4", { className: "font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-wide" }, "Result"),
-                React.createElement("div", { className: "overflow-x-auto rounded-lg bg-[var(--accent)] text-[var(--foreground)]" }, tableOutput ?? React.createElement("div", { className: "p-3" }, formatJsonWithHighlight(tool.output))))),
-            !tool.errorText ? null : (React.createElement("div", { className: "space-y-2 p-4 border-t border-[var(--border)]" },
-                React.createElement("h4", { className: "font-medium text-[var(--destructive)] text-xs uppercase tracking-wide" }, "Error"),
-                React.createElement("div", { className: "rounded-lg bg-[var(--destructive)]/10 text-[var(--destructive)] p-3 text-sm" }, tool.errorText)))))));
+    // Collapse tool cards by default. Fast server-side tools (e.g.
+    // `search_knowledge`) resolve near-instantly and otherwise stack up
+    // expanded, burying the assistant's actual reply. The trigger row still
+    // shows the tool name + status badge, and the chevron expands on demand.
+    // Errors stay open so failures aren't hidden behind a click.
+    const shouldExpandByDefault = hasError;
+    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded ?? shouldExpandByDefault);
+    // Compact row for skill tools (or when forced) — a presentation variant.
+    const isCompact = variant === "compact" ||
+        (variant !== "card" && isSkillToolPart(tool));
+    if (isCompact) {
+        if (renderSkill)
+            return React.createElement(React.Fragment, null, renderSkill(tool));
+        return React.createElement(SkillTool, { ...getSkillToolProps(tool) });
+    }
+    const toggle = (e) => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        onToggle?.(next, e);
+    };
+    const context = {
+        tool,
+        isExpanded,
+        toggle,
+        hasOutput,
+        hasError,
+    };
+    return (React.createElement(ToolCallContext.Provider, { value: context },
+        React.createElement("div", { ref: ref, className: cn("not-prose w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-transparent px-4 py-2.5", className) }, children ?? (React.createElement(React.Fragment, null,
+            React.createElement(ToolCallTrigger, { icon: icon }),
+            React.createElement(ToolCallBody, null))))));
+});
+ToolCallRoot.displayName = "ToolCall.Root";
+/** The header row: tool icon + name + status badge + expand chevron. */
+function ToolCallTrigger({ icon, className }) {
+    const { tool, isExpanded, toggle } = useToolCall();
+    return (React.createElement("button", { type: "button", onClick: toggle, className: cn("group flex w-full items-center justify-between gap-3 text-left transition-colors hover:text-[var(--foreground)]", className) },
+        React.createElement("div", { className: "flex min-w-0 items-center gap-2" },
+            icon ?? React.createElement(WrenchIcon, { className: "size-3.5 shrink-0 text-[var(--foreground)]" }),
+            React.createElement("span", { className: "min-w-0 truncate text-sm font-medium leading-tight text-[var(--foreground)]" }, tool.toolName),
+            React.createElement(ToolStatusBadge, { state: tool.state })),
+        React.createElement(ChevronDownIcon, { className: cn("size-3.5 shrink-0 text-[var(--faint)] transition-transform", isExpanded && "rotate-180") })));
 }
+ToolCallTrigger.displayName = "ToolCall.Trigger";
+/** The collapsible region below the trigger. Renders only when expanded. */
+function ToolCallBody({ className, children }) {
+    const { isExpanded } = useToolCall();
+    if (!isExpanded)
+        return null;
+    return (React.createElement("div", { className: cn("mt-3 border-t border-[var(--edge)] pt-3", className) }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement(ToolCallInput, null),
+        React.createElement(ToolCallOutput, null),
+        React.createElement(ToolCallError, null)))));
+}
+ToolCallBody.displayName = "ToolCall.Body";
+/** The `Parameters` block. Pass children to replace the highlighted JSON. */
+function ToolCallInput({ className, children }) {
+    const { tool } = useToolCall();
+    if (tool.input === undefined)
+        return null;
+    return (React.createElement("div", { className: cn("space-y-2 overflow-hidden", className) },
+        React.createElement("h4", { className: "text-xs font-medium text-[var(--faint)]" }, "Parameters"),
+        React.createElement("div", { className: "rounded-[var(--radius-md)] bg-[var(--secondary)] p-3" }, children ?? formatJsonWithHighlight(tool.input))));
+}
+ToolCallInput.displayName = "ToolCall.Input";
+/** The `Result` block. Pass children to replace the JSON / auto-table output. */
+function ToolCallOutput({ className, children }) {
+    const { tool, hasOutput } = useToolCall();
+    if (!hasOutput)
+        return null;
+    const tableOutput = renderOutputAsTable(tool.output);
+    return (React.createElement("div", { className: cn("mt-3 space-y-2 border-t border-[var(--edge)] pt-3", className) },
+        React.createElement("h4", { className: "text-xs font-medium text-[var(--faint)]" }, "Result"),
+        React.createElement("div", { className: "overflow-x-auto rounded-[var(--radius-md)] bg-[var(--secondary)] text-[var(--foreground)]" }, children ?? tableOutput ?? (React.createElement("div", { className: "p-3" }, formatJsonWithHighlight(tool.output))))));
+}
+ToolCallOutput.displayName = "ToolCall.Output";
+/** The error `Alert`. Renders only when the tool carries `errorText`. */
+function ToolCallError({ className }) {
+    const { tool } = useToolCall();
+    if (!tool.errorText)
+        return null;
+    return (React.createElement("div", { className: cn("mt-3 border-t border-[var(--edge)] pt-3", className) },
+        React.createElement(Alert, { variant: "error" },
+            React.createElement(AlertIcon, null,
+                React.createElement(XCircleIcon, { className: "size-4" })),
+            React.createElement(AlertContent, null, tool.errorText))));
+}
+ToolCallError.displayName = "ToolCall.Error";
+/**
+ * ToolCall — render `<ToolCall tool={part} />` for the default card, or compose
+ * `ToolCall.Trigger` / `Body` / `Input` / `Output` / `Error` for a custom
+ * layout. Mirrors the `Message` compound: render it, or compose it.
+ */
+export const ToolCall = Object.assign(ToolCallRoot, {
+    Root: ToolCallRoot,
+    Trigger: ToolCallTrigger,
+    Body: ToolCallBody,
+    Input: ToolCallInput,
+    Output: ToolCallOutput,
+    Error: ToolCallError,
+});
+/** Back-compat alias — `message.tsx` and others import `ToolCallCard`. */
+export const ToolCallCard = ToolCallRoot;

package/esm/src/react/components/chat/chat/composition/api.d.ts

@@ -5,11 +5,13 @@
  */
 export { ChatRoot, type ChatRootProps } from "./chat-root.js";
 export { ChatMessageList, type ChatMessageListProps } from "./chat-message-list.js";
-export { ChatComposer, type ChatComposerProps } from "./chat-composer.js";
+export { ChatInput, type ChatInputProps } from "./chat-composer.js";
 export { ChatEmpty, type ChatEmptyProps } from "./chat-empty.js";
+export { ChatEmptyState, type ChatEmptyStateAvatarProps, type ChatEmptyStateHeadingProps, type ChatEmptyStateRootProps, type ChatEmptyStateSuggestionProps, type ChatEmptyStateSuggestionsProps, } from "./chat-empty-state.js";
 export { ChatIf, type ChatIfProps } from "./chat-if.js";
 export { AgentAvatar, type AgentAvatarProps } from "./agent-avatar.js";
 export { ModelAvatar, type ModelAvatarProps } from "./model-avatar.js";
 export { ErrorBanner, type ErrorBannerProps } from "./error-banner.js";
-export { Message, type MessageRootProps } from "./message.js";
+export { PendingMessage, type PendingMessageProps } from "./pending-message.js";
+export { Message, type MessageProps, type MessageRootProps } from "./message.js";
 //# sourceMappingURL=api.d.ts.map

package/esm/src/react/components/chat/chat/composition/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/api.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGvE,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/api.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EACL,cAAc,EACd,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,6BAA6B,EAClC,KAAK,8BAA8B,GACpC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhF,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/esm/src/react/components/chat/chat/composition/api.js

@@ -6,11 +6,13 @@
 // Root / Layout
 export { ChatRoot } from "./chat-root.js";
 export { ChatMessageList } from "./chat-message-list.js";
-export { ChatComposer } from "./chat-composer.js";
+export { ChatInput } from "./chat-composer.js";
 export { ChatEmpty } from "./chat-empty.js";
+export { ChatEmptyState, } from "./chat-empty-state.js";
 export { ChatIf } from "./chat-if.js";
 export { AgentAvatar } from "./agent-avatar.js";
 export { ModelAvatar } from "./model-avatar.js";
 export { ErrorBanner } from "./error-banner.js";
-// Message compound
+export { PendingMessage } from "./pending-message.js";
+// Message — render-or-compose (`<Message />` or `Message.Root` + parts)
 export { Message } from "./message.js";