@iloveagents/foundry-web-ui 0.29.1 → 0.31.0

package/dist/components/ag-ui-runtime-provider.d.ts

@@ -22,15 +22,17 @@ export interface AGUIChatConversationFactoryArgs {
 export type AGUIHistoryAdapterFactory = (args: AGUIChatConversationFactoryArgs) => ThreadHistoryAdapter;
 interface AGUIRuntimeProviderProps {
     children: React.ReactNode;
+    headlessChildren?: React.ReactNode;
+    active?: boolean;
+    conversationUrl?: string;
     /** Custom fetch for agent requests. Handles URL rewriting + auth in production. */
     fetchFn?: typeof fetch;
     /**
      * Optional stable thread id for the AG-UI adapter. When set, the
      * agent's POST body carries this id so server-side persistence
      * (Foundry thread, conversation row) targets the same conversation
-     * across reloads / resumes. Changing the id remounts the inner
-     * runtime — past messages from a different thread don't bleed
-     * into the new one.
+     * across reloads / resumes. Changing the id selects an independent
+     * runtime; running conversations remain mounted in the background.
      */
     threadId?: string;
     /**
@@ -58,7 +60,10 @@ interface AGUIRuntimeProviderProps {
 interface AGUIContextValue {
     adapter: AGUIAdapterSDK;
     resetThread: () => void;
+    selectRetainedThread: (threadId: string) => boolean;
 }
 export declare function useAGUIAdapter(): AGUIContextValue;
+/** Whether this runtime owns visible UI effects; standalone consumers remain active. */
+export declare function useIsForegroundChat(): boolean;
 export declare function AGUIRuntimeProvider(props: AGUIRuntimeProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ag-ui-runtime-provider.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, } from "react";
 import { AssistantRuntimeProvider, useLocalRuntime } from "@assistant-ui/react";
 import { TooltipProvider } from "../ui/tooltip.js";
 import { AGUIAdapterSDK } from "../lib/ag-ui-adapter.js";
@@ -8,6 +8,7 @@ import { useAttachmentAdapterStore } from "../lib/attachment-registry.js";
 import { useVoiceAdapterStore } from "../lib/voice-adapter-registry.js";
 import { ShowDocumentToolUI } from "./show-document-tool-ui.js";
 import { ClientToolExecutor } from "./client-tool-executor.js";
+import { useChatRuns, isChatRunActive, selectChatRun, warnBeforeChatUnload, disposeChatRuns, } from "../lib/chat-runs-store.js";
 const AGUIAdapterContext = createContext(null);
 export function useAGUIAdapter() {
     const context = useContext(AGUIAdapterContext);
@@ -16,37 +17,83 @@ export function useAGUIAdapter() {
     }
     return context;
 }
+/** Whether this runtime owns visible UI effects; standalone consumers remain active. */
+export function useIsForegroundChat() {
+    const context = useContext(AGUIAdapterContext);
+    return useChatRuns((state) => !context || state.foregroundId === null || state.foregroundId === context.adapter.threadId);
+}
+let mountedProviders = 0;
 export function AGUIRuntimeProvider(props) {
-    // Splitting render across an outer wrapper + a keyed inner is the
-    // canonical React idiom for "rebuild this stateful subtree when X
-    // changes". assistant-ui's runtime is created inside useLocalRuntime
-    // and tracks its messages internally; swapping threadId or history
-    // mid-life would leave stale state. Keying the inner subtree on
-    // threadId (+ the manual reset counter) guarantees a clean runtime
-    // per conversation, matching the ChatGPT-style "click → fresh chat
-    // backed by past messages" UX.
-    const [resetKey, setResetKey] = useState(0);
-    const resetThread = useCallback(() => setResetKey((p) => p + 1), []);
-    const innerKey = `${props.threadId ?? "fresh"}:${resetKey}`;
-    return _jsx(AGUIRuntimeInner, { ...props, resetThread: resetThread }, innerKey);
+    const deletedThreads = useChatRuns((state) => state.deletedThreads);
+    const adapterCache = useRef(new Map()).current;
+    for (const threadId of Object.keys(deletedThreads))
+        adapterCache.delete(threadId);
+    const [freshId, setFreshId] = useState(() => crypto.randomUUID());
+    const id = props.threadId ?? freshId;
+    // Hosts with stable ids advance the id through the lifecycle callback.
+    const resetThread = useCallback(() => {
+        if (!props.threadId)
+            setFreshId(crypto.randomUUID());
+    }, [props.threadId]);
+    const selectRetainedThread = (threadId) => {
+        if (props.threadId)
+            return false;
+        setFreshId(threadId);
+        return true;
+    };
+    const [sessions, setSessions] = useState(() => [{ ...props, threadId: id }]);
+    if (!sessions.some((session) => session.threadId === id)) {
+        const runs = useChatRuns.getState().runs;
+        // Keep running runtimes mounted. Limit the cache of idle conversations.
+        const idle = sessions.filter((session) => !runs[session.threadId] || !isChatRunActive(runs[session.threadId]));
+        const retained = new Set(idle.slice(-19).map((session) => session.threadId));
+        setSessions([
+            ...sessions.filter((session) => retained.has(session.threadId) ||
+                (runs[session.threadId] && isChatRunActive(runs[session.threadId]))),
+            { ...props, threadId: id },
+        ]);
+    }
+    useLayoutEffect(() => {
+        if (props.active !== false)
+            selectChatRun(id);
+    }, [id, props.active]);
+    useEffect(() => {
+        mountedProviders++;
+        window.addEventListener("beforeunload", warnBeforeChatUnload);
+        return () => {
+            mountedProviders--;
+            queueMicrotask(() => {
+                if (mountedProviders === 0) {
+                    window.removeEventListener("beforeunload", warnBeforeChatUnload);
+                    disposeChatRuns();
+                }
+            });
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: sessions
+            .filter((session) => !deletedThreads[session.threadId] || session.threadId === id)
+            .map((session) => (_jsxs(AGUIRuntimeInner, { ...session, deleted: Boolean(deletedThreads[session.threadId]), adapterCache: adapterCache, resetThread: resetThread, selectRetainedThread: selectRetainedThread, children: [session.headlessChildren, props.active !== false && session.threadId === id ? props.children : null] }, `${session.threadId}:${deletedThreads[session.threadId] ? "deleted" : "live"}`))) }));
 }
-function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapterFactory, resetThread, }) {
-    const adapter = useMemo(() => new AGUIAdapterSDK("/api/agent", 
-    // Only pass options if at least one is set, mirroring the prior
-    // single-arg semantics for the "fresh chat, no overrides" case.
-    fetchFn || threadId ? { fetchFn, threadId } : undefined), [fetchFn, threadId]);
+function AGUIRuntimeInner({ children, adapterCache, deleted, fetchFn, threadId, urlMatch, historyAdapterFactory, resetThread, selectRetainedThread, conversationUrl, }) {
+    const adapter = useMemo(() => {
+        // Evict expensive React runtimes, not the protocol session: hidden
+        // server messages and compaction state must survive a later revisit.
+        const retained = threadId ? adapterCache.get(threadId) : undefined;
+        if (retained)
+            return retained;
+        const created = new AGUIAdapterSDK("/api/agent", { fetchFn, threadId, conversationUrl });
+        if (!deleted)
+            adapterCache.set(created.threadId, created);
+        return created;
+    }, [adapterCache, fetchFn, threadId, conversationUrl, deleted]);
     // Hosts may register a custom adapter (see ``registerAttachmentAdapter``);
     // the shell's inline-base64 adapter is the default.
     const registeredAdapter = useAttachmentAdapterStore((s) => s.adapter);
     const attachmentAdapter = useMemo(() => registeredAdapter ?? new FileAttachmentAdapter(), [registeredAdapter]);
-    // Build the history adapter ONCE per inner mount, after the AG-UI
-    // adapter exists so we know its thread id. The keyed-remount in the
-    // outer wrapper ensures threadId changes trigger a fresh adapter +
-    // fresh history adapter together, so resumed chats hydrate from the
-    // right conversation and fresh chats persist under their assistant-
-    // ui-minted UUID.
-    const historyAdapter = useMemo(() => {
-        if (!historyAdapterFactory)
+    // Each retained runtime owns one history adapter, including after navigation.
+    // Changing the URL must never load persisted messages over an in-flight stream.
+    const [historyAdapter] = useState(() => {
+        if (deleted || !historyAdapterFactory)
             return undefined;
         return historyAdapterFactory({
             // ``urlMatch`` is the URL-derived resume signal (undefined for
@@ -57,11 +104,7 @@ function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapte
             urlMatch,
             aguiThreadId: adapter.threadId,
         });
-        // adapter is stable for the life of this inner mount (keyed remount
-        // covers the threadId change case), so it's OK to depend on the
-        // factory + urlMatch here.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [historyAdapterFactory, urlMatch]);
+    });
     // Voice is opt-in and host-supplied (see ``registerVoiceAdapter``).
     // Both slots stay absent unless a module registered one, so a runtime
     // without voice is byte-for-byte the runtime that existed before:
@@ -81,5 +124,5 @@ function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapte
             ...(speechAdapter ? { speech: speechAdapter } : {}),
         },
     });
-    return (_jsx(AGUIAdapterContext.Provider, { value: { adapter, resetThread }, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsxs(TooltipProvider, { children: [_jsx(ShowDocumentToolUI, {}), _jsx(ClientToolExecutor, {}), children] }) }) }));
+    return (_jsx(AGUIAdapterContext.Provider, { value: { adapter, resetThread, selectRetainedThread }, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsxs(TooltipProvider, { children: [children && _jsx(ShowDocumentToolUI, {}), children && _jsx(ClientToolExecutor, {}), children] }) }) }));
 }

