@frontmcp/ui 0.5.1 → 0.6.0

package/src/base-template/bridge.js

@@ -1,452 +0,0 @@
-"use strict";
-/**
- * Platform Bridge - Reactive Data Store for Tool UI
- *
- * Provides a reactive interface for tool output data that works across:
- * - React (via useSyncExternalStore)
- * - HTMX (via custom events)
- * - Vanilla JS (via subscribe callbacks)
- *
- * Uses Object.defineProperty to intercept when platforms inject data,
- * automatically detecting and notifying subscribers when data changes.
- *
- * @example React integration
- * ```tsx
- * import { useSyncExternalStore } from 'react';
- *
- * function useToolOutput() {
- *   return useSyncExternalStore(
- *     window.__frontmcp.bridge.subscribe,
- *     window.__frontmcp.bridge.getSnapshot,
- *     window.__frontmcp.bridge.getServerSnapshot
- *   );
- * }
- * ```
- *
- * @example Vanilla JS
- * ```javascript
- * const unsubscribe = window.__frontmcp.bridge.subscribe(() => {
- *   const state = window.__frontmcp.bridge.getState();
- *   if (!state.loading) {
- *     renderWidget(state.data);
- *   }
- * });
- * ```
- *
- * @example HTMX
- * ```html
- * <div hx-trigger="frontmcp:change from:document" hx-get="/render">
- *   Loading...
- * </div>
- * ```
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BRIDGE_TYPES = void 0;
-exports.renderBridgeScript = renderBridgeScript;
-/**
- * Render the Platform Bridge inline script.
- *
- * This script creates a reactive data store that:
- * 1. Installs interceptors on window.openai to detect data injection
- * 2. Provides subscribe/getState API for React/HTMX/vanilla integration
- * 3. Dispatches custom events for HTMX compatibility
- * 4. Handles the race condition between iframe load and data injection
- *
- * @returns Script tag with bridge implementation
- */
-function renderBridgeScript() {
-    return `<script>
-(function() {
-  'use strict';
-
-  // ============================================
-  // Debug Mode
-  // ============================================
-
-  var DEBUG = window.location.search.indexOf('frontmcp_debug=1') > -1 ||
-              window.localStorage.getItem('frontmcp_debug') === '1';
-  var debugLog = [];
-
-  function log(level, message, data) {
-    var entry = {
-      ts: new Date().toISOString(),
-      level: level,
-      message: message,
-      data: data
-    };
-    debugLog.push(entry);
-    if (DEBUG) {
-      console[level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log'](
-        '[frontmcp] ' + message,
-        data || ''
-      );
-    }
-  }
-
-  // ============================================
-  // Bridge State Management
-  // ============================================
-
-  var state = { data: null, loading: true, error: null };
-  var subscribers = [];
-  var stateVersion = 0;  // For React useSyncExternalStore stability
-
-  function notify() {
-    stateVersion++;
-    for (var i = 0; i < subscribers.length; i++) {
-      try { subscribers[i](); } catch(e) {
-        log('error', 'Subscriber error:', { error: e.message, stack: e.stack });
-      }
-    }
-    // Dispatch custom event for HTMX
-    if (typeof CustomEvent !== 'undefined') {
-      document.dispatchEvent(new CustomEvent('frontmcp:change', { detail: state }));
-    }
-  }
-
-  function setData(data) {
-    // Skip if data hasn't actually changed (prevents unnecessary re-renders)
-    if (!state.loading && state.data === data) return;
-    log('info', 'setData called', {
-      dataType: typeof data,
-      dataLength: typeof data === 'string' ? data.length : 'N/A',
-      isNull: data === null,
-      isUndefined: data === undefined
-    });
-    state = { data: data, loading: false, error: null };
-    notify();
-  }
-
-  function setError(error) {
-    log('error', 'setError called', { error: error });
-    state = { data: null, loading: false, error: error };
-    notify();
-  }
-
-  function reset() {
-    log('info', 'reset called');
-    state = { data: null, loading: true, error: null };
-    notify();
-  }
-
-  // ============================================
-  // Data Validation
-  // ============================================
-
-  function validateToolOutput(data, source) {
-    var errors = [];
-
-    if (data === undefined) {
-      errors.push('toolOutput is undefined');
-    } else if (data === null) {
-      // null is valid initial state from OpenAI
-      log('info', 'toolOutput is null (OpenAI initial state)', { source: source });
-      return { valid: false, errors: ['initial_state'], isInitial: true };
-    }
-
-    if (typeof data === 'object' && data !== null) {
-      if (data.isError === true) {
-        errors.push('Tool returned error: ' + JSON.stringify(data));
-      }
-      // Check for MCP error structure
-      if (data.error && data.error.code) {
-        errors.push('MCP error: code=' + data.error.code + ', message=' + (data.error.message || 'unknown'));
-      }
-    }
-
-    if (errors.length > 0) {
-      log('warn', 'Validation issues', { source: source, errors: errors });
-    }
-
-    return { valid: errors.length === 0, errors: errors, isInitial: false };
-  }
-
-  function validateMetadata(meta, source) {
-    var errors = [];
-
-    if (!meta) {
-      errors.push('toolResponseMetadata is null/undefined');
-      return { valid: false, errors: errors };
-    }
-
-    if (typeof meta !== 'object') {
-      errors.push('toolResponseMetadata is not an object: ' + typeof meta);
-      return { valid: false, errors: errors };
-    }
-
-    var html = meta['ui/html'];
-    if (html !== undefined) {
-      if (typeof html !== 'string') {
-        errors.push('ui/html is not a string: ' + typeof html);
-      } else if (html.length === 0) {
-        errors.push('ui/html is empty string');
-      } else if (html.indexOf('validation-error') > -1) {
-        errors.push('ui/html contains validation error');
-        log('warn', 'HTML contains validation error', { htmlPreview: html.substring(0, 500) });
-      }
-    }
-
-    if (errors.length > 0) {
-      log('warn', 'Metadata validation issues', { source: source, errors: errors, keys: Object.keys(meta) });
-    }
-
-    return { valid: errors.length === 0, errors: errors };
-  }
-
-  // ============================================
-  // OpenAI Platform Interceptors
-  // ============================================
-
-  var openaiIntercepted = false;
-
-  function checkOpenAIData(openai) {
-    if (!openai) {
-      log('warn', 'checkOpenAIData: openai object is null');
-      return false;
-    }
-
-    log('info', 'checkOpenAIData called', {
-      hasToolOutput: openai.toolOutput !== undefined,
-      hasToolResponseMetadata: openai.toolResponseMetadata !== undefined,
-      toolOutputType: typeof openai.toolOutput,
-      metadataKeys: openai.toolResponseMetadata ? Object.keys(openai.toolResponseMetadata) : []
-    });
-
-    // Priority 1: Pre-rendered HTML from toolResponseMetadata
-    if (openai.toolResponseMetadata) {
-      var metaValidation = validateMetadata(openai.toolResponseMetadata, 'openai.toolResponseMetadata');
-      var html = openai.toolResponseMetadata['ui/html'];
-      if (html && typeof html === 'string') {
-        log('info', 'Using ui/html from metadata', { htmlLength: html.length });
-        setData(html);
-        return true;
-      }
-    }
-
-    // Priority 2: Tool output (skip null - that's OpenAI's initial state)
-    if (openai.toolOutput !== undefined && openai.toolOutput !== null) {
-      var outputValidation = validateToolOutput(openai.toolOutput, 'openai.toolOutput');
-      if (!outputValidation.isInitial) {
-        log('info', 'Using toolOutput', {
-          valid: outputValidation.valid,
-          errors: outputValidation.errors
-        });
-        setData(openai.toolOutput);
-        return true;
-      }
-    }
-
-    log('info', 'checkOpenAIData: no data found yet');
-    return false;
-  }
-
-  function installPropertyInterceptor(obj, prop, onSet) {
-    var current = obj[prop];
-    var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
-
-    // Don't re-intercept
-    if (descriptor && descriptor.get && descriptor.set) return;
-
-    Object.defineProperty(obj, prop, {
-      get: function() { return current; },
-      set: function(val) {
-        current = val;
-        onSet(val);
-      },
-      enumerable: true,
-      configurable: true
-    });
-  }
-
-  function installOpenAIInterceptors(openai) {
-    if (!openai || openaiIntercepted) return;
-    openaiIntercepted = true;
-
-    // Check existing data first
-    if (checkOpenAIData(openai)) return;
-
-    // Intercept toolOutput
-    installPropertyInterceptor(openai, 'toolOutput', function(val) {
-      checkOpenAIData(openai);
-    });
-
-    // Intercept toolResponseMetadata
-    installPropertyInterceptor(openai, 'toolResponseMetadata', function(val) {
-      checkOpenAIData(openai);
-    });
-  }
-
-  // Install interceptor on window.openai
-  if (typeof window.openai !== 'undefined') {
-    installOpenAIInterceptors(window.openai);
-  } else {
-    // OpenAI object doesn't exist yet - wait for it
-    var pendingOpenai = undefined;
-    Object.defineProperty(window, 'openai', {
-      get: function() { return pendingOpenai; },
-      set: function(val) {
-        pendingOpenai = val;
-        if (val) installOpenAIInterceptors(val);
-      },
-      enumerable: true,
-      configurable: true
-    });
-  }
-
-  // ============================================
-  // MCP/Generic Platform Support
-  // ============================================
-
-  // Check for existing __frontmcp.toolOutput
-  if (window.__frontmcp && window.__frontmcp.toolOutput !== undefined) {
-    setData(window.__frontmcp.toolOutput);
-  }
-
-  // Check for __mcpToolOutput
-  if (window.__mcpToolOutput !== undefined && window.__mcpToolOutput !== null) {
-    setData(window.__mcpToolOutput);
-  }
-
-  // Check for __mcpResponseMeta
-  if (window.__mcpResponseMeta && window.__mcpResponseMeta['ui/html']) {
-    setData(window.__mcpResponseMeta['ui/html']);
-  }
-
-  // ============================================
-  // Bridge API
-  // ============================================
-
-  window.__frontmcp = window.__frontmcp || {};
-
-  window.__frontmcp.bridge = {
-    getState: function() { return state; },
-
-    // React useSyncExternalStore compatible
-    getSnapshot: function() { return state; },
-    getServerSnapshot: function() { return { data: null, loading: true, error: null }; },
-
-    subscribe: function(callback) {
-      subscribers.push(callback);
-      return function() {
-        var idx = subscribers.indexOf(callback);
-        if (idx > -1) subscribers.splice(idx, 1);
-      };
-    },
-
-    hasData: function() { return !state.loading && state.data !== null; },
-
-    // Manual control (for testing/custom injection)
-    setData: setData,
-    setError: setError,
-    reset: reset,
-
-    // Debug API
-    debug: {
-      getLogs: function() { return debugLog.slice(); },
-      getLastErrors: function() {
-        return debugLog.filter(function(e) { return e.level === 'error' || e.level === 'warn'; });
-      },
-      enableDebug: function() {
-        DEBUG = true;
-        window.localStorage.setItem('frontmcp_debug', '1');
-        console.log('[frontmcp] Debug mode enabled. Reload page to see all logs.');
-      },
-      disableDebug: function() {
-        DEBUG = false;
-        window.localStorage.removeItem('frontmcp_debug');
-      },
-      isDebugEnabled: function() { return DEBUG; },
-      getStateHistory: function() {
-        return {
-          current: state,
-          version: stateVersion,
-          subscriberCount: subscribers.length,
-          openaiIntercepted: openaiIntercepted,
-          pollCount: pollCount
-        };
-      },
-      dumpAll: function() {
-        console.group('[frontmcp] Debug Dump');
-        console.log('State:', state);
-        console.log('Version:', stateVersion);
-        console.log('Subscribers:', subscribers.length);
-        console.log('OpenAI Intercepted:', openaiIntercepted);
-        console.log('Poll Count:', pollCount);
-        console.log('Debug Logs:', debugLog);
-        console.groupEnd();
-        return {
-          state: state,
-          logs: debugLog,
-          version: stateVersion,
-          openaiIntercepted: openaiIntercepted
-        };
-      }
-    }
-  };
-
-  // ============================================
-  // Fallback Polling (for platforms that don't trigger setters)
-  // ============================================
-
-  var pollCount = 0;
-  var maxPolls = 30;  // ~3 seconds with exponential backoff
-
-  function pollForData() {
-    if (state.data !== null || pollCount >= maxPolls) return;
-    pollCount++;
-
-    // Check all sources
-    if (window.openai) {
-      if (checkOpenAIData(window.openai)) return;
-    }
-
-    // Use getToolOutput if available
-    if (window.__frontmcp.getToolOutput) {
-      var data = window.__frontmcp.getToolOutput();
-      if (data !== undefined && data !== null) {
-        setData(data);
-        return;
-      }
-    }
-
-    // Exponential backoff: 50ms, 75ms, 112ms, ...
-    var delay = Math.min(50 * Math.pow(1.5, Math.min(pollCount, 10)), 500);
-    setTimeout(pollForData, delay);
-  }
-
-  // Start polling after a brief delay (give interceptors time to fire)
-  setTimeout(pollForData, 50);
-})();
-</script>`;
-}
-/**
- * Generate TypeScript types for the bridge (for documentation/IDE support).
- */
-exports.BRIDGE_TYPES = `
-interface BridgeState<T = unknown> {
-  data: T | null;
-  loading: boolean;
-  error: string | null;
-}
-
-interface PlatformBridge<T = unknown> {
-  getState(): BridgeState<T>;
-  subscribe(callback: () => void): () => void;
-  getSnapshot(): BridgeState<T>;
-  getServerSnapshot(): BridgeState<T>;
-  hasData(): boolean;
-  setData(data: T): void;
-  setError(error: string): void;
-  reset(): void;
-}
-
-declare global {
-  interface Window {
-    __frontmcp: {
-      bridge: PlatformBridge;
-      // ... other __frontmcp methods
-    };
-  }
-}
-`;
-//# sourceMappingURL=bridge.js.map

