@iloveagents/foundry-web-ui 0.14.0 → 0.14.2

package/dist/components/assistant-chat.js

@@ -22,7 +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(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 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 = () => {
@@ -116,5 +124,9 @@ export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS,
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,
-                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message Assistant...", rows: 1, className: cn("w-full bg-transparent", "pt-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsxs("div", { className: "flex items-center gap-2 pb-1", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", variant: "ghost", className: "shrink-0", children: _jsx(Paperclip, { className: "size-5" }) }) }), _jsx(ContextPins, { showPinButton: showPinButton })] }), _jsx("div", { className: "flex-1" }), _jsx(ComposerActionButton, {})] })] }) })] })] })] }));
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn(
+                                    // Query container for the controls inside, so they size
+                                    // against the composer rather than the viewport. This one
+                                    // is wide, so the effort picker keeps its full label.
+                                    "@container", "flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message Assistant...", rows: 1, className: cn("w-full bg-transparent", "pt-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsxs("div", { className: "flex items-center gap-2 pb-1", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", variant: "ghost", className: "shrink-0", children: _jsx(Paperclip, { className: "size-5" }) }) }), _jsx(ContextPins, { showPinButton: showPinButton })] }), _jsx("div", { className: "flex-1" }), _jsx(ComposerActionButton, {})] })] }) })] })] })] }));
 }

package/dist/components/chat-bubble.js

@@ -98,8 +98,12 @@ export function ChatBubble() {
                     height: 64,
                 } })), !isOpen && (_jsxs("div", { className: "fixed z-50 group", style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsx("button", { type: "button", onClick: openBubble, className: cn("size-10 rounded-full", "bg-primary text-primary-foreground shadow-lg", "flex items-center justify-center", "hover:bg-primary/90 transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Ask the AI", children: _jsx(Sparkles, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, "data-chat-surface": "bubble", className: cn("fixed z-50", "rounded-2xl border border-border", "bg-background shadow-2xl", "flex flex-col overflow-hidden", "w-95 h-150"), style: dragPos
                     ? { left: dragPos.x, top: dragPos.y }
-                    : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Sparkles, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                    : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Sparkles, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4 pb-3", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                                 UserMessage: BubbleUserMessage,
                                                                 AssistantMessage: BubbleAssistantMessage,
-                                                            } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn("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" }) }) }) })] })] }) })] })] })] }))] }));
+                                                            } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn(
+                                            // Query container for the controls inside: the bubble is
+                                            // a narrow panel in a wide window, so they have to size
+                                            // against THIS box, not the viewport.
+                                            "@container", "flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", size: "icon", className: "size-7 shrink-0", children: _jsx(Paperclip, { className: "size-3.5" }) }) }), _jsx(ContextPins, { compact: true, showPinButton: true })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message...", rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) })] })] }) })] })] })] }))] }));
 }

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

@@ -11,7 +11,12 @@
  * 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.
+ * 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

@@ -22,8 +22,13 @@ const groupBy = groupPartByType({ "tool-call": ["group-tool"] });
  * 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.
+ * 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 }) => {
@@ -31,7 +36,10 @@ export function ChatMessageParts() {
                 case "group-tool":
                     return (_jsx(ToolRunGroup, { indices: part.indices, isRunning: part.status?.type === "running", children: children }));
                 case "text":
-                    return _jsx(MarkdownText, {});
+                    // 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":

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useStore } from "zustand";
 import { Check, ChevronDown } from "lucide-react";
 import { reasoningDefaultStore, reasoningEffortStore, REASONING_EFFORT_LABELS, } from "@iloveagents/foundry-agent";
@@ -43,8 +43,16 @@ export function ReasoningEffortPicker({ className }) {
     // The trigger is the only thing visible without opening the menu, so it
     // carries the resolved level too — "Auto · Medium" rather than a bare
     // "Auto" that leaves the active level a mystery.
-    const triggerLabel = effort === "default" && resolved
-        ? `${REASONING_EFFORT_LABELS.default} · ${REASONING_EFFORT_LABELS[resolved]}`
+    //
+    // Split into MODE and LEVEL because a narrow composer cannot afford
+    // both. The level is the half worth keeping: it is what changes cost
+    // and latency, and "which mode" is nearly always the default. See the
+    // render below.
+    const showsMode = effort === "default" && resolved !== null;
+    const modeLabel = REASONING_EFFORT_LABELS.default;
+    const levelLabel = showsMode
+        ? REASONING_EFFORT_LABELS[resolved]
         : REASONING_EFFORT_LABELS[effort];
-    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)))] })] }));
+    const triggerLabel = showsMode ? `${modeLabel} · ${levelLabel}` : levelLabel;
+    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}`, title: `Intelligence: ${triggerLabel}`, children: [_jsxs("span", { className: "whitespace-nowrap", children: [showsMode && _jsxs("span", { className: "@max-[24rem]:hidden", children: [modeLabel, " \u00B7 "] }), levelLabel] }), _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

@@ -7,9 +7,15 @@ import type { ReactNode } from "react";
  * 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.
+ * 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

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

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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 { 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
@@ -13,9 +12,15 @@ import { _detectErrorResult } from "./tool-fallback.js";
  * 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.
+ * 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
@@ -26,26 +31,16 @@ 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 [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 (_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 }) })] }));
+    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 }) }));
 }
-/**
- * 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "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.14.0",
-    "@iloveagents/foundry-web-primitives": "^0.14.0"
+    "@iloveagents/foundry-agent": "^0.14.2",
+    "@iloveagents/foundry-web-primitives": "^0.14.2"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",