@iloveagents/foundry-web-ui 0.29.1 → 0.31.0

package/dist/lib/theme-store.d.ts

@@ -7,7 +7,9 @@
 export type ThemeMode = "light" | "dark" | "system";
 interface ThemeState {
     mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
+    setMode: (mode: ThemeMode, options?: {
+        persist?: boolean;
+    }) => void;
     /** Cycle through light -> dark -> system. */
     cycle: () => void;
 }

package/dist/lib/theme-store.js

@@ -38,8 +38,9 @@ export const useThemeStore = create((set, get) => {
     }
     return {
         mode: initial,
-        setMode: (mode) => {
-            localStorage.setItem(STORAGE_KEY, mode);
+        setMode: (mode, options) => {
+            if (options?.persist !== false)
+                localStorage.setItem(STORAGE_KEY, mode);
             applyTheme(mode);
             set({ mode });
         },

package/dist/lib/use-new-conversation.js

@@ -1,7 +1,5 @@
 import { useCallback } from "react";
 import { useNavigate } from "react-router";
-import { useAui } from "@assistant-ui/react";
-import { useStore } from "zustand";
 import { citationStore } from "@iloveagents/foundry-agent";
 import { useAGUIAdapter } from "../components/ag-ui-runtime-provider.js";
 import { useToolPanelStore } from "./tool-panel-store.js";
@@ -13,13 +11,11 @@ import { useChatLifecycleStore } from "./chat-lifecycle-store.js";
  * Used by ChatHeader and Sidebar to keep behavior in sync.
  */
 export function useNewConversation(options) {
-    const aui = useAui();
     const { resetThread } = useAGUIAdapter();
     const navigate = useNavigate();
     const closePanel = useToolPanelStore((s) => s.closePanel);
     const resetApp = useAppStore((s) => s.resetAll);
     const closeMobile = useSidebarStore((s) => s.closeMobile);
-    const clearCitations = useStore(citationStore, (s) => s.clear);
     return useCallback(() => {
         const preserved = options?.preserveNavigation
             ? {
@@ -28,12 +24,15 @@ export function useNewConversation(options) {
             }
             : null;
         closePanel();
+        const sentContext = useAppStore.getState().sentContext;
         resetApp();
+        useAppStore.setState({ sentContext });
         if (preserved) {
             useAppStore.setState(preserved);
         }
         closeMobile();
-        clearCitations();
+        // Clear only the foreground projection; retained transcripts keep their sources.
+        citationStore.setState({ threadId: null, results: [] });
         // Notify the host app that a new thread is starting. Spaces wires
         // this to clear its active-chat sticky id so the AGUIRuntimeProvider's
         // ``effectiveThreadId`` advances to a freshly-minted UUID instead of
@@ -44,7 +43,6 @@ export function useNewConversation(options) {
         // where there is no ``/`` navigation to clear sticky for us.
         useChatLifecycleStore.getState().startNewConversation();
         resetThread();
-        aui.threads().switchToNewThread();
         if (options?.navigateToChat ?? true) {
             navigate("/");
         }
@@ -53,9 +51,7 @@ export function useNewConversation(options) {
         resetApp,
         options?.preserveNavigation,
         closeMobile,
-        clearCitations,
         resetThread,
-        aui,
         options?.navigateToChat,
         navigate,
     ]);

package/dist/styles.css

@@ -1,4 +1,11 @@
 @theme inline {
+  --color-heading: var(--heading, var(--foreground));
+  --color-content-heading-1: var(--content-heading-1, var(--heading, var(--foreground)));
+  --color-content-heading-2: var(--content-heading-2, var(--heading, var(--foreground)));
+  --color-content-heading-3: var(--content-heading-3, var(--foreground));
+  --color-content-heading-4: var(--content-heading-4, var(--foreground));
+  --color-content-heading-5: var(--content-heading-5, var(--foreground));
+  --color-content-heading-6: var(--content-heading-6, var(--foreground));
   --radius-xs: calc(var(--radius) - 6px);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -255,3 +262,10 @@ tr[data-state="selected"] > [data-pinned="cell"] {
 tr[data-active] > [data-pinned="cell"] {
   background-color: color-mix(in srgb, var(--primary) 8%, var(--pinned-surface));
 }
+
+@layer base {
+  :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--heading, var(--foreground));
+    font-family: var(--font-heading, inherit);
+  }
+}

package/dist/workbench/chat-header.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TooltipIconButton } from "../index.js";
-import { SquarePen, PanelLeft, MessageSquare, Menu, History, LoaderCircle } from "lucide-react";
+import { SquarePen, PanelLeft, MessageSquare, Menu, MessagesSquare, LoaderCircle, } from "lucide-react";
+import { RunningChatsMenu } from "./running-chats-menu.js";
 export function WorkbenchChatHeader({ collapsed, running, chatWidth, buttonClass, toggleNavigation, setCollapsed, showHistory, startChat, returnToChat, openHistory, chatOnly, setContentCollapsed, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-chat-header": true, className: `relative flex shrink-0 items-center ${collapsed ? "justify-center" : "gap-1 px-2"}`, children: [!collapsed && !chatWidth.compact && (_jsx(TooltipIconButton, { tooltip: "Open navigation", className: `${buttonClass} preview-mobile-navigation`, "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { size: 18 }) })), collapsed ? (_jsx(TooltipIconButton, { tooltip: running ? "AI is working — expand chat" : "Expand chat", className: buttonClass, "aria-label": running ? "AI is working — expand chat" : "Expand chat", onClick: () => setCollapsed(false), children: running ? (_jsx(LoaderCircle, { size: 18, className: "animate-spin motion-reduce:animate-none text-primary" })) : (_jsx(MessageSquare, { size: 18 })) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1 px-2 py-2", children: _jsx("div", { className: "text-sm font-semibold", children: showHistory ? "Conversations" : "Chat" }) }), _jsx(TooltipIconButton, { tooltip: "New chat", className: buttonClass, "aria-label": "New chat", onClick: startChat, children: _jsx(SquarePen, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Chat history", className: buttonClass, "aria-label": "Chat history", "aria-expanded": showHistory, onClick: () => (showHistory ? returnToChat() : openHistory()), children: _jsx(History, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Collapse chat", style: chatOnly || chatWidth.compact ? { display: "none" } : undefined, className: buttonClass, "aria-label": "Collapse chat", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-chat-header": true, className: `relative flex shrink-0 items-center ${collapsed ? "justify-center" : "gap-1 px-2"}`, children: [!collapsed && !chatWidth.compact && (_jsx(TooltipIconButton, { tooltip: "Open navigation", className: `${buttonClass} preview-mobile-navigation`, "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { size: 18 }) })), collapsed ? (_jsx(TooltipIconButton, { tooltip: running ? "AI is working — expand chat" : "Expand chat", className: buttonClass, "aria-label": running ? "AI is working — expand chat" : "Expand chat", onClick: () => setCollapsed(false), children: running ? (_jsx(LoaderCircle, { size: 18, className: "animate-spin motion-reduce:animate-none text-primary" })) : (_jsx(MessageSquare, { size: 18 })) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1 px-2 py-2", children: _jsx("div", { className: "text-sm font-semibold", children: showHistory ? "Conversations" : "Chat" }) }), _jsx(RunningChatsMenu, { onOpen: returnToChat }), _jsx(TooltipIconButton, { tooltip: "New chat", className: buttonClass, "aria-label": "New chat", onClick: startChat, children: _jsx(SquarePen, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Chat history", className: buttonClass, "aria-label": "Chat history", "aria-expanded": showHistory, onClick: () => (showHistory ? returnToChat() : openHistory()), children: _jsx(MessagesSquare, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Collapse chat", style: chatOnly || chatWidth.compact ? { display: "none" } : undefined, className: buttonClass, "aria-label": "Collapse chat", onClick: () => {
                                     setContentCollapsed(false);
                                     setCollapsed(true);
                                 }, children: _jsx(PanelLeft, { size: 18 }) })] }))] }), collapsed && (_jsxs("div", { "data-chat-rail": true, className: "flex flex-col items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: "Open navigation", className: `${buttonClass} preview-mobile-navigation`, "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Chat history", className: buttonClass, "aria-label": "Chat history", onClick: () => {
                             setCollapsed(false);
                             openHistory();
-                        }, children: _jsx(History, { size: 18 }) })] }))] }));
+                        }, children: _jsx(MessagesSquare, { size: 18 }) })] }))] }));
 }

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