package/dist/components/assistant-chat.d.ts

@@ -11,9 +11,6 @@ export interface ChatContentProps {
     composerFooter?: ReactNode;
     /** Compact two-row composer with an auto-growing input. */
     compactComposer?: boolean;
-    hiddenPageLabels?: string[];
-    /** Hide the already-visible navigation page badge, without removing context. */
-    hideCurrentPageBadge?: boolean;
     /** Optional empty conversation presentation; leaves the composer and runtime unchanged. */
     emptyState?: ReactNode;
     /**
@@ -23,17 +20,6 @@ export interface ChatContentProps {
      * workspace-aware list derived from app context.
      */
     starterSuggestions?: string[];
-    /**
-     * Show the page pin button in the composer.
-     *
-     * Defaults to TRUE. It defaulted to false, and nothing in the shell ever
-     * passed it, so the affordance shipped switched off everywhere: on a
-     * document or a view there was no way to put the thing you were looking
-     * at into the conversation. Pinning the current page is the core gesture
-     * of a page-aware chat, not an opt-in extra — an app that genuinely wants
-     * a bare composer opts OUT.
-     */
-    showPinButton?: boolean;
     /**
      * Composer placeholder. Defaults to `DEFAULT_COMPOSER_PLACEHOLDER`.
      */
@@ -49,4 +35,4 @@ export declare const DEFAULT_COMPOSER_PLACEHOLDER = "Do anything";
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export declare function ChatContent({ centerComposer, composerIntro, composerFooter, compactComposer, hiddenPageLabels, hideCurrentPageBadge, emptyState, starterSuggestions, showPinButton, placeholder, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatContent({ centerComposer, composerIntro, composerFooter, compactComposer, emptyState, starterSuggestions, placeholder, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/assistant-chat.js

@@ -7,9 +7,8 @@ import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { userAttachmentComponents, composerAttachmentComponents } from "./chat-attachments.js";
-import { SentContextBadges, ComposerContextBadges } from "./context-badges.js";
+import { SentContextBadges } from "./context-badges.js";
 import { ComposerAddMenu } from "./composer-add-menu.js";
-import { ContextPins } from "./context-bar.js";
 import { ChatContext } from "./chat-context.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { ChatComposerActionsSlot, ChatComposerBannerSlot, ChatHomeStartersSlot, useChatThreadSurface, useComposerActionsOwnSend, } from "./chat-slots.js";
@@ -128,7 +127,7 @@ export const DEFAULT_COMPOSER_PLACEHOLDER = "Do anything";
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export function ChatContent({ centerComposer = false, composerIntro, composerFooter, compactComposer = false, hiddenPageLabels = [], hideCurrentPageBadge = false, emptyState, starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = true, placeholder = DEFAULT_COMPOSER_PLACEHOLDER, } = {}) {
+export function ChatContent({ centerComposer = false, composerIntro, composerFooter, compactComposer = false, emptyState, starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, placeholder = DEFAULT_COMPOSER_PLACEHOLDER, } = {}) {
     const ThreadSurface = useChatThreadSurface();
     const isExpanded = useChatBubbleStore((s) => s.isExpanded);
     const collapseChat = useChatBubbleStore((s) => s.collapse);
@@ -138,7 +137,7 @@ export function ChatContent({ centerComposer = false, composerIntro, composerFoo
                             // `overflow-hidden`, not scroll: a surface owns its own layout,
                             // and a full-bleed one (an avatar cropped to the frame) must be
                             // able to reach the edges rather than sit in a scroll box.
-                            _jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto bg-background", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: emptyState ?? (_jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), _jsx(ChatHomeStartersSlot, {}), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] })) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                            _jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto bg-background", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: emptyState ?? (_jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-heading text-center mb-6", children: "How can I help you today?" }), _jsx(ChatHomeStartersSlot, {}), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] })) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,
@@ -146,7 +145,7 @@ export function ChatContent({ centerComposer = false, composerIntro, composerFoo
                                         // Query container for the controls inside, so they size
                                         // against the composer rather than the viewport. This one
                                         // is wide, so the effort picker keeps its full label.
-                                        "@container", "flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, { hideCurrentPage: hideCurrentPageBadge, hiddenPageLabels: hiddenPageLabels }), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsxs("div", { className: cn("flex items-center gap-2", compactComposer ? "flex-wrap" : "flex-wrap @md:flex-nowrap"), children: [_jsxs("div", { className: cn("flex shrink-0 items-center gap-1", compactComposer ? "order-2" : "order-2 @md:order-1"), children: [_jsx(ComposerAddMenu, { showPin: showPinButton }), _jsx(ContextPins, { allowPageToggle: showPinButton })] }), _jsx(ComposerInput, { autoFocus: true, placeholder: placeholder, rows: 1, className: cn("bg-transparent", compactComposer
+                                        "@container", "flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsxs("div", { className: cn("flex items-center gap-2", compactComposer ? "flex-wrap" : "flex-wrap @md:flex-nowrap"), children: [_jsx("div", { className: cn("flex shrink-0 items-center gap-1", compactComposer ? "order-2" : "order-2 @md:order-1"), children: _jsx(ComposerAddMenu, {}) }), _jsx(ComposerInput, { autoFocus: true, placeholder: placeholder, rows: 1, className: cn("bg-transparent", compactComposer
                                                             ? "order-1 w-full"
                                                             : "order-1 w-full @md:order-2 @md:w-auto @md:flex-1", "py-2 text-base sm:text-sm leading-relaxed", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsx("div", { className: cn("order-3 ml-auto flex shrink-0 items-center gap-2", !compactComposer && "@md:ml-0"), children: _jsx(ComposerActionButton, {}) })] })] }), composerFooter] })] })] })] }));
 }

