@iloveagents/foundry-web-ui 0.1.0

package/src/lib/attachment-adapter.ts

@@ -0,0 +1,92 @@
+/**
+ * File attachment adapter for assistant-ui.
+ *
+ * Reads files client-side as base64 and produces FileMessagePart content.
+ * The AG-UI adapter converts these to BinaryInputContent for the protocol,
+ * and the agent framework passes them to the Responses API as input_file
+ * or input_image -- no separate upload endpoint needed.
+ *
+ * Supported: images (PNG, JPEG, WEBP, GIF), PDFs, DOCX
+ */
+
+import type {
+  AttachmentAdapter,
+  PendingAttachment,
+  CompleteAttachment,
+  Attachment,
+} from "@assistant-ui/react";
+
+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: Record<string, string> = {
+  ".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: File): string {
+  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: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      // 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 implements AttachmentAdapter {
+  accept =
+    "image/*,application/pdf,.pdf,.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+
+  async add({ file }: { file: File }): Promise<PendingAttachment> {
+    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: PendingAttachment): Promise<CompleteAttachment> {
+    const base64 = await fileToBase64(attachment.file);
+
+    return {
+      ...attachment,
+      status: { type: "complete" },
+      content: [
+        {
+          type: "file" as const,
+          data: base64,
+          mimeType: attachment.contentType ?? "application/octet-stream",
+          filename: attachment.name,
+        },
+      ],
+    };
+  }
+
+  async remove(_attachment: Attachment): Promise<void> {
+    // No-op -- files are read client-side, nothing to clean up
+  }
+}

package/src/lib/auth-provider.tsx

