@iloveagents/foundry-web-ui 0.13.0 → 0.14.1

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,15 @@ 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 = () => {
+    // Until the message has parts there is nothing to copy, retry or branch.
+    // `AssistantActionBar` already hides its BUTTONS while running, but the
+    // row reserving their height did not — so an empty assistant message put
+    // a 36px hole between the question and the "Thinking" line, which read as
+    // the indicator floating far away from the message it belongs to.
+    const hasParts = useAuiState((s) => (s.message.parts?.length ?? 0) > 0);
+    return (_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, {}), hasParts && (_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 +115,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,22 @@
+/**
+ * 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, collapsed; see that component for why.
+ *
+ * Reading order is fixed rather than chronological: tool runs, then the
+ * reasoning that explains them, then the answer. A model normally emits its
+ * thinking FIRST, which put the least important row at the top of every
+ * message and pushed the answer down. Flex `order` does the moving, so the
+ * parts stay where the runtime put them in the DOM.
+ */
+export declare function ChatMessageParts(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+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, collapsed; see that component for why.
+ *
+ * Reading order is fixed rather than chronological: tool runs, then the
+ * reasoning that explains them, then the answer. A model normally emits its
+ * thinking FIRST, which put the least important row at the top of every
+ * message and pushed the answer down. Flex `order` does the moving, so the
+ * parts stay where the runtime put them in the DOM.
+ */
+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":
+                    // The answer is ordered LAST so the message ends on its point,
+                    // with the reasoning row (order-1) sitting between the tool runs
+                    // and it. Tool groups keep the default order-0.
+                    return (_jsx("div", { className: "order-2", children: _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/loading-indicator.js

@@ -31,5 +31,10 @@ export function LoadingIndicator() {
     else if (streaming.status === "streaming") {
         label = "Generating response";
     }
-    return (_jsx("div", { className: "h-10 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-2 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: stalled ? "text-sm text-warning" : "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_infinite]` }), _jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_0.2s_infinite]` }), _jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_0.4s_infinite]` })] })] }) }));
+    return (
+    // `px-4` keeps the label on the same left edge as the message parts
+    // above it — measured, not guessed: the rows sit at x=469 and so does
+    // this. The old `h-10` did NOT belong: a fixed 40px block on top of the
+    // parts' own gap-4 left a visible hole under the last tool row.
+    _jsx("div", { className: "min-h-6 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-0.5 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: stalled ? "text-sm text-warning" : "text-sm text-muted-foreground", children: label }), _jsx("span", { "aria-hidden": "true", className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_infinite]` })] }) }));
 }

package/dist/components/message-disclosure.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+/**
+ * The one row shape every foldaway inside an assistant message uses.
+ *
+ * Reasoning and tool runs are the same affordance — a quiet line the reader
+ * can open when curious — but they were built twice and had drifted into two
+ * different controls stacked on top of each other: one chevron pointing down
+ * on the RIGHT of its label, another pointing right on the LEFT of its own,
+ * different paddings, different hover treatments, different default states.
+ * Read together in a transcript they looked like two unrelated widgets.
+ *
+ * So the shape lives here once. A row is: disclosure caret, the part's own
+ * icon, its label — left-aligned in that order, on a single baseline, with
+ * identical metrics. The caret is the FIRST thing in the row because it is
+ * the control; the icon that follows says what kind of thing is folded away.
+ *
+ * Everything is understated on purpose. These rows sit between the user's
+ * question and the answer, and they are machinery, not content: muted until
+ * hovered, no border, no fill. The body indents under the label behind a
+ * hairline rule, so an open row reads as a margin note rather than a second
+ * message.
+ */
+export declare function MessageDisclosure({ icon, label, open, onOpenChange, tone, placement, ariaLabel, children, ...rest }: {
+    /** The part's own icon — a brain, a wrench, a status glyph. */
+    icon: ReactNode;
+    label: ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** ``destructive`` is for a run where everything failed; nothing else. */
+    tone?: "muted" | "destructive";
+    /**
+     * ``after-tools`` sits the row between the tool runs and the answer,
+     * wherever the model actually emitted it — reasoning belongs under the
+     * work it explains and above the conclusion it produced. (The message
+     * text is ordered after it; see `ChatMessageParts`.)
+     *
+     * It is a flex `order`, so the row moves VISUALLY while staying put in the
+     * DOM. That is exactly why such a row carries a different attribute: the
+     * compaction below is a DOM-sibling rule, and a row that is first in the
+     * DOM but second on screen would otherwise hand its negative margin to
+     * whichever row really is on top.
+     */
+    placement?: "inline" | "after-tools";
+    ariaLabel?: string;
+    children: ReactNode;
+} & Record<`data-${string}`, unknown>): import("react/jsx-runtime").JSX.Element;

