@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/dist/lib/use-new-conversation.js

@@ -0,0 +1,62 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+import { useAui } from "@assistant-ui/react";
+import { useStore } from "zustand";
+import { citationStore } from "@iloveagents/foundry-agent";
+import { useAGUIAdapter } from "../components/ag-ui-runtime-provider.js";
+import { useToolPanelStore } from "./tool-panel-store.js";
+import { useAppStore } from "./app-store.js";
+import { useSidebarStore } from "./sidebar-store.js";
+import { useChatLifecycleStore } from "./chat-lifecycle-store.js";
+/**
+ * Shared hook for starting a new conversation.
+ * Used by ChatHeader and Sidebar to keep behavior in sync.
+ */
+export function useNewConversation(options) {
+    const aui = useAui();
+    const { resetThread } = useAGUIAdapter();
+    const navigate = useNavigate();
+    const closePanel = useToolPanelStore((s) => s.closePanel);
+    const resetApp = useAppStore((s) => s.resetAll);
+    const closeMobile = useSidebarStore((s) => s.closeMobile);
+    const clearCitations = useStore(citationStore, (s) => s.clear);
+    return useCallback(() => {
+        const preserved = options?.preserveNavigation
+            ? {
+                currentPage: useAppStore.getState().currentPage,
+                navContext: useAppStore.getState().navContext,
+            }
+            : null;
+        closePanel();
+        resetApp();
+        if (preserved) {
+            useAppStore.setState(preserved);
+        }
+        closeMobile();
+        clearCitations();
+        // Notify the host app that a new thread is starting. Spaces wires
+        // this to clear its active-chat sticky id so the AGUIRuntimeProvider's
+        // ``effectiveThreadId`` advances to a freshly-minted UUID instead of
+        // staying pinned to the previous chat. Must fire BEFORE ``resetThread``
+        // so the next render's history adapter binds to the new id and
+        // doesn't re-hydrate the prior chat's messages — the exact bug this
+        // wiring fixes for the popover (``navigateToChat: false``) path,
+        // where there is no ``/`` navigation to clear sticky for us.
+        useChatLifecycleStore.getState().onNewConversation?.();
+        resetThread();
+        aui.threads().switchToNewThread();
+        if (options?.navigateToChat ?? true) {
+            navigate("/");
+        }
+    }, [
+        closePanel,
+        resetApp,
+        options?.preserveNavigation,
+        closeMobile,
+        clearCitations,
+        resetThread,
+        aui,
+        options?.navigateToChat,
+        navigate,
+    ]);
+}

package/dist/lib/use-page-tools.d.ts

@@ -0,0 +1,27 @@
+/**
+ * usePageTools — hook for pages to register client tools with the agent.
+ *
+ * Call this in any page component to declare tools available on that page.
+ * Tools are registered on mount and removed on unmount, so the agent
+ * only sees tools relevant to the current page.
+ *
+ * @example
+ * ```tsx
+ * function WorkspacePage() {
+ *   usePageTools([
+ *     {
+ *       name: "submit_draft",
+ *       description: "Submit the current draft for review",
+ *       parameters: { type: "object", properties: {}, required: [] },
+ *       execute: async () => {
+ *         // ... submit logic
+ *         return JSON.stringify({ status: "success" });
+ *       },
+ *     },
+ *   ]);
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+import { type ClientToolEntry } from "@iloveagents/foundry-agent";
+export declare function usePageTools(tools: ClientToolEntry[]): void;

package/{src/lib/use-page-tools.ts → dist/lib/use-page-tools.js}

@@ -23,18 +23,16 @@
  * }
  * ```
  */
-
 import { useEffect } from "react";
