@iloveagents/foundry-web-ui 0.20.1 → 0.21.1

package/dist/components/ag-ui-runtime-provider.js

@@ -5,6 +5,7 @@ import { TooltipProvider } from "../ui/tooltip.js";
 import { AGUIAdapterSDK } from "../lib/ag-ui-adapter.js";
 import { FileAttachmentAdapter } from "../lib/attachment-adapter.js";
 import { useAttachmentAdapterStore } from "../lib/attachment-registry.js";
+import { useVoiceAdapterStore } from "../lib/voice-adapter-registry.js";
 import { ShowDocumentToolUI } from "./show-document-tool-ui.js";
 import { ClientToolExecutor } from "./client-tool-executor.js";
 const AGUIAdapterContext = createContext(null);
@@ -27,7 +28,7 @@ export function AGUIRuntimeProvider(props) {
     const [resetKey, setResetKey] = useState(0);
     const resetThread = useCallback(() => setResetKey((p) => p + 1), []);
     const innerKey = `${props.threadId ?? "fresh"}:${resetKey}`;
-    return (_jsx(AGUIRuntimeInner, { ...props, resetThread: resetThread }, innerKey));
+    return _jsx(AGUIRuntimeInner, { ...props, resetThread: resetThread }, innerKey);
 }
 function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapterFactory, resetThread, }) {
     const adapter = useMemo(() => new AGUIAdapterSDK("/api/agent", 
@@ -61,6 +62,13 @@ function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapte
         // factory + urlMatch here.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [historyAdapterFactory, urlMatch]);
+    // Voice is opt-in and host-supplied (see ``registerVoiceAdapter``).
+    // Both slots stay absent unless a module registered one, so a runtime
+    // without voice is byte-for-byte the runtime that existed before:
+    // assistant-ui reports the capability as unavailable and every voice
+    // affordance hides itself.
+    const voiceAdapter = useVoiceAdapterStore((s) => s.voice);
+    const speechAdapter = useVoiceAdapterStore((s) => s.speech);
     const runtime = useLocalRuntime(adapter, {
         adapters: {
             attachments: attachmentAdapter,
@@ -69,6 +77,8 @@ function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapte
             // assistant-ui calls .load() on mount to seed past messages and
             // .append() after every turn.
             ...(historyAdapter ? { history: historyAdapter } : {}),
+            ...(voiceAdapter ? { voice: voiceAdapter } : {}),
+            ...(speechAdapter ? { speech: speechAdapter } : {}),
         },
     });
     return (_jsx(AGUIAdapterContext.Provider, { value: { adapter, resetThread }, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsxs(TooltipProvider, { children: [_jsx(ShowDocumentToolUI, {}), _jsx(ClientToolExecutor, {}), children] }) }) }));

package/dist/components/assistant-chat.d.ts

@@ -23,9 +23,19 @@ export interface ChatContentProps {
      * a bare composer opts OUT.
      */
     showPinButton?: boolean;
+    /**
+     * Composer placeholder. Defaults to `DEFAULT_COMPOSER_PLACEHOLDER`.
+     */
+    placeholder?: string;
 }
+/**
+ * "Message Assistant..." named the machine and told the user nothing. The
+ * invitation is what belongs here: it says the box takes anything, which is
+ * the one thing a first-time user does not know.
+ */
+export declare const DEFAULT_COMPOSER_PLACEHOLDER = "Ask anything";
 /**
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export declare function ChatContent({ starterSuggestions, showPinButton, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatContent({ starterSuggestions, showPinButton, placeholder, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/assistant-chat.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, useAui, useAuiState, useThreadViewport, } from "@assistant-ui/react";
-import { ArrowUp, Copy, Check, RefreshCw, PencilIcon, ChevronLeft, ChevronRight, ChevronDown, Square, Bot, Paperclip, Minimize2, PanelRightClose, PanelRightOpen, } from "lucide-react";
+import { ArrowUp, Copy, Check, RefreshCw, PencilIcon, ChevronLeft, ChevronRight, ChevronDown, Square, Bot, Minimize2, PanelRightClose, PanelRightOpen, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { userAttachmentComponents, composerAttachmentComponents } from "./chat-attachments.js";
 import { SentContextBadges, ComposerContextBadges } from "./context-badges.js";
+import { ComposerAddMenu } from "./composer-add-menu.js";
 import { ContextPins } from "./context-bar.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
-import { ChatComposerBannerSlot } from "./chat-slots.js";
+import { ChatComposerActionsSlot, ChatComposerBannerSlot, useChatThreadSurface, useComposerActionsOwnSend, } from "./chat-slots.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
 import { ChatMessageParts } from "./chat-message-parts.js";
@@ -34,7 +35,10 @@ const AssistantMessage = () => {
 const AssistantActionBar = () => (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 -ml-2 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-4" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-4 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Refresh", size: "icon", children: _jsx(RefreshCw, { className: "size-4" }) }) })] }));
 const EditComposer = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2", children: _jsx("div", { className: "flex items-start justify-end", children: _jsx("div", { className: "w-full max-w-[80%]", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-2xl border border-input", "bg-background shadow-sm", "px-4 py-3"), children: [_jsx(ComposerPrimitive.Input, { autoFocus: true, className: cn("w-full bg-transparent", "text-base text-foreground", "outline-none resize-none", "placeholder:text-muted-foreground") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", children: "Update" }) })] })] }) }) }) }));
 const ComposerActionButton = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Stop generating", children: _jsx(Square, { className: "size-4" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Send message", children: _jsx(ArrowUp, { className: "size-5" }) }) }) })] }));
+    // With nothing typed, a module-supplied control (a voice button) may hold
+    // the send corner instead of a Send that has nothing to send.
+    const actionsOwnSend = useComposerActionsOwnSend();
+    return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ChatComposerActionsSlot, {}), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Stop generating", children: _jsx(Square, { className: "size-4" }) }) }) }), !actionsOwnSend && (_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Send message", children: _jsx(ArrowUp, { className: "size-5" }) }) }) }))] }));
 };
 /**
  * Default starter prompts shown on empty state. Override per-app by passing
@@ -111,22 +115,33 @@ const DropZone = ({ children }) => {
     }, [aui, showDropError]);
     return (_jsxs("div", { className: "relative flex flex-col flex-1 overflow-hidden", onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [children, isDragging && (_jsx("div", { className: cn("absolute inset-0 z-50 flex items-center justify-center pointer-events-none", "bg-background/80 backdrop-blur-sm", "border-2 border-dashed border-primary rounded-xl"), children: _jsx("p", { className: "text-lg text-primary font-medium", children: "Drop files here" }) })), dropError && (_jsx("div", { role: "alert", className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-50 max-w-[90%]", "rounded-md border border-destructive/50 bg-background px-3 py-2", "text-sm text-destructive shadow-md pointer-events-none truncate"), children: dropError }))] }));
 };
+/**
+ * "Message Assistant..." named the machine and told the user nothing. The
+ * invitation is what belongs here: it says the box takes anything, which is
+ * the one thing a first-time user does not know.
+ */
+export const DEFAULT_COMPOSER_PLACEHOLDER = "Ask anything";
 /**
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = true, } = {}) {
+export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = true, placeholder = DEFAULT_COMPOSER_PLACEHOLDER, } = {}) {
+    const ThreadSurface = useChatThreadSurface();
     const isExpanded = useChatBubbleStore((s) => s.isExpanded);
     const collapseChat = useChatBubbleStore((s) => s.collapse);
     const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);
     const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
-    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto bg-background", children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
+    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [ThreadSurface && (
+                            // `overflow-hidden`, not scroll: a surface owns its own layout,
+                            // and a full-bleed one (an avatar cropped to the frame) must be
+                            // able to reach the edges rather than sit in a scroll box.
+                            _jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto bg-background", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,
-                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn(
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), !ThreadSurface && (_jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) }))] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn(
                                     // Query container for the controls inside, so they size
                                     // against the composer rather than the viewport. This one
                                     // is wide, so the effort picker keeps its full label.
-                                    "@container", "flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message Assistant...", rows: 1, className: cn("w-full bg-transparent", "pt-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsxs("div", { className: "flex items-center gap-2 pb-1", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", variant: "ghost", className: "shrink-0", children: _jsx(Paperclip, { className: "size-5" }) }) }), _jsx(ContextPins, { showPinButton: showPinButton })] }), _jsx("div", { className: "flex-1" }), _jsx(ComposerActionButton, {})] })] }) })] })] })] }));
+                                    "@container", "flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 @md:flex-nowrap", children: [_jsxs("div", { className: "order-2 flex shrink-0 items-center gap-1 @md:order-1", children: [_jsx(ComposerAddMenu, { showPin: showPinButton }), _jsx(ContextPins, {})] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: placeholder, rows: 1, className: cn("order-1 w-full bg-transparent", "py-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32", "@md:order-2 @md:w-auto @md:flex-1") }), _jsx("div", { className: "order-3 ml-auto flex shrink-0 items-center gap-2 @md:ml-0", children: _jsx(ComposerActionButton, {}) })] })] }) })] })] })] }));
 }

package/dist/components/chat-bubble.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, useAuiState, useThreadViewport, } from "@assistant-ui/react";
-import { Sparkles, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, Paperclip, RefreshCw, } from "lucide-react";
+import { Sparkles, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, RefreshCw, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { ContextPins } from "./context-bar.js";
 import { ComposerContextBadges, SentContextBadges } from "./context-badges.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
-import { ChatComposerBannerSlot, ChatLauncherBadgeSlot } from "./chat-slots.js";
+import { ComposerAddMenu } from "./composer-add-menu.js";
+import { DEFAULT_COMPOSER_PLACEHOLDER } from "./assistant-chat.js";
+import { ChatComposerActionsSlot, ChatComposerBannerSlot, ChatLauncherBadgeSlot, useChatThreadSurface, useComposerActionsOwnSend, } from "./chat-slots.js";
 import { ChatMessageParts } from "./chat-message-parts.js";
 import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
 import { LoadingIndicator } from "./loading-indicator.js";
@@ -34,6 +36,7 @@ function BubbleScrollToBottomButton() {
     return (_jsx(Button, { variant: "outline", size: "icon", className: "absolute bottom-2 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md size-7", onClick: () => scrollToBottom({ behavior: "smooth" }), children: _jsx(ChevronDown, { className: "size-3" }) }));
 }
 export function ChatBubble() {
+    const ThreadSurface = useChatThreadSurface();
     const isOpen = useChatBubbleStore((s) => s.isOpen);
     const isExpanded = useChatBubbleStore((s) => s.isExpanded);
     const openBubble = useChatBubbleStore((s) => s.open);
@@ -45,6 +48,8 @@ export function ChatBubble() {
     const pageLabel = useAppStore((s) => s.navContext.label);
     const currentPage = useAppStore((s) => s.currentPage);
     const threadActive = useAppStore((s) => s.threadActive);
+    // With nothing typed, a module-supplied control may hold the send corner.
+    const actionsOwnSend = useComposerActionsOwnSend();
     // Draggable position: null = use default CSS anchored with equal left/bottom inset.
     const [dragPos, setDragPos] = useState(null);
     const dragStart = useRef(null);
@@ -93,17 +98,17 @@ export function ChatBubble() {
     // Hide bubble on chat page (already full-screen) and in expanded mode
     if (currentPage === "/" || isExpanded)
         return null;
-    return (_jsxs(_Fragment, { children: [!isOpen && (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none fixed bottom-0 left-0 z-40 hidden md:block", "border-r border-sidebar-border", "bg-gradient-to-b from-sidebar/0 via-sidebar/88 to-sidebar/96", "supports-[backdrop-filter]:backdrop-blur"), style: {
-                    width: isSidebarOpen ? sidebarWidth : RAIL_WIDTH,
-                    height: 64,
-                } })), !isOpen && (_jsxs("div", { className: "fixed z-50 group", style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsx("button", { type: "button", onClick: openBubble, className: cn("size-10 rounded-full", "bg-primary text-primary-foreground shadow-lg", "flex items-center justify-center", "hover:bg-primary/90 transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Ask the AI", children: _jsx(Sparkles, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, "data-chat-surface": "bubble", className: cn("fixed z-50", "rounded-2xl border border-border", "bg-background shadow-2xl", "flex flex-col overflow-hidden", "w-95 h-150"), style: dragPos
-                    ? { left: dragPos.x, top: dragPos.y }
-                    : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Sparkles, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4 pb-3", children: [_jsx(ThreadPrimitive.Messages, { components: {
-                                                                UserMessage: BubbleUserMessage,
-                                                                AssistantMessage: BubbleAssistantMessage,
-                                                            } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn(
-                                            // Query container for the controls inside: the bubble is
-                                            // a narrow panel in a wide window, so they have to size
-                                            // against THIS box, not the viewport.
-                                            "@container", "flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", size: "icon", className: "size-7 shrink-0", children: _jsx(Paperclip, { className: "size-3.5" }) }) }), _jsx(ContextPins, { compact: true, showPinButton: true })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message...", rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) })] })] }) })] })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ComposerSubmitBridge, {}), _jsxs(_Fragment, { children: [!isOpen && (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none fixed bottom-0 left-0 z-40 hidden md:block", "border-r border-sidebar-border", "bg-gradient-to-b from-sidebar/0 via-sidebar/88 to-sidebar/96", "supports-[backdrop-filter]:backdrop-blur"), style: {
+                            width: isSidebarOpen ? sidebarWidth : RAIL_WIDTH,
+                            height: 64,
+                        } })), !isOpen && (_jsxs("div", { className: "fixed z-50 group", style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsx("button", { type: "button", onClick: openBubble, className: cn("size-10 rounded-full", "bg-primary text-primary-foreground shadow-lg", "flex items-center justify-center", "hover:bg-primary/90 transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Ask the AI", children: _jsx(Sparkles, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, "data-chat-surface": "bubble", className: cn("fixed z-50", "rounded-2xl border border-border", "bg-background shadow-2xl", "flex flex-col overflow-hidden", "w-95 h-150"), style: dragPos
+                            ? { left: dragPos.x, top: dragPos.y }
+                            : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Sparkles, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [ThreadSurface && (_jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4 pb-3", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                                                                        UserMessage: BubbleUserMessage,
+                                                                        AssistantMessage: BubbleAssistantMessage,
+                                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: !ThreadSurface && _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn(
+                                                    // Query container for the controls inside: the bubble is
+                                                    // a narrow panel in a wide window, so they have to size
+                                                    // against THIS box, not the viewport.
+                                                    "@container", "flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx(ComposerAddMenu, { compact: true }), _jsx(ContextPins, { compact: true })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: DEFAULT_COMPOSER_PLACEHOLDER, rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ChatComposerActionsSlot, {}), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), !actionsOwnSend && (_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) }))] })] }) })] })] })] }))] })] }));
 }

package/dist/components/chat-slots.d.ts

@@ -18,11 +18,35 @@
  *     wrapper (a positioned ``group`` container around the round button),
  *     so a badge can position itself absolutely over the button and use
  *     ``group-hover:`` styles for a hover flyout.
+ *   - ``composerActions`` — in the composer's trailing control row, just
+ *     before Send, in BOTH the full chat and the floating bubble panel.
+ *     For controls that are an alternative *way to send* rather than
+ *     content about the thread — a push-to-talk mic, say. Leading-edge
+ *     controls (attach, context pins) stay owned by the composer itself.
+ *
+ *   - ``threadSurface`` — rendered *instead of* the message viewport, for a
+ *     mode that replaces the conversation rather than adding to it. A live
+ *     voice call is the case it exists for: while you are talking, the
+ *     transcript scrolling past is not what you are looking at. Unlike the
+ *     other slots this one is set and cleared at runtime — registering a
+ *     component IS the takeover, clearing it hands the thread back.
+ *
+ * A module that registers ``composerActions`` may also claim the Send
+ * position while the composer is empty (``composerActionsReplaceSend``).
+ * That is the shape a voice control wants: nothing has been typed, so Send
+ * has nothing to do, and the corner belongs to the other way of asking.
+ * Type one character and Send comes back. Opt-in, because a slot holding
+ * something unrelated must not make Send disappear.
  */
 import type { ComponentType } from "react";
 interface ChatSlotsState {
     composerBanner: ComponentType | null;
     launcherBadge: ComponentType | null;
+    composerActions: ComponentType | null;
+    /** Let ``composerActions`` stand in for Send while the composer is empty. */
+    composerActionsReplaceSend: boolean;
+    /** Replaces the message viewport entirely while set. */
+    threadSurface: ComponentType | null;
 }
 export declare const useChatSlotsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatSlotsState>>;
 /**
@@ -34,4 +58,15 @@ export declare const useChatSlotsStore: import("zustand").UseBoundStore<import("
 export declare function registerChatSlots(slots: Partial<ChatSlotsState>): void;
 export declare function ChatComposerBannerSlot(): import("react/jsx-runtime").JSX.Element | null;
 export declare function ChatLauncherBadgeSlot(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatComposerActionsSlot(): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * True when Send should stand aside for the ``composerActions`` slot: a
+ * module claimed the position and there is nothing to send.
+ */
+export declare function useComposerActionsOwnSend(): boolean;
+/**
+ * The module-supplied surface that replaces the message viewport, or null
+ * when the thread should render normally.
+ */
+export declare function useChatThreadSurface(): ComponentType | null;
 export {};

package/dist/components/chat-slots.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { create } from "zustand";
+import { useAuiState } from "@assistant-ui/react";
 export const useChatSlotsStore = create(() => ({
     composerBanner: null,
     launcherBadge: null,
+    composerActions: null,
+    composerActionsReplaceSend: false,
+    threadSurface: null,
 }));
 /**
  * Register chat slot components. Later calls overwrite only the keys
@@ -16,6 +20,13 @@ export function registerChatSlots(slots) {
         next.composerBanner = slots.composerBanner;
     if (slots.launcherBadge !== undefined)
         next.launcherBadge = slots.launcherBadge;
+    if (slots.composerActions !== undefined)
+        next.composerActions = slots.composerActions;
+    if (slots.composerActionsReplaceSend !== undefined) {
+        next.composerActionsReplaceSend = slots.composerActionsReplaceSend;
+    }
+    if (slots.threadSurface !== undefined)
+        next.threadSurface = slots.threadSurface;
     useChatSlotsStore.setState(next);
 }
 export function ChatComposerBannerSlot() {
@@ -26,3 +37,23 @@ export function ChatLauncherBadgeSlot() {
     const Badge = useChatSlotsStore((s) => s.launcherBadge);
     return Badge ? _jsx(Badge, {}) : null;
 }
+export function ChatComposerActionsSlot() {
+    const Actions = useChatSlotsStore((s) => s.composerActions);
+    return Actions ? _jsx(Actions, {}) : null;
+}
+/**
+ * True when Send should stand aside for the ``composerActions`` slot: a
+ * module claimed the position and there is nothing to send.
+ */
+export function useComposerActionsOwnSend() {
+    const claimed = useChatSlotsStore((s) => s.composerActionsReplaceSend && !!s.composerActions);
+    const isEmpty = useAuiState((s) => s.optional.composer?.isEmpty ?? true);
+    return claimed && isEmpty;
+}
+/**
+ * The module-supplied surface that replaces the message viewport, or null
+ * when the thread should render normally.
+ */
+export function useChatThreadSurface() {
+    return useChatSlotsStore((s) => s.threadSurface);
+}

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

@@ -2,5 +2,5 @@ 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] }));
+    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/composer-add-menu.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The composer's leading "+" — one affordance for everything you can add to
+ * a turn.
+ *
+ * It replaces a row of single-purpose icons (paperclip, pin, and whatever
+ * came next). That row grows every time the product learns a new trick, and
+ * each icon costs the user a guess about what it does; a labelled menu costs
+ * one click and reads itself. Pinning in particular is a power feature that
+ * does not deserve permanent residency next to the text field.
+ *
+ * Attaching still goes through `ComposerPrimitive.AddAttachment`, so the
+ * file picker keeps whatever `accept` filter the registered attachment
+ * adapter declares — reimplementing the picker here would drift from it.
+ */
+import type { FC } from "react";
+export interface ComposerAddMenuProps {
+    /** Bubble-composer sizing. */
+    compact?: boolean;
+    /**
+     * Offer "Pin this page". A bare composer with no page behind it (or a host
+     * that does not use page context) opts out.
+     */
+    showPin?: boolean;
+}
+export declare const ComposerAddMenu: FC<ComposerAddMenuProps>;

