@iloveagents/foundry-web-ui 0.32.3 → 0.33.0

package/dist/components/ag-ui-adapter-context.d.ts

@@ -0,0 +1,16 @@
+import type { AGUIAdapterSDK } from "../lib/ag-ui-adapter.js";
+/**
+ * The AG-UI runtime a component is rendered in.
+ *
+ * Its own module, importing nothing at runtime but React, so a composer
+ * control can ask which thread it belongs to without pulling in the
+ * provider — and with it the tool UIs, adapters and theme it mounts.
+ */
+export interface AGUIContextValue {
+    adapter: AGUIAdapterSDK;
+    resetThread: () => void;
+    selectRetainedThread: (threadId: string) => boolean;
+}
+export declare const AGUIAdapterContext: import("react").Context<AGUIContextValue | null>;
+/** The thread this component is rendered for, or `null` outside a runtime. */
+export declare function useCurrentThreadId(): string | null;

package/dist/components/ag-ui-adapter-context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const AGUIAdapterContext = createContext(null);
+/** The thread this component is rendered for, or `null` outside a runtime. */
+export function useCurrentThreadId() {
+    return useContext(AGUIAdapterContext)?.adapter.threadId ?? null;
+}

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

@@ -1,5 +1,4 @@
 import type { ThreadHistoryAdapter } from "@assistant-ui/react";
-import { AGUIAdapterSDK } from "../lib/ag-ui-adapter.js";
 /**
  * Per-mount inputs the host shell passes when it wants a chat
  * conversation history wired to the runtime. Mirrors
@@ -57,12 +56,7 @@ interface AGUIRuntimeProviderProps {
      */
     historyAdapterFactory?: AGUIHistoryAdapterFactory;
 }
-interface AGUIContextValue {
-    adapter: AGUIAdapterSDK;
-    resetThread: () => void;
-    selectRetainedThread: (threadId: string) => boolean;
-}
-export declare function useAGUIAdapter(): AGUIContextValue;
+export declare function useAGUIAdapter(): import("./ag-ui-adapter-context.js").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;

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

@@ -1,15 +1,15 @@
 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 { 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";
 import { FileAttachmentAdapter } from "../lib/attachment-adapter.js";
 import { useAttachmentAdapterStore } from "../lib/attachment-registry.js";
 import { useVoiceAdapterStore } from "../lib/voice-adapter-registry.js";
+import { AGUIAdapterContext } from "./ag-ui-adapter-context.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);
     if (!context) {

package/dist/components/assistant-chat.js

@@ -115,7 +115,7 @@ const DropZone = ({ children, centered, }) => {
                 : `Couldn't attach ${rejected.length} files (${rejected.join("; ")})`);
         }
     }, [aui, showDropError]);
-    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 }))] }));
+    return (_jsxs("div", { className: cn("relative flex flex-col flex-1", centered ? "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
@@ -142,11 +142,11 @@ export function ChatContent({ centerComposer = false, composerIntro, composerFoo
                                                         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", hidden: hideComposer, children: [composerIntro && !ThreadSurface && (_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(
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), !ThreadSurface && (_jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) }))] }), _jsxs("div", { className: cn("shrink-0 bg-background", centerComposer && !ThreadSurface && "my-auto"), hidden: hideComposer, children: [composerIntro && !ThreadSurface && (_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, { centered: centerComposer && !ThreadSurface }), _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(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
+                                        "@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", centerComposer && "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] })] })] })] }));
+                                                            : "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, {}) })] })] }), !ThreadSurface && composerFooter] })] })] })] }));
 }

package/dist/components/chat-bubble.js

@@ -106,7 +106,7 @@ export function ChatBubble() {
                             height: 64,
                         } })), !isOpen && (_jsxs("div", { className: "fixed z-50 group", style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsx("button", { type: "button", onClick: openBubble, className: cn("size-10 rounded-full", "bg-primary text-primary-foreground shadow-lg", "flex items-center justify-center", "hover:bg-primary/90 transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Ask the AI", children: _jsx(Sparkles, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, "data-chat-surface": "bubble", className: cn("fixed z-50", "rounded-2xl border border-border", "bg-background shadow-2xl", "flex flex-col overflow-hidden", "w-95 h-150"), style: dragPos
                             ? { left: dragPos.x, top: dragPos.y }
-                            : { 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: {
+                            : { 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 chat" : "New chat" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New chat", 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", hidden: hideComposer, children: [_jsx(ChatComposerBannerSlot, {}), _jsxs("div", { className: "px-3 py-3", children: [_jsx(ChatContext, {}), _jsx(ComposerPrimitive.Root, { className: cn(

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

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

package/dist/components/chat-context.js

@@ -6,14 +6,16 @@ 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 { ConversationMemory, useConversationMemory } from "./conversation-memory.js";
 import { usePagePin } from "./context-bar.js";
 import { PinStateIcon } from "./pin-state-icon.js";
 function readContext() {
     return summarizeChatContext(useAppStore.getState().getAgentState());
 }
 /** The displayed context and the agent request use the same projection. */
-export function ChatContext() {
+export function ChatContext({ centered = false }) {
     const [open, setOpen] = useState(false);
+    const memory = useConversationMemory();
     const [context, setContext] = useState(readContext);
     const items = useAppStore((s) => s.contextItems);
     const { isPinned, toggle } = usePagePin();
@@ -74,7 +76,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}${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
+    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` : ""}${memory?.full ? ", conversation memory full" : memory?.nearlyFull ? ", conversation memory nearly full" : ""}`, className: `mb-2 flex min-h-9 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 ${centered ? "mx-auto w-fit max-w-full" : "w-full"}`, 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] })), memory?.nearlyFull && (_jsx("span", { "data-memory-dot": true, title: "Conversation memory nearly full", className: `size-1.5 shrink-0 rounded-full ${memory.full ? "bg-destructive" : "bg-warning"}` })), _jsx(ChevronDown, { className: "size-3.5 shrink-0" })] }) }), _jsxs(PopoverContent, { align: centered ? "center" : "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 })), !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}`))) })] }))] })] }));
+                            : "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) }), memory && _jsx(ConversationMemory, { usage: memory }), 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", { "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] }));
+    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 chat 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

@@ -20,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(RunningChatsMenu, {}), _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 chat", size: "icon", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-primary" }) }), _jsx(UserMenu, {})] })] }) }));
 };

