@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/dist/components/client-tool-executor.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Client Tool Executor — registers custom UIs for client-side tools.
+ *
+ * Tool execution happens in the AGUIRunner (client-side tools intercepted at
+ * `tool-call-end`). This component only registers the UI rendering and
+ * injects the navigate function (which requires React Router context).
+ *
+ * Modern assistant-ui v0.12 pattern: each tool UI is a top-level
+ * `makeAssistantToolUI(...)` component. We mount them as children of
+ * `<ClientToolExecutor>` inside the AssistantRuntimeProvider tree.
+ */
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { useNavigate } from "react-router";
+import { useEffect } from "react";
+import { setNavigateFunction } from "../lib/client-tools.js";
+import { useToolPanelStore } from "../lib/tool-panel-store.js";
+import { ConfirmationCard } from "./confirmation-card.js";
+import { ToolCallCard } from "./tool-call-card.js";
+import { Navigation, Palette, PanelRight, MousePointerClick, PenLine, Highlighter, ShieldCheck, Info, } from "lucide-react";
+const NavigateUI = makeAssistantToolUI({
+    toolName: "ui_navigate",
+    render: ({ args, result, status }) => {
+        const navigate = useNavigate();
+        return (_jsx(ToolCallCard, { icon: _jsx(Navigation, { className: "size-3.5" }), title: "Navigate", description: status.type === "running"
+                ? "Navigating..."
+                : result?.status === "success"
+                    ? `Navigated to ${args?.path}`
+                    : "Navigation failed", status: status, action: status.type === "complete" && args?.path
+                ? { label: "Go to page", onClick: () => navigate(args.path) }
+                : undefined, className: "w-full" }));
+    },
+});
+const SetThemeUI = makeAssistantToolUI({
+    toolName: "ui_set_theme",
+    render: ({ args, result, status }) => (_jsx(ToolCallCard, { icon: _jsx(Palette, { className: "size-3.5" }), title: "Set Theme", description: status.type === "running"
+            ? "Changing theme..."
+            : result?.status === "success"
+                ? `Theme set to ${args?.mode}`
+                : "Theme change failed", status: status, className: "w-full" })),
+});
+const OpenPanelUI = makeAssistantToolUI({
+    toolName: "ui_open_panel",
+    render: ({ args, result, status }) => {
+        const handleReopen = () => {
+            if (args?.path) {
+                useToolPanelStore.getState().openPanel({
+                    title: args.title,
+                    content: args.path,
+                    type: "page",
+                });
+            }
+            else if (args?.content) {
+                useToolPanelStore.getState().openPanel({
+                    title: args.title,
+                    content: args.content,
+                    type: args.type || "markdown",
+                });
+            }
+        };
+        return (_jsx(ToolCallCard, { icon: _jsx(PanelRight, { className: "size-3.5" }), title: "Open Panel", description: status.type === "running"
+                ? "Opening panel..."
+                : result?.status === "success"
+                    ? `Panel: ${args?.title}`
+                    : "Panel failed", status: status, action: status.type === "complete" && result?.status === "success"
+                ? { label: "View", onClick: handleReopen }
+                : undefined, className: "w-full" }));
+    },
+});
+const SelectItemUI = makeAssistantToolUI({
+    toolName: "ui_select_item",
+    render: ({ args, status }) => (_jsx(ToolCallCard, { icon: _jsx(MousePointerClick, { className: "size-3.5" }), title: "Select Item", description: status.type === "running"
+            ? "Selecting..."
+            : args?.itemId
+                ? `Selected: ${args.itemId}`
+                : "Selection cleared", status: status, className: "w-full" })),
+});
+const UpdateContentUI = makeAssistantToolUI({
+    toolName: "ui_update_content",
+    render: ({ args, status }) => {
+        const fieldNames = args?.fields ? Object.keys(args.fields).join(", ") : "";
+        return (_jsx(ToolCallCard, { icon: _jsx(PenLine, { className: "size-3.5" }), title: "Update Content", description: status.type === "running" ? "Updating..." : `Updated: ${fieldNames}`, status: status, className: "w-full" }));
+    },
+});
+const HighlightUI = makeAssistantToolUI({
+    toolName: "ui_highlight",
+    render: ({ args, status }) => (_jsx(ToolCallCard, { icon: _jsx(Highlighter, { className: "size-3.5" }), title: "Highlight", description: status.type === "running" ? "Highlighting..." : `Highlighted: ${args?.entityId}`, status: status, className: "w-full" })),
+});
+const ConfirmUI = makeAssistantToolUI({
+    toolName: "ui_confirm",
+    render: ({ args, result, status }) => {
+        if (result?.status === "pending") {
+            return (_jsx(ConfirmationCard, { action: args?.action ?? "Unknown action", details: args?.details, status: status }));
+        }
+        return (_jsx(ToolCallCard, { icon: _jsx(ShieldCheck, { className: "size-3.5" }), title: "Confirmation Required", description: args?.action ?? "Confirmation requested", status: status, className: "w-full" }));
+    },
+});
+const GetContextUI = makeAssistantToolUI({
+    toolName: "ui_get_context",
+    render: ({ status }) => (_jsx(ToolCallCard, { icon: _jsx(Info, { className: "size-3.5" }), title: "Get Context", description: status.type === "running" ? "Reading context..." : "Context loaded", status: status, className: "w-full" })),
+});
+export function ClientToolExecutor() {
+    const navigate = useNavigate();
+    useEffect(() => {
+        setNavigateFunction(navigate);
+    }, [navigate]);
+    return (_jsxs(_Fragment, { children: [_jsx(NavigateUI, {}), _jsx(SetThemeUI, {}), _jsx(OpenPanelUI, {}), _jsx(SelectItemUI, {}), _jsx(UpdateContentUI, {}), _jsx(HighlightUI, {}), _jsx(ConfirmUI, {}), _jsx(GetContextUI, {})] }));
+}

