@agent-native/toolkit 0.213.1 → 0.214.0

package/dist/app/styles/theme-families.css

@@ -0,0 +1,66 @@
+/*
+ * The agent-native family uses the shared Tailwind/shadcn palette from the
+ * Design template. App styles remain the original family by default.
+ */
+:root[data-theme-family="agent-native"],
+:root[data-theme-family="agent-native"][data-appearance] {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
+}
+
+.dark[data-theme-family="agent-native"],
+.dark[data-theme-family="agent-native"][data-appearance] {
+  --background: 0 0% 13%;
+  --foreground: 0 0% 90%;
+  --card: 0 0% 15%;
+  --card-foreground: 0 0% 90%;
+  --popover: 0 0% 15%;
+  --popover-foreground: 0 0% 90%;
+  --primary: 0 0% 75%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
+  --accent-foreground: 0 0% 96%;
+  --destructive: 0 91% 71%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
+  --ring: 0 0% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
+  --sidebar-primary: 0 0% 75%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 90%;
+  --sidebar-border: 0 0% 20%;
+  --sidebar-ring: 0 0% 60%;
+}

package/dist/composer/ComposerContextBanner.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+interface ComposerContextBannerBaseProps {
+    /** Localized name for the banner's content. */
+    ariaLabel: string;
+    children: ReactNode;
+    /** Localized label for the action that opens or adds context. */
+    addContextLabel: string;
+    onAddContext: () => void;
+    icon?: ReactNode;
+    className?: string;
+}
+export type ComposerContextBannerProps = ComposerContextBannerBaseProps & ({
+    dismissLabel?: never;
+    onDismiss?: never;
+} | {
+    dismissLabel: string;
+    onDismiss: () => void;
+});
+/** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
+export declare function ComposerContextBanner({ ariaLabel, children, addContextLabel, onAddContext, dismissLabel, onDismiss, icon, className, }: ComposerContextBannerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ComposerContextBanner.d.ts.map

package/dist/composer/ComposerContextBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerContextBanner.d.ts","sourceRoot":"","sources":["../../src/composer/ComposerContextBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,8BAA8B;IACtC,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,GACrE,CACI;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3C;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,CAClD,CAAC;AAEJ,uFAAuF;AACvF,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,0BAA0B,+BAsC5B"}

package/dist/composer/ComposerContextBanner.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPlus, IconSparkles, IconX } from "@tabler/icons-react";
+import { Button } from "../ui/button.js";
+import { cn } from "../utils.js";
+/** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
+export function ComposerContextBanner({ ariaLabel, children, addContextLabel, onAddContext, dismissLabel, onDismiss, icon, className, }) {
+    return (_jsxs("aside", { "aria-label": ariaLabel, "data-agent-composer-slot": "context-banner", className: cn("agent-composer-context-banner mx-auto mb-2 flex w-full max-w-3xl items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-2 text-xs text-muted-foreground", className), children: [_jsx("span", { className: "shrink-0 text-primary", children: icon ?? _jsx(IconSparkles, { "aria-hidden": "true", className: "size-4" }) }), _jsx("span", { className: "min-w-0 flex-1", children: children }), _jsxs(Button, { className: "shrink-0", onClick: onAddContext, size: "xs", type: "button", variant: "outline", children: [addContextLabel, _jsx(IconPlus, { "aria-hidden": "true" })] }), onDismiss ? (_jsx(Button, { "aria-label": dismissLabel, className: "shrink-0", onClick: onDismiss, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(IconX, { "aria-hidden": "true" }) })) : null] }));
+}
+//# sourceMappingURL=ComposerContextBanner.js.map

package/dist/composer/ComposerContextBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerContextBanner.js","sourceRoot":"","sources":["../../src/composer/ComposerContextBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGpE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAmBjC,uFAAuF;AACvF,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACkB;IAC3B,OAAO,CACL,+BACc,SAAS,8BACI,gBAAgB,EACzC,SAAS,EAAE,EAAE,CACX,+KAA+K,EAC/K,SAAS,CACV,aAED,eAAM,SAAS,EAAC,uBAAuB,YACpC,IAAI,IAAI,KAAC,YAAY,mBAAa,MAAM,EAAC,SAAS,EAAC,QAAQ,GAAG,GAC1D,EACP,eAAM,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAQ,EAClD,MAAC,MAAM,IACL,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,aAEhB,eAAe,EAChB,KAAC,QAAQ,mBAAa,MAAM,GAAG,IACxB,EACR,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,MAAM,kBACO,YAAY,EACxB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,OAAO,YAEf,KAAC,KAAK,mBAAa,MAAM,GAAG,GACrB,CACV,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC;AACJ,CAAC"}

package/dist/composer/ComposerModePicker.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface ComposerModeOption {
+    /** Stable host-defined mode identifier. */
+    value: string;
+    /** Localized visible label supplied by the host. */
+    label: string;
+    /** Optional localized explanation shown in the menu. */
+    description?: string;
+    /** Optional host-provided icon. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface ComposerModePickerProps {
+    /** Localized accessible name for this choice, such as "Ask mode". */
+    ariaLabel: string;
+    value: string;
+    options: readonly ComposerModeOption[];
+    onValueChange: (value: string) => void;
+    className?: string;
+}
+/**
+ * A shared, host-configurable mode picker for composer modes that are not part
+ * of the framework's built-in Act/Plan execution setting.
+ */
+export declare function ComposerModePicker({ ariaLabel, value, options, onValueChange, className, }: ComposerModePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=ComposerModePicker.d.ts.map

package/dist/composer/ComposerModePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerModePicker.d.ts","sourceRoot":"","sources":["../../src/composer/ComposerModePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,+BAsDzB"}

package/dist/composer/ComposerModePicker.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconChevronDown } from "@tabler/icons-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { cn } from "../utils.js";
+/**
+ * A shared, host-configurable mode picker for composer modes that are not part
+ * of the framework's built-in Act/Plan execution setting.
+ */
+export function ComposerModePicker({ ariaLabel, value, options, onValueChange, className, }) {
+    const selectedOption = options.find((option) => option.value === value);
+    const selectedLabel = selectedOption?.label ?? value;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${ariaLabel}: ${selectedLabel}`, "data-agent-composer-slot": "mode-picker", className: cn("agent-composer-mode-picker inline-flex h-7 max-w-48 shrink-0 items-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: [selectedOption?.icon, _jsx("span", { className: "min-w-0 truncate", children: selectedLabel }), _jsx(IconChevronDown, { "aria-hidden": "true", className: "size-3 shrink-0 opacity-60" })] }) }), _jsx(DropdownMenuContent, { side: "top", align: "start", collisionPadding: 8, className: "agent-composer-mode-picker-menu min-w-48", children: _jsx(DropdownMenuRadioGroup, { value: value, onValueChange: onValueChange, children: options.map((option) => (_jsxs(DropdownMenuRadioItem, { value: option.value, indicator: "check", disabled: option.disabled, className: "agent-composer-mode-picker-option pe-3", children: [option.icon, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: option.label }), option.description ? (_jsx("span", { className: "mt-0.5 block whitespace-normal text-xs text-muted-foreground", children: option.description })) : null] })] }, option.value))) }) })] }));
+}
+//# sourceMappingURL=ComposerModePicker.js.map

package/dist/composer/ComposerModePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerModePicker.js","sourceRoot":"","sources":["../../src/composer/ComposerModePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAuBjC;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,GACe;IACxB,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IACxE,MAAM,aAAa,GAAG,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC;IAErD,OAAO,CACL,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,kBACE,IAAI,EAAC,QAAQ,gBACD,GAAG,SAAS,KAAK,aAAa,EAAE,8BACnB,aAAa,EACtC,SAAS,EAAE,EAAE,CACX,4PAA4P,EAC5P,SAAS,CACV,aAEA,cAAc,EAAE,IAAI,EACrB,eAAM,SAAS,EAAC,kBAAkB,YAAE,aAAa,GAAQ,EACzD,KAAC,eAAe,mBACF,MAAM,EAClB,SAAS,EAAC,4BAA4B,GACtC,IACK,GACW,EACtB,KAAC,mBAAmB,IAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,OAAO,EACb,gBAAgB,EAAE,CAAC,EACnB,SAAS,EAAC,0CAA0C,YAEpD,KAAC,sBAAsB,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,YAC/D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,MAAC,qBAAqB,IAEpB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAC,wCAAwC,aAEjD,MAAM,CAAC,IAAI,EACZ,gBAAM,SAAS,EAAC,gBAAgB,aAC9B,eAAM,SAAS,EAAC,gBAAgB,YAAE,MAAM,CAAC,KAAK,GAAQ,EACrD,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CACpB,eAAM,SAAS,EAAC,8DAA8D,YAC3E,MAAM,CAAC,WAAW,GACd,CACR,CAAC,CAAC,CAAC,IAAI,IACH,KAdF,MAAM,CAAC,KAAK,CAeK,CACzB,CAAC,GACqB,GACL,IACT,CAChB,CAAC;AACJ,CAAC"}

package/dist/composer/index.d.ts

@@ -1,4 +1,6 @@
 export { FileReference } from "./extensions/FileReference.js";
+export { ComposerContextBanner, type ComposerContextBannerProps, } from "./ComposerContextBanner.js";
+export { ComposerModePicker, type ComposerModeOption, type ComposerModePickerProps, } from "./ComposerModePicker.js";
 export { useComposerDefaultActions, mergeComposerMenuItems, } from "./ComposerPlusMenu.js";
 export { ComposerContextMenu, ComposerContextSearchInput, type ComposerContextSearchInputProps, type ComposerContextPageControls, getComposerContextMenuEntries, type ComposerContextMenuProps, type ComposerContextMenuItem, type ComposerContextMenuAction, type ComposerContextMenuCategory, type ComposerContextPickerConfig, type ComposerContextPickerItem, type ComposerContextPickerRequest, type ComposerContextPickerResult, type ComposerContextPickerSelection, type ComposerContextPickerFooterAction, } from "./ComposerContextMenu.js";
 export { ComposerContextPickerDialog } from "./ComposerContextPickerDialog.js";

package/dist/composer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"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"}

package/dist/composer/index.js

@@ -1,4 +1,6 @@
 export { FileReference } from "./extensions/FileReference.js";
+export { ComposerContextBanner, } from "./ComposerContextBanner.js";
+export { ComposerModePicker, } from "./ComposerModePicker.js";
 export { useComposerDefaultActions, mergeComposerMenuItems, } from "./ComposerPlusMenu.js";
 export { ComposerContextMenu, ComposerContextSearchInput, getComposerContextMenuEntries, } from "./ComposerContextMenu.js";
 export { ComposerContextPickerDialog } from "./ComposerContextPickerDialog.js";

package/dist/composer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAG1B,6BAA6B,GAW9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAIzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,8BAA8B,EAC9B,kCAAkC,EAClC,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mCAAmC,EACnC,wCAAwC,EACxC,qBAAqB,EACrB,iBAAiB,GAQlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAE3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,kBAAkB,GAMnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GAQvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wCAAwC,EACxC,wBAAwB,EACxB,iCAAiC,EACjC,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,GAK7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mCAAmC,EACnC,kCAAkC,EAClC,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,+BAA+B,EAC/B,0BAA0B,GAG3B,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,kBAAkB,GAGnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAG1B,6BAA6B,GAW9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAIzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,8BAA8B,EAC9B,kCAAkC,EAClC,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mCAAmC,EACnC,wCAAwC,EACxC,qBAAqB,EACrB,iBAAiB,GAQlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAE3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,kBAAkB,GAMnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GAQvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wCAAwC,EACxC,wBAAwB,EACxB,iCAAiC,EACjC,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,GAK7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mCAAmC,EACnC,kCAAkC,EAClC,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,+BAA+B,EAC/B,0BAA0B,GAG3B,MAAM,uBAAuB,CAAC"}

package/dist/styles.css

@@ -18,6 +18,7 @@
  */
 @import "./theme/resource-icons.css";
 @import "./app-shell/prompt-home.css";
+@import "./app/styles/theme-families.css";
 @import "./app/styles/agent-native.css";
 
 @source "./**/*.{js,ts,tsx}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.213.1",
+  "version": "0.214.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -678,7 +678,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.213.1"
+    "@agent-native/agentkit": "^0.214.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -702,7 +702,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.213.1"
+    "@agent-native/core": "^0.214.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.205.1",

package/src/app/agentkit/react/components.spec.tsx

@@ -196,6 +196,18 @@ describe("AgentMessageActions layout", () => {
 });
 
 describe("AgentKitChat", () => {
+  it("keeps work-summary chevrons visible before the row is opened", () => {
+    const styles = readFileSync(
+      new URL("./styles.css", import.meta.url),
+      "utf8",
+    ).replace(/\r\n/g, "\n");
+    const rule = styles.match(
+      /\.agentkit-activities-summary > \.agentkit-summary-chevron \{([^}]*)\}/,
+    )?.[1];
+
+    expect(rule).toContain("opacity: 1;");
+  });
+
   it("renders the complete reference surface from one managed component", () => {
     const transport: AgentTransport = {
       async startRun() {

package/src/app/agentkit/react/components.tsx

@@ -136,6 +136,7 @@ import {
   type AgentKitSuggestionsRenderProps,
   type AgentRunFailureRenderProps,
 } from "./context.js";
+import { orderMessageContent } from "./message-content-order.js";
 import { AgentStreamingText } from "./streaming-text.js";
 
 // AgentKit React installs without @agent-native/core, so it repeats core's
@@ -1907,7 +1908,9 @@ function AgentWorkDisclosure({
   current?: ReactNode;
   children: ReactNode;
 }) {
+  const { slots } = useAgentKit();
   const [open, setOpen] = useState(false);
+  const Summary = slots.workedForSummary;
   return (
     <details
       className="agentkit-activities"
@@ -1924,18 +1927,30 @@ function AgentWorkDisclosure({
           setOpen((value) => !value);
         }}
       >
-        <span className="agentkit-activities-summary-content">
-          {label ? (
-            <span className="agentkit-activities-heading">
-              <span className="agentkit-activities-label">{label}</span>
+        {Summary ? (
+          <Summary
+            label={label}
+            running={running}
+            expandable={expandable}
+            open={open}
+            current={current}
+          />
+        ) : (
+          <>
+            <IconChevronRight
+              aria-hidden="true"
+              className="agentkit-icon agentkit-summary-chevron"
+            />
+            <span className="agentkit-activities-summary-content">
+              {label ? (
+                <span className="agentkit-activities-heading">
+                  <span className="agentkit-activities-label">{label}</span>
+                </span>
+              ) : null}
+              {current}
             </span>
-          ) : null}
-          {current}
-        </span>
-        <IconChevronRight
-          aria-hidden="true"
-          className="agentkit-icon agentkit-summary-chevron"
-        />
+          </>
+        )}
       </summary>
       {children}
     </details>
@@ -3787,7 +3802,7 @@ export function AgentMessageView({
   value: message,
   threadId,
 }: AgentKitRenderProps<AgentMessage>) {
-  const { labels, slots } = useAgentKit();
+  const { labels, slots, resolveMessageContentOrder } = useAgentKit();
   const thread = useAgentThread(threadId);
   const visibleMessage = stripAgentMessageContext(message);
   const Supplement = slots.messageSupplement;
@@ -3812,6 +3827,13 @@ export function AgentMessageView({
       thread.annotationMessageIds[annotation.id] === message.id &&
       !embeddedAnnotationIds.has(annotation.id),
   );
+  const orderedContent = orderMessageContent(
+    visibleMessage,
+    visibleMessage.parts,
+    attachedWidgets,
+    thread.events,
+    resolveMessageContentOrder,
+  );
   if (
     !message.parts.length &&
     !attachedWidgets.length &&
@@ -3830,23 +3852,20 @@ export function AgentMessageView({
       aria-busy={message.status === "streaming"}
     >
       <div className="agentkit-message-content">
-        {visibleMessage.parts.map((part, index) => (
+        {orderedContent.map((item, index) => (
           <AgentMessagePartView
-            key={`${message.id}-${index}`}
-            value={part}
+            key={item.key}
+            value={
+              item.type === "widget"
+                ? { type: "widget", widget: item.widget }
+                : item.part
+            }
             threadId={threadId}
             active={message.status === "streaming"}
             resetKey={`${threadId}:${message.id}:${index}`}
             userMessage={message.role === "user"}
           />
         ))}
-        {attachedWidgets.map((widget) => (
-          <AgentMessagePartView
-            key={widget.id}
-            value={{ type: "widget", widget }}
-            threadId={threadId}
-          />
-        ))}
         {attachedAnnotations.length ? (
           <div className="agentkit-annotations">
             {attachedAnnotations.map((annotation) => (

package/src/app/agentkit/react/context.tsx

@@ -43,6 +43,8 @@ import {
   type ReactNode,
 } from "react";
 
+import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
+
 export interface AgentKitRenderProps<T> {
   value: T;
   threadId: ThreadId;
@@ -79,6 +81,14 @@ export interface AgentKitSuggestionsRenderProps {
   onSelect: (suggestion: AgentSuggestion) => void;
 }
 
+export interface AgentKitWorkedForSummaryRenderProps {
+  label: string;
+  running?: boolean;
+  expandable: boolean;
+  open: boolean;
+  current?: ReactNode;
+}
+
 export interface AgentConnectionErrorRenderProps {
   error: AgentError;
   threadId: ThreadId;
@@ -153,6 +163,8 @@ export interface AgentKitSlots {
   composer?: ComponentType<{ threadId: ThreadId }>;
   queue?: ComponentType<AgentKitQueueRenderProps>;
   suggestions?: ComponentType<AgentKitSuggestionsRenderProps>;
+  /** Replaces the visible work-summary row while the shared disclosure owns its semantics. */
+  workedForSummary?: ComponentType<AgentKitWorkedForSummaryRenderProps>;
 }
 
 export interface AgentKitToolSource {
@@ -482,6 +494,7 @@ export interface AgentKitProviderProps {
   ) => Promise<AgentConnectionResponse>;
   /** Receives full renderer failures while the UI shows a safe fallback. */
   onRenderError?: (failure: AgentKitRenderFailure) => void;
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -511,6 +524,7 @@ export interface AgentKitContextValue {
   loadRunUsage?: AgentKitRunUsageLoader;
   onConnectionRequest?: AgentKitProviderProps["onConnectionRequest"];
   onRenderError?: (failure: AgentKitRenderFailure) => void;
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   registerComposerFocus: (threadId: ThreadId, focus: () => void) => () => void;
   requestComposerFocus: (threadId: ThreadId) => void;
 }
@@ -531,6 +545,7 @@ export function AgentKitProvider({
   loadRunUsage,
   onConnectionRequest,
   onRenderError,
+  resolveMessageContentOrder,
   onClientEffect,
   children,
 }: AgentKitProviderProps) {
@@ -597,6 +612,7 @@ export function AgentKitProvider({
       loadRunUsage,
       onConnectionRequest,
       onRenderError,
+      resolveMessageContentOrder,
       registerComposerFocus,
       requestComposerFocus,
     }),
@@ -614,6 +630,7 @@ export function AgentKitProvider({
       loadRunUsage,
       onConnectionRequest,
       onRenderError,
+      resolveMessageContentOrder,
       registerComposerFocus,
       requestComposerFocus,
     ],

package/src/app/agentkit/react/index.ts

@@ -1,5 +1,6 @@
 export * from "./chat.js";
 export * from "./components.js";
 export * from "./context.js";
+export * from "./message-content-order.js";
 export * from "./root.js";
 export * from "./streaming-text.js";

package/src/app/agentkit/react/lifecycle.spec.tsx

@@ -157,6 +157,83 @@ afterEach(async () => {
 });
 
 describe("AgentChat lifecycle", () => {
+  it("renders host-ordered text around an attached widget", async () => {
+    const threadId = "thread-host-content-order";
+    const message = {
+      id: "assistant-host-content-order",
+      role: "assistant" as const,
+      status: "complete" as const,
+      parts: [{ type: "text" as const, text: "Intro. Summary." }],
+    };
+    const widget = {
+      id: "chart-host-content-order",
+      kind: "test-chart",
+      data: {},
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      messages: [message],
+      widgets: { [widget.id]: widget },
+      widgetMessageIds: { [widget.id]: message.id },
+    };
+    const observable = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+
+    await tree.render(
+      <AgentKitProvider
+        controller={observable.controller}
+        threadId={threadId}
+        resolveMessageContentOrder={({ parts, widgets }) => {
+          const part = parts[0];
+          const chart = widgets[0];
+          if (part?.type !== "text" || !chart) return [];
+          return [
+            {
+              key: "intro",
+              type: "part",
+              part: { ...part, text: "Intro. " },
+            },
+            { key: chart.id, type: "widget", widget: chart },
+            {
+              key: "summary",
+              type: "part",
+              part: { ...part, text: "Summary." },
+            },
+          ];
+        }}
+        registry={{
+          widgets: {
+            "test-chart": () => <span data-chart-result>Chart</span>,
+          },
+        }}
+        slots={{
+          text: ({ value }) => <span data-chat-part>{value.text}</span>,
+        }}
+      >
+        <AgentKitChat composer={false} />
+      </AgentKitProvider>,
+    );
+
+    const content = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    const renderedOrder = [...(content?.children ?? [])].map((element) =>
+      element.hasAttribute("data-chat-part")
+        ? element.textContent
+        : element.hasAttribute("data-chart-result")
+          ? "chart"
+          : "other",
+    );
+    expect(renderedOrder).toEqual(["Intro. ", "chart", "Summary."]);
+    await tree.unmount();
+  });
+
   it("keeps partial transcript updates out of live announcements", async () => {
     const threadId = "thread-accessible-transcript";
     const thread = {
@@ -1744,6 +1821,44 @@ describe("AgentChat lifecycle", () => {
         ".agentkit-activities-summary > .agentkit-summary-chevron",
       ),
     ).not.toBeNull();
+    await tree.render(
+      <AgentKitProvider
+        controller={observable.controller}
+        threadId={threadId}
+        registry={{
+          activities: {
+            reasoning: ({ value }) => (
+              <span data-protocol-reasoning>{value.label}</span>
+            ),
+          },
+        }}
+        slots={{
+          reasoning: ({ value, active, resetKey }) => (
+            <span data-thought={resetKey} data-active={active}>
+              {value.text}
+            </span>
+          ),
+          workedForSummary: ({ label, open, current }) => (
+            <span data-work-summary data-open={open}>
+              <span>{label}</span>
+              <span data-work-chevron aria-hidden="true">
+                ›
+              </span>
+              {current}
+            </span>
+          ),
+        }}
+      >
+        <AgentKitChat composer={false} />
+      </AgentKitProvider>,
+    );
+    expect(work.querySelector("[data-work-summary]")?.textContent).toContain(
+      "Searching documentation",
+    );
+    expect(work.querySelector("[data-work-chevron]")).not.toBeNull();
+    expect(
+      work.querySelector("[data-work-summary]")?.getAttribute("data-open"),
+    ).toBe("false");
     thread = reduceAgentEvent(thread, {
       ...base(8, 18),
       type: "message.completed",
@@ -1765,7 +1880,7 @@ describe("AgentChat lifecycle", () => {
     await flush();
     expect(tree.container.querySelector(".agentkit-activities")).toBe(work);
     expect(work.open).toBe(false);
-    expect(work.querySelector("summary")?.textContent).toBe("Worked for 18s");
+    expect(work.querySelector("summary")?.textContent).toBe("Worked for 18s›");
     expect(work.querySelector("[data-agentkit-current-activity]")).toBeNull();
     expect(tree.container.querySelectorAll("article")).toHaveLength(1);
     const answer = tree.container.querySelector(