@iloveagents/foundry-web-ui 0.24.0 → 0.25.0

package/dist/components/tool-call-card.d.ts

@@ -10,7 +10,7 @@ export type ToolCallStatus = {
     type: "requires-action";
     reason?: string;
 };
-interface ToolCallCardProps {
+export interface ToolCallCardProps {
     icon?: ReactNode;
     title: string;
     description?: string;
@@ -22,6 +22,17 @@ interface ToolCallCardProps {
     };
     children?: ReactNode;
     className?: string;
+    /** Start expanded. Ignored when `open` is supplied. */
+    defaultOpen?: boolean;
+    /**
+     * Controlled expansion.
+     *
+     * A card whose body is expensive to mount — a live force simulation, a media
+     * player — needs to know whether it is expanded so it can defer that cost,
+     * and needs to react when the user opens it. Left undefined, the card manages
+     * its own state exactly as before.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
-export declare function ToolCallCard({ icon, title, description, status, action, children, className, }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ToolCallCard({ icon, title, description, status, action, children, className, defaultOpen, open, onOpenChange, }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tool-call-card.js

@@ -3,8 +3,15 @@ import { Loader2, CheckCircle2, XCircle, AlertCircle, ChevronDown } from "lucide
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useState } from "react";
-export function ToolCallCard({ icon, title, description, status, action, children, className, }) {
-    const [isOpen, setIsOpen] = useState(false);
+export function ToolCallCard({ icon, title, description, status, action, children, className, defaultOpen = false, open, onOpenChange, }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const setIsOpen = (next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
     const isSuccess = status.type === "complete";
     const isError = status.type === "incomplete" && status.reason === "error";
     const isRunning = status.type === "running";

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { ChatHeader } from "./components/chat-header.js";
 export { ComposerAttachment, UserMessageAttachment, userAttachmentComponents, composerAttachmentComponents, } from "./components/chat-attachments.js";
 export { ShowDocumentToolUI } from "./components/show-document-tool-ui.js";
 export { ToolCallCard } from "./components/tool-call-card.js";
-export type { ToolCallStatus } from "./components/tool-call-card.js";
+export type { ToolCallStatus, ToolCallCardProps } from "./components/tool-call-card.js";
 export { ToolFallback } from "./components/tool-fallback.js";
 export { ConfirmationCard } from "./components/confirmation-card.js";
 export { TooltipIconButton } from "./components/tooltip-icon-button.js";

package/dist/lib/app-store.js

@@ -50,6 +50,94 @@ function compactReferenceTarget(target) {
         proposedValue: compactContextValue(target.proposedValue),
     };
 }
+/**
+ * Structural comparison that survives what a `payload` actually carries.
+ *
+ * Compared by WALKING the two values, not by serialising them. A payload is
+ * often a database row, and a `bigint` is ordinary there — the Neo4j driver
+ * returns them natively — which rules out `JSON.stringify` twice over. It
+ * throws on a bigint outright, and the obvious repair (a replacer that tags
+ * one) cannot be made correct: `10n` as `"10"` collides with the string
+ * `"10"`, as `"10n"` with the string `"10n"`, as `{__bigint:"10"}` with a
+ * payload field that happens to be that object. `payload` is arbitrary, so
+ * every encoding can be imitated by data shaped like the encoding, and a
+ * collision here makes a real change read as "unchanged" — leaving stale
+ * context attached to every later message.
+ *
+ * Comparing types directly has nothing to imitate: `typeof 10n` is not
+ * `typeof "10"`. It is also key-order independent (which the serialising
+ * version never actually was, despite its name) and cheaper, since it stops at
+ * the first difference instead of building two strings.
+ *
+ * Cycles are tracked as PAIRS. A single visited-set marks an object on first
+ * sight, so the second appearance of a shared but acyclic sub-object reads as
+ * a cycle — and two values differing only there would compare equal.
+ */
+function isDate(value) {
+    return Object.prototype.toString.call(value) === "[object Date]";
+}
+/** Own enumerable keys describe this object completely. */
+function isPlainObject(value) {
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+function deepEqual(a, b, seen) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a !== typeof b)
+        return false;
+    if (typeof a !== "object" || a === null || b === null)
+        return false;
+    const left = a;
+    const right = b;
+    const pairs = seen ?? new Map();
+    const already = pairs.get(left);
+    // Assumed equal while in flight: two structures that recurse identically are
+    // equal, and re-entering would not terminate.
+    if (already?.has(right))
+        return true;
+    if (already)
+        already.add(right);
+    else
+        pairs.set(left, new Set([right]));
+    if (Array.isArray(left) || Array.isArray(right)) {
+        if (!Array.isArray(left) || !Array.isArray(right))
+            return false;
+        if (left.length !== right.length)
+            return false;
+        return left.every((item, index) => deepEqual(item, right[index], pairs));
+    }
+    // Enumerable keys only describe a PLAIN object. A `Date`, `Map`, `Set` or
+    // `RegExp` keeps its state internally and has none, so comparing key sets
+    // said two different dates were the same value — and this guard's entire job
+    // is deciding whether something changed. `Date` is worth spelling out
+    // because it is what a host or an adapter actually puts in a property; every
+    // other exotic object falls through to "not equal unless identical", which
+    // is the safe direction: a spurious change costs one redundant update, a
+    // missed one loses the user's data silently.
+    if (isDate(left) || isDate(right)) {
+        return isDate(left) && isDate(right) && Object.is(left.getTime(), right.getTime());
+    }
+    if (!isPlainObject(left) || !isPlainObject(right))
+        return false;
+    const leftKeys = Object.keys(left);
+    const rightKeys = new Set(Object.keys(right));
+    if (leftKeys.length !== rightKeys.size)
+        return false;
+    return leftKeys.every((key) => rightKeys.has(key) &&
+        deepEqual(left[key], right[key], pairs));
+}
+/**
+ * Do two keyed context items carry the same value?
+ *
+ * Compares everything the consumer sees, ignoring the identity fields the
+ * store owns (`id`, `createdAt`). `payload` is arbitrary — a selected row, a
+ * graph node and its properties — so it is compared structurally.
+ */
+function sameContextValue(current, next) {
+    const { id: _id, createdAt: _createdAt, ...rest } = current;
+    return deepEqual(rest, next);
+}
 export const useAppStore = create((set, get) => ({
     // Thread state
     threadActive: false,
@@ -135,11 +223,18 @@ export const useAppStore = create((set, get) => ({
         const label = item.label.length > MAX_LABEL_LENGTH
             ? `${item.label.slice(0, MAX_LABEL_LENGTH)}...`
             : item.label;
+        // Setting the same value twice is not a change. Without this the method
+        // mints a fresh `id` and a fresh array every call, so a UI that mirrors a
+        // selection into context — re-asserting the same item as it re-renders —
+        // churns the store, re-renders every subscriber, and can drive itself
+        // into an update loop. The null branch above already declines to write
+        // when nothing changes; this is the same rule for the write path.
+        const current = get().contextItems.find((existing) => existing.key === key);
+        const next = { ...item, key, label };
+        if (current && sameContextValue(current, next))
+            return;
         set({
-            contextItems: [
-                ...withoutKey,
-                { ...item, key, label, id: crypto.randomUUID(), createdAt: Date.now() },
-            ],
+            contextItems: [...withoutKey, { ...next, id: crypto.randomUUID(), createdAt: Date.now() }],
         });
     },
     removeContextItem: (id) => set({ contextItems: get().contextItems.filter((i) => i.id !== id) }),

package/dist/lib/tool-panel-store.d.ts

@@ -12,16 +12,34 @@ export interface PdfHighlightRef {
 export interface ToolPanelContent {
     title: string;
     content: string;
-    type: "markdown" | "text" | "page" | "pdf";
+    type: "markdown" | "text" | "page" | "pdf" | "graph";
     /** PDF highlights for citation overlays (only when type === "pdf") */
     pdfHighlights?: PdfHighlightRef[];
     /** Initial page to scroll to (only when type === "pdf") */
     initialPage?: number;
     /** SPACES entity ID — enables pin and navigate actions in panel header */
     entityId?: string;
+    /**
+     * Structured payload for renderers that need more than a string — a graph,
+     * a chart, a table. `content` is still expected to carry a serialization, so
+     * the header's Copy action and the built-in text fallback keep working when
+     * no renderer matches.
+     */
+    data?: unknown;
 }
 /** Pluggable content renderer for the tool panel — registered by feature modules. */
 export interface PanelRendererEntry {
+    /**
+     * Stable identity. When present, re-registering replaces the previous entry
+     * with the same id instead of appending a second copy.
+     *
+     * Registration usually happens in a module's `useInit`, which runs again on
+     * every remount — a StrictMode double-render, a route change, a hot reload.
+     * Without an id those calls stack up, `renderers` grows without bound, and
+     * `find()` keeps matching the oldest (now stale) closure. Entries without an
+     * id keep the original append behaviour.
+     */
+    id?: string;
     /** Check if this renderer handles the given content */
     match: (content: ToolPanelContent) => boolean;
     /** Lazy component to render. Receives content as prop. */

package/dist/lib/tool-panel-store.js

@@ -55,7 +55,18 @@ export const useToolPanelStore = create((set, get) => ({
     isFullscreen: false,
     renderers: [],
     openPanel: (content) => set({ isOpen: true, content }),
-    registerRenderer: (entry) => set((state) => ({ renderers: [...state.renderers, entry] })),
+    registerRenderer: (entry) => set((state) => {
+        if (entry.id === undefined)
+            return { renderers: [...state.renderers, entry] };
+        const index = state.renderers.findIndex((existing) => existing.id === entry.id);
+        if (index === -1)
+            return { renderers: [...state.renderers, entry] };
+        // Replace in place: registration order decides which renderer wins a
+        // match, so re-registering must not silently reprioritise it.
+        const renderers = [...state.renderers];
+        renderers[index] = entry;
+        return { renderers };
+    }),
     closePanel: () => set({ isOpen: false, isFullscreen: false }),
     setContent: (content) => set({ content }),
     setPanelWidth: (width) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.24.0",
+  "version": "0.25.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": [
@@ -76,8 +76,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.24.0",
-    "@iloveagents/foundry-web-primitives": "^0.24.0"
+    "@iloveagents/foundry-agent": "^0.25.0",
+    "@iloveagents/foundry-web-primitives": "^0.25.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",