@iloveagents/foundry-web-ui 0.24.0 → 0.26.0

package/dist/components/sidebar.js

@@ -1,7 +1,7 @@
 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, ChevronLeft, } 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";
@@ -83,12 +83,19 @@ const SIDEBAR_ITEM_GAP_CLASS = "gap-2";
 // ChatGPT / Linear / Notion "header sits on its children" pattern.
 // Symmetric ``py-2`` made the header float midway between sections
 // instead of belonging to the group below it.
-const SIDEBAR_GROUP_HEADER_PADDING = 
-// ``border border-transparent`` for the same reason every item row
-// carries one: the border is part of the box model that decides where
-// the padding box starts. Without it the header chevron lands 1px left
-// of every row's disclosure cell and the column is visibly ragged.
-"border border-transparent pl-3 pr-3 pt-4 pb-0";
+// Vertical rhythm: rows are tight (depth-0 ``py-1.5``, nested ``py-1``) and
+// sections keep their ``pt-4`` gap, so what separates is the group, not
+// every row; the header label sits a step brighter than the rows' muted
+// text so the section reads above its items (user's test: rows were
+// airy and headers lighter than their children).
+const SIDEBAR_GROUP_HEADER_PADDING = "pt-4 pb-0";
+// The header's own box: the hover surface spans the row exactly like an
+// item row's does — same radius, same transparent border (part of the box
+// model that decides where the padding box starts: without it the chevron
+// lands 1px left of every row's disclosure cell) and the same horizontal
+// inset, so header and rows highlight on one outline (user's test: the
+// narrower inset box read as misaligned and cramped).
+const SIDEBAR_GROUP_HEADER_BOX = "rounded-xl border border-transparent pl-3 pr-3";
 // Typography for the group-header LABEL text (CHATS / WORKSPACES /
 // ADMIN / …). Stays at ``text-xs`` (12px) — same size as before —
 // but bumps weight from ``font-medium`` to ``font-semibold``. The
@@ -99,10 +106,13 @@ 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. */
+/** Body padding for a flat row with nothing to indent under: a row in a
+ *  group without a visible header (New Thread, Activity) sits with the
+ *  sidebar's other flat chrome, and a focused group's heading sits under
+ *  its header's chevron. Flat rows UNDER a visible header indent like
+ *  depth-0 tree rows instead, so their icon sits under the header label
+ *  and the group reads as a group (user's test: Build's rows sat level
+ *  with their header). */
 const NAV_FLAT_BODY_CLASS = "pl-3";
 function getNavDepthOffsets(depth) {
     return NAV_DEPTH_OFFSETS[depth] ?? NAV_DEPTH_OFFSETS[NAV_DEPTH_OFFSETS.length - 1];
@@ -477,7 +487,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, 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
+                "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 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
@@ -485,7 +495,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
                                 ? 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
+    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 text-sm text-left", bodyPl, isDisabled
             ? "opacity-40 cursor-default"
             : "text-sidebar-foreground/80 transition-colors hover:bg-sidebar-accent/70", !isDisabled && isActive && ACTIVE_NAV_ROW_CLASS, isDragOver &&
             !isFileDragOver &&
@@ -576,7 +586,7 @@ function NestedFolderItem({ item, depth }) {
                                     .join("\n") || null,
                             });
                             navigate(item.to);
-                        }, className: cn("flex items-center gap-2 flex-1 min-w-0", bodyPl, "pr-3 py-1.5 text-sm text-left transition-[padding] duration-150", hasActions && NAV_ROW_ACTIONS_CLEARANCE, isDisabled
+                        }, className: cn("flex items-center gap-2 flex-1 min-w-0", bodyPl, "pr-3 py-1 text-sm text-left transition-[padding] duration-150", hasActions && NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                             ? "text-sidebar-foreground/45 cursor-default"
                             : isActive
                                 ? ACTIVE_NAV_TEXT_CLASS
@@ -608,7 +618,7 @@ function NestedFolderItem({ item, depth }) {
                             } }, child.to + child.label));
                     }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
 }