-import { clientToolRegistry, type ClientToolEntry } from "@iloveagents/foundry-agent";
-
-export function usePageTools(tools: ClientToolEntry[]) {
-  useEffect(() => {
-    clientToolRegistry.getState().registerPageTools(tools);
-    return () => {
-      clientToolRegistry.getState().clearPageTools();
-    };
-    // Registers once on mount, clears on unmount.
-    // Tools array should be stable (defined outside the component or memoized).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+import { clientToolRegistry } from "@iloveagents/foundry-agent";
+export function usePageTools(tools) {
+    useEffect(() => {
+        clientToolRegistry.getState().registerPageTools(tools);
+        return () => {
+            clientToolRegistry.getState().clearPageTools();
+        };
+        // Registers once on mount, clears on unmount.
+        // Tools array should be stable (defined outside the component or memoized).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 }

package/dist/styles.css

@@ -0,0 +1,142 @@
+@theme inline {
+  --radius-xs: calc(var(--radius) - 6px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 14px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-selected: var(--sidebar-selected);
+  --color-sidebar-selected-foreground: var(--sidebar-selected-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-code-block: var(--code-block);
+  --color-code-block-foreground: var(--code-block-foreground);
+}
+
+:root {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.6 0.18 280);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.6 0.18 280);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-selected: var(--muted);
+  --sidebar-selected-foreground: var(--foreground);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --success: oklch(0.58 0.16 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.72 0.16 84);
+  --warning-foreground: oklch(0.3 0.05 84);
+  --info: var(--primary);
+  --info-foreground: var(--primary-foreground);
+  --chart-1: oklch(0.55 0.19 286);
+  --chart-2: oklch(0.56 0.15 240);
+  --chart-3: oklch(0.58 0.13 195);
+  --chart-4: oklch(0.7 0.16 84);
+  --chart-5: oklch(0.63 0.17 20);
+  --code-block: oklch(20% 0 0);
+  --code-block-foreground: oklch(93% 0 0);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.7 0.2 280);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.7 0.2 280);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-selected: color-mix(in srgb, var(--muted) 78%, var(--background) 22%);
+  --sidebar-selected-foreground: var(--foreground);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --success: oklch(0.72 0.14 155);
+  --success-foreground: oklch(0.16 0.01 155);
+  --warning: oklch(0.72 0.13 84);
+  --warning-foreground: oklch(0.2 0.03 84);
+  --info: var(--primary);
+  --info-foreground: var(--primary-foreground);
+  --chart-1: oklch(0.72 0.17 286);
+  --chart-2: oklch(0.74 0.13 240);
+  --chart-3: oklch(0.76 0.12 195);
+  --chart-4: oklch(0.79 0.15 84);
+  --chart-5: oklch(0.74 0.14 20);
+  --code-block: oklch(0.16 0.01 286);
+  --code-block-foreground: oklch(0.9 0.01 286);
+}

package/dist/ui/collapsible.d.ts

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/{src/ui/collapsible.tsx → dist/ui/collapsible.js}

@@ -1,7 +1,5 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/ui/dialog.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { ThemeScope } from "../components/theme-runtime-provider.js";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/55 backdrop-blur-sm", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4", "rounded-[2rem] border border-border bg-background/95 p-6 shadow-2xl duration-200", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", className), ...props, children: [_jsx(ThemeScope, { style: { display: "contents" }, children: children }), showCloseButton ? (_jsx(DialogPrimitive.Close, { className: cn("absolute right-5 top-5 rounded-md p-1 transition-colors hover:bg-muted", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"), "aria-label": "Close", children: _jsx(X, { className: "size-4 text-muted-foreground" }) })) : null] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader({ className, ...props }) {
+    return _jsx("div", { className: cn("flex flex-col gap-1.5 pr-10", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+    return _jsx("div", { className: cn("flex justify-end gap-2", className), ...props });
+}
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold", className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/ui/dropdown-menu.d.ts

@@ -0,0 +1,7 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ui/dropdown-menu.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { forwardRef } from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border", "bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+export const DropdownMenuItem = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn(
+    // ``gap-2`` is the same icon-to-text spacing the framework's
+    // Button primitive uses, so a ``<lucide-icon /> Label`` pattern
+    // inside any menu item renders consistently everywhere without
+    // the consumer needing to remember the override.
+    "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none", "transition-colors focus:bg-accent focus:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props })));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+export const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+export const DropdownMenuLabel = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";

package/dist/ui/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/ui/popover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 8, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 rounded-2xl border border-border bg-popover p-3 text-popover-foreground shadow-xl outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/ui/select.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const selectClassName = "flex h-10 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50";
+declare const Select: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export { Select, selectClassName };

package/dist/ui/select.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const selectClassName = "flex h-10 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50";
+const Select = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("select", { ref: ref, className: cn(selectClassName, className), ...props });
+});
+Select.displayName = "Select";
+export { Select, selectClassName };

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/tooltip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.3.0",
-  "license": "SEE LICENSE IN LICENSE",
+  "version": "0.4.0",
+  "license": "MIT",
   "type": "module",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./styles.css": "./src/styles.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
   },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -16,7 +25,6 @@
     "react-dom": "^19.0.0",
     "react-router": "^7.0.0",
     "@assistant-ui/react": "^0.12.25",
-    "@assistant-ui/react-markdown": "^0.12.9",
     "@ag-ui/client": "^0.0.52",
     "@ag-ui/core": "^0.0.52",
     "zustand": "^5.0.0",
@@ -45,17 +53,28 @@
     "tailwind-merge": "^3.5.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "shiki": "^4.0.0",
-    "@iloveagents/foundry-agent": "0.3.0",
-    "@iloveagents/foundry-web-primitives": "0.3.0"
+    "@iloveagents/foundry-agent": "^0.4.0",
+    "@iloveagents/foundry-web-primitives": "^0.4.0"
   },
   "devDependencies": {
-    "typescript": "~5.9.3",
+    "@ag-ui/client": "^0.0.52",
+    "@ag-ui/core": "^0.0.52",
+    "@assistant-ui/react": "^0.12.25",
+    "@azure/msal-browser": "^5.0.0",
+    "@azure/msal-react": "^5.0.0",
     "@types/react": "^19.2.2",
+    "jsdom": "^28.1.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.0",
+    "typescript": "~5.9.3",
     "vitest": "^4.1.4",
-    "jsdom": "^28.1.0"
+    "zustand": "^5.0.0"
   },
   "scripts": {
-    "test:unit": "vitest run"
+    "build": "tsc -p tsconfig.build.json && node ../../scripts/fix-dts-extensions.mjs dist && cp src/styles.css dist/styles.css",
+    "test:unit": "vitest run",
+    "typecheck": "tsc --noEmit"
   }
 }

