@iloveagents/foundry-web-ui 0.32.4 → 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/chat-context.js

@@ -6,6 +6,7 @@ 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() {
@@ -14,6 +15,7 @@ function readContext() {
 /** The displayed context and the agent request use the same projection. */
 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({ centered = false }) {
         };
     }, []);
     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 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] })), _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
+    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/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/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";
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.32.4",
+  "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.4",
-    "@iloveagents/foundry-web-primitives": "^0.32.4"
+    "@iloveagents/foundry-agent": "^0.33.0",
+    "@iloveagents/foundry-web-primitives": "^0.33.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",