@iloveagents/foundry-web-ui 0.3.1 → 0.5.0

package/dist/components/form-dialog.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export declare function FormDialog({ open, onOpenChange, title, description, children, footer, contentClassName, bodyClassName, size, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    contentClassName?: string;
+    bodyClassName?: string;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-dialog.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function FormDialog({ open, onOpenChange, title, description, children, footer, contentClassName, bodyClassName, size = "md", }) {
+    const sizeClassName = {
+        sm: "max-w-sm",
+        md: "max-w-lg",
+        lg: "max-w-xl",
+        xl: "max-w-2xl",
+        "2xl": "max-w-3xl",
+    }[size];
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: cn(sizeClassName, contentClassName), children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { className: description ? undefined : "sr-only", children: description ?? "Complete the form below." })] }), children != null ? _jsx("div", { className: bodyClassName, children: children }) : null, footer ? _jsx(DialogFooter, { children: footer }) : null] }) }));
+}

package/dist/components/global-selection-popover.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Global selection command bar for text selection anywhere on the page.
+ *
+ * Appears near selected text when the user makes a selection outside of
+ * input elements and the tool panel (which has its own SelectionPopover).
+ */
+export declare function GlobalSelectionPopover(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/global-selection-popover.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Global selection command bar for text selection anywhere on the page.
+ *
+ * Appears near selected text when the user makes a selection outside of
+ * input elements and the tool panel (which has its own SelectionPopover).
+ */
+import { useState, useEffect, useCallback, useRef } from "react";
+import { PencilLine, Send, TextSelect, X } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useAppStore } from "../lib/app-store.js";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
+import { submitComposerText } from "../lib/composer-submit-store.js";
+import { resolveSelectionContext, } from "../lib/selection-context.js";
+const ACTION_POPOVER_HEIGHT = 38;
+const SIMPLE_POPOVER_WIDTH = 126;
+const ACTION_POPOVER_WIDTH = 236;
+const MODIFY_POPOVER_WIDTH = 340;
+const OFFSET = 8;
+const DEFAULT_MODIFY_PROMPT_PREFIX = "Modify the selected content:";
+/** Elements where selection should NOT trigger the popover */
+function isEditableTarget(node) {
+    const el = node instanceof HTMLElement ? node : node.parentElement;
+    if (!el)
+        return false;
+    const tag = el.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA")
+        return true;
+    if (el.isContentEditable)
+        return true;
+    return false;
+}
+export function GlobalSelectionPopover() {
+    const [position, setPosition] = useState(null);
+    const [selectedText, setSelectedText] = useState("");
+    const [selectionContext, setSelectionContext] = useState(null);
+    const [mode, setMode] = useState("actions");
+    const [modifyPrompt, setModifyPrompt] = useState("");
+    const addContextItem = useAppStore((s) => s.addContextItem);
+    const popoverRef = useRef(null);
+    const inputRef = useRef(null);
+    const setPopoverNode = useCallback((node) => {
+        popoverRef.current = node;
+    }, []);
+    const hidePopover = useCallback(() => {
+        setPosition(null);
+        setSelectedText("");
+        setSelectionContext(null);
+        setMode("actions");
+        setModifyPrompt("");
+    }, []);
+    const handleMouseUp = useCallback((event) => {
+        if (popoverRef.current?.contains(event.target))
+            return;
+        requestAnimationFrame(() => {
+            const selection = window.getSelection();
+            if (!selection || selection.isCollapsed || !selection.toString().trim())
+                return;
+            const anchorNode = selection.anchorNode;
+            if (!anchorNode)
+                return;
+            // Skip if inside editable element
+            if (isEditableTarget(anchorNode))
+                return;
+            // Skip if inside tool panel (it has its own SelectionPopover)
+            const el = anchorNode instanceof HTMLElement ? anchorNode : anchorNode.parentElement;
+            if (el?.closest("[data-tool-panel]"))
+                return;
+            const text = selection.toString().trim();
+            if (!text)
+                return;
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            const sourcePage = useAppStore.getState().navContext.label;
+            const resolved = resolveSelectionContext({
+                text,
+                anchorNode,
+                focusNode: selection.focusNode,
+                range,
+                sourcePage,
+            });
+            const width = resolved.supportsModify ? ACTION_POPOVER_WIDTH : SIMPLE_POPOVER_WIDTH;
+            // Position above selection, fixed to viewport
+            let top = rect.top - ACTION_POPOVER_HEIGHT - OFFSET;
+            let left = rect.left + rect.width / 2 - width / 2;
+            // If would go above viewport, place below
+            if (top < OFFSET) {
+                top = rect.bottom + OFFSET;
+            }
+            // Clamp horizontal
+            left = Math.max(OFFSET, Math.min(left, window.innerWidth - width - OFFSET));
+            setSelectedText(text);
+            setSelectionContext(resolved);
+            setMode("actions");
+            setModifyPrompt("");
+            setPosition({ top, left });
+        });
+    }, []);
+    const addResolvedContext = useCallback(() => {
+        if (!selectionContext)
+            return false;
+        addContextItem(selectionContext.item);
+        return true;
+    }, [addContextItem, selectionContext]);
+    const handleAddToContext = useCallback(() => {
+        if (!selectedText || !addResolvedContext())
+            return;
+        window.getSelection()?.removeAllRanges();
+        hidePopover();
+    }, [selectedText, addResolvedContext, hidePopover]);
+    const handleStartModify = useCallback(() => {
+        setMode("modify");
+        setPosition((current) => {
+            if (!current)
+                return current;
+            const centeredLeft = current.left - (MODIFY_POPOVER_WIDTH - ACTION_POPOVER_WIDTH) / 2;
+            return {
+                ...current,
+                left: Math.max(OFFSET, Math.min(centeredLeft, window.innerWidth - MODIFY_POPOVER_WIDTH - OFFSET)),
+            };
+        });
+    }, []);
+    const handleModifySubmit = useCallback((event) => {
+        event.preventDefault();
+        const prompt = modifyPrompt.trim();
+        if (!prompt || !selectionContext || !addResolvedContext())
+            return;
+        const text = selectionContext.formatModifyPrompt?.(prompt) ??
+            `${DEFAULT_MODIFY_PROMPT_PREFIX} ${prompt}`;
+        useChatBubbleStore.getState().open();
+        submitComposerText(text);
+        window.getSelection()?.removeAllRanges();
+        hidePopover();
+    }, [addResolvedContext, hidePopover, modifyPrompt, selectionContext]);
+    useEffect(() => {
+        const handleMouseDown = (e) => {
+            if (popoverRef.current?.contains(e.target))
+                return;
+            hidePopover();
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                hidePopover();
+        };
+        document.addEventListener("mouseup", handleMouseUp);
+        document.addEventListener("mousedown", handleMouseDown);
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("mousedown", handleMouseDown);
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [handleMouseUp, hidePopover]);
+    useEffect(() => {
+        if (mode === "modify") {
+            inputRef.current?.focus();
+        }
+    }, [mode]);
+    if (!position || !selectionContext)
+        return null;
+    if (mode === "modify") {
+        return (_jsxs("form", { ref: setPopoverNode, className: cn("fixed z-50", "flex items-center gap-1.5", "rounded-2xl border border-border/70 bg-background/95 p-1.5 shadow-xl shadow-black/10 backdrop-blur-md", "animate-in fade-in-0 zoom-in-95 duration-150"), style: { top: position.top, left: position.left, width: MODIFY_POPOVER_WIDTH }, onSubmit: handleModifySubmit, children: [_jsx(PencilLine, { className: "ml-1 size-3.5 shrink-0 text-primary" }), _jsx("input", { ref: inputRef, value: modifyPrompt, onChange: (event) => setModifyPrompt(event.target.value), placeholder: "Describe change...", className: cn("min-w-0 flex-1 bg-transparent px-1 py-1.5 text-xs text-foreground outline-none", "placeholder:text-muted-foreground") }), _jsx("button", { type: "button", "aria-label": "Cancel modify", onClick: hidePopover, className: "rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(X, { className: "size-3.5" }) }), _jsx("button", { type: "submit", "aria-label": "Send modify prompt", disabled: !modifyPrompt.trim(), className: cn("rounded-full p-1.5 transition-colors", modifyPrompt.trim()
+                        ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                        : "text-muted-foreground opacity-50"), children: _jsx(Send, { className: "size-3.5" }) })] }));
+    }
+    return (_jsxs("div", { ref: setPopoverNode, role: "toolbar", "aria-label": "Selection actions", className: cn("fixed z-50", "inline-flex items-center gap-1", "rounded-full border border-border/70 bg-background/95 p-1 shadow-xl shadow-black/10 backdrop-blur-md", "animate-in fade-in-0 zoom-in-95 duration-150"), style: { top: position.top, left: position.left }, onMouseDown: (e) => e.preventDefault(), children: [_jsxs("button", { type: "button", className: "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted", onClick: handleAddToContext, children: [_jsx(TextSelect, { className: "size-3.5 text-primary" }), "Add to chat"] }), selectionContext.supportsModify && (_jsxs("button", { type: "button", className: "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-primary/10 hover:text-primary", onClick: handleStartModify, children: [_jsx(PencilLine, { className: "size-3.5 text-primary" }), "Modify"] }))] }));
+}