package/dist/components/chat-bubble.js

@@ -7,8 +7,7 @@ import { Sparkles, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy,
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
-import { ContextPins } from "./context-bar.js";
-import { ComposerContextBadges, SentContextBadges } from "./context-badges.js";
+import { SentContextBadges } from "./context-badges.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { ComposerAddMenu } from "./composer-add-menu.js";
 import { DEFAULT_COMPOSER_PLACEHOLDER } from "./assistant-chat.js";
@@ -109,9 +108,9 @@ export function ChatBubble() {
                             : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Sparkles, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [ThreadSurface && (_jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: "flex min-h-full flex-col items-center justify-center gap-4 p-4", children: [_jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }), _jsx(ChatHomeStartersSlot, {})] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4 pb-3", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                                         UserMessage: BubbleUserMessage,
                                                                         AssistantMessage: BubbleAssistantMessage,
-                                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: !ThreadSurface && _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsxs("div", { className: "px-3 py-3", children: [_jsx(ChatContext, {}), _jsxs(ComposerPrimitive.Root, { className: cn(
+                                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: !ThreadSurface && _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsxs("div", { className: "px-3 py-3", children: [_jsx(ChatContext, {}), _jsx(ComposerPrimitive.Root, { className: cn(
                                                         // Query container for the controls inside: the bubble is
                                                         // a narrow panel in a wide window, so they have to size
                                                         // against THIS box, not the viewport.
-                                                        "@container", "flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx(ComposerAddMenu, { compact: true }), _jsx(ContextPins, { compact: true })] }), _jsx(ComposerInput, { autoFocus: true, placeholder: DEFAULT_COMPOSER_PLACEHOLDER, rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ChatComposerActionsSlot, {}), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), !actionsOwnSend && (_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) }))] })] })] })] })] })] }))] })] }));
+                                                        "@container", "flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: _jsx(ComposerAddMenu, { compact: true }) }), _jsx(ComposerInput, { autoFocus: true, placeholder: DEFAULT_COMPOSER_PLACEHOLDER, rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, {}) }), _jsx(ChatComposerActionsSlot, {}), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), !actionsOwnSend && (_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) }))] }) })] })] })] })] }))] })] }));
 }

package/dist/components/chat-context-items.d.ts

@@ -0,0 +1,6 @@
+import { type ContextItem } from "../lib/app-store.js";
+/** All added context is managed in the With menu, regardless of its lifetime. */
+export declare function ChatContextItems({ items, onNavigate, }: {
+    items: ContextItem[];
+    onNavigate: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/chat-context-items.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, Link2, StickyNote, TextSelect, X } from "lucide-react";
+import { useNavigate } from "react-router";
+import { useAppStore } from "../lib/app-store.js";
+import { getNavigablePath } from "./context-bar.js";
+import { PinStateIcon } from "./pin-state-icon.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+const icons = { page: FileText, ref: Link2, note: StickyNote, selection: TextSelect };
+/** All added context is managed in the With menu, regardless of its lifetime. */
+export function ChatContextItems({ items, onNavigate, }) {
+    const navigate = useNavigate();
+    const remove = useAppStore((s) => s.removeContextItem);
+    const pin = useAppStore((s) => s.promoteContextItem);
+    if (!items.length)
+        return null;
+    return (_jsxs("section", { className: "border-t border-border pt-3", "aria-label": "Added context", children: [_jsx("h3", { className: "px-2 text-xs font-medium text-muted-foreground", children: "Added context" }), _jsx("ul", { className: "mt-1", children: items.map((item) => {
+                    const Icon = icons[item.type];
+                    const path = getNavigablePath(item);
+                    const pinned = item.persistence === "persistent";
+                    return (_jsxs("li", { className: "flex min-h-9 items-center gap-2 rounded-lg px-2 py-1", children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [path ? (_jsx("button", { type: "button", className: "block w-full truncate text-left text-sm hover:underline", title: item.label, onClick: () => {
+                                            navigate(path);
+                                            onNavigate();
+                                        }, children: item.label })) : (_jsx("span", { className: "block truncate text-sm", title: item.label, children: item.label })), _jsx("span", { className: "block text-xs text-muted-foreground", children: pinned ? "Pinned" : item.key ? "Follows selection" : "Next message" })] }), !pinned && (_jsx(TooltipIconButton, { tooltip: "Keep in context", "aria-label": `Pin ${item.label}`, className: "size-8 shrink-0 text-muted-foreground", onClick: () => pin(item.id), children: _jsx(PinStateIcon, { pinned: false, className: "size-3.5" }) })), _jsx(TooltipIconButton, { tooltip: "Remove from context", "aria-label": `Remove ${item.label}`, className: "size-8 shrink-0 text-muted-foreground", onClick: () => remove(item.id), children: _jsx(X, { className: "size-3.5" }) })] }, item.id));
+                }) })] }));
+}

package/dist/components/chat-context.js

@@ -5,6 +5,9 @@ import { useAppStore } from "../lib/app-store.js";
 import { summarizeChatContext } from "../lib/chat-context-summary.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
 import { ChatContextDetailsSlot } from "./chat-slots.js";
+import { ChatContextItems } from "./chat-context-items.js";
+import { usePagePin } from "./context-bar.js";
+import { PinStateIcon } from "./pin-state-icon.js";
 function readContext() {
     return summarizeChatContext(useAppStore.getState().getAgentState());
 }
@@ -12,6 +15,11 @@ function readContext() {
 export function ChatContext() {
     const [open, setOpen] = useState(false);
     const [context, setContext] = useState(readContext);
+    const items = useAppStore((s) => s.contextItems);
+    const { isPinned, toggle } = usePagePin();
+    const selection = items.find((item) => item.key && item.persistence === "ephemeral");
+    const detail = context.detail || selection?.label || "";
+    const additionalCount = items.length - (selection && detail === selection.label ? 1 : 0);
     useEffect(() => {
         let frame = 0;
         const refresh = () => {
@@ -66,7 +74,7 @@ export function ChatContext() {
         };
     }, []);
     const Icon = context.field ? TextCursorInput : context.focused ? Maximize2 : FileText;
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-chat-context": true, "aria-label": `Message context: ${context.label}${context.detail ? `, ${context.detail}` : ""}`, className: "mb-2 flex min-h-9 w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left 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: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "min-w-0 flex-1 truncate", "aria-live": "polite", children: ["With ", _jsx("span", { className: "font-medium text-foreground", children: context.label }), context.detail && (_jsxs(_Fragment, { children: [" ", _jsx("span", { "aria-hidden": true, children: "\u203A" }), " ", _jsx("span", { className: "font-medium text-foreground", children: context.detail })] }))] }), _jsx(ChevronDown, { className: "size-3.5 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", side: "top", collisionPadding: 12, "aria-label": "Context and actions", className: "w-[22rem] max-w-[calc(100vw-1.5rem)] max-h-[min(36rem,var(--radix-popover-content-available-height))] overflow-y-auto overscroll-contain space-y-3 p-3 text-sm", children: [_jsxs("div", { className: "px-2", children: [_jsx("h2", { className: "text-xs font-medium text-muted-foreground", children: "Current context" }), _jsxs("p", { className: "mt-1 break-words font-medium", children: [context.label, context.detail && ` › ${context.detail}`] })] }), _jsx("p", { className: "px-2 text-xs leading-relaxed text-muted-foreground", children: context.detail
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-chat-context": true, "aria-label": `Message context: ${context.label}${detail ? `, ${detail}` : ""}${additionalCount ? `, ${additionalCount} more` : ""}`, className: "mb-2 flex min-h-9 w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left 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: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "min-w-0 flex-1 truncate", "aria-live": "polite", children: ["With ", _jsx("span", { className: "font-medium text-foreground", children: context.label }), detail && (_jsxs(_Fragment, { children: [" ", _jsx("span", { "aria-hidden": true, children: "\u203A" }), " ", _jsx("span", { className: "font-medium text-foreground", children: detail })] }))] }), additionalCount > 0 && (_jsxs("span", { className: "shrink-0 tabular-nums", "aria-hidden": true, children: ["+", additionalCount] })), _jsx(ChevronDown, { className: "size-3.5 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", side: "top", collisionPadding: 12, "aria-label": "Context and actions", className: "w-[22rem] max-w-[calc(100vw-1.5rem)] max-h-[min(36rem,var(--radix-popover-content-available-height))] overflow-y-auto overscroll-contain space-y-3 p-3 text-sm", children: [_jsxs("div", { className: "px-2", children: [_jsx("h2", { className: "text-xs font-medium text-muted-foreground", children: "Current context" }), _jsxs("p", { className: "mt-1 break-words font-medium", children: [context.label, detail && ` › ${detail}`] })] }), _jsx("p", { className: "px-2 text-xs leading-relaxed text-muted-foreground", children: detail
                             ? "This selection stays available when you move into chat."
-                            : "The current page follows your navigation. Select text or a field to work more specifically." }), context.selectedText && (_jsx("blockquote", { className: "max-h-32 overflow-y-auto border-l-2 border-border pl-3 text-xs", children: context.selectedText })), _jsx(ChatContextDetailsSlot, { onDismiss: () => setOpen(false) }), context.references.length > 0 && (_jsxs("div", { className: "border-t border-border px-2 pt-3 text-xs", children: [_jsx("h3", { className: "font-medium", children: "Also open" }), _jsx("ul", { className: "mt-1 space-y-1 text-muted-foreground", children: context.references.map((label, index) => (_jsx("li", { className: "truncate", children: label }, `${label}-${index}`))) })] }))] })] }));
+                            : "The current page follows your navigation. Select text or a field to work more specifically." }), context.selectedText && (_jsx("blockquote", { className: "max-h-32 overflow-y-auto border-l-2 border-border pl-3 text-xs", children: context.selectedText })), !context.focused && context.label !== "Your spaces" && (_jsxs("button", { type: "button", "aria-pressed": isPinned, onClick: toggle, className: "flex min-h-9 w-full items-center gap-2 rounded-lg px-2 text-left text-sm hover:bg-muted", children: [_jsx(PinStateIcon, { pinned: isPinned, className: "size-4 shrink-0 text-muted-foreground" }), isPinned ? "Unpin this page" : "Keep this page in context"] })), _jsx(ChatContextItems, { items: items, onNavigate: () => setOpen(false) }), _jsx(ChatContextDetailsSlot, { onDismiss: () => setOpen(false) }), context.references.length > 0 && (_jsxs("div", { className: "border-t border-border px-2 pt-3 text-xs", children: [_jsx("h3", { className: "font-medium", children: "Also open" }), _jsx("ul", { className: "mt-1 space-y-1 text-muted-foreground", children: context.references.map((label, index) => (_jsx("li", { className: "truncate", children: label }, `${label}-${index}`))) })] }))] })] }));
 }

package/dist/components/chat-empty-state.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ChatHomeStartersSlot } from "./chat-slots.js";
 /** One compact conversation home for workbench, focus and embedded chat panes. */
 export function ChatEmptyState({ pageLabel, children, showHomeStarters = true, homeStarterPriority = 0, }) {
-    return (_jsxs("div", { className: "flex min-h-full flex-col justify-start gap-3 px-4 pb-8 pt-0", children: [_jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "What would you like to get done?" }), _jsx("p", { className: "max-w-sm text-sm leading-relaxed text-muted-foreground", children: pageLabel && !pageLabel.startsWith("/") ? (_jsxs(_Fragment, { children: ["Work with ", _jsx("span", { className: "font-medium text-foreground", children: pageLabel }), " or across your spaces: find information, create or edit content, and run actions."] })) : ("Find information, create or edit content, and run actions across your spaces.") }), _jsx("p", { className: "max-w-sm text-xs leading-relaxed text-muted-foreground", children: "Your conversation continues as you browse. Select text or a field to work more specifically." }), showHomeStarters && _jsx(ChatHomeStartersSlot, { priority: homeStarterPriority }), children] }));
+    return (_jsxs("div", { "data-chat-empty-state": true, className: "flex min-h-full flex-col justify-start gap-3 px-4 pb-8 pt-3", children: [_jsx("h1", { className: "text-base leading-6 font-semibold", children: "What would you like to get done?" }), _jsx("p", { className: "max-w-sm text-sm leading-relaxed text-muted-foreground", children: pageLabel && !pageLabel.startsWith("/") ? (_jsxs(_Fragment, { children: ["Work with ", _jsx("span", { className: "font-medium text-foreground", children: pageLabel }), " or across your spaces: find information, create or edit content, and run actions."] })) : ("Find information, create or edit content, and run actions across your spaces.") }), _jsx("p", { className: "max-w-sm text-xs leading-relaxed text-muted-foreground", children: "Your conversation continues as you browse. Select text or a field to work more specifically." }), showHomeStarters && _jsx(ChatHomeStartersSlot, { priority: homeStarterPriority }), children] }));
 }