package/dist/components/conversation-memory.d.ts

@@ -0,0 +1,25 @@
+export interface ConversationMemoryUsage {
+    used: number;
+    limit: number;
+    ratio: number;
+    nearlyFull: boolean;
+    full: boolean;
+    /**
+     * Whether the server compacts at this ceiling. Only a server that states
+     * its own fill and ceiling with each call does; a window the host merely
+     * stated says how much fits, not what happens when it is full.
+     */
+    compacts: boolean;
+}
+/**
+ * How much of this conversation's memory is in use, or `null` while unknown.
+ *
+ * Known only when a fill and its ceiling are both stated in the same units:
+ * preferably by the server with each model call's usage, else the model's
+ * input count against a window the host stated.
+ */
+export declare function useConversationMemory(): ConversationMemoryUsage | null;
+/** The "Conversation memory" section of the context card. */
+export declare function ConversationMemory({ usage }: {
+    usage: ConversationMemoryUsage;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/conversation-memory.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from "zustand";
+import { contextUsageStore } from "@iloveagents/foundry-agent";
+import { Info } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { useCurrentThreadId } from "./ag-ui-adapter-context.js";
+/** From here the chat is close to the point where older content is summarized. */
+const NEARLY_FULL = 0.9;
+/** At the ceiling: the next message compacts the chat. */
+const FULL = 0.98;
+function formatTokens(n) {
+    if (n >= 10000)
+        return `${Math.round(n / 1000)}k`;
+    if (n >= 1000)
+        return `${(n / 1000).toFixed(1)}k`;
+    return String(n);
+}
+/**
+ * How much of this conversation's memory is in use, or `null` while unknown.
+ *
+ * Known only when a fill and its ceiling are both stated in the same units:
+ * preferably by the server with each model call's usage, else the model's
+ * input count against a window the host stated.
+ */
+export function useConversationMemory() {
+    const threadId = useCurrentThreadId();
+    const windowTokens = useStore(contextUsageStore, (s) => s.windowTokens);
+    const usage = useStore(contextUsageStore, (s) => (threadId ? s.byThread[threadId] : undefined));
+    if (!usage)
+        return null;
+    // Without the server's own figure: what the model was sent plus what it
+    // answered, which is now part of the conversation too.
+    const used = usage.contextLimit
+        ? (usage.contextUsed ?? 0)
+        : usage.inputTokens + (usage.outputTokens ?? 0);
+    const limit = usage.contextLimit ?? windowTokens;
+    if (!limit)
+        return null;
+    const ratio = Math.min(used / limit, 1);
+    return {
+        used: Math.min(used, limit),
+        limit,
+        ratio,
+        nearlyFull: ratio >= NEARLY_FULL,
+        full: ratio >= FULL,
+        compacts: usage.contextLimit != null,
+    };
+}
+function explanation(usage) {
+    if (!usage.compacts)
+        return usage.full
+            ? "This chat is full: the model cannot take in more of it. Start a new chat to continue."
+            : "How much of what the model can take in this chat uses. For a fresh topic, start a new chat.";
+    if (usage.full)
+        return "This chat is full. It will be compacted with your next message: earlier parts are summarized to make room.";
+    if (usage.nearlyFull)
+        return "This chat is nearly full. When it fills, earlier parts are summarized to make room; for a fresh topic, start a new chat.";
+    return "When this fills, the chat is compacted: earlier parts are summarized to make room.";
+}
+/** The "Conversation memory" section of the context card. */
+export function ConversationMemory({ usage }) {
+    const percent = Math.round(usage.ratio * 100);
+    const about = explanation(usage);
+    return (_jsxs("section", { "aria-label": "Conversation memory", "data-conversation-memory": usage.full ? "full" : usage.nearlyFull ? "nearly-full" : "ok", className: "border-t border-border px-2 pt-3 text-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("h3", { className: "font-medium", children: "Conversation memory" }), _jsx(TooltipProvider, { delayDuration: 150, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": about, className: "inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(Info, { className: "size-3", "aria-hidden": true }) }) }), _jsx(TooltipContent, { side: "top", className: "max-w-60 leading-relaxed", children: about })] }) })] }), _jsxs("span", { className: "tabular-nums text-muted-foreground", children: [formatTokens(usage.used), " of ", formatTokens(usage.limit)] })] }), _jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "aria-label": `${percent}% of conversation memory used`, className: "mt-2 h-1.5 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: cn("h-full rounded-full transition-[width]", usage.full ? "bg-destructive" : usage.nearlyFull ? "bg-warning" : "bg-primary"), style: { width: `${percent}%` } }) })] }));
+}

package/dist/components/loading-indicator.js

@@ -31,6 +31,9 @@ export function LoadingIndicator() {
     else if (streaming.status === "streaming") {
         label = "Generating response";
     }
+    else if (streaming.status === "working" && streaming.label) {
+        label = streaming.label;
+    }
     return (
     // `px-4` keeps the label on the same left edge as the message parts
     // above it — measured, not guessed: the rows sit at x=469 and so does

package/dist/components/sidebar.js

@@ -1008,7 +1008,7 @@ function CreateActionsMenu({ group }) {
                         action.handler();
                     }, children: action.label }, action.id))) })] }));
 }
