@iloveagents/foundry-web-ui 0.3.1 → 0.4.0

package/dist/index.js

@@ -0,0 +1,83 @@
+// --- Components ---
+export { Sidebar } from "./components/sidebar.js";
+export { ToolPanel } from "./components/tool-panel.js";
+export { ToolPanelLayout } from "./components/tool-panel-layout.js";
+export { MarkdownText, markdownComponents } from "./components/markdown-text.js";
+export { ClientToolExecutor } from "./components/client-tool-executor.js";
+export { AGUIRuntimeProvider, useAGUIAdapter } 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 { 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 { ToolFallback } from "./components/tool-fallback.js";
+export { ConfirmationCard } from "./components/confirmation-card.js";
+export { TooltipIconButton } from "./components/tooltip-icon-button.js";
+export { ComposerContextBadges, SentContextBadges } from "./components/context-badges.js";
+export { ContextPins } from "./components/context-bar.js";
+export { SelectionPopover } from "./components/selection-popover.js";
+export { GlobalSelectionPopover } from "./components/global-selection-popover.js";
+export { LoadingIndicator } from "./components/loading-indicator.js";
+export { ThemeToggle } from "./components/theme-toggle.js";
+export { AppBrand } from "./components/app-brand.js";
+export { CollectionToolbar } from "./components/collection-toolbar.js";
+export { CollectionSearchInput } from "./components/collection-search-input.js";
+export { CollectionFilterBar, } from "./components/collection-filter-bar.js";
+export { CollectionSortMenu, } from "./components/collection-sort-menu.js";
+export { CollectionViewToggle, } from "./components/collection-view-toggle.js";
+export { CollectionEmptyState } from "./components/collection-empty-state.js";
+export { CollectionSkeleton } from "./components/collection-skeleton.js";
+export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel.js";
+export { CollectionSurface } from "./components/collection-surface.js";
+export { ThemeRuntimeProvider, ThemeScope, ThemeDocumentMetadata, useThemeRuntime, } from "./components/theme-runtime-provider.js";
+export { JsonViewer } from "./components/json-viewer.js";
+export { UserMenu } from "./components/user-menu.js";
+export { FormDialog } from "./components/form-dialog.js";
+export { ConfirmDialog } from "./components/confirm-dialog.js";
+export { NameDialog } from "./components/name-dialog.js";
+export { SurfaceCard, surfaceCardVariants } from "./components/surface-card.js";
+// --- Composite UI primitives (theme-runtime-coupled — stay here for now) ---
+// Button, Checkbox, Input, Textarea, Field, FieldSet have moved to
+// @iloveagents/foundry-web-primitives (#94). The primitives below have a runtime
+// coupling to ThemeScope (theme-runtime-provider.tsx) — they need a
+// theme-system refactor before they can move to the leaf primitives
+// package. Tracked for a follow-up under #95/#96.
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./ui/tooltip.js";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./ui/collapsible.js";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, } from "./ui/dropdown-menu.js";
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from "./ui/dialog.js";
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "./ui/popover.js";
+export { Select, selectClassName } from "./ui/select.js";
+// --- Stores ---
+export { useAppStore } from "./lib/app-store.js";
+export { useNavStore } from "./lib/nav-store.js";
+export { useToolPanelStore } from "./lib/tool-panel-store.js";
+export { useSidebarStore, SIDEBAR_WIDTH, RAIL_WIDTH } from "./lib/sidebar-store.js";
+export { useChatBubbleStore } from "./lib/chat-bubble-store.js";
+export { useChatLifecycleStore } from "./lib/chat-lifecycle-store.js";
+export { submitComposerText } from "./lib/composer-submit-store.js";
+export { registerSelectionContextResolver, resolveSelectionContext, } from "./lib/selection-context.js";
+export { useThemeStore } from "./lib/theme-store.js";
+export { mergeThemeDefinitions, resolveThemeRuntime, getEffectiveThemeMode, getThemePreset, } from "./lib/theme-runtime.js";
+// Stores moved to @iloveagents/foundry-agent (#95): authStore, citationStore,
+// streamingStatusStore, clientToolRegistry. Consumers import directly from
+// `@iloveagents/foundry-agent` / `@iloveagents/foundry-agent/msal` — no re-exports here per
+// the no-shim rule.
+export { useDevStore } from "./lib/dev-store.js";
+// --- Nav types ---
+export { DEFAULT_NAV_CONFIG, findNavItem } from "./lib/nav-config.js";
+// --- Hooks ---
+export { usePageTools } from "./lib/use-page-tools.js";
+export { useNewConversation } from "./lib/use-new-conversation.js";
+// --- Adapters ---
+export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.js";
+export { FileAttachmentAdapter } from "./lib/attachment-adapter.js";
+// --- Auth ---
+// `AuthProvider` is the React MSAL bootstrap (uses `@azure/msal-react`).
+// Token store, config, fetch wrapper all live in `@iloveagents/foundry-agent/msal`.
+export { AuthProvider } from "./lib/auth-provider.js";
+// --- Utils ---
+// `cn` is sourced from @iloveagents/foundry-web-primitives (the leaf primitives package).
+// Re-exporting here would create two canonical sources for the same
+// utility — banned per the "no shims" pre-1.0 rule (#90).

