@iloveagents/foundry-web-ui 0.5.0 → 0.7.0

package/dist/components/app-brand.d.ts

@@ -1,3 +1,26 @@
+import type { ThemeBranding } from "../lib/theme-runtime.js";
+export interface BrandLockup {
+    /** Image to render, or undefined to fall back to the generic glyph. */
+    markUrl?: string;
+    /** True when `markUrl` is a compact icon rather than a wordmark. */
+    isIcon: boolean;
+    name: string;
+    showName: boolean;
+}
+/**
+ * Decide what the brand lockup renders. Exported (underscore-prefixed) so the
+ * branching is unit-testable without a DOM renderer — same approach as
+ * ``tool-fallback.tsx``.
+ *
+ * The rule worth stating: whether the name is printed depends on the *shape*
+ * of the brand image. A wordmark already spells the brand out, so pairing it
+ * with `appName` stutters ("ANDRITZ ANDRITZ"). An icon says nothing on its
+ * own, so it needs the name to complete the lockup. Hence an icon wins over a
+ * wordmark when both are set — supplying an icon is an explicit request for
+ * "<mark> Product Name", which is what a tenant whose product name differs
+ * from their company name is asking for.
+ */
+export declare function _resolveBrandLockup(branding: ThemeBranding, mode: "light" | "dark", showName: boolean): BrandLockup;
 export declare function AppBrand({ showName, className, iconClassName, labelClassName, }: {
     showName?: boolean;
     className?: string;

package/dist/components/app-brand.js

@@ -2,12 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Layers3 } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { useThemeRuntime } from "./theme-runtime-provider.js";
+/**
+ * Decide what the brand lockup renders. Exported (underscore-prefixed) so the
+ * branching is unit-testable without a DOM renderer — same approach as
+ * ``tool-fallback.tsx``.
+ *
+ * The rule worth stating: whether the name is printed depends on the *shape*
+ * of the brand image. A wordmark already spells the brand out, so pairing it
+ * with `appName` stutters ("ANDRITZ ANDRITZ"). An icon says nothing on its
+ * own, so it needs the name to complete the lockup. Hence an icon wins over a
+ * wordmark when both are set — supplying an icon is an explicit request for
+ * "<mark> Product Name", which is what a tenant whose product name differs
+ * from their company name is asking for.
+ */
+export function _resolveBrandLockup(branding, mode, showName) {
+    const isDark = mode === "dark";
+    const pick = (dark, light) => (isDark ? dark || light : light || dark);
+    const iconUrl = pick(branding.darkIconUrl, branding.iconUrl);
+    const logoUrl = pick(branding.darkLogoUrl, branding.logoUrl);
+    const markUrl = iconUrl || logoUrl;
+    return {
+        markUrl,
+        isIcon: Boolean(iconUrl),
+        name: branding.appName || "Foundry UI",
+        showName: showName && (Boolean(iconUrl) || !markUrl),
+    };
+}
 export function AppBrand({ showName = true, className, iconClassName, labelClassName, }) {
     const runtime = useThemeRuntime();
-    const brandName = runtime.branding.appName || "Foundry UI";
-    const logoUrl = runtime.mode === "dark"
-        ? runtime.branding.darkLogoUrl || runtime.branding.logoUrl
-        : runtime.branding.logoUrl || runtime.branding.darkLogoUrl;
-    const shouldShowName = showName && !logoUrl;
-    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [logoUrl ? (_jsx("img", { src: logoUrl, alt: brandName, className: cn("h-5 w-auto max-w-[7rem] shrink-0 object-contain", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), shouldShowName && _jsx("span", { className: cn("truncate", labelClassName), children: brandName })] }));
+    const lockup = _resolveBrandLockup(runtime.branding, runtime.mode, showName);
+    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [lockup.markUrl ? (_jsx("img", { src: lockup.markUrl, alt: lockup.name, className: cn("shrink-0 object-contain", 
+                // Both lock HEIGHT and let width follow the aspect ratio. Sizing an
+                // icon into a square box (`size-5`) silently shrinks any mark that
+                // is not 1:1 — `object-contain` letterboxes a 4:3 glyph to 20x15,
+                // so it lands visibly smaller and thinner than the wordmark it
+                // replaced. Marks are rarely square, so height is the only
+                // dimension worth fixing. The max-width is just a runaway guard:
+                // tighter for an icon, which has to leave room for the name.
+                lockup.isIcon ? "h-5 w-auto max-w-8" : "h-5 w-auto max-w-[7rem]", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), lockup.showName && _jsx("span", { className: cn("truncate", labelClassName), children: lockup.name })] }));
 }

package/dist/components/assistant-chat.js

@@ -9,6 +9,7 @@ import { userAttachmentComponents, composerAttachmentComponents } from "./chat-a
 import { SentContextBadges, ComposerContextBadges } from "./context-badges.js";
 import { ContextPins } from "./context-bar.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
+import { ChatComposerBannerSlot } from "./chat-slots.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { MarkdownText } from "./markdown-text.js";
 import { ToolFallback } from "./tool-fallback.js";
@@ -90,5 +91,5 @@ export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS,
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,
-                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", variant: "ghost", className: "shrink-0", children: _jsx(Paperclip, { className: "size-5" }) }) }), _jsx(ContextPins, { showPinButton: showPinButton })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message Assistant...", rows: 1, className: cn("flex-1 bg-transparent", "py-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsx(ComposerActionButton, {})] })] }) })] })] })] }));
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", variant: "ghost", className: "shrink-0", children: _jsx(Paperclip, { className: "size-5" }) }) }), _jsx(ContextPins, { showPinButton: showPinButton })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message Assistant...", rows: 1, className: cn("flex-1 bg-transparent", "py-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsx(ComposerActionButton, {})] })] }) })] })] })] }));
 }

package/dist/components/chat-bubble.js

@@ -8,6 +8,7 @@ import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { ContextPins } from "./context-bar.js";
 import { ComposerContextBadges, SentContextBadges } from "./context-badges.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
+import { ChatComposerBannerSlot, ChatLauncherBadgeSlot } from "./chat-slots.js";
 import { MarkdownText } from "./markdown-text.js";
 import { LoadingIndicator } from "./loading-indicator.js";
 import { MessageTimestamp } from "./message-timestamp.js";
@@ -96,10 +97,10 @@ export function ChatBubble() {
     return (_jsxs(_Fragment, { children: [!isOpen && (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none fixed bottom-0 left-0 z-40 hidden md:block", "border-r border-sidebar-border", "bg-gradient-to-b from-sidebar/0 via-sidebar/88 to-sidebar/96", "supports-[backdrop-filter]:backdrop-blur"), style: {
                     width: isSidebarOpen ? sidebarWidth : RAIL_WIDTH,
                     height: 64,
-                } })), !isOpen && (_jsx("button", { type: "button", onClick: openBubble, className: cn("fixed bottom-4 z-50", "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"), style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, "aria-label": "Open chat", children: _jsx(MessageSquare, { className: "size-4" }) })), isOpen && (_jsxs("div", { ref: panelRef, 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
+                } })), !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": "Open chat", children: _jsx(MessageSquare, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, 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(MessageSquare, { 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: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                                 UserMessage: BubbleUserMessage,
                                                                 AssistantMessage: BubbleAssistantMessage,
-                                                            } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsx("div", { className: "shrink-0 border-t border-border px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", size: "icon", className: "size-7 shrink-0", children: _jsx(Paperclip, { className: "size-3.5" }) }) }), _jsx(ContextPins, { compact: true })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message...", rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) })] })] }) })] })] }))] }));
+                                                            } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", size: "icon", className: "size-7 shrink-0", children: _jsx(Paperclip, { className: "size-3.5" }) }) }), _jsx(ContextPins, { compact: true })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message...", rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) })] })] }) })] })] })] }))] }));
 }

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

