@iloveagents/foundry-web-ui 0.26.0 → 0.27.1

package/dist/workbench/conversation-history.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "../index.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, } from "lucide-react";
+/** 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, }) {
+    const [loadingTo, setLoadingTo] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const [all, setAll] = useState(!workspaceId);
+    useEffect(() => setAll(!workspaceId), [workspaceId]);
+    const [search, setSearch] = useState("");
+    const scoped = groups.find((g) => g.meta?.type === "recent-chats" && g.meta?.workspaceId === workspaceId);
+    const allItems = scoped?.meta?.allConversations ??
+        groups
+            .filter((g) => g.meta?.type === "recent-chats" || g.meta?.type === "pinned-chats")
+            .flatMap((g) => g.items);
+    const scopedItems = all || !workspaceId
+        ? allItems
+        : (scoped?.meta?.workspaceConversations ?? scoped?.items ?? []);
+    const items = [...new Map(scopedItems.map((item) => [item.to, item])).values()]
+        .filter((item) => item.meta?.type !== "show-all-chats")
+        .filter((item) => item.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+        .sort((a, b) => 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
+        ? [
+            { label: "Pinned", items: pinnedItems },
+            { label: "Recent chats", items: visibleItems.filter((item) => !item.meta?.pinned) },
+        ]
+        : [{ label: "", items: visibleItems }];
+    return (_jsxs("section", { "data-conversation-history": true, "aria-label": "Chat history", className: "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"] })), _jsxs("div", { className: "mb-3 mt-2 flex items-center justify-between", children: [_jsx("h2", { className: compact ? "text-xs font-medium text-muted-foreground" : "text-base font-semibold", children: "Conversation history" }), compact && (_jsx("button", { onClick: onViewAll, className: "text-xs text-muted-foreground hover:text-foreground", children: "View all" }))] }), Boolean(workspaceId) && (_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
+                        .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) {
+                                                event.preventDefault();
+                                                return;
+                                            }
+                                            if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
+                                                return;
+                                            {
+                                                const resume = new CustomEvent("preview:resume-chat", {
+                                                    cancelable: true,
+                                                    detail: {
+                                                        to: item.to,
+                                                        complete: (error) => {
+                                                            setLoadingTo(null);
+                                                            if (error)
+                                                                setLoadError(error);
+                                                            else
+                                                                onClose();
+                                                        },
+                                                    },
+                                                });
+                                                setLoadingTo(item.to);
+                                                setLoadError(null);
+                                                if (!window.dispatchEvent(resume)) {
+                                                    event.preventDefault();
+                                                    return;
+                                                }
+                                            }
+                                            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 }), " ", _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}`
+                                                            : !all
+                                                                ? "Last in this workspace"
+                                                                : typeof item.meta?.previewSpaceName === "string" &&
+                                                                    item.meta.previewSpaceName
+                                                                    ? `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 && (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: search ? "No matching chats" : "No chats yet" }))] })] }));
+}

package/dist/workbench/navigation.d.ts

@@ -0,0 +1,6 @@
+import { type NavGroup } from "../index.js";
+export declare function WorkbenchNavigation({ groups, workspace, onNewConversation, }: {
+    groups: NavGroup[];
+    workspace: boolean;
+    onNewConversation: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/workbench/navigation.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, UserMenu, ThemeToggle } from "../index.js";
+import { SelectionBridge } from "./selection-bridge.js";
+export function WorkbenchNavigation({ groups, workspace, onNewConversation, }) {
+    return (_jsx(SelectionBridge, { children: _jsx(Sidebar, { groups: groups, collapsedGroupsOnly: true, hideNewConversation: true, newConversationLabel: "New chat", hideFooterActions: workspace, onNewConversation: onNewConversation, footer: _jsx("footer", { className: "shrink-0 border-t border-sidebar-border bg-sidebar px-2 py-2", "aria-label": "Account and appearance", children: _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-1", children: [_jsx(UserMenu, {}), _jsx(ThemeToggle, {})] }) }), collapsedFooter: _jsxs("footer", { className: "preview-account-compact flex shrink-0 flex-col items-center border-t border-sidebar-border py-2", "aria-label": "Account and appearance", children: [_jsx(ThemeToggle, {}), _jsx(UserMenu, {})] }) }) }));
+}

package/dist/workbench/selection-bridge.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+/** One continuous contour connects the selected row to the chat boundary. */
+export declare function SelectionBridge({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/workbench/selection-bridge.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+/** One continuous contour connects the selected row to the chat boundary. */
+export function SelectionBridge({ children }) {
+    const root = useRef(null);
+    const [anchor, setAnchor] = useState(null);
+    useEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        let frame = 0;
+        const measure = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const bounds = node.getBoundingClientRect();
+                const row = node.querySelector('[data-sidebar-surface="desktop"] [data-active-nav-row="true"]');
+                const rect = row?.getBoundingClientRect();
+                const scroll = row?.closest("nav")?.getBoundingClientRect();
+                const visible = rect &&
+                    bounds.width > 80 &&
+                    rect.height > 0 &&
+                    (!scroll || (rect.top >= scroll.top && rect.bottom <= scroll.bottom));
+                setAnchor(visible
+                    ? {
+                        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,
+                    }
+                    : null);
+            });
+        };
+        const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        const mutation = typeof MutationObserver === "undefined" ? null : new MutationObserver(measure);
+        resize?.observe(node);
+        if (node.nextElementSibling)
+            resize?.observe(node.nextElementSibling);
+        if (node.parentElement)
+            resize?.observe(node.parentElement);
+        mutation?.observe(node, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["class", "style", "data-active-nav-row"],
+        });
+        node.addEventListener("scroll", measure, true);
+        measure();
+        return () => {
+            cancelAnimationFrame(frame);
+            resize?.disconnect();
+            mutation?.disconnect();
+            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: `
+      [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"] {
+        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
+          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` })] }))] }));
+}