package/dist/components/composer-add-menu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposerPrimitive } from "@assistant-ui/react";
+import { Paperclip, Pin, PinOff, Plus } from "lucide-react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { usePagePin } from "./context-bar.js";
+export const ComposerAddMenu = ({ compact = false, showPin = true }) => {
+    const { isPinned, toggle } = usePagePin();
+    const icon = compact ? "size-3.5" : "size-4";
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Add to this message", className: cn("shrink-0 rounded-full", compact ? "size-7" : "size-9"), children: _jsx(Plus, { className: compact ? "size-4" : "size-5" }) }) }), _jsxs(DropdownMenuContent, { align: "start", side: "top", className: "w-52", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsxs(DropdownMenuItem, { children: [_jsx(Paperclip, { className: icon }), "Attach file"] }) }), showPin && (_jsxs(DropdownMenuItem, { onSelect: (event) => {
+                            // Keep the menu anchored while the pin badge appears, so the
+                            // user sees the result of what they just clicked.
+                            event.preventDefault();
+                            toggle();
+                        }, children: [isPinned ? _jsx(PinOff, { className: icon }) : _jsx(Pin, { className: icon }), isPinned ? "Unpin this page" : "Pin this page"] }))] })] }));
+};

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

@@ -1 +1,26 @@
+/**
+ * Sends text a module submitted on the user's behalf — a spoken turn, most of
+ * the time — through the ordinary composer.
+ *
+ * The composer stays editable while a module is using it, so the user's own
+ * draft can be sitting in it when a turn arrives. Sending would take that with
+ * it, so the text is saved and put back.
+ *
+ * **Attachments are NOT preserved**, and that is a decision rather than an
+ * oversight. There is no way to send without them — `SendOptions` is
+ * `{ startRun, steer }` — so preserving them means lifting them out of the
+ * composer, sending, and adding them back. That is asynchronous, through a
+ * host-supplied adapter, and it produced four separate defects in short order:
+ * a cancellation check that dropped them mid-sequence, two turns interleaving
+ * their save/restore, a stalled upload wedging every later turn, and a
+ * timed-out operation landing on a later turn instead. Each fix was correct
+ * and each one exposed the next.
+ *
+ * So this stays synchronous, which is what makes it easy to be sure about: no
+ * queue, no timeout, no window in which a second turn can interleave. A file
+ * attached but not yet sent goes with the spoken turn, exactly as it did
+ * before any of this — a real limitation, and a smaller one than the failures
+ * that came with trying to remove it. It is worth revisiting if the composer
+ * ever grows a way to send without attachments.
+ */
 export declare function ComposerSubmitBridge(): null;

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