@@ -0,0 +1,37 @@
+/**
+ * Chat extension slots — module-injectable UI anchored to the chat chrome.
+ *
+ * Modules (via ``bootstrapShell``) sometimes need to render inside the
+ * chat surfaces the shell owns — e.g. a background-task progress strip
+ * pinned above the composer, or an activity badge on the collapsed chat
+ * launcher. Threading those through props would couple the shell to
+ * feature modules, so this is a tiny registry instead: a module calls
+ * :func:`registerChatSlots` once (import time or ``useInit``) and the
+ * shell's chat components render the slots wherever they belong.
+ *
+ * Render points:
+ *   - ``composerBanner`` — directly above the composer in BOTH the full
+ *     chat (``ChatContent``) and the floating bubble panel. It renders
+ *     inside a fixed (non-scrolling) footer, so it never scrolls away
+ *     with the thread.
+ *   - ``launcherBadge`` — inside the collapsed chat-bubble launcher's
+ *     wrapper (a positioned ``group`` container around the round button),
+ *     so a badge can position itself absolutely over the button and use
+ *     ``group-hover:`` styles for a hover flyout.
+ */
+import type { ComponentType } from "react";
+interface ChatSlotsState {
+    composerBanner: ComponentType | null;
+    launcherBadge: ComponentType | null;
+}
+export declare const useChatSlotsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatSlotsState>>;
+/**
+ * Register chat slot components. Later calls overwrite only the keys
+ * they pass, so independent modules can each claim a different slot.
+ * Explicit ``null`` clears a slot; ``undefined`` values are ignored so
+ * an optional-spread caller can't corrupt the state shape.
+ */
+export declare function registerChatSlots(slots: Partial<ChatSlotsState>): void;
+export declare function ChatComposerBannerSlot(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatLauncherBadgeSlot(): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/chat-slots.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { create } from "zustand";
+export const useChatSlotsStore = create(() => ({
+    composerBanner: null,
+    launcherBadge: null,
+}));
+/**
+ * Register chat slot components. Later calls overwrite only the keys
+ * they pass, so independent modules can each claim a different slot.
+ * Explicit ``null`` clears a slot; ``undefined`` values are ignored so
+ * an optional-spread caller can't corrupt the state shape.
+ */
+export function registerChatSlots(slots) {
+    const next = {};
+    if (slots.composerBanner !== undefined)
+        next.composerBanner = slots.composerBanner;
+    if (slots.launcherBadge !== undefined)
+        next.launcherBadge = slots.launcherBadge;
+    useChatSlotsStore.setState(next);
+}
+export function ChatComposerBannerSlot() {
+    const Banner = useChatSlotsStore((s) => s.composerBanner);
+    return Banner ? _jsx(Banner, {}) : null;
+}
+export function ChatLauncherBadgeSlot() {
+    const Badge = useChatSlotsStore((s) => s.launcherBadge);
+    return Badge ? _jsx(Badge, {}) : null;
+}

package/dist/components/tool-panel.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState, Suspense } from "react";
 import { X, Maximize2, Minimize2, Copy, Check, Pin, PinOff, FolderOpen } from "lucide-react";
 import { useNavigate } from "react-router";
 import { cn } from "@iloveagents/foundry-web-primitives";
