@iloveagents/foundry-web-ui 0.26.0 → 0.27.0

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 /**
  * Default starter prompts shown on empty state. Override per-app by passing
  * a `starterSuggestions` prop to `<ChatContent>`. An empty array (`[]`)
@@ -5,6 +6,16 @@
  */
 export declare const DEFAULT_STARTER_SUGGESTIONS: string[];
 export interface ChatContentProps {
+    centerComposer?: boolean;
+    composerIntro?: ReactNode;
+    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;
     /**
      * Starter prompts shown when the thread is empty. Defaults to
      * `DEFAULT_STARTER_SUGGESTIONS`. Pass an empty array to hide the
@@ -38,4 +49,4 @@ export declare const DEFAULT_COMPOSER_PLACEHOLDER = "Ask anything";
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export declare function ChatContent({ starterSuggestions, showPinButton, placeholder, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatContent({ centerComposer, composerIntro, composerFooter, compactComposer, hiddenPageLabels, hideCurrentPageBadge, emptyState, starterSuggestions, showPinButton, placeholder, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/assistant-chat.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ComposerInput } from "./composer-input.js";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, useAui, useAuiState, useThreadViewport, } from "@assistant-ui/react";
 import { ArrowUp, Copy, Check, RefreshCw, PencilIcon, ChevronLeft, ChevronRight, ChevronDown, Square, Bot, Minimize2, PanelRightClose, PanelRightOpen, } from "lucide-react";
@@ -9,6 +10,7 @@ import { userAttachmentComponents, composerAttachmentComponents } from "./chat-a
 import { SentContextBadges, ComposerContextBadges } 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, useChatThreadSurface, useComposerActionsOwnSend, } from "./chat-slots.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
@@ -20,20 +22,21 @@ import { MessageError } from "./message-error.js";
 const BranchPicker = () => (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: "inline-flex items-center gap-1 text-xs", children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Previous", size: "icon", children: _jsx(ChevronLeft, { className: "size-4" }) }) }), _jsxs("span", { className: "text-muted-foreground", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Next", size: "icon", children: _jsx(ChevronRight, { className: "size-4" }) }) })] }));
 const UserMessage = () => {
     const messageId = useAuiState((s) => s.message.id);
-    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(MessagePrimitive.Attachments, { components: userAttachmentComponents }), _jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-foreground"), children: _jsx(MessagePrimitive.Content, {}) }), _jsxs("div", { className: "flex h-8 items-center justify-end gap-2 pr-2", children: [_jsx(MessageTimestamp, {}), _jsx(BranchPicker, {}), _jsx("div", { className: "flex h-8 w-10 items-center justify-end", children: _jsx(UserActionBar, {}) })] })] }) }));
+    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(MessagePrimitive.Attachments, { components: userAttachmentComponents }), _jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-sm leading-relaxed text-foreground"), children: _jsx(MessagePrimitive.Content, {}) }), _jsxs("div", { className: "flex h-6 items-center justify-end gap-2 pr-2", children: [_jsx(MessageTimestamp, {}), _jsx(BranchPicker, {}), _jsx("div", { className: "flex h-8 w-10 items-center justify-end", children: _jsx(ThreadPrimitive.If, { running: false, children: _jsx(UserActionBar, {}) }) })] })] }) }));
 };
 const UserActionBar = () => (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, className: "flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Edit", size: "icon", children: _jsx(PencilIcon, { className: "size-4" }) }) }) }));
 const AssistantMessage = () => {
+    const running = useAuiState((s) => s.message.status?.type === "running");
     // Until the message has parts there is nothing to copy, retry or branch.
     // `AssistantActionBar` already hides its BUTTONS while running, but the
     // row reserving their height did not — so an empty assistant message put
     // a 36px hole between the question and the "Thinking" line, which read as
     // the indicator floating far away from the message it belongs to.
     const hasParts = useAuiState((s) => (s.message.parts?.length ?? 0) > 0);
-    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsx("div", { className: "text-foreground leading-relaxed flex flex-col gap-4", children: _jsx(ChatMessageParts, {}) }), _jsx(MessageError, {}), hasParts && (_jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {}), _jsx(MessageTimestamp, {})] }))] }) }));
+    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsx("div", { className: "text-sm text-foreground leading-relaxed flex flex-col gap-3", children: _jsx(ChatMessageParts, {}) }), _jsx(MessageError, {}), hasParts && !running && (_jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {}), _jsx(MessageTimestamp, {})] }))] }) }));
 };
 const AssistantActionBar = () => (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 -ml-2 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-4" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-4 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Refresh", size: "icon", children: _jsx(RefreshCw, { className: "size-4" }) }) })] }));
-const EditComposer = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2", children: _jsx("div", { className: "flex items-start justify-end", children: _jsx("div", { className: "w-full max-w-[80%]", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-2xl border border-input", "bg-background shadow-sm", "px-4 py-3"), children: [_jsx(ComposerPrimitive.Input, { autoFocus: true, className: cn("w-full bg-transparent", "text-base text-foreground", "outline-none resize-none", "placeholder:text-muted-foreground") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", children: "Update" }) })] })] }) }) }) }));
+const EditComposer = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2", children: _jsx("div", { className: "flex items-start justify-end", children: _jsx("div", { className: "w-full max-w-[80%]", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-2xl border border-input", "bg-background shadow-sm", "px-4 py-3"), children: [_jsx(ComposerInput, { autoFocus: true, className: cn("w-full bg-transparent", "text-base sm:text-sm text-foreground", "outline-none resize-none", "placeholder:text-muted-foreground") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", children: "Update" }) })] })] }) }) }) }));
 const ComposerActionButton = () => {
     // With nothing typed, a module-supplied control (a voice button) may hold
     // the send corner instead of a Send that has nothing to send.
@@ -57,7 +60,7 @@ const ScrollToBottomButton = () => {
         return null;
     return (_jsx(Button, { variant: "outline", size: "icon", className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md", onClick: () => scrollToBottom({ behavior: "smooth" }), children: _jsx(ChevronDown, { className: "size-4" }) }));
 };
-const DropZone = ({ children }) => {
+const DropZone = ({ children, centered, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [dropError, setDropError] = useState(null);
     const dropErrorTimer = useRef(null);
@@ -113,7 +116,7 @@ const DropZone = ({ children }) => {
                 : `Couldn't attach ${rejected.length} files (${rejected.join("; ")})`);
         }
     }, [aui, showDropError]);
-    return (_jsxs("div", { className: "relative flex flex-col flex-1 overflow-hidden", onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [children, isDragging && (_jsx("div", { className: cn("absolute inset-0 z-50 flex items-center justify-center pointer-events-none", "bg-background/80 backdrop-blur-sm", "border-2 border-dashed border-primary rounded-xl"), children: _jsx("p", { className: "text-lg text-primary font-medium", children: "Drop files here" }) })), dropError && (_jsx("div", { role: "alert", className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-50 max-w-[90%]", "rounded-md border border-destructive/50 bg-background px-3 py-2", "text-sm text-destructive shadow-md pointer-events-none truncate"), children: dropError }))] }));
+    return (_jsxs("div", { className: cn("relative flex flex-col flex-1", centered ? "justify-center overflow-y-auto" : "overflow-hidden"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [children, isDragging && (_jsx("div", { className: cn("absolute inset-0 z-50 flex items-center justify-center pointer-events-none", "bg-background/80 backdrop-blur-sm", "border-2 border-dashed border-primary rounded-xl"), children: _jsx("p", { className: "text-lg text-primary font-medium", children: "Drop files here" }) })), dropError && (_jsx("div", { role: "alert", className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-50 max-w-[90%]", "rounded-md border border-destructive/50 bg-background px-3 py-2", "text-sm text-destructive shadow-md pointer-events-none truncate"), children: dropError }))] }));
 };
 /**
  * "Message Assistant..." named the machine and told the user nothing. The
@@ -125,23 +128,25 @@ export const DEFAULT_COMPOSER_PLACEHOLDER = "Ask anything";
  * Reusable chat content — used by ChatPage and ChatBubble.
  * Renders inside a ThreadPrimitive.Root context.
  */
-export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = true, placeholder = DEFAULT_COMPOSER_PLACEHOLDER, } = {}) {
+export function ChatContent({ centerComposer = false, composerIntro, composerFooter, compactComposer = false, hiddenPageLabels = [], hideCurrentPageBadge = false, emptyState, starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = true, placeholder = DEFAULT_COMPOSER_PLACEHOLDER, } = {}) {
     const ThreadSurface = useChatThreadSurface();
     const isExpanded = useChatBubbleStore((s) => s.isExpanded);
     const collapseChat = useChatBubbleStore((s) => s.collapse);
     const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);
     const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
-    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [ThreadSurface && (
+    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { centered: centerComposer, children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", style: centerComposer && !ThreadSurface ? { display: "none" } : undefined, children: [ThreadSurface && (
                             // `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: _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?" }), 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-foreground text-center mb-6", children: "How can I help you today?" }), 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,
-                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), !ThreadSurface && (_jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) }))] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn(
-                                    // 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, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 @md:flex-nowrap", children: [_jsxs("div", { className: "order-2 flex shrink-0 items-center gap-1 @md:order-1", children: [_jsx(ComposerAddMenu, { showPin: showPinButton }), _jsx(ContextPins, {})] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: placeholder, rows: 1, className: cn("order-1 w-full bg-transparent", "py-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32", "@md:order-2 @md:w-auto @md:flex-1") }), _jsx("div", { className: "order-3 ml-auto flex shrink-0 items-center gap-2 @md:ml-0", children: _jsx(ComposerActionButton, {}) })] })] }) })] })] })] }));
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), !ThreadSurface && (_jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) }))] }), _jsxs("div", { className: "shrink-0 bg-background", children: [composerIntro && _jsx("div", { className: "mx-auto max-w-3xl px-4 pt-4", children: composerIntro }), _jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { "data-chat-composer-divider": true, className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsxs("div", { className: "mx-auto max-w-3xl px-4 py-4", children: [_jsx(ChatContext, {}), _jsxs(ComposerPrimitive.Root, { style: compactComposer ? { borderRadius: 16 } : undefined, className: cn(
+                                        // 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
+                                                            ? "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

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChatContext } from "./chat-context.js";
+import { ComposerInput } from "./composer-input.js";
 import { useRef, useState } from "react";
 import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, useAuiState, useThreadViewport, } from "@assistant-ui/react";
 import { Sparkles, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, RefreshCw, } from "lucide-react";
@@ -22,7 +24,8 @@ import { useNewConversation } from "../lib/use-new-conversation.js";
 import { RAIL_WIDTH, useSidebarStore } from "../lib/sidebar-store.js";
 const CHAT_BUBBLE_INSET = 8;
 function BubbleAssistantMessage() {
-    return (_jsxs(MessagePrimitive.Root, { className: "w-full mb-2 group", children: [_jsx("div", { className: "text-foreground text-sm leading-relaxed flex flex-col gap-2", children: _jsx(ChatMessageParts, {}) }), _jsx(MessageError, { compact: true }), _jsxs("div", { className: "flex h-7 items-center gap-2 mt-1", children: [_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Retry", size: "icon", className: "size-7", children: _jsx(RefreshCw, { className: "size-3" }) }) })] }), _jsx(MessageTimestamp, {})] })] }));
+    const running = useAuiState((s) => s.message.status?.type === "running");
+    return (_jsxs(MessagePrimitive.Root, { className: "w-full mb-2 group", children: [_jsx("div", { className: "text-foreground text-sm leading-relaxed flex flex-col gap-2", children: _jsx(ChatMessageParts, {}) }), _jsx(MessageError, { compact: true }), !running && (_jsxs("div", { className: "flex h-7 items-center gap-2 mt-1", children: [_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Retry", size: "icon", className: "size-7", children: _jsx(RefreshCw, { className: "size-3" }) }) })] }), _jsx(MessageTimestamp, {})] }))] }));
 }
 function BubbleUserMessage() {
     const messageId = useAuiState((s) => s.message.id);
@@ -106,9 +109,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: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _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, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(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(ComposerPrimitive.Input, { 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" }) }) }) }))] })] }) })] })] })] }))] })] }));
+                                                                    } }), _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(
+                                                        // 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" }) }) }) }))] })] })] })] })] })] }))] })] }));
 }

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

@@ -0,0 +1,2 @@
+/** The displayed context and the agent request use the same projection. */
+export declare function ChatContext(): import("react/jsx-runtime").JSX.Element;

package/dist/components/chat-context.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ChevronDown, FileText, Maximize2, TextCursorInput } from "lucide-react";
+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";
+function readContext() {
+    return summarizeChatContext(useAppStore.getState().getAgentState());
+}
+/** The displayed context and the agent request use the same projection. */
+export function ChatContext() {
+    const [open, setOpen] = useState(false);
+    const [context, setContext] = useState(readContext);
+    useEffect(() => {
+        let frame = 0;
+        const refresh = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const next = readContext();
+                setContext((current) => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+            });
+        };
+        const unsubscribe = useAppStore.subscribe(refresh);
+        // Modules already track field/caret events. Read after those listeners,
+        // rather than keeping a competing focus state inside the chat UI.
+        const events = ["focusin", "pointerup", "input", "selectionchange"];
+        for (const event of events)
+            document.addEventListener(event, refresh);
+        const handles = "[data-focused], [data-context-ref-type='entity-field']";
+        const observer = typeof MutationObserver === "undefined"
+            ? null
+            : new MutationObserver((records) => {
+                if (records.some((record) => record.type === "attributes" ||
+                    (record.target instanceof Element && record.target.closest(handles)) ||
+                    [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element &&
+                        (node.matches(handles) || node.querySelector(handles)))))
+                    refresh();
+            });
+        observer?.observe(document.body, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: [
+                "data-focused",
+                "data-focus-title",
+                "data-focus-kind",
+                "data-context-ref-type",
+                "data-context-ref-id",
+                "data-entity-field-key",
+                "data-entity-field-label",
+                "inert",
+                "hidden",
+                "aria-hidden",
+            ],
+        });
+        refresh();
+        return () => {
+            cancelAnimationFrame(frame);
+            unsubscribe();
+            observer?.disconnect();
+            for (const event of events)
+                document.removeEventListener(event, refresh);
+        };
+    }, []);
+    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
+                            ? "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}`))) })] }))] })] }));
+}

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

@@ -14,6 +14,8 @@
  *     chat (``ChatContent``) and the floating bubble panel. It renders
  *     inside a fixed (non-scrolling) footer, so it never scrolls away
  *     with the thread.
+ *   - ``contextDetails`` — grouped capabilities beneath the current context
+ *     in the composer flyout. Call ``onDismiss`` before opening action dialogs.
  *   - ``launcherBadge`` — inside the collapsed chat-bubble launcher's
  *     wrapper (a positioned ``group`` container around the round button),
  *     so a badge can position itself absolutely over the button and use
@@ -41,6 +43,11 @@
 import type { ComponentType } from "react";
 interface ChatSlotsState {
     composerBanner: ComponentType | null;
+    /** Extra capabilities in the context flyout. Providers own section headings
+     * and can dismiss the flyout before opening a dialog or starting an action. */
+    contextDetails: ComponentType<{
+        onDismiss: () => void;
+    }> | null;
     launcherBadge: ComponentType | null;
     composerActions: ComponentType | null;
     /** Let ``composerActions`` stand in for Send while the composer is empty. */
@@ -57,6 +64,9 @@ export declare const useChatSlotsStore: import("zustand").UseBoundStore<import("
  */
 export declare function registerChatSlots(slots: Partial<ChatSlotsState>): void;
 export declare function ChatComposerBannerSlot(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatContextDetailsSlot({ onDismiss }: {
+    onDismiss: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function ChatLauncherBadgeSlot(): import("react/jsx-runtime").JSX.Element | null;
 export declare function ChatComposerActionsSlot(): import("react/jsx-runtime").JSX.Element | null;
 /**

package/dist/components/chat-slots.js

@@ -3,6 +3,7 @@ import { create } from "zustand";
 import { useAuiState } from "@assistant-ui/react";
 export const useChatSlotsStore = create(() => ({
     composerBanner: null,
+    contextDetails: null,
     launcherBadge: null,
     composerActions: null,
     composerActionsReplaceSend: false,
@@ -18,6 +19,8 @@ export function registerChatSlots(slots) {
     const next = {};
     if (slots.composerBanner !== undefined)
         next.composerBanner = slots.composerBanner;
+    if (slots.contextDetails !== undefined)
+        next.contextDetails = slots.contextDetails;
     if (slots.launcherBadge !== undefined)
         next.launcherBadge = slots.launcherBadge;
     if (slots.composerActions !== undefined)
@@ -33,6 +36,10 @@ export function ChatComposerBannerSlot() {
     const Banner = useChatSlotsStore((s) => s.composerBanner);
     return Banner ? _jsx(Banner, {}) : null;
 }
+export function ChatContextDetailsSlot({ onDismiss }) {
+    const Details = useChatSlotsStore((s) => s.contextDetails);
+    return Details ? _jsx(Details, { onDismiss: onDismiss }) : null;
+}
 export function ChatLauncherBadgeSlot() {
     const Badge = useChatSlotsStore((s) => s.launcherBadge);
     return Badge ? _jsx(Badge, {}) : null;

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

@@ -1,6 +1,7 @@
 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, Pin, PinOff, Plus } from "lucide-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";
@@ -12,5 +13,5 @@ export const ComposerAddMenu = ({ compact = false, showPin = true }) => {
                             // user sees the result of what they just clicked.
                             event.preventDefault();
                             toggle();
-                        }, children: [isPinned ? _jsx(PinOff, { className: icon }) : _jsx(Pin, { className: icon }), isPinned ? "Unpin this page" : "Pin this page"] }))] })] }));
+                        }, children: [_jsx(PinStateIcon, { pinned: isPinned, className: icon }), isPinned ? "Unpin this page" : "Pin this page"] }))] })] }));
 };

package/dist/components/composer-input.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentProps } from "react";
+import { ComposerPrimitive } from "@assistant-ui/react";
+/** Re-measure autosizing when a pane changes width, not just on window resize. */
+export declare function ComposerInput(props: ComponentProps<typeof ComposerPrimitive.Input>): import("react/jsx-runtime").JSX.Element;

package/dist/components/composer-input.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { ComposerPrimitive, useAuiState } from "@assistant-ui/react";
+/** Re-measure autosizing when a pane changes width, not just on window resize. */
+export function ComposerInput(props) {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(0);
+    const hasText = useAuiState((state) => state.composer.text.length > 0);
+    useLayoutEffect(() => {
+        const input = ref.current;
+        if (!input || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            const next = entry?.contentRect.width ?? 0;
+            // Height changes are autosize's output. Only width is an input.
+            if (next > 0)
+                setWidth(next);
+        });
+        observer.observe(input);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx(ComposerPrimitive.Input, { ...props, ref: ref, "data-composer-width": width, minRows: props.minRows ?? 1, maxRows: hasText ? props.maxRows : 1 }));
+}

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

@@ -9,7 +9,10 @@
  */
 import { type FC } from "react";
 /** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
-export declare const ComposerContextBadges: FC;
+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,4 +1,5 @@
 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.
  *
@@ -9,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - SentContextBadges: read-only badges on sent user messages
  */
 import { createElement } from "react";
-import { Pin, TextSelect, X, FileText, Link2, StickyNote } from "lucide-react";
+import { TextSelect, X, 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";
@@ -32,7 +33,7 @@ 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(Pin, { className: "size-3 text-muted-foreground" }) })), _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) })] }));
+    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. */
 const SentBadge = ({ item }) => {
@@ -40,9 +41,11 @@ const SentBadge = ({ item }) => {
     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 = () => {
+export const ComposerContextBadges = ({ hideCurrentPage = false, hiddenPageLabels = [] }) => {
     const items = useAppStore((s) => s.contextItems);
-    const ephemeral = items.filter((i) => i.persistence === "ephemeral");
+    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))) }));

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

@@ -7,6 +7,7 @@
 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) */

package/dist/components/context-bar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PinStateIcon } from "./pin-state-icon.js";
 /**
  * Context Pins — pin button with count badge and hover flyout.
  *
@@ -7,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useRef, useEffect, createElement } from "react";
 import { useNavigate } from "react-router";
-import { X, Pin, PinOff, TextSelect, FileText, Link2, StickyNote, } from "lucide-react";
+import { X, TextSelect, FileText, Link2, StickyNote } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { useAppStore } from "../lib/app-store.js";
@@ -90,7 +91,7 @@ export function usePagePin() {
         },
     };
 }
-export const ContextPins = ({ showPinButton = false, compact = false, flyoutDirection = "up", }) => {
+export const ContextPins = ({ allowPageToggle = true, showPinButton = false, compact = false, flyoutDirection = "up", }) => {
     const items = useAppStore((s) => s.contextItems);
     const removeItem = useAppStore((s) => s.removeContextItem);
     const currentPage = useAppStore((s) => s.currentPage);
@@ -122,7 +123,14 @@ export const ContextPins = ({ showPinButton = false, compact = false, flyoutDire
     };
     if (pinned.length === 0 && !showPinButton)
         return null;
-    return (_jsxs("div", { className: "relative", ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(TooltipIconButton, { tooltip: isCurrentPagePinned ? "Unpin this page" : "Pin this page", size: "icon", className: cn("shrink-0 relative", compact ? "size-7" : "size-8", isCurrentPagePinned && "text-primary"), onClick: handleTogglePin, children: [isCurrentPagePinned ? (_jsx(PinOff, { className: compact ? "size-3.5" : "size-4" })) : (_jsx(Pin, { className: compact ? "size-3.5" : "size-4" })), pinned.length > 0 && (_jsx("span", { className: cn("absolute rounded-full bg-primary font-medium text-primary-foreground flex items-center justify-center", compact
+    return (_jsxs("div", { className: "relative", ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setFlyoutOpen(false);
+        }, children: [_jsxs(TooltipIconButton, { tooltip: allowPageToggle
+                    ? isCurrentPagePinned
+                        ? "Unpin this page"
+                        : "Pin this page"
+                    : "Manage pinned context", size: "icon", className: cn("shrink-0 relative", compact ? "size-7" : "size-8", isCurrentPagePinned ? "text-foreground" : "text-muted-foreground"), "aria-pressed": allowPageToggle ? isCurrentPagePinned : undefined, "aria-expanded": !allowPageToggle ? flyoutOpen : undefined, onClick: allowPageToggle ? handleTogglePin : () => setFlyoutOpen(true), children: [_jsx(PinStateIcon, { pinned: isCurrentPagePinned, className: compact ? "size-3.5" : "size-4" }), pinned.length > 0 && (_jsx("span", { className: cn("absolute rounded-full bg-primary font-medium text-primary-foreground flex items-center justify-center", compact
                             ? "-top-0.5 -right-0.5 size-3.5 text-[9px]"
                             : "top-0 right-0 size-3.5 text-[9px]"), children: pinned.length }))] }), flyoutOpen && pinned.length > 0 && (_jsxs("div", { className: cn("absolute z-50 w-64 rounded-lg border border-border bg-background shadow-xl p-2 space-y-1", flyoutDirection === "up" ? "bottom-full mb-2 left-0" : "top-9 right-0"), children: [_jsx("div", { className: "px-1 pb-1 border-b border-border/50", children: _jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Pinned Context" }) }), pinned.map((item) => {
                         const navPath = getNavigablePath(item);

package/dist/components/data-table/data-table-frame.d.ts

@@ -1,35 +1,14 @@
-/**
- * The frame around a list: normally a plain container, in focus mode a
- * fullscreen layer (Escape leaves it). `DataTableToolbar` shows the focus
- * button whenever it renders inside a frame — users with wide lists get a
- * way out of a cramped page without the host doing anything.
- *
- * The focus layer stays where it is in the tree — only its classes change —
- * so entering and leaving focus never remounts the list (its rows, drawer,
- * selection and in-flight edits survive) and it keeps inheriting the host's
- * theme scope. It never scrolls itself: it is a fixed flex column whose
- * growing child — the table — owns the scrolling, which keeps the toolbar in
- * place while the rows move under a sticky header (see `DataTable`, which
- * reads this context).
- *
- * A `position: fixed` layer is relative to the viewport unless an ancestor
- * establishes a containing block (`transform`, `filter`, `perspective`,
- * `contain: paint`); a host that does that on a list's ancestor has to opt
- * out of focus mode.
- */
 import { type HTMLAttributes, type ReactNode } from "react";
+/** A stable portal host preserves filters, selection and drafts across focus transitions. */
 export interface DataTableFrameContextValue {
     focused: boolean;
     setFocused: (focused: boolean) => void;
 }
-/** The enclosing frame's focus state, or `null` outside a frame. */
 export declare function useDataTableFrame(): DataTableFrameContextValue | null;
 export interface DataTableFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     children: ReactNode;
-    /** Classes applied in focus mode on top of the fullscreen layer. */
     focusClassName?: string;
     defaultFocused?: boolean;
-    /** Told when focus mode turns on or off — a host with room to spare can show more. */
     onFocusChange?: (focused: boolean) => void;
 }
 export declare const DataTableFrame: import("react").ForwardRefExoticComponent<DataTableFrameProps & import("react").RefAttributes<HTMLDivElement>>;