@@ -1,17 +1,51 @@
 import { useEffect } from "react";
 import { useAui } from "@assistant-ui/react";
 import { useComposerSubmitStore } from "../lib/composer-submit-store.js";
+/**
+ * Sends text a module submitted on the user's behalf — a spoken turn, most of
+ * the time — through the ordinary composer.
+ *
+ * The composer stays editable while a module is using it, so the user's own
+ * draft can be sitting in it when a turn arrives. Sending would take that with
+ * it, so the text is saved and put back.
+ *
+ * **Attachments are NOT preserved**, and that is a decision rather than an
+ * oversight. There is no way to send without them — `SendOptions` is
+ * `{ startRun, steer }` — so preserving them means lifting them out of the
+ * composer, sending, and adding them back. That is asynchronous, through a
+ * host-supplied adapter, and it produced four separate defects in short order:
+ * a cancellation check that dropped them mid-sequence, two turns interleaving
+ * their save/restore, a stalled upload wedging every later turn, and a
+ * timed-out operation landing on a later turn instead. Each fix was correct
+ * and each one exposed the next.
+ *
+ * So this stays synchronous, which is what makes it easy to be sure about: no
+ * queue, no timeout, no window in which a second turn can interleave. A file
+ * attached but not yet sent goes with the spoken turn, exactly as it did
+ * before any of this — a real limitation, and a smaller one than the failures
+ * that came with trying to remove it. It is worth revisiting if the composer
+ * ever grows a way to send without attachments.
+ */
 export function ComposerSubmitBridge() {
     const aui = useAui();
     const pending = useComposerSubmitStore((s) => s.pending);
     useEffect(() => {
         if (!pending)
             return;
+        // Claim first, send second. Several bridges may be mounted at once, and
+        // StrictMode runs this effect twice; both would otherwise send the same
+        // text before either had cleared it.
+        if (!useComposerSubmitStore.getState().claim(pending.id))
+            return;
+        const draft = aui.composer.getState().text;
         // send() starts the run for the queued text; steering/queueing semantics
         // are handled by the composer client (assistant-ui >= 0.15).
         aui.composer.setText(pending.text);
         aui.composer.send();
-        useComposerSubmitStore.getState().consume(pending.id);
+        // send() clears the composer, so this restores the user's own text into an
+        // empty box rather than appending it to the turn just sent.
+        if (draft)
+            aui.composer.setText(draft);
     }, [aui, pending]);
     return null;
 }

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

