sunpeak 0.19.12 → 0.20.2

package/bin/lib/test/test-fixtures.mjs

@@ -1,20 +1,24 @@
 /**
- * MCP-first Playwright fixtures for testing MCP servers.
+ * Playwright fixtures for testing MCP servers.
  *
- * Provides an `mcp` fixture that abstracts the inspector, double-iframe
- * traversal, URL construction, and host selection. Tests read like MCP
- * operations, not browser automation.
+ * Two fixtures, cleanly separated:
+ * - `mcp` — MCP protocol primitives (callTool, listTools, listResources, readResource)
+ * - `inspector` — sunpeak inspector for rendering and visual testing (renderTool, host)
  *
  * Usage:
  *   import { test, expect } from 'sunpeak/test';
  *
- *   test('weather tool', async ({ mcp }) => {
- *     const result = await mcp.callTool('get-weather', { city: 'SF' });
- *     expect(result).not.toBeError();
- *     expect(result).toHaveTextContent('temperature');
+ *   test('protocol test', async ({ mcp }) => {
+ *     const tools = await mcp.listTools();
+ *     const result = await mcp.callTool('search', { query: 'headphones' });
+ *     expect(result.isError).toBeFalsy();
+ *   });
  *
- *     const app = result.app();
- *     await expect(app.getByText('San Francisco')).toBeVisible();
+ *   test('UI test', async ({ inspector }) => {
+ *     const result = await inspector.renderTool('search', { query: 'headphones' });
+ *     expect(result).not.toBeError();
+ *     await expect(result.app().getByText('headphones')).toBeVisible();
+ *     await result.screenshot('search-results');
  *   });
  */
 import { resolvePlaywrightESM } from '../live/utils.mjs';
@@ -26,10 +30,8 @@ const { test: base, expect } = await resolvePlaywrightESM(projectRoot);
 // Register MCP-native matchers
 registerMatchers(expect);
 
-/**
- * Build an inspector URL path with query parameters.
- * Inlined to avoid importing from dist (which pulls in React).
- */
+// ── Helpers ──
+
 function buildInspectorUrl(params) {
   const sp = new URLSearchParams();
   for (const [key, value] of Object.entries(params)) {
@@ -37,15 +39,11 @@ function buildInspectorUrl(params) {
       sp.set(key, String(value));
     }
   }
-  // Always disable dev overlay in tests
   sp.set('devOverlay', 'false');
   const qs = sp.toString();
   return qs ? `/?${qs}` : '/';
 }
 
