@creature-ai/sdk 0.1.2 → 0.1.4

package/dist/core/index.js

@@ -9325,8 +9325,11 @@ var Subscribable = class {
   }
 };
 
-// src/core/McpHostClient.ts
-var McpHostClient = class extends Subscribable {
+// src/core/McpAppHostClient.ts
+var McpAppHostClient = class extends Subscribable {
+  // ============================================================================
+  // Private Properties
+  // ============================================================================
   state = {
     isReady: false,
     environment: "mcp-apps",
@@ -9335,18 +9338,22 @@ var McpHostClient = class extends Subscribable {
   config;
   app = null;
   connected = false;
+  // ============================================================================
+  // Constructor
+  // ============================================================================
   constructor(config) {
     super();
     this.config = config;
   }
+  // ============================================================================
+  // Public API
+  // ============================================================================
+  /**
+   * Get the current client state.
+   */
   getState() {
     return this.state;
   }
-  setState(partial) {
-    const prev = this.state;
-    this.state = { ...this.state, ...partial };
-    this.notifyStateChange(this.state, prev);
-  }
   /**
    * Connect to the MCP Apps host.
    *
@@ -9368,90 +9375,6 @@ var McpHostClient = class extends Subscribable {
     this.setupHandlers();
     this.initiateConnection();
   }
-  /**
-   * Set up notification handlers on the App instance.
-   *
-   * Maps the official SDK's callback pattern to our event emitter pattern,
-   * allowing consumers to use `.on("tool-result", ...)` etc.
-   */
-  setupHandlers() {
-    if (!this.app) return;
-    this.app.ontoolinput = (params) => {
-      console.debug(`[${this.config.name}] Received tool-input`, { args: params.arguments });
-      this.emit("tool-input", params.arguments || {});
-    };
-    this.app.ontoolresult = (params) => {
-      console.log(`[McpHostClient] ontoolresult called`, {
-        isError: params.isError,
-        source: params.source,
-        hasContent: !!params.content,
-        hasStructuredContent: !!params.structuredContent,
-        structuredContent: params.structuredContent
-      });
-      const textContent = params.content?.filter((item) => item.type === "text").map((item) => ({ type: item.type, text: item.text }));
-      const result = {
-        content: textContent,
-        structuredContent: params.structuredContent,
-        isError: params.isError,
-        source: params.source
-      };
-      console.log(`[McpHostClient] Emitting tool-result event`, result);
-      this.emit("tool-result", result);
-    };
-    this.app.onhostcontextchanged = (params) => {
-      console.debug(`[${this.config.name}] Host context changed`, { theme: params.theme });
-      if (params.theme) {
-        YU(params.theme);
-        this.emit("theme-change", params.theme);
-      }
-      if (params.styles?.variables) {
-        QU(params.styles.variables);
-      }
-      if (params.styles?.css?.fonts) {
-        qU(params.styles.css.fonts);
-      }
-    };
-    this.app.onteardown = async (_params, _extra) => {
-      console.debug(`[${this.config.name}] Teardown requested`);
-      await this.emit("teardown");
-      return {};
-    };
-  }
-  /**
-   * Initiate connection using PostMessageTransport.
-   *
-   * The SDK's App.connect() handles the protocol handshake correctly:
-   * the guest (App) sends `ui/initialize` to the host.
-   */
-  async initiateConnection() {
-    if (!this.app) {
-      return;
-    }
-    try {
-      const transport = new Yn(window.parent, window.parent);
-      await this.app.connect(transport);
-      const hostContext = this.app.getHostContext();
-      console.debug(`[${this.config.name}] Connected to host`, { theme: hostContext?.theme });
-      if (hostContext?.theme) {
-        YU(hostContext.theme);
-        this.emit("theme-change", hostContext.theme);
-      }
-      if (hostContext?.styles?.variables) {
-        QU(hostContext.styles.variables);
-      }
-      if (hostContext?.styles?.css?.fonts) {
-        qU(hostContext.styles.css.fonts);
-      }
-      const widgetState = hostContext?.widgetState;
-      if (widgetState) {
-        this.setState({ widgetState });
-        this.emit("widget-state-change", widgetState);
-      }
-      this.setState({ isReady: true });
-    } catch (error) {
-      console.error(`[${this.config.name}] Connection failed`, { error });
-    }
-  }
   /**
    * Disconnect from the host.
    *
@@ -9484,9 +9407,8 @@ var McpHostClient = class extends Subscribable {
       name: toolName,
       arguments: args
     });
-    const textContent = sdkResult.content?.filter((item) => item.type === "text").map((item) => ({ type: item.type, text: item.text }));
     const result = {
-      content: textContent,
+      content: this.extractTextContent(sdkResult.content),
       structuredContent: sdkResult.structuredContent,
       isError: sdkResult.isError
     };
@@ -9541,8 +9463,6 @@ var McpHostClient = class extends Subscribable {
    * to the host. Logs appear in the unified DevConsole alongside server logs,
    * with appropriate color coding based on level.
    *
-   * The logger name is automatically set to the app name from config.
-   *
    * @param level - Log severity level (debug, info, notice, warning, error)
    * @param message - Log message
    * @param data - Optional structured data to include with the log
@@ -9559,10 +9479,113 @@ var McpHostClient = class extends Subscribable {
       data: data ? { message, ...data } : message
     });
   }
+  // ============================================================================
+  // Private Methods
+  // ============================================================================
+  /**
+   * Update internal state and notify listeners.
+   */
+  setState(partial) {
+    const prev = this.state;
+    this.state = { ...this.state, ...partial };
+    this.notifyStateChange(this.state, prev);
+  }
+  /**
+   * Set up notification handlers on the App instance.
+   *
+   * Maps the official SDK's callback pattern to our event emitter pattern,
+   * allowing consumers to use `.on("tool-result", ...)` etc.
+   */
+  setupHandlers() {
+    if (!this.app) return;
+    this.app.ontoolinput = (params) => {
+      console.debug(`[${this.config.name}] Received tool-input`, { args: params.arguments });
+      this.emit("tool-input", params.arguments || {});
+    };
+    this.app.ontoolresult = (params) => {
+      console.log(`[McpAppHostClient] ontoolresult called`, {
+        isError: params.isError,
+        source: params.source,
+        hasContent: !!params.content,
+        hasStructuredContent: !!params.structuredContent,
+        structuredContent: params.structuredContent
+      });
+      const result = {
+        content: this.extractTextContent(params.content),
+        structuredContent: params.structuredContent,
+        isError: params.isError,
+        source: params.source
+      };
+      console.log(`[McpAppHostClient] Emitting tool-result event`, result);
+      this.emit("tool-result", result);
+    };
+    this.app.onhostcontextchanged = (params) => {
+      console.debug(`[${this.config.name}] Host context changed`, { theme: params.theme });
+      this.applyHostContext(params);
+    };
+    this.app.onteardown = async (_params, _extra) => {
+      console.debug(`[${this.config.name}] Teardown requested`);
+      await this.emit("teardown");
+      return {};
+    };
+  }
+  /**
+   * Initiate connection using PostMessageTransport.
+   *
+   * The SDK's App.connect() handles the protocol handshake correctly:
+   * the guest (App) sends `ui/initialize` to the host.
+   */
+  async initiateConnection() {
+    if (!this.app) {
+      return;
+    }
+    try {
+      const transport = new Yn(window.parent, window.parent);
+      await this.app.connect(transport);
+      const hostContext = this.app.getHostContext();
+      console.debug(`[${this.config.name}] Connected to host`, { theme: hostContext?.theme });
+      if (hostContext) {
+        this.applyHostContext(hostContext);
+        const widgetState = hostContext.widgetState;
+        if (widgetState) {
+          this.setState({ widgetState });
+          this.emit("widget-state-change", widgetState);
+        }
+      }
+      this.setState({ isReady: true });
+    } catch (error) {
+      console.error(`[${this.config.name}] Connection failed`, { error });
+    }
+  }
+  /**
+   * Apply theme, styles, and fonts from host context.
+   */
+  applyHostContext(context) {
+    if (context.theme) {
+      YU(context.theme);
+      this.emit("theme-change", context.theme);
+    }
+    if (context.styles?.variables) {
+      QU(context.styles.variables);
+    }
+    if (context.styles?.css?.fonts) {
+      qU(context.styles.css.fonts);
+    }
+  }
+  /**
+   * Extract text content from SDK result content array.
+   * Filters to only include text items since our ToolResult type expects text.
+   */
+  extractTextContent(content) {
+    return content?.filter((item) => item.type === "text").map((item) => ({ type: item.type, text: item.text }));
+  }
 };
 
-// src/core/ChatGPTHostClient.ts
-var ChatGPTHostClient = class extends Subscribable {
+// src/core/ChatGptAppHostClient.ts
+var ChatGptAppHostClient = class extends Subscribable {
+  // ============================================================================
+  // Private Properties
+  // ============================================================================
   state = {
     isReady: false,
     environment: "chatgpt",
@@ -9572,24 +9595,39 @@ var ChatGPTHostClient = class extends Subscribable {
   connected = false;
   hasProcessedInitialData = false;
   globalsHandler = null;
+  // ============================================================================
+  // Constructor
+  // ============================================================================
   constructor(config) {
     super();
     this.config = config;
   }
+  // ============================================================================
+  // Public API
+  // ============================================================================
+  /**
+   * Get the current client state.
+   */
   getState() {
     return this.state;
   }
-  setState(partial) {
-    const prev = this.state;
-    this.state = { ...this.state, ...partial };
-    this.notifyStateChange(this.state, prev);
-  }
+  /**
+   * Connect to the ChatGPT host.
+   *
+   * Processes initial data from `window.openai` and sets up a listener
+   * for subsequent `openai:set_globals` events.
+   */
   connect() {
     if (this.connected) return;
     this.connected = true;
     this.processInitialData();
     this.setupGlobalsListener();
   }
+  /**
+   * Disconnect from the host.
+   *
+   * Removes the globals event listener.
+   */
   disconnect() {
     if (!this.connected) return;
     this.connected = false;
@@ -9598,39 +9636,13 @@ var ChatGPTHostClient = class extends Subscribable {
       this.globalsHandler = null;
     }
   }
-  processInitialData() {
-    if (this.hasProcessedInitialData) return;
-    const openai = window.openai;
-    if (!openai) {
-      console.warn("[SDK] window.openai not available");
-      return;
-    }
-    this.hasProcessedInitialData = true;
-    this.setState({ isReady: true });
-    if (openai.toolOutput) {
-      this.emit("tool-input", openai.toolOutput);
-      this.emit("tool-result", { structuredContent: openai.toolOutput });
-    }
-    if (openai.widgetState) {
-      this.setState({ widgetState: openai.widgetState });
-      this.emit("widget-state-change", openai.widgetState);
-    }
-  }
-  setupGlobalsListener() {
-    this.globalsHandler = (event) => {
-      const customEvent = event;
-      const globals = customEvent.detail?.globals;
-      if (globals?.toolOutput) {
-        this.emit("tool-input", globals.toolOutput);
-        this.emit("tool-result", { structuredContent: globals.toolOutput });
-      }
-      if (globals?.widgetState !== void 0) {
-        this.setState({ widgetState: globals.widgetState });
-        this.emit("widget-state-change", globals.widgetState);
-      }
-    };
-    window.addEventListener("openai:set_globals", this.globalsHandler, { passive: true });
-  }
+  /**
+   * Call a tool on the MCP server via the ChatGPT bridge.
+   *
+   * @param toolName - Name of the tool to call
+   * @param args - Arguments to pass to the tool
+   * @returns Tool result with content and structuredContent
+   */
   async callTool(toolName, args) {
     const openai = window.openai;
     if (!openai?.callTool) {
@@ -9648,8 +9660,18 @@ var ChatGPTHostClient = class extends Subscribable {
     this.emit("tool-result", result);
     return result;
   }
+  /**
+   * Send a notification to the host.
+   *
+   * No-op on ChatGPT — notifications are not supported.
+   */
   sendNotification(_method, _params) {
   }
+  /**
+   * Set widget state and sync with the ChatGPT host.
+   *
+   * @param state - New widget state (or null to clear)
+   */
   setWidgetState(state) {
     this.setState({ widgetState: state });
     if (window.openai?.setWidgetState) {
@@ -9661,7 +9683,7 @@ var ChatGPTHostClient = class extends Subscribable {
    * Log a message to the console.
    *
    * ChatGPT doesn't have a DevConsole, so logs go to browser console only.
-   * This provides API parity with McpHostClient.
+   * This provides API parity with McpAppHostClient.
    *
    * @param level - Log severity level
    * @param message - Log message
@@ -9671,6 +9693,68 @@ var ChatGPTHostClient = class extends Subscribable {
     const consoleMethod = level === "error" ? "error" : level === "warning" ? "warn" : "log";
     console[consoleMethod](`[${this.config.name}]`, message, data ?? "");
   }
+  // ============================================================================
+  // Private Methods
+  // ============================================================================
+  /**
+   * Update internal state and notify listeners.
+   */
+  setState(partial) {
+    const prev = this.state;
+    this.state = { ...this.state, ...partial };
+    this.notifyStateChange(this.state, prev);
+  }
+  /**
+   * Process initial data from `window.openai`.
+   *
+   * Called once on connect to handle any tool output or widget state
+   * that was set before the client connected.
+   */
+  processInitialData() {
+    if (this.hasProcessedInitialData) return;
+    const openai = window.openai;
+    if (!openai) {
+      console.warn("[SDK] window.openai not available");
+      return;
+    }
+    this.hasProcessedInitialData = true;
+    this.setState({ isReady: true });
+    if (openai.toolOutput) {
+      this.emit("tool-input", openai.toolOutput);
+      this.emit("tool-result", { structuredContent: openai.toolOutput });
+    }
+    if (openai.widgetState) {
+      this.setState({ widgetState: openai.widgetState });
+      this.emit("widget-state-change", openai.widgetState);
+    }
+  }
+  /**
+   * Set up listener for `openai:set_globals` events.
+   *
+   * ChatGPT dispatches this event when tool output or widget state
+   * changes after initial load.
+   */
+  setupGlobalsListener() {
+    this.globalsHandler = (event) => {
+      const customEvent = event;
+      const globals = customEvent.detail?.globals;
+      if (globals?.toolOutput) {
+        this.emit("tool-input", globals.toolOutput);
+        this.emit("tool-result", { structuredContent: globals.toolOutput });
+      }
+      if (globals?.widgetState !== void 0) {
+        this.setState({ widgetState: globals.widgetState });
+        this.emit("widget-state-change", globals.widgetState);
+      }
+    };
+    window.addEventListener("openai:set_globals", this.globalsHandler, { passive: true });
+  }
+  /**
+   * Request a display mode change from the ChatGPT host.
+   *
+   * @param params - Display mode to request
+   * @returns The resulting display mode
+   */
   async requestDisplayMode(params) {
     const openai = window.openai;
     if (openai?.requestDisplayMode) {
@@ -9695,123 +9779,8 @@ function detectEnvironment() {
   return "standalone";
 }
 
-// src/core/AppSession.ts
-var AppSession = class {
-  id;
-  _state;
-  listeners = /* @__PURE__ */ new Set();
-  hostClient = null;
-  hostUnsubscribe = null;
-  constructor(initialState = {}, options = {}) {
-    this.id = options.id ?? this.generateId();
-    this._state = {
-      internal: initialState.internal ?? {},
-      backend: initialState.backend ?? {},
-      ui: initialState.ui ?? null
-    };
-  }
-  generateId() {
-    return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-  }
-  get state() {
-    return this._state;
-  }
-  get internal() {
-    return this._state.internal;
-  }
-  get backend() {
-    return this._state.backend;
-  }
-  get ui() {
-    return this._state.ui;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  notify(prevState) {
-    this.listeners.forEach((listener) => listener(this._state, prevState));
-  }
-  setState(partial) {
-    const prev = this._state;
-    this._state = {
-      internal: partial.internal !== void 0 ? { ...prev.internal, ...partial.internal } : prev.internal,
-      backend: partial.backend !== void 0 ? { ...prev.backend, ...partial.backend } : prev.backend,
-      ui: partial.ui !== void 0 ? partial.ui : prev.ui
-    };
-    this.notify(prev);
-  }
-  setInternal(internal) {
-    const prev = this._state;
-    this._state = {
-      ...prev,
-      internal: { ...prev.internal, ...internal }
-    };
-    this.notify(prev);
-  }
-  setBackend(backend) {
-    const prev = this._state;
-    this._state = {
-      ...prev,
-      backend: { ...prev.backend, ...backend }
-    };
-    this.notify(prev);
-  }
-  setUi(ui2) {
-    console.log(`[AppSession:${this.id}] setUi`, ui2);
-    const prev = this._state;
-    this._state = { ...prev, ui: ui2 };
-    this.notify(prev);
-    if (this.hostClient) {
-      this.hostClient.setWidgetState(ui2);
-    }
-  }
-  updateUi(partial) {
-    const prev = this._state;
-    const newUi = prev.ui !== null ? { ...prev.ui, ...partial } : partial;
-    this._state = { ...prev, ui: newUi };
-    this.notify(prev);
-    if (this.hostClient) {
-      this.hostClient.setWidgetState(newUi);
-    }
-  }
-  bindHost(host) {
-    this.hostClient = host;
-    console.log(`[AppSession:${this.id}] Binding to host`);
-    const currentHostState = host.getState();
-    if (currentHostState.widgetState !== null && currentHostState.widgetState !== void 0) {
-      console.log(`[AppSession:${this.id}] Restoring UI state from host`, currentHostState.widgetState);
-      const prev = this._state;
-      this._state = { ...prev, ui: currentHostState.widgetState };
-      this.notify(prev);
-    }
-    this.hostUnsubscribe = host.on("widget-state-change", (widgetState) => {
-      console.log(`[AppSession:${this.id}] Host widget state changed`, widgetState);
-      const prev = this._state;
-      this._state = { ...prev, ui: widgetState };
-      this.notify(prev);
-    });
-    return () => {
-      this.unbindHost();
-    };
-  }
-  unbindHost() {
-    console.log(`[AppSession:${this.id}] Unbinding from host`);
-    if (this.hostUnsubscribe) {
-      this.hostUnsubscribe();
-      this.hostUnsubscribe = null;
-    }
-    this.hostClient = null;
-  }
-  injectAppSessionId(data) {
-    return { ...data, appSessionId: this.id };
-  }
-};
-
-// src/core/channel.ts
-function createChannel(url, config = {}) {
+// src/core/websocket.ts
+function createWebSocket(url, config = {}) {
   const {
     onMessage,
     onStatusChange,
@@ -9831,36 +9800,36 @@ function createChannel(url, config = {}) {
   };
   const connect = () => {
     if (ws?.readyState === WebSocket.OPEN || ws?.readyState === WebSocket.CONNECTING) {
-      console.log("[Channel] Already connected/connecting to:", url);
+      console.log("[WebSocket] Already connected/connecting to:", url);
       return;
     }
     intentionalClose = false;
     setStatus("connecting");
-    console.log("[Channel] Connecting to:", url);
+    console.log("[WebSocket] Connecting to:", url);
     try {
       ws = new WebSocket(url);
     } catch (e2) {
-      console.error("[Channel] Failed to create WebSocket:", e2);
+      console.error("[WebSocket] Failed to create WebSocket:", e2);
       setStatus("error", "Failed to create WebSocket");
       scheduleReconnect();
       return;
     }
     ws.onopen = () => {
-      console.log("[Channel] Connected to:", url);
+      console.log("[WebSocket] Connected to:", url);
       reconnectAttempts = 0;
       setStatus("connected");
     };
     ws.onmessage = (event) => {
       try {
         const message = JSON.parse(event.data);
-        console.log("[Channel] Received message:", message);
+        console.log("[WebSocket] Received message:", message);
         onMessage?.(message);
       } catch (e2) {
-        console.error("[Channel] Failed to parse message:", e2);
+        console.error("[WebSocket] Failed to parse message:", e2);
       }
     };
     ws.onerror = (e2) => {
-      console.error("[Channel] WebSocket error:", e2);
+      console.error("[WebSocket] Error:", e2);
       setStatus("error", "Connection error");
     };
     ws.onclose = (event) => {
@@ -9870,7 +9839,7 @@ function createChannel(url, config = {}) {
         return;
       }
       if (event.code === 4004) {
-        setStatus("error", "AppSession channel not found");
+        setStatus("error", "Instance WebSocket not found");
         return;
       }
       scheduleReconnect();
@@ -9918,19 +9887,18 @@ function createChannel(url, config = {}) {
 function createHost(config) {
   const environment = detectEnvironment();
   if (environment === "chatgpt") {
-    return new ChatGPTHostClient(config);
+    return new ChatGptAppHostClient(config);
   }
-  return new McpHostClient(config);
+  return new McpAppHostClient(config);
 }
 export {
-  AppSession,
-  ChatGPTHostClient,
-  McpHostClient,
+  ChatGptAppHostClient,
+  McpAppHostClient,
   YU as applyDocumentTheme,
   qU as applyHostFonts,
   QU as applyHostStyleVariables,
-  createChannel,
   createHost,
+  createWebSocket,
   detectEnvironment,
   VU as getDocumentTheme
 };