package/dist/components/message-disclosure.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+/**
+ * The one row shape every foldaway inside an assistant message uses.
+ *
+ * Reasoning and tool runs are the same affordance — a quiet line the reader
+ * can open when curious — but they were built twice and had drifted into two
+ * different controls stacked on top of each other: one chevron pointing down
+ * on the RIGHT of its label, another pointing right on the LEFT of its own,
+ * different paddings, different hover treatments, different default states.
+ * Read together in a transcript they looked like two unrelated widgets.
+ *
+ * So the shape lives here once. A row is: disclosure caret, the part's own
+ * icon, its label — left-aligned in that order, on a single baseline, with
+ * identical metrics. The caret is the FIRST thing in the row because it is
+ * the control; the icon that follows says what kind of thing is folded away.
+ *
+ * Everything is understated on purpose. These rows sit between the user's
+ * question and the answer, and they are machinery, not content: muted until
+ * hovered, no border, no fill. The body indents under the label behind a
+ * hairline rule, so an open row reads as a margin note rather than a second
+ * message.
+ */
+export function MessageDisclosure({ icon, label, open, onOpenChange, tone = "muted", placement = "inline", ariaLabel, children, ...rest }) {
+    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, ...(placement === "after-tools"
+            ? { "data-message-disclosure-reordered": true }
+            : { "data-message-disclosure": true }), className: cn("w-full [[data-message-disclosure]_+_&]:-mt-3", placement === "after-tools" && "order-1"), ...rest, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-disclosure-trigger": true, "aria-label": ariaLabel, className: cn("group/disclosure flex w-full items-center gap-1.5 rounded-md", "px-1.5 py-0.5 text-left text-xs transition-colors", "text-muted-foreground hover:bg-muted hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", tone === "destructive" && "text-destructive hover:text-destructive"), children: [_jsx(ChevronRight, { "aria-hidden": "true", className: cn("size-3.5 shrink-0 opacity-60 transition-transform duration-150", "group-hover/disclosure:opacity-100", open && "rotate-90") }), _jsx("span", { className: "flex size-3.5 shrink-0 items-center justify-center", children: icon }), _jsx("span", { className: "truncate", children: label })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-1.5 ml-3 border-l border-border pl-3", children: children }) })] }));
+}

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/reasoning-part.d.ts

@@ -5,6 +5,10 @@
  * Collapsed by default and deliberately understated: reasoning is context for
  * a curious reader, not the response. It stays visible after the run so a
  * reader can check *why* an answer came out the way it did.
