@iloveagents/foundry-web-ui 0.26.0 → 0.27.0

package/dist/components/message-timestamp.js

@@ -9,10 +9,11 @@ import { cn } from "@iloveagents/foundry-web-primitives";
  */
 export const MessageTimestamp = ({ className }) => {
     const createdAt = useAuiState((s) => s.message.createdAt);
-    if (!createdAt)
+    const running = useAuiState((s) => s.thread.isRunning);
+    if (!createdAt || running)
         return null;
     const d = createdAt instanceof Date ? createdAt : new Date(createdAt);
     if (Number.isNaN(d.getTime()))
         return null;
-    return (_jsx("span", { title: d.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }), className: cn("text-xs text-muted-foreground/70 tabular-nums select-none", "opacity-0 transition-opacity group-hover:opacity-100", className), children: d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) }));
+    return (_jsx("span", { title: d.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }), className: cn("text-xs text-muted-foreground/70 tabular-nums select-none", "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", className), children: d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) }));
 };

package/dist/components/pin-state-icon.d.ts

@@ -0,0 +1,5 @@
+/** State glyph; controls retain explicit Pin/Unpin action labels. */
+export declare function PinStateIcon({ pinned, className }: {
+    pinned: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/pin-state-icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pin } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+/** State glyph; controls retain explicit Pin/Unpin action labels. */
+export function PinStateIcon({ pinned, className }) {
+    return (_jsx(Pin, { "aria-hidden": "true", className: cn("size-4", pinned ? "text-primary fill-primary/25" : "text-muted-foreground", className) }));
+}

package/dist/components/pin-toggle.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+/** Pin state uses one upright glyph everywhere; the label describes the action. */
+export declare function PinToggle({ pinned, label, className, ...props }: Omit<ComponentProps<typeof Button>, "children"> & {
+    pinned: boolean;
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/pin-toggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PinStateIcon } from "./pin-state-icon.js";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+/** Pin state uses one upright glyph everywhere; the label describes the action. */
+export function PinToggle({ pinned, label, className, ...props }) {
+    const action = `${pinned ? "Unpin" : "Pin"} ${label}`;
+    return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": action, "aria-pressed": pinned, title: action, ...props, className: cn("shrink-0 shadow-none", pinned
+            ? "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"
+            : "text-muted-foreground", className), children: _jsx(PinStateIcon, { pinned: pinned }) }));
+}

package/dist/components/sidebar.d.ts

@@ -1,4 +1,21 @@
+import { type ReactNode } from "react";
+import type { NavGroup } from "../lib/nav-config.js";
 declare function scrollNavRowIntoView(nav: HTMLElement, row: HTMLElement): void;
 export declare const _scrollNavRowIntoViewForTest: typeof scrollNavRowIntoView;