package/dist/lib/ag-ui-adapter.d.ts

@@ -0,0 +1,29 @@
+/**
+ * AG-UI Adapter for assistant-ui.
+ *
+ * Thin shim around `@iloveagents/foundry-agent`'s `AGUIRunner`:
+ *   - converts assistant-ui `Message[]` → AG-UI `Message[]` on input,
+ *   - feeds the runner, drains its `RunnerEvent` stream,
+ *   - accumulates text + tool-call state,
+ *   - yields cumulative `ChatModelRunResult` snapshots (assistant-ui requires
+ *     each yield to carry the *complete* content array — never deltas).
+ *
+ * Wires the React-only stores that don't belong in `@iloveagents/foundry-agent`:
+ *   - `useAppStore` for context-item snapshot + lifecycle hooks
+ *   - `useDevStore` for dev-panel request/tool capture (driven by the
+ *     runner's `request-sent` event).
+ *
+ * @see https://docs.ag-ui.com/sdk/js/client/http-agent
+ * @see https://www.assistant-ui.com/docs/runtimes/custom/local
+ */
+import type { ChatModelAdapter, ChatModelRunOptions, ChatModelRunResult } from "@assistant-ui/react";
+export declare class AGUIAdapterSDK implements ChatModelAdapter {
+    private readonly runner;
+    constructor(url?: string, options?: {
+        threadId?: string;
+        fetchFn?: typeof fetch;
+    });
+    get threadId(): string;
+    get state(): unknown;
+    run({ messages, abortSignal }: ChatModelRunOptions): AsyncGenerator<ChatModelRunResult>;
+}

package/dist/lib/ag-ui-adapter.js

