@iloveagents/foundry-web-ui 0.13.0 → 0.14.0

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

@@ -13,9 +13,14 @@ export interface ChatContentProps {
      */
     starterSuggestions?: string[];
     /**
-     * Show the page pin button in the composer. Defaults to false so generic
-     * starter apps only show attachment, input, and send controls. Apps with
-     * page-aware workflows can opt in explicitly.
+     * Show the page pin button in the composer.
+     *
+     * Defaults to TRUE. It defaulted to false, and nothing in the shell ever
+     * passed it, so the affordance shipped switched off everywhere: on a
+     * document or a view there was no way to put the thing you were looking
+     * at into the conversation. Pinning the current page is the core gesture
+     * of a page-aware chat, not an opt-in extra — an app that genuinely wants
+     * a bare composer opts OUT.
      */
     showPinButton?: boolean;
 }

package/dist/components/assistant-chat.js

@@ -11,10 +11,8 @@ import { ContextPins } from "./context-bar.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { ChatComposerBannerSlot } from "./chat-slots.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
-import { MarkdownText } from "./markdown-text.js";
-import { ReasoningMessagePartComponent } from "./reasoning-part.js";
 import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
-import { ToolFallback } from "./tool-fallback.js";
+import { ChatMessageParts } from "./chat-message-parts.js";
 import { LoadingIndicator, LoadingBar } from "./loading-indicator.js";
 import { MessageTimestamp } from "./message-timestamp.js";
 import { MessageError } from "./message-error.js";
@@ -24,11 +22,7 @@ const UserMessage = () => {
     return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(MessagePrimitive.Attachments, { components: userAttachmentComponents }), _jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-foreground"), children: _jsx(MessagePrimitive.Content, {}) }), _jsxs("div", { className: "flex h-8 items-center justify-end gap-2 pr-2", children: [_jsx(MessageTimestamp, {}), _jsx(BranchPicker, {}), _jsx("div", { className: "flex h-8 w-10 items-center justify-end", children: _jsx(UserActionBar, {}) })] })] }) }));
 };
 const UserActionBar = () => (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, className: "flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Edit", size: "icon", children: _jsx(PencilIcon, { className: "size-4" }) }) }) }));
-const AssistantMessage = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsx("div", { className: "text-foreground leading-relaxed flex flex-col gap-4", children: _jsx(MessagePrimitive.Parts, { components: {
-                        Text: MarkdownText,
-                        Reasoning: ReasoningMessagePartComponent,
-                        tools: { Fallback: ToolFallback },
-                    } }) }), _jsx(MessageError, {}), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {}), _jsx(MessageTimestamp, {})] })] }) }));
+const AssistantMessage = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsx("div", { className: "text-foreground leading-relaxed flex flex-col gap-4", children: _jsx(ChatMessageParts, {}) }), _jsx(MessageError, {}), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {}), _jsx(MessageTimestamp, {})] })] }) }));
 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 = () => {
@@ -113,7 +107,7 @@ const DropZone = ({ children }) => {
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = false, } = {}) {
+export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = true, } = {}) {
     const isExpanded = useChatBubbleStore((s) => s.isExpanded);
     const collapseChat = useChatBubbleStore((s) => s.collapse);
     const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);

package/dist/components/chat-bubble.js

@@ -9,8 +9,8 @@ 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 { ReasoningMessagePartComponent } from "./reasoning-part.js";
-import { MarkdownText } from "./markdown-text.js";
+import { ChatMessageParts } from "./chat-message-parts.js";
+import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
 import { LoadingIndicator } from "./loading-indicator.js";
 import { MessageTimestamp } from "./message-timestamp.js";
 import { MessageError } from "./message-error.js";
