@iloveagents/foundry-web-ui 0.12.1 → 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/sidebar.js

@@ -17,28 +17,78 @@ const ACTIVE_NAV_ROW_CLASS = "border border-transparent bg-sidebar-selected shad
 const ACTIVE_NAV_TEXT_CLASS = "font-semibold text-sidebar-foreground";
 const ACTIVE_NAV_ICON_CLASS = "text-primary";
 const ACTIVE_NAV_BADGE_CLASS = "border border-sidebar-border bg-background/60 text-sidebar-foreground";
-const NESTED_NAV_INDENTS = ["pl-5", "pl-7", "pl-9", "pl-11", "pl-13"];
-// Shared icon-column geometry. Top-level item rows render their
-// leading icon at ``size-4`` (16px) followed by ``gap-2`` (8px)
-// before the label. The group-header chevron uses the SAME column
-// width + gap so the group label and item labels share an exact
-// x-coordinate — without this invariant headers visually drift right
-// (previously the chevron defaulted to ``size-6`` = 24px) and the
-// sidebar looks ragged. Verified empirically against the live DOM:
-// item icon x-min ≈ header chevron x-min, item label x ≈ header
-// label x (within 1px allowing for the item's ``border-transparent``
-// inset).
+// Indent ladder for the nav tree, indexed by depth (0 = top-level item).
+//
+// ONE array of PAIRS rather than two parallel arrays, because the two
+// numbers are not independent: ``body`` is always ``column`` plus the 20px
+// disclosure cluster (16px cell + 4px gap). Split into separate lists they
+// drift apart, and the tree stops looking like a tree.
+//
+// ``column`` is a LEFT OFFSET, not padding, because the twisty is absolutely
+// positioned: it floats over the row body's own left padding instead of
+// occupying a flex cell. That is what keeps the entire row — indent strip
+// and disclosure cell included — a live click target for navigation, while
+// the branch chevron still catches its own clicks on top. Laying the twisty
+// out in flow instead makes every pixel left of the icon dead.
+//
+// Depth 0 sits at 12px so the twisty shares a column with the group-header
+// chevron; every further level adds 8px, which keeps deep trees readable
+// inside a ~260px sidebar.
+const NAV_DEPTH_OFFSETS = [
+    { column: "left-3", body: "pl-8" },
+    { column: "left-5", body: "pl-10" },
+    { column: "left-7", body: "pl-12" },
+    { column: "left-9", body: "pl-14" },
+    { column: "left-11", body: "pl-16" },
+    { column: "left-13", body: "pl-18" },
+];
+// Fixed-width cell every nav row leads with, holding either a chevron
+// (branch) or a dot (leaf). Same width as ``SIDEBAR_ITEM_ICON_CLASS`` so
+// the disclosure column and the group-header chevron share one x.
+const NAV_TWISTY_CLASS = "absolute inset-y-0 flex w-4 items-center justify-center";
+// The chevron is a real control, so it needs a real touch target: it draws
+// at ``size-3.5`` but CLICKS in 24px (WCAG 2.2 target-size minimum). It can
+// simply overflow the 16px cell — the cell is absolutely positioned, so
+// nothing downstream moves. The leaf dot needs no target at all; it is
+// decorative and passes its clicks through to the row.
+const NAV_TWISTY_HIT_CLASS = "size-6 shrink-0";
+// Hover-reveal clearance for the right-hand actions menu. That control is a
+// 28px button inside ``right-1`` + ``px-1`` (4 + 4 + 28 + 4 = 40px), so 44px
+// keeps the label from butting straight into it. Applied ONLY to rows that
+// actually have an actions menu — on a row without one the reserved padding
+// buys nothing and just re-truncates the label on every hover.
+const NAV_ROW_ACTIONS_CLEARANCE = "group-hover:pr-11 group-focus-within:pr-11";
+// Shared icon-column geometry. The group-header chevron and the
+// per-row disclosure cell (``NavTwisty``) are the SAME width, and the
+// header wrapper below pads to the same x as
+// ``NAV_DEPTH_OFFSETS[0].column`` — the depth-0 rung the rows use — so
+// every chevron in the sidebar (section headers and tree rows
+// alike) stacks on one vertical line. That single line is what makes
+// the tree scan as a tree; when the columns drift the sidebar looks
+// ragged (an earlier regression had the header chevron defaulting to
+// ``size-6`` = 24px). Item labels now sit one cell further right than
+// group labels, because item rows carry a twisty AND an icon while
+// group headers carry only the chevron.
 const SIDEBAR_ITEM_ICON_CLASS = "size-4 shrink-0";
 const SIDEBAR_ITEM_GAP_CLASS = "gap-2";