package/dist/components/collection-empty-state.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+export declare function CollectionEmptyState({ icon: Icon, title, description, action, className, }: {
+    icon?: LucideIcon | null;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-empty-state.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchX } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function CollectionEmptyState({ icon: Icon = SearchX, title, description, action, className, }) {
+    return (_jsxs("div", { className: cn("flex min-h-[18rem] flex-col items-center justify-center rounded-[1.75rem] bg-muted/18 px-6 py-10 text-center ring-1 ring-border/35", className), children: [Icon ? (_jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl bg-background/85 text-primary shadow-[0_8px_24px_-18px_rgb(15_23_42/0.35)]", children: _jsx(Icon, { className: "size-6" }) })) : null, _jsx("div", { className: "text-base font-semibold text-foreground", children: title }), description ? _jsx("p", { className: "mt-2 max-w-xl text-sm leading-6 text-muted-foreground", children: description }) : null, action ? _jsx("div", { className: "mt-5", children: action }) : null] }));
+}

package/dist/components/collection-filter-bar.d.ts

@@ -0,0 +1,19 @@
+export type CollectionFilterValue = string | string[] | boolean | undefined;
+export interface CollectionFilterOption {
+    value: string;
+    label: string;
+}
+export interface CollectionFilterDefinition {
+    key: string;
+    label: string;
+    type: "single" | "multi" | "boolean";
+    options?: CollectionFilterOption[];
+    trueLabel?: string;
+}
+export declare function CollectionFilterBar({ filters, values, onValueChange, onClearAll, className, }: {
+    filters: CollectionFilterDefinition[];
+    values: Record<string, CollectionFilterValue>;
+    onValueChange: (key: string, value: CollectionFilterValue) => void;
+    onClearAll?: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-filter-bar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Filter, X } from "lucide-react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { Checkbox } from "@iloveagents/foundry-web-primitives";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { cn } from "@iloveagents/foundry-web-primitives";
+function activeCount(value, type) {
+    if (type === "boolean")
+        return value ? 1 : 0;
+    if (Array.isArray(value))
+        return value.length;
+    return value ? 1 : 0;
+}
+export function CollectionFilterBar({ filters, values, onValueChange, onClearAll, className, }) {
+    const hasActiveFilters = filters.some((filter) => activeCount(values[filter.key], filter.type) > 0);
+    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [filters.map((filter) => {
+                const count = activeCount(values[filter.key], filter.type);
+                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn("rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26", count > 0 && "border-primary/18 bg-primary/7 text-foreground hover:bg-primary/10"), children: [_jsx(Filter, { className: "size-4" }), _jsx("span", { children: filter.label }), count > 0 ? (_jsx("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-[11px] font-semibold text-primary", children: count })) : null] }) }), _jsxs(PopoverContent, { align: "start", className: "w-64 rounded-2xl border-border/45 bg-popover/95 p-2 shadow-lg", children: [_jsx("div", { className: "px-2 pb-2 pt-1 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: filter.label }), filter.type === "boolean" ? (_jsxs("button", { type: "button", onClick: () => onValueChange(filter.key, values[filter.key] ? undefined : true), className: cn("flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors", values[filter.key] ? "bg-primary/8 text-foreground" : "hover:bg-accent"), children: [_jsx(Checkbox, { checked: Boolean(values[filter.key]) }), _jsx("span", { children: filter.trueLabel ?? `Only ${filter.label.toLowerCase()}` })] })) : null, filter.type === "single" ? (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { type: "button", onClick: () => onValueChange(filter.key, undefined), className: "flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-accent", children: [_jsx("span", { children: "Any" }), _jsx(Check, { className: cn("size-4 text-primary", values[filter.key] == null ? "opacity-100" : "opacity-0") })] }), filter.options?.map((option) => (_jsxs("button", { type: "button", onClick: () => onValueChange(filter.key, option.value), className: "flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-accent", children: [_jsx("span", { children: option.label }), _jsx(Check, { className: cn("size-4 text-primary", values[filter.key] === option.value ? "opacity-100" : "opacity-0") })] }, option.value)))] })) : null, filter.type === "multi" ? (_jsx("div", { className: "space-y-1", children: filter.options?.map((option) => {
+                                        const current = Array.isArray(values[filter.key])
+                                            ? values[filter.key]
+                                            : [];
+                                        const checked = current.includes(option.value);
+                                        return (_jsxs("button", { type: "button", onClick: () => onValueChange(filter.key, checked
+                                                ? current.filter((item) => item !== option.value)
+                                                : [...current, option.value]), className: cn("flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors", checked ? "bg-primary/8 text-foreground" : "hover:bg-accent"), children: [_jsx(Checkbox, { checked: checked }), _jsx("span", { children: option.label })] }, option.value));
+                                    }) })) : null] })] }, filter.key));
+            }), hasActiveFilters && onClearAll ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearAll, className: "rounded-xl text-muted-foreground hover:bg-muted/26", children: [_jsx(X, { className: "size-4" }), _jsx("span", { children: "Clear" })] })) : null] }));
+}