-import { useToolPanelStore } from "../lib/tool-panel-store.js";
+import { clampPanelWidth, MIN_PANEL_WIDTH, useToolPanelStore, } from "../lib/tool-panel-store.js";
 import { useAppStore } from "../lib/app-store.js";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -26,6 +26,40 @@ export function ToolPanel() {
     const content = useToolPanelStore((state) => state.content);
     const closePanel = useToolPanelStore((state) => state.closePanel);
     const panelWidth = useToolPanelStore((state) => state.panelWidth);
+    const setPanelWidth = useToolPanelStore((state) => state.setPanelWidth);
+    const useOverlay = useToolPanelStore((state) => state.useOverlay);
+    /** Pointer id of an in-flight resize drag (null when idle). */
+    const dragPointerId = useRef(null);
+    const maxPanelWidth = typeof window !== "undefined"
+        ? clampPanelWidth(Number.POSITIVE_INFINITY, window.innerWidth)
+        : MIN_PANEL_WIDTH;
+    useEffect(() => {
+        const onPointerMove = (event) => {
+            if (dragPointerId.current === null)
+                return;
+            setPanelWidth(window.innerWidth - event.clientX);
+        };
+        // pointercancel matters: a cancelled drag must not leave the document
+        // unselectable with a col-resize cursor (review catch).
+        const onPointerEnd = (event) => {
+            if (dragPointerId.current !== null && event.pointerId !== dragPointerId.current)
+                return;
+            dragPointerId.current = null;
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerEnd);
+        window.addEventListener("pointercancel", onPointerEnd);
+        return () => {
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerEnd);
+            window.removeEventListener("pointercancel", onPointerEnd);
+            // Unmounting mid-drag must not strand the styles either.
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+    }, [setPanelWidth]);
     const isFullscreen = useToolPanelStore((state) => state.isFullscreen);
     const toggleFullscreen = useToolPanelStore((state) => state.toggleFullscreen);
     const navigate = useNavigate();
@@ -85,5 +119,23 @@ export function ToolPanel() {
     }, [isOpen, closePanel]);
     if (!content)
         return null;