-// Outer padding for the group-header wrapper. Horizontal matches
-// ``px-3`` on item buttons so the chevron column lines up with the
-// item icon column. Vertical is asymmetric: ``pt-3`` (12px) above
-// gives breathing room between sections, ``pb-1`` (4px) below bonds
-// the header to its first child — the ChatGPT / Linear / Notion
-// "header sits on its children" pattern. Symmetric ``py-2`` made
-// the header float midway between sections instead of belonging
-// to the group below it.
-const SIDEBAR_GROUP_HEADER_PADDING = "px-3 pt-4 pb-0";
+// Outer padding for the group-header wrapper. The group header lays its
+// chevron out in normal flow, so it needs the depth-0 column expressed as
+// a PADDING where rows express it as an offset — the same number, two
+// spellings, which is exactly how columns silently desync when the indent
+// ladder is retuned. The group-header alignment test in
+// ``sidebar.test.tsx`` parses both numbers back out and fails if they
+// ever diverge.
+// Vertical is asymmetric: ``pt-4`` above gives breathing room between
+// sections, ``pb-0`` below bonds the header to its first child — the
+// ChatGPT / Linear / Notion "header sits on its children" pattern.
+// Symmetric ``py-2`` made the header float midway between sections
+// instead of belonging to the group below it.
+const SIDEBAR_GROUP_HEADER_PADDING = 
+// ``border border-transparent`` for the same reason every item row
+// carries one: the border is part of the box model that decides where
+// the padding box starts. Without it the header chevron lands 1px left
+// of every row's disclosure cell and the column is visibly ragged.
+"border border-transparent pl-3 pr-3 pt-4 pb-0";
 // Typography for the group-header LABEL text (CHATS / WORKSPACES /
 // ADMIN / …). Stays at ``text-xs`` (12px) — same size as before —
 // but bumps weight from ``font-medium`` to ``font-semibold``. The
@@ -49,8 +99,8 @@ const SIDEBAR_GROUP_HEADER_PADDING = "px-3 pt-4 pb-0";
 // Bumping size AND weight together stacked too much visual mass
 // against the already-wide uppercase tracking — felt shouty.
 const SIDEBAR_GROUP_HEADER_LABEL_CLASS = "text-xs font-semibold uppercase tracking-wider";
-function getNestedNavIndent(depth) {
-    return NESTED_NAV_INDENTS[depth] ?? NESTED_NAV_INDENTS[NESTED_NAV_INDENTS.length - 1];
+function getNavDepthOffsets(depth) {
+    return NAV_DEPTH_OFFSETS[depth] ?? NAV_DEPTH_OFFSETS[NAV_DEPTH_OFFSETS.length - 1];
 }
 function scrollNavRowIntoView(nav, row) {
     const navRect = nav.getBoundingClientRect();
@@ -349,6 +399,40 @@ function ContainerDropZone({ dnd }) {
                 : "bg-primary/10 border border-dashed border-primary/30")
             : "h-1"), children: isDragOver && (_jsxs(_Fragment, { children: [isFileDragOver && _jsx(Upload, { className: "size-3 text-primary" }), _jsx("span", { className: "text-[10px] text-primary/70", children: getContainerDropZoneLabel(isFileDragOver) })] })) }));
 }
