@iloveagents/foundry-web-ui 0.3.1 → 0.4.0

package/src/lib/app-store.ts

@@ -1,361 +0,0 @@
-/**
- * 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";
-
-export type ContextPersistence = "persistent" | "ephemeral";
-
-// --- Domain-agnostic context payloads ---
-
-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>>;
-}
-
-const MAX_ITEMS = 10;
-const MAX_LABEL_LENGTH = 500;
-const MAX_CONTEXT_VALUE_LENGTH = 2_000;
-const TRUNCATION_SUFFIX = "...";
-
-const DEFAULT_NAV_CONTEXT: NavContext = {
-  group: null,
-  groupDescription: null,
-  groupMeta: {},
-  label: "Chat",
-  description: null,
-  meta: {},
-  contextInstructions: null,
-};
-
-function refDedupKey(payload: ReferencePayload): string {
-  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: unknown): unknown {
-  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: ReferencePayload["target"],
-): ReferencePayload["target"] {
-  if (!target) return undefined;
-  return {
-    ...target,
-    currentValue: compactContextValue(target.currentValue),
-    proposedValue: compactContextValue(target.proposedValue),
-  };
-}
-
-interface AppState {
-  // Thread state
-  threadActive: boolean;
-  markThreadActive: () => void;
-
-  // Current page (set by router, used for ephemeral context clearing)
-  currentPage: string;
-  setCurrentPage: (page: string) => void;
-
-  // Navigation context (synced from nav store by app-layout)
-  navContext: NavContext;
-  setNavContext: (ctx: NavContext) => void;
-
-  // Shared UI state
-  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;
-
-  // Context items
-  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[];
-
-  // AG-UI state projection
-  getAgentState: () => AgentStateProjection;
-
-  // Full reset (new conversation)
-  resetAll: () => void;
-}
-
-export const useAppStore = create<AppState>((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 as PagePayload;
-        const b = existing.payload as PagePayload;
-        return a.path === b.path;
-      }
-      if (item.type === "ref" && existing.type === "ref") {
-        const a = item.payload as ReferencePayload;
-        const b = existing.payload as ReferencePayload;
-        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" as const } : 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/src/lib/attachment-adapter.ts

@@ -1,92 +0,0 @@
-/**
- * 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

@@ -1,144 +0,0 @@
-/**
- * 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

@@ -1,46 +0,0 @@
-/**
- * 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 })),
-}));