@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/dist/lib/app-store.js

@@ -0,0 +1,199 @@
+/**
+ * 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
+ */
+import { create } from "zustand";
+const MAX_ITEMS = 10;
+const MAX_LABEL_LENGTH = 500;
+const MAX_CONTEXT_VALUE_LENGTH = 2000;
+const TRUNCATION_SUFFIX = "...";
+const DEFAULT_NAV_CONTEXT = {
+    group: null,
+    groupDescription: null,
+    groupMeta: {},
+    label: "Chat",
+    description: null,
+    meta: {},
+    contextInstructions: null,
+};
+function refDedupKey(payload) {
+    const selectionScope = typeof payload.meta?.selectionScope === "string" ? payload.meta.selectionScope : "block";
+    const targetPath = typeof payload.target?.path === "string"
+        ? payload.target.path
+        : typeof payload.meta?.targetPath === "string"
+            ? payload.meta.targetPath
+            : undefined;
+    if (selectionScope === "atom" && targetPath) {
+        return `${payload.refType}:${payload.refId}:atom:${targetPath}`;
+    }
+    if (selectionScope === "text") {
+        return `${payload.refType}:${payload.refId}:text:${payload.preview ?? ""}`;
+    }
+    return `${payload.refType}:${payload.refId}:block`;
+}
+function compactContextValue(value) {
+    if (typeof value === "string" && value.length > MAX_CONTEXT_VALUE_LENGTH) {
+        return `${value.slice(0, MAX_CONTEXT_VALUE_LENGTH - TRUNCATION_SUFFIX.length)}${TRUNCATION_SUFFIX}`;
+    }
+    return value;
+}
+function compactReferenceTarget(target) {
+    if (!target)
+        return undefined;
+    return {
+        ...target,
+        currentValue: compactContextValue(target.currentValue),
+        proposedValue: compactContextValue(target.proposedValue),
+    };
+}
+export const useAppStore = create((set, get) => ({
+    // Thread state
+    threadActive: false,
+    markThreadActive: () => set({ threadActive: true }),
+    // Current page
+    currentPage: "/chat",
+    setCurrentPage: (page) => {
+        const prev = get().currentPage;
+        if (prev === page)
+            return;
+        // Clear ephemeral context on navigation
+        set({
+            currentPage: page,
+            contextItems: get().contextItems.filter((i) => i.persistence !== "ephemeral"),
+        });
+    },
+    // Navigation context
+    navContext: DEFAULT_NAV_CONTEXT,
+    setNavContext: (ctx) => set({ navContext: ctx }),
+    // Shared UI state
+    selectedItemId: null,
+    setSelectedItemId: (id) => set({ selectedItemId: id }),
+    content: {},
+    updateContentField: (key, value) => set({ content: { ...get().content, [key]: value } }),
+    clearContent: () => set({ content: {} }),
+    highlights: [],
+    addHighlight: (id) => {
+        const { highlights } = get();
+        if (!highlights.includes(id)) {
+            set({ highlights: [...highlights, id] });
+        }
+    },
+    removeHighlight: (id) => set({ highlights: get().highlights.filter((h) => h !== id) }),
+    clearHighlights: () => set({ highlights: [] }),
+    // Context items
+    contextItems: [],
+    sentContext: {},
+    addContextItem: (item) => {
+        const { contextItems } = get();
+        // Deduplicate by type-specific key
+        const isDuplicate = contextItems.some((existing) => {
+            if (item.type === "page" && existing.type === "page") {
+                const a = item.payload;
+                const b = existing.payload;
+                return a.path === b.path;
+            }
+            if (item.type === "ref" && existing.type === "ref") {
+                const a = item.payload;
+                const b = existing.payload;
+                return refDedupKey(a) === refDedupKey(b);
+            }
+            // selection / note: dedup by label + sourcePage
+            return existing.label === item.label && existing.sourcePage === item.sourcePage;
+        });
+        if (isDuplicate)
+            return;
+        if (contextItems.length >= MAX_ITEMS)
+            return;
+        const label = item.label.length > MAX_LABEL_LENGTH
+            ? item.label.slice(0, MAX_LABEL_LENGTH) + "..."
+            : item.label;
+        set({
+            contextItems: [
+                ...contextItems,
+                { ...item, label, id: crypto.randomUUID(), createdAt: Date.now() },
+            ],
+        });
+    },
+    removeContextItem: (id) => set({ contextItems: get().contextItems.filter((i) => i.id !== id) }),
+    promoteContextItem: (id) => set({
+        contextItems: get().contextItems.map((i) => i.id === id ? { ...i, persistence: "persistent" } : i),
+    }),
+    clearAllContext: () => set({ contextItems: [], sentContext: {} }),
+    consumeContextForMessage: (messageId) => {
+        const { contextItems, sentContext } = get();
+        if (contextItems.length === 0)
+            return [];
+        const snapshot = [...contextItems];
+        // Keep persistent, remove ephemeral
+        set({
+            contextItems: contextItems.filter((i) => i.persistence === "persistent"),
+            sentContext: { ...sentContext, [messageId]: snapshot },
+        });
+        return snapshot;
+    },
+    // AG-UI state projection
+    getAgentState: () => {
+        const s = get();
+        return {
+            navigation: {
+                group: s.navContext.group,
+                groupDescription: s.navContext.groupDescription,
+                groupMeta: s.navContext.groupMeta,
+                page: s.currentPage,
+                label: s.navContext.label,
+                description: s.navContext.description,
+                meta: s.navContext.meta,
+                contextInstructions: s.navContext.contextInstructions,
+            },
+            selectedItemId: s.selectedItemId,
+            content: s.content,
+            highlights: s.highlights,
+            contextItems: s.contextItems.map(({ type, label, payload, sourcePage }) => {
+                switch (payload.kind) {
+                    case "text":
+                        return {
+                            type,
+                            label: label.slice(0, 200),
+                            text: payload.text.slice(0, 500),
+                            sourcePage,
+                        };
+                    case "page":
+                        return { type, label, path: payload.path, sourcePage };
+                    case "ref":
+                        return {
+                            type,
+                            label: label.slice(0, 200),
+                            refType: payload.refType,
+                            refId: payload.refId,
+                            preview: payload.preview?.slice(0, 100),
+                            target: compactReferenceTarget(payload.target),
+                            meta: payload.meta,
+                            targetPath: typeof payload.target?.path === "string"
+                                ? payload.target.path
+                                : typeof payload.meta?.targetPath === "string"
+                                    ? payload.meta.targetPath
+                                    : undefined,
+                            sourcePage,
+                        };
+                    default:
+                        return { type, label, sourcePage };
+                }
+            }),
+        };
+    },
+    // Full reset
+    resetAll: () => set({
+        threadActive: false,
+        currentPage: "/chat",
+        navContext: DEFAULT_NAV_CONTEXT,
+        selectedItemId: null,
+        content: {},
+        highlights: [],
+        contextItems: [],
+        sentContext: {},
+    }),
+}));