@@ -37,5 +37,14 @@ interface ContextPinsProps {
  * @internal Exported for unit tests; not part of the public API.
  */
 export declare function getNavigablePath(item: ContextItem): string | null;
+/**
+ * The "is this page pinned, and how do I flip that" logic, shared by the
+ * pin badge here and the composer's add-menu. Two call sites deciding
+ * independently what "pinned" means is how they end up disagreeing.
+ */
+export declare function usePagePin(): {
+    isPinned: boolean;
+    toggle: () => void;
+};
 export declare const ContextPins: FC<ContextPinsProps>;
 export {};

package/dist/components/context-bar.js

@@ -57,22 +57,49 @@ export function getNavigablePath(item) {
     }
     return null;
 }
-export const ContextPins = ({ showPinButton = false, compact = false, flyoutDirection = "up", }) => {
+/**
+ * The "is this page pinned, and how do I flip that" logic, shared by the
+ * pin badge here and the composer's add-menu. Two call sites deciding
+ * independently what "pinned" means is how they end up disagreeing.
+ */
+export function usePagePin() {
     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 currentPagePin = items.find((i) => i.persistence === "persistent" &&
+        i.type === "page" &&
+        i.payload.kind === "page" &&
+        i.payload.path === currentPage);
+    return {
+        isPinned: !!currentPagePin,
+        toggle: () => {
+            if (currentPagePin) {
+                removeItem(currentPagePin.id);
+                return;
+            }
+            addContextItem({
+                type: "page",
+                label: pageLabel,
+                payload: { kind: "page", path: currentPage, label: pageLabel, meta: navMeta },
+                sourcePage: currentPage,
+                persistence: "persistent",
+            });
+        },
+    };
+}
+export const ContextPins = ({ showPinButton = false, compact = false, flyoutDirection = "up", }) => {
+    const items = useAppStore((s) => s.contextItems);
+    const removeItem = useAppStore((s) => s.removeContextItem);
+    const currentPage = useAppStore((s) => s.currentPage);
+    const { isPinned: isCurrentPagePinned, toggle: handleTogglePin } = usePagePin();
     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)
@@ -85,20 +112,6 @@ export const ContextPins = ({ showPinButton = false, compact = false, flyoutDire
         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)

package/dist/components/data-table/data-table-selection-bar.d.ts

@@ -5,7 +5,8 @@
  * habit across the platform (and the same set the chat agent reads).
  */
 import type { Row, Table } from "@tanstack/react-table";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
+export declare const SelectionBarSingleLine: import("react").Provider<boolean>;
 export interface DataTableSelectionBarProps<T> {
     table: Table<T>;
     /** Bulk actions for the selected rows. */

package/dist/components/data-table/data-table-selection-bar.js

@@ -1,14 +1,34 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { X } from "lucide-react";
+import { createContext, useContext } from "react";
 import { Button, cn } from "@iloveagents/foundry-web-primitives";
+/**
+ * Whether the bar has a row to itself or shares one.
+ *
+ * The toolbar's non-stacked layout puts the bar on the SAME line as the
+ * search, in a region that scrolls sideways rather than growing — because a
+ * toolbar that gains height on the first tick shoves the table down under
+ * the cursor mid-click, which is the whole reason the bar moved into the
+ * toolbar. A bar that wraps internally defeats that just as thoroughly as
+ * one that wraps externally, and its nested actions container is a second
+ * place it can happen (review catch).
+ *
+ * The container knows the constraint and the bar owns the class names, so
+ * the policy travels between them instead of the toolbar reaching in with a
+ * descendant selector — which would apply to a host's own `selectionBar`
+ * node too, and lose to it on specificity besides.
+ */
+const SelectionBarSingleLineContext = createContext(false);
+export const SelectionBarSingleLine = SelectionBarSingleLineContext.Provider;
 export function DataTableSelectionBar({ table, children, label = "row", plural, className, }) {
     // Every selected row, not only the ones the current filter shows: a
     // selection the user cannot see is still a selection, and hiding the bar
     // would take away the only way to clear it.
     const rows = table.getSelectedRowModel().rows;
+    const singleLine = useContext(SelectionBarSingleLineContext);
     if (rows.length === 0)
         return null;
-    return (_jsxs("div", { "data-selection-bar": "", role: "status", className: cn("flex min-h-8 flex-wrap items-center gap-2 rounded-xl bg-primary/5 px-3 text-sm", className), children: [_jsxs("span", { className: "font-medium", children: [rows.length, " ", rows.length === 1 ? label : (plural ?? `${label}s`), " selected"] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: typeof children === "function" ? children(rows) : children }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", 
+    return (_jsxs("div", { "data-selection-bar": "", role: "status", className: cn("flex min-h-8 items-center gap-2 rounded-xl bg-primary/5 px-3 text-sm", singleLine ? "flex-nowrap whitespace-nowrap" : "flex-wrap", className), children: [_jsxs("span", { className: "font-medium", children: [rows.length, " ", rows.length === 1 ? label : (plural ?? `${label}s`), " selected"] }), _jsx("div", { "data-selection-actions": "", className: cn("flex items-center gap-2", singleLine ? "flex-nowrap" : "flex-wrap"), children: typeof children === "function" ? children(rows) : children }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", 
                 // `true` = the blank state, not the caller's `initialState`, which
                 // would make "Clear" resurrect rows.
                 onClick: () => table.resetRowSelection(true), className: "ml-auto h-8 rounded-lg px-2.5", children: ["Clear", _jsx(X, { className: "size-4" })] })] }));

package/dist/components/data-table/data-table-toolbar.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Maximize2, Minimize2, Plus, Search, SlidersHorizontal, X } from "lucide-react";
 import { useState } from "react";
 import { Button, Input, cn } from "@iloveagents/foundry-web-primitives";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter.js";
+import { SelectionBarSingleLine } from "./data-table-selection-bar.js";
 import { useDataTableFrame } from "./data-table-frame.js";
 import { DataTableViewOptions } from "./data-table-view-options.js";
 import { columnLabel, normalizeFacetValue } from "./facets.js";
@@ -75,7 +76,32 @@ export function DataTableToolbar({ table, facets = [], layout = "auto", collapsi
     const filtersToggle = canCollapse ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", "data-filters-toggle": "", "aria-expanded": showFilters, onClick: () => setFiltersOpen((current) => !current), className: cn("h-8 rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26", activeFilters > 0 && "border-primary/30"), children: [_jsx(SlidersHorizontal, { className: "size-4" }), "Filters", activeFilters > 0 ? (_jsxs("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-normal tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: activeFilters }), _jsxs("span", { className: "sr-only", children: [activeFilters, " active"] })] })) : null] })) : null;
     const rightGroup = actions || viewOptions || focusButton || filtersToggle ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [filtersToggle, actions, viewOptions ? _jsx(DataTableViewOptions, { table: table }) : null, focusButton] })) : null;
     if (!stacked) {
-        return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [searchNode, facetNodes, addFilterNode, children, resetNode] }), rightGroup ? _jsx("div", { className: "ml-auto", children: rightGroup }) : null] }), showSelectionBar ? _jsx("div", { "data-selection-row": "", children: selectionBar }) : null] }));
+        return (
+        // A stable hook for tests and hosts, rather than leaving them to
+        // match on Tailwind classes — a selector that silently stops
+        // matching is how an assertion starts passing for the wrong reason
+        // (review catch).
+        _jsx("div", { "data-slot": "data-table-toolbar", className: cn("flex flex-col gap-2", className), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { "data-toolbar-lead": showSelectionBar ? "selection" : "filters", className: cn("flex min-w-0 flex-1 items-center gap-2", 
+                        // Facets genuinely want rows: six of them in a narrow pane
+                        // should stack rather than scroll off the side. A selection
+                        // bar is the opposite — one row by definition. Left wrapping,
+                        // it drops below the search as soon as the search alone is
+                        // wider than the space, which grows the toolbar again and is
+                        // the jump this whole change exists to remove (review catch).
+                        showSelectionBar ? "flex-nowrap" : "flex-wrap"), children: [searchNode, showSelectionBar ? (
+                            // The bar shares this row with a search that has a width
+                            // floor and a right group that does not shrink, so in a
+                            // narrow pane it gets squeezed. It scrolls rather than
+                            // wrapping inside itself — the row stays exactly one high.
+                            //
+                            // And the scrollbar itself stays out of layout. A classic,
+                            // space-consuming one — Windows and Linux by default, macOS
+                            // set to "always show" — appears only once the bar overflows,
+                            // which is only once something is ticked, so its height lands
+                            // on the toolbar as the same jump by another route (review
+                            // catch). `[data-selection-row]` in `styles.css` keeps it out
+                            // of layout; hiding the widget does not hide the scrolling.
+                            _jsx("div", { "data-selection-row": "", className: "min-w-0 flex-1 overflow-x-auto", children: _jsx(SelectionBarSingleLine, { value: true, children: selectionBar }) })) : (_jsxs(_Fragment, { children: [facetNodes, addFilterNode, children, resetNode] }))] }), rightGroup ? _jsx("div", { className: "ml-auto", children: rightGroup }) : null] }) }));
     }