package/dist/components/collection-search-input.d.ts

@@ -0,0 +1,6 @@
+export declare function CollectionSearchInput({ value, onValueChange, placeholder, className, }: {
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-search-input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { Input } from "@iloveagents/foundry-web-primitives";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function CollectionSearchInput({ value, onValueChange, placeholder = "Search...", className, }) {
+    return (_jsxs("div", { className: cn("relative min-w-[16rem] flex-1", className), children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: value, onChange: (event) => onValueChange(event.target.value), placeholder: placeholder, className: "h-10 rounded-xl border-border/45 bg-background/72 pl-9 pr-10 shadow-none hover:bg-background/82 focus:border-primary/20 focus:ring-primary/10" }), value ? (_jsxs(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onValueChange(""), className: "absolute right-1 top-1/2 size-8 -translate-y-1/2 rounded-lg text-muted-foreground", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Clear search" })] })) : null] }));
+}

package/dist/components/collection-skeleton.d.ts

@@ -0,0 +1,6 @@
+import type { CollectionViewMode } from "./collection-view-toggle.js";
+export declare function CollectionSkeleton({ view, rows, className, }: {
+    view: CollectionViewMode;
+    rows?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-skeleton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function CollectionSkeleton({ view, rows = 8, className, }) {
+    if (view === "table") {
+        return (_jsxs("div", { className: cn("overflow-hidden rounded-[1.5rem] bg-background/65 ring-1 ring-border/35", className), children: [_jsx("div", { className: "grid grid-cols-4 gap-4 border-b border-border/40 bg-muted/28 px-5 py-4", children: Array.from({ length: 4 }).map((_, index) => (_jsx("div", { className: "h-3.5 animate-pulse rounded bg-muted" }, index))) }), _jsx("div", { className: "divide-y divide-border/35", children: Array.from({ length: rows }).map((_, index) => (_jsx("div", { className: "grid grid-cols-4 gap-4 px-5 py-4", children: Array.from({ length: 4 }).map((_, cellIndex) => (_jsx("div", { className: "h-4 animate-pulse rounded bg-muted/80" }, cellIndex))) }, index))) })] }));
+    }
+    return (_jsx("div", { className: cn(view === "tiles"
+            ? "grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))]"
+            : "grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]", className), children: Array.from({ length: rows }).map((_, index) => (_jsx("div", { className: cn("animate-pulse rounded-[1.5rem] bg-card/80 ring-1 ring-border/35", view === "tiles" ? "h-28" : "h-40") }, index))) }));
+}

package/dist/components/collection-sort-menu.d.ts

@@ -0,0 +1,10 @@
+export interface CollectionSortOption {
+    value: string;
+    label: string;
+}
+export declare function CollectionSortMenu({ options, value, onValueChange, className, }: {
+    options: CollectionSortOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-sort-menu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpDown, Check } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function CollectionSortMenu({ options, value, onValueChange, className, }) {
+    const active = options.find((option) => option.value === value) ?? options[0];
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn("rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26", className), children: [_jsx(ArrowUpDown, { className: "size-4" }), _jsx("span", { children: active?.label ?? "Sort" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56 rounded-xl border-border/45 bg-popover/95 shadow-lg", children: options.map((option) => (_jsxs(DropdownMenuItem, { onClick: () => onValueChange(option.value), className: "flex items-center justify-between gap-3", children: [_jsx("span", { children: option.label }), _jsx(Check, { className: cn("size-4 text-primary", value === option.value ? "opacity-100" : "opacity-0") })] }, option.value))) })] }));
+}

package/dist/components/collection-surface.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export declare function CollectionSurface({ toolbar, bordered, backgrounded, className, toolbarClassName, contentClassName, children, ...props }: ComponentPropsWithoutRef<"section"> & {
+    toolbar?: ReactNode;
+    bordered?: boolean;
+    backgrounded?: boolean;
+    toolbarClassName?: string;
+    contentClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-surface.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function CollectionSurface({ toolbar, bordered = false, backgrounded = true, className, toolbarClassName, contentClassName, children, ...props }) {
+    return (_jsxs("section", { className: cn("w-full min-w-0 overflow-hidden rounded-[1.75rem]", backgrounded && "bg-card/60 shadow-[0_12px_36px_-24px_rgb(15_23_42/0.18)] backdrop-blur-sm", bordered && "ring-1 ring-border/45", className), ...props, children: [toolbar ? (_jsx("div", { className: cn("sticky top-0 z-10 px-4 py-4 sm:px-5", backgrounded && "bg-muted/18 backdrop-blur", bordered && "border-b border-border/45", toolbarClassName), children: toolbar })) : null, _jsx("div", { className: cn("p-4 sm:p-5", contentClassName), children: children })] }));
+}

package/dist/components/collection-toolbar.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function CollectionToolbar({ search, filters, sort, viewToggle, actions, className, }: {
+    search?: ReactNode;
+    filters?: ReactNode;
+    sort?: ReactNode;
+    viewToggle?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-toolbar.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function CollectionToolbar({ search, filters, sort, viewToggle, actions, className, }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-2.5", className), children: [_jsxs("div", { className: "flex flex-col gap-2.5 lg:flex-row lg:items-center", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: search }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [sort, viewToggle, actions] })] }), filters ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: filters }) : null] }));
+}

package/dist/components/collection-view-toggle.d.ts

@@ -0,0 +1,7 @@
+export type CollectionViewMode = "table" | "grid" | "tiles";
+export declare function CollectionViewToggle({ value, onValueChange, views, className, }: {
+    value: CollectionViewMode;
+    onValueChange: (value: CollectionViewMode) => void;
+    views?: CollectionViewMode[];
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection-view-toggle.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGrid, Rows3, TableProperties } from "lucide-react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const VIEW_OPTIONS = [
+    { value: "table", label: "Table", icon: TableProperties },
+    { value: "grid", label: "Grid", icon: LayoutGrid },
+    { value: "tiles", label: "Tiles", icon: Rows3 },
+];
+export function CollectionViewToggle({ value, onValueChange, views = ["table", "grid"], className, }) {
+    return (_jsx("div", { className: cn("inline-flex items-center rounded-xl bg-muted/26 p-1 ring-1 ring-border/40", className), children: VIEW_OPTIONS.filter((option) => views.includes(option.value)).map((option) => {
+            const Icon = option.icon;
+            const active = value === option.value;
+            return (_jsxs(Button, { type: "button", "aria-label": option.label, variant: active ? "secondary" : "ghost", size: "sm", onClick: () => onValueChange(option.value), className: cn("rounded-lg px-2.5 text-muted-foreground hover:bg-background/70 hover:text-foreground", active &&
+                    "bg-background text-foreground ring-1 ring-primary/35 shadow-[0_1px_2px_rgb(15_23_42/0.08)] hover:bg-background"), children: [_jsx(Icon, { className: "size-4" }), _jsx("span", { className: "hidden sm:inline", children: option.label }), _jsx("span", { className: "sr-only sm:hidden", children: option.label })] }, option.value));
+        }) }));
+}

package/dist/components/composer-submit-bridge.d.ts

@@ -0,0 +1 @@
+export declare function ComposerSubmitBridge(): null;

package/dist/components/composer-submit-bridge.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useComposerRuntime } from "@assistant-ui/react";
+import { useComposerSubmitStore } from "../lib/composer-submit-store.js";
+export function ComposerSubmitBridge() {
+    const composerRuntime = useComposerRuntime();
+    const pending = useComposerSubmitStore((s) => s.pending);
+    useEffect(() => {
+        if (!pending)
+            return;
+        composerRuntime.setText(pending.text);
+        composerRuntime.send({ startRun: true });
+        useComposerSubmitStore.getState().consume(pending.id);
+    }, [composerRuntime, pending]);
+    return null;
+}

package/dist/components/confirm-dialog.d.ts

@@ -0,0 +1,11 @@
+export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm, confirming, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    onConfirm: () => void;
+    confirming?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/confirm-dialog.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { FormDialog } from "./form-dialog.js";
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false, onConfirm, confirming = false, }) {
+    return (_jsx(FormDialog, { open: open, onOpenChange: onOpenChange, title: title, description: description, size: "sm", footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: cancelLabel }), _jsx(Button, { type: "button", variant: destructive ? "destructive" : "default", onClick: onConfirm, disabled: confirming, children: confirmLabel })] }) }));
+}

package/dist/components/confirmation-card.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Confirmation Card — informational UI for the ui_confirm tool.
+ *
+ * Renders a card with action description and optional details.
+ * The user responds by typing their confirmation in the chat.
+ */
+import { type ToolCallStatus } from "./tool-call-card.js";
+interface ConfirmationCardProps {
+    action: string;
+    details?: string;
+    status: ToolCallStatus;
+}
+export declare function ConfirmationCard({ action, details, status }: ConfirmationCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/confirmation-card.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Confirmation Card — informational UI for the ui_confirm tool.
+ *
+ * Renders a card with action description and optional details.
+ * The user responds by typing their confirmation in the chat.
+ */
+import { ShieldCheck } from "lucide-react";
+import { ToolCallCard } from "./tool-call-card.js";
+export function ConfirmationCard({ action, details, status }) {
+    return (_jsxs(ToolCallCard, { icon: _jsx(ShieldCheck, { className: "size-3.5" }), title: "Confirmation Required", description: action, status: status, className: "w-full", children: [details && _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: details }), _jsx("p", { className: "text-xs text-muted-foreground mt-2 italic", children: "Reply to confirm or reject this action." })] }));
+}

package/dist/components/context-badges.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Context badge components for the composer and sent messages.
+ *
+ * Renders user-selected context items as violet-tinted badges,
+ * visually distinct from gray file attachment badges.
+ *
+ * - ComposerContextBadges: editable badges in the composer (with remove button)
+ * - SentContextBadges: read-only badges on sent user messages
+ */
+import { type FC } from "react";
+/** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
+export declare const ComposerContextBadges: FC;
+/** Renders sent context badges on a user message (read-only). */
+export declare const SentContextBadges: FC<{
+    messageId: string;
+}>;

package/dist/components/context-badges.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Context badge components for the composer and sent messages.
+ *
+ * Renders user-selected context items as violet-tinted badges,
+ * visually distinct from gray file attachment badges.
+ *
+ * - ComposerContextBadges: editable badges in the composer (with remove button)
+ * - SentContextBadges: read-only badges on sent user messages
+ */
+import { createElement } from "react";
+import { Pin, TextSelect, X, FileText, Link2, StickyNote } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip.js";
+import { useAppStore } from "../lib/app-store.js";
+const CONTEXT_ICONS = {
+    selection: TextSelect,
+    page: FileText,
+    ref: Link2,
+    note: StickyNote,
+};
+function ContextIcon({ type, className }) {
+    return createElement(CONTEXT_ICONS[type] ?? TextSelect, { className });
+}
+/** Get tooltip text for a context item (source page or path). */
+function getBadgeTooltip(item) {
+    const source = item.type === "page" && item.payload.kind === "page" ? item.payload.path : item.sourcePage;
+    return `${item.label}\n${source}`;
+}
+/** Editable badge in the composer with a remove button. */
+const ComposerBadge = ({ item }) => {
+    const removeItem = useAppStore((s) => s.removeContextItem);
+    const promoteItem = useAppStore((s) => s.promoteContextItem);
+    const isEphemeral = item.persistence === "ephemeral";
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn("inline-flex items-center gap-1.5 max-w-70", "rounded-lg bg-primary/5", "px-2 py-1", isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20"), children: [_jsx(ContextIcon, { type: item.type, className: "size-3 text-primary shrink-0" }), _jsx("span", { className: "text-xs text-foreground truncate", children: item.label }), isEphemeral && (_jsx("button", { type: "button", onClick: () => promoteItem(item.id), className: "p-0.5 rounded hover:bg-primary/10 shrink-0", "aria-label": "Pin context", children: _jsx(Pin, { className: "size-3 text-muted-foreground" }) })), _jsx("button", { type: "button", onClick: () => removeItem(item.id), className: "p-0.5 rounded hover:bg-primary/10 shrink-0", "aria-label": "Remove context", children: _jsx(X, { className: "size-3" }) })] }) }), _jsx(TooltipContent, { side: "top", className: "whitespace-pre-line", children: getBadgeTooltip(item) })] }));
+};
+/** Read-only badge on a sent user message. Mirrors composer context chips. */
+const SentBadge = ({ item }) => {
+    const isEphemeral = item.persistence === "ephemeral";
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn("inline-flex items-center gap-1.5 max-w-70", "rounded-lg bg-primary/5", "px-2 py-1", isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20"), children: [_jsx(ContextIcon, { type: item.type, className: "size-3 text-primary shrink-0" }), _jsx("span", { className: "text-[11px] leading-tight text-foreground truncate", children: item.label })] }) }), _jsx(TooltipContent, { side: "top", className: "whitespace-pre-line", children: getBadgeTooltip(item) })] }));
+};
+/** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
+export const ComposerContextBadges = () => {
+    const items = useAppStore((s) => s.contextItems);
+    const ephemeral = items.filter((i) => i.persistence === "ephemeral");
+    if (ephemeral.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: ephemeral.map((item) => (_jsx(ComposerBadge, { item: item }, item.id))) }));
+};
+/** Renders sent context badges on a user message (read-only). */
+export const SentContextBadges = ({ messageId }) => {
+    const items = useAppStore((s) => s.sentContext[messageId]);
+    if (!items || items.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-wrap gap-1 mb-1", children: items.map((item) => (_jsx(SentBadge, { item: item }, item.id))) }));
+};

package/dist/components/context-bar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Context Pins — pin button with count badge and hover flyout.
+ *
+ * Click: toggles pin/unpin current page.
+ * Hover (when pins exist): shows flyout to view, navigate, and remove pins.
+ */
+import { type FC } from "react";
+import { type ContextItem } from "../lib/app-store.js";
+interface ContextPinsProps {
+    /** Show the pin button to add current page */
+    showPinButton?: boolean;
+    /** Compact mode for small containers (mini chat bubble header) */
+    compact?: boolean;
+    /** Direction flyout opens: up (composer) or down (header) */
+    flyoutDirection?: "up" | "down";
+}
+/** Resolve the URL a context item navigates to when clicked.
+ *
+ * Two shapes the framework knows about:
+ *
+ * 1. **Page** (``type: "page"``) — the canonical case the OSS shell
+ *    creates for "Pin this page". The payload's ``path`` IS the
+ *    navigation target.
+ * 2. **Ref** (``type: "ref"``) — created by feature modules when the
+ *    user pins a structured reference (Spaces blocks, code symbols,
+ *    DB rows, …). The framework stays agnostic about the ref shape;
+ *    the source module places the canonical deep-link URL — including
+ *    any anchor hash — in the chip's ``sourcePage`` field, which is
+ *    already the conventional "where the user pinned from" breadcrumb.
+ *    Surfacing it here makes every feature module's ref chips clickable
+ *    without an extension-point registry, and without the framework
+ *    knowing module-specific URL shapes.
+ *
+ * Other item types (``selection``, ``note``) intentionally stay
+ * non-clickable — they are excerpts / annotations, not anchors.
+ *
+ * @internal Exported for unit tests; not part of the public API.
+ */
+export declare function getNavigablePath(item: ContextItem): string | null;
+export declare const ContextPins: FC<ContextPinsProps>;
+export {};

package/dist/components/context-bar.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Context Pins — pin button with count badge and hover flyout.
+ *
+ * Click: toggles pin/unpin current page.
+ * Hover (when pins exist): shows flyout to view, navigate, and remove pins.
+ */
+import { useState, useRef, useEffect, createElement } from "react";
+import { useNavigate } from "react-router";
+import { X, Pin, PinOff, TextSelect, FileText, Link2, StickyNote, } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { useAppStore } from "../lib/app-store.js";
+const CONTEXT_ICONS = {
+    selection: TextSelect,
+    page: FileText,
+    ref: Link2,
+    note: StickyNote,
+};
+/** Resolve the URL a context item navigates to when clicked.
+ *
+ * Two shapes the framework knows about:
+ *
+ * 1. **Page** (``type: "page"``) — the canonical case the OSS shell
+ *    creates for "Pin this page". The payload's ``path`` IS the
+ *    navigation target.
+ * 2. **Ref** (``type: "ref"``) — created by feature modules when the
+ *    user pins a structured reference (Spaces blocks, code symbols,
+ *    DB rows, …). The framework stays agnostic about the ref shape;
+ *    the source module places the canonical deep-link URL — including
+ *    any anchor hash — in the chip's ``sourcePage`` field, which is
+ *    already the conventional "where the user pinned from" breadcrumb.
+ *    Surfacing it here makes every feature module's ref chips clickable
+ *    without an extension-point registry, and without the framework
+ *    knowing module-specific URL shapes.
+ *
+ * Other item types (``selection``, ``note``) intentionally stay
+ * non-clickable — they are excerpts / annotations, not anchors.
+ *
+ * @internal Exported for unit tests; not part of the public API.
+ */
+export function getNavigablePath(item) {
+    if (item.type === "page" && item.payload.kind === "page")
+        return item.payload.path;
+    if (item.type === "ref" &&
+        item.payload.kind === "ref" &&
+        typeof item.sourcePage === "string" &&
+        // Guard: ``sourcePage`` is also used as a free-form breadcrumb
+        // label by some callers (e.g. "page-label" instead of "/page").
+        // Treat it as a navigation target only when it looks like an
+        // in-app path. Hash-only links (``#anchor``) are also valid —
+        // they keep the user on the current entity but scroll to the
+        // pinned atom (e.g. Spaces ``#block-{id}`` deep-link from the
+        // current page).
+        (item.sourcePage.startsWith("/") || item.sourcePage.startsWith("#"))) {
+        return item.sourcePage;
+    }
+    return null;
+}
+export const ContextPins = ({ showPinButton = false, compact = false, flyoutDirection = "up", }) => {
+    const items = useAppStore((s) => s.contextItems);
+    const removeItem = useAppStore((s) => s.removeContextItem);
+    const addContextItem = useAppStore((s) => s.addContextItem);
+    const currentPage = useAppStore((s) => s.currentPage);
+    const pageLabel = useAppStore((s) => s.navContext.label);
+    const navMeta = useAppStore((s) => s.navContext.meta);
+    const navigate = useNavigate();
+    const [flyoutOpen, setFlyoutOpen] = useState(false);
+    const containerRef = useRef(null);
+    const hoverTimeout = useRef(undefined);
+    const pinned = items.filter((i) => i.persistence === "persistent");
+    // Check if current page is already pinned
+    const isCurrentPagePinned = pinned.some((i) => i.type === "page" && i.payload.kind === "page" && i.payload.path === currentPage);
+    // Find the pin item for current page (to unpin)
+    const currentPagePin = pinned.find((i) => i.type === "page" && i.payload.kind === "page" && i.payload.path === currentPage);
+    // Close flyout on outside click
+    useEffect(() => {
+        if (!flyoutOpen)
+            return;
+        const handleClick = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setFlyoutOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, [flyoutOpen]);
+    const handleTogglePin = () => {
+        if (isCurrentPagePinned && currentPagePin) {
+            removeItem(currentPagePin.id);
+        }
+        else {
+            addContextItem({
+                type: "page",
+                label: pageLabel,
+                payload: { kind: "page", path: currentPage, label: pageLabel, meta: navMeta },
+                sourcePage: currentPage,
+                persistence: "persistent",
+            });
+        }
+    };
+    const handleMouseEnter = () => {
+        clearTimeout(hoverTimeout.current);
+        if (pinned.length > 0)
+            setFlyoutOpen(true);
+    };
+    const handleMouseLeave = () => {
+        hoverTimeout.current = setTimeout(() => setFlyoutOpen(false), 200);
+    };
+    if (pinned.length === 0 && !showPinButton)
+        return null;
+    return (_jsxs("div", { className: "relative", ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(TooltipIconButton, { tooltip: isCurrentPagePinned ? "Unpin this page" : "Pin this page", size: "icon", className: cn("shrink-0 relative", compact ? "size-7" : "size-8", isCurrentPagePinned && "text-primary"), onClick: handleTogglePin, children: [isCurrentPagePinned ? (_jsx(PinOff, { className: compact ? "size-3.5" : "size-4" })) : (_jsx(Pin, { className: compact ? "size-3.5" : "size-4" })), pinned.length > 0 && (_jsx("span", { className: cn("absolute rounded-full bg-primary font-medium text-primary-foreground flex items-center justify-center", compact
+                            ? "-top-0.5 -right-0.5 size-3.5 text-[9px]"
+                            : "top-0 right-0 size-3.5 text-[9px]"), children: pinned.length }))] }), flyoutOpen && pinned.length > 0 && (_jsxs("div", { className: cn("absolute z-50 w-64 rounded-lg border border-border bg-background shadow-xl p-2 space-y-1", flyoutDirection === "up" ? "bottom-full mb-2 left-0" : "top-9 right-0"), children: [_jsx("div", { className: "px-1 pb-1 border-b border-border/50", children: _jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Pinned Context" }) }), pinned.map((item) => {
+                        const navPath = getNavigablePath(item);
+                        return (_jsxs("div", { className: "flex items-center gap-1.5 px-1 py-1 rounded hover:bg-muted group/pin", children: [createElement(CONTEXT_ICONS[item.type] ?? TextSelect, {
+                                    className: "size-3 text-primary shrink-0",
+                                }), navPath ? (_jsx("button", { type: "button", onClick: () => {
+                                        navigate(navPath);
+                                        setFlyoutOpen(false);
+                                    }, className: "text-xs text-foreground truncate flex-1 text-left hover:underline", children: item.label })) : (_jsx("span", { className: "text-xs text-foreground truncate flex-1", children: item.label })), _jsx("button", { type: "button", onClick: () => removeItem(item.id), className: cn("p-0.5 rounded hover:bg-primary/10 transition-opacity shrink-0", "opacity-0 group-hover/pin:opacity-100"), "aria-label": `Remove ${item.label}`, children: _jsx(X, { className: "size-3 text-muted-foreground" }) })] }, item.id));
+                    })] }))] }));
+};