-function SidebarContent({ collapsed, groups, onNewConversation, hideFooterActions, hideNewConversation, collapsedGroupsOnly, newConversationAfterGroup, newConversationLabel = "New Thread", }) {
+function SidebarContent({ collapsed, groups, onNewConversation, hideFooterActions, hideNewConversation, collapsedGroupsOnly, newConversationAfterGroup, newConversationLabel = "New chat", }) {
     const toggle = useSidebarStore((s) => s.toggle);
     const defaultNewConversation = useNewConversation();
     const handleNewConversation = onNewConversation ?? defaultNewConversation;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { ToolPanelLayout } from "./components/tool-panel-layout.js";
 export { MarkdownText, markdownComponents } from "./components/markdown-text.js";
 export { ClientToolExecutor } from "./components/client-tool-executor.js";
 export { AGUIRuntimeProvider, useAGUIAdapter, useIsForegroundChat, } from "./components/ag-ui-runtime-provider.js";
+export { useCurrentThreadId } from "./components/ag-ui-adapter-context.js";
 export type { AGUIChatConversationFactoryArgs, AGUIHistoryAdapterFactory, } from "./components/ag-ui-runtime-provider.js";
 export { ChatContent, DEFAULT_STARTER_SUGGESTIONS, DEFAULT_COMPOSER_PLACEHOLDER, } from "./components/assistant-chat.js";
 export { ComposerAddMenu, type ComposerAddMenuProps } from "./components/composer-add-menu.js";
@@ -89,6 +90,7 @@ export { registerAttachmentAdapter, useAttachmentAdapterStore } from "./lib/atta
 export { registerVoiceAdapter, registerSpeechAdapter, useVoiceAdapterStore, } from "./lib/voice-adapter-registry.js";
 export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
 export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
+export { ConversationMemory, useConversationMemory, type ConversationMemoryUsage, } from "./components/conversation-memory.js";
 export { AuthProvider } from "./lib/auth-provider.js";
 export { createUiId } from "./lib/create-ui-id.js";
 export { useChatRuns, isChatRunActive, removeChatRun, type ChatRun, } from "./lib/chat-runs-store.js";

package/dist/index.js

@@ -6,6 +6,7 @@ export { ToolPanelLayout } from "./components/tool-panel-layout.js";
 export { MarkdownText, markdownComponents } from "./components/markdown-text.js";
 export { ClientToolExecutor } from "./components/client-tool-executor.js";
 export { AGUIRuntimeProvider, useAGUIAdapter, useIsForegroundChat, } from "./components/ag-ui-runtime-provider.js";
+export { useCurrentThreadId } from "./components/ag-ui-adapter-context.js";
 export { ChatContent, DEFAULT_STARTER_SUGGESTIONS, DEFAULT_COMPOSER_PLACEHOLDER, } from "./components/assistant-chat.js";
 export { ComposerAddMenu } from "./components/composer-add-menu.js";
 export { ChatBubble } from "./components/chat-bubble.js";
@@ -97,6 +98,7 @@ export { registerAttachmentAdapter, useAttachmentAdapterStore } from "./lib/atta
 export { registerVoiceAdapter, registerSpeechAdapter, useVoiceAdapterStore, } from "./lib/voice-adapter-registry.js";
 export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
 export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
+export { ConversationMemory, useConversationMemory, } from "./components/conversation-memory.js";
 // --- Auth ---
 // `AuthProvider` is the React MSAL bootstrap (uses `@azure/msal-react`).
 // Token store, config, fetch wrapper all live in `@iloveagents/foundry-agent/msal`.

package/dist/lib/ag-ui-adapter.js

@@ -17,7 +17,7 @@
  * @see https://www.assistant-ui.com/docs/runtimes/custom/local
  */
 import { mergeChatState } from "./merge-chat-state.js";
-import { AGUIRunner, clientToolRegistry } from "@iloveagents/foundry-agent";
+import { AGUIRunner, clientToolRegistry, contextUsageStore } from "@iloveagents/foundry-agent";
 import { tokenFetch } from "@iloveagents/foundry-agent/msal";
 import { useAppStore } from "./app-store.js";
 import { useDevStore } from "./dev-store.js";
@@ -39,7 +39,7 @@ export class AGUIAdapterSDK {
     }
     async *run({ messages, abortSignal }) {
         if (useChatRuns.getState().deletedThreads[this.threadId]) {
-            throw new Error("This conversation was deleted. Start a new chat to continue.");
+            throw new Error("This chat was deleted. Start a new chat to continue.");
         }
         const aguiMessages = convertMessagesToAGUI(messages);
         // App-level lifecycle: mark thread active, snapshot context, consume
@@ -78,7 +78,7 @@ export class AGUIAdapterSDK {
                 .filter((p) => p.type === "text")
                 .map((p) => p.text)
                 .join(" ")
-                .slice(0, 120) || "Conversation",
+                .slice(0, 120) || "Chat",
             pageLabel: useAppStore.getState().navContext.label ?? undefined,
             contextMeta: { ...useAppStore.getState().navContext.meta },
             stop: () => stopController.abort(),
@@ -175,6 +175,14 @@ export class AGUIAdapterSDK {
                     case "heartbeat":
                         // Server liveness ping — already recorded via touchSignal above.
                         break;
+                    case "usage":
+                        contextUsageStore.getState().record(this.threadId, {
+                            inputTokens: event.inputTokens,
+                            outputTokens: event.outputTokens ?? null,
+                            contextUsed: event.contextUsed ?? null,
+                            contextLimit: event.contextLimit ?? null,
+                        });
+                        break;
                     case "request-sent":
                         if (import.meta.env.DEV) {
                             useDevStore.getState().captureRequest(event.input);

package/dist/lib/agent-data.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Keep rendering machinery out of the agent state projection.
+ *
+ * Navigation metadata is written by the UI for the UI: a nav group's `meta`
+ * may carry the items a panel renders, with their icon components and click
+ * handlers. The projection built from it is `structuredClone`d on every run
+ * and sent to the agent, and a component or a function cannot be cloned —
+ * the run then fails in the browser before a request is made, with nothing
+ * in any server log.
+ *
+ * The rule: a value that would make the clone throw marks the object holding
+ * it as UI, and that object is left out whole — except the projected record
+ * itself, a container, which only loses those entries. A half-stripped nav item
+ * (a label with its icon and click handler removed) would still tell the agent
+ * something the author never meant it to hear. Everything a clone already
+ * accepted passes through unchanged, so no projection that works today
+ * changes shape.
+ */
+/** Project a record to what may safely be cloned and sent to the agent. */
+export declare function toAgentData(value: Record<string, unknown>): Record<string, unknown>;

package/dist/lib/agent-data.js

@@ -0,0 +1,127 @@
+/**
+ * Keep rendering machinery out of the agent state projection.
+ *
+ * Navigation metadata is written by the UI for the UI: a nav group's `meta`
+ * may carry the items a panel renders, with their icon components and click
+ * handlers. The projection built from it is `structuredClone`d on every run
+ * and sent to the agent, and a component or a function cannot be cloned —
+ * the run then fails in the browser before a request is made, with nothing
+ * in any server log.
+ *
+ * The rule: a value that would make the clone throw marks the object holding
+ * it as UI, and that object is left out whole — except the projected record
+ * itself, a container, which only loses those entries. A half-stripped nav item
+ * (a label with its icon and click handler removed) would still tell the agent
+ * something the author never meant it to hear. Everything a clone already
+ * accepted passes through unchanged, so no projection that works today
+ * changes shape.
+ */
+const OMIT = Symbol("omit");
+/**
+ * Built-ins `structuredClone` copies natively (typed arrays via `isView`).
+ * Not `Error`: a clone copies its `cause`, which can hold anything.
+ */
+const CLONEABLE_TAGS = new Set([
+    "[object Date]",
+    "[object RegExp]",
+    "[object ArrayBuffer]",
+    "[object Blob]",
+    "[object File]",
+    "[object FileList]",
+    "[object ImageData]",
+    "[object Boolean]",
+    "[object Number]",
+    "[object String]",
+    "[object BigInt]",
+]);
+function isUiValue(value) {
+    if (typeof value === "function" || typeof value === "symbol")
+        return true;
+    // React elements and component objects (memo / forwardRef / lazy) carry a
+    // symbol-valued `$$typeof`. Plain data may use the key too; only the
+    // symbol marks React.
+    return (typeof value === "object" &&
+        value !== null &&
+        typeof value.$$typeof === "symbol");
+}
+function project(value, depth, seen) {
+    if (isUiValue(value))
+        return OMIT;
+    if (value === null || typeof value !== "object")
+        return value;
+    // Cycles only: a depth cap would cut off deep data that clones fine today.
+    if (seen.has(value))
+        return OMIT;
+    seen.add(value);
+    try {
+        // A clone copies collections by cloning every entry, so an entry holding
+        // UI would still make it throw: walk them like any other container.
+        if (value instanceof Map) {
+            const out = new Map();
+            for (const [k, v] of value) {
+                const key = project(k, depth + 1, seen);
+                const val = project(v, depth + 1, seen);
+                if (key !== OMIT && val !== OMIT)
+                    out.set(key, val);
+            }
+            return value.size > 0 && out.size === 0 ? OMIT : out;
+        }
+        if (value instanceof Set) {
+            const out = new Set();
+            for (const v of value) {
+                const val = project(v, depth + 1, seen);
+                if (val !== OMIT)
+                    out.add(val);
+            }
+            return value.size > 0 && out.size === 0 ? OMIT : out;
+        }
+        if (!Array.isArray(value) && !isRecord(value)) {
+            // Built-ins a clone copies natively keep doing so. Anything else that
+            // is not a plain object by tag — a DOM node held by a ref, a WeakMap, a
+            // Promise — makes the clone throw. A class instance tags as a plain
+            // object, and a clone copies its own fields, so it is walked like one.
+            const tag = Object.prototype.toString.call(value);
+            if (CLONEABLE_TAGS.has(tag) || ArrayBuffer.isView(value))
+                return value;
+            if (tag !== "[object Object]")
+                return OMIT;
+        }
+        if (Array.isArray(value)) {
+            const out = value.map((item) => project(item, depth + 1, seen)).filter((v) => v !== OMIT);
+            return value.length > 0 && out.length === 0 ? OMIT : out;
+        }
+        const entries = Object.entries(value);
+        // The projected record itself is a container (a page's meta, a group's
+        // meta): its UI entries are dropped, the rest kept. Below it, an object
+        // holding a component or a handler IS a UI object, and goes whole.
+        if (depth > 0 && entries.some(([, v]) => isUiValue(v)))
+            return OMIT;
+        const out = {};
+        for (const [key, v] of entries) {
+            const projected = project(v, depth + 1, seen);
+            // defineProperty, not assignment: a "__proto__" key from JSON data is
+            // an own property, and assigning it would set the prototype instead.
+            if (projected !== OMIT) {
+                Object.defineProperty(out, key, {
+                    value: projected,
+                    enumerable: true,
+                    writable: true,
+                    configurable: true,
+                });
+            }
+        }
+        return out;
+    }
+    finally {
+        seen.delete(value);
+    }
+}
+function isRecord(value) {
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+/** Project a record to what may safely be cloned and sent to the agent. */
+export function toAgentData(value) {
+    const projected = project(value, 0, new WeakSet());
+    return projected === OMIT ? {} : projected;
+}

package/dist/lib/app-store.js

@@ -9,6 +9,7 @@ import { collectFocusContext } from "./focus-context.js";
  * - Strict AG-UI state projection sent to the agent on every request
  */
 import { create } from "zustand";
+import { toAgentData } from "./agent-data.js";
 const MAX_ITEMS = 10;
 const MAX_LABEL_LENGTH = 500;
 const MAX_CONTEXT_VALUE_LENGTH = 2000;
@@ -207,10 +208,7 @@ export const useAppStore = create((set, get) => ({
             ? item.label.slice(0, MAX_LABEL_LENGTH) + "..."
             : item.label;
         set({
-            contextItems: [
-                ...contextItems,
-                { ...item, label, id: createUiId(), createdAt: Date.now() },
-            ],
+            contextItems: [...contextItems, { ...item, label, id: createUiId(), createdAt: Date.now() }],
         });
     },
     setContextItem: (key, item) => {
@@ -277,11 +275,13 @@ export const useAppStore = create((set, get) => ({
             navigation: {
                 group: s.navContext.group,
                 groupDescription: s.navContext.groupDescription,
-                groupMeta: s.navContext.groupMeta,
+                // Nav metadata is written for the UI and may hold what a panel
+                // renders — components, handlers. Only data reaches the agent.
+                groupMeta: toAgentData(s.navContext.groupMeta),
                 page: s.currentPage,
                 label: s.navContext.label,
                 description: s.navContext.description,
-                meta: focusedSurface ? { ...s.navContext.meta, focusedSurface } : s.navContext.meta,
+                meta: toAgentData(focusedSurface ? { ...s.navContext.meta, focusedSurface } : s.navContext.meta),
                 contextInstructions: focusedSurface
                     ? [
                         s.navContext.contextInstructions,
@@ -292,7 +292,7 @@ export const useAppStore = create((set, get) => ({
                     : s.navContext.contextInstructions,
             },
             selectedItemId: s.selectedItemId,
-            content: s.content,
+            content: toAgentData(s.content),
             highlights: s.highlights,
             contextItems: s.contextItems.map(({ type, label, payload, sourcePage }) => {
                 switch (payload.kind) {
@@ -313,7 +313,7 @@ export const useAppStore = create((set, get) => ({
                             refId: payload.refId,
                             preview: payload.preview?.slice(0, 100),
                             target: compactReferenceTarget(payload.target),
-                            meta: payload.meta,
+                            meta: payload.meta ? toAgentData(payload.meta) : payload.meta,
                             targetPath: typeof payload.target?.path === "string"
                                 ? payload.target.path
                                 : typeof payload.meta?.targetPath === "string"

package/dist/lib/chat-runs-store.js

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { agentStateStore, citationStore, streamingStatusStore, } from "@iloveagents/foundry-agent";
+import { agentStateStore, citationStore, contextUsageStore, streamingStatusStore, } from "@iloveagents/foundry-agent";
 export const isChatRunActive = (run) => run.status === "running" || run.status === "waiting";
 /** Browser-session activity. Message persistence remains owned by the history adapter. */
 export const useChatRuns = create(() => ({ foregroundId: null, runs: {}, deletedThreads: {} }));
@@ -48,6 +48,7 @@ export function removeChatRun(threadId) {
         return { runs, deletedThreads: { ...state.deletedThreads, [threadId]: true } };
     });
     citationStore.getState().clear(threadId);
+    contextUsageStore.getState().forget(threadId);
     signals.delete(threadId);
     agentStates.delete(threadId);
     appProjections.delete(threadId);
@@ -164,6 +165,7 @@ export function disposeChatRuns() {
     agentStates.clear();
     appProjections.clear();
     citationStore.setState({ results: [], byThread: {}, threadId: null });
+    contextUsageStore.getState().clear();
     useChatRuns.setState({ foregroundId: null, runs: {}, deletedThreads: {} });
     streamingStatusStore.setState({
         streamingStatus: { status: "idle" },

package/dist/workbench/chat-header.js

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

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

@@ -1,12 +1,14 @@
 import type { NavGroup } from "../lib/nav-config.js";
 /** History is a view of existing navigation targets, never a second chat runtime. */
-export declare function ConversationHistory({ groups, workspaceId, onClose, showBack, welcome, compact, onViewAll, entityId, rootContext, }: {
+export declare function ConversationHistory({ groups, workspaceId, onClose, showBack, welcome, compact, home, onViewAll, entityId, rootContext, }: {
     groups: NavGroup[];
     workspaceId: unknown;
     onClose: () => void;
     showBack?: boolean;
     welcome?: boolean;
     compact?: boolean;
+    /** The global start page shows the three newest chats below the composer. */
+    home?: boolean;
     onViewAll?: () => void;
     /** Current content entity. Compact homes show only an exact match unless this is the workspace root. */
     entityId?: unknown;

package/dist/workbench/conversation-history.js

@@ -6,7 +6,7 @@ import { Link } from "react-router";
 import { ArrowLeft, MessageSquare, MoreHorizontal, Pin, Loader2, ChevronDown, Check, MessagesSquare, PauseCircle, Copy, } from "lucide-react";
 import { useChatRuns, isChatRunActive } from "../lib/chat-runs-store.js";
 /** History is a view of existing navigation targets, never a second chat runtime. */
-export function ConversationHistory({ groups, workspaceId, onClose, showBack = true, welcome = false, compact = false, onViewAll, entityId, rootContext = false, }) {
+export function ConversationHistory({ groups, workspaceId, onClose, showBack = true, welcome = false, compact = false, home = false, onViewAll, entityId, rootContext = false, }) {
     const [loadingTo, setLoadingTo] = useState(null);
     const [copiedId, setCopiedId] = useState(null);
     const [loadError, setLoadError] = useState(null);
@@ -18,6 +18,8 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
         groups
             .filter((g) => g.meta?.type === "recent-chats" || g.meta?.type === "pinned-chats")
             .flatMap((g) => g.items);
+    const savedTargets = new Set(allItems.map((item) => item.to));
+    const hasServerTimestamps = allItems.some((item) => typeof item.meta?.updatedAt === "string");
     const runs = useChatRuns((s) => s.runs);
     const runFor = (item) => Object.values(runs).find((run) => (run.conversationUrl ?? `/chat/${encodeURIComponent(run.threadId)}`) === item.to);
     const workspaceItems = all || !workspaceId
@@ -57,8 +59,26 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
             const run = runFor(item);
             return run && isChatRunActive(run) ? 1 : 0;
         };
+        if (home) {
+            // The server list can lag a just-finished run. Compare its session
+            // timestamp with server timestamps so newer chats from other tabs
+            // take priority as soon as navigation refreshes.
+            const activityAt = (item) => {
+                const updatedAt = item.meta?.updatedAt;
+                const serverAt = typeof updatedAt === "string" ? Date.parse(updatedAt) || 0 : 0;
+                const run = runFor(item);
+                const sessionAt = run && (hasServerTimestamps || !savedTargets.has(item.to))
+                    ? (run.finishedAt ?? run.startedAt)
+                    : 0;
+                return Math.max(serverAt, sessionAt);
+            };
+            return active(b) - active(a) || activityAt(b) - activityAt(a);
+        }
         return (active(b) - active(a) || Number(Boolean(b.meta?.pinned)) - Number(Boolean(a.meta?.pinned)));
     });
+    const homeRecentItems = home ? items.filter((item) => !item.meta?.pinned).slice(0, 3) : [];
+    const homePinnedItems = home ? items.filter((item) => item.meta?.pinned).slice(0, 3) : [];
+    const homeHasItems = homeRecentItems.length > 0 || homePinnedItems.length > 0;
     const visibleItems = compact ? items.slice(0, 3) : items;
     const activeItems = visibleItems.filter((item) => {
         const run = runFor(item);
@@ -66,22 +86,43 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
     });
     const idleItems = visibleItems.filter((item) => !activeItems.includes(item));
     const pinnedItems = idleItems.filter((item) => item.meta?.pinned);
-    const sections = compact
-        ? [{ label: "", items: visibleItems }]
-        : [
-            { label: "Running", items: activeItems },
-            { label: "Pinned", items: pinnedItems },
-            {
-                label: activeItems.length || pinnedItems.length ? "Recent chats" : "",
-                items: idleItems.filter((item) => !item.meta?.pinned),
-            },
-        ];
-    return (_jsxs("section", { "data-conversation-history": true, "aria-label": compact ? "Recent conversations" : "Chat history", className: compact ? "w-full" : "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col px-4 pb-4", children: [welcome && (_jsxs("div", { className: "pb-6 pt-8", children: [_jsx("h1", { className: "text-xl font-semibold", children: "How can I help?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Start something new or continue a recent chat." })] })), showBack && (_jsxs("button", { onClick: onClose, className: "mb-4 flex items-center gap-2 py-2 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { size: 14 }), " Back to chat"] })), (!compact || items.length > 0) && (_jsx("div", { className: "mb-2 mt-2 flex items-center justify-between", children: _jsx("h2", { className: compact ? "text-xs font-medium text-muted-foreground" : "text-base font-semibold", children: compact ? "Recent conversations" : "Conversation history" }) })), Boolean(workspaceId) && !compact && (_jsx("div", { className: "mb-3", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", "aria-label": "History filter", className: "w-full justify-between font-normal shadow-none", children: [_jsx("span", { className: "truncate", children: all ? "All conversations" : "Last used in this workspace" }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-[var(--radix-dropdown-menu-trigger-width)]", children: [
+    const sections = home
+        ? [
+            { label: "Recent", items: homeRecentItems },
+            { label: "Pinned", items: homePinnedItems },
+        ]
+        : compact
+            ? [{ label: "", items: visibleItems }]
+            : [
+                { label: "Running", items: activeItems },
+                { label: "Pinned", items: pinnedItems },
+                {
+                    label: activeItems.length || pinnedItems.length ? "Recent chats" : "",
+                    items: idleItems.filter((item) => !item.meta?.pinned),
+                },
+            ];
+    return (_jsxs("section", { "data-conversation-history": true, "aria-label": home ? "Home chats" : compact ? "Recent chats" : "Chat history", className: home
+            ? "w-full"
+            : compact
+                ? "w-full"
+                : "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col px-4 pb-4", children: [welcome && (_jsxs("div", { className: "pb-6 pt-8", children: [_jsx("h1", { className: "text-xl font-semibold", children: "How can I help?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Start something new or continue a recent chat." })] })), showBack && (_jsxs("button", { onClick: onClose, className: "mb-4 flex items-center gap-2 py-2 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { size: 14 }), " Back to chat"] })), (!compact || items.length > 0) && (_jsxs("div", { className: home
+                    ? "mb-2 mt-5 flex items-center justify-between px-1"
+                    : "mb-2 mt-2 flex items-center justify-between", children: [_jsx("h2", { className: compact ? "text-xs font-medium text-muted-foreground" : "text-base font-semibold", children: home ? "Your chats" : compact ? "Recent chats" : "Chat history" }), home && onViewAll && (_jsx("button", { type: "button", onClick: onViewAll, className: "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary [@media(pointer:coarse)]:min-h-11", children: "View all" }))] })), Boolean(workspaceId) && !compact && (_jsx("div", { className: "mb-3", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", "aria-label": "History filter", className: "w-full justify-between font-normal shadow-none", children: [_jsx("span", { className: "truncate", children: all ? "All chats" : "Last used in this workspace" }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-[var(--radix-dropdown-menu-trigger-width)]", children: [
                                 { value: false, label: "Last used in this workspace" },
-                                { value: true, label: "All conversations" },
-                            ].map((option) => (_jsxs(DropdownMenuItem, { role: "menuitemradio", "aria-checked": all === option.value, onSelect: () => setAll(option.value), children: [_jsx("span", { className: "flex-1", children: option.label }), all === option.value && _jsx(Check, { className: "size-4", "aria-hidden": "true" })] }, option.label))) })] }) })), !compact && (_jsx(Input, { "aria-label": "Search chats", placeholder: "Search chats", value: search, onChange: (event) => setSearch(event.target.value), className: "mb-3" })), _jsx("span", { className: "sr-only", role: "status", children: copiedId ? "Chat ID copied" : "" }), loadError && (_jsx("p", { role: "alert", className: "mb-2 text-xs text-destructive", children: loadError })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", "aria-busy": Boolean(loadingTo), children: [sections
-                        .filter((section) => section.items.length)
-                        .map((section) => (_jsxs("section", { "aria-label": section.label || "Recent chats", className: "mb-4 last:mb-0", children: [section.label && (_jsx("h3", { "data-conversation-section-label": true, className: "px-2 py-2 text-xs font-medium text-muted-foreground", children: section.label })), section.items.map((item) => item.disabled ? (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: item.label }, item.to)) : (_jsxs("div", { className: "group flex items-center rounded-lg hover:bg-muted", children: [_jsxs(Link, { to: item.to, onClick: (event) => {
+                                { value: true, label: "All chats" },
+                            ].map((option) => (_jsxs(DropdownMenuItem, { role: "menuitemradio", "aria-checked": all === option.value, onSelect: () => setAll(option.value), children: [_jsx("span", { className: "flex-1", children: option.label }), all === option.value && _jsx(Check, { className: "size-4", "aria-hidden": "true" })] }, option.label))) })] }) })), !compact && (_jsx(Input, { "aria-label": "Search chats", placeholder: "Search chats", value: search, onChange: (event) => setSearch(event.target.value), className: "mb-3" })), _jsx("span", { className: "sr-only", role: "status", children: copiedId ? "Chat ID copied" : "" }), loadError && (_jsx("p", { role: "alert", className: "mb-2 text-xs text-destructive", children: loadError })), _jsxs("div", { className: home
+                    ? "grid grid-cols-[repeat(auto-fit,minmax(min(100%,18rem),1fr))] gap-4"
+                    : "min-h-0 flex-1 overflow-y-auto", "aria-busy": Boolean(loadingTo), children: [sections
+                        .filter((section) => (home ? homeHasItems : section.items.length))
+                        .map((section) => (_jsxs("section", { "aria-label": section.label || "Recent chats", className: home
+                            ? `min-w-0 rounded-xl border border-border/70 bg-muted/10 p-3 ${section.items.length ? "" : "hidden min-[640px]:block"}`
+                            : "mb-4 last:mb-0", children: [section.label && (_jsx("h3", { "data-conversation-section-label": true, className: home
+                                    ? "px-1 pb-2 text-xs font-medium text-muted-foreground"
+                                    : "px-2 py-2 text-xs font-medium text-muted-foreground", children: section.label })), home && !section.items.length && (_jsx("p", { className: "px-1 py-3 text-xs text-muted-foreground", children: section.label === "Pinned"
+                                    ? "Pin chats to keep them close."
+                                    : "Your latest chats will appear here." })), section.items.map((item) => item.disabled ? (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: item.label }, item.to)) : (_jsxs("div", { className: home
+                                    ? "group flex items-center rounded-lg transition-colors hover:bg-muted/60"
+                                    : "group flex items-center rounded-lg hover:bg-muted", children: [_jsxs(Link, { to: item.to, onClick: (event) => {
                                             if (loadingTo) {
                                                 event.preventDefault();
                                                 return;
@@ -111,7 +152,9 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
                                             }
                                             setLoadingTo(null);
                                             onClose();
-                                        }, "data-conversation-row": true, className: "flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary", children: [loadingTo === item.to ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-label": "Opening chat" })) : runFor(item)?.status === "running" ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-primary motion-reduce:animate-none", "aria-hidden": true })) : runFor(item)?.status === "waiting" ? (_jsx(PauseCircle, { className: "size-4 shrink-0 text-primary", "aria-hidden": true })) : item.meta?.pinned ? (_jsx(Pin, { className: "size-4 shrink-0 text-muted-foreground", "aria-label": "Pinned chat" })) : (_jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), " ", runFor(item) && isChatRunActive(runFor(item)) ? (_jsx("span", { className: "block text-xs text-primary", children: runFor(item)?.status === "waiting" ? "Waiting for you" : "Running" })) : ((!compact || rootContext) && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: !all &&
+                                        }, "data-conversation-row": true, className: home
+                                            ? "flex min-w-0 flex-1 items-center gap-3 rounded-lg px-2 py-2 text-left text-sm focus-visible:outline-2 focus-visible:outline-primary"
+                                            : "flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary", children: [loadingTo === item.to ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-label": "Opening chat" })) : runFor(item)?.status === "running" ? (_jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-primary motion-reduce:animate-none", "aria-hidden": true })) : runFor(item)?.status === "waiting" ? (_jsx(PauseCircle, { className: "size-4 shrink-0 text-primary", "aria-hidden": true })) : item.meta?.pinned ? (_jsx(Pin, { className: "size-4 shrink-0 text-muted-foreground", "aria-label": "Pinned chat" })) : (_jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), " ", runFor(item) && isChatRunActive(runFor(item)) ? (_jsx("span", { className: "block text-xs text-primary", children: runFor(item)?.status === "waiting" ? "Waiting for you" : "Running" })) : ((!compact || rootContext) && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: !all &&
                                                             typeof item.meta?.previewEntityName === "string" &&
                                                             item.meta.previewEntityName
                                                             ? `Last at ${item.meta.previewEntityName}`
@@ -138,5 +181,5 @@ export function ConversationHistory({ groups, workspaceId, onClose, showBack = t
                                                                 .catch(() => setLoadError(`Could not copy. Chat ID: ${decodeURIComponent(id)}`));
                                                         }, children: [_jsx(Copy, { className: "size-4" }), "Copy chat ID"] }), Boolean(item.actions?.length) && _jsx(DropdownMenuSeparator, {}), item.actions?.map((action) => (_jsxs(Fragment, { children: [action.separator && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => {
                                                                     void action.handler();
-                                                                }, className: action.destructive ? "text-destructive" : undefined, children: [_jsx(action.icon, { className: "mr-2 size-4" }), action.label] })] }, action.label)))] })] })] }, item.to)))] }, section.label))), items.length === 0 && !compact && (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: search ? "No matching chats" : "No chats yet" }))] }), compact && onViewAll && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onViewAll, className: "mt-1 h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "Conversation history"] }))] }));
+                                                                }, className: action.destructive ? "text-destructive" : undefined, children: [_jsx(action.icon, { className: "mr-2 size-4" }), action.label] })] }, action.label)))] })] })] }, item.to)))] }, section.label))), items.length === 0 && !compact && (_jsx("p", { className: "py-3 text-sm text-muted-foreground", children: search ? "No matching chats" : "No chats yet" }))] }), compact && onViewAll && !home && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onViewAll, className: "mt-1 h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "Chat history"] }))] }));
 }

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