+/**
+ * Leading disclosure cell on every nav row — the Confluence page-tree
+ * affordance.
+ *
+ * A BRANCH (item with children) gets a chevron that is always visible and
+ * rotates on expand; a LEAF gets a small dot. Both occupy the identical
+ * cell, so the whole tree shares one disclosure column and "does this row
+ * go deeper?" is answerable without hovering. That was the flaw in the
+ * previous design: the chevron lived in the hover-only right-hand controls,
+ * so a sidebar at rest carried no branch/leaf information at all.
+ *
+ * ABSOLUTELY POSITIONED over the row's own left padding, for two reasons:
+ *
+ *  - The row stays clickable edge to edge. In flow the cell would be a dead
+ *    strip — a <button> may not nest, so the twisty cannot live inside the
+ *    navigate button, and everything left of the icon would stop navigating.
+ *  - The chevron can take a 24px hit area out of a 16px cell without
+ *    pushing the icon column right.
+ *
+ * The leaf dot is ``pointer-events-none`` so its clicks fall through to the
+ * row underneath; the branch chevron keeps its own, since positioned
+ * elements paint above the static button and win the hit test.
+ */
+function NavTwisty({ hasChildren, isExpanded, onToggle, label, isActive, depth, }) {
+    const cell = cn(NAV_TWISTY_CLASS, getNavDepthOffsets(depth).column);
+    if (!hasChildren) {
+        return (_jsx("span", { "data-nav-twisty-cell": true, "aria-hidden": "true", className: cn(cell, "pointer-events-none"), children: _jsx("span", { className: cn("size-1 rounded-full", isActive ? "bg-primary/70" : "bg-sidebar-foreground/30") }) }));
+    }
+    return (_jsx("span", { "data-nav-twisty-cell": true, className: cell, children: _jsx("button", { type: "button", "data-nav-twisty": true, "aria-expanded": isExpanded, "aria-label": isExpanded ? `Collapse ${label}` : `Expand ${label}`, onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onToggle?.();
+            }, className: cn("flex items-center justify-center rounded", NAV_TWISTY_HIT_CLASS, isActive ? "text-primary" : "text-sidebar-foreground/50 hover:text-sidebar-foreground"), children: _jsx(ChevronRight, { className: cn("size-3.5 transition-transform duration-150", isExpanded && "rotate-90") }) }) }));
+}
 function NavItemActions({ actions }) {
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 rounded-md text-muted-foreground hover:bg-muted/80 hover:text-foreground", onClick: (e) => {
                         e.preventDefault();
@@ -358,17 +442,23 @@ function NavItemActions({ actions }) {
                                 void action.handler();
                             }, className: cn("gap-2", action.destructive && "text-destructive focus:text-destructive"), children: [_jsx(action.icon, { className: cn("size-3.5", action.destructive ? "text-destructive" : "text-muted-foreground") }), _jsx("span", { children: action.label })] })] }, action.label))) })] }));
 }
-function NavRowControls({ item, hasChildren, isExpanded, onToggleExpand, }) {
+/**
+ * Hover-revealed controls pinned to the right edge of a nav row.
+ *
+ * Expand/collapse deliberately does NOT live here — it's the leading
+ * ``NavTwisty`` cell instead (see that component). This slot is for the
+ * item's own actions menu only.
+ */
+function NavRowControls({ item }) {
     const isDisabled = item.disabled === true;
     const hasActions = !isDisabled && item.actions && item.actions.length > 0;
-    return (_jsxs("div", { className: "absolute inset-y-0 right-1 flex items-center gap-1 px-1 opacity-0 translate-x-1 pointer-events-none transition-all group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:translate-x-0 group-focus-within:pointer-events-auto", children: [hasActions && _jsx(NavItemActions, { actions: item.actions }), hasChildren && (_jsx("button", { type: "button", onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onToggleExpand?.();
-                }, className: "flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground", "aria-label": isExpanded ? "Collapse" : "Expand", children: _jsx(ChevronRight, { className: cn("size-3.5 transition-transform", isExpanded && "rotate-90") }) }))] }));
+    if (!hasActions)
+        return null;
+    return (_jsx("div", { className: "absolute inset-y-0 right-1 flex items-center gap-1 px-1 opacity-0 translate-x-1 pointer-events-none transition-all group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:translate-x-0 group-focus-within:pointer-events-auto", children: _jsx(NavItemActions, { actions: item.actions }) }));
 }
 /** Leaf nav item with optional drag-and-drop support via NavItem.dnd. */