package/dist/components/infinite-scroll-sentinel.d.ts

@@ -0,0 +1,6 @@
+export declare function InfiniteScrollSentinel({ enabled, loading, onVisible, className, }: {
+    enabled: boolean;
+    loading?: boolean;
+    onVisible: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/infinite-scroll-sentinel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function InfiniteScrollSentinel({ enabled, loading, onVisible, className, }) {
+    const ref = useRef(null);
+    const pendingRef = useRef(false);
+    useEffect(() => {
+        if (!enabled || !loading) {
+            pendingRef.current = false;
+        }
+    }, [enabled, loading]);
+    useEffect(() => {
+        if (!enabled || !ref.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting) && !pendingRef.current) {
+                pendingRef.current = true;
+                onVisible();
+            }
+        }, { rootMargin: "240px 0px" });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [enabled, onVisible]);
+    return (_jsx("div", { ref: ref, className: cn("flex h-12 items-center justify-center text-sm text-muted-foreground", className), children: enabled ? (loading ? "Loading more..." : "Scroll for more") : null }));
+}

package/dist/components/json-viewer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * JsonViewer — Collapsible JSON tree renderer.
+ *
+ * Fetches JSON from a URL and renders it as an interactive tree
+ * with syntax coloring and expand/collapse controls.
+ */
+export declare function JsonViewer({ url, defaultExpanded, }: {
+    url: string;
+    defaultExpanded?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/json-viewer.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * JsonViewer — Collapsible JSON tree renderer.
+ *
+ * Fetches JSON from a URL and renders it as an interactive tree
+ * with syntax coloring and expand/collapse controls.
+ */
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export function JsonViewer({ url, defaultExpanded = 2, }) {
+    const [state, setState] = useState({ data: null, loading: true, error: false });
+    useEffect(() => {
+        let cancelled = false;
+        fetch(url)
+            .then((r) => {
+            if (!r.ok)
+                throw new Error("Failed to fetch");
+            return r.json();
+        })
+            .then((json) => {
+            if (!cancelled)
+                setState({ data: json, loading: false, error: false });
+        })
+            .catch(() => {
+            if (!cancelled)
+                setState({ data: null, loading: false, error: true });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url]);
+    const { data, loading, error } = state;
+    if (loading) {
+        return (_jsx("div", { className: "flex-1 flex items-center justify-center text-sm text-muted-foreground p-12", children: "Loading..." }));
+    }
+    if (error || data == null) {
+        return (_jsx("div", { className: "flex-1 flex items-center justify-center text-sm text-muted-foreground p-12", children: "Failed to load JSON" }));
+    }
+    return (_jsx("div", { className: "flex-1 overflow-auto p-6", children: _jsx("div", { className: "font-mono text-sm max-w-5xl", children: _jsx(JsonNode, { value: data, depth: 0, defaultExpanded: defaultExpanded }) }) }));
+}
+// ---------------------------------------------------------------------------
+// JsonNode — recursive tree node
+// ---------------------------------------------------------------------------
+function JsonNode({ label, value, depth, defaultExpanded, }) {
+    const [expanded, setExpanded] = useState(depth < defaultExpanded);
+    if (value === null || value === undefined) {
+        return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsx("span", { className: "text-muted-foreground italic", children: "null" })] }));
+    }
+    if (typeof value === "boolean") {
+        return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsx("span", { className: "text-[var(--syntax-boolean)]", children: String(value) })] }));
+    }
+    if (typeof value === "number") {
+        return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsx("span", { className: "text-[var(--syntax-number)]", children: value })] }));
+    }
+    if (typeof value === "string") {
+        const display = value.length > 200 ? value.slice(0, 200) + "..." : value;
+        return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsxs("span", { className: "text-[var(--syntax-string)]", children: ["\"", display, "\""] })] }));
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsx("span", { className: "text-muted-foreground", children: "[]" })] }));
+        }
+        return (_jsxs("div", { children: [_jsxs(ToggleButton, { expanded: expanded, onToggle: () => setExpanded(!expanded), children: [label != null && _jsx(KeyLabel, { text: label }), _jsxs("span", { className: "text-muted-foreground ml-1", children: ["[", value.length, " items]"] })] }), expanded && (_jsx("div", { className: cn("border-l border-border ml-2 pl-3", depth > 4 && "ml-1 pl-2"), children: value.map((item, i) => (_jsx("div", { className: "py-0.5", children: _jsx(JsonNode, { label: String(i), value: item, depth: depth + 1, defaultExpanded: defaultExpanded }) }, i))) }))] }));
+    }
+    if (typeof value === "object") {
+        const entries = Object.entries(value);
+        if (entries.length === 0) {
+            return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsx("span", { className: "text-muted-foreground", children: "{}" })] }));
+        }
+        return (_jsxs("div", { children: [_jsxs(ToggleButton, { expanded: expanded, onToggle: () => setExpanded(!expanded), children: [label != null && _jsx(KeyLabel, { text: label }), _jsxs("span", { className: "text-muted-foreground ml-1", children: ["{", entries.length, " keys", "}"] })] }), expanded && (_jsx("div", { className: cn("border-l border-border ml-2 pl-3", depth > 4 && "ml-1 pl-2"), children: entries.map(([key, val]) => (_jsx("div", { className: "py-0.5", children: _jsx(JsonNode, { label: key, value: val, depth: depth + 1, defaultExpanded: defaultExpanded }) }, key))) }))] }));
+    }
+    return (_jsxs("span", { children: [label != null && _jsx(KeyLabel, { text: label }), _jsx("span", { children: String(value) })] }));
+}
+function KeyLabel({ text }) {
+    return _jsxs("span", { className: "text-[var(--syntax-key)]", children: [text, ": "] });
+}
+function ToggleButton({ expanded, onToggle, children, }) {
+    return (_jsxs("button", { type: "button", onClick: onToggle, className: "inline-flex items-center gap-0.5 hover:bg-muted/50 rounded px-0.5 -ml-0.5", children: [expanded ? (_jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "size-3.5 text-muted-foreground" })), children] }));
+}

