@iloveagents/foundry-web-ui 0.31.0 → 0.32.1

package/dist/components/theme-runtime-provider.js

@@ -181,10 +181,43 @@ export function ThemeScope({ children, className, style, }) {
 }
 export function ThemeDocumentMetadata() {
     const runtime = useThemeRuntime();
+    const { faviconUrl, darkFaviconUrl, iconUrl, darkIconUrl, touchIconUrl } = runtime.branding;
+    const favicon = runtime.mode === "dark"
+        ? darkFaviconUrl || faviconUrl || darkIconUrl || iconUrl
+        : faviconUrl || darkFaviconUrl || iconUrl || darkIconUrl;
     useEffect(() => {
         if (typeof document === "undefined")
             return;
         document.title = runtime.branding.appTitle || runtime.branding.appName || "Foundry UI";
     }, [runtime.branding.appName, runtime.branding.appTitle]);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const managed = [];
+        const addIcon = (rel, href) => {
+            if (!href)
+                return;
+            let resolved;
+            try {
+                resolved = new URL(href, document.baseURI);
+            }
+            catch {
+                return;
+            }
+            if (resolved.protocol !== "http:" &&
+                resolved.protocol !== "https:" &&
+                !(resolved.protocol === "data:" && /^data:image\//i.test(href)))
+                return;
+            const link = document.createElement("link");
+            link.rel = rel;
+            link.href = href;
+            link.dataset.themeIcon = "true";
+            document.head.appendChild(link);
+            managed.push(link);
+        };
+        addIcon("icon", favicon);
+        addIcon("apple-touch-icon", touchIconUrl);
+        return () => managed.forEach((link) => link.remove());
+    }, [favicon, touchIconUrl]);
     return null;
 }

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

@@ -16,5 +16,5 @@ export function ToolCallCard({ icon, title, description, status, action, childre
     const isError = status.type === "incomplete" && status.reason === "error";
     const isRunning = status.type === "running";
     const requiresAction = status.type === "requires-action";
-    return (_jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: _jsxs("div", { className: cn("flex items-start gap-3 p-3 rounded-lg border", "bg-muted/50 text-sm transition-colors", isSuccess && "border-primary/30 bg-primary/5", isError && "border-destructive/30 bg-destructive/5", requiresAction && "border-primary/30 bg-primary/5"), children: [_jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [isRunning && _jsx(Loader2, { className: "size-4 text-primary animate-spin" }), isSuccess && _jsx(CheckCircle2, { className: "size-4 text-primary" }), isError && _jsx(XCircle, { className: "size-4 text-destructive" }), requiresAction && _jsx(AlertCircle, { className: "size-4 text-primary" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "font-medium text-foreground", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [action && !isRunning && (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: cn("h-6 px-2.5 text-xs font-medium rounded-md", "border border-primary/30 text-primary", "hover:bg-primary/10 transition-colors", "disabled:opacity-50 disabled:pointer-events-none"), children: action.label })), children && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-0.5 hover:bg-muted rounded transition-colors", "aria-label": "Toggle details", children: _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform", isOpen && "rotate-180") }) }) }))] })] }), description && (_jsx("div", { className: cn("text-xs mt-0.5", isError ? "text-destructive" : "text-primary"), children: description })), children && (_jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-2", children: children }) }))] })] }) }));
+    return (_jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: _jsxs("div", { className: cn("flex items-start gap-3 p-3 rounded-lg border", "bg-muted/50 text-sm transition-colors", isSuccess && "border-primary/30 bg-primary/5", isError && "border-destructive/30 bg-destructive/5", requiresAction && "border-primary/30 bg-primary/5"), children: [_jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [isRunning && _jsx(Loader2, { className: "size-4 text-primary animate-spin" }), isSuccess && _jsx(CheckCircle2, { className: "size-4 text-primary" }), isError && _jsx(XCircle, { className: "size-4 text-destructive" }), requiresAction && _jsx(AlertCircle, { className: "size-4 text-primary" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "font-medium text-foreground", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [action && !isRunning && (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: cn("min-h-6 px-1.5 text-xs font-medium rounded-md text-primary", "hover:bg-primary/10 transition-colors", "disabled:opacity-50 disabled:pointer-events-none"), children: action.label })), children && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-0.5 hover:bg-muted rounded transition-colors", "aria-label": "Toggle details", children: _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform", isOpen && "rotate-180") }) }) }))] })] }), description && (_jsx("div", { className: cn("text-xs mt-0.5 wrap-anywhere", isError ? "text-destructive" : "text-primary"), children: description })), children && (_jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-2", children: children }) }))] })] }) }));
 }

package/dist/lib/theme-runtime.d.ts

@@ -118,6 +118,11 @@ export interface ThemeBranding {
      */
     iconUrl?: string;
     darkIconUrl?: string;
+    /** Browser tab icon; falls back to the compact brand icon when unset. */
+    faviconUrl?: string;
+    darkFaviconUrl?: string;
+    /** Square PNG recommended for mobile home-screen bookmarks. */
+    touchIconUrl?: string;
     /**
      * Rendered height of the mark, as a CSS length (`"2rem"`, `"32px"`).
      * Defaults to the 20px lockup height when unset.

package/dist/lib/theme-runtime.js

@@ -92,6 +92,9 @@ const BRANDING_KEYS = [
     "darkLogoUrl",
     "iconUrl",
     "darkIconUrl",
+    "faviconUrl",
+    "darkFaviconUrl",
+    "touchIconUrl",
     "logoHeight",
 ];
 const SURFACE_IMPACT = Object.fromEntries(COLOR_KEYS.map((key, index) => [key, index]));

package/package.json

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