-    return (_jsxs("div", { "data-tool-panel": true, className: cn("fixed top-0 right-0 z-40", "h-dvh", "bg-background border-l border-border shadow-2xl", "transition-transform duration-300 ease-in-out", "flex flex-col", isOpen ? "translate-x-0" : "translate-x-full"), style: { width: panelWidth }, children: [_jsx("div", { className: "flex-shrink-0 border-b border-border px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-foreground truncate pr-4", children: content.title }), _jsxs("div", { className: "flex items-center gap-1", children: [entityId && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleToggleEntityPin, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", isEntityPinned && "text-primary"), "aria-label": isEntityPinned ? "Unpin document" : "Pin document", title: isEntityPinned ? "Unpin document" : "Pin document", children: isEntityPinned ? (_jsx(PinOff, { className: "size-4" })) : (_jsx(Pin, { className: "size-4 text-muted-foreground" })) }), _jsx("button", { type: "button", onClick: handleNavigateToEntity, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Open in navigation", title: "Open in navigation", children: _jsx(FolderOpen, { className: "size-4 text-muted-foreground" }) })] })), _jsx("button", { type: "button", onClick: handleCopyAll, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Copy content", children: copied ? (_jsx(Check, { className: "size-4 text-success" })) : (_jsx(Copy, { className: "size-4 text-muted-foreground" })) }), _jsx("button", { type: "button", onClick: toggleFullscreen, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? (_jsx(Minimize2, { className: "size-4 text-muted-foreground" })) : (_jsx(Maximize2, { className: "size-4 text-muted-foreground" })) }), _jsx("button", { type: "button", onClick: closePanel, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Close panel", children: _jsx(X, { className: "size-5 text-muted-foreground" }) })] })] }) }), _jsxs("div", { className: "relative flex-1 overflow-y-auto", ref: contentRef, "data-testid": "tool-panel-content", children: [_jsx(PanelContentRenderer, { content: content }), _jsx(SelectionPopover, { containerRef: contentRef })] })] }));
+    return (_jsxs("div", { "data-tool-panel": true, className: cn("fixed top-0 right-0 z-40", "h-dvh", "bg-background border-l border-border shadow-2xl", "transition-transform duration-300 ease-in-out", "flex flex-col", isOpen ? "translate-x-0" : "translate-x-full"), style: { width: panelWidth }, children: [isOpen && !useOverlay && !isFullscreen ? (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize panel", "aria-valuemin": MIN_PANEL_WIDTH, "aria-valuemax": maxPanelWidth, "aria-valuenow": Math.round(panelWidth), tabIndex: 0, onPointerDown: (event) => {
+                    event.preventDefault();
+                    dragPointerId.current = event.pointerId;
+                    document.body.style.cursor = "col-resize";
+                    document.body.style.userSelect = "none";
+                }, onKeyDown: (event) => {
+                    const step = event.shiftKey ? 80 : 24;
+                    if (event.key === "ArrowLeft")
+                        setPanelWidth(panelWidth + step);
+                    else if (event.key === "ArrowRight")
+                        setPanelWidth(panelWidth - step);
+                    else if (event.key === "Home")
+                        setPanelWidth(maxPanelWidth);
+                    else if (event.key === "End")
+                        setPanelWidth(MIN_PANEL_WIDTH);
+                    else
+                        return;
+                    event.preventDefault();
+                }, className: cn("absolute left-0 top-0 z-10 h-full w-2 -translate-x-1/2", "cursor-col-resize touch-none", "before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2", "before:bg-transparent hover:before:bg-primary/40 focus-visible:before:bg-primary", "focus:outline-none") })) : null, _jsx("div", { className: "flex-shrink-0 border-b border-border px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-foreground truncate pr-4", children: content.title }), _jsxs("div", { className: "flex items-center gap-1", children: [entityId && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleToggleEntityPin, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", isEntityPinned && "text-primary"), "aria-label": isEntityPinned ? "Unpin document" : "Pin document", title: isEntityPinned ? "Unpin document" : "Pin document", children: isEntityPinned ? (_jsx(PinOff, { className: "size-4" })) : (_jsx(Pin, { className: "size-4 text-muted-foreground" })) }), _jsx("button", { type: "button", onClick: handleNavigateToEntity, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Open in navigation", title: "Open in navigation", children: _jsx(FolderOpen, { className: "size-4 text-muted-foreground" }) })] })), _jsx("button", { type: "button", onClick: handleCopyAll, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Copy content", children: copied ? (_jsx(Check, { className: "size-4 text-success" })) : (_jsx(Copy, { className: "size-4 text-muted-foreground" })) }), _jsx("button", { type: "button", onClick: toggleFullscreen, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? (_jsx(Minimize2, { className: "size-4 text-muted-foreground" })) : (_jsx(Maximize2, { className: "size-4 text-muted-foreground" })) }), _jsx("button", { type: "button", onClick: closePanel, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Close panel", children: _jsx(X, { className: "size-5 text-muted-foreground" }) })] })] }) }), _jsxs("div", { className: "relative flex-1 overflow-y-auto", ref: contentRef, "data-testid": "tool-panel-content", children: [_jsx(PanelContentRenderer, { content: content }), _jsx(SelectionPopover, { containerRef: contentRef })] })] }));
 }

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export type { AGUIChatConversationFactoryArgs, AGUIHistoryAdapterFactory, } from
 export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.js";
 export type { ChatContentProps } from "./components/assistant-chat.js";
 export { ChatBubble } from "./components/chat-bubble.js";