package/dist/lib/attachment-adapter.d.ts

@@ -0,0 +1,20 @@
+/**
+ * File attachment adapter for assistant-ui.
+ *
+ * Reads image files client-side as base64 and produces FileMessagePart content.
+ * Non-image documents are represented as text metadata so starter apps don't
+ * send malformed multimodal payloads to providers that require a separate file
+ * upload or document extraction pipeline.
+ *
+ * Supported: images (PNG, JPEG, WEBP, GIF). PDFs/DOCX can be attached, but the
+ * default starter only sends their metadata to the agent.
+ */
+import type { AttachmentAdapter, PendingAttachment, CompleteAttachment, Attachment } from "@assistant-ui/react";
+export declare class FileAttachmentAdapter implements AttachmentAdapter {
+    accept: string;
+    add({ file }: {
+        file: File;
+    }): Promise<PendingAttachment>;
+    send(attachment: PendingAttachment): Promise<CompleteAttachment>;
+    remove(_attachment: Attachment): Promise<void>;
+}

package/dist/lib/attachment-adapter.js

@@ -0,0 +1,99 @@
+/**
+ * File attachment adapter for assistant-ui.
+ *
+ * Reads image files client-side as base64 and produces FileMessagePart content.
+ * Non-image documents are represented as text metadata so starter apps don't
+ * send malformed multimodal payloads to providers that require a separate file
+ * upload or document extraction pipeline.
+ *
+ * Supported: images (PNG, JPEG, WEBP, GIF). PDFs/DOCX can be attached, but the
+ * default starter only sends their metadata to the agent.
+ */
+const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20 MB
+/** Infer MIME type from extension when browser reports empty file.type (common for .docx) */
+const EXTENSION_MIME = {
+    ".pdf": "application/pdf",
+    ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".webp": "image/webp",
+};
+function resolveMimeType(file) {
+    if (file.type)
+        return file.type;
+    const ext = file.name.slice(file.name.lastIndexOf(".")).toLowerCase();
+    return EXTENSION_MIME[ext] ?? "application/octet-stream";
+}
+function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            // Strip the data URI prefix (e.g. "data:image/png;base64,"), keep raw base64
+            resolve(result.split(",")[1]);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+export class FileAttachmentAdapter {
+    constructor() {
+        this.accept = "image/*,application/pdf,.pdf,.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    }
+    async add({ file }) {
+        if (file.size > MAX_FILE_SIZE) {
+            throw new Error(`File too large (${Math.round(file.size / 1024 / 1024)} MB). Max 20 MB.`);
+        }
+        const mimeType = resolveMimeType(file);
+        return {
+            id: crypto.randomUUID(),
+            type: mimeType.startsWith("image/") ? "image" : "document",
+            name: file.name,
+            contentType: mimeType,
+            file,
+            status: { type: "requires-action", reason: "composer-send" },
+        };
+    }
+    async send(attachment) {
+        const mimeType = attachment.contentType ?? "application/octet-stream";
+        if (!mimeType.startsWith("image/")) {
+            return {
+                ...attachment,
+                status: { type: "complete" },
+                content: [
+                    {
+                        type: "text",
+                        text: `[Attached file: ${attachment.name}` +
+                            `; type: ${mimeType}` +
+                            `; size: ${formatFileSize(attachment.file.size)}]`,
+                    },
+                ],
+            };
+        }
+        const base64 = await fileToBase64(attachment.file);
+        return {
+            ...attachment,
+            status: { type: "complete" },
+            content: [
+                {
+                    type: "file",
+                    data: base64,
+                    mimeType,
+                    filename: attachment.name,
+                },
+            ],
+        };
+    }
+    async remove(_attachment) {
+        // No-op -- files are read client-side, nothing to clean up
+    }
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${Math.round((bytes / 1024 / 1024) * 10) / 10} MB`;
+}

package/dist/lib/auth-provider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * AuthProvider — wraps the app with MSAL authentication.
+ *
+ * Uses MsalProvider's built-in redirect handling (no manual handleRedirectPromise).
+ * AuthGuard uses useMsal() + inProgress to avoid redirect loops.
+ *
+ * The provider expects a fully resolved MSAL configuration.
+ * Missing configuration is treated as an application bootstrap error.
+ */
+import { type FC, type PropsWithChildren } from "react";
+import { type MsalAuthConfig } from "@iloveagents/foundry-agent/msal";
+interface AuthProviderProps {
+    config: MsalAuthConfig;
+}
+export declare const AuthProvider: FC<PropsWithChildren<AuthProviderProps>>;
+export {};

package/dist/lib/auth-provider.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AuthProvider — wraps the app with MSAL authentication.
+ *
+ * Uses MsalProvider's built-in redirect handling (no manual handleRedirectPromise).
+ * AuthGuard uses useMsal() + inProgress to avoid redirect loops.
+ *
+ * The provider expects a fully resolved MSAL configuration.
+ * Missing configuration is treated as an application bootstrap error.
+ */
+import { useEffect, useState, } from "react";
+import { authStore, initializeMsal, getMsalInstance, } from "@iloveagents/foundry-agent/msal";
+export const AuthProvider = ({ config, children, }) => {
+    const [ready, setReady] = useState(false);
+    const [initError, setInitError] = useState(null);
+    const [MsalProvider, setMsalProvider] = useState(null);
+    const [useMsalHook, setUseMsalHook] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                await initializeMsal(config);
+                const msalReact = await import("@azure/msal-react");
+                if (cancelled)
+                    return;
+                setMsalProvider(() => msalReact.MsalProvider);
+                setUseMsalHook(() => msalReact.useMsal);
+                setReady(true);
+            }
+            catch (error) {
+                console.error("[auth] Failed to initialize MSAL", error);
+                if (cancelled)
+                    return;
+                setInitError(error instanceof Error ? error.message : "Failed to initialize authentication.");
+                setReady(true);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [config]);
+    if (!ready)
+        return null;
+    if (initError) {
+        return (_jsx("div", { className: "flex min-h-dvh items-center justify-center bg-background px-6 text-center", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-border bg-card px-6 py-5 shadow-sm", children: [_jsx("h1", { className: "text-lg font-semibold text-foreground", children: "Authentication unavailable" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: initError })] }) }));
+    }
+    if (!MsalProvider || !useMsalHook) {
+        return null;
+    }
+    const instance = getMsalInstance();
+    return (_jsx(MsalProvider, { instance: instance, children: _jsx(AuthGuard, { useMsalHook: useMsalHook, children: children }) }));
+};
+/**
+ * AuthGuard — waits for MsalProvider to finish processing redirects,
+ * then either syncs the account or triggers loginRedirect.
+ *
+ * Uses inProgress === "none" to avoid redirect loops (best practice from
+ * Microsoft docs — never call loginRedirect while another interaction is active).
+ */
+const AuthGuard = ({ useMsalHook, children, }) => {
+    const { instance, accounts, inProgress } = useMsalHook();
+    const [authenticated, setAuthenticated] = useState(false);
+    useEffect(() => {
+        // Wait until MsalProvider finishes processing any redirect or startup
+        if (inProgress !== "none")
+            return;
+        if (accounts.length > 0) {
+            const account = accounts[0];
+            authStore.getState().signIn({
+                name: account.name ?? account.username,
+                email: account.username,
+                oid: account.localAccountId,
+            });
+            instance.setActiveAccount(account);
+            setAuthenticated(true);
+        }
+        else {
+            // No account and no interaction in progress — redirect to login.
+            // Only request OIDC scopes here. API/SPACES tokens are acquired
+            // silently later via acquireTokenSilent (consent is per-resource
+            // in Entra ID — including them here would show N consent screens).
+            instance.loginRedirect({
+                scopes: ["openid", "profile", "email"],
+            });
+        }
+    }, [instance, accounts, inProgress]);
+    if (!authenticated)
+        return null;
+    return _jsx(_Fragment, { children: children });
+};

package/dist/lib/chat-bubble-store.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Chat Bubble Store — manages chat display mode as a layout state.
+ *
+ * Four modes: CLOSED → BUBBLE → EXPANDED → FULL
+ * - CLOSED: only trigger button visible
+ * - BUBBLE (isOpen): floating 380x600 chat panel
+ * - EXPANDED (isExpanded): chat fills main area, page goes to panel
+ * - FULL: expanded with page panel closed
+ *
+ * No route changes. The URL stays the same in all modes.
+ */
+interface ChatBubbleState {
+    /** Bubble floating panel is visible */
+    isOpen: boolean;
+    /** Chat is expanded into the main layout area */
+    isExpanded: boolean;
+    /** Page panel visible in expanded mode (false = FULL mode) */
+    showPagePanel: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Expand: hide bubble, show chat in main layout */
+    expand: () => void;
+    /** Collapse: hide expanded chat, show bubble */
+    collapse: () => void;
+    /** Toggle page panel in expanded mode (EXPANDED ↔ FULL) */
+    togglePagePanel: () => void;
+}
+export declare const useChatBubbleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatBubbleState>>;
+export {};

package/dist/lib/chat-bubble-store.js

@@ -0,0 +1,23 @@
+/**
+ * Chat Bubble Store — manages chat display mode as a layout state.
+ *
+ * Four modes: CLOSED → BUBBLE → EXPANDED → FULL
+ * - CLOSED: only trigger button visible
+ * - BUBBLE (isOpen): floating 380x600 chat panel
+ * - EXPANDED (isExpanded): chat fills main area, page goes to panel
+ * - FULL: expanded with page panel closed
+ *
+ * No route changes. The URL stays the same in all modes.
+ */
+import { create } from "zustand";
+export const useChatBubbleStore = create((set) => ({
+    isOpen: false,
+    isExpanded: false,
+    showPagePanel: true,
+    open: () => set({ isOpen: true }),
+    close: () => set({ isOpen: false, isExpanded: false }),
+    toggle: () => set((s) => ({ isOpen: !s.isOpen })),
+    expand: () => set({ isOpen: false, isExpanded: true, showPagePanel: true }),
+    collapse: () => set({ isOpen: true, isExpanded: false }),
+    togglePagePanel: () => set((s) => ({ showPagePanel: !s.showPagePanel })),
+}));

package/dist/lib/chat-lifecycle-store.d.ts

@@ -0,0 +1,10 @@
+interface ChatLifecycleStore {
+    /**
+     * Called from :func:`useNewConversation` when the user starts a
+     * new thread. Spaces wires this to clear the active-chat sticky id.
+     */
+    onNewConversation: (() => void) | null;
+    setOnNewConversation: (fn: (() => void) | null) => void;
+}
+export declare const useChatLifecycleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatLifecycleStore>>;
+export {};

package/{src/lib/chat-lifecycle-store.ts → dist/lib/chat-lifecycle-store.js}

@@ -21,17 +21,7 @@
  * ``onNewConversation`` null — the call site no-ops gracefully.
  */
 import { create } from "zustand";
-
-interface ChatLifecycleStore {
-  /**
-   * Called from :func:`useNewConversation` when the user starts a
-   * new thread. Spaces wires this to clear the active-chat sticky id.
-   */
-  onNewConversation: (() => void) | null;
-  setOnNewConversation: (fn: (() => void) | null) => void;
-}
-
-export const useChatLifecycleStore = create<ChatLifecycleStore>((set) => ({
-  onNewConversation: null,
-  setOnNewConversation: (fn) => set({ onNewConversation: fn }),
+export const useChatLifecycleStore = create((set) => ({
+    onNewConversation: null,
+    setOnNewConversation: (fn) => set({ onNewConversation: fn }),
 }));

package/dist/lib/client-tools.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Global Client Tools — registered into the dynamic tool registry at app init.
+ *
+ * Naming convention:
+ *   ui_*    — tools that affect the UI (navigate, theme, panel, content)
+ *
+ * Page-specific tools use their own prefix (e.g., page_search_documents).
+ * The adapter reads from the registry (not this file) on every request.
+ */
+export declare function setNavigateFunction(fn: (path: string) => void): void;
+export declare function registerGlobalTools(): void;