aui-mcp-server 0.0.1

package/dist/client/index.js

@@ -0,0 +1,584 @@
+import React, { useRef, useEffect, lazy, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { createInstance } from '@module-federation/enhanced/runtime';
+import * as A2UI from '@a2ui/react';
+import { ComponentRegistry, registerDefaultCatalog, useA2UIActions } from '@a2ui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/* aui-mcp-server */
+
+// src/client/types.ts
+var A2UI_EXTENSION_URI = "https://a2ui.org/a2a-extension/a2ui/v0.8";
+var A2UI_MIME_TYPE = "application/json+a2ui";
+var RemoteLogger = class {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+  }
+  queue = [];
+  isProcessing = false;
+  setEndpoint(endpoint) {
+    this.endpoint = endpoint;
+  }
+  async flush() {
+    if (this.isProcessing || this.queue.length === 0) return;
+    this.isProcessing = true;
+    while (this.queue.length > 0) {
+      const entry = this.queue.shift();
+      try {
+        await fetch(this.endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(entry)
+        });
+      } catch (e) {
+        console.warn("[AUI Logger] Failed to sync log to backend", e);
+        break;
+      }
+    }
+    this.isProcessing = false;
+  }
+  log(level, ...args) {
+    const time = (/* @__PURE__ */ new Date()).toISOString();
+    const message = args.map((arg) => typeof arg === "object" ? JSON.stringify(arg, null, 2) : String(arg)).join(" ");
+    const consoleMethod = level.toLowerCase();
+    const original = typeof window !== "undefined" && window.__AUI_ORIGINAL_CONSOLE__?.[consoleMethod] || // eslint-disable-next-line no-console
+    console[consoleMethod];
+    original(`[${level}]`, ...args);
+    this.queue.push({ time, level, message });
+    void this.flush();
+  }
+};
+var remoteLogger = null;
+var globalLogger = null;
+function ensureRemoteLogger(endpoint) {
+  if (!remoteLogger) {
+    remoteLogger = new RemoteLogger(endpoint);
+  } else {
+    remoteLogger.setEndpoint(endpoint);
+  }
+  return remoteLogger;
+}
+function hijackConsoleIfNeeded(logger2) {
+  if (typeof window === "undefined") return;
+  const w = window;
+  if (w.__AUI_CONSOLE_HIJACKED__) return;
+  w.__AUI_ORIGINAL_CONSOLE__ = {
+    debug: console.debug,
+    info: console.info,
+    log: console.log,
+    warn: console.warn,
+    error: console.error
+  };
+  console.debug = (...args) => logger2.debug(...args);
+  console.info = (...args) => logger2.info(...args);
+  console.log = (...args) => logger2.info(...args);
+  console.warn = (...args) => logger2.warn(...args);
+  console.error = (...args) => logger2.error(...args);
+  w.__AUI_CONSOLE_HIJACKED__ = true;
+}
+function createLogger(options) {
+  const endpoint = options?.endpoint ?? "/api/log";
+  const hijackConsole = options?.hijackConsole ?? false;
+  const remote = ensureRemoteLogger(endpoint);
+  const logger2 = {
+    debug: (...args) => remote.log("DEBUG", ...args),
+    info: (...args) => remote.log("INFO", ...args),
+    warn: (...args) => remote.log("WARN", ...args),
+    error: (...args) => remote.log("ERROR", ...args)
+  };
+  if (hijackConsole) {
+    hijackConsoleIfNeeded(logger2);
+  }
+  globalLogger = logger2;
+  return logger2;
+}
+var logger = createLogger();
+function useLogger(options) {
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    createLogger(optionsRef.current);
+  }, []);
+  return globalLogger ?? logger;
+}
+var ErrorPlaceholder = ({
+  title = "Component load failed",
+  message
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      padding: "0.75rem 1rem",
+      borderRadius: 6,
+      border: "1px solid #f5c2c7",
+      background: "#f8d7da",
+      color: "#842029",
+      fontSize: 14
+    },
+    children: [
+      /* @__PURE__ */ jsx("strong", { children: title }),
+      message && /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: message })
+    ]
+  }
+);
+var mfInstance = null;
+var registryInstance = null;
+function ensureMFInstance(options) {
+  if (mfInstance) return mfInstance;
+  const baseShared = {
+    react: {
+      version: React.version,
+      scope: "default",
+      lib: () => React,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: "^18.0.0"
+      }
+    },
+    "react-dom": {
+      version: React.version,
+      scope: "default",
+      lib: () => ReactDOM,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: "^18.0.0"
+      }
+    },
+    "@a2ui/react": {
+      version: "0.8.0",
+      scope: "default",
+      lib: () => A2UI,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: "^0.8.0"
+      }
+    }
+  };
+  const shared = {
+    ...baseShared,
+    ...options?.shared ?? {}
+  };
+  mfInstance = createInstance({
+    name: "aui_mcp_client",
+    remotes: [],
+    shared
+  });
+  return mfInstance;
+}
+function createMFRegistry(options) {
+  ensureMFInstance(options);
+  if (!registryInstance) {
+    registryInstance = ComponentRegistry.getInstance();
+    registerDefaultCatalog(registryInstance);
+    logger.info("[aui-mcp-server/react] ComponentRegistry initialized with default catalog");
+  }
+  if (typeof window !== "undefined" && options?.exposeGlobal) {
+    window.__AUI_REGISTRY__ = registryInstance;
+  }
+  return registryInstance;
+}
+function registerMFComponent(registry, componentType, xLoader) {
+  const mf = ensureMFInstance();
+  const { url, scope, module: modulePath } = xLoader;
+  const exposeName = modulePath.replace(/^\.\//, "");
+  const remoteId = `${scope}/${exposeName}`;
+  const LazyComponent = lazy(async () => {
+    logger.debug(`[AUI-X] MF lazy load triggered: ${componentType} (${remoteId})`);
+    try {
+      mf.registerRemotes([{ name: scope, entry: url }], { force: false });
+      const mod = await mf.loadRemote(remoteId);
+      if (!mod) {
+        throw new Error(`[AUI-X] loadRemote returned null for "${remoteId}"`);
+      }
+      const Component = mod.default ?? mod;
+      logger.info(`[AUI-X] \u2705 MF component loaded OK: ${componentType}`);
+      return { default: Component };
+    } catch (error) {
+      logger.error(
+        `[AUI-X] \u274C Failed to load MF component "${componentType}" from "${remoteId}":`,
+        error
+      );
+      const Fallback = () => /* @__PURE__ */ jsx(
+        ErrorPlaceholder,
+        {
+          title: "Failed to load MF component",
+          message: `Unable to load remote component: ${componentType}`
+        }
+      );
+      return { default: Fallback };
+    }
+  });
+  const registration = {
+    component: LazyComponent
+  };
+  registry.register(componentType, registration);
+  logger.info(
+    `[AUI-X] MF component registered (runtime): ${componentType} \u2190 ${url} \u2192 ${remoteId}`
+  );
+}
+function syncRegistryFromCatalog(registry, catalog) {
+  Object.entries(catalog).forEach(([type, schema]) => {
+    const anySchema = schema;
+    const xLoader = anySchema.x_loader || anySchema["x-loader"];
+    if (!xLoader || xLoader.type !== "module-federation") return;
+    registerMFComponent(registry, type, xLoader);
+  });
+}
+
+// src/client/handshake.ts
+function toLiteralStringValue(value) {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "string") {
+    return { literalString: value };
+  }
+  if (typeof value === "object") {
+    const obj = value;
+    if (typeof obj.literalString === "string" || typeof obj.path === "string") {
+      return {
+        ...obj.literalString ? { literalString: obj.literalString } : {},
+        ...obj.path ? { path: obj.path } : {}
+      };
+    }
+  }
+  return { literalString: String(value) };
+}
+async function performHandshake(agentUrl, registry) {
+  try {
+    const base = agentUrl.replace(/\/$/, "");
+    const handshakeUrl = base.endsWith("/agent-card") ? base : `${base}/agent-card`;
+    const response = await fetch(handshakeUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch AgentCard from ${handshakeUrl}: ${response.statusText}`);
+    }
+    const agentCard = await response.json();
+    const a2uiExt = agentCard.capabilities?.extensions?.find(
+      (ext) => ext.uri === A2UI_EXTENSION_URI
+    );
+    if (!a2uiExt || !a2uiExt.params?.inlineCatalogs) {
+      logger.warn("[AUI-X] No inlineCatalogs found in AgentCard. Handshake skipped.");
+      return {};
+    }
+    const catalogs = a2uiExt.params.inlineCatalogs;
+    const allComponents = {};
+    const effectiveRegistry = registry ?? createMFRegistry();
+    catalogs.forEach((cat) => {
+      if (!cat.components) return;
+      const count = Object.keys(cat.components).length;
+      logger.info(
+        `[AUI-X] Found catalog "${cat.id ?? "inline"}", syncing ${count} components from handshake`
+      );
+      Object.assign(allComponents, cat.components);
+      syncRegistryFromCatalog(effectiveRegistry, cat.components);
+    });
+    return allComponents;
+  } catch (error) {
+    logger.error("[AUI-X] Handshake error:", error);
+    return {};
+  }
+}
+function render(toolCall, catalog) {
+  const { tool_name, tool_input } = toolCall;
+  let componentType = tool_name;
+  if (tool_name.startsWith("render_")) {
+    const parts = tool_name.split("_").slice(1);
+    componentType = parts.map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+  }
+  const schema = catalog[componentType];
+  if (!schema) {
+    throw new Error(
+      `[AUI-X] Component type "${componentType}" not found in catalog for tool "${tool_name}"`
+    );
+  }
+  const surfaceId = `${tool_name}-surface-handshake`;
+  const rootId = "root-column";
+  const props = {};
+  if (tool_input) {
+    Object.entries(tool_input).forEach(([key, value]) => {
+      if (key === "mfData" || key === "dataModel") {
+        props[key] = value;
+      } else {
+        const val = toLiteralStringValue(value);
+        if (val) props[key] = val;
+      }
+    });
+  }
+  const components = [
+    {
+      id: rootId,
+      component: {
+        Column: {
+          children: {
+            explicitList: ["dynamic-card"]
+          }
+        }
+      }
+    },
+    {
+      id: "dynamic-card",
+      component: {
+        [componentType]: props
+      }
+    }
+  ];
+  return [
+    {
+      beginRendering: {
+        surfaceId,
+        root: rootId,
+        styles: {
+          primaryColor: "#1DB954",
+          font: "Roboto"
+        }
+      }
+    },
+    {
+      surfaceUpdate: {
+        surfaceId,
+        components
+      }
+    }
+  ];
+}
+function isTaskStatusUpdateEvent(e) {
+  return "result" in e && "status" in e.result;
+}
+function isTaskArtifactUpdateEvent(e) {
+  return "result" in e && "artifact" in e.result;
+}
+function isA2UIPart(part) {
+  return part.kind === "data" && (part.metadata?.mimeType === A2UI_MIME_TYPE || // snake_case compatibility
+  part.metadata?.mime_type === A2UI_MIME_TYPE);
+}
+function extractText(parts) {
+  return parts.filter((p) => p.kind === "text").map((p) => p.text).join("");
+}
+function extractA2UIData(parts) {
+  return parts.filter(isA2UIPart).map((p) => p.data);
+}
+function useA2UIStream(options) {
+  const actions = useA2UIActions();
+  const agentUrl = options?.agentUrl ?? "/api";
+  const defaultIsActionPayload = options?.defaultIsActionPayload ?? false;
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastPerf, setLastPerf] = useState(null);
+  const contextIdRef = useRef(crypto.randomUUID());
+  const taskIdRef = useRef(void 0);
+  const perfStateRef = useRef({});
+  const now = () => typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+  const markFirstComponentRendered = () => {
+    const state = perfStateRef.current;
+    if (!state.t0 || state.t1 || state.completed) return;
+    state.t1 = now();
+  };
+  const finalizePerf = (reason) => {
+    const state = perfStateRef.current;
+    if (!state.t0 || state.completed) return;
+    state.completed = true;
+    state.t2 = state.t2 ?? now();
+    const t0 = state.t0;
+    const t1 = state.t1;
+    const t2 = state.t2;
+    const ttfcMs = t1 ? t1 - t0 : void 0;
+    const ttlcMs = t2 - t0;
+    const snapshot = {
+      t0,
+      t1,
+      t2,
+      ttfcMs,
+      ttlcMs,
+      reason
+    };
+    setLastPerf(snapshot);
+    const ttfcLabel = ttfcMs !== void 0 ? `${(ttfcMs / 1e3).toFixed(2)}s` : "N/A";
+    const totalLabel = `${(ttlcMs / 1e3).toFixed(2)}s`;
+    console.log("[AUI-X Perf] TTFC: %s, Total: %s", ttfcLabel, totalLabel, {
+      t0,
+      t1,
+      t2,
+      ttfcMs,
+      ttlcMs,
+      reason
+    });
+  };
+  const sendMessage = useCallback(
+    async (userText, isActionPayload = defaultIsActionPayload) => {
+      if (!userText.trim() || isLoading) return;
+      setIsLoading(true);
+      perfStateRef.current = {
+        t0: now(),
+        t1: void 0,
+        t2: void 0,
+        hasFirstComponent: false,
+        completed: false
+      };
+      if (!isActionPayload) {
+        setMessages((prev) => [...prev, { role: "user", text: userText }]);
+      }
+      let assistantText = "";
+      let renderedSurface = false;
+      try {
+        let parts;
+        if (isActionPayload) {
+          let actionData;
+          try {
+            actionData = JSON.parse(userText);
+          } catch {
+            actionData = { userAction: { actionName: userText, context: {} } };
+          }
+          parts = [{ kind: "data", data: actionData }];
+        } else {
+          parts = [{ kind: "text", text: userText }];
+        }
+        const rpcRequest = {
+          jsonrpc: "2.0",
+          id: crypto.randomUUID(),
+          method: "message/stream",
+          params: {
+            message: {
+              kind: "message",
+              role: "user",
+              messageId: crypto.randomUUID(),
+              contextId: contextIdRef.current,
+              ...taskIdRef.current ? { taskId: taskIdRef.current } : {},
+              extensions: [A2UI_EXTENSION_URI],
+              parts
+            }
+          }
+        };
+        const response = await fetch(agentUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(rpcRequest)
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        if (!response.body) {
+          throw new Error("No response body");
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (!line.startsWith("data: ")) continue;
+            const jsonStr = line.slice(6).trim();
+            if (!jsonStr || jsonStr === "[DONE]") continue;
+            let event;
+            try {
+              event = JSON.parse(jsonStr);
+            } catch {
+              continue;
+            }
+            if (isTaskStatusUpdateEvent(event)) {
+              const { id: taskId, status } = event.result;
+              if (taskId) taskIdRef.current = taskId;
+              const rawParts = status.message?.parts ?? [];
+              const textChunk = extractText(rawParts);
+              if (textChunk) {
+                assistantText += textChunk;
+                setMessages((prev) => {
+                  const last = prev[prev.length - 1];
+                  if (last?.role === "assistant") {
+                    return [...prev.slice(0, -1), { ...last, text: assistantText }];
+                  }
+                  return [...prev, { role: "assistant", text: assistantText }];
+                });
+              }
+              const a2uiData = extractA2UIData(rawParts);
+              if (a2uiData.length > 0) {
+                markFirstComponentRendered();
+                logger.info("[A2UI] Received UI update part", {
+                  taskId,
+                  componentCount: a2uiData.length
+                });
+                actions.processMessages(a2uiData);
+                const surfaces = actions.getSurfaces();
+                logger.debug("[A2UI] Surfaces after process:", Array.from(surfaces.keys()));
+                renderedSurface = true;
+                setMessages((prev) => {
+                  const last = prev[prev.length - 1];
+                  if (last?.role === "assistant") {
+                    return [...prev.slice(0, -1), { ...last, hasSurface: true }];
+                  }
+                  return [...prev, { role: "assistant", text: assistantText, hasSurface: true }];
+                });
+              }
+            }
+            if (isTaskArtifactUpdateEvent(event)) {
+              const { artifact } = event.result;
+              const rawParts = artifact.parts ?? [];
+              const textChunk = extractText(rawParts);
+              if (textChunk) {
+                assistantText += textChunk;
+                setMessages((prev) => {
+                  const last = prev[prev.length - 1];
+                  if (last?.role === "assistant") {
+                    return [...prev.slice(0, -1), { ...last, text: assistantText }];
+                  }
+                  return [...prev, { role: "assistant", text: assistantText }];
+                });
+              }
+              const a2uiData = extractA2UIData(rawParts);
+              if (a2uiData.length > 0) {
+                markFirstComponentRendered();
+                actions.processMessages(a2uiData);
+                renderedSurface = true;
+                setMessages((prev) => {
+                  const last = prev[prev.length - 1];
+                  if (last?.role === "assistant") {
+                    return [...prev.slice(0, -1), { ...last, hasSurface: true }];
+                  }
+                  return [...prev, { role: "assistant", text: assistantText, hasSurface: true }];
+                });
+              }
+            }
+            if (isTaskStatusUpdateEvent(event) && (event.result.final || event.result.status.state === "completed")) {
+              finalizePerf("status-completed");
+            }
+          }
+        }
+        if (!assistantText && !renderedSurface) {
+          setMessages((prev) => [...prev, { role: "assistant", text: "\u2026" }]);
+        }
+      } catch (err) {
+        setMessages((prev) => [
+          ...prev,
+          { role: "assistant", text: `Connection error: ${String(err)}` }
+        ]);
+      } finally {
+        setIsLoading(false);
+        finalizePerf("sse-end");
+      }
+    },
+    [agentUrl, defaultIsActionPayload, isLoading, actions]
+  );
+  const processLocalMessages = useCallback(
+    (serverMessages, label = "Local tool call: rendered UI surface") => {
+      if (!serverMessages || serverMessages.length === 0) return;
+      logger.info("[A2UI] processLocalMessages:", label, `(${serverMessages.length} messages)`);
+      logger.debug("[A2UI] Surfaces BEFORE process:", Array.from(actions.getSurfaces().keys()));
+      actions.processMessages(serverMessages);
+      logger.debug("[A2UI] Surfaces AFTER process:", Array.from(actions.getSurfaces().keys()));
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: "assistant",
+          text: label,
+          hasSurface: true
+        }
+      ]);
+    },
+    [actions]
+  );
+  return { messages, isLoading, sendMessage, processLocalMessages, lastPerf };
+}
+
+export { A2UI_EXTENSION_URI, A2UI_MIME_TYPE, createLogger, createMFRegistry, logger, performHandshake, registerMFComponent, render, syncRegistryFromCatalog, useA2UIStream, useLogger };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map