+ *
+ * The row shape comes from `MessageDisclosure`, shared with the tool run
+ * group — these two sit next to each other in a message and used to be built
+ * separately, which is how they ended up with their carets on opposite sides.
  */
 export declare function ReasoningPart({ text }: {
     text: string;

package/dist/components/reasoning-part.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Brain, ChevronDown } from "lucide-react";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { Brain } from "lucide-react";
+import { MessageDisclosure } from "./message-disclosure.js";
 /**
  * Renders a `reasoning` message part — the model's own thinking, streamed
  * over AG-UI's `REASONING_*` events and kept separate from the answer.
@@ -10,12 +9,20 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
  * Collapsed by default and deliberately understated: reasoning is context for
  * a curious reader, not the response. It stays visible after the run so a
  * reader can check *why* an answer came out the way it did.
+ *
+ * The row shape comes from `MessageDisclosure`, shared with the tool run
+ * group — these two sit next to each other in a message and used to be built
+ * separately, which is how they ended up with their carets on opposite sides.
  */
 export function ReasoningPart({ text }) {
     const [isOpen, setIsOpen] = useState(false);
     if (!text.trim())
         return null;
-    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: "w-full", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex items-center gap-1.5 text-xs text-muted-foreground", "hover:text-foreground transition-colors"), "aria-label": isOpen ? "Hide reasoning" : "Show reasoning", children: [_jsx(Brain, { className: "size-3.5" }), _jsx("span", { children: "Reasoning" }), _jsx(ChevronDown, { className: cn("size-3.5 transition-transform", isOpen && "rotate-180") })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: cn("mt-1.5 whitespace-pre-wrap border-l-2 border-border pl-3", "text-xs text-muted-foreground"), children: text }) })] }));
+    return (_jsx(MessageDisclosure, { icon: _jsx(Brain, { className: "size-3.5" }), label: "Reasoning", open: isOpen, onOpenChange: setIsOpen, 
+        // Under the work, above the conclusion: the model usually emits its
+        // thinking first, but a reader wants "what it did", then "why", and
+        // the answer last — the message should end on its point.
+        placement: "after-tools", ariaLabel: isOpen ? "Hide reasoning" : "Show reasoning", children: _jsx("div", { className: "whitespace-pre-wrap text-xs text-muted-foreground", children: text }) }));
 }
 /** Adapter for assistant-ui's `Reasoning` part slot. */
 export const ReasoningMessagePartComponent = ({ text }) => (_jsx(ReasoningPart, { text: text }));

package/dist/components/sidebar.js

@@ -99,6 +99,11 @@ const SIDEBAR_GROUP_HEADER_PADDING =
 // 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";
+/** Body padding for a row that is NOT in a tree. Flat rows render no
+ *  disclosure cell, so reserving its column just pushes them right of the
+ *  sidebar's other flat chrome — which is what made Activity look indented
+ *  under New Thread. */
+const NAV_FLAT_BODY_CLASS = "pl-3";
 function getNavDepthOffsets(depth) {
     return NAV_DEPTH_OFFSETS[depth] ?? NAV_DEPTH_OFFSETS[NAV_DEPTH_OFFSETS.length - 1];
 }
@@ -422,10 +427,10 @@ function ContainerDropZone({ dnd }) {
  * 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, }) {
+function NavTwisty({ hasChildren, isExpanded, onToggle, label, isActive, depth, inTree = true, }) {
     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, "aria-hidden": "true", className: cn(cell, "pointer-events-none"), children: inTree && (_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();
@@ -602,7 +607,7 @@ function NestedFolderItem({ item, depth }) {
                             } }, child.to + child.label));
                     }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
 }