package/dist/components/chat-header.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RunningChatsMenu } from "../workbench/running-chats-menu.js";
 import { Link } from "react-router";
 import { SquarePen, Menu } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
@@ -19,5 +20,5 @@ export const ChatHeader = () => {
     const handleNewConversation = useNewConversation(isExpanded ? { navigateToChat: false, preserveNavigation: true } : undefined);
     const toggleMobile = useSidebarStore((s) => s.toggleMobile);
     const isSidebarOpen = useSidebarStore((s) => s.isOpen);
-    return (_jsx("div", { className: cn("shrink-0", "bg-background border-b border-border"), children: _jsxs("div", { className: "px-4 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TooltipIconButton, { tooltip: "Open sidebar", onClick: toggleMobile, className: "md:hidden", children: _jsx(Menu, { className: "size-5" }) }), _jsx(Link, { to: "/", className: cn("flex items-center gap-2.5 hover:opacity-80 transition-opacity", isSidebarOpen && "md:hidden"), children: _jsx(AppBrand, { labelClassName: "text-sm font-semibold text-foreground" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ThemeToggle, {}), _jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-primary" }) }), _jsx(UserMenu, {})] })] }) }));
+    return (_jsx("div", { className: cn("shrink-0", "bg-background border-b border-border"), children: _jsxs("div", { className: "px-4 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TooltipIconButton, { tooltip: "Open sidebar", onClick: toggleMobile, className: "md:hidden", children: _jsx(Menu, { className: "size-5" }) }), _jsx(Link, { to: "/", className: cn("flex items-center gap-2.5 hover:opacity-80 transition-opacity", isSidebarOpen && "md:hidden"), children: _jsx(AppBrand, { labelClassName: "text-sm font-semibold text-foreground" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(RunningChatsMenu, {}), _jsx(ThemeToggle, {}), _jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-primary" }) }), _jsx(UserMenu, {})] })] }) }));
 };