@@ -20,10 +20,7 @@ import { useNewConversation } from "../lib/use-new-conversation.js";
 import { RAIL_WIDTH, useSidebarStore } from "../lib/sidebar-store.js";
 const CHAT_BUBBLE_INSET = 8;
 function BubbleAssistantMessage() {
-    return (_jsxs(MessagePrimitive.Root, { className: "w-full mb-2 group", children: [_jsx("div", { className: "text-foreground text-sm leading-relaxed flex flex-col gap-2", children: _jsx(MessagePrimitive.Parts, { components: {
-                        Text: MarkdownText,
-                        Reasoning: ReasoningMessagePartComponent,
-                    } }) }), _jsx(MessageError, { compact: true }), _jsxs("div", { className: "flex h-7 items-center gap-2 mt-1", children: [_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 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", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Retry", size: "icon", className: "size-7", children: _jsx(RefreshCw, { className: "size-3" }) }) })] }), _jsx(MessageTimestamp, {})] })] }));
+    return (_jsxs(MessagePrimitive.Root, { className: "w-full mb-2 group", children: [_jsx("div", { className: "text-foreground text-sm leading-relaxed flex flex-col gap-2", children: _jsx(ChatMessageParts, {}) }), _jsx(MessageError, { compact: true }), _jsxs("div", { className: "flex h-7 items-center gap-2 mt-1", children: [_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 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", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Retry", size: "icon", className: "size-7", children: _jsx(RefreshCw, { className: "size-3" }) }) })] }), _jsx(MessageTimestamp, {})] })] }));
 }
 function BubbleUserMessage() {
     const messageId = useAuiState((s) => s.message.id);
@@ -99,10 +96,10 @@ export function ChatBubble() {
     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, 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
+                } })), !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", 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("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 })] }), _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: 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" }) }) }) })] })] }) })] })] })] }))] }));
+                                                            } }), _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("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" }) }) }) })] })] }) })] })] })] }))] }));
 }

package/dist/components/chat-header.js

@@ -8,8 +8,15 @@ import { ThemeToggle } from "./theme-toggle.js";
 import { UserMenu } from "./user-menu.js";
 import { useSidebarStore } from "../lib/sidebar-store.js";
 import { useNewConversation } from "../lib/use-new-conversation.js";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 export const ChatHeader = () => {
-    const handleNewConversation = useNewConversation();
+    const isExpanded = useChatBubbleStore((s) => s.isExpanded);
+    // In expanded mode the default "navigate to /" would land on the chat
+    // route, and the shell collapses expanded chat there — so New Thread
+    // silently threw the user out of the mode they were working in AND off
+    // the page they were reading. Expanded starts the thread in place, the
+    // same contract the bubble already uses.
+    const handleNewConversation = useNewConversation(isExpanded ? { navigateToChat: false, preserveNavigation: true } : undefined);
     const toggleMobile = useSidebarStore((s) => s.toggleMobile);
     const isSidebarOpen = useSidebarStore((s) => s.isOpen);
     return (_jsx("div", { className: cn("shrink-0", "bg-background border-b border-border"), children: _jsxs("div", { className: "px-4 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TooltipIconButton, { tooltip: "Open sidebar", onClick: toggleMobile, className: "md:hidden", children: _jsx(Menu, { className: "size-5" }) }), _jsx(Link, { to: "/", className: cn("flex items-center gap-2.5 hover:opacity-80 transition-opacity", isSidebarOpen && "md:hidden"), children: _jsx(AppBrand, { labelClassName: "text-sm font-semibold text-foreground" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ThemeToggle, {}), _jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-primary" }) }), _jsx(UserMenu, {})] })] }) }));

package/dist/components/chat-message-parts.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The parts of an assistant message — ONE renderer, used by every chat
+ * surface.
+ *
+ * The bubble and the expanded chat used to configure `MessagePrimitive.Parts`
+ * separately, and had drifted: the expanded chat passed a `tools` fallback and
+ * rendered full tool cards, the bubble passed none and so rendered assistant-ui's
+ * default. Same conversation, two different transcripts depending on which
+ * window you happened to have open. Composing this component instead of
+ * hand-rolling a parts config is what keeps them honest — there is now only
+ * one place to drift from.
+ *
+ * Adjacent tool calls fold into one {@link ToolRunGroup} — a single summary row
+ * over the cards, open by default; see that component for why collapsing is the
+ * deliberate act rather than the default.
+ */
+export declare function ChatMessageParts(): import("react/jsx-runtime").JSX.Element;