package/dist/workbench/use-chat-width.d.ts

@@ -0,0 +1,14 @@
+export declare function chatWidthLimits(available: number): {
+    min: number;
+    max: number;
+    defaultWidth: number;
+};
+export declare function useChatWidth(): {
+    min: number;
+    max: number;
+    defaultWidth: number;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    width: number;
+    setWidth: (value: number | null) => void;
+    compact: boolean;
+};

package/dist/workbench/use-chat-width.js

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+const WIDTH_KEY = "foundry.workbench-preview.chat-width";
+const MIN_WIDTH = 360;
+const CONTENT_MIN = 440;
+export function chatWidthLimits(available) {
+    const max = Math.max(MIN_WIDTH, Math.min(640, available - CONTENT_MIN));
+    return {
+        min: MIN_WIDTH,
+        max,
+        defaultWidth: Math.min(max, Math.max(MIN_WIDTH, Math.min(420, Math.round(available * 0.36)))),
+    };
+}
+export function useChatWidth() {
+    const containerRef = useRef(null);
+    const [available, setAvailable] = useState(1000);
+    const [preferred, setPreferred] = useState(() => {
+        try {
+            const stored = Number(localStorage.getItem(WIDTH_KEY));
+            return Number.isFinite(stored) && stored >= MIN_WIDTH ? Math.min(stored, 640) : null;
+        }
+        catch {
+            return null;
+        }
+    });
+    useEffect(() => {
+        const node = containerRef.current;
+        if (!node)
+            return;
+        const measure = () => {
+            if (node.clientWidth > 0)
+                setAvailable(node.clientWidth);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    const limits = chatWidthLimits(available);
+    const width = Math.min(limits.max, Math.max(limits.min, preferred ?? limits.defaultWidth));
+    const setWidth = (value) => {
+        const next = value === null ? null : Math.max(limits.min, Math.min(limits.max, value));
+        setPreferred(next);
+        try {
+            if (next === null)
+                localStorage.removeItem(WIDTH_KEY);
+            else
+                localStorage.setItem(WIDTH_KEY, String(next));
+        }
+        catch {
+            /* Storage may be disabled. */
+        }
+    };
+    return { containerRef, width, setWidth, compact: available < MIN_WIDTH + CONTENT_MIN, ...limits };
+}

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

@@ -0,0 +1,50 @@
+export declare function useWorkbenchState(chatRoute: boolean): {
+    panelOpen: boolean;
+    chatOnly: boolean;
+    pageLabel: string;
+    chatWidth: {
+        min: number;
+        max: number;
+        defaultWidth: number;
+        containerRef: import("react").RefObject<HTMLDivElement | null>;
+        width: number;
+        setWidth: (value: number | null) => void;
+        compact: boolean;
+    };
+    collapsed: boolean;
+    setCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    compactPane: "content" | "chat";
+    setCompactPane: import("react").Dispatch<import("react").SetStateAction<"content" | "chat">>;
+    contentCollapsed: boolean;
+    setContentCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    contentHidden: boolean;
+    historyOpen: boolean;
+    emptyChat: boolean;
+    showHistory: boolean;
+    spaciousChat: boolean;
+    returnToChat: () => void;
+    openHistory: () => void;
+    historyShortcut: import("react/jsx-runtime").JSX.Element;
+    toggleNavigation: () => void;
+    navGroups: import("../index.js").NavGroup[];
+    workspaceGroups: import("../index.js").NavGroup[] | undefined;
+    staticNavigationGroups: {
+        collapsible: boolean;
+        label: string;
+        tree?: boolean;
+        icon?: import("lucide-react").LucideIcon;
+        items: import("../index.js").NavItem[];
+        priority?: number;
+        defaultCollapsed?: boolean;
+        to?: string;
+        hideLabel?: boolean;
+        focusOn?: string;
+        description?: string;
+        meta?: Record<string, unknown>;
+        contextInstructions?: string;
+        createActions?: import("../index.js").NavGroupCreateAction[];
+        collapsedRail?: (ctx: import("../index.js").CollapsedRailContext) => import("../index.js").CollapsedRailItem[];
+    }[];
+    closePanel: () => void;
+    startChat: () => void;
+};

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

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocation } from "react-router";
+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 { useChatWidth } from "./use-chat-width.js";
+function useWorkbenchNavigation() {
+    const navGroups = useNavStore((s) => s.config);
+    const workspaceGroups = useMemo(() => {
+        const workspace = navGroups.find((group) => group.meta?.type === "spaces-workspaces" && group.meta?.exclusiveRootId);
+        if (!workspace)
+            return undefined;
+        return [workspace];
+    }, [navGroups]);
+    const navigationGroups = useMemo(() => {
+        if (workspaceGroups) {
+            const space = workspaceGroups[0];
+            const root = space.items.find((item) => item.to === space.focusOn) ?? space.items[0];
+            return [
+                {
+                    ...space,
+                    label: "Spaces",
+                    icon: Layers,
+                    priority: 1000,
+                    items: root
+                        ? [{ ...root, children: root.childrenHidden ? root.children : undefined }]
+                        : space.items,
+                },
+                {
+                    label: "Content",
+                    tree: true,
+                    hideLabel: true,
+                    priority: 800,
+                    items: root?.childrenHidden ? [] : (root?.children ?? []),
+                    meta: { hideInCollapsedRail: true },
+                },
+            ];
+        }
+        return [
+            ...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 === "Admin"
+                    ? { ...group, icon: Settings }
+                    : group.label === "Activity"
+                        ? { ...group, priority: 1100 }
+                        : group),
+        ];
+    }, [workspaceGroups, navGroups]);
+    const staticNavigationGroups = useMemo(() => navigationGroups.map((group) => ({ ...group, collapsible: false })), [navigationGroups]);
+    return { navGroups, workspaceGroups, staticNavigationGroups };
+}
+export function useWorkbenchState(chatRoute) {
+    const panelOpen = useToolPanelStore((s) => s.isOpen && !s.isWindowHosted);
+    const chatOnly = chatRoute && !panelOpen;
+    const location = useLocation();
+    const pageLabel = useAppStore((s) => s.navContext.label);
+    const chatWidth = useChatWidth();
+    const [desktopCollapsed, setCollapsed] = useState(false);
+    const collapsed = !chatWidth.compact && desktopCollapsed;
+    const [compactPane, setCompactPane] = useState(chatOnly ? "chat" : "content");
+    const [contentCollapsed, setContentCollapsed] = useState(false);
+    const contentHidden = chatOnly || (chatWidth.compact ? compactPane !== "content" : contentCollapsed);
+    useEffect(() => {
+        setContentCollapsed(chatOnly);
+        setCompactPane(chatOnly ? "chat" : "content");
+        if (chatOnly)
+            setCollapsed(false);
+        // Navigation is an explicit request to see content, including selecting
+        // the same address again. Collapsing remains local until the next entry.
+    }, [chatOnly, location.key]);
+    const [historyOpen, setHistoryOpen] = useState(false);
+    const emptyChat = useAuiState((s) => s.thread.messages.length === 0 && !s.thread.isRunning && !s.thread.isLoading);
+    const wasEmptyChat = useRef(emptyChat);
+    useEffect(() => {
+        if (wasEmptyChat.current && !emptyChat)
+            setHistoryOpen(false);
+        wasEmptyChat.current = emptyChat;
+    }, [emptyChat]);
+    const showHistory = historyOpen;
+    const spaciousChat = chatOnly || contentCollapsed;
+    const returnToChat = () => {
+        setHistoryOpen(false);
+    };
+    const openHistory = () => {
+        setHistoryOpen(true);
+    };
+    const historyShortcut = (_jsxs(Button, { variant: "ghost", size: "sm", onClick: openHistory, className: "h-8 w-fit gap-2 px-3 text-xs font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(History, { className: "size-3.5", "aria-hidden": true }), "Conversation history"] }));
+    const toggleNavigation = useSidebarStore((s) => s.toggleMobile);
+    const { navGroups, workspaceGroups, staticNavigationGroups } = useWorkbenchNavigation();
+    useEffect(() => {
+        if (panelOpen) {
+            setContentCollapsed(false);
+            setCompactPane("content");
+        }
+    }, [panelOpen]);
+    const closePanel = useToolPanelStore((s) => s.closePanel);
+    const requestedChat = useChatBubbleStore((s) => s.isOpen || s.isExpanded);
+    const newConversation = useNewConversation({
+        navigateToChat: chatRoute,
+        preserveNavigation: !chatRoute,
+    });
+    const startChat = () => {
+        setHistoryOpen(false);
+        setCompactPane("chat");
+        newConversation();
+    };
+    useEffect(() => {
+        if (requestedChat) {
+            setHistoryOpen(false);
+            setCollapsed(false);
+            setCompactPane("chat");
+            useChatBubbleStore.getState().close();
+        }
+    }, [requestedChat]);
+    return {
+        panelOpen,
+        chatOnly,
+        pageLabel,
+        chatWidth,
+        collapsed,
+        setCollapsed,
+        compactPane,
+        setCompactPane,
+        contentCollapsed,
+        setContentCollapsed,
+        contentHidden,
+        historyOpen,
+        emptyChat,
+        showHistory,
+        spaciousChat,
+        returnToChat,
+        openHistory,
+        historyShortcut,
+        toggleNavigation,
+        navGroups,
+        workspaceGroups,
+        staticNavigationGroups,
+        closePanel,
+        startChat,
+    };
+}

package/dist/workbench/welcome-intro.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import { useNavStore } from "../index.js";
+export declare function WelcomeIntro({ navGroups, historyShortcut, }: {
+    navGroups: ReturnType<typeof useNavStore.getState>["config"];
+    historyShortcut: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/workbench/welcome-intro.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, } from "../index.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." }), _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
+                                        .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.d.ts

@@ -0,0 +1 @@
+export declare function WorkbenchStyles(): import("react/jsx-runtime").JSX.Element;