@@ -0,0 +1,144 @@
+/**
+ * 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,
+  type ReactNode,
+  useEffect,
+  useState,
+} from "react";
+import {
+  authStore,
+  initializeMsal,
+  getMsalInstance,
+  type MsalAuthConfig,
+  type MsalClientApplication,
+} from "@iloveagents/foundry-agent/msal";
+
+interface AuthProviderProps {
+  config: MsalAuthConfig;
+}
+
+type MsalProviderComponent = FC<{
+  instance: MsalClientApplication;
+  children: ReactNode;
+}>;
+
+// Dynamic imports for MSAL React (stays optional)
+type MsalHook = () => {
+  instance: MsalClientApplication;
+  accounts: { name?: string; username: string; localAccountId: string }[];
+  inProgress: string;
+};
+
+export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
+  config,
+  children,
+}) => {
+  const [ready, setReady] = useState(false);
+  const [initError, setInitError] = useState<string | null>(null);
+  const [MsalProvider, setMsalProvider] = useState<MsalProviderComponent | null>(null);
+  const [useMsalHook, setUseMsalHook] = useState<MsalHook | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      try {
+        await initializeMsal(config);
+        const msalReact = await import("@azure/msal-react");
+
+        if (cancelled) return;
+
+        setMsalProvider(() => msalReact.MsalProvider as unknown as MsalProviderComponent);
+        setUseMsalHook(() => msalReact.useMsal as unknown as MsalHook);
+        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 (
+      <div className="flex min-h-dvh items-center justify-center bg-background px-6 text-center">
+        <div className="max-w-md rounded-2xl border border-border bg-card px-6 py-5 shadow-sm">
+          <h1 className="text-lg font-semibold text-foreground">Authentication unavailable</h1>
+          <p className="mt-2 text-sm text-muted-foreground">{initError}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!MsalProvider || !useMsalHook) {
+    return null;
+  }
+
+  const instance = getMsalInstance()!;
+
+  return (
+    <MsalProvider instance={instance}>
+      <AuthGuard useMsalHook={useMsalHook}>{children}</AuthGuard>
+    </MsalProvider>
+  );
+};
+
+/**
+ * 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: FC<PropsWithChildren<{ useMsalHook: MsalHook }>> = ({
+  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 <>{children}</>;
+};

package/src/lib/chat-bubble-store.ts

@@ -0,0 +1,46 @@
+/**
+ * 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";
+
+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 const useChatBubbleStore = create<ChatBubbleState>((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/src/lib/client-tools.ts

@@ -0,0 +1,293 @@
+/**
+ * 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.
+ */
+
+import { useThemeStore, type ThemeMode } from "./theme-store.ts";
+import { useToolPanelStore } from "./tool-panel-store.ts";
+import { useAppStore } from "./app-store.ts";
+import { clientToolRegistry, type ClientToolEntry } from "@iloveagents/foundry-agent";
+
+// ---------------------------------------------------------------------------
+// Navigate function injection (needs React Router context)
+// ---------------------------------------------------------------------------
+
+let _navigateFn: ((path: string) => void) | null = null;
+
+export function setNavigateFunction(fn: (path: string) => void) {
+  _navigateFn = fn;
+}
+
+// ---------------------------------------------------------------------------
+// Global tool definitions with executors
+// ---------------------------------------------------------------------------
+
+const GLOBAL_TOOLS: ClientToolEntry[] = [
+  {
+    name: "ui_navigate",
+    description:
+      "Navigate the user to a different page in the application. " +
+      "Only use when the user explicitly asks to go to a page.",
+    parameters: {
+      type: "object",
+      properties: {
+        path: {
+          type: "string",
+          description: "The path to navigate to (e.g. '/workspace')",
+        },
+      },
+      required: ["path"],
+    },
+    execute: async (argsJson) => {
+      const { path } = JSON.parse(argsJson || "{}");
+      if (_navigateFn) _navigateFn(path);
+      return JSON.stringify({ status: "success", path });
+    },
+  },
+  {
+    name: "ui_set_theme",
+    description: "Change the application theme. Modes: 'light', 'dark', or 'system'.",
+    parameters: {
+      type: "object",
+      properties: {
+        mode: {
+          type: "string",
+          enum: ["light", "dark", "system"],
+          description: "The theme mode to apply",
+        },
+      },
+      required: ["mode"],
+    },
+    execute: async (argsJson) => {
+      const { mode } = JSON.parse(argsJson || "{}");
+      useThemeStore.getState().setMode(mode as ThemeMode);
+      return JSON.stringify({ status: "success", mode });
+    },
+  },
+  {
+    name: "ui_open_panel",
+    description:
+      "Show content in the side panel. Prefer this over ui_navigate to keep " +
+      "chat visible. Use path for a page component (e.g. '/workspace'), " +
+      "or content for generated markdown/text.",
+    parameters: {
+      type: "object",
+      properties: {
+        title: { type: "string", description: "Panel title" },
+        path: {
+          type: "string",
+          description: "Page path to render in the panel (e.g. '/workspace')",
+        },
+        content: {
+          type: "string",
+          description: "Markdown or text content (used when path is not provided)",
+        },
+        type: {
+          type: "string",
+          enum: ["markdown", "text"],
+          description: "Content format (default: markdown)",
+        },
+      },
+      required: ["title"],
+    },
+    execute: async (argsJson) => {
+      const args = JSON.parse(argsJson || "{}");
+      if (args.path) {
+        useToolPanelStore.getState().openPanel({
+          title: args.title,
+          content: args.path,
+          type: "page",
+        });
+      } else {
+        useToolPanelStore.getState().openPanel({
+          title: args.title,
+          content: args.content || "",
+          type: args.type || "markdown",
+        });
+      }
+      return JSON.stringify({
+        status: "success",
+        title: args.title,
+        mode: args.path ? "page" : "content",
+      });
+    },
+  },
+  {
+    name: "ui_select_item",
+    description: "Select an item in the current page by its ID. Highlights it in the UI.",
+    parameters: {
+      type: "object",
+      properties: {
+        itemId: {
+          type: "string",
+          description: "The ID of the item to select (or null to deselect)",
+        },
+      },
+      required: ["itemId"],
+    },
+    execute: async (argsJson) => {
+      const { itemId } = JSON.parse(argsJson || "{}");
+      useAppStore.getState().setSelectedItemId(itemId ?? null);
+      return JSON.stringify({ status: "success", itemId });
+    },
+  },
+  {
+    name: "ui_update_content",
+    description:
+      "Update fields in the shared draft/form. Pass all fields as key-value " +
+      "pairs in a single call. Works for one or many fields.",
+    parameters: {
+      type: "object",
+      properties: {
+        fields: {
+          type: "object",
+          description: "Key-value pairs of field names and their values",
+          additionalProperties: true,
+        },
+      },
+      required: ["fields"],
+    },
+    execute: async (argsJson) => {
+      const { fields } = JSON.parse(argsJson || "{}");
+      const store = useAppStore.getState();
+      for (const [key, value] of Object.entries(fields)) {
+        store.updateContentField(key, value);
+      }
+      return JSON.stringify({ status: "success", fields });
+    },
+  },
+  {
+    name: "ui_highlight",
+    description: "Highlight an entity in the UI to draw the user's attention.",
+    parameters: {
+      type: "object",
+      properties: {
+        entityId: {
+          type: "string",
+          description: "The ID of the entity to highlight",
+        },
+      },
+      required: ["entityId"],
+    },
+    execute: async (argsJson) => {
+      const { entityId } = JSON.parse(argsJson || "{}");
+      useAppStore.getState().addHighlight(entityId);
+      return JSON.stringify({ status: "success", entityId });
+    },
+  },
+  {
+    name: "ui_confirm",
+    description:
+      "Ask the user to confirm or reject an action before proceeding. " +
+      "Use for destructive or important actions.",
+    parameters: {
+      type: "object",
+      properties: {
+        action: {
+          type: "string",
+          description: "Short description of the action requiring confirmation",
+        },
+        details: {
+          type: "string",
+          description: "Optional details about what will happen",
+        },
+      },
+      required: ["action"],
+    },
+    execute: async (argsJson) => {
+      const { action, details } = JSON.parse(argsJson || "{}");
+      return JSON.stringify({
+        status: "pending",
+        action,
+        details: details || "",
+        message: "Awaiting user confirmation via chat.",
+      });
+    },
+  },
+  {
+    name: "ui_get_context",
+    description:
+      "Get the full application context: navigation breadcrumb from root " +
+      "to current page (with accumulated metadata), selected items, draft " +
+      "values, highlights, and user-pinned context items.",
+    parameters: { type: "object", properties: {}, required: [] },
+    execute: async () => {
+      const state = useAppStore.getState().getAgentState();
+      const { useNavStore } = await import("./nav-store.ts");
+      const navConfig = useNavStore.getState().config;
+
+      // Build breadcrumb: root group → parent item → current leaf
+      const breadcrumb: Array<{
+        level: string;
+        label: string;
+        description?: string;
+        meta?: Record<string, unknown>;
+      }> = [];
+
+      for (const group of navConfig) {
+        for (const item of group.items) {
+          if (item.to === state.navigation.page) {
+            breadcrumb.push({ level: "group", label: group.label, meta: group.meta });
+            breadcrumb.push({
+              level: "page",
+              label: item.label,
+              description: item.description,
+              meta: item.meta,
+            });
+            break;
+          }
+          if (item.children) {
+            for (const child of item.children) {
+              if (child.to === state.navigation.page) {
+                breadcrumb.push({ level: "group", label: group.label, meta: group.meta });
+                breadcrumb.push({
+                  level: "parent",
+                  label: item.label,
+                  description: item.description,
+                  meta: item.meta,
+                });
+                breadcrumb.push({
+                  level: "page",
+                  label: child.label,
+                  description: child.description,
+                  meta: child.meta,
+                });
+                break;
+              }
+            }
+          }
+        }
+        if (breadcrumb.length > 0) break;
+      }
+
+      return JSON.stringify({
+        status: "success",
+        breadcrumb,
+        currentPage: state.navigation,
+        selectedItemId: state.selectedItemId,
+        content: state.content,
+        highlights: state.highlights,
+        contextItems: state.contextItems,
+      });
+    },
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Registration — called once at module load
+// ---------------------------------------------------------------------------
+
+export function registerGlobalTools() {
+  const registry = clientToolRegistry.getState();
+  for (const tool of GLOBAL_TOOLS) {
+    registry.registerGlobal(tool);
+  }
+}
+
+// Auto-register on import
+registerGlobalTools();

package/src/lib/dev-store.ts

@@ -0,0 +1,69 @@
+/**
+ * Dev Store — captures debug telemetry for the Dev Panel.
+ *
+ * Only populated in dev mode. Stores the last AG-UI request payload
+ * and tool call events so developers can inspect the full agent turn.
+ */
+
+import { create } from "zustand";
+
+export interface DevToolCall {
+  id: string;
+  name: string;
+  args: string;
+  result?: unknown;
+  isClientSide: boolean;
+  timestamp: number;
+}
+
+interface DevState {
+  /** Last AG-UI request payload (runInput) */
+  lastRequest: Record<string, unknown> | null;
+  /** Timestamp of last request */
+  lastRequestAt: number | null;
+  /** Tool calls from the current/last turn */
+  toolCalls: DevToolCall[];
+  /** SSE events log (last N) */
+  events: Array<{ type: string; timestamp: number; data?: string }>;
+
+  /** Capture a request payload (resets tool calls for new turn) */
+  captureRequest: (payload: Record<string, unknown>) => void;
+  /** Record a tool call */
+  addToolCall: (call: DevToolCall) => void;
+  /** Update a tool call with args and/or result */
+  updateToolCall: (id: string, update: Partial<Pick<DevToolCall, "args" | "result">>) => void;
+  /** Log an SSE event */
+  logEvent: (type: string, data?: string) => void;
+}
+
+const MAX_EVENTS = 50;
+
+export const useDevStore = create<DevState>((set, get) => ({
+  lastRequest: null,
+  lastRequestAt: null,
+  toolCalls: [],
+  events: [],
+
+  captureRequest: (payload) => {
+    const isFollowUp = get().toolCalls.length > 0;
+    set({
+      lastRequest: payload,
+      lastRequestAt: Date.now(),
+      // Keep tool calls for follow-up requests (multi-turn), reset on fresh turn
+      ...(isFollowUp ? {} : { toolCalls: [], events: [] }),
+    });
+  },
+
+  addToolCall: (call) => set({ toolCalls: [...get().toolCalls, call] }),
+
+  updateToolCall: (id, update) =>
+    set({
+      toolCalls: get().toolCalls.map((tc) => (tc.id === id ? { ...tc, ...update } : tc)),
+    }),
+
+  logEvent: (type, data) => {
+    const events = get().events;
+    const next = [...events, { type, timestamp: Date.now(), data }];
+    set({ events: next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next });
+  },
+}));