package/dist/components/composer-add-menu.d.ts

@@ -1,25 +1,6 @@
-/**
- * The composer's leading "+" — one affordance for everything you can add to
- * a turn.
- *
- * It replaces a row of single-purpose icons (paperclip, pin, and whatever
- * came next). That row grows every time the product learns a new trick, and
- * each icon costs the user a guess about what it does; a labelled menu costs
- * one click and reads itself. Pinning in particular is a power feature that
- * does not deserve permanent residency next to the text field.
- *
- * Attaching still goes through `ComposerPrimitive.AddAttachment`, so the
- * file picker keeps whatever `accept` filter the registered attachment
- * adapter declares — reimplementing the picker here would drift from it.
- */
 import type { FC } from "react";
 export interface ComposerAddMenuProps {
     /** Bubble-composer sizing. */
     compact?: boolean;
-    /**
-     * Offer "Pin this page". A bare composer with no page behind it (or a host
-     * that does not use page context) opts out.
-     */
-    showPin?: boolean;
 }
 export declare const ComposerAddMenu: FC<ComposerAddMenuProps>;

package/dist/components/composer-add-menu.js

@@ -1,17 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PinStateIcon } from "./pin-state-icon.js";
 import { ComposerPrimitive } from "@assistant-ui/react";
 import { Paperclip, Plus } from "lucide-react";
 import { Button, cn } from "@iloveagents/foundry-web-primitives";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