package/AGENTS.md

@@ -1,59 +0,0 @@
-React UI core for the AG-UI protocol starter — hooks, stores, extension-point registries, assistant-ui adapter shim, ChatPanel, sidebar, layout components. Published as `@iloveagents/foundry-web-ui`.
-
-Depends on `@iloveagents/foundry-web-primitives` (leaf primitives) and `@iloveagents/foundry-agent` (cross-runtime agent transport: AG-UI runner, vanilla stores, MSAL subpath, service-fetch factory).
-
-# Architecture
-
-Relative imports only (no `@/` alias). Cross-package consumers use `@iloveagents/foundry-web-ui`.
-
-```
-src/
-  components/   ← UI components (sidebar, chat, tool-panel, markdown, etc.)
-  lib/          ← React-coupled stores, the assistant-ui adapter shim,
-                  the React MSAL provider, hooks, utilities.
-  ui/           ← shadcn/radix primitives (tooltip, collapsible, dropdown, dialog, popover, select)
-  index.ts      ← barrel export (all public API)
-```
-
-# Import Boundary (enforced by guard test)
-
-- MUST NOT import from `@lastspace/spaces-web-ui`
-- MUST NOT use `@/` path aliases (relative imports only)
-- MUST NOT import from `features/` or `pages/` (those are app-level)
-- Cross-runtime transport (AG-UI runner, registry, vanilla stores, MSAL token store) lives in `@iloveagents/foundry-agent`. Re-exporting it from this package is forbidden by the no-shim rule (#90/#95).
-
-# Extension Points
-
-SPACES and other feature modules plug in via these registries:
-
-- **NavItem.dnd** (`nav-config.ts`): drag-and-drop behavior on sidebar items
-- **NavItem.dimmed / NavItem.badge** (`nav-config.ts`): visual modifiers on sidebar items
-- **NavGroupCreateAction** (`nav-config.ts`): "+ New" actions on nav group headers
-- **NavGroup.collapsedRail** (`nav-config.ts`): module-supplied renderer for the collapsed sidebar rail. Used when a group's collapsed view isn't a flat icon list — e.g. Spaces' "header link + active workspace's root".
-- **NavFooterAction** (`nav-store.ts`): action buttons in the sidebar footer
-- **Panel renderer registry** (`tool-panel-store.ts`): custom content renderers for the side panel (PDF, entity pages)
-- **Citation handler** (`citationStore` in `@iloveagents/foundry-agent`): handles `[n]` citation clicks in markdown
-- **Tool UI** (via `makeAssistantToolUI` from `@assistant-ui/react`): custom rendering for agent tools
-
-# Adding Extension Points
-
-1. Define interface in the relevant store (e.g., `PanelRendererEntry`)
-2. Add registry array + register function to the store
-3. Component reads from registry and delegates rendering
-4. Feature module calls `registerX()` at init time
-
-# AG-UI Adapter
-
-- This package ships an `AGUIAdapterSDK` shim (`src/lib/ag-ui-adapter.ts`) that implements assistant-ui's `ChatModelAdapter` by wrapping `AGUIRunner` from `@iloveagents/foundry-agent`. The runner does the protocol; the shim translates `RunnerEvent`s into cumulative `ChatModelRunResult` yields.
-- `@assistant-ui/react` must stay on **0.12.x or newer** — 0.11.x has a `_getInitializePromise` runtime regression.
-- Tool UIs use `makeAssistantToolUI(...)` (the v0.12 canonical pattern). The legacy `useAssistantToolUI` hook is no longer used.
-- Hook renames per v0.12: `useAssistantApi → useAui`, `useAssistantState → useAuiState`, `useAssistantEvent → useAuiEvent`.
-
-# Client-Side Tools
-
-Tools live in `clientToolRegistry` (vanilla zustand store in `@iloveagents/foundry-agent`). The runner sends schemas to the backend, intercepts `TOOL_CALL_END` for any client-side tool, executes it locally, and replays the assistant + tool messages on the next turn with the same `toolCallId`.
-
-- **`ui_*`** — global tools registered at app init in `lib/client-tools.ts` (`ui_navigate`, `ui_set_theme`, `ui_open_panel`, `ui_select_item`, `ui_update_content`, `ui_highlight`, `ui_get_context`, `ui_confirm`).
-- **`page_*`** — page-specific tools registered via `usePageTools([{ name, description, parameters, execute }])`.
-
-Custom tool UIs are top-level `makeAssistantToolUI(...)` constants rendered as children inside the `AssistantRuntimeProvider` tree (see `client-tool-executor.tsx`).