-    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [searchNode, rightGroup ? _jsx("div", { className: "ml-auto", children: rightGroup }) : null] }), showSelectionBar ? (_jsx("div", { "data-selection-row": "", children: selectionBar })) : showFilters ? (_jsxs("div", { "data-filter-row": "", className: "flex flex-wrap items-center gap-2", children: [facetNodes, addFilterNode, children, resetNode] })) : null] }));
+    return (_jsxs("div", { "data-slot": "data-table-toolbar", className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [searchNode, rightGroup ? _jsx("div", { className: "ml-auto", children: rightGroup }) : null] }), showSelectionBar ? (_jsx("div", { "data-selection-row": "", children: selectionBar })) : showFilters ? (_jsxs("div", { "data-filter-row": "", className: "flex flex-wrap items-center gap-2", children: [facetNodes, addFilterNode, children, resetNode] })) : null] }));
 }

package/dist/components/global-selection-popover.js

@@ -11,7 +11,7 @@ import { cn } from "@iloveagents/foundry-web-primitives";
 import { useAppStore } from "../lib/app-store.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { submitComposerText } from "../lib/composer-submit-store.js";
-import { resolveSelectionContext, } from "../lib/selection-context.js";
+import { resolveSelectionContext } from "../lib/selection-context.js";
 const ACTION_POPOVER_HEIGHT = 38;
 const SIMPLE_POPOVER_WIDTH = 126;
 const ACTION_POPOVER_WIDTH = 236;

package/dist/components/theme-runtime-provider.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { resolveThemeRuntime, } from "../lib/theme-runtime.js";
 const ThemeRuntimeContext = createContext(null);