-/**
- * Resolve the host ID from the Playwright project name.
- */
 function resolveHostId(projectName) {
   if (!projectName) return 'chatgpt';
   if (projectName.startsWith('chatgpt')) return 'chatgpt';
@@ -53,57 +51,186 @@ function resolveHostId(projectName) {
   return projectName;
 }
 
+async function fetchJson(page, path) {
+  const baseURL = page.context()._options?.baseURL || '';
+  const response = await page.request.get(`${baseURL}${path}`);
+  if (!response.ok()) {
+    throw new Error(`${path} returned ${response.status()}: ${await response.text()}`);
+  }
+  return response.json();
+}
+
 /**
- * Create a ToolResult wrapper around the inspector's rendered state.
+ * Read the tool result from the inspector's <script id="__tool-result"> element.
  */
-function createToolResult(page, resultData) {
+async function readToolResult(page, timeout) {
+  try {
+    const script = page.locator('#__tool-result');
+    await script.waitFor({ state: 'attached', timeout: Math.min(timeout, 5_000) });
+    const json = await script.evaluate(
+      (el, t) =>
+        new Promise((resolve) => {
+          const check = () => {
+            const text = el.textContent?.trim();
+            if (text && text !== 'null') return resolve(text);
+            let timer;
+            const observer = new MutationObserver(() => {
+              const updated = el.textContent?.trim();
+              if (updated && updated !== 'null') {
+                observer.disconnect();
+                clearTimeout(timer);
+                resolve(updated);
+              }
+            });
+            observer.observe(el, { childList: true, characterData: true, subtree: true });
+            timer = setTimeout(() => { observer.disconnect(); resolve(null); }, t);
+          };
+          check();
+        }),
+      Math.min(timeout, 10_000)
+    );
+    if (json) {
+      const parsed = JSON.parse(json);
+      return {
+        content: parsed?.content || [],
+        structuredContent: parsed?.structuredContent,
+        isError: parsed?.isError || false,
+        source: parsed?.source || 'server',
+      };
+    }
+  } catch {
+    // Fall back to empty
+  }
+  return { content: [], structuredContent: undefined, isError: false, source: 'server' };
+}
+
+/**
+ * Create an InspectorResult from the rendered state.
+ */
+function createInspectorResult(page, resultData) {
   return {
     content: resultData?.content || [],
     structuredContent: resultData?.structuredContent,
     isError: resultData?.isError || false,
+    source: resultData?.source || 'server',
 
-    /**
-     * Get a FrameLocator for the rendered resource UI.
-     * Handles the double-iframe traversal (outer sandbox proxy + inner app).
-     * Returns the locator regardless — Playwright will throw with a clear
-     * error if no iframe exists when you interact with it.
-     */
+    /** Get a FrameLocator for the rendered resource UI (handles double-iframe). */
     app() {
       return page.frameLocator('iframe').frameLocator('iframe');
     },
+
+    /**
+     * Take a screenshot and compare against a baseline.
+     * Only runs when visual testing is enabled (`sunpeak test --visual`).
+     * Silently skips otherwise.
+     *
+     * @param {string} [name] - Snapshot name (auto-generated if omitted)
+     * @param {Object} [options] - Playwright toHaveScreenshot options
+     */
+    async screenshot(name, options = {}) {
+      if (process.env.SUNPEAK_VISUAL !== 'true') return;
+
+      if (typeof name === 'object' && name !== null) {
+        options = name;
+        name = undefined;
+      }
+
+      const { target = 'app', element, ...playwrightOptions } = options;
+      let locator;
+      if (element) {
+        locator = element;
+      } else if (target === 'page') {
+        locator = page.locator('#root');
+      } else {
+        locator = page.frameLocator('iframe').frameLocator('iframe').locator('body');
+      }
+      const fullName = name && !name.endsWith('.png') ? `${name}.png` : name;
+      const args = fullName ? [fullName, playwrightOptions] : [playwrightOptions];
+      await expect(locator).toHaveScreenshot(...args);
+    },
   };
 }
 
+// ── Fixtures ──
+
 const test = base.extend({
-  mcp: async ({ page }, use, testInfo) => {
+  /**
+   * MCP protocol fixture. Maps 1:1 to MCP protocol operations.
+   * No rendering, no inspector UI, no sunpeak concepts.
+   */
+  mcp: async ({ page }, use) => {
+    const fixture = {
+      async listTools() {
+        const result = await fetchJson(page, '/__sunpeak/list-tools');
+        return result.tools || [];
+      },
+
+      async callTool(name, input) {
+        const baseURL = page.context()._options?.baseURL || '';
+        const response = await page.request.post(`${baseURL}/__sunpeak/call-tool`, {
+          data: { name, arguments: input || {} },
+        });
+        if (!response.ok()) {
+          throw new Error(`callTool(${name}) returned ${response.status()}: ${await response.text()}`);
+        }
+        return response.json();
+      },
+
+      async listResources() {
+        const result = await fetchJson(page, '/__sunpeak/list-resources');
+        return result.resources || [];
+      },
+
+      async readResource(uri) {
+        const baseURL = page.context()._options?.baseURL || '';
+        const response = await page.request.get(
+          `${baseURL}/__sunpeak/read-resource?uri=${encodeURIComponent(uri)}`
+        );
+        if (!response.ok()) {
+          throw new Error(`readResource(${uri}) returned ${response.status()}: ${await response.text()}`);
+        }
+        return response.text();
+      },
+    };
+
+    await use(fixture);
+  },
+
+  /**
+   * sunpeak inspector fixture. Renders tools in simulated host environments.
+   * Built on top of the inspector, not the MCP protocol.
+   */
+  inspector: async ({ page }, use, testInfo) => {
     const host = resolveHostId(testInfo.project.name);
 
     const fixture = {
-      page,
+      /** Current host ID ('chatgpt' or 'claude') from Playwright project. */
       host,
 
+      /** The underlying Playwright Page (for advanced assertions). */
+      page,
+
       /**
-       * Call a tool and get the rendered result.
+       * Render a tool in the inspector and return the result.
        *
-       * For sunpeak projects: navigates to the matching simulation (simulation
-       * fixture data including toolInput is served by sunpeak dev).
-       * For external servers: navigates to the matching simulation created by
-       * inspectServer from discovered tools.
+       * With `input`, the tool is called on the real server (bypasses fixtures).
+       * Without `input`, simulation fixture data is used when available.
        *
-       * Note: The `input` parameter is accepted for API consistency and future
-       * use but is not currently passed to the inspector. Simulation fixture
-       * data provides the tool input for rendering.
-       *
-       * @param {string} name - Tool/simulation name (e.g., 'show-albums')
-       * @param {Record<string, unknown>} [_input] - Reserved for future use
+       * @param {string} name - Tool name
+       * @param {Record<string, unknown>} [input] - Tool arguments (real server call)
        * @param {Object} [options] - Display options
-       * @returns {Promise<ToolResult>}
+       * @param {'light' | 'dark'} [options.theme]
+       * @param {'inline' | 'pip' | 'fullscreen'} [options.displayMode]
+       * @param {number} [options.timeout] - Timeout in ms (default: 15s or mcpTimeout from config)
+       * @returns {Promise<InspectorResult>}
        */
-      async callTool(name, _input, options = {}) {
-        const { theme, displayMode, ...rest } = options;
+      async renderTool(name, input, options = {}) {
+        const { theme, displayMode, timeout: callTimeout, ...rest } = options;
 
+        const hasInput = input != null && Object.keys(input).length > 0;
         const params = {
-          simulation: name,
+          ...(hasInput ? { tool: name, toolInput: JSON.stringify(input) } : { simulation: name }),
+          autoRun: 'true',
           host,
           ...(theme && { theme }),
           ...(displayMode && { displayMode }),
@@ -112,116 +239,16 @@ const test = base.extend({
 
         await page.goto(buildInspectorUrl(params));
 
-        // Wait for the resource iframe to have content
+        const resolvedTimeout = callTimeout ?? testInfo.project.use?.mcpTimeout ?? 15_000;
         try {
           const frame = page.frameLocator('iframe').frameLocator('iframe');
-          await frame.locator('body').waitFor({ state: 'attached', timeout: 15_000 });
+          await frame.locator('body').waitFor({ state: 'attached', timeout: resolvedTimeout });
         } catch {
           // Tool may not have a resource (no UI)
         }
 
-        return createToolResult(page, {
-          content: [],
-          structuredContent: undefined,
-          isError: false,
-        });
-      },
-
-      /**
-       * Navigate to a tool with no mock data ("Press Run" state).
-       * Use for testing the empty/loading state before a tool is executed.
-       */
-      async openTool(name, options = {}) {
-        const { theme, ...rest } = options;
-        const params = {
-          tool: name,
-          host,
-          ...(theme && { theme }),
-          ...rest,
-        };
-        await page.goto(buildInspectorUrl(params));
-        await page.locator('#root').waitFor({ state: 'attached' });
-      },
-
-      /**
-       * Click the Run button and wait for the resource to render.
-       * Use after openTool() in Prod Tools mode.
-       */
-      async runTool() {
-        await page.locator('button:has-text("Run")').click();
-        await page.locator('iframe').waitFor({ state: 'attached', timeout: 30_000 });
-        return createToolResult(page, {
-          content: [],
-          structuredContent: undefined,
-          isError: false,
-        });
-      },
-
-      /**
-       * Change the theme via the sidebar toggle.
-       */
-      async setTheme(theme) {
-        const label = theme === 'light' ? 'Light' : 'Dark';
-        const button = page.locator(`button:has-text("${label}")`);
-        if (await button.isVisible().catch(() => false)) {
-          await button.click();
-          // Wait for theme to propagate to the iframe
-          await page.waitForTimeout(300);
-        }
-      },
-
-      /**
-       * Change the display mode via the sidebar buttons.
-       */
-      async setDisplayMode(mode) {
-        const labels = { inline: 'Inline', pip: 'PiP', fullscreen: 'Full' };
-        const label = labels[mode] || mode;
-        await page.locator(`button:has-text("${label}")`).click();
-        // Wait for display mode transition
-        await page.waitForTimeout(500);
-      },
-
-      /**
-       * Take a screenshot and compare against a baseline.
-       * Only performs the comparison when visual testing is enabled
-       * (`sunpeak test --visual`). Silently skips otherwise, so tests
-       * that include screenshot() calls still pass during normal runs.
-       *
-       * Accepts all Playwright toHaveScreenshot() options (threshold,
-       * maxDiffPixelRatio, maxDiffPixels, mask, animations, caret,
-       * fullPage, clip, scale, stylePath, etc.) and passes them through.
-       *
-       * @param {string} [name] - Snapshot name (auto-generated from test title if omitted)
-       * @param {Object} [options] - Screenshot and comparison options
-       * @param {'app' | 'page'} [options.target='app'] - What to screenshot
-       * @param {import('@playwright/test').Locator} [options.element] - Specific locator to screenshot
-       */
-      async screenshot(name, options = {}) {
-        if (process.env.SUNPEAK_VISUAL !== 'true') return;
-
-        // Support screenshot(options) without a name
-        if (typeof name === 'object' && name !== null) {
-          options = name;
-          name = undefined;
-        }
-
-        const { target = 'app', element, ...playwrightOptions } = options;
-
-        let locator;
-        if (element) {
-          locator = element;
-        } else if (target === 'page') {
-          locator = page.locator('#root');
-        } else {
-          locator = page.frameLocator('iframe').frameLocator('iframe').locator('body');
-        }
-
-        const fullName = name && !name.endsWith('.png') ? `${name}.png` : name;
-        const args = fullName
-          ? [fullName, playwrightOptions]
-          : [playwrightOptions];
-
-        await expect(locator).toHaveScreenshot(...args);
+        const resultData = await readToolResult(page, resolvedTimeout);
+        return createInspectorResult(page, resultData);
       },
     };
 

package/dist/chatgpt/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-9hOWP6kD.cjs");
-const require_inspector = require("../inspector-jY9O18z9.cjs");
+const require_inspector = require("../inspector-DAA1Wiyh.cjs");
 const require_inspector_url = require("../inspector-url-C3LTKgXt.cjs");
 const require_discovery = require("../discovery-Clu4uHp1.cjs");
 //#region src/chatgpt/index.ts

package/dist/chatgpt/index.js

@@ -1,5 +1,5 @@
 import { r as __exportAll } from "../chunk-D6g4UhsZ.js";
-import { _ as McpAppHost, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, n as resolveServerToolResult, t as Inspector, v as SCREEN_WIDTHS } from "../inspector-D5DckQuU.js";
+import { _ as McpAppHost, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, n as resolveServerToolResult, t as Inspector, v as SCREEN_WIDTHS } from "../inspector-BBDa5yCm.js";
 import { t as createInspectorUrl } from "../inspector-url-CyQcuBI9.js";
 import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
 //#region src/chatgpt/index.ts

package/dist/claude/index.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-9hOWP6kD.cjs");
-const require_inspector = require("../inspector-jY9O18z9.cjs");
+const require_inspector = require("../inspector-DAA1Wiyh.cjs");
 exports.Inspector = require_inspector.Inspector;

package/dist/claude/index.js

@@ -1,2 +1,2 @@
-import { t as Inspector } from "../inspector-D5DckQuU.js";
+import { t as Inspector } from "../inspector-BBDa5yCm.js";
 export { Inspector };

package/dist/host/chatgpt/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../chunk-9hOWP6kD.cjs");
-const require_use_app = require("../../use-app-CbsBEmwv.cjs");
+const require_use_app = require("../../use-app-DPkj5Jp_.cjs");
 let react = require("react");
 //#region src/host/chatgpt/openai-types.ts
 /**

package/dist/host/chatgpt/index.js

@@ -1,4 +1,4 @@
-import { t as useApp } from "../../use-app-Bfargfa3.js";
+import { t as useApp } from "../../use-app-Cr0auUa1.js";
 import { useCallback } from "react";
 //#region src/host/chatgpt/openai-types.ts
 /**

package/dist/index.cjs

@@ -1,15 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
 const require_protocol = require("./protocol-C8pFDmcy.cjs");
-const require_use_app = require("./use-app-CbsBEmwv.cjs");
-const require_inspector = require("./inspector-jY9O18z9.cjs");
+const require_use_app = require("./use-app-DPkj5Jp_.cjs");
+const require_inspector = require("./inspector-DAA1Wiyh.cjs");
 const require_host_index = require("./host/index.cjs");
 const require_inspector_index = require("./inspector/index.cjs");
 const require_chatgpt_index = require("./chatgpt/index.cjs");
 let react = require("react");
-react = require_chunk.__toESM(react);
+react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.5.0_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__react-_f4871531d9cf52c692eb6edc1ee416ef/node_modules/@modelcontextprotocol/ext-apps/dist/src/react/index.js
+//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.5.0_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__react-_a8a8e071c354e7dd6f62871eadf46f99/node_modules/@modelcontextprotocol/ext-apps/dist/src/react/index.js
 var m = require_protocol.union([require_protocol.literal("light"), require_protocol.literal("dark")]).describe("Color theme preference for the host environment."), N$1 = require_protocol.union([
 	require_protocol.literal("inline"),
 	require_protocol.literal("fullscreen"),