sunpeak 0.16.21 → 0.16.27

package/bin/lib/live/chatgpt-page.mjs

@@ -0,0 +1,210 @@
+/**
+ * ChatGPT host page object for live testing.
+ *
+ * All ChatGPT-specific DOM selectors and interaction logic lives here.
+ * When ChatGPT updates their UI, only this file needs updating.
+ *
+ * Extends HostPage which provides shared behavior (sendMessage, login, etc.).
+ */
+import { HostPage } from './host-page.mjs';
+
+/**
+ * All ChatGPT DOM selectors in one place for easy maintenance.
+ *
+ * Last verified: 2026-03-17 via live Playwright inspection.
+ */
+const SELECTORS = {
+  // Chat interface
+  chatInput: '#prompt-textarea',
+  sendButton: '[data-testid="send-button"]',
+  newChatLink: 'a:has-text("New chat")',
+
+  // Login detection — ChatGPT renders two profile buttons (sidebar compact + expanded); always use .first().
+  loggedInIndicator: '[data-testid="accounts-profile-button"]',
+  loginPage: 'button:has-text("Log in")',
+
+  // Settings navigation
+  appsTab: '[role="tab"]:has-text("Apps")',
+  refreshButton: 'button:has-text("Refresh")',
+  reconnectButton: 'button:has-text("Reconnect")',
+
+  // App iframe — ChatGPT uses a nested iframe structure:
+  //   outer: iframe[sandbox] (connector sandbox, no direct content)
+  //   inner: iframe name="root" (actual app React content)
+  mcpAppOuterIframe: 'iframe[sandbox*="allow-scripts"]',
+  mcpAppInnerFrameName: 'root',
+
+  // Streaming indicator
+  stopButton: 'button[aria-label="Stop streaming"], button:has-text("Stop")',
+};
+
+const URLS = {
+  base: 'https://chatgpt.com',
+  settings: 'https://chatgpt.com/#settings/Connectors',
+};
+
+export { SELECTORS as CHATGPT_SELECTORS, URLS as CHATGPT_URLS };
+
+export class ChatGPTPage extends HostPage {
+  get hostId() { return 'chatgpt'; }
+  get hostName() { return 'ChatGPT'; }
+  get selectors() { return SELECTORS; }
+  get urls() { return URLS; }
+
+  /**
+   * Refresh the MCP server connection in ChatGPT settings.
+   * Navigates to Settings > Apps, clicks the app entry, clicks Refresh,
+   * and waits for the success/error toast.
+   */
+  async refreshMcpServer({ tunnelUrl, appName } = {}) {
+    await this.page.goto(URLS.settings, { waitUntil: 'domcontentloaded' });
+    await this.page.waitForTimeout(3_000);
+
+    const found = await this._findAndClickRefresh(appName);
+
+    if (!found) {
+      const appsTab = this.page.locator(SELECTORS.appsTab);
+      const hasAppsTab = await appsTab.isVisible().catch(() => false);
+      if (hasAppsTab) {
+        await appsTab.click();
+        await this.page.waitForTimeout(2_000);
+        const retryFound = await this._findAndClickRefresh(appName);
+        if (!retryFound) {
+          await this._screenshotAndThrow('refresh-mcp-settings', tunnelUrl);
+        }
+      } else {
+        await this._screenshotAndThrow('no-apps-tab', tunnelUrl);
+      }
+    }
+
+    // Wait for the refresh toast
+    const { hasError, errorText } = await this._waitForToast();
+    if (hasError) {
+      throw new Error(
+        `MCP server refresh failed in ChatGPT:\n${errorText.trim()}\n\n` +
+        `Make sure your MCP dev server is running (pnpm dev) and your tunnel is active.`
+      );
+    }
+
+    // Wait for resource preloading to complete
+    await this.page.waitForTimeout(3_000);
+
+    // Navigate back to chat
+    await this.page.goto(URLS.base, { waitUntil: 'domcontentloaded' });
+    await this.page.locator(SELECTORS.chatInput).waitFor({ timeout: 10_000 });
+  }
+
+  /**
+   * Wait for a MCP app iframe to appear in the conversation.
+   * ChatGPT renders apps in a nested iframe (outer sandbox > inner #root).
+   */
+  async waitForAppIframe({ timeout = 90_000 } = {}) {
+    // Wait for streaming to finish
+    try {
+      await this.page.locator(SELECTORS.stopButton).waitFor({ state: 'hidden', timeout });
+    } catch {
+      // Stop button may never appear if response was instant
+    }
+
+    // Wait for the outer sandbox iframe
+    await this.page.locator(SELECTORS.mcpAppOuterIframe).first().waitFor({ state: 'attached', timeout: 30_000 });
+
+    // Wait for the inner frame to appear inside the sandboxed outer iframe.
+    // waitForFunction can't cross the sandbox boundary, so use Playwright's frameLocator instead.
+    const outerFrame = this.page.frameLocator(SELECTORS.mcpAppOuterIframe).first();
+    await outerFrame
+      .locator(`iframe[name="${SELECTORS.mcpAppInnerFrameName}"], iframe#${SELECTORS.mcpAppInnerFrameName}`)
+      .waitFor({ state: 'attached', timeout: 15_000 });
+
+    const appFrame = this.getAppIframe();
+
+    // Wait for content to render
+    try {
+      await appFrame.locator('body *').first().waitFor({ state: 'visible', timeout: 15_000 });
+    } catch {
+      // Caller's assertions will catch missing content
+    }
+
+    return appFrame;
+  }
+
+  getAppIframe() {
+    const name = SELECTORS.mcpAppInnerFrameName;
+    const outerFrame = this.page.frameLocator(SELECTORS.mcpAppOuterIframe).first();
+    return outerFrame.frameLocator(`iframe[name="${name}"], iframe#${name}`);
+  }
+
+  /**
+   * Send a message, pausing around the space after the /{appName} prefix.
+   * ChatGPT needs a moment to associate the app before the rest of the prompt is typed.
+   */
+  async sendMessage(text) {
+    const input = this.page.locator(SELECTORS.chatInput);
+    await input.waitFor({ timeout: 10_000 });
+    await input.click();
+
+    if (text.startsWith('/')) {
+      const spaceIdx = text.indexOf(' ');
+      if (spaceIdx !== -1) {
+        await input.pressSequentially(text.slice(0, spaceIdx), { delay: 10 });
+        await this.page.waitForTimeout(500);
+        await input.pressSequentially(' ', { delay: 10 });
+        await this.page.waitForTimeout(500);
+        await input.pressSequentially(text.slice(spaceIdx + 1), { delay: 10 });
+      } else {
+        await input.pressSequentially(text, { delay: 10 });
+      }
+    } else {
+      await input.pressSequentially(text, { delay: 10 });
+    }
+
+    const sendBtn = this.page.locator(SELECTORS.sendButton);
+    await sendBtn.waitFor({ state: 'visible', timeout: 10_000 });
+    await sendBtn.click();
+  }
+
+  // --- ChatGPT-specific private methods ---
+
+  /** @private */
+  async _findAndClickRefresh(appName) {
+    const refreshBtn = this.page.locator(SELECTORS.refreshButton).first();
+    const reconnectBtn = this.page.locator(SELECTORS.reconnectButton).first();
+
+    const tryClickRefresh = async () => {
+      if (await refreshBtn.isVisible().catch(() => false)) {
+        await refreshBtn.click();
+        return true;
+      }
+      if (await reconnectBtn.isVisible().catch(() => false)) {
+        await reconnectBtn.click();
+        return true;
+      }
+      return false;
+    };
+
+    if (await tryClickRefresh()) return true;
+
+    if (appName) {
+      const strategies = [
+        () => this.page.getByText(appName, { exact: true }).first(),
+        () => this.page.locator(`text=${appName}`).first(),
+        () => this.page.locator(`a:has-text("${appName}"), [role="button"]:has-text("${appName}")`).first(),
+      ];
+
+      for (const getLocator of strategies) {
+        try {
+          const el = getLocator();
+          if (await el.isVisible().catch(() => false)) {
+            await el.click();
+            await this.page.waitForTimeout(2_000);
+            if (await tryClickRefresh()) return true;
+          }
+        } catch {
+          // Strategy didn't work, try next
+        }
+      }
+    }
+
+    return false;
+  }
+}