+export { registerChatSlots, useChatSlotsStore, ChatComposerBannerSlot, ChatLauncherBadgeSlot, } from "./components/chat-slots.js";
 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";

package/dist/index.js

@@ -7,6 +7,7 @@ export { ClientToolExecutor } from "./components/client-tool-executor.js";
 export { AGUIRuntimeProvider, useAGUIAdapter } from "./components/ag-ui-runtime-provider.js";
 export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.js";
 export { ChatBubble } from "./components/chat-bubble.js";
+export { registerChatSlots, useChatSlotsStore, ChatComposerBannerSlot, ChatLauncherBadgeSlot, } from "./components/chat-slots.js";
 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";

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

@@ -84,8 +84,21 @@ export interface ThemeAppSlots {
 export interface ThemeBranding {
     appName?: string;
     appTitle?: string;
+    /**
+     * Full wordmark — an image that already spells the brand out. Rendered on
+     * its own, because setting it beside `appName` prints the brand twice.
+     */
     logoUrl?: string;
     darkLogoUrl?: string;
+    /**
+     * Compact mark (square-ish glyph, no words). Rendered *with* `appName`
+     * beside it, so a tenant can show "<mark> Product Name" — the usual answer
+     * when the product name differs from the company name. Takes precedence
+     * over `logoUrl` when both are set, since supplying an icon is an explicit
+     * request for the lockup.
+     */
+    iconUrl?: string;
+    darkIconUrl?: string;
 }
 export interface ThemeDefinition {
     light?: ThemeColorSlots;

package/dist/lib/theme-runtime.js

@@ -82,6 +82,8 @@ const BRANDING_KEYS = [
     "appTitle",
     "logoUrl",
     "darkLogoUrl",
+    "iconUrl",
+    "darkIconUrl",
 ];
 function cleanObject(value, keys) {
     if (!value || typeof value !== "object" || Array.isArray(value))
@@ -412,9 +414,9 @@ export const FOUNDRY_VIOLET_THEME = {
         ring: "oklch(0.72 0.18 286)",
     },
     typography: {
-        bodyFont: "\"Segoe UI\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
-        headingFont: "\"Segoe UI\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
-        monoFont: "\"SFMono-Regular\", \"Cascadia Code\", \"JetBrains Mono\", ui-monospace, monospace",
+        bodyFont: '"Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+        headingFont: '"Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+        monoFont: '"SFMono-Regular", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace',
     },
     radius: {
         radius: "0.875rem",
@@ -433,10 +435,7 @@ export function resolveThemeRuntime(layers, mode) {
     const effectiveMode = getEffectiveThemeMode(mode);
     const basePreset = layers.find((layer) => layer.basePreset && layer.basePreset.trim())?.basePreset ??
         "foundry-violet";
-    const definitions = [
-        getThemePreset(basePreset),
-        ...layers.map((layer) => layer.definition),
-    ];
+    const definitions = [getThemePreset(basePreset), ...layers.map((layer) => layer.definition)];
     const definition = mergeThemeDefinitions(...definitions);
     const colors = {
         ...(effectiveMode === "dark" ? definition.dark : definition.light),

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

@@ -29,6 +29,10 @@ export interface PanelRendererEntry {
         content: ToolPanelContent;
     }>>;
 }
+/** Smallest useful panel, and the space the chat/content beside it must keep. */
+export declare const MIN_PANEL_WIDTH = 360;
+/** Clamp a desired width so neither side can be squeezed out of usefulness. */
+export declare const clampPanelWidth: (desired: number, viewport: number) => number;
 interface ToolPanelState {
     isOpen: boolean;
     content: ToolPanelContent | null;
@@ -41,6 +45,8 @@ interface ToolPanelState {
     setContent: (content: ToolPanelContent) => void;
     updateLayout: () => void;
     toggleFullscreen: () => void;
+    /** Drag-to-resize the split; clamped and persisted per user. */
+    setPanelWidth: (width: number) => void;
     /** Register a custom content renderer (e.g., PDF viewer, entity pages). */
     registerRenderer: (entry: PanelRendererEntry) => void;
 }

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

@@ -6,12 +6,40 @@
  */
 import { create } from "zustand";
 const SIDE_BY_SIDE_BREAKPOINT = 1280;
+/** Smallest useful panel, and the space the chat/content beside it must keep. */
+export const MIN_PANEL_WIDTH = 360;
+const MIN_SIBLING_WIDTH = 420;
+const PANEL_WIDTH_STORAGE_KEY = "foundry.toolPanel.width";
+/** Clamp a desired width so neither side can be squeezed out of usefulness. */
+export const clampPanelWidth = (desired, viewport) => {
+    if (viewport < SIDE_BY_SIDE_BREAKPOINT)
+        return viewport;
+    const max = Math.max(MIN_PANEL_WIDTH, viewport - MIN_SIBLING_WIDTH);
+    return Math.round(Math.min(max, Math.max(MIN_PANEL_WIDTH, desired)));
+};
+const readStoredPanelWidth = () => {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const raw = window.localStorage.getItem(PANEL_WIDTH_STORAGE_KEY);
+        const parsed = raw ? Number.parseInt(raw, 10) : Number.NaN;
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+    }
+    catch {
+        return null; // private mode / storage disabled — fall back to the default
+    }
+};
 const getPanelWidth = () => {
     if (typeof window === "undefined")
         return 800;
     const screenWidth = window.innerWidth;
     if (screenWidth < SIDE_BY_SIDE_BREAKPOINT)
         return screenWidth;
+    // A width the user dragged to wins over the computed default, re-clamped
+    // to the current viewport so a narrow window can't strand the content.
+    const stored = readStoredPanelWidth();
+    if (stored !== null)
+        return clampPanelWidth(stored, screenWidth);
     return Math.min(1000, Math.max(600, screenWidth * 0.5));
 };
 const shouldUseOverlay = () => {
@@ -30,6 +58,20 @@ export const useToolPanelStore = create((set, get) => ({
     registerRenderer: (entry) => set((state) => ({ renderers: [...state.renderers, entry] })),
     closePanel: () => set({ isOpen: false, isFullscreen: false }),
     setContent: (content) => set({ content }),
+    setPanelWidth: (width) => {
+        if (typeof window === "undefined")
+            return;
+        if (get().isFullscreen)
+            return;
+        const next = clampPanelWidth(width, window.innerWidth);
+        try {
+            window.localStorage.setItem(PANEL_WIDTH_STORAGE_KEY, String(next));
+        }
+        catch {
+            // Persisting is best-effort; the drag still applies for this session.
+        }
+        set({ panelWidth: next });
+    },
     updateLayout: () => {
         const { isFullscreen } = get();
         if (!isFullscreen) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,8 +53,8 @@
     "tailwind-merge": "^3.5.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "@iloveagents/foundry-agent": "^0.5.0",
-    "@iloveagents/foundry-web-primitives": "^0.5.0"
+    "@iloveagents/foundry-agent": "^0.7.0",
+    "@iloveagents/foundry-web-primitives": "^0.7.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",