package/dist/components/chat-message-parts.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessagePrimitive, groupPartByType } from "@assistant-ui/react";
+import { MarkdownText } from "./markdown-text.js";
+import { ReasoningMessagePartComponent } from "./reasoning-part.js";
+import { ToolFallback } from "./tool-fallback.js";
+import { ToolRunGroup } from "./tool-run-group.js";
+/**
+ * Coalesce adjacent tool calls into one `group-tool` node. Everything else
+ * stays ungrouped and renders as its own leaf.
+ */
+const groupBy = groupPartByType({ "tool-call": ["group-tool"] });
+/**
+ * The parts of an assistant message — ONE renderer, used by every chat
+ * surface.
+ *
+ * The bubble and the expanded chat used to configure `MessagePrimitive.Parts`
+ * separately, and had drifted: the expanded chat passed a `tools` fallback and
+ * rendered full tool cards, the bubble passed none and so rendered assistant-ui's
+ * default. Same conversation, two different transcripts depending on which
+ * window you happened to have open. Composing this component instead of
+ * hand-rolling a parts config is what keeps them honest — there is now only
+ * one place to drift from.
+ *
+ * Adjacent tool calls fold into one {@link ToolRunGroup} — a single summary row
+ * over the cards, open by default; see that component for why collapsing is the
+ * deliberate act rather than the default.
+ */
+export function ChatMessageParts() {
+    return (_jsx(MessagePrimitive.GroupedParts, { groupBy: groupBy, indicator: "never", children: ({ part, children }) => {
+            switch (part.type) {
+                case "group-tool":
+                    return (_jsx(ToolRunGroup, { indices: part.indices, isRunning: part.status?.type === "running", children: children }));
+                case "text":
+                    return _jsx(MarkdownText, {});
+                case "reasoning":
+                    return _jsx(ReasoningMessagePartComponent, { text: part.text });
+                case "tool-call":
+                    return part.toolUI ?? _jsx(ToolFallback, { ...part });
+                default:
+                    return null;
+            }
+        } }));
+}

package/dist/components/reasoning-effort-picker.js

