@iloveagents/foundry-web-ui 0.14.2 → 0.16.0

package/dist/components/assistant-chat.js

@@ -120,7 +120,7 @@ export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS,
     const collapseChat = useChatBubbleStore((s) => s.collapse);
     const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);
     const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
-    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto bg-background", children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8", children: [_jsx(ThreadPrimitive.Messages, { components: {
+    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto bg-background", children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,

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

@@ -10,13 +10,18 @@
  * 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.
+ * Each stretch of machinery folds into one {@link TurnActivity} — a single
+ * summary row over the cards and the thinking, 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.
+ * Reading order is CHRONOLOGICAL, throughout. It briefly was not: text
+ * carried a flex `order` that floated every prose part to the bottom of the
+ * message, to keep a reasoning row from sitting above a one-line answer.
+ * With the machinery folded into a quiet 20px row that argument is spent,
+ * and the hoist actively hurt — in a multi-step turn it stripped the
+ * narration out from between the work and stacked the bare rows into the
+ * ladder this component exists to prevent. It also glued consecutive prose
+ * parts into one run-on paragraph. Parts now render where the model put
+ * them.
  */
 export declare function ChatMessageParts(): import("react/jsx-runtime").JSX.Element;

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

@@ -3,12 +3,21 @@ 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";
+import { TurnActivity } from "./turn-activity.js";
 /**
- * Coalesce adjacent tool calls into one `group-tool` node. Everything else
- * stays ungrouped and renders as its own leaf.
+ * A turn's machinery nests under a `group-activity` node; inside it, adjacent
+ * tool calls still coalesce into `group-tool`.
+ *
+ * Text is deliberately absent from this map. The model's prose stays
+ * ungrouped, so it can never end up inside the fold — and because grouping
+ * coalesces ADJACENT parts, each stretch of prose also ends one activity node
+ * and starts the next. That is the intent: a multi-step turn reads as work,
+ * what it learned, work, what it learned, answer.
  */
-const groupBy = groupPartByType({ "tool-call": ["group-tool"] });
+const groupBy = groupPartByType({
+    "tool-call": ["group-activity", "group-tool"],
+    reasoning: ["group-activity"],
+});
 /**
  * The parts of an assistant message — ONE renderer, used by every chat
  * surface.
@@ -21,27 +30,53 @@ const groupBy = groupPartByType({ "tool-call": ["group-tool"] });
  * 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.
+ * Each stretch of machinery folds into one {@link TurnActivity} — a single
+ * summary row over the cards and the thinking, 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.
+ * Reading order is CHRONOLOGICAL, throughout. It briefly was not: text
+ * carried a flex `order` that floated every prose part to the bottom of the
+ * message, to keep a reasoning row from sitting above a one-line answer.
+ * With the machinery folded into a quiet 20px row that argument is spent,
+ * and the hoist actively hurt — in a multi-step turn it stripped the
+ * narration out from between the work and stacked the bare rows into the
+ * ladder this component exists to prevent. It also glued consecutive prose
+ * parts into one run-on paragraph. Parts now render where the model put
+ * them.
  */
 export function ChatMessageParts() {
     return (_jsx(MessagePrimitive.GroupedParts, { groupBy: groupBy, indicator: "never", children: ({ part, children }) => {
             switch (part.type) {
+                case "group-activity":
+                    return (_jsx(TurnActivity, { indices: part.indices, isRunning: part.status?.type === "running", children: children }));
                 case "group-tool":
-                    return (_jsx(ToolRunGroup, { indices: part.indices, isRunning: part.status?.type === "running", children: children }));
+                    // Inside the activity fold, so NOT another collapsed row —
+                    // opening one disclosure only to meet a second is a maze. The
+                    // cards render directly; the count already showed on the row
+                    // above.
+                    return _jsx("div", { className: "flex flex-col gap-2", 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, {}) }));
+                    // The wrapper is load-bearing, though it carries no classes.
+                    // `MarkdownText` renders `<ReactMarkdown>` directly, which emits
+                    // its top-level blocks into a FRAGMENT — without an element to
+                    // hold them, every paragraph, list and code block becomes a
+                    // direct child of the message's `gap-4` flex container and picks
+                    // up 16px of message-part spacing between them, on top of their
+                    // own margins. It used to be the `order-2` div; the ordering went
+                    // away, the wrapper must not.
+                    return (_jsx("div", { children: _jsx(MarkdownText, {}) }));
                 case "reasoning":
-                    return _jsx(ReasoningMessagePartComponent, { text: part.text });
+                    // Plain inside the fold, rather than behind a second disclosure.
+                    //
+                    // Its POSITION is only as chronological as the parts array it is
+                    // given. Replayed history preserves the model's interleaving;
+                    // the live adapter does not — it accumulates all reasoning into a
+                    // single part emitted ahead of every tool call, so a live
+                    // reasoning A → tool A → reasoning B → tool B arrives as
+                    // reasoning A+B → tool A → tool B. That is the adapter's to fix,
+                    // and rendering in place is right either way; this note is here
+                    // so the next reader does not take the ordering on faith.
+                    return _jsx(ReasoningMessagePartComponent, { text: part.text, nested: true });
                 case "tool-call":
                     return part.toolUI ?? _jsx(ToolFallback, { ...part });
                 default:

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

@@ -9,10 +9,11 @@ import type { ReactNode } from "react";
  * 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.
+ * So the shape lives here once. A row is: the part's own icon, its label,
+ * then the disclosure caret — on a single baseline, with identical metrics.
+ * The icon leads because it is the glyph that carries meaning (what kind of
+ * thing is folded away, and whether it went well); the caret trails, where
+ * the eye lands after the words and where every chat client puts it.
  *
  * Everything is understated on purpose. These rows sit between the user's
  * question and the answer, and they are machinery, not content: muted until
@@ -20,7 +21,7 @@ import type { ReactNode } from "react";
  * 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 }: {
+export declare function MessageDisclosure({ icon, label, open, onOpenChange, tone, ariaLabel, children, ...rest }: {
     /** The part's own icon — a brain, a wrench, a status glyph. */
     icon: ReactNode;
     label: ReactNode;
@@ -28,19 +29,6 @@ export declare function MessageDisclosure({ icon, label, open, onOpenChange, ton
     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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 /**
@@ -12,10 +12,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
  * 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.
+ * So the shape lives here once. A row is: the part's own icon, its label,
+ * then the disclosure caret — on a single baseline, with identical metrics.
+ * The icon leads because it is the glyph that carries meaning (what kind of
+ * thing is folded away, and whether it went well); the caret trails, where
+ * the eye lands after the words and where every chat client puts it.
  *
  * Everything is understated on purpose. These rows sit between the user's
  * question and the answer, and they are machinery, not content: muted until
@@ -23,8 +24,22 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
  * 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 }) })] }));
+export function MessageDisclosure({ icon, label, open, onOpenChange, tone = "muted", ariaLabel, children, ...rest }) {
+    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, "data-message-disclosure": true, 
+        // Rows render where the model put them. There was once an
+        // ``after-tools`` placement that moved a row with flex `order` — and a
+        // separate data attribute, because the compaction below is a
+        // DOM-SIBLING rule and a row that is first in the DOM but second on
+        // screen would hand its negative margin to the wrong neighbour. Both
+        // are gone: the reordering existed to keep a reasoning row from sitting
+        // above a short answer, which folding the machinery into one quiet row
+        // already solves.
+        className: "w-full [[data-message-disclosure]_+_&]:-mt-3", ...rest, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-disclosure-trigger": true, "aria-label": ariaLabel, className: cn(
+                    // `w-fit` with `-ml-1.5`: the row is a pill that hugs its own
+                    // words, and the negative margin cancels the padding so the
+                    // ICON lines up with the message text's left edge rather than
+                    // sitting 6px inside it. Full-width was worse on both counts —
+                    // it made a hover target the width of the message, and it left
+                    // the caret stranded at the far right once the caret moved.
+                    "group/disclosure -ml-1.5 flex w-fit max-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("span", { className: "flex size-3.5 shrink-0 items-center justify-center", children: icon }), _jsx("span", { className: "truncate", children: label }), _jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-3.5 shrink-0 opacity-60 transition-transform duration-150", "group-hover/disclosure:opacity-100", open && "rotate-180") })] }) }), _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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStore } from "zustand";
 import { Check, ChevronDown } from "lucide-react";
 import { reasoningDefaultStore, reasoningEffortStore, REASONING_EFFORT_LABELS, } from "@iloveagents/foundry-agent";
@@ -11,6 +11,40 @@ const OPTIONS = [
     { value: "high", hint: "Slower, better on hard problems" },
     { value: "xhigh", hint: "Slowest, for the hardest questions" },
 ];
+/** Bar count per level, lowest to highest. */
+const EFFORT_RANK = {
+    low: 1,
+    medium: 2,
+    high: 3,
+    xhigh: 4,
+};
+/**
+ * The level as four rising bars.
+ *
+ * The trigger's job is to answer "how hard is it thinking?" at a glance, and
+ * in a narrow composer — the chat bubble, a side panel — the words cost more
+ * width than that question is worth. Bars cost ~14px and answer it without
+ * reading, so in that case the words drop and this stands in for them.
+ *
+ * Takes a CONCRETE level, never `null`. A gauge with nothing lit is not a
+ * gauge, it is four faint marks; the caller keeps the words instead when
+ * there is no level to encode, which makes the empty state unrepresentable
+ * here rather than something this has to render politely.
+ *
+ * Deliberately shows LEVEL only, never whether the level is pinned or
+ * inherited from `Auto`. The level is what changes cost and latency; the mode
+ * is the half this trigger already drops first when space runs short.
+ *
+ * `bg-current` throughout, so the bars inherit the button's own muted →
+ * foreground hover transition instead of needing their own colour states.
+ */
+function EffortGauge({ level }) {
+    const rank = EFFORT_RANK[level];
+    return (_jsx("span", { "aria-hidden": "true", className: "flex h-3.5 shrink-0 items-end gap-px", children: [1, 2, 3, 4].map((step) => (_jsx("span", { className: cn("w-0.5 rounded-full bg-current transition-opacity", step === 1 && "h-1", step === 2 && "h-1.5", step === 3 && "h-2", step === 4 && "h-2.5", 
+            // The unlit bars stay visible: the gauge has to read as "2 of 4",
+            // not as a bare pair of marks whose ceiling you cannot see.
+            step <= rank ? "opacity-100" : "opacity-25") }, step))) }));
+}
 /**
  * What `Auto` is currently doing, in words.
  *
@@ -54,5 +88,7 @@ export function ReasoningEffortPicker({ className }) {
         ? REASONING_EFFORT_LABELS[resolved]
         : REASONING_EFFORT_LABELS[effort];
     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)))] })] }));
+    // `default` with nothing resolved is the one case with no level to draw.
+    const gaugeLevel = effort === "default" ? resolved : 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}`, title: `Intelligence: ${triggerLabel}`, children: [gaugeLevel !== null && (_jsx("span", { className: "hidden @max-[24rem]:flex", children: _jsx(EffortGauge, { level: gaugeLevel }) })), _jsxs("span", { className: cn("whitespace-nowrap", gaugeLevel !== null && "@max-[24rem]:hidden"), children: [showsMode && `${modeLabel} · `, 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

@@ -6,14 +6,17 @@
  * 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.
+ * The row shape comes from `MessageDisclosure`, shared with the turn's
+ * activity row — these 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 }: {
+export declare function ReasoningPart({ text, nested }: {
     text: string;
+    nested?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
 /** Adapter for assistant-ui's `Reasoning` part slot. */
-export declare const ReasoningMessagePartComponent: ({ text }: {
+export declare const ReasoningMessagePartComponent: ({ text, nested, }: {
     text: string;
+    nested?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/reasoning-part.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Brain } from "lucide-react";
 import { MessageDisclosure } from "./message-disclosure.js";
@@ -10,19 +10,23 @@ import { MessageDisclosure } from "./message-disclosure.js";
  * 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.
+ * The row shape comes from `MessageDisclosure`, shared with the turn's
+ * activity row — these 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 }) {
+export function ReasoningPart({ text, nested = false }) {
     const [isOpen, setIsOpen] = useState(false);
     if (!text.trim())
         return null;
-    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 }) }));
+    // Inside the turn's activity fold there is no second fold: the reader
+    // already opened one to get here, and a disclosure containing disclosures
+    // is a maze. Just the thinking, captioned, in the slot the model produced
+    // it in.
+    if (nested) {
+        return (_jsxs("div", { className: "flex flex-col gap-1", "data-reasoning-part": true, children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Brain, { className: "size-3.5" }), "Reasoning"] }), _jsx("div", { className: "whitespace-pre-wrap text-xs text-muted-foreground", children: text })] }));
+    }
+    return (_jsx(MessageDisclosure, { icon: _jsx(Brain, { className: "size-3.5" }), label: "Reasoning", open: isOpen, onOpenChange: setIsOpen, 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 }));
+export const ReasoningMessagePartComponent = ({ text, nested = false, }) => _jsx(ReasoningPart, { text: text, nested: nested });

package/dist/components/sidebar.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router";
-import { Ellipsis, PanelLeft, PanelLeftOpen, SquarePen, ChevronDown, ChevronRight, GripVertical, Plus, Upload } from "lucide-react";
+import { Ellipsis, PanelLeft, PanelLeftOpen, SquarePen, ChevronDown, ChevronRight, GripVertical, Plus, Upload, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { useSidebarStore, RAIL_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH, } from "../lib/sidebar-store.js";
 import { useToolPanelStore } from "../lib/tool-panel-store.js";
 import { useNewConversation } from "../lib/use-new-conversation.js";
 import { useNavStore } from "../lib/nav-store.js";
 import { useAppStore } from "../lib/app-store.js";
-import { getContainerDropZoneLabel, hasAnyDropTarget, hasExternalFilesData } from "../lib/nav-dnd.js";
+import { getContainerDropZoneLabel, hasAnyDropTarget, hasExternalFilesData, } from "../lib/nav-dnd.js";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { Button } from "@iloveagents/foundry-web-primitives";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
 import { AppBrand } from "./app-brand.js";
 const ACTIVE_NAV_ROW_CLASS = "border border-transparent bg-sidebar-selected shadow-none";
 const ACTIVE_NAV_TEXT_CLASS = "font-semibold text-sidebar-foreground";
@@ -127,10 +127,7 @@ function useActiveNavRowScroll(isActive) {
                 return;
             const rect = element.getBoundingClientRect();
             const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-            const isOnScreen = rect.width > 0 &&
-                rect.height > 0 &&
-                rect.right > 0 &&
-                rect.left < viewportWidth;
+            const isOnScreen = rect.width > 0 && rect.height > 0 && rect.right > 0 && rect.left < viewportWidth;
             if (!isOnScreen)
                 return;
             const nav = element.closest("nav");
@@ -427,10 +424,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, inTree = true, }) {
+function NavTwisty({ hasChildren, childrenUnloaded = false, 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: 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, "aria-hidden": "true", className: cn(cell, "pointer-events-none"), children: inTree && !childrenUnloaded && (_jsx("span", { "data-nav-leaf-dot": true, 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();
@@ -480,11 +477,13 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
                 !isDisabled &&
                 "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
                 !isDisabled &&
-                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsxs("button", { type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, className: cn("flex items-center gap-2 flex-1 min-w-0 py-1.5 text-sm text-left", bodyPl, "pr-3 transition-[padding] duration-150", NAV_ROW_ACTIONS_CLEARANCE, isDisabled
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsxs("button", { type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, className: cn("flex items-center gap-2 flex-1 min-w-0 py-1.5 text-sm text-left", bodyPl, "pr-3 transition-[padding] duration-150", NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                         ? "text-sidebar-foreground/45 cursor-default"
                         : isActive
                             ? ACTIVE_NAV_TEXT_CLASS
-                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
+                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                                ? ACTIVE_NAV_BADGE_CLASS
+                                : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
     }
     return (_jsxs("button", { ref: activeButtonRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, ...(isDisabled ? {} : draggableProps), ...(isDisabled ? {} : dropTargetProps), className: cn("relative flex items-center gap-2 w-full", "rounded-lg border border-transparent pr-3 py-1.5 text-sm text-left", bodyPl, isDisabled
             ? "opacity-40 cursor-default"
@@ -493,7 +492,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
             !isDisabled &&
-            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
 }
 function SubNavItems({ items, parentPath, depth = 1, }) {
     const navigate = useNavigate();
@@ -587,7 +586,9 @@ function NestedFolderItem({ item, depth }) {
                                     ? ACTIVE_NAV_ICON_CLASS
                                     : isAncestorActive
                                         ? "text-sidebar-foreground/80"
-                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
+                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                                    ? ACTIVE_NAV_BADGE_CLASS
+                                    : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
                         const hasNestedChildren = child.children && child.children.length > 0;
                         if (hasNestedChildren) {
                             return (_jsx(NestedFolderItem, { item: child, depth: depth + 1 }, child.to + child.label));
@@ -634,7 +635,7 @@ function CollapsibleNavItem({ item, inTree = true }) {
                 !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, inTree: inTree, 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, childrenUnloaded: item.childrenUnloaded, 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({
@@ -659,13 +660,15 @@ function CollapsibleNavItem({ item, inTree = true }) {
                                 ? ACTIVE_NAV_ICON_CLASS
                                 : ancestor
                                     ? "text-sidebar-foreground/80"
-                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
+                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected
+                                ? ACTIVE_NAV_BADGE_CLASS
+                                : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
         return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), children: [inner(isActive, isAncestorActive), hasChildren && isExpanded && (_jsxs(_Fragment, { children: [_jsx(SubNavItems, { items: item.children, parentPath: item.to }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
     }
     if (isDisabled) {
         return (_jsxs("div", { "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, 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 })] }));
+            "rounded-lg border border-transparent pr-3 py-2 text-left text-sm text-sidebar-foreground/45"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, 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", inTree ? getNavDepthOffsets(0).body : NAV_FLAT_BODY_CLASS, 
         // The transparent border is NOT decoration: it is what makes this
@@ -675,7 +678,8 @@ function CollapsibleNavItem({ item, inTree = true }) {
         // 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, 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
+            "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, childrenUnloaded: item.childrenUnloaded, 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" }))] })) }));
 }
@@ -802,9 +806,7 @@ function useGroupCollapsed(label, defaultCollapsed) {
     // that happens to collide with a prototype key (e.g. ``toString``,
     // ``__proto__``, ``constructor``) is not treated as a persisted
     // entry. ``map`` is parsed JSON so its prototype is ``Object``'s.
-    return Object.prototype.hasOwnProperty.call(map, label)
-        ? map[label]
-        : Boolean(defaultCollapsed);
+    return Object.prototype.hasOwnProperty.call(map, label) ? map[label] : Boolean(defaultCollapsed);
 }
 function toggleGroupCollapsed(label, current) {
     writeCollapseMap({ ...readCollapseMap(), [label]: !current });

package/dist/components/turn-activity.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+/**
+ * ONE row for everything a turn did before it answered.
+ *
+ * A turn that searched a corpus eleven times used to render eleven summary
+ * rows — one per adjacent run of tool calls — plus a reasoning row of its
+ * own, and the answer somewhere underneath. Each row was individually
+ * reasonable; stacked, they were a ladder the reader had to climb past to
+ * reach the point.
+ *
+ * So the machinery folds: "Worked · 20 tools · reasoning". The model's PROSE
+ * never goes inside — it is what the reader came for and it stays in the
+ * open, which also means each stretch of it ends one of these rows and
+ * starts the next. A turn that narrates its steps gets one row per step
+ * rather than one per tool run; a turn that just works and answers gets
+ * exactly one.
+ *
+ * Order is CHRONOLOGICAL, inside the fold and outside it. Reasoning explains
+ * why the next call happened ("I need the termination clause from both
+ * agreements" → three searches); moving it away from the calls it explains
+ * turns a narrative into a pile. Outside, a multi-step turn reads as work,
+ * what it learned, work, what it learned, answer — the model's prose ends
+ * one of these rows and starts the next.
+ *
+ * Collapsed by default, for the reason the per-run fold this replaces had
+ * already found: in a real transcript the machinery dominates the answer it
+ * was meant to support, and the reader scrolls past it to reach the point.
+ */
+export declare function TurnActivity({ indices, isRunning, children, }: {
+    indices: readonly number[];
+    isRunning: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/turn-activity.js

@@ -0,0 +1,110 @@
+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 for everything a turn did before it answered.
+ *
+ * A turn that searched a corpus eleven times used to render eleven summary
+ * rows — one per adjacent run of tool calls — plus a reasoning row of its
+ * own, and the answer somewhere underneath. Each row was individually
+ * reasonable; stacked, they were a ladder the reader had to climb past to
+ * reach the point.
+ *
+ * So the machinery folds: "Worked · 20 tools · reasoning". The model's PROSE
+ * never goes inside — it is what the reader came for and it stays in the
+ * open, which also means each stretch of it ends one of these rows and
+ * starts the next. A turn that narrates its steps gets one row per step
+ * rather than one per tool run; a turn that just works and answers gets
+ * exactly one.
+ *
+ * Order is CHRONOLOGICAL, inside the fold and outside it. Reasoning explains
+ * why the next call happened ("I need the termination clause from both
+ * agreements" → three searches); moving it away from the calls it explains
+ * turns a narrative into a pile. Outside, a multi-step turn reads as work,
+ * what it learned, work, what it learned, answer — the model's prose ends
+ * one of these rows and starts the next.
+ *
+ * Collapsed by default, for the reason the per-run fold this replaces had
+ * already found: in a real transcript the machinery dominates the answer it
+ * was meant to support, and the reader scrolls past it to reach the point.
+ */
+export function TurnActivity({ indices, isRunning, children, }) {
+    const { tools, failed, hasReasoning } = useTurnOutcome(indices);
+    const [isOpen, setIsOpen] = useState(false);
+    const summary = summarise({ tools, failed, hasReasoning, isRunning });
+    // Red only when EVERY call failed AND the turn has SETTLED. One failure
+    // among twenty is a turn that recovered, and painting it red would report a
+    // broken answer where there is a working one — but so would painting it red
+    // mid-run, when the only calls so far happen to have failed and the model is
+    // still reasoning its way to one that works. A partial failure still says
+    // so, in the count, without the alarm.
+    const allFailed = !isRunning && tools > 0 && failed === tools;
+    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 ? (_jsx(AlertCircle, { className: "size-3.5 text-muted-foreground" })) : (_jsx(CheckCircle2, { className: "size-3.5 text-primary" })), label: summary, 
+        // The summary goes in the accessible name, not just the visible one.
+        // An `aria-label` REPLACES the name a button would otherwise derive
+        // from its contents, so a bare "Show what this turn did" would have
+        // announced the row while hiding the very thing it summarises — the
+        // call count, whether anything failed, whether there is thinking to
+        // read. A screen-reader user got strictly less than a sighted one.
+        ariaLabel: `${summary} — ${isOpen ? "hide" : "show"} details`, "data-turn-activity": true, children: _jsx("div", { className: "flex flex-col gap-2", children: children }) }));
+}
+/**
+ * The row's one line of text.
+ *
+ * Says what happened, in the order a reader asks it: is it still going, how
+ * much work was there, did any of it fail, and was there thinking to read.
+ * "Worked" alone when a turn only thought — claiming tools it never called
+ * would be a lie in the summary line, which is the one part nobody expands
+ * to check.
+ *
+ * This row describes its CONTENTS; it does not narrate the run. The phase a
+ * run is in belongs to the status indicator above the composer, which knows
+ * things this row cannot — which tool is in flight, whether the stream has
+ * stalled. A turn with reasoning and no calls yet therefore says "Reasoning"
+ * rather than "Thinking…", which is what the indicator is already saying two
+ * lines below; the same word twice on one screen reads as a stutter, not as
+ * two facts.
+ *
+ * No ellipses either: the spinner in the row's own icon slot carries "still
+ * going", and it does it without competing for the label.
+ */
+function summarise({ tools, failed, hasReasoning, isRunning, }) {
+    const toolText = tools === 1 ? "1 tool" : `${tools} tools`;
+    // 0 tools while running means the group holds nothing but reasoning —
+    // `useTurnOutcome` counts every non-reasoning part as a call — so naming it
+    // is accurate, not a guess.
+    if (isRunning)
+        return tools > 0 ? `Working · ${toolText}` : "Reasoning";
+    const parts = ["Worked"];
+    if (tools > 0)
+        parts.push(failed > 0 ? `${toolText} · ${failed} failed` : toolText);
+    if (hasReasoning)
+        parts.push("reasoning");
+    return parts.join(" · ");
+}
+/** What the turn actually contains, read from the message's own parts. */
+function useTurnOutcome(indices) {
+    const parts = useAuiState((s) => s.message.parts);
+    let tools = 0;
+    let failed = 0;
+    let hasReasoning = false;
+    for (const index of indices) {
+        const part = parts?.[index];
+        if (!part)
+            continue;
+        if (part.type === "reasoning") {
+            hasReasoning = true;
+            continue;
+        }
+        // Anything else under this node is a call the turn made. Counted by
+        // exclusion rather than by an allow-list of type names, so a new tool
+        // part type shows up in the count instead of vanishing from it.
+        tools++;
+        if (part.status?.type === "incomplete" || _detectErrorResult(part.result))
+            failed++;
+    }
+    return { tools, failed, hasReasoning };
+}

package/dist/lib/nav-config.d.ts

@@ -67,6 +67,22 @@ export interface NavItem {
     contextInstructions?: string;
     /** Sub-navigation items (rendered indented under parent) */
     children?: NavItem[];
+    /**
+     * The row's children have not been fetched yet, so `children` being empty
+     * says nothing about whether it has any.
+     *
+     * A tree row normally shows one of two markers: a chevron if it branches, a
+     * dot if it is a leaf. That is two states for a question with THREE answers
+     * — has children, has none, and nobody has looked. A caller that loads
+     * subtrees lazily (only the active one, say) leaves every other row with an
+     * empty `children`, and the row then claims to be a leaf on the strength of
+     * a fetch that never happened.
+     *
+     * Set this while the answer is unknown and the row shows neither marker: no
+     * chevron to click into nothing, no dot asserting an emptiness no one
+     * checked. Clear it once the children are known, empty or not.
+     */
+    childrenUnloaded?: boolean;
     /** Inline action buttons rendered next to the nav item (e.g., + document, + folder) */
     actions?: NavItemAction[];
     /** Optional drag-and-drop behavior (provided by feature modules) */

package/package.json

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

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

@@ -1,29 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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 };
-}