-function CollapsibleNavItem({ item, inTree = true }) {
+function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader = false, }) {
     const navigate = useNavigate();
     const currentPath = useLocation().pathname;
     const setNavContext = useAppStore((s) => s.setNavContext);
@@ -617,10 +627,19 @@ function CollapsibleNavItem({ item, inTree = true }) {
     const isActive = currentPath === item.to;
     const isAncestorActive = isInsideSubtree && !isActive;
     const [manualOverride, setManualOverride] = useState(null);
-    const isExpanded = manualOverride ?? isInsideSubtree;
+    // A heading is never collapsed and carries no chevron: its children ARE
+    // the tree it stands for.
+    const isExpanded = heading ? true : (manualOverride ?? isInsideSubtree);
     const hasChildren = Boolean(item.children && item.children.length > 0);
     const isDisabled = item.disabled === true;
     const hasActions = Boolean(!isDisabled && item.actions && item.actions.length > 0);
+    const rowInTree = inTree && !heading;
+    const bodyClass = rowInTree
+        ? getNavDepthOffsets(0).body
+        : heading || !underHeader
+            ? NAV_FLAT_BODY_CLASS
+            : getNavDepthOffsets(0).body;
+    const headingClass = heading && !isDisabled && "font-semibold text-sidebar-foreground";
     const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
     const rendersRow = Boolean(hasChildren || hasActions);
     const activeRowRef = useActiveNavRowScroll(isActive && rendersRow);
@@ -635,7 +654,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, 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: () => {
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: hasChildren && !heading, childrenUnloaded: item.childrenUnloaded, inTree: rowInTree, isExpanded: isExpanded, onToggle: hasChildren && !heading ? () => setManualOverride(!isExpanded) : undefined, label: item.label, isActive: (selected || ancestor) && !isDisabled, depth: 0 }), _jsxs("button", { type: "button", onClick: () => {
                         if (isDisabled)
                             return;
                         setNavContext({
@@ -650,36 +669,36 @@ function CollapsibleNavItem({ item, inTree = true }) {
                         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", inTree ? getNavDepthOffsets(0).body : NAV_FLAT_BODY_CLASS, "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-1.5 text-sm text-left", bodyClass, "pr-3 transition-[padding] duration-150", hasActions && NAV_ROW_ACTIONS_CLEARANCE, isDisabled
                         ? "text-sidebar-foreground/45 cursor-default"
                         : selected
                             ? ACTIVE_NAV_TEXT_CLASS
                             : ancestor
                                 ? "text-sidebar-foreground font-medium"
-                                : "text-sidebar-foreground/85"), disabled: isDisabled, children: [_jsx(item.icon, { className: cn("size-4 shrink-0", selected && !isDisabled
+                                : "text-sidebar-foreground/85", headingClass), disabled: isDisabled, children: [_jsx(item.icon, { className: cn("size-4 shrink-0", selected && !isDisabled
                                 ? ACTIVE_NAV_ICON_CLASS
                                 : ancestor
                                     ? "text-sidebar-foreground/80"
                                     : "text-sidebar-icon") }), _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 })] }))] }));
+        return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), children: [inner(isActive, isAncestorActive), hasChildren && isExpanded && (_jsxs(_Fragment, { children: [_jsx(SubNavItems, { items: item.children, parentPath: item.to, depth: heading ? 0 : 1 }), 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, 
+        return (_jsxs("div", { "data-nav-depth": 0, className: cn("relative flex items-center gap-2 w-full opacity-40", bodyClass, 
             // 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, 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 })] }));
+            "rounded-lg border border-transparent pr-3 py-1.5 text-left text-sm text-sidebar-foreground/45"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, inTree: rowInTree, 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, 
+    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", bodyClass, 
         // The transparent border is NOT decoration: it is what makes this
         // row's box model match every other variant. An absolutely
         // positioned twisty resolves against the PADDING box, so a row
         // without the border puts its disclosure cell 1px left of its
         // siblings' and the column goes ragged.
-        "rounded-xl border border-transparent pr-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS), isDragOver &&
+        "rounded-xl border border-transparent pr-3 py-1.5 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", headingClass, 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, 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-icon") }), _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
+            "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: rowInTree, label: item.label, isActive: isActive, depth: 0 }), _jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _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" }))] })) }));
 }