+/** True inside a ThemeScope — the outermost one owns the document. */
+const ThemeScopeNestedContext = createContext(false);
 export function ThemeRuntimeProvider({ layers, mode, children, }) {
     const fallback = useRef(resolveThemeRuntime([], "system"));
     const [systemPrefersDark, setSystemPrefersDark] = useState(() => typeof window !== "undefined"
@@ -33,9 +35,149 @@ export function ThemeRuntimeProvider({ layers, mode, children, }) {
 export function useThemeRuntime() {
     return useContext(ThemeRuntimeContext) ?? resolveThemeRuntime([], "system");
 }
+const rootThemeStack = [];
+const rootThemeBase = new Map();
+// What this module last put on the element, per name. Anything else there
+// now came from outside, and outside wins — see `applyTopRootTheme`. Value
+// AND priority: a host re-declaring the same value as `!important` has said
+// something new about that name, and comparing values alone would read it as
+// our own write and quietly drop the flag (review catch).
+const rootThemeWritten = new Map();
+function currentlyOurs(root, name) {
+    const written = rootThemeWritten.get(name);
+    if (written === undefined)
+        return true;
+    return (root.style.getPropertyValue(name) === written.value
+        && root.style.getPropertyPriority(name) === written.priority);
+}
+function rememberWrite(root, name) {
+    // Read back rather than storing what we passed: the browser normalises the
+    // value, and a comparison against the un-normalised string would read
+    // every one of our own writes as somebody else's.
+    rootThemeWritten.set(name, {
+        value: root.style.getPropertyValue(name),
+        priority: root.style.getPropertyPriority(name),
+    });
+}
+function applyTopRootTheme(root) {
+    const top = rootThemeStack[rootThemeStack.length - 1];
+    for (const [name, base] of rootThemeBase) {
+        if (!currentlyOurs(root, name)) {
+            // Someone outside this module wrote this name after we did — a host
+            // theme manager, a design-mode preview, a test. Their write is newer
+            // than anything we have to say about it, so we neither overwrite it
+            // now nor restore over it later: the name is theirs from here
+            // (review catch).
+            continue;
+        }
+        const next = top?.vars[name];
+        if (next !== undefined) {
+            root.style.setProperty(name, String(next));
+        }
+        else if (base.value) {
+            // Value AND priority: a host token declared `!important` keeps its
+            // flag, or anything else can start overriding a theme it owns.
+            root.style.setProperty(name, base.value, base.priority);
+        }
+        else {
+            root.style.removeProperty(name);
+            rootThemeWritten.delete(name);
+            continue;
+        }
+        rememberWrite(root, name);
+    }
+}
+/**
+ * Publish `vars` on the document for `id`, claiming a place in the stack the
+ * first time and KEEPING it afterwards.
+ *
+ * Keeping it is the point: a scope whose theme merely changes — a rerender
+ * that hands back a new `variables` object, even a semantically identical
+ * one from an inline `layers` array — must not jump over a scope that
+ * mounted after it. Re-registering on every dependency change would make
+ * the newest write win instead of the newest owner (review catch).
+ */
+function writeRootTheme(root, id, vars) {
+    for (const name of Object.keys(vars)) {
+        if (!rootThemeBase.has(name)) {
+            rootThemeBase.set(name, {
+                value: root.style.getPropertyValue(name),
+                priority: root.style.getPropertyPriority(name),
+            });
+        }
+    }
+    const existing = rootThemeStack.find((write) => write.id === id);
+    if (existing)
+        existing.vars = vars;
+    else
+        rootThemeStack.push({ id, vars });
+    applyTopRootTheme(root);
+}
+/** Give up `id`'s place, wherever in the stack it sits. */
+function releaseRootTheme(root, id) {
+    const at = rootThemeStack.findIndex((write) => write.id === id);
+    if (at >= 0)
+        rootThemeStack.splice(at, 1);
+    applyTopRootTheme(root);
+    if (rootThemeStack.length === 0) {
+        rootThemeBase.clear();
+        rootThemeWritten.clear();
+    }
+}
 export function ThemeScope({ children, className, style, }) {
     const runtime = useThemeRuntime();
-    return (_jsx("div", { className: className, style: { ...runtime.variables, fontFamily: "var(--font-body)", ...style }, children: children }));
+    const nested = useContext(ThemeScopeNestedContext);
+    // Variables on this div alone reach only what renders INSIDE it. Radix
+    // portals mount into document.body, outside it, so every dropdown,
+    // popover, select and tooltip fell back to :root — the base preset —
+    // while the page around them wore the customer's theme. `dialog` papered
+    // over its own case with a nested ThemeScope; that fixes one portal and
+    // leaves the next one to rediscover the bug.
+    //
+    // The outermost scope publishes to the document element instead, so
+    // anything portalled anywhere inherits. Nested scopes keep the div only:
+    // they exist to theme a subtree differently, and must not overwrite the
+    // document with their own values.
+    //
+    // Residual, stated because it is a real limit and not an oversight: a
+    // NESTED scope's own portalled content still resolves the document's
+    // (outermost) theme, because the portal escapes the nested div and the
+    // nested scope deliberately does not publish. That is strictly better
+    // than before — such content used to get the base `:root` preset rather
+    // than any theme at all — and the remedy already exists and is used:
+    // wrap the portalled content in a `ThemeScope`, as `ui/dialog.tsx` does
+    // with `display: contents`. Context reaches through a portal, so the
+    // nested scope's variables land on the portalled subtree (review catch).
+    // BEFORE paint, not after. A portal that exists on the very first render —
+    // a default-open dialog, an overlay restored during hydration — would
+    // otherwise paint once against the base `:root` preset and then correct
+    // itself: the mismatched-theme flash this exists to remove, in miniature
+    // (review catch).
+    // The identity of THIS scope, stable for its whole life. Its place in the
+    // stack is claimed once and released once; changing its theme in between
+    // must not re-order it (review catch).
+    const idRef = useRef(undefined);
+    idRef.current ?? (idRef.current = Symbol("theme-scope"));
+    useLayoutEffect(() => {
+        if (nested || typeof document === "undefined")
+            return;
+        const root = document.documentElement;
+        const id = idRef.current;
+        return () => releaseRootTheme(root, id);
+    }, [nested]);
+    useLayoutEffect(() => {
+        if (nested || typeof document === "undefined")
+            return;
+        // `font-family` rides along as one more name: `<html>` needs it set,
+        // not just `--font-body` defined, or portalled content keeps the host's
+        // font (review catch).
+        const vars = {
+            ...runtime.variables,
+            "font-family": "var(--font-body)",
+        };
+        writeRootTheme(document.documentElement, idRef.current, vars);
+    }, [nested, runtime.variables]);
+    return (_jsx(ThemeScopeNestedContext.Provider, { value: true, children: _jsx("div", { className: className, style: { ...runtime.variables, fontFamily: "var(--font-body)", ...style }, children: children }) }));
 }
 export function ThemeDocumentMetadata() {
     const runtime = useThemeRuntime();

package/dist/components/tool-call-card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader2, CheckCircle2, XCircle, AlertCircle, ChevronDown } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../ui/collapsible.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useState } from "react";
 export function ToolCallCard({ icon, title, description, status, action, children, className, }) {
     const [isOpen, setIsOpen] = useState(false);

package/dist/index.d.ts

@@ -5,10 +5,11 @@ export { MarkdownText, markdownComponents } from "./components/markdown-text.js"
 export { ClientToolExecutor } from "./components/client-tool-executor.js";
 export { AGUIRuntimeProvider, useAGUIAdapter } from "./components/ag-ui-runtime-provider.js";
 export type { AGUIChatConversationFactoryArgs, AGUIHistoryAdapterFactory, } from "./components/ag-ui-runtime-provider.js";
-export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.js";
+export { ChatContent, DEFAULT_STARTER_SUGGESTIONS, DEFAULT_COMPOSER_PLACEHOLDER, } from "./components/assistant-chat.js";
+export { ComposerAddMenu, type ComposerAddMenuProps } from "./components/composer-add-menu.js";
 export type { ChatContentProps } from "./components/assistant-chat.js";
 export { ChatBubble } from "./components/chat-bubble.js";
-export { registerChatSlots, useChatSlotsStore, ChatComposerBannerSlot, ChatLauncherBadgeSlot, } from "./components/chat-slots.js";
+export { registerChatSlots, useChatSlotsStore, ChatComposerBannerSlot, ChatLauncherBadgeSlot, ChatComposerActionsSlot, useComposerActionsOwnSend, useChatThreadSurface, } from "./components/chat-slots.js";
 export { ChatHeader } from "./components/chat-header.js";
 export { ComposerAttachment, UserMessageAttachment, userAttachmentComponents, composerAttachmentComponents, } from "./components/chat-attachments.js";
 export { ShowDocumentToolUI } from "./components/show-document-tool-ui.js";
@@ -18,7 +19,7 @@ export { ToolFallback } from "./components/tool-fallback.js";
 export { ConfirmationCard } from "./components/confirmation-card.js";
 export { TooltipIconButton } from "./components/tooltip-icon-button.js";
 export { ComposerContextBadges, SentContextBadges } from "./components/context-badges.js";
-export { ContextPins } from "./components/context-bar.js";
+export { ContextPins, usePagePin } from "./components/context-bar.js";
 export { SelectionPopover } from "./components/selection-popover.js";
 export { GlobalSelectionPopover } from "./components/global-selection-popover.js";
 export { LoadingIndicator } from "./components/loading-indicator.js";
@@ -84,6 +85,7 @@ export { useNewConversation } from "./lib/use-new-conversation.js";
 export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.js";
 export { FileAttachmentAdapter, resolveMimeType } from "./lib/attachment-adapter.js";
 export { registerAttachmentAdapter, useAttachmentAdapterStore } from "./lib/attachment-registry.js";
+export { registerVoiceAdapter, registerSpeechAdapter, useVoiceAdapterStore, } from "./lib/voice-adapter-registry.js";
 export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
 export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
 export { AuthProvider } from "./lib/auth-provider.js";

package/dist/index.js

@@ -5,9 +5,10 @@ export { ToolPanelLayout } from "./components/tool-panel-layout.js";
 export { MarkdownText, markdownComponents } from "./components/markdown-text.js";
 export { ClientToolExecutor } from "./components/client-tool-executor.js";
 export { AGUIRuntimeProvider, useAGUIAdapter } from "./components/ag-ui-runtime-provider.js";
-export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.js";
+export { ChatContent, DEFAULT_STARTER_SUGGESTIONS, DEFAULT_COMPOSER_PLACEHOLDER, } from "./components/assistant-chat.js";
+export { ComposerAddMenu } from "./components/composer-add-menu.js";
 export { ChatBubble } from "./components/chat-bubble.js";
-export { registerChatSlots, useChatSlotsStore, ChatComposerBannerSlot, ChatLauncherBadgeSlot, } from "./components/chat-slots.js";
+export { registerChatSlots, useChatSlotsStore, ChatComposerBannerSlot, ChatLauncherBadgeSlot, ChatComposerActionsSlot, useComposerActionsOwnSend, useChatThreadSurface, } from "./components/chat-slots.js";
 export { ChatHeader } from "./components/chat-header.js";
 export { ComposerAttachment, UserMessageAttachment, userAttachmentComponents, composerAttachmentComponents, } from "./components/chat-attachments.js";
 export { ShowDocumentToolUI } from "./components/show-document-tool-ui.js";
@@ -16,7 +17,7 @@ export { ToolFallback } from "./components/tool-fallback.js";
 export { ConfirmationCard } from "./components/confirmation-card.js";
 export { TooltipIconButton } from "./components/tooltip-icon-button.js";
 export { ComposerContextBadges, SentContextBadges } from "./components/context-badges.js";
-export { ContextPins } from "./components/context-bar.js";
+export { ContextPins, usePagePin } from "./components/context-bar.js";
 export { SelectionPopover } from "./components/selection-popover.js";
 export { GlobalSelectionPopover } from "./components/global-selection-popover.js";
 export { LoadingIndicator } from "./components/loading-indicator.js";
@@ -92,6 +93,7 @@ export { useNewConversation } from "./lib/use-new-conversation.js";
 export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.js";
 export { FileAttachmentAdapter, resolveMimeType } from "./lib/attachment-adapter.js";
 export { registerAttachmentAdapter, useAttachmentAdapterStore } from "./lib/attachment-registry.js";
+export { registerVoiceAdapter, registerSpeechAdapter, useVoiceAdapterStore, } from "./lib/voice-adapter-registry.js";
 export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
 export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
 // --- Auth ---

package/dist/lib/auth-provider.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * The provider expects a fully resolved MSAL configuration.
  * Missing configuration is treated as an application bootstrap error.
  */
-import { useEffect, useState, } from "react";
+import { useEffect, useState } from "react";
 import { authStore, initializeMsal, getMsalInstance, } from "@iloveagents/foundry-agent/msal";
-export const AuthProvider = ({ config, children, }) => {
+export const AuthProvider = ({ config, children }) => {
     const [ready, setReady] = useState(false);
     const [initError, setInitError] = useState(null);
     const [MsalProvider, setMsalProvider] = useState(null);
@@ -35,7 +35,9 @@ export const AuthProvider = ({ config, children, }) => {
                 setReady(true);
             }
         })();
-        return () => { cancelled = true; };
+        return () => {
+            cancelled = true;
+        };
     }, [config]);
     if (!ready)
         return null;
@@ -55,7 +57,7 @@ export const AuthProvider = ({ config, children, }) => {
  * Uses inProgress === "none" to avoid redirect loops (best practice from
  * Microsoft docs — never call loginRedirect while another interaction is active).
  */
-const AuthGuard = ({ useMsalHook, children, }) => {
+const AuthGuard = ({ useMsalHook, children }) => {
     const { instance, accounts, inProgress } = useMsalHook();
     const [authenticated, setAuthenticated] = useState(false);
     useEffect(() => {

package/dist/lib/composer-submit-store.d.ts

@@ -5,7 +5,16 @@ interface PendingComposerSubmit {
 interface ComposerSubmitState {
     pending: PendingComposerSubmit | null;
     submit: (text: string) => void;
-    consume: (id: number) => void;
+    /**
+     * Take ownership of a pending submission. True for exactly one caller.
+     *
+     * More than one bridge can legitimately be mounted — the expanded chat and
+     * the floating bubble can both exist, and voice needs a consumer alive even
+     * while the bubble is closed. Reading `pending` and clearing it afterwards
+     * let every mounted bridge see the same value and send it, so the claim and
+     * the clear happen together here instead.
+     */
+    claim: (id: number) => boolean;
 }
 export declare const useComposerSubmitStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ComposerSubmitState>>;
 export declare function submitComposerText(text: string): void;

package/dist/lib/composer-submit-store.js

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 let nextSubmitId = 1;
-export const useComposerSubmitStore = create((set) => ({
+export const useComposerSubmitStore = create((set, get) => ({
     pending: null,
     submit: (text) => {
         const trimmed = text.trim();
@@ -8,9 +8,12 @@ export const useComposerSubmitStore = create((set) => ({
             return;
         set({ pending: { id: nextSubmitId++, text: trimmed } });
     },
-    consume: (id) => set((state) => ({
-        pending: state.pending?.id === id ? null : state.pending,
-    })),
+    claim: (id) => {
+        if (get().pending?.id !== id)
+            return false;
+        set({ pending: null });
+        return true;
+    },
 }));
 export function submitComposerText(text) {
     useComposerSubmitStore.getState().submit(text);

package/dist/lib/voice-adapter-registry.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Voice adapter registry — host-injectable realtime voice + read-aloud.
+ *
+ * assistant-ui owns realtime voice natively: ``useLocalRuntime`` accepts a
+ * ``RealtimeVoiceAdapter``, the thread runtime merges the transcripts it
+ * emits into ``thread.messages``, and ``useVoiceControls()`` /
+ * ``useVoiceState()`` / ``useVoiceVolume()`` expose the session to any
+ * component. What the runtime does NOT provide is a transport — that is
+ * the adapter's whole job, and it is deliberately not something this
+ * package implements.
+ *
+ * Threading an adapter through every chat mount would couple the shell to
+ * whichever voice backend a deployment happens to use, so this is a tiny
+ * registry instead — the exact pattern of :func:`registerAttachmentAdapter`
+ * and ``registerChatSlots``: a module calls :func:`registerVoiceAdapter`
+ * once (import time or ``useInit``) and the runtime provider picks it up on
+ * its next mount.
+ *
+ * Nothing here knows about any particular voice service.
+ * ``@iloveagents/foundry-web-voice`` registers an Azure Voice Live adapter;
+ * a different backend is a different registration and no change here.
+ *
+ * Two independent slots, because they answer different questions:
+ *   - ``voice`` — a live, two-way spoken session (``RealtimeVoiceAdapter``).
+ *   - ``speech`` — one-shot "read this message aloud"
+ *     (``SpeechSynthesisAdapter``, driven by ``thread.speak(messageId)``).
+ * A host may register either, both, or neither. Registering neither leaves
+ * the runtime exactly as it was before this file existed: assistant-ui
+ * reports the capability as unavailable and the UI hides the affordances.
+ */
+import type { RealtimeVoiceAdapter, SpeechSynthesisAdapter } from "@assistant-ui/react";
+interface VoiceAdapterState {
+    voice: RealtimeVoiceAdapter | null;
+    speech: SpeechSynthesisAdapter | null;
+}
+export declare const useVoiceAdapterStore: import("zustand").UseBoundStore<import("zustand").StoreApi<VoiceAdapterState>>;
+/**
+ * Register the realtime voice adapter. ``null`` clears it (the runtime
+ * then reports voice as unavailable). Later calls overwrite earlier ones —
+ * last registration wins.
+ */
+export declare function registerVoiceAdapter(adapter: RealtimeVoiceAdapter | null): void;
+/**
+ * Register the read-aloud adapter behind ``thread.speak(messageId)``.
+ * ``null`` clears it. Independent of :func:`registerVoiceAdapter` — a host
+ * may want read-aloud without a live voice session, or the reverse.
+ */
+export declare function registerSpeechAdapter(adapter: SpeechSynthesisAdapter | null): void;
+export {};

package/dist/lib/voice-adapter-registry.js

@@ -0,0 +1,51 @@
+/**
+ * Voice adapter registry — host-injectable realtime voice + read-aloud.
+ *
+ * assistant-ui owns realtime voice natively: ``useLocalRuntime`` accepts a
+ * ``RealtimeVoiceAdapter``, the thread runtime merges the transcripts it
+ * emits into ``thread.messages``, and ``useVoiceControls()`` /
+ * ``useVoiceState()`` / ``useVoiceVolume()`` expose the session to any
+ * component. What the runtime does NOT provide is a transport — that is
+ * the adapter's whole job, and it is deliberately not something this
+ * package implements.
+ *
+ * Threading an adapter through every chat mount would couple the shell to
+ * whichever voice backend a deployment happens to use, so this is a tiny
+ * registry instead — the exact pattern of :func:`registerAttachmentAdapter`
+ * and ``registerChatSlots``: a module calls :func:`registerVoiceAdapter`
+ * once (import time or ``useInit``) and the runtime provider picks it up on
+ * its next mount.
+ *
+ * Nothing here knows about any particular voice service.
+ * ``@iloveagents/foundry-web-voice`` registers an Azure Voice Live adapter;
+ * a different backend is a different registration and no change here.
+ *
+ * Two independent slots, because they answer different questions:
+ *   - ``voice`` — a live, two-way spoken session (``RealtimeVoiceAdapter``).
+ *   - ``speech`` — one-shot "read this message aloud"
+ *     (``SpeechSynthesisAdapter``, driven by ``thread.speak(messageId)``).
+ * A host may register either, both, or neither. Registering neither leaves
+ * the runtime exactly as it was before this file existed: assistant-ui
+ * reports the capability as unavailable and the UI hides the affordances.
+ */
+import { create } from "zustand";
+export const useVoiceAdapterStore = create(() => ({
+    voice: null,
+    speech: null,
+}));
+/**
+ * Register the realtime voice adapter. ``null`` clears it (the runtime
+ * then reports voice as unavailable). Later calls overwrite earlier ones —
+ * last registration wins.
+ */
+export function registerVoiceAdapter(adapter) {
+    useVoiceAdapterStore.setState({ voice: adapter });
+}
+/**
+ * Register the read-aloud adapter behind ``thread.speak(messageId)``.
+ * ``null`` clears it. Independent of :func:`registerVoiceAdapter` — a host
+ * may want read-aloud without a live voice session, or the reverse.
+ */
+export function registerSpeechAdapter(adapter) {
+    useVoiceAdapterStore.setState({ speech: adapter });
+}

package/dist/styles.css

@@ -184,6 +184,27 @@
   box-shadow: 6px 0 6px -6px color-mix(in srgb, var(--foreground) 12%, transparent);
 }
 
+/* The opposite call from the list scroller below, for the opposite reason.
+ * The toolbar's selection row shares a line with the search and the actions,
+ * and its entire contract is that ticking a row never changes the toolbar's
+ * height. A classic, space-consuming scrollbar — Windows and Linux by
+ * default, macOS set to "always show" — would appear exactly when the bar
+ * overflows, which is exactly when something is ticked, and its height would
+ * land on the toolbar as the same jump by another route (review catch).
+ *
+ * So the widget is hidden, not the scrolling: wheel, trackpad, and tabbing
+ * to a button past the edge all still reach it. Plain CSS rather than
+ * utilities, because a class that a consumer's Tailwind never scans fails
+ * silently, and this one has no visible symptom until the platform is one we
+ * do not develop on. */
+[data-selection-row] {
+  scrollbar-width: none;
+}
+[data-selection-row]::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+
 /* A list you can scroll should say so: keep its scrollbars visible rather
  * than relying on the overlay ones macOS hides until you already scroll. */
 [data-list-scroller] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.20.1",
+  "version": "0.21.1",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -71,8 +71,8 @@
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.20.1",
-    "@iloveagents/foundry-web-primitives": "^0.20.1"
+    "@iloveagents/foundry-agent": "^0.21.1",
+    "@iloveagents/foundry-web-primitives": "^0.21.1"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",