-function NavLeafItem({ item, isActive, onClick, depthPl = getNestedNavIndent(0), }) {
+function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
+    const bodyPl = getNavDepthOffsets(depth).body;
     const isDisabled = item.disabled === true;
     const hasActions = Boolean(!isDisabled && item.actions && item.actions.length > 0);
     const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
@@ -376,7 +466,7 @@ function NavLeafItem({ item, isActive, onClick, depthPl = getNestedNavIndent(0),
     const activeButtonRef = useActiveNavRowScroll(isActive && !hasActions);
     // Items with actions use the group layout (button + action controls)
     if (hasActions) {
-        return (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
+        return (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
                 ? "opacity-40"
                 : isActive
                     ? ACTIVE_NAV_ROW_CLASS
@@ -385,20 +475,20 @@ function NavLeafItem({ item, isActive, onClick, depthPl = getNestedNavIndent(0),
                 !isDisabled &&
                 "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
                 !isDisabled &&
-                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsxs("button", { type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, className: cn("flex items-center gap-2 flex-1 min-w-0 py-1.5 text-sm text-left", depthPl, "pr-3 transition-[padding] duration-150 group-hover:pr-10 group-focus-within:pr-10", isDisabled
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsxs("button", { type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, className: cn("flex items-center gap-2 flex-1 min-w-0 py-1.5 text-sm text-left", bodyPl, "pr-3 transition-[padding] duration-150", NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                         ? "text-sidebar-foreground/45 cursor-default"
                         : isActive
                             ? ACTIVE_NAV_TEXT_CLASS
-                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item, hasChildren: false, isExpanded: false })] }));
+                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
     }
-    return (_jsxs("button", { ref: activeButtonRef, "data-active-nav-row": isActive ? "true" : undefined, type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, ...(isDisabled ? {} : draggableProps), ...(isDisabled ? {} : dropTargetProps), className: cn("flex items-center gap-2 w-full", "rounded-lg border border-transparent pr-3 py-1.5 text-sm text-left", depthPl, isDisabled
+    return (_jsxs("button", { ref: activeButtonRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, ...(isDisabled ? {} : draggableProps), ...(isDisabled ? {} : dropTargetProps), className: cn("relative flex items-center gap-2 w-full", "rounded-lg border border-transparent pr-3 py-1.5 text-sm text-left", bodyPl, isDisabled
             ? "opacity-40 cursor-default"
             : "text-sidebar-foreground/80 transition-colors hover:bg-sidebar-accent/70", !isDisabled && isActive && ACTIVE_NAV_ROW_CLASS, isDragOver &&
             !isFileDragOver &&
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
             !isDisabled &&
-            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
 }
 function SubNavItems({ items, parentPath, depth = 1, }) {
     const navigate = useNavigate();
@@ -407,7 +497,6 @@ function SubNavItems({ items, parentPath, depth = 1, }) {
     const navContext = useAppStore((s) => s.navContext);
     const isOnParent = currentPath === parentPath;
     const [activeLabel, setActiveLabel] = useState(items[0]?.label ?? "");
-    const childDepthPl = getNestedNavIndent(depth);
     // Children with unique paths (e.g., SPACES documents) use URL matching;
     // children sharing the parent path (e.g., Documents sub-filters) use label matching.
     const allShareParent = items.every((c) => c.to === parentPath);
@@ -423,7 +512,7 @@ function SubNavItems({ items, parentPath, depth = 1, }) {
             const isActive = allShareParent
                 ? isOnParent && activeLabel === child.label
                 : child.to !== parentPath && currentPath === child.to;
-            return (_jsx(NavLeafItem, { item: child, isActive: isActive, depthPl: childDepthPl, onClick: () => {
+            return (_jsx(NavLeafItem, { item: child, isActive: isActive, depth: depth, onClick: () => {
                     setActiveLabel(child.label);
                     setNavContext({
                         ...navContext,
@@ -456,10 +545,11 @@ function NestedFolderItem({ item, depth }) {
     const [manualOverride, setManualOverride] = useState(null);
     const isExpanded = manualOverride ?? isInsideSubtree;
     const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
-    const depthPl = getNestedNavIndent(depth);
+    const bodyPl = getNavDepthOffsets(depth).body;
     const isDisabled = item.disabled === true;
+    const hasActions = Boolean(!isDisabled && item.actions && item.actions.length > 0);
     const activeRowRef = useActiveNavRowScroll(isActive);
-    return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), children: [_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full", "rounded-xl border border-transparent transition-colors", isDisabled
+    return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), children: [_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full", "rounded-xl border border-transparent transition-colors", isDisabled
                     ? "opacity-40"
                     : isActive
                         ? ACTIVE_NAV_ROW_CLASS
@@ -468,7 +558,7 @@ function NestedFolderItem({ item, depth }) {
                     !isDisabled &&
                     "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
                     !isDisabled &&
-                    "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsxs("button", { type: "button", disabled: isDisabled, onClick: () => {
+                    "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: true, isExpanded: isExpanded, onToggle: () => setManualOverride(!isExpanded), label: item.label, isActive: (isActive || isAncestorActive) && !isDisabled, depth: depth }), _jsxs("button", { type: "button", disabled: isDisabled, onClick: () => {
                             if (isDisabled)
                                 return;
                             setManualOverride(true);
@@ -482,7 +572,7 @@ function NestedFolderItem({ item, depth }) {
                                     .join("\n") || null,
                             });
                             navigate(item.to);
-                        }, className: cn("flex items-center gap-2 flex-1 min-w-0", depthPl, "pr-3 py-1.5 text-sm text-left transition-[padding] duration-150 group-hover:pr-16 group-focus-within:pr-16", isDisabled
+                        }, className: cn("flex items-center gap-2 flex-1 min-w-0", bodyPl, "pr-3 py-1.5 text-sm text-left transition-[padding] duration-150", hasActions && NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                             ? "text-sidebar-foreground/45 cursor-default"
                             : isActive
                                 ? ACTIVE_NAV_TEXT_CLASS
@@ -492,13 +582,13 @@ function NestedFolderItem({ item, depth }) {
                                     ? ACTIVE_NAV_ICON_CLASS
                                     : isAncestorActive
                                         ? "text-sidebar-foreground/80"
-                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item, hasChildren: true, isExpanded: isExpanded, onToggleExpand: () => setManualOverride(!isExpanded) })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
+                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
                         const hasNestedChildren = child.children && child.children.length > 0;
                         if (hasNestedChildren) {
                             return (_jsx(NestedFolderItem, { item: child, depth: depth + 1 }, child.to + child.label));
                         }
                         const isChildActive = currentPath === child.to;
-                        return (_jsx(NavLeafItem, { item: child, isActive: isChildActive, depthPl: getNestedNavIndent(depth + 1), onClick: () => {
+                        return (_jsx(NavLeafItem, { item: child, isActive: isChildActive, depth: depth + 1, onClick: () => {
                                 setNavContext({
                                     ...navContext,
                                     label: child.label,
@@ -530,7 +620,7 @@ function CollapsibleNavItem({ item }) {
     const activeRowRef = useActiveNavRowScroll(isActive && rendersRow);
     const activeLinkRef = useActiveNavRowScroll(isActive && !rendersRow);
     if (rendersRow) {
-        const inner = (selected, ancestor) => (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": selected ? "true" : undefined, className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
+        const inner = (selected, ancestor) => (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": selected ? "true" : undefined, "data-nav-depth": 0, className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
                 ? "opacity-40"
                 : selected
                     ? ACTIVE_NAV_ROW_CLASS
@@ -539,7 +629,7 @@ function CollapsibleNavItem({ item }) {
                 !isDisabled &&
                 "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
                 !isDisabled &&
-                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsxs("button", { type: "button", onClick: () => {
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: hasChildren, isExpanded: isExpanded, onToggle: hasChildren ? () => setManualOverride(!isExpanded) : undefined, label: item.label, isActive: (selected || ancestor) && !isDisabled, depth: 0 }), _jsxs("button", { type: "button", onClick: () => {
                         if (isDisabled)
                             return;
                         setNavContext({
@@ -554,7 +644,7 @@ function CollapsibleNavItem({ item }) {
                         if (hasChildren)
                             setManualOverride(true);
                         navigate(item.to);
-                    }, className: cn("flex items-center gap-2 flex-1 min-w-0 px-3 py-2 text-sm text-left", "pr-3 transition-[padding] duration-150 group-hover:pr-16 group-focus-within:pr-16", isDisabled
+                    }, className: cn("flex items-center gap-2 flex-1 min-w-0 py-2 text-sm text-left", getNavDepthOffsets(0).body, "pr-3 transition-[padding] duration-150", hasActions && NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                         ? "text-sidebar-foreground/45 cursor-default"
                         : selected
                             ? ACTIVE_NAV_TEXT_CLASS
@@ -564,15 +654,23 @@ function CollapsibleNavItem({ item }) {
                                 ? ACTIVE_NAV_ICON_CLASS
                                 : ancestor
                                     ? "text-sidebar-foreground/80"
-                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item, hasChildren: Boolean(hasChildren), isExpanded: Boolean(isExpanded), onToggleExpand: hasChildren ? () => setManualOverride(!isExpanded) : undefined })] }));
+                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
         return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), children: [inner(isActive, isAncestorActive), hasChildren && isExpanded && (_jsxs(_Fragment, { children: [_jsx(SubNavItems, { items: item.children, parentPath: item.to }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
     }
     if (isDisabled) {
-        return (_jsxs("div", { className: cn("flex items-center gap-2 w-full opacity-40", "rounded-lg px-3 py-2 text-left text-sm text-sidebar-foreground/45"), children: [_jsx(item.icon, { className: "size-4 shrink-0 text-sidebar-foreground/45" }), _jsx("span", { className: "truncate", children: item.label })] }));
+        return (_jsxs("div", { "data-nav-depth": 0, className: cn("relative flex items-center gap-2 w-full opacity-40", getNavDepthOffsets(0).body, 
+            // Transparent border for box-model parity — see the NavLink variant.
+            "rounded-lg border border-transparent pr-3 py-2 text-left text-sm text-sidebar-foreground/45"), children: [_jsx(NavTwisty, { hasChildren: false, label: item.label, depth: 0 }), _jsx(item.icon, { className: "size-4 shrink-0 text-sidebar-foreground/45" }), _jsx("span", { className: "truncate", children: item.label })] }));
     }
-    return (_jsx(NavLink, { ref: activeLinkRef, "data-active-nav-row": currentPath === item.to ? "true" : undefined, to: item.to, ...draggableProps, ...dropTargetProps, className: ({ isActive }) => cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS), isDragOver &&
+    return (_jsx(NavLink, { ref: activeLinkRef, "data-active-nav-row": currentPath === item.to ? "true" : undefined, "data-nav-depth": 0, to: item.to, ...draggableProps, ...dropTargetProps, className: ({ isActive }) => cn("relative flex items-center gap-2 w-full", getNavDepthOffsets(0).body, 
+        // The transparent border is NOT decoration: it is what makes this
+        // row's box model match every other variant. An absolutely
+        // positioned twisty resolves against the PADDING box, so a row
+        // without the border puts its disclosure cell 1px left of its
+        // siblings' and the column goes ragged.
+        "rounded-xl border border-transparent pr-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS), isDragOver &&
             !isFileDragOver &&
-            "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50", isFileDragOver && "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+            "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50", isFileDragOver && "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(NavTwisty, { hasChildren: false, label: item.label, isActive: isActive, depth: 0 }), _jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                         ? ACTIVE_NAV_BADGE_CLASS
                         : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] })) }));
 }
@@ -891,13 +989,13 @@ function MobileDrawer() {
         window.addEventListener("keydown", handleEscape);
         return () => window.removeEventListener("keydown", handleEscape);
     }, [isMobileOpen, isToolPanelOpen, closeMobile]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-200", isMobileOpen ? "opacity-100" : "opacity-0 pointer-events-none"), onClick: closeMobile, "aria-hidden": "true" }), _jsx("aside", { className: cn("fixed top-0 left-0 z-50 h-dvh", "flex flex-col", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground shadow-xl", "transition-transform duration-200 ease-in-out", isMobileOpen ? "translate-x-0" : "-translate-x-full"), style: { width: drawerWidth }, role: "complementary", "aria-label": "Navigation sidebar", children: _jsx(SidebarContent, { collapsed: false }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-200", isMobileOpen ? "opacity-100" : "opacity-0 pointer-events-none"), onClick: closeMobile, "aria-hidden": "true" }), _jsx("aside", { "data-sidebar-surface": "mobile", className: cn("fixed top-0 left-0 z-50 h-dvh", "flex flex-col", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground shadow-xl", "transition-transform duration-200 ease-in-out", isMobileOpen ? "translate-x-0" : "-translate-x-full"), style: { width: drawerWidth }, role: "complementary", "aria-label": "Navigation sidebar", children: _jsx(SidebarContent, { collapsed: false }) })] }));
 }
 /** Desktop inline sidebar (expanded or collapsed rail) */
 function DesktopSidebar() {
     const isOpen = useSidebarStore((s) => s.isOpen);
     const width = useSidebarStore((s) => s.width);
-    return (_jsxs("aside", { className: cn("group/sidebar relative hidden md:flex flex-col shrink-0", "h-full", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground", "transition-[width] duration-200 ease-in-out", "overflow-hidden"), style: { width: isOpen ? width : RAIL_WIDTH }, role: "complementary", "aria-label": "Navigation sidebar", children: [_jsx(SidebarContent, { collapsed: !isOpen }), isOpen && _jsx(SidebarResizeHandle, {})] }));
+    return (_jsxs("aside", { "data-sidebar-surface": "desktop", className: cn("group/sidebar relative hidden md:flex flex-col shrink-0", "h-full", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground", "transition-[width] duration-200 ease-in-out", "overflow-hidden"), style: { width: isOpen ? width : RAIL_WIDTH }, role: "complementary", "aria-label": "Navigation sidebar", children: [_jsx(SidebarContent, { collapsed: !isOpen }), isOpen && _jsx(SidebarResizeHandle, {})] }));
 }
 export function Sidebar() {
     return (_jsxs(_Fragment, { children: [_jsx(MobileDrawer, {}), _jsx(DesktopSidebar, {})] }));

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.12.1",
+  "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.12.1",
-    "@iloveagents/foundry-web-primitives": "^0.12.1"
+    "@iloveagents/foundry-agent": "^0.14.0",
+    "@iloveagents/foundry-web-primitives": "^0.14.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",