@iloveagents/foundry-web-ui 0.33.1 → 0.33.3

package/dist/components/sidebar.d.ts

@@ -1,7 +1,39 @@
 import { type ReactNode } from "react";
-import type { NavGroup } from "../lib/nav-config.js";
+import type { NavGroup, NavItemDnd } from "../lib/nav-config.js";
 declare function scrollNavRowIntoView(nav: HTMLElement, row: HTMLElement): void;
 export declare const _scrollNavRowIntoViewForTest: typeof scrollNavRowIntoView;
+/** Drop zone rendered inside expanded containers so users can move items back to the container root.
+ *
+ * The strip stays IN FLOW and reserves its full height for the whole drag:
+ * 4px at rest, 28px from the moment a drag begins until it ends, with the
+ * band filling exactly what was reserved. Growing on hover instead — the
+ * obvious design — fails in both of its available shapes:
+ *
+ *  - in flow, every row beneath jumps 24px at the exact moment the pointer
+ *    crosses the strip, which is the moment the user is aiming at one of
+ *    those rows. Dragging a file from a nested folder down to a sibling
+ *    crosses one strip per open container, so the destination walks away
+ *    from the cursor mid-drag (measured: 28px per crossing) and the drop
+ *    lands on whatever slid underneath. From the user's seat the gesture
+ *    simply does nothing, with no request made and nothing to read.
+ *  - out of flow, nothing moves, but the expanded band overlaps ~12px of
+ *    the rows on either side and, being positioned, takes their drops — a
+ *    moving target traded for a wrong one.
+ *
+ * Reserving for the whole drag settles the layout once, before the user has
+ * aimed at anything. The opening is deliberately NOT animated: a 150ms
+ * height transition is a moving target for 150ms, which is inside the time
+ * a short drag to a nearby row takes. Only the collapse animates, and by
+ * then nothing is being aimed at.
+ *
+ * Exported for its test only — it is not in the package barrel, and the
+ * invariants (in flow, reserved by the drag rather than the pointer, band
+ * == strip) are ones jsdom can check from the class names and nothing can
+ * check from the outside.
+ */
+export declare function ContainerDropZone({ dnd }: {
+    dnd: NavItemDnd;
+}): import("react/jsx-runtime").JSX.Element;
 interface SidebarViewProps {
     /** Display-only navigation override; the navigation registry remains intact. */
     groups?: NavGroup[];

package/dist/components/sidebar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router";
 import { Ellipsis, Layers, PanelLeft, PanelLeftOpen, SquarePen, ChevronDown, ChevronRight, GripVertical, Plus, Upload, ChevronLeft, } from "lucide-react";
@@ -8,7 +8,7 @@ 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 { beginNavDrag, subscribeNavDrag, getNavDragVersion, navDragAccepts, 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";
@@ -262,6 +262,12 @@ function useNavItemDnd(dnd) {
             return;
         e.dataTransfer.setData(dnd.type, data);
         e.dataTransfer.effectAllowed = "move";
+        // Container drop zones reserve their space for the whole drag rather
+        // than growing under the pointer — see `beginNavDrag`. The MIME type
+        // goes with it so only zones that would take THIS drag open, and the
+        // source element so its `dragend` is still heard if a nav refresh
+        // detaches this row mid-drag.
+        beginNavDrag(dnd.type, e.currentTarget);
     }, [dnd]);
     const onDragEnter = useCallback((e) => {
         if (!hasMatchingDragData(e))
@@ -359,57 +365,101 @@ function useNavItemDnd(dnd) {
             : {},
     };
 }
-/** Drop zone rendered inside expanded containers so users can move items back to the container root. */
-function ContainerDropZone({ dnd }) {
+/** Drop zone rendered inside expanded containers so users can move items back to the container root.
+ *
+ * The strip stays IN FLOW and reserves its full height for the whole drag:
+ * 4px at rest, 28px from the moment a drag begins until it ends, with the
+ * band filling exactly what was reserved. Growing on hover instead — the
+ * obvious design — fails in both of its available shapes:
+ *
+ *  - in flow, every row beneath jumps 24px at the exact moment the pointer
+ *    crosses the strip, which is the moment the user is aiming at one of
+ *    those rows. Dragging a file from a nested folder down to a sibling
+ *    crosses one strip per open container, so the destination walks away
+ *    from the cursor mid-drag (measured: 28px per crossing) and the drop
+ *    lands on whatever slid underneath. From the user's seat the gesture
+ *    simply does nothing, with no request made and nothing to read.
+ *  - out of flow, nothing moves, but the expanded band overlaps ~12px of
+ *    the rows on either side and, being positioned, takes their drops — a
+ *    moving target traded for a wrong one.
+ *
+ * Reserving for the whole drag settles the layout once, before the user has
+ * aimed at anything. The opening is deliberately NOT animated: a 150ms
+ * height transition is a moving target for 150ms, which is inside the time
+ * a short drag to a nearby row takes. Only the collapse animates, and by
+ * then nothing is being aimed at.
+ *
+ * Exported for its test only — it is not in the package barrel, and the
+ * invariants (in flow, reserved by the drag rather than the pointer, band
+ * == strip) are ones jsdom can check from the class names and nothing can
+ * check from the outside.
+ */
+export function ContainerDropZone({ dnd }) {
     const [isDragOver, setIsDragOver] = useState(false);
-    const [isFileDragOver, setIsFileDragOver] = useState(false);
     const dragCounter = useRef(0);
     const acceptsFiles = dnd.canDropFiles?.() ?? false;
     const acceptsEntities = dnd.canDrop();
+    // Whether this zone is open is the DRAG's business, not the pointer's:
+    // the band is reserved before the pointer reaches it, so hover can no
+    // longer say anything about what is being dragged. And reserving space
+    // and painting a label is a promise that a drop will land here — so a
+    // zone opens only for a drag it would accept, which the drag's own MIME
+    // types decide.
+    //
+    // The subscribed snapshot is a VERSION, not the types themselves: a MIME
+    // token may legally contain whatever character one joins them with, and a
+    // split on it turns one type into two. The predicate reads the set.
+    useSyncExternalStore(subscribeNavDrag, getNavDragVersion, () => 0);
+    const dragActive = navDragAccepts({ type: dnd.type, acceptsEntities });
     const hasExternalFiles = (e) => hasExternalFilesData(e.dataTransfer);
     const hasMatchingDragData = (e) => Boolean((acceptsEntities && e.dataTransfer.types.includes(dnd.type)) ||
         (acceptsFiles && hasExternalFiles(e)));
-    return (_jsx("div", { onDragEnter: (e) => {
-            if (!hasMatchingDragData(e))
-                return;
-            e.preventDefault();
-            dragCounter.current++;
-            setIsFileDragOver(hasExternalFiles(e));
-            setIsDragOver(true);
-        }, onDragLeave: () => {
-            dragCounter.current--;
-            if (dragCounter.current <= 0) {
+    return (_jsx("div", { className: cn("relative mx-2", 
+        // Reserved for the whole drag, so the rows below settle once —
+        // before the user has aimed — and never while they are aiming.
+        // The transition rides on the RESTING class, so the reservation
+        // opens instantly and only the collapse animates: an animated
+        // opening is a moving target for as long as it runs.
+        dragActive ? "mt-0 h-7" : "-mt-1 h-1 transition-[height,margin] duration-150"), children: _jsx("div", { onDragEnter: (e) => {
+                if (!hasMatchingDragData(e))
+                    return;
+                e.preventDefault();
+                // Hover state only — the band's size is the drag's business, not
+                // the pointer's. Opening it from here is the original bug: the row
+                // the user is aiming at slides away as they reach it.
+                dragCounter.current++;
+                setIsDragOver(true);
+            }, onDragLeave: () => {
+                dragCounter.current--;
+                if (dragCounter.current <= 0) {
+                    dragCounter.current = 0;
+                    setIsDragOver(false);
+                }
+            }, onDragOver: (e) => {
+                if (!hasMatchingDragData(e))
+                    return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
+            }, onDrop: async (e) => {
+                const files = Array.from(e.dataTransfer.files ?? []);
+                const draggedData = acceptsEntities ? e.dataTransfer.getData(dnd.type) : "";
+                const hasFiles = acceptsFiles && files.length > 0 && dnd.onFileDrop;
+                const hasEntityDrop = Boolean(acceptsEntities && draggedData);
+                if (!hasFiles && !hasEntityDrop)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
                 dragCounter.current = 0;
-                setIsFileDragOver(false);
                 setIsDragOver(false);
-            }
-        }, onDragOver: (e) => {
-            if (!hasMatchingDragData(e))
-                return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
-        }, onDrop: async (e) => {
-            const files = Array.from(e.dataTransfer.files ?? []);
-            const draggedData = acceptsEntities ? e.dataTransfer.getData(dnd.type) : "";
-            const hasFiles = acceptsFiles && files.length > 0 && dnd.onFileDrop;
-            const hasEntityDrop = Boolean(acceptsEntities && draggedData);
-            if (!hasFiles && !hasEntityDrop)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            dragCounter.current = 0;
-            setIsFileDragOver(false);
-            setIsDragOver(false);
-            if (hasFiles) {
-                await dnd.onFileDrop(files);
-                return;
-            }
-            await dnd.onDrop(draggedData);
-        }, 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")
-            : "-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) })] })) }));
+                if (hasFiles) {
+                    await dnd.onFileDrop(files);
+                    return;
+                }
+                await dnd.onDrop(draggedData);
+            }, className: cn(
+            // Fills the reserved strip exactly: what is painted is what
+            // accepts a drop, and nothing extends over a neighbouring row.
+            "h-full w-full rounded-md overflow-hidden", dragActive && "flex items-center justify-center", isDragOver && "bg-primary/10 border border-dashed border-primary/30"), children: dragActive && (_jsx("span", { className: cn("text-[10px] transition-colors", isDragOver ? "text-primary/70" : "text-sidebar-foreground/35"), children: "Move to root" })) }) }));
 }
 /**
  * Leading disclosure cell on every nav row — the Confluence page-tree

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

@@ -5,4 +5,112 @@ export declare function hasExternalFilesData(dataTransfer: {
     } | null;
 }): boolean;
 export declare function hasAnyDropTarget(isDropTarget: boolean, isFileDropTarget: boolean): boolean;
-export declare function getContainerDropZoneLabel(hasExternalFiles: boolean): string;
+/**
+ * Is a drag that the nav can accept in flight, anywhere — and what is it?
+ *
+ * Container drop zones are a 4px strip at rest and a labelled band while a
+ * drag is in flight, and WHEN they grow decides whether the sidebar is
+ * usable. Growing on hover is the trap, in both available shapes:
+ *
+ *  - in flow, every row below the strip jumps 24px at the moment the pointer
+ *    crosses it — which is the moment the user is aiming at one of them, so
+ *    the destination walks away from the cursor;
+ *  - out of flow, nothing moves, but the expanded band then covers ~12px of
+ *    the rows on either side and takes their drops.
+ *
+ * So the space is reserved for the whole drag instead. The layout settles
+ * once, before the user has aimed at anything, and from then on every zone's
+ * hit area is exactly the band that is painted — no moving target, and no
+ * neighbour quietly answering for another.
+ *
+ * "Before the user has aimed" is the whole value, and it is also the whole
+ * PRECONDITION. Only a drag that starts in this document has a moment before
+ * the aim: `dragstart` fires before any movement, so the layout can settle
+ * while the pointer is still on the row being picked up.
+ *
+ * A drag arriving from OUTSIDE — the desktop, or another window — has no such
+ * moment. The browser hit-tests whatever is under the pointer before any
+ * script runs, so the first `dragenter` this document sees is already aimed
+ * at something; opening the zones from it moves that something out from under
+ * a stationary pointer. That is the very failure this whole change exists to
+ * remove, arriving by a different road.
+ *
+ * So outside drags get no reservation: the strips stay 4px and nothing moves.
+ * They are not left without a target — container rows accept and highlight
+ * file drops themselves, which is the path a file drag was always going to
+ * take. The root-drop affordance is a convenience with a redundant route; the
+ * mis-aim was a correctness failure with none.
+ *
+ * WHAT is tracked is the gesture's set of MIME types, not just "a drag is
+ * happening". Reserving space and painting a label is a promise that a drop
+ * will land, so only a zone that would take this particular drag may make it.
+ * A set rather than one type because `dragstart` BUBBLES: a draggable row
+ * sits inside a draggable container, both handlers run, and tracking one
+ * would track whichever ran last — the ancestor's — leaving zones that match
+ * the child's payload shut.
+ *
+ * The set is read directly and never serialised. It was briefly published as
+ * a joined string, for `useSyncExternalStore`'s identity comparison — but a
+ * MIME token may legally contain the separator (`|` is not one of RFC 2045's
+ * tspecials), and then one type splits into two. The snapshot is a version
+ * counter instead, so there is nothing to encode.
+ */
+type NavDragListener = () => void;
+/**
+ * Ends whatever drag is in flight.
+ *
+ * Bound to the window for `dragend` (a drop or a cancel) and `drop` (a
+ * source outside this document, which has no `dragend` here at all), and to
+ * the source element itself, whose own `dragend` is the only one left once a
+ * nav refresh has detached it.
+ *
+ * There is deliberately no `dragleave` ending. A relatedTarget-less
+ * `dragleave` is the only signal a drag leaving the window gives, and it is
+ * the same signal whether the drag is over or merely outside — so it ended
+ * live in-page drags, collapsing every zone for the rest of the gesture. It
+ * existed for drags with no `dragend` in this document, and none of those
+ * opens a reservation now.
+ */
+export declare function endNavDrag(): void;
+/**
+ * Called from `dragstart` on a nav row, with the MIME type that row wrote its
+ * payload under and the element it started from.
+ *
+ * The type ADDS rather than replaces: `dragstart` bubbles through every
+ * draggable ancestor, and each one's type belongs to the same gesture.
+ *
+ * The source is held so its `dragend` can be heard even after a nav refresh
+ * has removed the row mid-drag. A detached node still receives its own
+ * `dragend`, but the event reaches no window listener from there — so
+ * without this the reservation would stay open, every zone expanded, until
+ * some later drag happened to finish elsewhere.
+ */
+export declare function beginNavDrag(type: string, source?: Element | null): void;
+export declare function subscribeNavDrag(listener: NavDragListener): () => void;
+/**
+ * The snapshot `useSyncExternalStore` compares: a version, bumped on every
+ * change. A primitive, so identity comparison is meaningful, and carrying no
+ * encoding of its own — see the note about `|` above.
+ */
+export declare function getNavDragVersion(): number;
+/**
+ * Would a zone with this `dnd.type` accept the live drag?
+ *
+ * Reserving space and painting a label is a promise that a drop will land,
+ * so only a zone that would actually take this drag may do either. "A drag
+ * is happening" was not enough: two modules with different `dnd.type`s
+ * opened each other's zones.
+ *
+ * Files need no case here. Only a nav row's `dragstart` opens a reservation
+ * and those carry an entity, so no zone ever opens for a file drag whatever
+ * it is configured to accept. It still HANDLES one — the resting strip takes
+ * a file drop like any other target — and the container's own row advertises
+ * that same drop at full size.
+ */
+export declare function navDragAccepts(zone: {
+    type: string;
+    acceptsEntities: boolean;
+}): boolean;
+/** Test seam — module-level state outlives a test file otherwise. */
+export declare function __resetNavDragForTest(): void;
+export {};

package/dist/lib/nav-dnd.js

@@ -4,6 +4,106 @@ export function hasExternalFilesData(dataTransfer) {
 export function hasAnyDropTarget(isDropTarget, isFileDropTarget) {
     return isDropTarget || isFileDropTarget;
 }
-export function getContainerDropZoneLabel(hasExternalFiles) {
-    return hasExternalFiles ? "Upload to root" : "Move to root";
+const navDragListeners = new Set();
+/** The MIME types this gesture carries. Empty means no drag is in flight. */
+const navDragTypes = new Set();
+/** Bumped on every change — the `useSyncExternalStore` snapshot. */
+let navDragVersion = 0;
+/** The element the drag started from, when we were given one — so its
+ *  `dragend` is heard even after a nav refresh detaches it mid-drag. */
+let navDragSource = null;
+let navDragWatchBound = false;
+function publish() {
+    navDragVersion += 1;
+    for (const listener of navDragListeners)
+        listener();
+}
+/**
+ * Ends whatever drag is in flight.
+ *
+ * Bound to the window for `dragend` (a drop or a cancel) and `drop` (a
+ * source outside this document, which has no `dragend` here at all), and to
+ * the source element itself, whose own `dragend` is the only one left once a
+ * nav refresh has detached it.
+ *
+ * There is deliberately no `dragleave` ending. A relatedTarget-less
+ * `dragleave` is the only signal a drag leaving the window gives, and it is
+ * the same signal whether the drag is over or merely outside — so it ended
+ * live in-page drags, collapsing every zone for the rest of the gesture. It
+ * existed for drags with no `dragend` in this document, and none of those
+ * opens a reservation now.
+ */
+export function endNavDrag() {
+    navDragSource = null;
+    if (navDragTypes.size === 0)
+        return;
+    navDragTypes.clear();
+    publish();
+}
+function bindNavDragWatch() {
+    if (navDragWatchBound || typeof window === "undefined")
+        return;
+    navDragWatchBound = true;
+    window.addEventListener("dragend", endNavDrag, true);
+    window.addEventListener("drop", endNavDrag, true);
+}
+/**
+ * Called from `dragstart` on a nav row, with the MIME type that row wrote its
+ * payload under and the element it started from.
+ *
+ * The type ADDS rather than replaces: `dragstart` bubbles through every
+ * draggable ancestor, and each one's type belongs to the same gesture.
+ *
+ * The source is held so its `dragend` can be heard even after a nav refresh
+ * has removed the row mid-drag. A detached node still receives its own
+ * `dragend`, but the event reaches no window listener from there — so
+ * without this the reservation would stay open, every zone expanded, until
+ * some later drag happened to finish elsewhere.
+ */
+export function beginNavDrag(type, source) {
+    bindNavDragWatch();
+    if (source && source !== navDragSource) {
+        navDragSource = source;
+        source.addEventListener("dragend", endNavDrag, { once: true });
+    }
+    if (navDragTypes.has(type))
+        return;
+    navDragTypes.add(type);
+    publish();
+}
+export function subscribeNavDrag(listener) {
+    bindNavDragWatch();
+    navDragListeners.add(listener);
+    return () => navDragListeners.delete(listener);
+}
+/**
+ * The snapshot `useSyncExternalStore` compares: a version, bumped on every
+ * change. A primitive, so identity comparison is meaningful, and carrying no
+ * encoding of its own — see the note about `|` above.
+ */
+export function getNavDragVersion() {
+    return navDragVersion;
+}
+/**
+ * Would a zone with this `dnd.type` accept the live drag?
+ *
+ * Reserving space and painting a label is a promise that a drop will land,
+ * so only a zone that would actually take this drag may do either. "A drag
+ * is happening" was not enough: two modules with different `dnd.type`s
+ * opened each other's zones.
+ *
+ * Files need no case here. Only a nav row's `dragstart` opens a reservation
+ * and those carry an entity, so no zone ever opens for a file drag whatever
+ * it is configured to accept. It still HANDLES one — the resting strip takes
+ * a file drop like any other target — and the container's own row advertises
+ * that same drop at full size.
+ */
+export function navDragAccepts(zone) {
+    return zone.acceptsEntities && navDragTypes.has(zone.type);
+}
+/** Test seam — module-level state outlives a test file otherwise. */
+export function __resetNavDragForTest() {
+    navDragTypes.clear();
+    navDragSource = null;
+    navDragVersion = 0;
 }

package/dist/lib/theme-runtime.js

@@ -480,6 +480,13 @@ export const FOUNDRY_VIOLET_THEME = {
         border: "oklch(92% 0.008 290)",
         input: "oklch(92% 0.008 290)",
         ring: "oklch(43% 0.24 286)",
+        heading: "var(--primary)",
+        contentHeading1: "var(--primary)",
+        contentHeading2: "var(--foreground)",
+        contentHeading3: "var(--foreground)",
+        contentHeading4: "var(--foreground)",
+        contentHeading5: "var(--foreground)",
+        contentHeading6: "var(--foreground)",
     },
     sidebar: {
         light: {
@@ -489,8 +496,8 @@ export const FOUNDRY_VIOLET_THEME = {
             sidebarPrimaryForeground: "oklch(100% 0 0)",
             sidebarAccent: "color-mix(in srgb, var(--primary) 4%, var(--background) 96%)",
             sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 92%, var(--primary) 8%)",
-            sidebarSelected: "var(--muted)",
-            sidebarSelectedForeground: "var(--foreground)",
+            sidebarSelected: "var(--sidebar)",
+            sidebarSelectedForeground: "var(--sidebar-primary)",
             sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
             sidebarBorder: "color-mix(in srgb, var(--border) 96%, var(--foreground) 4%)",
             sidebarRing: "oklch(43% 0.24 286)",
@@ -502,8 +509,8 @@ export const FOUNDRY_VIOLET_THEME = {
             sidebarPrimaryForeground: "oklch(0.98 0 0)",
             sidebarAccent: "color-mix(in srgb, var(--primary) 8%, var(--background) 92%)",
             sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 90%, white 10%)",
-            sidebarSelected: "color-mix(in srgb, var(--muted) 78%, var(--background) 22%)",
-            sidebarSelectedForeground: "var(--foreground)",
+            sidebarSelected: "var(--sidebar)",
+            sidebarSelectedForeground: "var(--sidebar-primary)",
             sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
             sidebarBorder: "color-mix(in srgb, var(--border) 90%, white 10%)",
             sidebarRing: "oklch(0.72 0.18 286)",
@@ -529,6 +536,13 @@ export const FOUNDRY_VIOLET_THEME = {
         border: "oklch(1 0.01 286 / 12%)",
         input: "oklch(1 0.01 286 / 15%)",
         ring: "oklch(0.72 0.18 286)",
+        heading: "var(--primary)",
+        contentHeading1: "var(--primary)",
+        contentHeading2: "var(--foreground)",
+        contentHeading3: "var(--foreground)",
+        contentHeading4: "var(--foreground)",
+        contentHeading5: "var(--foreground)",
+        contentHeading6: "var(--foreground)",
     },
     typography: {
         bodyFont: '"Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',

package/dist/workbench/conversation-history.d.ts

@@ -7,7 +7,7 @@ export declare function ConversationHistory({ groups, workspaceId, onClose, show
     showBack?: boolean;
     welcome?: boolean;
     compact?: boolean;
-    /** The global start page shows the three newest chats below the composer. */
+    /** The global start page shows recent and pinned chats below the composer. */
     home?: boolean;
     onViewAll?: () => void;
     /** Current content entity. Compact homes show only an exact match unless this is the workspace root. */

package/dist/workbench/conversation-history.js

@@ -5,6 +5,7 @@ import { Fragment, useEffect, useState } from "react";
 import { Link } from "react-router";
 import { ArrowLeft, MessageSquare, MoreHorizontal, Pin, Loader2, ChevronDown, Check, MessagesSquare, PauseCircle, Copy, } from "lucide-react";
 import { useChatRuns, isChatRunActive } from "../lib/chat-runs-store.js";
+const HOME_SECTION_LIMIT = 5;
 /** History is a view of existing navigation targets, never a second chat runtime. */
 export function ConversationHistory({ groups, workspaceId, onClose, showBack = true, welcome = false, compact = false, home = false, onViewAll, entityId, rootContext = false, }) {
     const [loadingTo, setLoadingTo] = useState(null);
@@ -76,8 +77,12 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
         }
         return (active(b) - active(a) || Number(Boolean(b.meta?.pinned)) - Number(Boolean(a.meta?.pinned)));
     });
-    const homeRecentItems = home ? items.filter((item) => !item.meta?.pinned).slice(0, 3) : [];
-    const homePinnedItems = home ? items.filter((item) => item.meta?.pinned).slice(0, 3) : [];
+    const homeRecentItems = home
+        ? items.filter((item) => !item.meta?.pinned).slice(0, HOME_SECTION_LIMIT)
+        : [];
+    const homePinnedItems = home
+        ? items.filter((item) => item.meta?.pinned).slice(0, HOME_SECTION_LIMIT)
+        : [];
     const homeHasItems = homeRecentItems.length > 0 || homePinnedItems.length > 0;
     const visibleItems = compact ? items.slice(0, 3) : items;
     const activeItems = visibleItems.filter((item) => {
@@ -105,9 +110,9 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
             ? "w-full"
             : compact
                 ? "w-full"
-                : "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col px-4 pb-4", children: [welcome && (_jsxs("div", { className: "pb-6 pt-8", children: [_jsx("h1", { className: "text-xl font-semibold", children: "How can I help?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Start something new or continue a recent chat." })] })), showBack && (_jsxs("button", { onClick: onClose, className: "mb-4 flex items-center gap-2 py-2 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { size: 14 }), " Back to chat"] })), (!compact || items.length > 0) && (_jsxs("div", { className: home
-                    ? "mb-2 mt-5 flex items-center justify-between px-1"
-                    : "mb-2 mt-2 flex items-center justify-between", children: [_jsx("h2", { className: compact ? "text-xs font-medium text-muted-foreground" : "text-base font-semibold", children: home ? "Your chats" : compact ? "Recent chats" : "Chat history" }), home && onViewAll && (_jsx("button", { type: "button", onClick: onViewAll, className: "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary [@media(pointer:coarse)]:min-h-11", children: "View all" }))] })), Boolean(workspaceId) && !compact && (_jsx("div", { className: "mb-3", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", "aria-label": "History filter", className: "w-full justify-between font-normal shadow-none", children: [_jsx("span", { className: "truncate", children: all ? "All chats" : "Last used in this workspace" }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-[var(--radix-dropdown-menu-trigger-width)]", children: [
+                : "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col px-4 pb-4", children: [welcome && (_jsxs("div", { className: "pb-6 pt-8", children: [_jsx("h1", { className: "text-xl font-semibold", children: "How can I help?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Start something new or continue a recent chat." })] })), showBack && (_jsxs("button", { onClick: onClose, className: "mb-4 flex items-center gap-2 py-2 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { size: 14 }), " Back to chat"] })), (!compact || items.length > 0) && (_jsx("div", { className: home
+                    ? "mb-2 mt-5 flex items-center justify-center px-1 text-center"
+                    : "mb-2 mt-2 flex items-center justify-between", children: _jsx("h2", { className: compact ? "text-xs font-medium text-muted-foreground" : "text-base font-semibold", children: home ? "Your chats" : compact ? "Recent chats" : "Chat history" }) })), Boolean(workspaceId) && !compact && (_jsx("div", { className: "mb-3", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", "aria-label": "History filter", className: "w-full justify-between font-normal shadow-none", children: [_jsx("span", { className: "truncate", children: all ? "All chats" : "Last used in this workspace" }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-[var(--radix-dropdown-menu-trigger-width)]", children: [
                                 { value: false, label: "Last used in this workspace" },
                                 { value: true, label: "All chats" },
                             ].map((option) => (_jsxs(DropdownMenuItem, { role: "menuitemradio", "aria-checked": all === option.value, onSelect: () => setAll(option.value), children: [_jsx("span", { className: "flex-1", children: option.label }), all === option.value && _jsx(Check, { className: "size-4", "aria-hidden": "true" })] }, option.label))) })] }) })), !compact && (_jsx(Input, { "aria-label": "Search chats", placeholder: "Search chats", value: search, onChange: (event) => setSearch(event.target.value), className: "mb-3" })), _jsx("span", { className: "sr-only", role: "status", children: copiedId ? "Chat ID copied" : "" }), loadError && (_jsx("p", { role: "alert", className: "mb-2 text-xs text-destructive", children: loadError })), _jsxs("div", { className: home
@@ -154,7 +159,7 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
                                             onClose();
                                         }, "data-conversation-row": true, className: home
                                             ? "flex min-w-0 flex-1 items-center gap-3 rounded-lg px-2 py-2 text-left text-sm focus-visible:outline-2 focus-visible:outline-primary"
-                                            : "flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary", children: [loadingTo === item.to ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-label": "Opening chat" })) : runFor(item)?.status === "running" ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-primary motion-reduce:animate-none", "aria-hidden": true })) : runFor(item)?.status === "waiting" ? (_jsx(PauseCircle, { className: "size-4 shrink-0 text-primary", "aria-hidden": true })) : item.meta?.pinned ? (_jsx(Pin, { className: "size-4 shrink-0 text-muted-foreground", "aria-label": "Pinned chat" })) : (_jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), " ", runFor(item) && isChatRunActive(runFor(item)) ? (_jsx("span", { className: "block text-xs text-primary", children: runFor(item)?.status === "waiting" ? "Waiting for you" : "Running" })) : ((!compact || rootContext) && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: !all &&
+                                            : "flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary", children: [loadingTo === item.to ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-label": "Opening chat" })) : runFor(item)?.status === "running" ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-primary motion-reduce:animate-none", "aria-hidden": true })) : runFor(item)?.status === "waiting" ? (_jsx(PauseCircle, { className: "size-4 shrink-0 text-primary", "aria-hidden": true })) : item.meta?.pinned ? (_jsx(Pin, { className: "size-4 shrink-0 text-muted-foreground", "aria-label": "Pinned chat" })) : (_jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), " ", runFor(item) && isChatRunActive(runFor(item)) ? (_jsx("span", { className: "block text-xs text-primary", children: runFor(item)?.status === "waiting" ? "Waiting for you" : "Running" })) : ((home || !compact || rootContext) && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: !all &&
                                                             typeof item.meta?.previewEntityName === "string" &&
                                                             item.meta.previewEntityName
                                                             ? `Last at ${item.meta.previewEntityName}`
@@ -181,5 +186,5 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
                                                                 .catch(() => setLoadError(`Could not copy. Chat ID: ${decodeURIComponent(id)}`));
                                                         }, children: [_jsx(Copy, { className: "size-4" }), "Copy chat ID"] }), Boolean(item.actions?.length) && _jsx(DropdownMenuSeparator, {}), item.actions?.map((action) => (_jsxs(Fragment, { children: [action.separator && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => {
                                                                     void action.handler();
-                                                                }, className: action.destructive ? "text-destructive" : undefined, children: [_jsx(action.icon, { className: "mr-2 size-4" }), action.label] })] }, action.label)))] })] })] }, item.to)))] }, section.label))), items.length === 0 && !compact && (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: search ? "No matching chats" : "No chats yet" }))] }), compact && onViewAll && !home && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onViewAll, className: "mt-1 h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "Chat history"] }))] }));
+                                                                }, className: action.destructive ? "text-destructive" : undefined, children: [_jsx(action.icon, { className: "mr-2 size-4" }), action.label] })] }, action.label)))] })] })] }, item.to)))] }, section.label))), items.length === 0 && !compact && (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: search ? "No matching chats" : "No chats yet" }))] }), home && onViewAll && (_jsx("div", { className: "mt-2 flex justify-center", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: onViewAll, className: "h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "View all conversations"] }) })), compact && onViewAll && !home && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onViewAll, className: "mt-1 h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "Chat history"] }))] }));
 }