@@ -847,7 +866,26 @@ function NavGroupSection({ group }) {
     // 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.
-    const isCollapsible = !group.hideLabel && Boolean(group.collapsible);
+    // Focus — see ``NavGroup.focusOn``: the group draws one item as a heading
+    // under a header that leads back. Needs a visible label to lead back
+    // from and a ``to`` to lead back to; otherwise it draws as usual.
+    const focusedItem = group.focusOn !== undefined && !group.hideLabel && group.to
+        ? group.items.find((item) => item.to === group.focusOn)
+        : undefined;
+    const focused = focusedItem !== undefined;
+    // The new shape fades in over the old one's place: keyed on the focus,
+    // and only after a CHANGE in either direction — not on first paint
+    // (user's test: the hard swap felt abrupt). The previous key is read
+    // during render and written after it, so a focus that returns to its
+    // initial value still counts as a change.
+    const focusKey = focused ? focusedItem.to : "";
+    const previousFocusKey = useRef(focusKey);
+    const animateRows = previousFocusKey.current !== focusKey;
+    useEffect(() => {
+        previousFocusKey.current = focusKey;
+    });
+    // Focus takes precedence over collapsing: a focused header is the way back.
+    const isCollapsible = !group.hideLabel && Boolean(group.collapsible) && !focused;
     const persistedCollapsed = useGroupCollapsed(group.label, group.defaultCollapsed);
     const collapsed = isCollapsible && persistedCollapsed;
     // Bubble: show the first child statusDot on the collapsed header so
@@ -877,7 +915,7 @@ function NavGroupSection({ group }) {
                 // to hit a tiny target. The clickable invisible padding
                 // OVERLAPS the gap rather than pushing the label right
                 // (negative-margin + extra padding cancel out).
-                _jsxs("div", { className: cn("group/header flex items-center justify-between rounded-lg transition-colors hover:bg-sidebar-accent/70", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("button", { type: "button", "data-nav-group-toggle": true, onClick: () => toggleGroupCollapsed(group.label, persistedCollapsed), "aria-expanded": !collapsed, "aria-label": collapsed ? `Expand ${group.label}` : `Collapse ${group.label}`, 
+                _jsxs("div", { "data-nav-group-header": true, className: cn("group/header flex items-center justify-between transition-colors hover:bg-sidebar-accent/70", SIDEBAR_GROUP_HEADER_BOX, SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("button", { type: "button", "data-nav-group-toggle": true, onClick: () => toggleGroupCollapsed(group.label, persistedCollapsed), "aria-expanded": !collapsed, "aria-label": collapsed ? `Expand ${group.label}` : `Collapse ${group.label}`, 
                             // Visual cell width = ``SIDEBAR_ITEM_ICON_CLASS`` (14px)
                             // so the chevron sits in the same column as item icons
                             // and the group label aligns with item labels. The
@@ -888,20 +926,25 @@ function NavGroupSection({ group }) {
                             // visual feedback even on near-misses.
                             className: cn("inline-flex items-center justify-center rounded text-sidebar-foreground/50 hover:text-sidebar-foreground", SIDEBAR_ITEM_ICON_CLASS), children: collapsed ? (_jsx(ChevronRight, { className: "size-3.5 transition-transform" })) : (_jsx(ChevronDown, { className: "size-3.5 transition-transform" })) }), group.to ? (_jsx(NavLink, { to: group.to, end: true, className: "flex min-w-0 flex-1 items-center gap-1.5 py-1.5", children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("truncate", SIDEBAR_GROUP_HEADER_LABEL_CLASS, isActive
                                             ? "text-sidebar-selected-foreground"
-                                            : "text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground"), children: group.label }), _jsx(NavStatusDot, { statusDot: bubbledStatusDot })] })) })) : (_jsxs("button", { type: "button", onClick: () => toggleGroupCollapsed(group.label, persistedCollapsed), className: "flex min-w-0 flex-1 items-center gap-1.5 py-1.5 text-left", children: [_jsx("span", { className: cn("truncate text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground", SIDEBAR_GROUP_HEADER_LABEL_CLASS), children: group.label }), _jsx(NavStatusDot, { statusDot: bubbledStatusDot })] })), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : group.to ? (
+                                            : "text-sidebar-foreground/75 group-hover/header:text-sidebar-foreground"), children: group.label }), _jsx(NavStatusDot, { statusDot: bubbledStatusDot })] })) })) : (_jsxs("button", { type: "button", onClick: () => toggleGroupCollapsed(group.label, persistedCollapsed), className: "flex min-w-0 flex-1 items-center gap-1.5 py-1.5 text-left", children: [_jsx("span", { className: cn("truncate text-sidebar-foreground/75 group-hover/header:text-sidebar-foreground", SIDEBAR_GROUP_HEADER_LABEL_CLASS), children: group.label }), _jsx(NavStatusDot, { statusDot: bubbledStatusDot })] })), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : focused ? (
+                // The focused header is the way back: the collapse chevron's
+                // cell holds a back chevron, the label links to the group's
+                // page, and the metrics are the collapsible header's — so the
+                // header stays put, in the same type, when the group focuses.
+                _jsxs("div", { "data-nav-group-header": true, className: cn("flex items-center justify-between py-1.5 transition-colors hover:bg-sidebar-accent/70", SIDEBAR_GROUP_HEADER_BOX, SIDEBAR_ITEM_GAP_CLASS), children: [_jsxs(NavLink, { to: group.to, end: true, "data-nav-group-back": true, title: group.description, className: cn("flex min-w-0 flex-1 items-center", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("span", { "aria-hidden": "true", className: cn(SIDEBAR_ITEM_ICON_CLASS, "flex items-center justify-center"), children: _jsx(ChevronLeft, { className: "size-3.5 text-sidebar-foreground/75" }) }), _jsx("span", { className: cn("truncate", SIDEBAR_GROUP_HEADER_LABEL_CLASS, "text-sidebar-foreground/75 hover:text-sidebar-foreground"), children: group.label })] }), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : group.to ? (
                 // Non-collapsible header: no chevron, but we still emit an
                 // invisible spacer of ``SIDEBAR_ITEM_ICON_CLASS`` width + the
                 // shared gap so the group label lands in the same column as
                 // collapsible headers and item labels.
-                _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
+                _jsxs("div", { "data-nav-group-header": true, className: cn("flex items-center justify-between py-1.5 transition-colors hover:bg-sidebar-accent/70", SIDEBAR_GROUP_HEADER_BOX, 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, 
+                                    : "text-sidebar-foreground/75 hover:text-sidebar-foreground"), children: group.label })) }), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : (_jsxs("div", { "data-nav-group-header": true, className: cn("flex items-center", SIDEBAR_GROUP_HEADER_BOX, SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("span", { "aria-hidden": "true", className: SIDEBAR_ITEM_ICON_CLASS }), _jsx("span", { className: cn("text-sidebar-foreground/75", SIDEBAR_GROUP_HEADER_LABEL_CLASS), children: group.label })] })) })), !collapsed && (_jsx("div", { className: cn(animateRows &&
+                    "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200"), children: (focused ? [focusedItem] : 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)))] }));
+                    inTree: groupHasBranches, heading: focused, underHeader: !group.hideLabel }, item.to + item.label))) }, focusKey))] }));
 }
 /**
  * The "+" dropdown shown next to a group label when the group declares
@@ -912,7 +955,7 @@ function NavGroupSection({ group }) {
  * doesn't also toggle the surrounding collapsible-header button.
  */
 function CreateActionsMenu({ group }) {
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (e) => e.stopPropagation(), className: "inline-flex size-6 items-center justify-center text-sidebar-foreground/65 transition-colors hover:text-sidebar-foreground", "aria-label": `Create in ${group.label}`, children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-48", children: (group.createActions ?? []).map((action) => (_jsx(DropdownMenuItem, { onSelect: (e) => {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (e) => e.stopPropagation(), className: "inline-flex size-6 items-center justify-center text-sidebar-foreground/75 transition-colors hover:text-sidebar-foreground", "aria-label": `Create in ${group.label}`, children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-48", children: (group.createActions ?? []).map((action) => (_jsx(DropdownMenuItem, { onSelect: (e) => {
                         e.preventDefault();
                         action.handler();
                     }, children: action.label }, action.id))) })] }));