@@ -46,5 +46,5 @@ export function ReasoningEffortPicker({ className }) {
     const triggerLabel = effort === "default" && resolved
         ? `${REASONING_EFFORT_LABELS.default} · ${REASONING_EFFORT_LABELS[resolved]}`
         : REASONING_EFFORT_LABELS[effort];
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex items-center gap-1 rounded-md px-2 py-1", "text-xs text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors", className), "aria-label": `Intelligence: ${triggerLabel}`, children: [_jsx("span", { children: triggerLabel }), _jsx(ChevronDown, { className: "size-3.5" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { className: "text-xs font-normal text-muted-foreground", children: "Intelligence" }), OPTIONS.map((opt) => (_jsxs(DropdownMenuItem, { onSelect: () => setEffort(opt.value), className: "flex items-start gap-2", children: [_jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", effort === opt.value ? "opacity-100" : "opacity-0") }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: REASONING_EFFORT_LABELS[opt.value] }), _jsx("span", { className: "text-xs text-muted-foreground", children: opt.value === "default" ? autoHint(resolved, scope) : opt.hint })] })] }, opt.value)))] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-reasoning-effort-trigger": true, className: cn("flex items-center gap-1 rounded-md px-2 py-1", "text-xs text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors", className), "aria-label": `Intelligence: ${triggerLabel}`, children: [_jsx("span", { className: "whitespace-nowrap", children: triggerLabel }), _jsx(ChevronDown, { className: "size-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { className: "text-xs font-normal text-muted-foreground", children: "Intelligence" }), OPTIONS.map((opt) => (_jsxs(DropdownMenuItem, { onSelect: () => setEffort(opt.value), className: "flex items-start gap-2", children: [_jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", effort === opt.value ? "opacity-100" : "opacity-0") }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: REASONING_EFFORT_LABELS[opt.value] }), _jsx("span", { className: "text-xs text-muted-foreground", children: opt.value === "default" ? autoHint(resolved, scope) : opt.hint })] })] }, opt.value)))] })] }));
 }

package/dist/components/tool-run-group.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+/**
+ * One row standing in for a run of adjacent tool calls, with the cards under
+ * it behind a disclosure.
+ *
+ * A turn that calls eight tools used to render eight bordered cards with no
+ * way to fold them away. The run is now one summary line — "8 tools · done" —
+ * over a group the reader can collapse when the machinery is in the way.
+ *
+ * OPEN by default: the detail is what a developer watching an agent work
+ * actually wants, and a transcript that hides every step by default reads as
+ * though nothing happened. Collapsing is the deliberate act, not expanding.
+ *
+ * RED only when the whole run failed. One failure among eight successful
+ * calls is not a red turn — the agent recovered, and painting the summary red
+ * would report a broken run where there was a working one. A partial failure
+ * still says so, in the count, without the alarm.
+ */
+export declare function ToolRunGroup({ indices, isRunning, children, }: {
+    indices: readonly number[];
+    isRunning: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/tool-run-group.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { ChevronRight, Loader2, CheckCircle2, XCircle, AlertCircle, Wrench } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { _detectErrorResult } from "./tool-fallback.js";
+/**
+ * One row standing in for a run of adjacent tool calls, with the cards under
+ * it behind a disclosure.
+ *
+ * A turn that calls eight tools used to render eight bordered cards with no
+ * way to fold them away. The run is now one summary line — "8 tools · done" —
+ * over a group the reader can collapse when the machinery is in the way.
+ *
+ * OPEN by default: the detail is what a developer watching an agent work
+ * actually wants, and a transcript that hides every step by default reads as
+ * though nothing happened. Collapsing is the deliberate act, not expanding.
+ *
+ * RED only when the whole run failed. One failure among eight successful
+ * calls is not a red turn — the agent recovered, and painting the summary red
+ * would report a broken run where there was a working one. A partial failure
+ * still says so, in the count, without the alarm.
+ */
+export function ToolRunGroup({ indices, isRunning, children, }) {
+    const { total, failed } = useToolRunOutcome(indices);
+    // Every call in the run failed — the only state that earns the alarm colour.
+    const allFailed = total > 0 && failed === total;
+    const [isOpen, setIsOpen] = useState(true);
+    const label = isRunning
+        ? `Using ${total === 1 ? "1 tool" : `${total} tools`}…`
+        : failed > 0
+            ? `${total === 1 ? "1 tool" : `${total} tools`} · ${failed} failed`
+            : `${total === 1 ? "1 tool" : `${total} tools`} · done`;
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: "w-full", "data-tool-run-group": true, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-tool-run-trigger": true, className: cn("flex w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-xs", "text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", allFailed && "text-destructive hover:text-destructive"), children: [_jsx(ChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", isOpen && "rotate-90") }), isRunning ? (_jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin text-primary" })) : allFailed ? (_jsx(XCircle, { className: "size-3.5 shrink-0 text-destructive" })) : failed > 0 ? (
+                        // Partial: the run produced a result, some of it the hard way.
+                        _jsx(AlertCircle, { className: "size-3.5 shrink-0 text-muted-foreground" })) : (_jsx(CheckCircle2, { className: "size-3.5 shrink-0 text-primary" })), _jsx(Wrench, { className: "size-3 shrink-0 opacity-60" }), _jsx("span", { className: "truncate", children: label })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-1.5 flex flex-col gap-2", children: children }) })] }));
+}
+/**
+ * How many calls this run made, and how many of them failed.
+ *
+ * The group node the primitive hands us carries only the LAST part's status,
+ * which is the wrong signal here: a run whose final call succeeded after an
+ * earlier one failed would summarise as green. So read the parts themselves
+ * and count. A failed tool call shows up two ways — a transport-level
+ * `incomplete` status, or a `complete` round-trip whose payload describes an
+ * error (a Python `@tool` raising, an MCP `isError`) — and both count.
+ */
+function useToolRunOutcome(indices) {
+    const parts = useAuiState((s) => s.message.parts);
+    let failed = 0;
+    for (const index of indices) {
+        const part = parts?.[index];
+        if (!part)
+            continue;
+        const status = part.status;
+        if (status?.type === "incomplete" || _detectErrorResult(part.result))
+            failed++;
+    }
+    return { total: indices.length, failed };
+}

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

@@ -2,8 +2,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.
+ * Tools are registered on mount and removed on unmount, so the agent only
+ * sees tools relevant to the current page.
+ *
+ * **The set may change while the page is mounted.** A page's capabilities are
+ * state, not a mount-time constant: a document open read-only cannot accept a
+ * live edit, a form with no dirty fields cannot submit. Registering once meant
+ * the catalogue advertised tools the surface could not perform, and the model —
+ * correctly trusting the catalogue — called them and dead-ended on an error.
+ * Offer a tool only while it works, and the agent picks the route that does:
+ *
+ * ```tsx
+ * usePageTools([
+ *   fileInfoTool,
+ *   ...(liveEditAvailable ? [replaceSelectionTool] : []),
+ * ]);
+ * ```
+ *
+ * Re-registration keys on the schema the model sees (names, descriptions,
+ * parameters) — a fresh array literal with identical schemas does not thrash
+ * the store. `execute` is always dispatched to the CURRENT render's closure, so
+ * tools read live state directly instead of through refs.
  *
  * @example
  * ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "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": [
@@ -70,8 +70,8 @@
     "tailwind-merge": "^3.5.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "@iloveagents/foundry-agent": "^0.13.0",
-    "@iloveagents/foundry-web-primitives": "^0.13.0"
+    "@iloveagents/foundry-agent": "^0.14.0",
+    "@iloveagents/foundry-web-primitives": "^0.14.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",