package/bin/lib/live/global-setup.mjs

@@ -0,0 +1,158 @@
+/**
+ * Global setup for live tests.
+ *
+ * Runs exactly once before all workers. Two responsibilities:
+ *  1. Authenticate — launch a browser, verify login, wait for user if needed.
+ *  2. Refresh MCP server — navigate to host settings and click Refresh so
+ *     all workers start with pre-loaded resources.
+ *
+ * Auth approach:
+ *  - Opens a browser with storageState if a fresh auth file exists (<24h).
+ *  - Checks that we're truly logged in (profile button visible AND no "Log in" buttons).
+ *  - If not logged in, prints a clear message and waits for the user to log in
+ *    in the open browser window (up to 5 minutes).
+ *  - Saves storageState after successful login for future runs.
+ *  - The same browser session is reused for MCP refresh so Cloudflare's
+ *    HttpOnly cookies (which storageState can't capture) remain valid.
+ *
+ * This file is referenced by the Playwright config created by defineLiveConfig().
+ * The auth file path is passed via SUNPEAK_AUTH_FILE env var.
+ */
+import { existsSync, mkdirSync, statSync, unlinkSync } from 'fs';
+import { dirname } from 'path';
+import { ANTI_BOT_ARGS, CHROME_USER_AGENT, resolvePlaywright, getAppName } from './utils.mjs';
+import { ChatGPTPage, CHATGPT_SELECTORS, CHATGPT_URLS } from './chatgpt-page.mjs';
+
+/** Auth state expires after 24 hours — ChatGPT session cookies are short-lived. */
+const MAX_AGE_MS = 24 * 60 * 60 * 1000;
+
+const CHATGPT_URL = CHATGPT_URLS.base;
+
+function isAuthFresh(authFile) {
+  if (!existsSync(authFile)) return false;
+  const age = Date.now() - statSync(authFile).mtimeMs;
+  return age < MAX_AGE_MS;
+}
+
+/**
+ * Check if we're truly logged into ChatGPT.
+ * Must have the profile button AND must NOT have any "Log in" buttons.
+ * The logged-out ChatGPT page can show some UI elements that look like
+ * a logged-in state, so checking just the profile button isn't enough.
+ */
+async function isFullyLoggedIn(page) {
+  const hasProfile = await page
+    .locator(CHATGPT_SELECTORS.loggedInIndicator)
+    .first()
+    .isVisible()
+    .catch(() => false);
+
+  if (!hasProfile) return false;
+
+  // Must NOT have "Log in" buttons — these appear on the logged-out page
+  const hasLoginButton = await page
+    .locator(CHATGPT_SELECTORS.loginPage)
+    .first()
+    .isVisible()
+    .catch(() => false);
+
+  return !hasLoginButton;
+}
+
+export default async function globalSetup() {
+  const authFile = process.env.SUNPEAK_AUTH_FILE;
+
+  if (process.env.SUNPEAK_STORAGE_STATE) {
+    return;
+  }
+
+  if (!authFile) {
+    console.warn('SUNPEAK_AUTH_FILE not set — skipping auth setup.');
+    return;
+  }
+
+  const projectRoot = process.env.SUNPEAK_PROJECT_ROOT || process.cwd();
+  const appName = getAppName(projectRoot);
+  const { chromium } = resolvePlaywright(projectRoot);
+
+  // Launch a browser. Use saved storageState if fresh, otherwise start clean.
+  const hasFreshAuth = isAuthFresh(authFile);
+  const browser = await chromium.launch({
+    headless: false,
+    args: ANTI_BOT_ARGS,
+  });
+  const context = await browser.newContext({
+    userAgent: CHROME_USER_AGENT,
+    ...(hasFreshAuth ? { storageState: authFile } : {}),
+  });
+  const page = await context.newPage();
+
+  try {
+    await page.goto(CHATGPT_URL, { waitUntil: 'domcontentloaded' });
+
+    // Wait for page to settle — Cloudflare challenge or ChatGPT UI loading
+    await page.waitForTimeout(5_000);
+
+    // Check if truly logged in (profile button visible, no "Log in" buttons)
+    let loggedIn = await isFullyLoggedIn(page);
+
+    if (loggedIn) {
+      console.log('Authenticated (from saved session).');
+    } else {
+      // If we loaded a stale auth file that didn't work, delete it
+      if (hasFreshAuth) {
+        try { unlinkSync(authFile); } catch {}
+      }
+
+      console.log(
+        `\n` +
+        `╔══════════════════════════════════════════════════════════════╗\n` +
+        `║  Please log in to ChatGPT                                  ║\n` +
+        `║                                                            ║\n` +
+        `║  A browser window has opened at chatgpt.com.               ║\n` +
+        `║  Log in and wait for the chat to load.                     ║\n` +
+        `║                                                            ║\n` +
+        `║  Waiting up to 5 minutes...                                ║\n` +
+        `╚══════════════════════════════════════════════════════════════╝\n`
+      );
+
+      // Poll until truly logged in
+      const maxWait = 300_000; // 5 minutes
+      const pollInterval = 3_000;
+      const start = Date.now();
+
+      while (Date.now() - start < maxWait) {
+        loggedIn = await isFullyLoggedIn(page);
+        if (loggedIn) break;
+        await page.waitForTimeout(pollInterval);
+      }
+
+      if (!loggedIn) {
+        throw new Error(
+          'Login timed out after 5 minutes.\n' +
+          'Please log in to chatgpt.com in the browser window that opened.\n' +
+          'If the session expired, delete the .auth/ directory and try again.'
+        );
+      }
+      console.log('Logged in!');
+    }
+
+    // Save session for future runs (best effort — HttpOnly cookies won't be captured).
+    mkdirSync(dirname(authFile), { recursive: true });
+    await context.storageState({ path: authFile });
+    console.log('Session saved.\n');
+
+    // Refresh MCP server in the SAME browser session.
+    // This is critical — Cloudflare's cf_clearance cookie is HttpOnly and
+    // won't be in the saved storageState. By refreshing here, the cookie
+    // is still valid for navigating to settings.
+    //
+    // This MUST succeed — if the MCP server isn't reachable or the refresh
+    // fails, tests will fail with confusing iframe/timeout errors.
+    const hostPage = new ChatGPTPage(page);
+    await hostPage.refreshMcpServer({ appName });
+    console.log('MCP server refreshed.');
+  } finally {
+    await browser.close();
+  }
+}