package/dist/components/tool-call-card.d.ts

@@ -10,7 +10,7 @@ export type ToolCallStatus = {
     type: "requires-action";
     reason?: string;
 };
-interface ToolCallCardProps {
+export interface ToolCallCardProps {
     icon?: ReactNode;
     title: string;
     description?: string;
@@ -22,6 +22,17 @@ interface ToolCallCardProps {
     };
     children?: ReactNode;
     className?: string;
+    /** Start expanded. Ignored when `open` is supplied. */
+    defaultOpen?: boolean;
+    /**
+     * Controlled expansion.
+     *
+     * A card whose body is expensive to mount — a live force simulation, a media
+     * player — needs to know whether it is expanded so it can defer that cost,
+     * and needs to react when the user opens it. Left undefined, the card manages
+     * its own state exactly as before.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
-export declare function ToolCallCard({ icon, title, description, status, action, children, className, }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ToolCallCard({ icon, title, description, status, action, children, className, defaultOpen, open, onOpenChange, }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tool-call-card.js

@@ -3,8 +3,15 @@ import { Loader2, CheckCircle2, XCircle, AlertCircle, ChevronDown } from "lucide
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useState } from "react";
-export function ToolCallCard({ icon, title, description, status, action, children, className, }) {
-    const [isOpen, setIsOpen] = useState(false);
+export function ToolCallCard({ icon, title, description, status, action, children, className, defaultOpen = false, open, onOpenChange, }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const setIsOpen = (next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
     const isSuccess = status.type === "complete";
     const isError = status.type === "incomplete" && status.reason === "error";
     const isRunning = status.type === "running";

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { ChatHeader } from "./components/chat-header.js";
 export { ComposerAttachment, UserMessageAttachment, userAttachmentComponents, composerAttachmentComponents, } from "./components/chat-attachments.js";
 export { ShowDocumentToolUI } from "./components/show-document-tool-ui.js";
 export { ToolCallCard } from "./components/tool-call-card.js";
-export type { ToolCallStatus } from "./components/tool-call-card.js";
+export type { ToolCallStatus, ToolCallCardProps } from "./components/tool-call-card.js";
 export { ToolFallback } from "./components/tool-fallback.js";
 export { ConfirmationCard } from "./components/confirmation-card.js";
 export { TooltipIconButton } from "./components/tooltip-icon-button.js";

package/dist/lib/app-store.js

@@ -50,6 +50,94 @@ function compactReferenceTarget(target) {
         proposedValue: compactContextValue(target.proposedValue),
     };
 }
+/**
+ * Structural comparison that survives what a `payload` actually carries.
+ *
+ * Compared by WALKING the two values, not by serialising them. A payload is
+ * often a database row, and a `bigint` is ordinary there — the Neo4j driver
+ * returns them natively — which rules out `JSON.stringify` twice over. It
+ * throws on a bigint outright, and the obvious repair (a replacer that tags
+ * one) cannot be made correct: `10n` as `"10"` collides with the string
+ * `"10"`, as `"10n"` with the string `"10n"`, as `{__bigint:"10"}` with a
+ * payload field that happens to be that object. `payload` is arbitrary, so
+ * every encoding can be imitated by data shaped like the encoding, and a
+ * collision here makes a real change read as "unchanged" — leaving stale
+ * context attached to every later message.
+ *
+ * Comparing types directly has nothing to imitate: `typeof 10n` is not
+ * `typeof "10"`. It is also key-order independent (which the serialising
+ * version never actually was, despite its name) and cheaper, since it stops at
+ * the first difference instead of building two strings.
+ *
+ * Cycles are tracked as PAIRS. A single visited-set marks an object on first
+ * sight, so the second appearance of a shared but acyclic sub-object reads as
+ * a cycle — and two values differing only there would compare equal.
+ */
+function isDate(value) {
+    return Object.prototype.toString.call(value) === "[object Date]";
+}
+/** Own enumerable keys describe this object completely. */
+function isPlainObject(value) {
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+function deepEqual(a, b, seen) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a !== typeof b)
+        return false;
+    if (typeof a !== "object" || a === null || b === null)
+        return false;
+    const left = a;
+    const right = b;
+    const pairs = seen ?? new Map();
+    const already = pairs.get(left);
+    // Assumed equal while in flight: two structures that recurse identically are
+    // equal, and re-entering would not terminate.
+    if (already?.has(right))
+        return true;
+    if (already)
+        already.add(right);
+    else
+        pairs.set(left, new Set([right]));
+    if (Array.isArray(left) || Array.isArray(right)) {
+        if (!Array.isArray(left) || !Array.isArray(right))
+            return false;
+        if (left.length !== right.length)
+            return false;
+        return left.every((item, index) => deepEqual(item, right[index], pairs));
+    }
+    // Enumerable keys only describe a PLAIN object. A `Date`, `Map`, `Set` or
+    // `RegExp` keeps its state internally and has none, so comparing key sets
+    // said two different dates were the same value — and this guard's entire job
+    // is deciding whether something changed. `Date` is worth spelling out
+    // because it is what a host or an adapter actually puts in a property; every
+    // other exotic object falls through to "not equal unless identical", which
+    // is the safe direction: a spurious change costs one redundant update, a
+    // missed one loses the user's data silently.
+    if (isDate(left) || isDate(right)) {
+        return isDate(left) && isDate(right) && Object.is(left.getTime(), right.getTime());
+    }
+    if (!isPlainObject(left) || !isPlainObject(right))
+        return false;
+    const leftKeys = Object.keys(left);
+    const rightKeys = new Set(Object.keys(right));
+    if (leftKeys.length !== rightKeys.size)
+        return false;
+    return leftKeys.every((key) => rightKeys.has(key) &&
+        deepEqual(left[key], right[key], pairs));
+}
+/**
+ * Do two keyed context items carry the same value?
+ *
+ * Compares everything the consumer sees, ignoring the identity fields the
+ * store owns (`id`, `createdAt`). `payload` is arbitrary — a selected row, a
+ * graph node and its properties — so it is compared structurally.
+ */
+function sameContextValue(current, next) {
+    const { id: _id, createdAt: _createdAt, ...rest } = current;
+    return deepEqual(rest, next);
+}
 export const useAppStore = create((set, get) => ({
     // Thread state
     threadActive: false,
@@ -135,11 +223,18 @@ export const useAppStore = create((set, get) => ({
         const label = item.label.length > MAX_LABEL_LENGTH
             ? `${item.label.slice(0, MAX_LABEL_LENGTH)}...`
             : item.label;
+        // Setting the same value twice is not a change. Without this the method
+        // mints a fresh `id` and a fresh array every call, so a UI that mirrors a
+        // selection into context — re-asserting the same item as it re-renders —
+        // churns the store, re-renders every subscriber, and can drive itself
+        // into an update loop. The null branch above already declines to write
+        // when nothing changes; this is the same rule for the write path.
+        const current = get().contextItems.find((existing) => existing.key === key);
+        const next = { ...item, key, label };
+        if (current && sameContextValue(current, next))
+            return;
         set({
-            contextItems: [
-                ...withoutKey,
-                { ...item, key, label, id: crypto.randomUUID(), createdAt: Date.now() },
-            ],
+            contextItems: [...withoutKey, { ...next, id: crypto.randomUUID(), createdAt: Date.now() }],
         });
     },
     removeContextItem: (id) => set({ contextItems: get().contextItems.filter((i) => i.id !== id) }),

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

@@ -138,6 +138,25 @@ export interface NavGroup {
     to?: string;
     /** Hide the group header while preserving group semantics. */
     hideLabel?: boolean;
+    /**
+     * The ``to`` of the item this group is focused on, if any.
+     *
+     * A focused group draws that item alone: the header keeps its label,
+     * typography and height and leads back to ``to`` (a back chevron in the
+     * collapse chevron's column, the label as the link); the item is drawn
+     * as a flat, emphasised heading with its children beneath it — one
+     * indent step left of a branch's children, at their usual row size —
+     * and its siblings are not drawn. Nothing above the item moves and no
+     * row resizes when the group focuses or unfocuses.
+     *
+     * Focus takes precedence over ``collapsible``. It needs a visible label
+     * and a ``to`` to lead back to; without either, or when no item carries
+     * that ``to``, the group draws as usual. Only the group's own items can
+     * be focused, not their descendants. The value is the caller's: the
+     * back link navigates to ``to`` and nothing more, so the caller derives
+     * ``focusOn`` from the route (or its own state) and clears it there.
+     */
+    focusOn?: string;
     /** Group description sent to the agent */
     description?: string;
     /** Group-level metadata (e.g., org settings, workspace config, custom instructions) */

package/dist/lib/tool-panel-store.d.ts

@@ -12,16 +12,34 @@ export interface PdfHighlightRef {
 export interface ToolPanelContent {
     title: string;
     content: string;
-    type: "markdown" | "text" | "page" | "pdf";
+    type: "markdown" | "text" | "page" | "pdf" | "graph";
     /** PDF highlights for citation overlays (only when type === "pdf") */
     pdfHighlights?: PdfHighlightRef[];
     /** Initial page to scroll to (only when type === "pdf") */
     initialPage?: number;
     /** SPACES entity ID — enables pin and navigate actions in panel header */
     entityId?: string;
+    /**
+     * Structured payload for renderers that need more than a string — a graph,
+     * a chart, a table. `content` is still expected to carry a serialization, so
+     * the header's Copy action and the built-in text fallback keep working when
+     * no renderer matches.
+     */
+    data?: unknown;
 }
 /** Pluggable content renderer for the tool panel — registered by feature modules. */
 export interface PanelRendererEntry {
+    /**
+     * Stable identity. When present, re-registering replaces the previous entry
+     * with the same id instead of appending a second copy.
+     *
+     * Registration usually happens in a module's `useInit`, which runs again on
+     * every remount — a StrictMode double-render, a route change, a hot reload.
+     * Without an id those calls stack up, `renderers` grows without bound, and
+     * `find()` keeps matching the oldest (now stale) closure. Entries without an
+     * id keep the original append behaviour.
+     */
+    id?: string;
     /** Check if this renderer handles the given content */
     match: (content: ToolPanelContent) => boolean;
     /** Lazy component to render. Receives content as prop. */

package/dist/lib/tool-panel-store.js

@@ -55,7 +55,18 @@ export const useToolPanelStore = create((set, get) => ({
     isFullscreen: false,
     renderers: [],
     openPanel: (content) => set({ isOpen: true, content }),
-    registerRenderer: (entry) => set((state) => ({ renderers: [...state.renderers, entry] })),
+    registerRenderer: (entry) => set((state) => {
+        if (entry.id === undefined)
+            return { renderers: [...state.renderers, entry] };
+        const index = state.renderers.findIndex((existing) => existing.id === entry.id);
+        if (index === -1)
+            return { renderers: [...state.renderers, entry] };
+        // Replace in place: registration order decides which renderer wins a
+        // match, so re-registering must not silently reprioritise it.
+        const renderers = [...state.renderers];
+        renderers[index] = entry;
+        return { renderers };
+    }),
     closePanel: () => set({ isOpen: false, isFullscreen: false }),
     setContent: (content) => set({ content }),
     setPanelWidth: (width) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.24.0",
+  "version": "0.26.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": [
@@ -76,8 +76,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.24.0",
-    "@iloveagents/foundry-web-primitives": "^0.24.0"
+    "@iloveagents/foundry-agent": "^0.26.0",
+    "@iloveagents/foundry-web-primitives": "^0.26.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",