package/dist/workbench/selection-bridge.js

@@ -25,10 +25,10 @@ export function SelectionBridge({ children }) {
                         top: rect.top - bounds.top,
                         height: rect.height,
                         left: rect.left - bounds.left + 0.5,
-                        rowRight: rect.right - bounds.left - 1,
                         width: bounds.width,
                         navHeight: bounds.height,
                         surfaceWidth: node.nextElementSibling?.getBoundingClientRect().width ?? 0,
+                        radius: Math.min(16, rect.height / 2, Number.parseFloat(getComputedStyle(row).borderTopLeftRadius) || 0),
                     }
                     : null);
             });
@@ -46,6 +46,10 @@ export function SelectionBridge({ children }) {
             attributes: true,
             attributeFilter: ["class", "style", "data-active-nav-row"],
         });
+        mutation?.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "style"],
+        });
         node.addEventListener("scroll", measure, true);
         measure();
         return () => {
@@ -55,27 +59,55 @@ export function SelectionBridge({ children }) {
             node.removeEventListener("scroll", measure, true);
         };
     }, []);
-    return (_jsxs("div", { ref: root, "data-connected-navigation": anchor ? "true" : undefined, className: "relative flex shrink-0", children: [_jsx("style", { children: `
+    return (_jsxs("div", { ref: root, "data-connected-navigation": anchor ? "true" : undefined, className: "relative flex shrink-0", style: {
+            "--connected-row-radius": anchor ? `${anchor.radius}px` : undefined,
+        }, children: [_jsx("style", { children: `
       [data-connected-navigation="true"] + [data-workbench-surface]::after { display: none; }
       .workbench-preview [data-sidebar-surface="desktop"] nav { padding-right: 16px; }
       .workbench-preview [data-sidebar-surface="desktop"] { border-right-color: transparent; }
       [data-connected-navigation="true"] [data-sidebar-surface="desktop"] [data-active-nav-row="true"] {
-        border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0;
+        background: var(--background);
+        border-color: transparent;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      [data-connected-navigation="true"] [data-sidebar-surface="desktop"] [data-active-nav-row="true"]::after {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        inset-block: 0;
+        left: 100%;
+        width: 16px;
+        background: var(--background);
+      }
+      [data-connected-navigation="true"] [data-sidebar-surface="desktop"] [data-active-nav-row="true"]::before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        inset-block: 5px;
+        left: 5px;
+        right: -10px;
+        border-radius: max(0px, calc(var(--connected-row-radius) - 5px));
+        background: var(--sidebar-selected);
+        pointer-events: none;
+      }
+      [data-connected-navigation="true"] [data-sidebar-surface="desktop"] [data-active-nav-row="true"] > * {
+        z-index: 2;
       }
-    ` }), children, anchor && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute z-20", style: { inset: 0, width: anchor.width + anchor.surfaceWidth, height: anchor.navHeight }, viewBox: `0 0 ${anchor.width + anchor.surfaceWidth} ${anchor.navHeight}`, children: _jsx("path", { fill: "none", stroke: "var(--sidebar-ring)", strokeOpacity: 0.6, strokeWidth: 1, d: `M ${anchor.width + 12},0.5
-          H ${anchor.width + anchor.surfaceWidth - 12}
-          Q ${anchor.width + anchor.surfaceWidth - 0.5},0.5 ${anchor.width + anchor.surfaceWidth - 0.5},12
-          V ${anchor.navHeight - 12}
-          Q ${anchor.width + anchor.surfaceWidth - 0.5},${anchor.navHeight - 0.5} ${anchor.width + anchor.surfaceWidth - 12},${anchor.navHeight - 0.5}
-          H ${anchor.width + 12}
-          Q ${anchor.width - 0.5},${anchor.navHeight - 0.5} ${anchor.width - 0.5},${anchor.navHeight - 12}
-          V ${anchor.top + anchor.height + 7}
-          Q ${anchor.width - 0.5},${anchor.top + anchor.height - 0.5} ${anchor.width - 8},${anchor.top + anchor.height - 0.5}
-          H ${anchor.left + 12}
-          Q ${anchor.left},${anchor.top + anchor.height - 0.5} ${anchor.left},${anchor.top + anchor.height - 12}
-          V ${anchor.top + 12}
-          Q ${anchor.left},${anchor.top + 0.5} ${anchor.left + 12},${anchor.top + 0.5}
-          H ${anchor.width - 8}
-          Q ${anchor.width - 0.5},${anchor.top + 0.5} ${anchor.width - 0.5},${anchor.top - 7}
-          V 12 Q ${anchor.width - 0.5},0.5 ${anchor.width + 12},0.5 Z` }) }))] }));
+    ` }), children, anchor && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute z-20", style: { inset: 0, width: anchor.width + anchor.surfaceWidth, height: anchor.navHeight }, viewBox: `0 0 ${anchor.width + anchor.surfaceWidth} ${anchor.navHeight}`, children: _jsx("path", { fill: "none", stroke: "var(--sidebar-ring)", strokeOpacity: 0.6, strokeWidth: 1, d: `M ${anchor.width + anchor.radius},0.5
+          H ${anchor.width + anchor.surfaceWidth - anchor.radius}
+          Q ${anchor.width + anchor.surfaceWidth - 0.5},0.5 ${anchor.width + anchor.surfaceWidth - 0.5},${anchor.radius}
+          V ${anchor.navHeight - anchor.radius}
+          Q ${anchor.width + anchor.surfaceWidth - 0.5},${anchor.navHeight - 0.5} ${anchor.width + anchor.surfaceWidth - anchor.radius},${anchor.navHeight - 0.5}
+          H ${anchor.width + anchor.radius}
+          Q ${anchor.width - 0.5},${anchor.navHeight - 0.5} ${anchor.width - 0.5},${anchor.navHeight - anchor.radius}
+          V ${anchor.top + anchor.height + anchor.radius}
+          Q ${anchor.width - 0.5},${anchor.top + anchor.height - 0.5} ${anchor.width - anchor.radius},${anchor.top + anchor.height - 0.5}
+          H ${anchor.left + anchor.radius}
+          Q ${anchor.left},${anchor.top + anchor.height - 0.5} ${anchor.left},${anchor.top + anchor.height - anchor.radius}
+          V ${anchor.top + anchor.radius}
+          Q ${anchor.left},${anchor.top + 0.5} ${anchor.left + anchor.radius},${anchor.top + 0.5}
+          H ${anchor.width - anchor.radius}
+          Q ${anchor.width - 0.5},${anchor.top + 0.5} ${anchor.width - 0.5},${anchor.top - anchor.radius}
+          V ${anchor.radius} Q ${anchor.width - 0.5},0.5 ${anchor.width + anchor.radius},0.5 Z` }) }))] }));
 }

package/package.json

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