package/src/base-template/bridge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bridge.js","sourceRoot":"","sources":["../../../src/base-template/bridge.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;;;AA+CH,gDA4WC;AAvXD;;;;;;;;;;GAUG;AACH,SAAgB,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0WC,CAAC;AACX,CAAC;AAED;;GAEG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B3B,CAAC","sourcesContent":["/**\n * Platform Bridge - Reactive Data Store for Tool UI\n *\n * Provides a reactive interface for tool output data that works across:\n * - React (via useSyncExternalStore)\n * - HTMX (via custom events)\n * - Vanilla JS (via subscribe callbacks)\n *\n * Uses Object.defineProperty to intercept when platforms inject data,\n * automatically detecting and notifying subscribers when data changes.\n *\n * @example React integration\n * ```tsx\n * import { useSyncExternalStore } from 'react';\n *\n * function useToolOutput() {\n *   return useSyncExternalStore(\n *     window.__frontmcp.bridge.subscribe,\n *     window.__frontmcp.bridge.getSnapshot,\n *     window.__frontmcp.bridge.getServerSnapshot\n *   );\n * }\n * ```\n *\n * @example Vanilla JS\n * ```javascript\n * const unsubscribe = window.__frontmcp.bridge.subscribe(() => {\n *   const state = window.__frontmcp.bridge.getState();\n *   if (!state.loading) {\n *     renderWidget(state.data);\n *   }\n * });\n * ```\n *\n * @example HTMX\n * ```html\n * <div hx-trigger=\"frontmcp:change from:document\" hx-get=\"/render\">\n *   Loading...\n * </div>\n * ```\n */\n\n/**\n * Bridge state containing data, loading status, and error information.\n */\nexport interface BridgeState<T = unknown> {\n  /** Current data (null when loading or no data) */\n  data: T | null;\n  /** Whether the bridge is waiting for data */\n  loading: boolean;\n  /** Error message if data loading failed */\n  error: string | null;\n}\n\n/**\n * Platform Bridge interface for reactive data access.\n */\nexport interface PlatformBridge<T = unknown> {\n  /** Get current state snapshot */\n  getState(): BridgeState<T>;\n  /** Subscribe to state changes */\n  subscribe(callback: () => void): () => void;\n  /** React useSyncExternalStore compatible getSnapshot */\n  getSnapshot(): BridgeState<T>;\n  /** React SSR compatible getServerSnapshot */\n  getServerSnapshot(): BridgeState<T>;\n  /** Check if bridge has received data */\n  hasData(): boolean;\n  /** Manually set data (for testing or custom injection) */\n  setData(data: T): void;\n  /** Manually set error */\n  setError(error: string): void;\n  /** Reset to loading state */\n  reset(): void;\n}\n\n/**\n * Render the Platform Bridge inline script.\n *\n * This script creates a reactive data store that:\n * 1. Installs interceptors on window.openai to detect data injection\n * 2. Provides subscribe/getState API for React/HTMX/vanilla integration\n * 3. Dispatches custom events for HTMX compatibility\n * 4. Handles the race condition between iframe load and data injection\n *\n * @returns Script tag with bridge implementation\n */\nexport function renderBridgeScript(): string {\n  return `<script>\n(function() {\n  'use strict';\n\n  // ============================================\n  // Debug Mode\n  // ============================================\n\n  var DEBUG = window.location.search.indexOf('frontmcp_debug=1') > -1 ||\n              window.localStorage.getItem('frontmcp_debug') === '1';\n  var debugLog = [];\n\n  function log(level, message, data) {\n    var entry = {\n      ts: new Date().toISOString(),\n      level: level,\n      message: message,\n      data: data\n    };\n    debugLog.push(entry);\n    if (DEBUG) {\n      console[level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log'](\n        '[frontmcp] ' + message,\n        data || ''\n      );\n    }\n  }\n\n  // ============================================\n  // Bridge State Management\n  // ============================================\n\n  var state = { data: null, loading: true, error: null };\n  var subscribers = [];\n  var stateVersion = 0;  // For React useSyncExternalStore stability\n\n  function notify() {\n    stateVersion++;\n    for (var i = 0; i < subscribers.length; i++) {\n      try { subscribers[i](); } catch(e) {\n        log('error', 'Subscriber error:', { error: e.message, stack: e.stack });\n      }\n    }\n    // Dispatch custom event for HTMX\n    if (typeof CustomEvent !== 'undefined') {\n      document.dispatchEvent(new CustomEvent('frontmcp:change', { detail: state }));\n    }\n  }\n\n  function setData(data) {\n    // Skip if data hasn't actually changed (prevents unnecessary re-renders)\n    if (!state.loading && state.data === data) return;\n    log('info', 'setData called', {\n      dataType: typeof data,\n      dataLength: typeof data === 'string' ? data.length : 'N/A',\n      isNull: data === null,\n      isUndefined: data === undefined\n    });\n    state = { data: data, loading: false, error: null };\n    notify();\n  }\n\n  function setError(error) {\n    log('error', 'setError called', { error: error });\n    state = { data: null, loading: false, error: error };\n    notify();\n  }\n\n  function reset() {\n    log('info', 'reset called');\n    state = { data: null, loading: true, error: null };\n    notify();\n  }\n\n  // ============================================\n  // Data Validation\n  // ============================================\n\n  function validateToolOutput(data, source) {\n    var errors = [];\n\n    if (data === undefined) {\n      errors.push('toolOutput is undefined');\n    } else if (data === null) {\n      // null is valid initial state from OpenAI\n      log('info', 'toolOutput is null (OpenAI initial state)', { source: source });\n      return { valid: false, errors: ['initial_state'], isInitial: true };\n    }\n\n    if (typeof data === 'object' && data !== null) {\n      if (data.isError === true) {\n        errors.push('Tool returned error: ' + JSON.stringify(data));\n      }\n      // Check for MCP error structure\n      if (data.error && data.error.code) {\n        errors.push('MCP error: code=' + data.error.code + ', message=' + (data.error.message || 'unknown'));\n      }\n    }\n\n    if (errors.length > 0) {\n      log('warn', 'Validation issues', { source: source, errors: errors });\n    }\n\n    return { valid: errors.length === 0, errors: errors, isInitial: false };\n  }\n\n  function validateMetadata(meta, source) {\n    var errors = [];\n\n    if (!meta) {\n      errors.push('toolResponseMetadata is null/undefined');\n      return { valid: false, errors: errors };\n    }\n\n    if (typeof meta !== 'object') {\n      errors.push('toolResponseMetadata is not an object: ' + typeof meta);\n      return { valid: false, errors: errors };\n    }\n\n    var html = meta['ui/html'];\n    if (html !== undefined) {\n      if (typeof html !== 'string') {\n        errors.push('ui/html is not a string: ' + typeof html);\n      } else if (html.length === 0) {\n        errors.push('ui/html is empty string');\n      } else if (html.indexOf('validation-error') > -1) {\n        errors.push('ui/html contains validation error');\n        log('warn', 'HTML contains validation error', { htmlPreview: html.substring(0, 500) });\n      }\n    }\n\n    if (errors.length > 0) {\n      log('warn', 'Metadata validation issues', { source: source, errors: errors, keys: Object.keys(meta) });\n    }\n\n    return { valid: errors.length === 0, errors: errors };\n  }\n\n  // ============================================\n  // OpenAI Platform Interceptors\n  // ============================================\n\n  var openaiIntercepted = false;\n\n  function checkOpenAIData(openai) {\n    if (!openai) {\n      log('warn', 'checkOpenAIData: openai object is null');\n      return false;\n    }\n\n    log('info', 'checkOpenAIData called', {\n      hasToolOutput: openai.toolOutput !== undefined,\n      hasToolResponseMetadata: openai.toolResponseMetadata !== undefined,\n      toolOutputType: typeof openai.toolOutput,\n      metadataKeys: openai.toolResponseMetadata ? Object.keys(openai.toolResponseMetadata) : []\n    });\n\n    // Priority 1: Pre-rendered HTML from toolResponseMetadata\n    if (openai.toolResponseMetadata) {\n      var metaValidation = validateMetadata(openai.toolResponseMetadata, 'openai.toolResponseMetadata');\n      var html = openai.toolResponseMetadata['ui/html'];\n      if (html && typeof html === 'string') {\n        log('info', 'Using ui/html from metadata', { htmlLength: html.length });\n        setData(html);\n        return true;\n      }\n    }\n\n    // Priority 2: Tool output (skip null - that's OpenAI's initial state)\n    if (openai.toolOutput !== undefined && openai.toolOutput !== null) {\n      var outputValidation = validateToolOutput(openai.toolOutput, 'openai.toolOutput');\n      if (!outputValidation.isInitial) {\n        log('info', 'Using toolOutput', {\n          valid: outputValidation.valid,\n          errors: outputValidation.errors\n        });\n        setData(openai.toolOutput);\n        return true;\n      }\n    }\n\n    log('info', 'checkOpenAIData: no data found yet');\n    return false;\n  }\n\n  function installPropertyInterceptor(obj, prop, onSet) {\n    var current = obj[prop];\n    var descriptor = Object.getOwnPropertyDescriptor(obj, prop);\n\n    // Don't re-intercept\n    if (descriptor && descriptor.get && descriptor.set) return;\n\n    Object.defineProperty(obj, prop, {\n      get: function() { return current; },\n      set: function(val) {\n        current = val;\n        onSet(val);\n      },\n      enumerable: true,\n      configurable: true\n    });\n  }\n\n  function installOpenAIInterceptors(openai) {\n    if (!openai || openaiIntercepted) return;\n    openaiIntercepted = true;\n\n    // Check existing data first\n    if (checkOpenAIData(openai)) return;\n\n    // Intercept toolOutput\n    installPropertyInterceptor(openai, 'toolOutput', function(val) {\n      checkOpenAIData(openai);\n    });\n\n    // Intercept toolResponseMetadata\n    installPropertyInterceptor(openai, 'toolResponseMetadata', function(val) {\n      checkOpenAIData(openai);\n    });\n  }\n\n  // Install interceptor on window.openai\n  if (typeof window.openai !== 'undefined') {\n    installOpenAIInterceptors(window.openai);\n  } else {\n    // OpenAI object doesn't exist yet - wait for it\n    var pendingOpenai = undefined;\n    Object.defineProperty(window, 'openai', {\n      get: function() { return pendingOpenai; },\n      set: function(val) {\n        pendingOpenai = val;\n        if (val) installOpenAIInterceptors(val);\n      },\n      enumerable: true,\n      configurable: true\n    });\n  }\n\n  // ============================================\n  // MCP/Generic Platform Support\n  // ============================================\n\n  // Check for existing __frontmcp.toolOutput\n  if (window.__frontmcp && window.__frontmcp.toolOutput !== undefined) {\n    setData(window.__frontmcp.toolOutput);\n  }\n\n  // Check for __mcpToolOutput\n  if (window.__mcpToolOutput !== undefined && window.__mcpToolOutput !== null) {\n    setData(window.__mcpToolOutput);\n  }\n\n  // Check for __mcpResponseMeta\n  if (window.__mcpResponseMeta && window.__mcpResponseMeta['ui/html']) {\n    setData(window.__mcpResponseMeta['ui/html']);\n  }\n\n  // ============================================\n  // Bridge API\n  // ============================================\n\n  window.__frontmcp = window.__frontmcp || {};\n\n  window.__frontmcp.bridge = {\n    getState: function() { return state; },\n\n    // React useSyncExternalStore compatible\n    getSnapshot: function() { return state; },\n    getServerSnapshot: function() { return { data: null, loading: true, error: null }; },\n\n    subscribe: function(callback) {\n      subscribers.push(callback);\n      return function() {\n        var idx = subscribers.indexOf(callback);\n        if (idx > -1) subscribers.splice(idx, 1);\n      };\n    },\n\n    hasData: function() { return !state.loading && state.data !== null; },\n\n    // Manual control (for testing/custom injection)\n    setData: setData,\n    setError: setError,\n    reset: reset,\n\n    // Debug API\n    debug: {\n      getLogs: function() { return debugLog.slice(); },\n      getLastErrors: function() {\n        return debugLog.filter(function(e) { return e.level === 'error' || e.level === 'warn'; });\n      },\n      enableDebug: function() {\n        DEBUG = true;\n        window.localStorage.setItem('frontmcp_debug', '1');\n        console.log('[frontmcp] Debug mode enabled. Reload page to see all logs.');\n      },\n      disableDebug: function() {\n        DEBUG = false;\n        window.localStorage.removeItem('frontmcp_debug');\n      },\n      isDebugEnabled: function() { return DEBUG; },\n      getStateHistory: function() {\n        return {\n          current: state,\n          version: stateVersion,\n          subscriberCount: subscribers.length,\n          openaiIntercepted: openaiIntercepted,\n          pollCount: pollCount\n        };\n      },\n      dumpAll: function() {\n        console.group('[frontmcp] Debug Dump');\n        console.log('State:', state);\n        console.log('Version:', stateVersion);\n        console.log('Subscribers:', subscribers.length);\n        console.log('OpenAI Intercepted:', openaiIntercepted);\n        console.log('Poll Count:', pollCount);\n        console.log('Debug Logs:', debugLog);\n        console.groupEnd();\n        return {\n          state: state,\n          logs: debugLog,\n          version: stateVersion,\n          openaiIntercepted: openaiIntercepted\n        };\n      }\n    }\n  };\n\n  // ============================================\n  // Fallback Polling (for platforms that don't trigger setters)\n  // ============================================\n\n  var pollCount = 0;\n  var maxPolls = 30;  // ~3 seconds with exponential backoff\n\n  function pollForData() {\n    if (state.data !== null || pollCount >= maxPolls) return;\n    pollCount++;\n\n    // Check all sources\n    if (window.openai) {\n      if (checkOpenAIData(window.openai)) return;\n    }\n\n    // Use getToolOutput if available\n    if (window.__frontmcp.getToolOutput) {\n      var data = window.__frontmcp.getToolOutput();\n      if (data !== undefined && data !== null) {\n        setData(data);\n        return;\n      }\n    }\n\n    // Exponential backoff: 50ms, 75ms, 112ms, ...\n    var delay = Math.min(50 * Math.pow(1.5, Math.min(pollCount, 10)), 500);\n    setTimeout(pollForData, delay);\n  }\n\n  // Start polling after a brief delay (give interceptors time to fire)\n  setTimeout(pollForData, 50);\n})();\n</script>`;\n}\n\n/**\n * Generate TypeScript types for the bridge (for documentation/IDE support).\n */\nexport const BRIDGE_TYPES = `\ninterface BridgeState<T = unknown> {\n  data: T | null;\n  loading: boolean;\n  error: string | null;\n}\n\ninterface PlatformBridge<T = unknown> {\n  getState(): BridgeState<T>;\n  subscribe(callback: () => void): () => void;\n  getSnapshot(): BridgeState<T>;\n  getServerSnapshot(): BridgeState<T>;\n  hasData(): boolean;\n  setData(data: T): void;\n  setError(error: string): void;\n  reset(): void;\n}\n\ndeclare global {\n  interface Window {\n    __frontmcp: {\n      bridge: PlatformBridge;\n      // ... other __frontmcp methods\n    };\n  }\n}\n`;\n"]}