-import { usePagePin } from "./context-bar.js";
-export const ComposerAddMenu = ({ compact = false, showPin = true }) => {
-    const { isPinned, toggle } = usePagePin();
+export const ComposerAddMenu = ({ compact = false }) => {
     const icon = compact ? "size-3.5" : "size-4";
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Add to this message", className: cn("shrink-0 rounded-full", compact ? "size-7" : "size-9"), children: _jsx(Plus, { className: compact ? "size-4" : "size-5" }) }) }), _jsxs(DropdownMenuContent, { align: "start", side: "top", className: "w-52", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsxs(DropdownMenuItem, { children: [_jsx(Paperclip, { className: icon }), "Attach file"] }) }), showPin && (_jsxs(DropdownMenuItem, { onSelect: (event) => {
-                            // Keep the menu anchored while the pin badge appears, so the
-                            // user sees the result of what they just clicked.
-                            event.preventDefault();
-                            toggle();
-                        }, children: [_jsx(PinStateIcon, { pinned: isPinned, className: icon }), isPinned ? "Unpin this page" : "Pin this page"] }))] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Add to this message", className: cn("shrink-0 rounded-full", compact ? "size-7" : "size-9"), children: _jsx(Plus, { className: compact ? "size-4" : "size-5" }) }) }), _jsx(DropdownMenuContent, { align: "start", side: "top", className: "w-52", children: _jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsxs(DropdownMenuItem, { children: [_jsx(Paperclip, { className: icon }), "Attach file"] }) }) })] }));
 };