-export declare function Sidebar(): import("react/jsx-runtime").JSX.Element;
+interface SidebarViewProps {
+    /** Display-only navigation override; the navigation registry remains intact. */
+    groups?: NavGroup[];
+    onNewConversation?: () => void;
+    hideFooterActions?: boolean;
+    hideNewConversation?: boolean;
+    /** Compact rail shows group entry points instead of every child item. */
+    collapsedGroupsOnly?: boolean;
+    /** Place the primary action beneath a scope heading instead of above navigation. */
+    newConversationAfterGroup?: string;
+    newConversationLabel?: string;
+}
+export declare function Sidebar({ footer, collapsedFooter, ...view }?: SidebarViewProps & {
+    footer?: ReactNode;
+    collapsedFooter?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/sidebar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, 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, ChevronLeft, } from "lucide-react";
+import { Ellipsis, Layers, 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 { useSidebarStore, RAIL_WIDTH, SIDEBAR_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";
@@ -405,11 +405,11 @@ function ContainerDropZone({ dnd }) {
                 return;
             }
             await dnd.onDrop(draggedData);
-        }, className: cn("mx-2 rounded-md transition-all overflow-hidden", isDragOver
+        }, className: cn("relative mx-2 rounded-md overflow-hidden", isDragOver
             ? cn("h-7 flex items-center justify-center gap-1", isFileDragOver
                 ? "bg-primary/10 border border-dashed border-primary"
                 : "bg-primary/10 border border-dashed border-primary/30")
-            : "h-1"), children: isDragOver && (_jsxs(_Fragment, { children: [isFileDragOver && _jsx(Upload, { className: "size-3 text-primary" }), _jsx("span", { className: "text-[10px] text-primary/70", children: getContainerDropZoneLabel(isFileDragOver) })] })) }));
+            : "-mt-1 h-1"), children: isDragOver && (_jsxs(_Fragment, { children: [isFileDragOver && _jsx(Upload, { className: "size-3 text-primary" }), _jsx("span", { className: "text-[10px] text-primary/70", children: getContainerDropZoneLabel(isFileDragOver) })] })) }));
 }
 /**
  * Leading disclosure cell on every nav row — the Confluence page-tree
@@ -437,7 +437,7 @@ function ContainerDropZone({ dnd }) {
 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 && !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, "aria-hidden": "true", className: cn(cell, "pointer-events-none"), children: inTree && !childrenUnloaded && (_jsx("span", { "data-nav-leaf-dot": true, className: cn("block size-1 shrink-0 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();
@@ -478,7 +478,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
     const activeButtonRef = useActiveNavRowScroll(isActive && !hasActions);
     // Items with actions use the group layout (button + action controls)
     if (hasActions) {
-        return (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
+        return (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, style: { "--nav-depth": depth }, ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
                 ? "opacity-40"
                 : isActive
                     ? ACTIVE_NAV_ROW_CLASS
@@ -495,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 text-sm text-left", bodyPl, isDisabled
+    return (_jsxs("button", { ref: activeButtonRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, style: { "--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 &&
@@ -515,7 +515,7 @@ function SubNavItems({ items, parentPath, depth = 1, }) {
     // children sharing the parent path (e.g., Documents sub-filters) use label matching.
     const allShareParent = items.every((c) => c.to === parentPath);
     return (_jsx("div", { children: items.map((child) => {
-            const hasNestedChildren = child.children && child.children.length > 0;
+            const hasNestedChildren = !child.childrenHidden && child.children && child.children.length > 0;
             // Folders with children render as collapsible nested items
             if (hasNestedChildren) {
                 return _jsx(NestedFolderItem, { item: child, depth: depth }, child.to + child.label);
@@ -525,7 +525,7 @@ function SubNavItems({ items, parentPath, depth = 1, }) {
             // parent path (e.g., folders) are never highlighted on the parent page.
             const isActive = allShareParent
                 ? isOnParent && activeLabel === child.label
-                : child.to !== parentPath && currentPath === child.to;
+                : child.to !== parentPath && isSelectedNavItem(currentPath, child);
             return (_jsx(NavLeafItem, { item: child, isActive: isActive, depth: depth, onClick: () => {
                     setActiveLabel(child.label);
                     setNavContext({
@@ -547,6 +547,11 @@ function isInSubtree(currentPage, item) {
         return true;
     return item.children?.some((c) => isInSubtree(currentPage, c)) ?? false;
 }
+/** A list owns the sidebar selection of descendants it deliberately does not draw.
+ * The route lookup still resolves the actual descendant for chat and page actions. */
+function isSelectedNavItem(currentPage, item) {
+    return currentPage === item.to || Boolean(item.childrenHidden && isInSubtree(currentPage, item));
+}
 /** Nested folder with collapsible children (used inside SubNavItems). */
 function NestedFolderItem({ item, depth }) {
     const navigate = useNavigate();
@@ -554,16 +559,15 @@ function NestedFolderItem({ item, depth }) {
     const setNavContext = useAppStore((s) => s.setNavContext);
     const navContext = useAppStore((s) => s.navContext);
     const isInsideSubtree = isInSubtree(currentPath, item);
-    const isActive = currentPath === item.to;
+    const isActive = isSelectedNavItem(currentPath, item);
     const isAncestorActive = isInsideSubtree && !isActive;
-    const [manualOverride, setManualOverride] = useState(null);
-    const isExpanded = manualOverride ?? isInsideSubtree;
+    const [isExpanded, setExpanded] = useTreeExpanded(item.to, isInsideSubtree);
     const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
     const bodyPl = getNavDepthOffsets(depth).body;
     const isDisabled = item.disabled === true;
     const hasActions = Boolean(!isDisabled && item.actions && item.actions.length > 0);
     const activeRowRef = useActiveNavRowScroll(isActive);
-    return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), children: [_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full", "rounded-xl border border-transparent transition-colors", isDisabled
+    return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), children: [_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": depth, style: { "--nav-depth": depth }, ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full", "rounded-xl border border-transparent transition-colors", isDisabled
                     ? "opacity-40"
                     : isActive
                         ? ACTIVE_NAV_ROW_CLASS
@@ -572,10 +576,10 @@ function NestedFolderItem({ item, depth }) {
                     !isDisabled &&
                     "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
                     !isDisabled &&
-                    "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: true, isExpanded: isExpanded, onToggle: () => setManualOverride(!isExpanded), label: item.label, isActive: (isActive || isAncestorActive) && !isDisabled, depth: depth }), _jsxs("button", { type: "button", disabled: isDisabled, onClick: () => {
+                    "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: true, isExpanded: isExpanded, onToggle: () => setExpanded(!isExpanded), label: item.label, isActive: (isActive || isAncestorActive) && !isDisabled, depth: depth }), _jsxs("button", { type: "button", disabled: isDisabled, onClick: () => {
                             if (isDisabled)
                                 return;
-                            setManualOverride(true);
+                            setExpanded(true);
                             setNavContext({
                                 ...navContext,
                                 label: item.label,
@@ -599,11 +603,11 @@ function NestedFolderItem({ item, depth }) {
                                         : "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 && !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;
+                        const hasNestedChildren = !child.childrenHidden && child.children && child.children.length > 0;
                         if (hasNestedChildren) {
                             return (_jsx(NestedFolderItem, { item: child, depth: depth + 1 }, child.to + child.label));
                         }
-                        const isChildActive = currentPath === child.to;
+                        const isChildActive = isSelectedNavItem(currentPath, child);
                         return (_jsx(NavLeafItem, { item: child, isActive: isChildActive, depth: depth + 1, onClick: () => {
                                 setNavContext({
                                     ...navContext,
@@ -624,13 +628,13 @@ function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader
     const setNavContext = useAppStore((s) => s.setNavContext);
     const navContext = useAppStore((s) => s.navContext);
     const isInsideSubtree = isInSubtree(currentPath, item);
-    const isActive = currentPath === item.to;
+    const isActive = isSelectedNavItem(currentPath, item);
     const isAncestorActive = isInsideSubtree && !isActive;
-    const [manualOverride, setManualOverride] = useState(null);
+    const [treeExpanded, setExpanded] = useTreeExpanded(item.to, 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 isExpanded = heading ? true : treeExpanded;
+    const hasChildren = Boolean(!item.childrenHidden && 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;
@@ -654,7 +658,7 @@ function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader
                 !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 && !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: () => {
+                "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 ? () => setExpanded(!isExpanded) : undefined, label: item.label, isActive: (selected || ancestor) && !isDisabled, depth: 0 }), _jsxs("button", { type: "button", onClick: () => {
                         if (isDisabled)
                             return;
                         setNavContext({
@@ -667,7 +671,7 @@ function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader
                                 .join("\n") || null,
                         });
                         if (hasChildren)
-                            setManualOverride(true);
+                            setExpanded(true);
                         navigate(item.to);
                     }, 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"
@@ -689,7 +693,7 @@ function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader
             // Transparent border for box-model parity — see the NavLink variant.
             "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", bodyClass, 
+    return (_jsx(NavLink, { ref: activeLinkRef, "data-active-nav-row": isActive ? "true" : undefined, "data-nav-depth": 0, to: item.to, ...draggableProps, ...dropTargetProps, className: () => 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
@@ -698,7 +702,7 @@ function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader
         "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: 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
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: () => (_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" }))] })) }));
 }
@@ -729,7 +733,7 @@ function SidebarResizeHandle() {
             window.removeEventListener("pointercancel", onPointerUp);
         };
     }, [setWidth]);
-    return (_jsx("div", { className: "absolute inset-y-0 right-0 z-20 hidden w-3 cursor-col-resize md:block", onPointerDown: (event) => {
+    return (_jsx("div", { "data-panel-resize": true, title: "Drag to resize navigation. Double-click to reset.", onDoubleClick: () => setWidth(SIDEBAR_WIDTH), className: "absolute inset-y-0 right-0 z-20 hidden w-3 cursor-col-resize md:block", onPointerDown: (event) => {
             event.preventDefault();
             dragState.current = {
                 startX: event.clientX,
@@ -741,11 +745,11 @@ function SidebarResizeHandle() {
         }, onKeyDown: (event) => {
             if (event.key === "ArrowLeft") {
                 event.preventDefault();
-                setWidth(width - 16);
+                setWidth(width - (event.shiftKey ? 40 : 16));
             }
             if (event.key === "ArrowRight") {
                 event.preventDefault();
-                setWidth(width + 16);
+                setWidth(width + (event.shiftKey ? 40 : 16));
             }
             if (event.key === "Home") {
                 event.preventDefault();
@@ -827,6 +831,17 @@ function useGroupCollapsed(label, defaultCollapsed) {
     // entry. ``map`` is parsed JSON so its prototype is ``Object``'s.
     return Object.prototype.hasOwnProperty.call(map, label) ? map[label] : Boolean(defaultCollapsed);
 }
+/** Keep opened branches stable while routes and asynchronously loaded children change. */
+function useTreeExpanded(to, inside) {
+    const key = `tree:${to}`;
+    const collapsed = useGroupCollapsed(key, !inside);
+    useEffect(() => {
+        if (inside && !Object.prototype.hasOwnProperty.call(readCollapseMap(), key)) {
+            writeCollapseMap({ ...readCollapseMap(), [key]: false });
+        }
+    }, [inside, key]);
+    return [!collapsed, (expanded) => writeCollapseMap({ ...readCollapseMap(), [key]: !expanded })];
+}
 function toggleGroupCollapsed(label, current) {
     writeCollapseMap({ ...readCollapseMap(), [label]: !current });
 }
@@ -862,7 +877,7 @@ function NavGroupSection({ group }) {
     // that does not exist and reads as a bullet. The disclosure cell still
     // renders either way, so flat rows keep the same label column as tree
     // rows and the sidebar stays on one grid.
-    const groupHasBranches = group.items.some((item) => Boolean(item.children && item.children.length > 0));
+    const groupHasBranches = group.items.some((item) => Boolean(!item.childrenHidden && item.children && item.children.length > 0));
     // hideLabel + collapsible are mutually exclusive — a hidden label
     // can't host a chevron. The collapsible flag is the opt-in; legacy
     // groups stay uncollapsable so behaviour is unchanged.
@@ -944,7 +959,7 @@ function NavGroupSection({ group }) {
                     // 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, heading: focused, underHeader: !group.hideLabel }, item.to + item.label))) }, focusKey))] }));
+                    inTree: group.tree ?? groupHasBranches, heading: focused, underHeader: !group.hideLabel }, item.to + item.label))) }, focusKey))] }));
 }
 /**
  * The "+" dropdown shown next to a group label when the group declares
@@ -960,9 +975,10 @@ function CreateActionsMenu({ group }) {
                         action.handler();
                     }, children: action.label }, action.id))) })] }));
 }
-function SidebarContent({ collapsed }) {
+function SidebarContent({ collapsed, groups, onNewConversation, hideFooterActions, hideNewConversation, collapsedGroupsOnly, newConversationAfterGroup, newConversationLabel = "New Thread", }) {
     const toggle = useSidebarStore((s) => s.toggle);
-    const handleNewConversation = useNewConversation();
+    const defaultNewConversation = useNewConversation();
+    const handleNewConversation = onNewConversation ?? defaultNewConversation;
     const rawNavConfig = useNavStore((s) => s.config);
     const navLoading = useNavStore((s) => s.navLoading);
     // Sort by `priority` descending so feature hooks can declare slot
@@ -970,15 +986,15 @@ function SidebarContent({ collapsed }) {
     // order in which addGroup() happened to be called. Stable sort: ties
     // preserve insertion order, so groups that don't set a priority keep
     // the legacy append-where-you-arrive behaviour.
-    const navConfig = useMemo(() => [...rawNavConfig]
+    const navConfig = useMemo(() => [...(groups ?? rawNavConfig)]
         .map((g, i) => ({ g, i, p: g.priority ?? 0 }))
         .sort((a, b) => b.p - a.p || a.i - b.i)
-        .map(({ g }) => g), [rawNavConfig]);
+        .map(({ g }) => g), [rawNavConfig, groups]);
     // Show skeleton rows during the cold nav fetch — but only until the
     // integrator's primary dynamic group ("Workspaces") has been published.
     // Once it exists, real rows render even if a later phase (status dots) is
     // still resolving, so the skeleton never flashes over a populated tree.
-    const hasWorkspacesGroup = navConfig.some((group) => group.label === "Workspaces");
+    const hasWorkspacesGroup = navConfig.some((group) => group.label === "Workspaces" || group.meta?.type === "spaces-workspaces");
     const showNavSkeleton = navLoading && !hasWorkspacesGroup;
     const currentPage = useLocation().pathname;
     const navContext = useAppStore((s) => s.navContext);
@@ -989,41 +1005,68 @@ function SidebarContent({ collapsed }) {
         e.preventDefault();
     }, []);
     if (collapsed) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), _jsx(TooltipIconButton, { tooltip: "New Thread", side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-sidebar-icon" }) }), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: navConfig
-                        .map((group, groupIndex) => {
-                        // Modules with a non-flat collapsed rail (e.g. Spaces'
-                        // "header + active workspace") supply `collapsedRail`; the
-                        // shell stays module-agnostic.
-                        const items = group.collapsedRail
-                            ? group
-                                .collapsedRail({
+        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), !hideNewConversation && !collapsedGroupsOnly && (_jsx(TooltipIconButton, { tooltip: newConversationLabel, side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-sidebar-icon" }) })), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: collapsedGroupsOnly
+                        ? navConfig
+                            .filter((group) => !group.meta?.hideInCollapsedRail &&
+                            (group.to || group.items.length > 0) &&
+                            group.collapsedRail?.({ currentPage, navContextMeta: navContext.meta ?? {} })
+                                .length !== 0)
+                            .map((group) => {
+                            const rail = group.collapsedRail?.({
                                 currentPage,
                                 navContextMeta: navContext.meta ?? {},
-                            })
-                                .map((it) => ({
-                                to: it.to,
-                                label: it.label,
-                                icon: it.icon,
-                                isActive: it.isActive,
-                            }))
-                            : group.items.map((it) => ({
-                                to: it.to,
-                                label: it.label,
-                                icon: it.icon,
-                                isActive: currentPage === it.to,
-                            }));
-                        return { group, groupIndex, items };
-                    })
-                        .filter(({ items }) => items.length > 0)
-                        .map(({ group, groupIndex, items }, visibleIndex) => (
-                    // Each non-first VISIBLE group gets a thin top border —
-                    // visually separates groups (e.g. user Workspaces vs
-                    // Admin) in the collapsed rail without changing the
-                    // CollapsedRailItem shape. The wrapper itself is a centred
-                    // column so icons stay aligned with the rail.
-                    _jsx("div", { className: cn("flex flex-col items-center gap-1", visibleIndex > 0 && "mt-2 pt-2 border-t border-sidebar-border/40"), children: items.map(({ to, label, icon, isActive }) => (_jsx(CollapsedNavShortcut, { to: to, label: label, icon: icon, isActive: isActive }, to))) }, `${group.label || ""}-${groupIndex}`))) })] }));
+                            });
+                            const active = currentPage === group.to ||
+                                group.items.some((item) => isInSubtree(currentPage, item)) ||
+                                Boolean(rail?.some((item) => item.isActive));
+                            const Icon = group.icon ??
+                                group.collapsedRail?.({ currentPage, navContextMeta: navContext.meta ?? {} })[0]
+                                    ?.icon ??
+                                group.items[0]?.icon ??
+                                Layers;
+                            return group.to ? (_jsx(CollapsedNavShortcut, { to: group.to, label: group.label, icon: Icon, isActive: active }, group.label)) : (_jsx(TooltipIconButton, { tooltip: group.label, side: "right", "aria-label": `Open ${group.label}`, "aria-current": active ? "page" : undefined, className: active ? ACTIVE_NAV_ROW_CLASS : undefined, onClick: () => {
+                                    toggleGroupCollapsed(group.label, true);
+                                    toggle();
+                                }, children: _jsx(Icon, { className: "size-4" }) }, group.label));
+                        })
+                        : navConfig
+                            .map((group, groupIndex) => {
+                            // Modules with a non-flat collapsed rail (e.g. Spaces'
+                            // "header + active workspace") supply `collapsedRail`; the
+                            // shell stays module-agnostic.
+                            const items = group.collapsedRail
+                                ? group
+                                    .collapsedRail({
+                                    currentPage,
+                                    navContextMeta: navContext.meta ?? {},
+                                })
+                                    .map((it) => ({
+                                    to: it.to,
+                                    label: it.label,
+                                    icon: it.icon,
+                                    isActive: it.isActive,
+                                }))
+                                : group.items.map((it) => ({
+                                    to: it.to,
+                                    label: it.label,
+                                    icon: it.icon,
+                                    isActive: currentPage === it.to,
+                                }));
+                            return { group, groupIndex, items };
+                        })
+                            .filter(({ items }) => items.length > 0)
+                            .map(({ group, groupIndex, items }, visibleIndex) => (
+                        // Each non-first VISIBLE group gets a thin top border —
+                        // visually separates groups (e.g. user Workspaces vs
+                        // Admin) in the collapsed rail without changing the
+                        // CollapsedRailItem shape. The wrapper itself is a centred
+                        // column so icons stay aligned with the rail.
+                        _jsx("div", { className: cn("flex flex-col items-center gap-1", visibleIndex > 0 && "mt-2 pt-2 border-t border-sidebar-border/40"), children: items.map(({ to, label, icon, isActive }) => (_jsx(CollapsedNavShortcut, { to: to, label: label, icon: icon, isActive: isActive }, to))) }, `${group.label || ""}-${groupIndex}`))) })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), _jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-icon" }), "New Thread"] }) }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsx(NavGroupSection, { group: group }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), _jsx(SidebarFooterActions, {})] }));
+    const newConversationAction = (_jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-icon" }), newConversationLabel] }) }));
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { "data-navigation-header": true, className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), !hideNewConversation && !newConversationAfterGroup && newConversationAction, _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsxs(Fragment, { children: [_jsx(NavGroupSection, { group: group }), !hideNewConversation &&
+                                group.label === newConversationAfterGroup &&
+                                newConversationAction] }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), !hideFooterActions && _jsx(SidebarFooterActions, {})] }));
 }
 function SidebarFooterActions() {
     const footerActions = useNavStore((s) => s.footerActions);
@@ -1034,9 +1077,16 @@ function SidebarFooterActions() {
                         : "border-sidebar-foreground/30") }), action.active ? (action.activeLabel ?? action.label) : action.label] }, action.id))) }));
 }
 /** Mobile drawer overlay */
-function MobileDrawer() {
+function MobileDrawer({ footer, ...view }) {
     const isMobileOpen = useSidebarStore((s) => s.isMobileOpen);
     const closeMobile = useSidebarStore((s) => s.closeMobile);
+    const locationKey = useLocation().key;
+    const previousLocationKey = useRef(locationKey);
+    useEffect(() => {
+        if (previousLocationKey.current !== locationKey)
+            closeMobile();
+        previousLocationKey.current = locationKey;
+    }, [locationKey, closeMobile]);
     const isToolPanelOpen = useToolPanelStore((s) => s.isOpen);
     const width = useSidebarStore((s) => s.width);
     const drawerWidth = Math.min(width, typeof window !== "undefined" ? window.innerWidth - 24 : width);
@@ -1052,14 +1102,14 @@ function MobileDrawer() {
         window.addEventListener("keydown", handleEscape);
         return () => window.removeEventListener("keydown", handleEscape);
     }, [isMobileOpen, isToolPanelOpen, closeMobile]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-200", isMobileOpen ? "opacity-100" : "opacity-0 pointer-events-none"), onClick: closeMobile, "aria-hidden": "true" }), _jsx("aside", { "data-sidebar-surface": "mobile", className: cn("fixed top-0 left-0 z-50 h-dvh", "flex flex-col", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground shadow-xl", "transition-transform duration-200 ease-in-out", isMobileOpen ? "translate-x-0" : "-translate-x-full"), style: { width: drawerWidth }, role: "complementary", "aria-label": "Navigation sidebar", children: _jsx(SidebarContent, { collapsed: false }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-200", isMobileOpen ? "opacity-100" : "opacity-0 pointer-events-none"), onClick: closeMobile, "aria-hidden": "true" }), _jsxs("aside", { "data-sidebar-surface": "mobile", className: cn("fixed top-0 left-0 z-50 h-dvh", "flex flex-col", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground shadow-xl", "transition-transform duration-200 ease-in-out", isMobileOpen ? "translate-x-0" : "-translate-x-full"), style: { width: drawerWidth }, role: "complementary", "aria-label": "Navigation sidebar", children: [_jsx(SidebarContent, { collapsed: false, ...view }), footer] })] }));
 }
 /** Desktop inline sidebar (expanded or collapsed rail) */
-function DesktopSidebar() {
+function DesktopSidebar({ footer, collapsedFooter, ...view }) {
     const isOpen = useSidebarStore((s) => s.isOpen);
     const width = useSidebarStore((s) => s.width);
-    return (_jsxs("aside", { "data-sidebar-surface": "desktop", className: cn("group/sidebar relative hidden md:flex flex-col shrink-0", "h-full", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground", "transition-[width] duration-200 ease-in-out", "overflow-hidden"), style: { width: isOpen ? width : RAIL_WIDTH }, role: "complementary", "aria-label": "Navigation sidebar", children: [_jsx(SidebarContent, { collapsed: !isOpen }), isOpen && _jsx(SidebarResizeHandle, {})] }));
+    return (_jsxs("aside", { "data-sidebar-surface": "desktop", "data-sidebar-collapsed": !isOpen || undefined, className: cn("group/sidebar relative hidden md:flex flex-col shrink-0", "h-full", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground", "transition-[width] duration-200 ease-in-out", "overflow-hidden"), style: { width: isOpen ? width : RAIL_WIDTH }, role: "complementary", "aria-label": "Navigation sidebar", children: [_jsx(SidebarContent, { collapsed: !isOpen, ...view }), isOpen ? footer : collapsedFooter, isOpen && _jsx(SidebarResizeHandle, {})] }));
 }
-export function Sidebar() {
-    return (_jsxs(_Fragment, { children: [_jsx(MobileDrawer, {}), _jsx(DesktopSidebar, {})] }));
+export function Sidebar({ footer, collapsedFooter, ...view } = {}) {
+    return (_jsxs(_Fragment, { children: [_jsx(MobileDrawer, { footer: footer, ...view }), _jsx(DesktopSidebar, { footer: footer, collapsedFooter: collapsedFooter, ...view })] }));
 }

package/dist/components/tool-panel-layout.d.ts

@@ -5,6 +5,8 @@
  */
 interface ToolPanelLayoutProps {
     children: React.ReactNode;
+    /** Keep tools inside the working area, leaving sibling chat accessible. */
+    contained?: boolean;
 }
-export declare function ToolPanelLayout({ children }: ToolPanelLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolPanelLayout({ children, contained }: ToolPanelLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tool-panel-layout.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { useToolPanelStore } from "../lib/tool-panel-store.js";
 import { ToolPanel } from "./tool-panel.js";
-export function ToolPanelLayout({ children }) {
-    const isOpen = useToolPanelStore((state) => state.isOpen);
+export function ToolPanelLayout({ children, contained = false }) {
+    const isOpen = useToolPanelStore((state) => state.isOpen && !state.isWindowHosted);
     const panelWidth = useToolPanelStore((state) => state.panelWidth);
     const useOverlay = useToolPanelStore((state) => state.useOverlay);
-    return (_jsxs("div", { className: "relative h-full flex-1 min-w-0 overflow-hidden", children: [_jsx("div", { className: cn("h-full flex flex-col transition-all duration-300 ease-in-out", useOverlay && isOpen && "hidden"), style: {
-                    width: isOpen && !useOverlay ? `calc(100% - ${panelWidth}px)` : "100%",
-                }, children: children }), _jsx(ToolPanel, {})] }));
+    return (_jsxs("div", { className: "relative h-full flex-1 min-w-0 overflow-hidden", children: [_jsx("div", { className: cn("h-full flex flex-col transition-all duration-300 ease-in-out", (contained || useOverlay) && isOpen && "hidden"), style: {
+                    width: isOpen && !useOverlay && !contained ? `calc(100% - ${panelWidth}px)` : "100%",
+                }, children: children }), _jsx(ToolPanel, { contained: contained })] }));
 }

package/dist/components/tool-panel.d.ts

@@ -1 +1,8 @@
-export declare function ToolPanel(): import("react/jsx-runtime").JSX.Element | null;
+import { type ToolPanelContent } from "../lib/tool-panel-store.js";
+/** Renders panel content using the renderer registry, then built-in markdown/text. */
+export declare function PanelContentRenderer({ content }: {
+    content: ToolPanelContent;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ToolPanel({ contained }: {
+    contained?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;