package/dist/components/loading-indicator.d.ts

@@ -0,0 +1,13 @@
+/** Shimmer bar shown above the composer while the agent is running. */
+export declare function LoadingBar(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Inline status shown in the message area while the agent is running.
+ *
+ * Visible for the whole run (assistant-ui `running` gate) with the current
+ * phase, plus a distinct amber "stalled" treatment when no event or server
+ * heartbeat has arrived for a while — so a user can always tell "still
+ * working" from "connection is dead". A dead stream is additionally
+ * surfaced as an explicit run error by the runner; this indicator covers
+ * the in-flight phases.
+ */
+export declare function LoadingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/loading-indicator.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from "zustand";
+import { streamingStatusStore } from "@iloveagents/foundry-agent";
+function formatToolName(name) {
+    return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/** Shimmer bar shown above the composer while the agent is running. */
+export function LoadingBar() {
+    return (_jsx("div", { className: "w-full h-px bg-primary/30 overflow-hidden", children: _jsx("div", { className: "h-full w-1/4 bg-primary animate-[shimmer_1.5s_ease-in-out_infinite]" }) }));
+}
+/**
+ * Inline status shown in the message area while the agent is running.
+ *
+ * Visible for the whole run (assistant-ui `running` gate) with the current
+ * phase, plus a distinct amber "stalled" treatment when no event or server
+ * heartbeat has arrived for a while — so a user can always tell "still
+ * working" from "connection is dead". A dead stream is additionally
+ * surfaced as an explicit run error by the runner; this indicator covers
+ * the in-flight phases.
+ */
+export function LoadingIndicator() {
+    const streaming = useStore(streamingStatusStore, (s) => s.streamingStatus);
+    const stalled = streaming.status === "stalled";
+    let label = "Thinking";
+    if (stalled) {
+        label = "Still working — no signal from the agent";
+    }
+    else if (streaming.status === "calling" && streaming.toolName) {
+        label = `Running ${formatToolName(streaming.toolName)}`;
+    }
+    else if (streaming.status === "streaming") {
+        label = "Generating response";
+    }
+    return (_jsx("div", { className: "h-10 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-2 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: stalled ? "text-sm text-warning" : "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_infinite]` }), _jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_0.2s_infinite]` }), _jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_0.4s_infinite]` })] })] }) }));
+}

package/dist/components/markdown-text.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from "react";
+import type { Components } from "react-markdown";
+import { type ReactNode } from "react";
+/**
+ * Shared markdown component overrides used by both chat messages and the tool panel.
+ */
+export declare const markdownComponents: Components;
+/**
+ * Walk React children and replace [n] text fragments with CitationRef
+ * components. Only processes string children — leaves elements untouched.
+ */
+export declare function injectCitations(children: ReactNode): ReactNode;
+export declare const MarkdownText: FC;

package/dist/components/markdown-text.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useState } from "react";
+import { useMessagePartText } from "@assistant-ui/react";
+import remarkGfm from "remark-gfm";
+import ReactMarkdown from "react-markdown";
+import { Children } from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useStore } from "zustand";
+import { citationStore, linkStore, resolveLinkHandler, } from "@iloveagents/foundry-agent";
+/* ---------- Shared copy-to-clipboard button ---------- */
+const CopyButton = ({ text, className }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(() => {
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [text]);
+    return (_jsx("button", { type: "button", onClick: handleCopy, className: cn("flex items-center justify-center size-7 rounded-md", "hover:bg-muted/50 transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", className), "aria-label": "Copy code", children: copied ? (_jsx(Check, { className: "size-3.5 text-success" })) : (_jsx(Copy, { className: "size-3.5 text-muted-foreground" })) }));
+};
+/* ---------- Inline code ---------- */
+function textFromChildren(children) {
+    if (typeof children === "string")
+        return children;
+    if (typeof children === "number")
+        return String(children);
+    if (!Array.isArray(children))
+        return null;
+    let out = "";
+    for (const child of children) {
+        if (typeof child === "string" || typeof child === "number") {
+            out += String(child);
+        }
+        else {
+            return null;
+        }
+    }
+    return out;
+}
+function resolveHandledHref(rawHref) {
+    return resolveLinkHandler(rawHref)?.href ?? null;
+}
+function openHandledHref(href) {
+    const resolved = resolveLinkHandler(href);
+    resolved?.handler.openLink(resolved.href);
+}
+const TRAILING_LINK_PUNCT_RE = /[.,;:!?)\]]+$/;
+function trimLinkCandidate(value) {
+    const match = value.match(TRAILING_LINK_PUNCT_RE);
+    if (!match)
+        return { href: value, suffix: "" };
+    return {
+        href: value.slice(0, -match[0].length),
+        suffix: match[0],
+    };
+}
+function exactHandledHref(value) {
+    const trimmed = value.trim();
+    if (!trimmed || /\s/.test(trimmed))
+        return null;
+    const { href, suffix } = trimLinkCandidate(trimmed);
+    if (suffix)
+        return null;
+    return resolveHandledHref(href);
+}
+const HANDLED_LINK_RE = /(https?:\/\/[^\s<>"`]+|\/[A-Za-z0-9][^\s<>"`]*)/g;
+const HandledLink = ({ href, children, className, ...props }) => {
+    const handledHref = useStore(linkStore, () => resolveHandledHref(href));
+    if (!handledHref) {
+        return (_jsx("a", { href: href, className: cn("text-primary hover:underline", className), target: "_blank", rel: "noopener noreferrer", ...props, children: children }));
+    }
+    return (_jsx("a", { href: handledHref, className: cn("text-primary hover:underline", className), onClick: (event) => {
+            event.preventDefault();
+            openHandledHref(handledHref);
+        }, ...props, children: children }));
+};
+const AutoLinkedText = ({ text }) => {
+    useStore(linkStore, (s) => s.handlers);
+    const parts = [];
+    let lastIndex = 0;
+    for (const match of text.matchAll(HANDLED_LINK_RE)) {
+        const raw = match[0];
+        const start = match.index ?? 0;
+        const { href, suffix } = trimLinkCandidate(raw);
+        const handledHref = resolveHandledHref(href);
+        if (!handledHref)
+            continue;
+        if (start > lastIndex)
+            parts.push(text.slice(lastIndex, start));
+        parts.push(_jsx(HandledLink, { href: handledHref, children: href }, `${start}-${href}`));
+        if (suffix)
+            parts.push(suffix);
+        lastIndex = start + raw.length;
+    }
+    if (lastIndex === 0)
+        return _jsx(_Fragment, { children: text });
+    if (lastIndex < text.length)
+        parts.push(text.slice(lastIndex));
+    return _jsx(_Fragment, { children: parts });
+};
+const InlineCode = ({ children, ...props }) => {
+    const value = textFromChildren(children);
+    const handledHref = useStore(linkStore, () => (value ? exactHandledHref(value) : null));
+    const className = "rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-foreground";
+    if (handledHref) {
+        return (_jsx(HandledLink, { href: handledHref, className: className, children: children }));
+    }
+    return (_jsx("code", { className: className, ...props, children: children }));
+};
+/* ---------- Code block with header + copy action (used by ReactMarkdown / tool panel) ---------- */
+const HighlightedCodeBlock = ({ language, code }) => {
+    return (_jsxs("div", { className: "relative group my-4", children: [_jsxs("div", { className: cn("flex items-center justify-between", "rounded-t-lg bg-code-block px-4 py-2", "border-b border-border/30"), children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: language || "text" }), _jsx(CopyButton, { text: code })] }), _jsx("pre", { className: "rounded-b-lg bg-code-block p-4 overflow-x-auto text-sm font-mono text-code-block-foreground", children: _jsx("code", { children: code }) })] }));
+};
+/**
+ * Extracts language and raw code from the <code> child that ReactMarkdown
+ * renders inside <pre>. Returns { language, code } or null for non-code pre.
+ */
+function extractCodeInfo(children) {
+    const child = Array.isArray(children) ? children[0] : children;
+    if (child && typeof child === "object" && "props" in child && child.props) {
+        const className = child.props.className;
+        const lang = className?.match(/language-(\S+)/)?.[1];
+        const raw = child.props.children;
+        const code = typeof raw === "string" ? raw : Array.isArray(raw) ? raw.join("") : String(raw ?? "");
+        return { language: lang, code: code.replace(/\n$/, "") };
+    }
+    return null;
+}
+/* ---------- Shared markdown components (used by both chat + tool panel) ---------- */
+/**
+ * Shared markdown component overrides used by both chat messages and the tool panel.
+ */
+export const markdownComponents = {
+    h1: ({ children, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-foreground", ...props, children: children })),
+    h2: ({ children, ...props }) => (_jsx("h2", { className: "text-xl font-bold mt-5 mb-3 text-foreground", ...props, children: children })),
+    h3: ({ children, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 mb-2 text-foreground", ...props, children: children })),
+    h4: ({ children, ...props }) => (_jsx("h4", { className: "text-base font-semibold mt-3 mb-1.5 text-foreground", ...props, children: children })),
+    p: ({ children, ...props }) => (_jsx("p", { className: "mb-2 leading-relaxed text-foreground", ...props, children: injectCitations(children) })),
+    ul: ({ children, ...props }) => (_jsx("ul", { className: "list-disc list-outside pl-6 mb-4 space-y-1 text-foreground", ...props, children: children })),
+    ol: ({ children, ...props }) => (_jsx("ol", { className: "list-decimal list-outside pl-6 mb-4 space-y-1 text-foreground", ...props, children: children })),
+    li: ({ children, ...props }) => (_jsx("li", { className: "text-foreground", ...props, children: injectCitations(children) })),
+    pre: ({ children }) => {
+        const info = extractCodeInfo(children);
+        if (info) {
+            return _jsx(HighlightedCodeBlock, { language: info.language, code: info.code });
+        }
+        return (_jsx("pre", { className: "rounded-lg bg-code-block p-4 overflow-x-auto text-sm font-mono text-code-block-foreground my-4", children: children }));
+    },
+    code: ({ className, children, ...props }) => {
+        // Fenced code blocks are wrapped in <pre><code> — the pre handles styling.
+        // Only inline code (no language class, not inside pre) gets the InlineCode style.
+        if (className?.includes("language-")) {
+            return _jsx("code", { ...props, children: children });
+        }
+        return _jsx(InlineCode, { ...props, children: children });
+    },
+    blockquote: ({ children, ...props }) => (_jsx("blockquote", { className: "border-l-4 border-primary pl-4 py-2 my-4 italic text-muted-foreground", ...props, children: children })),
+    a: ({ children, href, ...props }) => (_jsx(HandledLink, { href: href || "", ...props, children: children })),
+    hr: (props) => _jsx("hr", { className: "my-6 border-border", ...props }),
+    table: ({ children, ...props }) => (_jsx("div", { className: "overflow-x-auto my-4", children: _jsx("table", { className: "min-w-full divide-y divide-border", ...props, children: children }) })),
+    thead: ({ children, ...props }) => (_jsx("thead", { className: "bg-muted", ...props, children: children })),
+    tbody: ({ children, ...props }) => (_jsx("tbody", { className: "divide-y divide-border", ...props, children: children })),
+    tr: ({ children, ...props }) => _jsx("tr", { ...props, children: children }),
+    th: ({ children, ...props }) => (_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold text-foreground", ...props, children: children })),
+    td: ({ children, ...props }) => (_jsx("td", { className: "px-4 py-2 text-sm text-foreground", ...props, children: children })),
+    strong: ({ children, ...props }) => (_jsx("strong", { className: "font-bold", ...props, children: children })),
+    em: ({ children, ...props }) => (_jsx("em", { className: "italic", ...props, children: children })),
+};
+/* ---------- Inline [n] citations (React-level, no remark plugin) ---------- */
+const CITE_RE = /(\[\d+\])/;
+/** Open a citation via the registered handler (provided by feature modules). */
+function openCitation(result) {
+    const handler = citationStore.getState().handler;
+    if (handler)
+        handler.openCitation(result);
+}
+/** Clickable superscript citation: [1] → opens via registered handler. */
+const CitationRef = ({ index }) => {
+    const result = useStore(citationStore, (s) => s.results[index - 1]);
+    const hasHandler = useStore(citationStore, (s) => !!s.handler);
+    if (!result)
+        return _jsxs("span", { className: "text-muted-foreground", children: ["[", index, "]"] });
+    if (!hasHandler)
+        return _jsxs("span", { className: "text-muted-foreground", children: ["[", index, "]"] });
+    return (_jsx("span", { role: "button", tabIndex: 0, onClick: () => openCitation(result), onKeyDown: (e) => {
+            if (e.key === "Enter")
+                openCitation(result);
+        }, title: `${result.entity_name}, p. ${result.page_number}`, className: "inline-flex items-center text-primary font-semibold cursor-pointer hover:underline", children: _jsxs("sup", { className: "text-[0.7em] ml-0.5", children: ["[", index, "]"] }) }));
+};
+/**
+ * Walk React children and replace [n] text fragments with CitationRef
+ * components. Only processes string children — leaves elements untouched.
+ */
+export function injectCitations(children) {
+    return Children.map(children, (child) => {
+        if (typeof child === "string") {
+            if (!CITE_RE.test(child))
+                return _jsx(AutoLinkedText, { text: child });
+            const parts = child.split(CITE_RE);
+            return parts.map((part, i) => {
+                const m = /^\[(\d+)\]$/.exec(part);
+                if (m)
+                    return _jsx(CitationRef, { index: parseInt(m[1], 10) }, i);
+                return _jsx(AutoLinkedText, { text: part }, i);
+            });
+        }
+        if (!isValidElement(child))
+            return child;
+        const element = child;
+        const nested = element.props.children;
+        if (nested == null)
+            return child;
+        return cloneElement(element, undefined, injectCitations(nested));
+    });
+}
+/* ---------- MarkdownText (chat messages) ---------- */
+export const MarkdownText = () => {
+    const part = useMessagePartText();
+    return (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: part.text }));
+};

package/dist/components/message-error.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+/**
+ * Visible, styled run-error for an assistant message — rendered whenever the
+ * message settled with an error status (agent RUN_ERROR, lost connection,
+ * transport failure). Shared by the full-page thread and the compact chat
+ * bubble so a failed run is NEVER silent in either surface.
+ */
+export declare const MessageError: FC<{
+    compact?: boolean;
+}>;

package/dist/components/message-error.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessagePrimitive, ErrorPrimitive } from "@assistant-ui/react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+/**
+ * Visible, styled run-error for an assistant message — rendered whenever the
+ * message settled with an error status (agent RUN_ERROR, lost connection,
+ * transport failure). Shared by the full-page thread and the compact chat
+ * bubble so a failed run is NEVER silent in either surface.
+ */
+export const MessageError = ({ compact }) => (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { className: cn("mt-2 rounded-lg border border-destructive bg-destructive/10", compact ? "p-2" : "p-3"), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn("font-medium text-destructive", compact ? "text-xs" : "text-sm"), children: "Error:" }), _jsx(ErrorPrimitive.Message, { className: cn("text-destructive", compact ? "text-xs" : "text-sm") })] }) }) }));