package/dist/components/context-badges.d.ts

@@ -1,18 +1,4 @@
-/**
- * Context badge components for the composer and sent messages.
- *
- * Renders user-selected context items as violet-tinted badges,
- * visually distinct from gray file attachment badges.
- *
- * - ComposerContextBadges: editable badges in the composer (with remove button)
- * - SentContextBadges: read-only badges on sent user messages
- */
 import { type FC } from "react";
-/** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
-export declare const ComposerContextBadges: FC<{
-    hideCurrentPage?: boolean;
-    hiddenPageLabels?: string[];
-}>;
 /** Renders sent context badges on a user message (read-only). */
 export declare const SentContextBadges: FC<{
     messageId: string;

package/dist/components/context-badges.js

@@ -1,16 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PinStateIcon } from "./pin-state-icon.js";
-/**
- * Context badge components for the composer and sent messages.
- *
- * Renders user-selected context items as violet-tinted badges,
- * visually distinct from gray file attachment badges.
- *
- * - ComposerContextBadges: editable badges in the composer (with remove button)
- * - SentContextBadges: read-only badges on sent user messages
- */
 import { createElement } from "react";
-import { TextSelect, X, FileText, Link2, StickyNote } from "lucide-react";
+import { TextSelect, FileText, Link2, StickyNote } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip.js";
 import { useAppStore } from "../lib/app-store.js";