@@ -11,7 +11,7 @@ export function RunningChatsMenu({ onOpen } = {}) {
     const active = Object.values(runs).filter(isChatRunActive);
     if (!active.length)
         return null;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${active.length} running conversations`, className: "inline-flex items-center gap-1.5 px-2 text-xs text-primary", children: [_jsx(LoaderCircle, { className: "size-3.5 animate-spin motion-reduce:animate-none" }), _jsx("span", { children: active.length })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "max-w-80", children: [_jsx(DropdownMenuLabel, { children: "Running in this browser" }), active.map((run) => (_jsxs(DropdownMenuItem, { onSelect: () => {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${active.length} running chats`, className: "inline-flex items-center gap-1.5 px-2 text-xs text-primary", children: [_jsx(LoaderCircle, { className: "size-3.5 animate-spin motion-reduce:animate-none" }), _jsx("span", { children: active.length })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "max-w-80", children: [_jsx(DropdownMenuLabel, { children: "Running in this browser" }), active.map((run) => (_jsxs(DropdownMenuItem, { onSelect: () => {
                             if (!selectRetainedThread(run.threadId)) {
                                 navigate(run.conversationUrl ?? `/chat/${encodeURIComponent(run.threadId)}`);
                             }

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

@@ -105,7 +105,7 @@ export function useWorkbenchState(chatRoute) {
     const openHistory = () => {
         setHistoryOpen(true);
     };
-    const historyShortcut = (_jsxs(Button, { variant: "ghost", size: "sm", onClick: openHistory, className: "h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "Conversation history"] }));
+    const historyShortcut = (_jsxs(Button, { variant: "ghost", size: "sm", onClick: openHistory, className: "h-9 w-fit gap-2 px-2 text-sm font-normal text-muted-foreground [@media(pointer:coarse)]:min-h-11", children: [_jsx(MessagesSquare, { className: "size-4", "aria-hidden": true }), "Chat history"] }));
     const toggleNavigation = useSidebarStore((s) => s.toggleMobile);
     useEffect(() => {
         if (panelOpen) {

package/dist/workbench/welcome-intro.js

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

package/dist/workbench/workbench.js

@@ -23,6 +23,7 @@ export function WorkbenchPreview({ page, chatOnly: chatRoute = false, }) {
         normalizeWorkbenchPath(rootItem.to) === normalizeWorkbenchPath(currentPage));
     const conversationHome = (_jsx(ConversationHistory, { groups: navGroups, workspaceId: workspaceId, entityId: entityId, rootContext: rootContext, onClose: returnToChat, onViewAll: openHistory, showBack: false, compact: true }));
     const emptyChatFooter = workspaceId ? conversationHome : historyShortcut;
+    const homeRecents = !workspaceId ? (_jsx(ConversationHistory, { groups: navGroups, workspaceId: undefined, onClose: returnToChat, onViewAll: openHistory, showBack: false, compact: true, home: true })) : undefined;
     const buttonClass = "inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary";
     return (_jsxs("div", { className: "workbench-preview flex min-h-0 flex-1 overflow-hidden", "data-workspace-navigation": workspaceGroups ? "true" : undefined, children: [_jsx(WorkbenchStyles, {}), _jsx(WorkbenchNavigation, { groups: staticNavigationGroups, workspace: !!workspaceGroups, onNewConversation: startChat }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", "data-workbench-surface": true, role: "region", "aria-label": "Workspace working area", children: [chatWidth.compact && (_jsxs("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-1", role: "group", "aria-label": "Workspace panes", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "preview-mobile-navigation size-11", "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { className: "size-4" }) }), ["content", "chat"]
                                 .filter((pane) => !chatOnly || pane === "chat")
@@ -39,5 +40,5 @@ export function WorkbenchPreview({ page, chatOnly: chatRoute = false, }) {
                                 }, children: [_jsx(WorkbenchChatHeader, { collapsed: collapsed, running: running, chatWidth: chatWidth, buttonClass: buttonClass, toggleNavigation: toggleNavigation, setCollapsed: setCollapsed, showHistory: showHistory, startChat: startChat, returnToChat: returnToChat, openHistory: openHistory, chatOnly: chatOnly, setContentCollapsed: setContentCollapsed }), !collapsed && showHistory && (_jsx(ConversationHistory, { groups: navGroups, workspaceId: workspaceId, onClose: returnToChat, showBack: true })), !chatWidth.compact && !collapsed && !contentCollapsed && (_jsx(ChatResizeHandle, { chatWidth: chatWidth })), _jsx("div", { className: "min-h-0 flex-1 flex-col", style: {
                                             display: collapsed || showHistory ? "none" : "flex",
                                             paddingBottom: spaciousChat && emptyChat && !historyOpen ? "clamp(32px, 10vh, 96px)" : undefined,
-                                        }, children: _jsx(ChatContent, { centerComposer: spaciousChat && emptyChat && !historyOpen, composerIntro: spaciousChat && emptyChat ? (_jsx(WelcomeIntro, { navGroups: navGroups, historyShortcut: emptyChatFooter })) : undefined, compactComposer: !spaciousChat, starterSuggestions: [], emptyState: _jsx(ChatEmptyState, { pageLabel: pageLabel, showHomeStarters: !spaciousChat, children: emptyChatFooter }) }) })] }), _jsx(WorkbenchContentPane, { contentHidden: contentHidden, panelOpen: panelOpen, chatWidth: chatWidth, contentCollapsed: contentCollapsed, collapsed: collapsed, buttonClass: buttonClass, setCollapsed: setCollapsed, setContentCollapsed: setContentCollapsed, closePanel: closePanel, page: page }), contentCollapsed && !chatOnly && !chatWidth.compact && (_jsx("aside", { "aria-label": "Collapsed content", className: "flex w-11 shrink-0 flex-col items-center", style: { width: 44 }, children: _jsx("div", { className: "flex h-full w-full flex-col items-center", "data-chat-rail": true, children: _jsx("div", { className: "flex items-center justify-center", style: { height: 60 }, children: _jsx(TooltipIconButton, { tooltip: "Expand content", className: buttonClass, "aria-label": "Expand content", onClick: () => setContentCollapsed(false), children: _jsx(FileText, { size: 18 }) }) }) }) }))] })] })] }));
+                                        }, children: _jsx(ChatContent, { centerComposer: spaciousChat && emptyChat && !historyOpen, composerIntro: spaciousChat && emptyChat ? (_jsx(WelcomeIntro, { navGroups: navGroups, historyShortcut: workspaceId ? emptyChatFooter : null })) : undefined, composerFooter: spaciousChat && emptyChat && !historyOpen && homeRecents ? (_jsx("div", { className: "w-full", children: homeRecents })) : undefined, compactComposer: !spaciousChat, starterSuggestions: [], emptyState: _jsx(ChatEmptyState, { pageLabel: pageLabel, showHomeStarters: !spaciousChat, children: emptyChatFooter }) }) })] }), _jsx(WorkbenchContentPane, { contentHidden: contentHidden, panelOpen: panelOpen, chatWidth: chatWidth, contentCollapsed: contentCollapsed, collapsed: collapsed, buttonClass: buttonClass, setCollapsed: setCollapsed, setContentCollapsed: setContentCollapsed, closePanel: closePanel, page: page }), contentCollapsed && !chatOnly && !chatWidth.compact && (_jsx("aside", { "aria-label": "Collapsed content", className: "flex w-11 shrink-0 flex-col items-center", style: { width: 44 }, children: _jsx("div", { className: "flex h-full w-full flex-col items-center", "data-chat-rail": true, children: _jsx("div", { className: "flex items-center justify-center", style: { height: 60 }, children: _jsx(TooltipIconButton, { tooltip: "Expand content", className: buttonClass, "aria-label": "Expand content", onClick: () => setContentCollapsed(false), children: _jsx(FileText, { size: 18 }) }) }) }) }))] })] })] }));
 }

package/package.json

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