-function CollapsibleNavItem({ item }) {
+function CollapsibleNavItem({ item, inTree = true }) {
     const navigate = useNavigate();
     const currentPath = useLocation().pathname;
     const setNavContext = useAppStore((s) => s.setNavContext);
@@ -629,7 +634,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: [_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: () => {
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: hasChildren, inTree: inTree, 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({
@@ -644,7 +649,7 @@ function CollapsibleNavItem({ item }) {
                         if (hasChildren)
                             setManualOverride(true);
                         navigate(item.to);
-                    }, 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
+                    }, className: cn("flex items-center gap-2 flex-1 min-w-0 py-2 text-sm text-left", inTree ? getNavDepthOffsets(0).body : NAV_FLAT_BODY_CLASS, "pr-3 transition-[padding] duration-150", hasActions && NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                         ? "text-sidebar-foreground/45 cursor-default"
                         : selected
                             ? ACTIVE_NAV_TEXT_CLASS
@@ -658,11 +663,11 @@ function CollapsibleNavItem({ 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", { "data-nav-depth": 0, className: cn("relative flex items-center gap-2 w-full opacity-40", getNavDepthOffsets(0).body, 
+        return (_jsxs("div", { "data-nav-depth": 0, className: cn("relative flex items-center gap-2 w-full opacity-40", inTree ? getNavDepthOffsets(0).body : NAV_FLAT_BODY_CLASS, 
             // 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 })] }));
+            "rounded-lg border border-transparent pr-3 py-2 text-left text-sm text-sidebar-foreground/45"), children: [_jsx(NavTwisty, { hasChildren: false, inTree: inTree, 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, "data-nav-depth": 0, to: item.to, ...draggableProps, ...dropTargetProps, className: ({ isActive }) => cn("relative flex items-center gap-2 w-full", getNavDepthOffsets(0).body, 
+    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", inTree ? getNavDepthOffsets(0).body : NAV_FLAT_BODY_CLASS, 
         // 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
@@ -670,7 +675,7 @@ function CollapsibleNavItem({ item }) {
         // 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(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
+            "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, inTree: inTree, 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" }))] })) }));
 }
@@ -829,6 +834,14 @@ function findFirstStatusDot(items) {
  * — toggling one doesn't re-render siblings.
  */
 function NavGroupSection({ group }) {
+    // Does anything in THIS group branch? The leaf dot exists to say "this
+    // row has nothing under it", which is only information where a sibling
+    // might — a tree. In a flat group (New Thread, Activity, a list of
+    // chats) nothing branches, so a dot on every row marks a distinction
+    // that does not exist and reads as a bullet. The disclosure cell still
+    // renders either way, so flat rows keep the same label column as tree
+    // rows and the sidebar stays on one grid.
+    const groupHasBranches = group.items.some((item) => Boolean(item.children && item.children.length > 0));
     // hideLabel + collapsible are mutually exclusive — a hidden label
     // can't host a chevron. The collapsible flag is the opt-in; legacy
     // groups stay uncollapsable so behaviour is unchanged.
@@ -881,7 +894,12 @@ function NavGroupSection({ group }) {
                 _jsxs("div", { className: cn("flex items-center justify-between rounded-lg py-1.5 transition-colors hover:bg-sidebar-accent/70", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("span", { "aria-hidden": "true", className: SIDEBAR_ITEM_ICON_CLASS }), _jsx(NavLink, { to: group.to, end: true, className: "min-w-0 flex-1", children: ({ isActive }) => (_jsx("span", { className: cn("block", SIDEBAR_GROUP_HEADER_LABEL_CLASS, isActive
                                     ? "text-sidebar-selected-foreground"
                                     : "text-sidebar-foreground/65 hover:text-sidebar-foreground"), children: group.label })) }), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : (_jsxs("div", { className: cn("flex items-center", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("span", { "aria-hidden": "true", className: SIDEBAR_ITEM_ICON_CLASS }), _jsx("span", { className: cn("text-sidebar-foreground/65", SIDEBAR_GROUP_HEADER_LABEL_CLASS), children: group.label })] })) })), !collapsed &&
-                group.items.map((item) => (_jsx(CollapsibleNavItem, { item: item }, item.to + item.label)))] }));
+                group.items.map((item) => (_jsx(CollapsibleNavItem, { item: item, 
+                    // A leaf dot distinguishes "nothing under this" from a sibling
+                    // that branches. Decided per GROUP: Workspaces has branches, so
+                    // its leaves are marked; Chats has none, so a dot on every row
+                    // would mark a distinction that does not exist.
+                    inTree: groupHasBranches }, item.to + item.label)))] }));
 }
 /**
  * The "+" dropdown shown next to a group label when the group declares

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

@@ -0,0 +1,29 @@
+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.
+ *
+ * COLLAPSED by default. This was open at first, on the reasoning that a
+ * developer watching an agent work wants the detail — but in a real
+ * transcript the cards dominate the answer they were supposed to support,
+ * and the reader scrolls past machinery to reach the point. The summary line
+ * already carries what matters at a glance (how many calls, and whether they
+ * worked); opening it is the deliberate act.
+ *
+ * The row shape is shared with the reasoning part via `MessageDisclosure`, so
+ * the two foldaways in a message read as one family instead of two widgets.
+ *
+ * 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,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { Loader2, CheckCircle2, XCircle, AlertCircle } from "lucide-react";
+import { MessageDisclosure } from "./message-disclosure.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.
+ *
+ * COLLAPSED by default. This was open at first, on the reasoning that a
+ * developer watching an agent work wants the detail — but in a real
+ * transcript the cards dominate the answer they were supposed to support,
+ * and the reader scrolls past machinery to reach the point. The summary line
+ * already carries what matters at a glance (how many calls, and whether they
+ * worked); opening it is the deliberate act.
+ *
+ * The row shape is shared with the reasoning part via `MessageDisclosure`, so
+ * the two foldaways in a message read as one family instead of two widgets.
+ *
+ * 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(false);
+    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 (_jsx(MessageDisclosure, { open: isOpen, onOpenChange: setIsOpen, tone: allFailed ? "destructive" : "muted", icon: isRunning ? (_jsx(Loader2, { className: "size-3.5 animate-spin text-primary" })) : allFailed ? (_jsx(XCircle, { className: "size-3.5 text-destructive" })) : failed > 0 ? (
+        // Partial: the run produced a result, some of it the hard way.
+        _jsx(AlertCircle, { className: "size-3.5 text-muted-foreground" })) : (_jsx(CheckCircle2, { className: "size-3.5 text-primary" })), label: label, "data-tool-run-group": true, children: _jsx("div", { className: "flex flex-col gap-2", children: children }) }));
+}
+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.1",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -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.1",
+    "@iloveagents/foundry-web-primitives": "^0.14.1"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",