package/bin/lib/live/host-fixtures.mjs

@@ -0,0 +1,61 @@
+/**
+ * Factory for creating host-specific Playwright fixtures.
+ *
+ * Each host (ChatGPT, Claude) creates its own fixtures by calling
+ * createHostFixtures() with its HostPage subclass and message formatting.
+ *
+ * This keeps the fixture logic DRY — login, refresh, invoke, and
+ * app name handling are shared across all hosts.
+ */
+import { resolvePlaywrightESM, getAppName } from './utils.mjs';
+
+// Resolve @playwright/test from the user's project (pnpm strict resolution).
+const projectRoot = process.env.SUNPEAK_PROJECT_ROOT || process.cwd();
+const { test: base, expect } = await resolvePlaywrightESM(projectRoot);
+
+/** App name from the project's package.json — read once at module load. */
+const appName = getAppName(projectRoot);
+
+/**
+ * Create Playwright test fixtures for a specific host.
+ *
+ * @param {Object} options
+ * @param {string} options.fixtureName - Fixture name in test signatures (e.g., 'chatgpt', 'claude')
+ * @param {typeof import('./host-page.mjs').HostPage} options.HostPageClass - Host page class
+ * @param {(appName: string, text: string) => string} [options.formatMessage] - Format user messages (e.g., add /{appName} prefix)
+ */
+export function createHostFixtures({ fixtureName, HostPageClass, formatMessage }) {
+  const test = base.extend({
+    [fixtureName]: async ({ page }, use) => {
+      const hostPage = new HostPageClass(page);
+      await hostPage.verifyLoggedIn();
+
+      // MCP server refresh is handled once in globalSetup — no per-worker refresh needed.
+
+      // Enhanced interface with app name handling and invoke() shortcut
+      const fixture = Object.create(hostPage);
+
+      if (formatMessage) {
+        fixture.sendMessage = async (text) => {
+          return hostPage.sendMessage(formatMessage(appName, text));
+        };
+      }
+      fixture.sendRawMessage = hostPage.sendMessage.bind(hostPage);
+
+      /**
+       * One-liner: start a new chat, send a prompt, and wait for the app iframe.
+       * Returns the FrameLocator for the rendered app — ready for assertions.
+       */
+      fixture.invoke = async (prompt, options) => {
+        await hostPage.startNewChat();
+        const message = formatMessage ? formatMessage(appName, prompt) : prompt;
+        await hostPage.sendMessage(message);
+        return hostPage.waitForAppIframe(options);
+      };
+
+      await use(fixture);
+    },
+  });
+
+  return { test, expect };
+}