@@ -28,28 +18,11 @@ function getBadgeTooltip(item) {
     const source = item.type === "page" && item.payload.kind === "page" ? item.payload.path : item.sourcePage;
     return `${item.label}\n${source}`;
 }
-/** Editable badge in the composer with a remove button. */
-const ComposerBadge = ({ item }) => {
-    const removeItem = useAppStore((s) => s.removeContextItem);
-    const promoteItem = useAppStore((s) => s.promoteContextItem);
-    const isEphemeral = item.persistence === "ephemeral";
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn("inline-flex items-center gap-1.5 max-w-70", "rounded-lg bg-primary/5", "px-2 py-1", isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20"), children: [_jsx(ContextIcon, { type: item.type, className: "size-3 text-primary shrink-0" }), _jsx("span", { className: "text-xs text-foreground truncate", children: item.label }), isEphemeral && (_jsx("button", { type: "button", onClick: () => promoteItem(item.id), className: "p-0.5 rounded hover:bg-primary/10 shrink-0", "aria-label": "Pin context", children: _jsx(PinStateIcon, { pinned: false, className: "size-3" }) })), _jsx("button", { type: "button", onClick: () => removeItem(item.id), className: "p-0.5 rounded hover:bg-primary/10 shrink-0", "aria-label": "Remove context", children: _jsx(X, { className: "size-3" }) })] }) }), _jsx(TooltipContent, { side: "top", className: "whitespace-pre-line", children: getBadgeTooltip(item) })] }));
-};
-/** Read-only badge on a sent user message. Mirrors composer context chips. */
+/** Read-only badge on a sent user message. Records the context attached to that turn. */
 const SentBadge = ({ item }) => {
     const isEphemeral = item.persistence === "ephemeral";
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn("inline-flex items-center gap-1.5 max-w-70", "rounded-lg bg-primary/5", "px-2 py-1", isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20"), children: [_jsx(ContextIcon, { type: item.type, className: "size-3 text-primary shrink-0" }), _jsx("span", { className: "text-[11px] leading-tight text-foreground truncate", children: item.label })] }) }), _jsx(TooltipContent, { side: "top", className: "whitespace-pre-line", children: getBadgeTooltip(item) })] }));
 };
-/** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
-export const ComposerContextBadges = ({ hideCurrentPage = false, hiddenPageLabels = [] }) => {
-    const items = useAppStore((s) => s.contextItems);
-    const ephemeral = items.filter((i) => i.persistence === "ephemeral" &&
-        !(hideCurrentPage &&
-            (i.payload.kind === "page" || (i.type === "note" && hiddenPageLabels.includes(i.label)))));
-    if (ephemeral.length === 0)
-        return null;
-    return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: ephemeral.map((item) => (_jsx(ComposerBadge, { item: item }, item.id))) }));
-};
 /** Renders sent context badges on a user message (read-only). */
 export const SentContextBadges = ({ messageId }) => {
     const items = useAppStore((s) => s.sentContext[messageId]);

package/dist/components/context-bar.d.ts

@@ -1,20 +1,4 @@
-/**
- * Context Pins — pin button with count badge and hover flyout.
- *
- * Click: toggles pin/unpin current page.
- * Hover (when pins exist): shows flyout to view, navigate, and remove pins.
- */
-import { type FC } from "react";
 import { type ContextItem } from "../lib/app-store.js";
-interface ContextPinsProps {
-    allowPageToggle?: boolean;
-    /** Show the pin button to add current page */
-    showPinButton?: boolean;
-    /** Compact mode for small containers (mini chat bubble header) */
-    compact?: boolean;
-    /** Direction flyout opens: up (composer) or down (header) */
-    flyoutDirection?: "up" | "down";
-}
 /** Resolve the URL a context item navigates to when clicked.
  *
  * Two shapes the framework knows about:
@@ -39,13 +23,9 @@ interface ContextPinsProps {
  */
 export declare function getNavigablePath(item: ContextItem): string | null;
 /**
- * The "is this page pinned, and how do I flip that" logic, shared by the
- * pin badge here and the composer's add-menu. Two call sites deciding
- * independently what "pinned" means is how they end up disagreeing.
+ * Pin the current navigation context from the With menu.
  */
 export declare function usePagePin(): {
     isPinned: boolean;
     toggle: () => void;
 };
-export declare const ContextPins: FC<ContextPinsProps>;
-export {};