package/src/base-template/default-base-template.d.ts

@@ -1,91 +0,0 @@
-/**
- * Default Base Template for Tool UI
- *
- * Provides a generic HTML wrapper for tool output widgets that:
- * 1. Includes theming (Tailwind CSS with @theme)
- * 2. Includes platform polyfills (callTool, detectMcpSession)
- * 3. Polls for toolOutput from window.openai or window.__frontmcp
- * 4. Renders content via window.__frontmcp.renderContent or default JSON renderer
- *
- * This template is platform-agnostic and works with:
- * - OpenAI Apps SDK (window.openai.toolOutput)
- * - Claude Artifacts
- * - Custom hosts using MCP protocol
- * - ngrok/iframe scenarios
- */
-import { type ThemeConfig } from '../theme';
-import { type McpSession } from './polyfills';
-/**
- * Options for creating a default base template.
- */
-export interface BaseTemplateOptions {
-    /** Tool name for identification */
-    toolName: string;
-    /** Theme configuration */
-    theme?: ThemeConfig;
-    /** MCP session info for callTool polyfill fallback */
-    mcpSession?: McpSession;
-    /** Include HTMX (default: false) */
-    htmx?: boolean;
-    /** Include Alpine.js (default: false) */
-    alpine?: boolean;
-    /** Include fonts (default: true) */
-    fonts?: boolean;
-    /** Use inline scripts (for blocked network platforms) */
-    inline?: boolean;
-    /**
-     * Additional head content (scripts, meta tags).
-     * @warning This content is injected WITHOUT escaping. Only use with trusted content.
-     */
-    headContent?: string;
-    /** Custom body classes */
-    bodyClass?: string;
-    /** Custom widget container classes */
-    containerClass?: string;
-}
-/**
- * Create a default base template for tool UI widgets.
- *
- * This generates a complete HTML document that:
- * 1. Loads Tailwind CSS with theme configuration
- * 2. Injects platform polyfills (callTool, detectMcpSession, getToolOutput)
- * 3. Waits for toolOutput to be injected
- * 4. Renders content using window.__frontmcp.renderContent or default JSON renderer
- *
- * @param options - Base template configuration
- * @returns Complete HTML document string
- *
- * @example Basic usage
- * ```typescript
- * const html = createDefaultBaseTemplate({ toolName: 'get_weather' });
- * ```
- *
- * @example With custom theme and MCP session
- * ```typescript
- * const html = createDefaultBaseTemplate({
- *   toolName: 'get_weather',
- *   theme: customTheme,
- *   mcpSession: { mcpUrl: 'https://mcp.example.com', sessionId: 'abc123' },
- * });
- * ```
- *
- * @example For Claude Artifacts (inline scripts)
- * ```typescript
- * await fetchAndCacheScriptsFromTheme(theme);
- * const html = createDefaultBaseTemplate({
- *   toolName: 'get_weather',
- *   inline: true,
- * });
- * ```
- */
-export declare function createDefaultBaseTemplate(options: BaseTemplateOptions): string;
-/**
- * Create a minimal base template without fonts.
- *
- * Use this for lightweight widgets or when fonts are loaded elsewhere.
- *
- * @param toolName - Tool name for identification
- * @param mcpSession - Optional MCP session info
- * @returns Complete HTML document string
- */
-export declare function createMinimalBaseTemplate(toolName: string, mcpSession?: McpSession): string;