@@ -0,0 +1,373 @@
+/**
+ * AG-UI Adapter for assistant-ui.
+ *
+ * Thin shim around `@iloveagents/foundry-agent`'s `AGUIRunner`:
+ *   - converts assistant-ui `Message[]` → AG-UI `Message[]` on input,
+ *   - feeds the runner, drains its `RunnerEvent` stream,
+ *   - accumulates text + tool-call state,
+ *   - yields cumulative `ChatModelRunResult` snapshots (assistant-ui requires
+ *     each yield to carry the *complete* content array — never deltas).
+ *
+ * Wires the React-only stores that don't belong in `@iloveagents/foundry-agent`:
+ *   - `useAppStore` for context-item snapshot + lifecycle hooks
+ *   - `useDevStore` for dev-panel request/tool capture (driven by the
+ *     runner's `request-sent` event).
+ *
+ * @see https://docs.ag-ui.com/sdk/js/client/http-agent
+ * @see https://www.assistant-ui.com/docs/runtimes/custom/local
+ */
+import { AGUIRunner, clientToolRegistry, streamingStatusStore } from "@iloveagents/foundry-agent";
+import { tokenFetch } from "@iloveagents/foundry-agent/msal";
+import { useAppStore } from "./app-store.js";
+import { useDevStore } from "./dev-store.js";
+export class AGUIAdapterSDK {
+    constructor(url = "/api/agent", options) {
+        this.runner = new AGUIRunner({
+            url,
+            threadId: options?.threadId,
+            fetchFn: options?.fetchFn ?? tokenFetch,
+        });
+    }
+    get threadId() {
+        return this.runner.threadId;
+    }
+    get state() {
+        return this.runner.state;
+    }
+    async *run({ messages, abortSignal }) {
+        const aguiMessages = convertMessagesToAGUI(messages);
+        // App-level lifecycle: mark thread active, snapshot context, consume
+        // ephemeral context off the last user message.
+        useAppStore.getState().markThreadActive();
+        const appState = useAppStore.getState().getAgentState();
+        const context = buildAGUIContext(appState);
+        const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
+        if (lastUserMsg) {
+            useAppStore.getState().consumeContextForMessage(lastUserMsg.id);
+        }
+        let currentText = "";
+        const toolCalls = new Map();
+        let runError = null;
+        /**
+         * Build a `ChatModelRunResult` from the accumulated state.
+         *
+         * Per assistant-ui v0.12 contract, every yield must carry the COMPLETE
+         * cumulative content array (not deltas). The runner drives multi-turn
+         * follow-ups internally; we yield `running` for every intermediate
+         * yield, then a single terminal `complete` after the runner's
+         * generator returns. assistant-ui leaves the message stuck in the
+         * loading state if the last yield's status is `running`.
+         */
+        const buildResult = (statusOverride) => {
+            const content = [];
+            for (const [id, tc] of toolCalls) {
+                let parsedArgs = {};
+                try {
+                    parsedArgs = JSON.parse(tc.args || "{}");
+                }
+                catch {
+                    // Keep empty object for invalid JSON
+                }
+                content.push({
+                    type: "tool-call",
+                    toolCallId: id,
+                    toolName: tc.name,
+                    args: parsedArgs,
+                    argsText: tc.args,
+                    result: tc.result,
+                    isError: tc.isError,
+                });
+            }
+            if (currentText) {
+                content.push({ type: "text", text: currentText });
+            }
+            const status = statusOverride ?? { type: "running" };
+            return {
+                content,
+                status,
+                metadata: {
+                    custom: {
+                        threadId: this.runner.threadId,
+                        timestamp: Date.now(),
+                        state: this.runner.state,
+                    },
+                },
+            };
+        };
+        try {
+            for await (const event of this.runner.run({
+                messages: aguiMessages,
+                state: appState,
+                context,
+                registry: clientToolRegistry.getState(),
+                abortSignal,
+            })) {
+                let shouldYield = false;
+                switch (event.type) {
+                    case "request-sent":
+                        if (import.meta.env.DEV) {
+                            useDevStore.getState().captureRequest(event.input);
+                        }
+                        break;
+                    case "turn-started":
+                        currentText = "";
+                        shouldYield = true;
+                        break;
+                    case "run-started":
+                        // Per-turn signal — the runner may issue multiple turns for
+                        // multi-turn tool follow-ups. Terminal completion is yielded
+                        // post-loop, not on the per-turn run-finished.
+                        break;
+                    case "run-finished":
+                        // Intermediate yield — keeps the message in the running state
+                        // while the runner decides whether to re-issue.
+                        shouldYield = true;
+                        break;
+                    case "run-error":
+                        runError = event.message;
+                        console.error("Run error:", event.message);
+                        shouldYield = true;
+                        break;
+                    case "streaming-status":
+                        streamingStatusStore.getState().setStreamingStatus(event.status);
+                        break;
+                    case "text-delta":
+                        currentText += event.delta;
+                        shouldYield = true;
+                        break;
+                    case "text-message-end":
+                        shouldYield = true;
+                        break;
+                    case "tool-call-start":
+                        toolCalls.set(event.id, { id: event.id, name: event.name, args: "" });
+                        if (import.meta.env.DEV) {
+                            useDevStore.getState().addToolCall({
+                                id: event.id,
+                                name: event.name,
+                                args: "",
+                                isClientSide: event.isClientSide,
+                                timestamp: Date.now(),
+                            });
+                        }
+                        shouldYield = true;
+                        break;
+                    case "tool-call-args": {
+                        const tc = toolCalls.get(event.id);
+                        if (tc) {
+                            tc.args += event.delta;
+                            shouldYield = true;
+                        }
+                        break;
+                    }
+                    case "tool-call-end": {
+                        const tc = toolCalls.get(event.id);
+                        if (tc) {
+                            tc.args = event.args;
+                            if (event.result !== undefined)
+                                tc.result = event.result;
+                            if (event.isError !== undefined)
+                                tc.isError = event.isError;
+                            if (import.meta.env.DEV) {
+                                useDevStore.getState().updateToolCall(event.id, {
+                                    args: tc.args,
+                                    result: tc.result,
+                                });
+                            }
+                            shouldYield = true;
+                        }
+                        break;
+                    }
+                    case "tool-call-result": {
+                        const tc = toolCalls.get(event.id);
+                        if (tc) {
+                            tc.result = event.result;
+                            tc.isError = event.isError;
+                            if (import.meta.env.DEV) {
+                                useDevStore.getState().updateToolCall(event.id, {
+                                    result: tc.result,
+                                });
+                            }
+                            shouldYield = true;
+                        }
+                        break;
+                    }
+                }
+                if (shouldYield) {
+                    const result = buildResult();
+                    if ((result.content?.length ?? 0) > 0) {
+                        yield result;
+                    }
+                }
+            }
+            // Terminal yield — runner generator returned. assistant-ui leaves
+            // the message stuck in the loading state if the last yield's
+            // `status` is `running`, so we always emit a final settle once the
+            // runner is fully done (after every turn + every follow-up).
+            //
+            // If the run errored (the AG-UI backend emitted RUN_ERROR — e.g. the
+            // agent exhausted rate-limit/transient retries, or a non-retryable
+            // 4xx), settle as `incomplete`/`error` instead of `complete`/`stop`,
+            // carrying the error message. This keeps any partial content AND
+            // flips the message into assistant-ui's error state so the existing
+            // `<MessagePrimitive.Error>` renders a visible, retryable error —
+            // not a silent empty bubble. We yield the terminal status rather
+            // than throwing; an unhandled throw re-introduces the stuck-running
+            // bug (the runner generator has already returned here).
+            if (runError !== null) {
+                yield buildResult({
+                    type: "incomplete",
+                    reason: "error",
+                    error: runError || "The run failed.",
+                });
+            }
+            else {
+                yield buildResult({ type: "complete", reason: "stop" });
+            }
+        }
+        finally {
+            streamingStatusStore.getState().setStreamingStatus({ status: "idle" });
+        }
+    }
+}
+function buildAGUIContext(appState) {
+    return appState.contextItems.map((item, index) => ({
+        description: describeContextItem(item, index),
+        value: stringifyContextItem(item),
+    }));
+}
+function describeContextItem(item, index) {
+    const type = typeof item.type === "string" ? item.type : "context";
+    const label = typeof item.label === "string" ? item.label : "";
+    if (type === "ref") {
+        const refType = typeof item.refType === "string" ? item.refType : "reference";
+        const target = isRecord(item.target) ? item.target : undefined;
+        const targetPath = typeof item.targetPath === "string"
+            ? item.targetPath
+            : typeof target?.path === "string"
+                ? target.path
+                : undefined;
+        const targetLabel = typeof target?.label === "string" ? target.label : undefined;
+        const targetScope = typeof target?.scope === "string" ? target.scope : undefined;
+        if (targetPath) {
+            if (!targetLabel && !targetScope) {
+                return `Selected ${refType} atom. Use targetPath as the exact edit target when the user asks to modify, rewrite, or transform selected content.`;
+            }
+            const targetText = targetLabel || targetScope || "JSON atom";
+            return `Selected ${refType} ${targetText}. Use targetPath as the exact JSON edit target when the user asks to modify, rewrite, or transform this reference.`;
+        }
+        return `Selected ${refType} reference. Use refId as the edit target when the user asks to modify, rewrite, or transform selected content.`;
+    }
+    if (type === "selection") {
+        return "Selected text from the current UI. Use it as the focus when the user asks about, rewrites, or modifies selected content.";
+    }
+    if (type === "page") {
+        return `Pinned page context${label ? `: ${label}` : ""}.`;
+    }
+    return `Context item ${index + 1}${label ? `: ${label}` : ""}.`;
+}
+function stringifyContextItem(item) {
+    try {
+        return JSON.stringify(item);
+    }
+    catch {
+        const type = typeof item.type === "string" ? item.type : "context";
+        const label = typeof item.label === "string" ? item.label : "";
+        return JSON.stringify({ type, label });
+    }
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+ * Convert assistant-ui's `Message[]` into AG-UI's wire format.
+ *
+ * Our Python backend doesn't keep server-side thread state, so prior turns'
+ * tool calls + results need to ride along on every request.
+ */
+function convertMessagesToAGUI(messages) {
+    const out = [];
+    for (let idx = 0; idx < messages.length; idx++) {
+        const msg = messages[idx];
+        const id = msg.id || `msg-${idx}`;
+        const textContent = msg.content
+            .filter((c) => c.type === "text")
+            .map((c) => c.text)
+            .join("\n");
+        if (msg.role === "system") {
+            out.push({ id, role: "system", content: textContent });
+            continue;
+        }
+        if (msg.role === "assistant") {
+            const toolCallParts = msg.content.filter((c) => c.type === "tool-call");
+            if (toolCallParts.length > 0) {
+                out.push({
+                    id,
+                    role: "assistant",
+                    content: textContent || undefined,
+                    toolCalls: toolCallParts.map((tc) => ({
+                        id: tc.toolCallId,
+                        type: "function",
+                        function: {
+                            name: tc.toolName,
+                            arguments: tc.argsText ?? JSON.stringify(tc.args ?? {}),
+                        },
+                    })),
+                });
+                for (const tc of toolCallParts) {
+                    if (tc.result !== undefined) {
+                        out.push({
+                            id: `tool-result-${tc.toolCallId}`,
+                            role: "tool",
+                            toolCallId: tc.toolCallId,
+                            content: typeof tc.result === "string" ? tc.result : JSON.stringify(tc.result),
+                        });
+                    }
+                }
+            }
+            else {
+                out.push({ id, role: "assistant", content: textContent });
+            }
+            continue;
+        }
+        // User role: extract binary attachments if present
+        const parts = [];
+        for (const c of msg.content) {
+            if (c.type === "text") {
+                parts.push({ type: "text", text: c.text });
+            }
+        }
+        if ("attachments" in msg && Array.isArray(msg.attachments)) {
+            for (const att of msg.attachments) {
+                if (!att.content)
+                    continue;
+                for (const part of att.content) {
+                    if (part.type === "text") {
+                        parts.push({ type: "text", text: part.text });
+                    }
+                    else if (part.type === "file" && "data" in part) {
+                        parts.push({
+                            type: "binary",
+                            mimeType: part.mimeType,
+                            data: part.data,
+                            filename: part.filename,
+                        });
+                    }
+                    else if (part.type === "image" && "image" in part) {
+                        parts.push({
+                            type: "binary",
+                            mimeType: "image/*",
+                            data: part.image,
+                        });
+                    }
+                }
+            }
+        }
+        const hasBinary = parts.some((p) => p.type === "binary");
+        const textWithAttachments = parts
+            .filter((p) => p.type === "text")
+            .map((p) => p.text)
+            .join("\n");
+        out.push({ id, role: "user", content: hasBinary ? parts : textWithAttachments });
+    }
+    return out;
+}

package/dist/lib/app-store.d.ts

@@ -0,0 +1,115 @@
+/**
+ * App Store — unified shared state for the AG-UI multi-page application.
+ *
+ * - Navigation context (synced from nav store via app-layout)
+ * - Persistent vs ephemeral context lifecycle
+ * - Shared UI state (selectedItemId, content, highlights)
+ * - Strict AG-UI state projection sent to the agent on every request
+ */
+export type ContextPersistence = "persistent" | "ephemeral";
+export interface TextPayload {
+    kind: "text";
+    text: string;
+}
+export interface PagePayload {
+    kind: "page";
+    path: string;
+    label: string;
+    meta?: Record<string, unknown>;
+}
+export interface ReferencePayload {
+    kind: "ref";
+    /** Domain decides: "block", "entity", "row", "cell", etc. */
+    refType: string;
+    /** Domain-specific ID: "entityId:blockId", "table:row", etc. */
+    refId: string;
+    /** Optional display text (~100 chars) */
+    preview?: string;
+    /**
+     * Optional exact JSON target inside the referenced domain object.
+     *
+     * This keeps the existing refType/refId contract stable for deep links
+     * while allowing feature modules to target one schema-declared field,
+     * table cell, JSON atom, or app-defined custom value precisely.
+     */
+    target?: {
+        kind?: string;
+        path?: string;
+        label?: string;
+        scope?: string;
+        containerId?: string;
+        containerLabel?: string;
+        currentValue?: unknown;
+        proposedValue?: unknown;
+        changeIds?: string[];
+        meta?: Record<string, unknown>;
+    };
+    /** Domain-specific data the agent can use */
+    meta?: Record<string, unknown>;
+}
+export type ContextPayload = TextPayload | PagePayload | ReferencePayload;
+export type ContextItemType = "selection" | "page" | "ref" | "note";
+export interface ContextItem {
+    id: string;
+    type: ContextItemType;
+    label: string;
+    payload: ContextPayload;
+    sourcePage: string;
+    persistence: ContextPersistence;
+    createdAt: number;
+}
+export interface NavContext {
+    group: string | null;
+    groupDescription: string | null;
+    groupMeta: Record<string, unknown>;
+    label: string;
+    description: string | null;
+    meta: Record<string, unknown>;
+    /** Merged instructions from group + page (assembled by app-layout from hierarchy) */
+    contextInstructions: string | null;
+}
+export interface AgentStateProjection {
+    navigation: {
+        group: string | null;
+        groupDescription: string | null;
+        groupMeta: Record<string, unknown>;
+        page: string;
+        label: string;
+        description: string | null;
+        meta: Record<string, unknown>;
+        contextInstructions: string | null;
+    };
+    selectedItemId: string | null;
+    content: Record<string, unknown>;
+    highlights: string[];
+    /** Compact context items — text truncated, pages as paths, refs as IDs */
+    contextItems: Array<Record<string, unknown>>;
+}
+interface AppState {
+    threadActive: boolean;
+    markThreadActive: () => void;
+    currentPage: string;
+    setCurrentPage: (page: string) => void;
+    navContext: NavContext;
+    setNavContext: (ctx: NavContext) => void;
+    selectedItemId: string | null;
+    setSelectedItemId: (id: string | null) => void;
+    content: Record<string, unknown>;
+    updateContentField: (key: string, value: unknown) => void;
+    clearContent: () => void;
+    highlights: string[];
+    addHighlight: (id: string) => void;
+    removeHighlight: (id: string) => void;
+    clearHighlights: () => void;
+    contextItems: ContextItem[];
+    sentContext: Record<string, ContextItem[]>;
+    addContextItem: (item: Omit<ContextItem, "id" | "createdAt">) => void;
+    removeContextItem: (id: string) => void;
+    promoteContextItem: (id: string) => void;
+    clearAllContext: () => void;
+    consumeContextForMessage: (messageId: string) => ContextItem[];
+    getAgentState: () => AgentStateProjection;
+    resetAll: () => void;
+}
+export declare const useAppStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AppState>>;
+export {};