@@ -1,4 +1,4 @@
-import type { NavGroup } from "../index.js";
+import type { NavGroup } from "../lib/nav-config.js";
 /** History is a view of existing navigation targets, never a second chat runtime. */
 export declare function ConversationHistory({ groups, workspaceId, onClose, showBack, welcome, compact, onViewAll, entityId, rootContext, }: {
     groups: NavGroup[];

package/dist/workbench/conversation-history.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "../index.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "../ui/dropdown-menu.js";
 import { Button, Input } from "@iloveagents/foundry-web-primitives";
 import { Fragment, useEffect, useState } from "react";
 import { Link } from "react-router";
-import { ArrowLeft, MessageSquare, MoreHorizontal, Pin, Loader2, ChevronDown, Check, History, } from "lucide-react";
+import { ArrowLeft, MessageSquare, MoreHorizontal, Pin, Loader2, ChevronDown, Check, MessagesSquare, PauseCircle, Copy, } from "lucide-react";
+import { useChatRuns, isChatRunActive } from "../lib/chat-runs-store.js";
 /** 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, onViewAll, entityId, rootContext = false, }) {
     const [loadingTo, setLoadingTo] = useState(null);
+    const [copiedId, setCopiedId] = useState(null);
     const [loadError, setLoadError] = useState(null);
     const [all, setAll] = useState(!workspaceId);
     useEffect(() => setAll(!workspaceId), [workspaceId]);
@@ -16,28 +18,68 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
         groups
             .filter((g) => g.meta?.type === "recent-chats" || g.meta?.type === "pinned-chats")
             .flatMap((g) => g.items);
+    const runs = useChatRuns((s) => s.runs);
+    const runFor = (item) => Object.values(runs).find((run) => (run.conversationUrl ?? `/chat/${encodeURIComponent(run.threadId)}`) === item.to);
     const workspaceItems = all || !workspaceId
         ? allItems
         : (scoped?.meta?.workspaceConversations ?? scoped?.items ?? []);
-    const scopedItems = compact && workspaceId && !rootContext
-        ? workspaceItems.filter((item) => Boolean(entityId) && item.meta?.previewEntityId === entityId)
-        : workspaceItems;
-    const items = [...new Map(scopedItems.map((item) => [item.to, item])).values()]
-        .filter((item) => item.meta?.type !== "show-all-chats")
+    // In-memory runs appear immediately, before the server refreshes its nav rows.
+    // A persisted title/actions win, while the live run owns its current location.
+    const merged = new Map(workspaceItems.map((item) => [item.to, item]));
+    for (const run of Object.values(runs)) {
+        const to = run.conversationUrl ?? `/chat/${encodeURIComponent(run.threadId)}`;
+        const saved = allItems.find((item) => item.to === to);
+        if (saved && !isChatRunActive(run))
+            continue;
+        if (!all && workspaceId && !merged.has(to) && run.contextMeta?.spacesRootId !== workspaceId) {
+            merged.delete(to);
+            continue;
+        }
+        merged.set(to, {
+            ...saved,
+            to,
+            label: saved?.label ?? run.title,
+            icon: MessageSquare,
+            meta: {
+                ...saved?.meta,
+                previewEntityId: run.contextMeta?.spacesEntityId ?? saved?.meta?.previewEntityId,
+                previewEntityName: run.pageLabel ?? saved?.meta?.previewEntityName,
+            },
+        });
+    }
+    const items = [...merged.values()]
+        .filter((item) => !(compact && workspaceId && !rootContext) ||
+        (Boolean(entityId) && item.meta?.previewEntityId === entityId))
+        .filter((item) => !["show-all-chats", "no-chats-placeholder"].includes(String(item.meta?.type)))
         .filter((item) => item.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
-        .sort((a, b) => Number(Boolean(b.meta?.pinned)) - Number(Boolean(a.meta?.pinned)));
+        .sort((a, b) => {
+        const active = (item) => {
+            const run = runFor(item);
+            return run && isChatRunActive(run) ? 1 : 0;
+        };
+        return (active(b) - active(a) || Number(Boolean(b.meta?.pinned)) - Number(Boolean(a.meta?.pinned)));
+    });
     const visibleItems = compact ? items.slice(0, 3) : items;
-    const pinnedItems = visibleItems.filter((item) => item.meta?.pinned);
-    const sections = pinnedItems.length
-        ? [
+    const activeItems = visibleItems.filter((item) => {
+        const run = runFor(item);
+        return run && isChatRunActive(run);
+    });
+    const idleItems = visibleItems.filter((item) => !activeItems.includes(item));
+    const pinnedItems = idleItems.filter((item) => item.meta?.pinned);
+    const sections = compact
+        ? [{ label: "", items: visibleItems }]
+        : [
+            { label: "Running", items: activeItems },
             { label: "Pinned", items: pinnedItems },
-            { label: "Recent chats", items: visibleItems.filter((item) => !item.meta?.pinned) },
-        ]
-        : [{ label: "", items: visibleItems }];
+            {
+                label: activeItems.length || pinnedItems.length ? "Recent chats" : "",
+                items: idleItems.filter((item) => !item.meta?.pinned),
+            },
+        ];
     return (_jsxs("section", { "data-conversation-history": true, "aria-label": compact ? "Recent conversations" : "Chat history", className: 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) && (_jsx("div", { className: "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: compact ? "Recent conversations" : "Conversation 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 conversations" : "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 conversations" },
-                            ].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" })), loadError && (_jsx("p", { role: "alert", className: "mb-2 text-xs text-destructive", children: loadError })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", "aria-busy": Boolean(loadingTo), children: [sections
+                            ].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: "min-h-0 flex-1 overflow-y-auto", "aria-busy": Boolean(loadingTo), children: [sections
                         .filter((section) => section.items.length)
                         .map((section) => (_jsxs("section", { "aria-label": section.label || "Recent chats", className: "mb-4 last:mb-0", children: [section.label && (_jsx("h3", { "data-conversation-section-label": true, className: "px-2 py-2 text-xs font-medium text-muted-foreground", children: section.label })), section.items.map((item) => item.disabled ? (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: item.label }, item.to)) : (_jsxs("div", { className: "group flex items-center rounded-lg hover:bg-muted", children: [_jsxs(Link, { to: item.to, onClick: (event) => {
                                             if (loadingTo) {
@@ -69,7 +111,7 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
                                             }
                                             setLoadingTo(null);
                                             onClose();
-                                        }, "data-conversation-row": true, className: "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" })) : 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 }), " ", (!compact || rootContext) && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: !all &&
+                                        }, "data-conversation-row": true, className: "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 &&
                                                             typeof item.meta?.previewEntityName === "string" &&
                                                             item.meta.previewEntityName
                                                             ? `Last at ${item.meta.previewEntityName}`
@@ -80,7 +122,21 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
                                                                     ? `Last in ${item.meta.previewSpaceName}`
                                                                     : item.meta?.previewContextUnavailable
                                                                         ? "Location unavailable"
-                                                                        : "Last outside a workspace" }))] })] }), Boolean(item.actions?.length) && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Actions for ${item.label}`, className: "mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100 [@media(hover:none)]:opacity-100 hover:bg-background", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: 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 && (_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(History, { className: "size-4", "aria-hidden": true }), "Conversation history"] }))] }));
+                                                                        : "Last outside a workspace" })))] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Actions for ${item.label}`, className: "mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100 [@media(hover:none)]:opacity-100 hover:bg-background", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onSelect: () => {
+                                                            const rawId = runFor(item)?.threadId ??
+                                                                item.meta?.conversationId ??
+                                                                item.to.split("/chat/")[1]?.split(/[?#]/)[0];
+                                                            if (typeof rawId !== "string" || !rawId)
+                                                                return;
+                                                            const id = rawId;
+                                                            void Promise.resolve()
+                                                                .then(() => navigator.clipboard.writeText(decodeURIComponent(String(id))))
+                                                                .then(() => {
+                                                                setCopiedId(id);
+                                                                setLoadError(null);
+                                                            })
+                                                                .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 && (_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 }), "Conversation history"] }))] }));
 }

package/dist/workbench/running-chats-menu.d.ts

@@ -0,0 +1,3 @@
+export declare function RunningChatsMenu({ onOpen }?: {
+    onOpen?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/workbench/running-chats-menu.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAGUIAdapter } from "../components/ag-ui-runtime-provider.js";
+import { useNavigate } from "react-router";
+import { LoaderCircle, MessageSquare, PauseCircle } from "lucide-react";
+import { useChatRuns, isChatRunActive } from "../lib/chat-runs-store.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, } from "../ui/dropdown-menu.js";
+export function RunningChatsMenu({ onOpen } = {}) {
+    const runs = useChatRuns((s) => s.runs);
+    const navigate = useNavigate();
+    const { selectRetainedThread } = useAGUIAdapter();
+    const active = Object.values(runs).filter(isChatRunActive);
+    if (!active.length)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${active.length} running conversations`, className: "inline-flex items-center gap-1.5 px-2 text-xs text-primary", children: [_jsx(LoaderCircle, { className: "size-3.5 animate-spin motion-reduce:animate-none" }), _jsx("span", { children: active.length })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "max-w-80", children: [_jsx(DropdownMenuLabel, { children: "Running in this browser" }), active.map((run) => (_jsxs(DropdownMenuItem, { onSelect: () => {
+                            if (!selectRetainedThread(run.threadId)) {
+                                navigate(run.conversationUrl ?? `/chat/${encodeURIComponent(run.threadId)}`);
+                            }
+                            onOpen?.();
+                        }, children: [run.status === "waiting" ? (_jsx(PauseCircle, { className: "size-4 shrink-0" })) : (_jsx(MessageSquare, { className: "size-4 shrink-0" })), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate", children: run.title }), run.status === "waiting" && (_jsx("span", { className: "block text-xs text-muted-foreground", children: "Open to continue" }))] })] }, run.threadId)))] })] }));
+}

package/dist/workbench/selection-bridge.js

@@ -60,12 +60,9 @@ export function SelectionBridge({ children }) {
       .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"] {
-        background: var(--background);
         border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0;
       }
-    ` }), children, anchor && (_jsxs("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: "var(--background)", d: `M ${anchor.width},${anchor.top - 7} Q ${anchor.width},${anchor.top} ${anchor.width - 8},${anchor.top}
-          H ${anchor.rowRight} V ${anchor.top + anchor.height} H ${anchor.width - 8}
-          Q ${anchor.width},${anchor.top + anchor.height} ${anchor.width},${anchor.top + anchor.height + 7} Z` }), _jsx("path", { fill: "none", stroke: "var(--sidebar-ring)", strokeOpacity: 0.28, strokeWidth: 1, d: `M ${anchor.width + 12},0.5
+    ` }), 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}
@@ -80,5 +77,5 @@ export function SelectionBridge({ children }) {
           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` })] }))] }));
+          V 12 Q ${anchor.width - 0.5},0.5 ${anchor.width + 12},0.5 Z` }) }))] }));
 }

package/dist/workbench/use-workbench-state.d.ts

@@ -1,4 +1,3 @@
-import type { NavItem } from "../lib/nav-config.js";
 export declare function normalizeWorkbenchPath(path: string): string;
 export declare function useWorkbenchState(chatRoute: boolean): {
     panelOpen: boolean;
@@ -38,7 +37,7 @@ export declare function useWorkbenchState(chatRoute: boolean): {
         label: string;
         tree?: boolean;
         icon?: import("lucide-react").LucideIcon;
-        items: NavItem[];
+        items: import("../index.js").NavItem[];
         priority?: number;
         defaultCollapsed?: boolean;
         to?: string;

package/dist/workbench/use-workbench-state.js

@@ -4,22 +4,12 @@ import { useAuiState } from "@assistant-ui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { useSidebarStore, useChatBubbleStore, useToolPanelStore, useNewConversation, useNavStore, useAppStore, } from "../index.js";
-import { History, Settings, Layers } from "lucide-react";
+import { MessagesSquare, Settings, Layers } from "lucide-react";
 import { useChatWidth } from "./use-chat-width.js";
+import { findNavItem } from "../lib/nav-config.js";
 export function normalizeWorkbenchPath(path) {
     return path === "/" ? path : path.replace(/\/+$/, "");
 }
-function findExactWorkbenchItem(items, pathname) {
-    const target = normalizeWorkbenchPath(pathname);
-    for (const item of items) {
-        if (normalizeWorkbenchPath(item.to) === target)
-            return item;
-        const nested = item.children && findExactWorkbenchItem(item.children, pathname);
-        if (nested)
-            return nested;
-    }
-    return undefined;
-}
 function useWorkbenchNavigation() {
     const navGroups = useNavStore((s) => s.config);
     const workspaceGroups = useMemo(() => {
@@ -33,9 +23,12 @@ function useWorkbenchNavigation() {
             const space = workspaceGroups[0];
             const root = space.items.find((item) => item.to === space.focusOn) ?? space.items[0];
             return [
+                ...navGroups
+                    .filter((group) => group.meta?.showInWorkspaceNavigation)
+                    .map((group) => ({ ...group, priority: 1100 })),
                 {
                     ...space,
-                    label: "Spaces",
+                    label: "All spaces",
                     icon: Layers,
                     priority: 1000,
                     items: root
@@ -56,7 +49,7 @@ function useWorkbenchNavigation() {
             ...navGroups
                 .filter((group) => !["recent-chats", "pinned-chats"].includes(String(group.meta?.type)))
                 .map((group) => group.meta?.type === "spaces-workspaces"
-                ? { ...group, label: "Spaces", icon: Layers }
+                ? { ...group, label: "All spaces", icon: Layers, createActions: undefined }
                 : group.label === "Admin"
                     ? { ...group, icon: Settings }
                     : group.label === "Activity"
@@ -72,9 +65,13 @@ export function useWorkbenchState(chatRoute) {
     const chatOnly = chatRoute && !panelOpen;
     const location = useLocation();
     const { navGroups, workspaceGroups, staticNavigationGroups } = useWorkbenchNavigation();
-    const routeItem = useMemo(() => navGroups
-        .map((group) => findExactWorkbenchItem(group.items, location.pathname))
-        .find((item) => item !== undefined), [location.pathname, navGroups]);
+    const routeItem = useMemo(() => {
+        const item = findNavItem(navGroups, location.pathname + location.search)?.item;
+        return item &&
+            normalizeWorkbenchPath(item.to.split("?")[0]) === normalizeWorkbenchPath(location.pathname)
+            ? item
+            : undefined;
+    }, [location.pathname, location.search, navGroups]);
     const pageLabel = useAppStore((s) => s.navContext.label);
     const entityId = routeItem?.meta?.spacesEntityId;
     const chatWidth = useChatWidth();
@@ -108,7 +105,7 @@ export function useWorkbenchState(chatRoute) {
     const openHistory = () => {
         setHistoryOpen(true);
     };
-    const historyShortcut = (_jsxs(Button, { variant: "ghost", size: "sm", onClick: openHistory, className: "h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(History, { className: "size-4", "aria-hidden": true }), "Conversation history"] }));
+    const historyShortcut = (_jsxs(Button, { variant: "ghost", size: "sm", onClick: openHistory, 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 }), "Conversation history"] }));
     const toggleNavigation = useSidebarStore((s) => s.toggleMobile);
     useEffect(() => {
         if (panelOpen) {

package/dist/workbench/welcome-intro.js

@@ -4,7 +4,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { ChatHomeStartersSlot } from "../components/chat-slots.js";
 import { Layers } from "lucide-react";
 export function WelcomeIntro({ navGroups, historyShortcut, }) {
-    return (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "What would you like to get done?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Find information, create or edit content, and run actions across your spaces." }), _jsx("div", { className: "mx-auto mt-4 max-w-sm text-left", children: _jsx(ChatHomeStartersSlot, { priority: 10 }) }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: [historyShortcut, navGroups.some((group) => group.meta?.type === "spaces-workspaces" && group.createActions?.length) && (_jsx("div", { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-2 px-3 text-xs font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(Layers, { className: "size-3.5", "aria-hidden": "true" }), "Create a space"] }) }), _jsx(DropdownMenuContent, { align: "center", children: navGroups
+    return (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "What would you like to get done?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Find information, create or edit content, and run actions across your spaces." }), _jsx("div", { className: "mx-auto mt-4 max-w-sm text-left", children: _jsx(ChatHomeStartersSlot, { priority: 10 }) }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: [historyShortcut, navGroups.some((group) => group.meta?.type === "spaces-workspaces" && group.createActions?.length) && (_jsx("div", { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-9 gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(Layers, { className: "size-4", "aria-hidden": "true" }), "Create a space"] }) }), _jsx(DropdownMenuContent, { align: "center", children: navGroups
                                         .filter((group) => group.meta?.type === "spaces-workspaces")
                                         .flatMap((group) => group.createActions ?? [])
                                         .map((action) => (_jsx(DropdownMenuItem, { onSelect: () => action.handler(), children: action.label }, action.id))) })] }) }))] })] }));

package/dist/workbench/workbench-styles.js

@@ -101,7 +101,6 @@ export function WorkbenchStyles() {
         }
         .workbench-preview {
           --workbench-header-height: 60px;
-          --sidebar: color-mix(in srgb, var(--background) 98.5%, var(--foreground) 1.5%);
           background: var(--sidebar);
           --workbench-outline: color-mix(in srgb, var(--sidebar-ring) 28%, transparent);
           padding: 8px 8px 8px 0;
@@ -255,15 +254,14 @@ export function WorkbenchStyles() {
           min-height: 32px;
           gap: 8px;
         }
-        [data-workspace-navigation] [data-nav-group-label="Spaces"] > :first-child,
         .workbench-preview [data-sidebar-surface] nav > [data-nav-group-label]:first-child > div:has(> [data-nav-group-header]) {
           padding-top: 0;
         }
-        [data-workspace-navigation] [data-nav-group-label="Spaces"] [data-nav-depth="0"] > button {
-          font-size: 15px;
+        [data-workspace-navigation] [data-nav-group-label="All spaces"] [data-nav-depth="0"] > button {
+          font-size: 14px;
           font-weight: 600;
-          letter-spacing: -0.015em;
-          line-height: 22px;
+          letter-spacing: normal;
+          line-height: 20px;
         }
         [data-workspace-navigation] [data-nav-group-label="Recent chats"] > :first-child {
           padding-top: 10px;
@@ -271,6 +269,38 @@ export function WorkbenchStyles() {
         [data-workspace-navigation] [data-nav-group-label="Content"] {
           margin-top: 0;
         }
+        .workbench-preview [data-nav-group-label="All spaces"] > div:has(> [data-nav-group-header]) {
+          padding-top: 8px;
+        }
+        .workbench-preview [data-nav-group-label="All spaces"] [data-nav-group-header] {
+          height: 32px;
+          min-height: 32px;
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+        .workbench-preview [data-nav-group-label="All spaces"] [data-nav-group-items] {
+          animation: none;
+        }
+        /* The first utility row shares the heading line in both scopes. */
+        .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) nav:has(> [data-nav-group-label="Activity"]:first-child) {
+          padding-top: 8px;
+        }
+        .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-group-label="Activity"] [data-nav-depth="0"] {
+          padding-left: 12px;
+        }
+        .workbench-preview [data-nav-group-label="Activity"] [data-nav-twisty-cell]:not(:has([data-nav-twisty])) {
+          display: none;
+        }
+        .workbench-preview[data-workspace-navigation]:not(:has([data-page-title-row])) [data-chat-empty-state] {
+          padding-top: 28px;
+        }
+        .workbench-preview[data-workspace-navigation] [data-preview-entity-header] > [data-entity-header-row] {
+          padding-top: 24px;
+          min-height: 76px;
+        }
+        .workbench-preview[data-workspace-navigation] [data-entity-header-identity]:not(:has([aria-label="Page location"])) {
+          padding-top: 18px;
+        }
 
         [data-workspace-navigation] [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-group-label="Content"] button[data-nav-depth],
         [data-workspace-navigation] [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-group-label="Content"] div[data-nav-depth] > button:not([data-nav-twisty]) {
@@ -280,6 +310,24 @@ export function WorkbenchStyles() {
           left: calc(12px + var(--nav-depth, 0) * 16px);
         }
 
+        @media (pointer: fine) {
+          .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-depth] {
+            height: 32px;
+            min-height: 32px;
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+          .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) div[data-nav-depth] > button:not([data-nav-twisty]) {
+            height: 30px;
+            min-height: 30px;
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+          .workbench-preview:not([data-workspace-navigation]) [data-sidebar-surface]:not([data-sidebar-collapsed]) div[data-nav-depth="0"] > button:not([data-nav-twisty]) {
+            min-height: 30px;
+          }
+        }
+
         @media (pointer: coarse) {
           .workbench-preview [data-conversation-row],
           .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-depth] {

package/dist/workbench/workbench.js

@@ -39,5 +39,5 @@ export function WorkbenchPreview({ page, chatOnly: chatRoute = false, }) {
                                 }, children: [_jsx(WorkbenchChatHeader, { collapsed: collapsed, running: running, chatWidth: chatWidth, buttonClass: buttonClass, toggleNavigation: toggleNavigation, setCollapsed: setCollapsed, showHistory: showHistory, startChat: startChat, returnToChat: returnToChat, openHistory: openHistory, chatOnly: chatOnly, setContentCollapsed: setContentCollapsed }), !collapsed && showHistory && (_jsx(ConversationHistory, { groups: navGroups, workspaceId: workspaceId, onClose: returnToChat, showBack: true })), !chatWidth.compact && !collapsed && !contentCollapsed && (_jsx(ChatResizeHandle, { chatWidth: chatWidth })), _jsx("div", { className: "min-h-0 flex-1 flex-col", style: {
                                             display: collapsed || showHistory ? "none" : "flex",
                                             paddingBottom: spaciousChat && emptyChat && !historyOpen ? "clamp(32px, 10vh, 96px)" : undefined,
-                                        }, children: _jsx(ChatContent, { centerComposer: spaciousChat && emptyChat && !historyOpen, composerIntro: spaciousChat && emptyChat ? (_jsx(WelcomeIntro, { navGroups: navGroups, historyShortcut: emptyChatFooter })) : undefined, compactComposer: !spaciousChat, hideCurrentPageBadge: true, showPinButton: false, starterSuggestions: [], emptyState: _jsx(ChatEmptyState, { pageLabel: pageLabel, showHomeStarters: !spaciousChat, children: emptyChatFooter }) }) })] }), _jsx(WorkbenchContentPane, { contentHidden: contentHidden, panelOpen: panelOpen, chatWidth: chatWidth, contentCollapsed: contentCollapsed, collapsed: collapsed, buttonClass: buttonClass, setCollapsed: setCollapsed, setContentCollapsed: setContentCollapsed, closePanel: closePanel, page: page }), contentCollapsed && !chatOnly && !chatWidth.compact && (_jsx("aside", { "aria-label": "Collapsed content", className: "flex w-11 shrink-0 flex-col items-center", style: { width: 44 }, children: _jsx("div", { className: "flex h-full w-full flex-col items-center", "data-chat-rail": true, children: _jsx("div", { className: "flex items-center justify-center", style: { height: 60 }, children: _jsx(TooltipIconButton, { tooltip: "Expand content", className: buttonClass, "aria-label": "Expand content", onClick: () => setContentCollapsed(false), children: _jsx(FileText, { size: 18 }) }) }) }) }))] })] })] }));
+                                        }, children: _jsx(ChatContent, { centerComposer: spaciousChat && emptyChat && !historyOpen, composerIntro: spaciousChat && emptyChat ? (_jsx(WelcomeIntro, { navGroups: navGroups, historyShortcut: emptyChatFooter })) : undefined, compactComposer: !spaciousChat, starterSuggestions: [], emptyState: _jsx(ChatEmptyState, { pageLabel: pageLabel, showHomeStarters: !spaciousChat, children: emptyChatFooter }) }) })] }), _jsx(WorkbenchContentPane, { contentHidden: contentHidden, panelOpen: panelOpen, chatWidth: chatWidth, contentCollapsed: contentCollapsed, collapsed: collapsed, buttonClass: buttonClass, setCollapsed: setCollapsed, setContentCollapsed: setContentCollapsed, closePanel: closePanel, page: page }), contentCollapsed && !chatOnly && !chatWidth.compact && (_jsx("aside", { "aria-label": "Collapsed content", className: "flex w-11 shrink-0 flex-col items-center", style: { width: 44 }, children: _jsx("div", { className: "flex h-full w-full flex-col items-center", "data-chat-rail": true, children: _jsx("div", { className: "flex items-center justify-center", style: { height: 60 }, children: _jsx(TooltipIconButton, { tooltip: "Expand content", className: buttonClass, "aria-label": "Expand content", onClick: () => setContentCollapsed(false), children: _jsx(FileText, { size: 18 }) }) }) }) }))] })] })] }));
 }

package/package.json

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