sunpeak 0.18.14 → 0.19.2

package/template/package.json

@@ -7,30 +7,32 @@
     "dev": "sunpeak dev",
     "build": "sunpeak build",
     "start": "sunpeak start",
-    "test": "vitest run",
-    "test:e2e": "playwright test",
-    "test:live": "playwright test --config tests/live/playwright.config.ts"
+    "test": "sunpeak test",
+    "test:unit": "sunpeak test --unit",
+    "test:e2e": "sunpeak test --e2e",
+    "test:visual": "sunpeak test --visual",
+    "test:live": "sunpeak test --live"
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "mapbox-gl": "^3.20.0",
+    "mapbox-gl": "^3.21.0",
     "sunpeak": "workspace:*",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.59.1",
     "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "jsdom": "^29.0.1",
+    "happy-dom": "^18.0.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.2.2",

package/template/playwright.config.ts

@@ -1,41 +1,3 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig } from 'sunpeak/test/config';
 
-// Use fixed preferred ports. If in use, `reuseExistingServer` (local) reuses
-// the running server. In CI, validate.mjs assigns unique ports via env vars.
-const port = Number(process.env.SUNPEAK_TEST_PORT) || 6776;
-const sandboxPort = Number(process.env.SUNPEAK_SANDBOX_PORT) || 24680;
-
-export default defineConfig({
-  globalSetup: './tests/e2e/global-setup.ts',
-  testDir: './tests/e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 1,
-  // Limit parallel workers. Each test loads a full inspector page with
-  // iframe → cross-origin sandbox proxy → inner iframe. Too many concurrent
-  // pages overwhelm the sandbox proxy server and cause PostMessage relay
-  // timeouts. 2 workers balances speed vs reliability.
-  workers: process.env.CI ? 1 : 2,
-  reporter: 'list',
-  use: {
-    baseURL: `http://localhost:${port}`,
-    trace: 'on-first-retry',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-        launchOptions: {
-          args: ['--use-gl=angle'],
-        },
-      },
-    },
-  ],
-  webServer: {
-    command: `PORT=${port} SUNPEAK_SANDBOX_PORT=${sandboxPort} pnpm dev`,
-    url: `http://localhost:${port}/health`,
-    reuseExistingServer: !process.env.CI,
-    timeout: 60000,
-  },
-});
+export default defineConfig();

package/template/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

package/template/tests/e2e/albums.spec.ts

@@ -1,246 +1,115 @@
-import { test, expect } from '@playwright/test';
-import { createInspectorUrl } from './helpers';
-
-const hosts = ['chatgpt', 'claude'] as const;
-
-for (const host of hosts) {
-  test.describe(`Albums Resource [${host}]`, () => {
-    test.describe('Light Mode', () => {
-      test('should render album cards with correct styles', async ({ page }) => {
-        await page.goto(createInspectorUrl({ simulation: 'show-albums', theme: 'light', host }));
-
-        const iframe = page.frameLocator('iframe').frameLocator('iframe');
-        const albumCard = iframe.locator('button:has-text("Summer Slice")');
-        await expect(albumCard).toBeVisible();
-
-        // Verify album card unique styles
-        const styles = await albumCard.evaluate((el) => {
-          const computed = window.getComputedStyle(el);
-          return {
-            cursor: computed.cursor,
-            borderRadius: computed.borderRadius,
-          };
-        });
-
-        expect(styles.cursor).toBe('pointer');
-        expect(styles.borderRadius).toBe('12px'); // rounded-xl
-      });
-
-      test('should have album image with correct aspect ratio', async ({ page }) => {
-        await page.goto(createInspectorUrl({ simulation: 'show-albums', theme: 'light', host }));
-
-        const iframe = page.frameLocator('iframe').frameLocator('iframe');
-        const albumImage = iframe.locator('button:has-text("Summer Slice") img').first();
-        await expect(albumImage).toBeVisible();
-
-        // Verify aspect-[4/3] container
-        const imageContainer = iframe.locator(
-          'button:has-text("Summer Slice") .aspect-\\[4\\/3\\]'
-        );
-        await expect(imageContainer).toBeVisible();
-
-        const containerStyles = await imageContainer.evaluate((el) => {
-          const computed = window.getComputedStyle(el);
-          return {
-            borderRadius: computed.borderRadius,
-            overflow: computed.overflow,
-          };
-        });
-
-        expect(containerStyles.borderRadius).toBe('12px'); // rounded-xl
-        expect(containerStyles.overflow).toBe('hidden');
-      });
-    });
-
-    test.describe('Dark Mode', () => {
-      test('should render album cards with correct styles', async ({ page }) => {
-        await page.goto(createInspectorUrl({ simulation: 'show-albums', theme: 'dark', host }));
-
-        const iframe = page.frameLocator('iframe').frameLocator('iframe');
-        const albumCard = iframe.locator('button:has-text("Summer Slice")');
-        await expect(albumCard).toBeVisible();
-
-        const styles = await albumCard.evaluate((el) => {
-          const computed = window.getComputedStyle(el);
-          return {
-            cursor: computed.cursor,
-            borderRadius: computed.borderRadius,
-          };
-        });
-
-        expect(styles.cursor).toBe('pointer');
-        expect(styles.borderRadius).toBe('12px'); // rounded-xl
-      });
-
-      test('should have text with appropriate contrast', async ({ page }) => {
-        await page.goto(createInspectorUrl({ simulation: 'show-albums', theme: 'dark', host }));
-
-        const iframe = page.frameLocator('iframe').frameLocator('iframe');
-        const albumTitle = iframe.locator('button:has-text("Summer Slice") div').first();
-        await expect(albumTitle).toBeVisible();
-
-        // In dark mode, text should be light colored for contrast
-        const titleStyles = await albumTitle.evaluate((el) => {
-          const computed = window.getComputedStyle(el);
-          return {
-            color: computed.color,
-          };
-        });
-
-        // Verify the text color exists (should be a light color in dark mode)
-        expect(titleStyles.color).toBeTruthy();
-      });
-    });
-
-    test.describe('Prod Tools Mode', () => {
-      test('should show empty state with Run button', async ({ page }) => {
-        await page.goto(createInspectorUrl({ tool: 'show-albums', theme: 'dark', host }));
-
-        // Should show the "Press Run to call the tool" empty state
-        const emptyState = page.locator('text=Press Run to call the tool');
-        await expect(emptyState).toBeVisible();
-
-        // Run button should be visible in the conversation header
-        const runButton = page.locator('button:has-text("Run")');
-        await expect(runButton).toBeVisible();
-
-        // Iframe should NOT be present (no resource loaded yet)
-        const iframe = page.locator('iframe');
-        await expect(iframe).not.toBeAttached();
-      });
-
-      test('should have themed empty state colors in light mode', async ({ page }) => {
-        await page.goto(createInspectorUrl({ tool: 'show-albums', theme: 'light', host }));
-
-        const emptyState = page.locator('text=Press Run to call the tool');
-        await expect(emptyState).toBeVisible();
-
-        const color = await emptyState.evaluate((el) => {
-          return window.getComputedStyle(el).color;
-        });
-
-        // Light mode text-secondary should be a dark-ish color (not white/very light)
-        const [r, g, b] = color.match(/\d+/g)!.map(Number);
-        // In light mode, secondary text should have a reasonable luminance (not too bright)
-        expect(r + g + b).toBeLessThan(600);
-      });
-
-      test('should have themed empty state colors in dark mode', async ({ page }) => {
-        await page.goto(createInspectorUrl({ tool: 'show-albums', theme: 'dark', host }));
-
-        const emptyState = page.locator('text=Press Run to call the tool');
-        await expect(emptyState).toBeVisible();
-
-        const color = await emptyState.evaluate((el) => {
-          return window.getComputedStyle(el).color;
-        });
-
-        // Dark mode text-secondary should be a light-ish color (not black/very dark)
-        const [r, g, b] = color.match(/\d+/g)!.map(Number);
-        expect(r + g + b).toBeGreaterThan(200);
-      });
-    });
-
-    test.describe('Prod Resources Mode', () => {
-      test('should render resource normally when dist is available', async ({ page }) => {
-        // With prodResources=true but no dist/ files, shows "Building..."
-        // With dist/ files available, renders the resource from dist/
-        // This test verifies the mode activates without errors
-        await page.goto(
-          createInspectorUrl({
-            simulation: 'show-albums',
-            theme: 'dark',
-            host,
-            prodResources: true,
-          })
-        );
-
-        // Should either show "Building..." or the resource (depending on dist availability)
-        const root = page.locator('#root');
-        await expect(root).not.toBeEmpty();
-      });
-    });
-
-    test.describe('Fullscreen Mode', () => {
-      test('should render correctly in fullscreen displayMode', async ({ page }) => {
-        await page.goto(
-          createInspectorUrl({
-            simulation: 'show-albums',
-            theme: 'light',
-            displayMode: 'fullscreen',
-            host,
-          })
-        );
-
-        // Wait for content to load
-        await page.waitForLoadState('networkidle');
-
-        // The root container should be present
-        const root = page.locator('#root');
-        await expect(root).not.toBeEmpty();
-      });
-
-      test('should maintain album card styles in fullscreen', async ({ page }) => {
-        await page.goto(
-          createInspectorUrl({
-            simulation: 'show-albums',
-            theme: 'dark',
-            displayMode: 'fullscreen',
-            host,
-          })
-        );
-
-        const iframe = page.frameLocator('iframe').frameLocator('iframe');
-        const albumCard = iframe.locator('button:has-text("Summer Slice")');
-        await expect(albumCard).toBeVisible();
-
-        const styles = await albumCard.evaluate((el) => {
-          const computed = window.getComputedStyle(el);
-          return {
-            cursor: computed.cursor,
-            borderRadius: computed.borderRadius,
-          };
-        });
-
-        expect(styles.cursor).toBe('pointer');
-        expect(styles.borderRadius).toBe('12px');
-      });
-
-      test('should render content after switching from inline to fullscreen', async ({ page }) => {
-        // Start in inline mode
-        await page.goto(createInspectorUrl({ simulation: 'show-albums', theme: 'dark', host }));
-
-        const iframe = page.frameLocator('iframe').frameLocator('iframe');
-        await expect(iframe.locator('button:has-text("Summer Slice")')).toBeVisible();
-
-        // Switch to fullscreen via sidebar
-        await page.locator('button:has-text("Full")').click();
-
-        // Content should still be visible after the mode transition
-        await expect(iframe.locator('button:has-text("Summer Slice")')).toBeVisible({
-          timeout: 5000,
-        });
-      });
-
-      // Claude doesn't support PiP — only run this test for hosts that have the button.
-      (host === 'claude' ? test.skip : test)(
-        'should render content after switching from inline to pip',
-        async ({ page }) => {
-          // Start in inline mode
-          await page.goto(createInspectorUrl({ simulation: 'show-albums', theme: 'dark', host }));
-
-          const iframe = page.frameLocator('iframe').frameLocator('iframe');
-          await expect(iframe.locator('button:has-text("Summer Slice")')).toBeVisible();
-
-          // Switch to PiP via sidebar
-          await page.locator('button:has-text("PiP")').click();
-
-          // Content should still be visible after the mode transition
-          await expect(iframe.locator('button:has-text("Summer Slice")')).toBeVisible({
-            timeout: 5000,
-          });
-        }
-      );
-    });
+import { test, expect } from 'sunpeak/test';
+
+test('should render album cards with correct styles', async ({ mcp }) => {
+  const result = await mcp.callTool('show-albums');
+  const app = result.app();
+
+  const albumCard = app.locator('button:has-text("Summer Slice")');
+  await expect(albumCard).toBeVisible();
+
+  const styles = await albumCard.evaluate((el) => {
+    const computed = window.getComputedStyle(el);
+    return { cursor: computed.cursor, borderRadius: computed.borderRadius };
+  });
+  expect(styles.cursor).toBe('pointer');
+  expect(styles.borderRadius).toBe('12px');
+});
+
+test('should have album image with correct aspect ratio', async ({ mcp }) => {
+  const result = await mcp.callTool('show-albums');
+  const app = result.app();
+
+  const imageContainer = app.locator('button:has-text("Summer Slice") .aspect-\\[4\\/3\\]');
+  await expect(imageContainer).toBeVisible();
+
+  const styles = await imageContainer.evaluate((el) => {
+    const computed = window.getComputedStyle(el);
+    return { borderRadius: computed.borderRadius, overflow: computed.overflow };
   });
-}
+  expect(styles.borderRadius).toBe('12px');
+  expect(styles.overflow).toBe('hidden');
+});
+
+test('should render album cards in dark mode', async ({ mcp }) => {
+  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+  const app = result.app();
+
+  const albumTitle = app.locator('button:has-text("Summer Slice") div').first();
+  await expect(albumTitle).toBeVisible();
+
+  const titleStyles = await albumTitle.evaluate((el) => ({
+    color: window.getComputedStyle(el).color,
+  }));
+  expect(titleStyles.color).toBeTruthy();
+});
+
+test('should show empty state with Run button in prod tools mode', async ({ mcp }) => {
+  await mcp.openTool('show-albums', { theme: 'dark' });
+
+  await expect(mcp.page.locator('text=Press Run to call the tool')).toBeVisible();
+  await expect(mcp.page.locator('button:has-text("Run")')).toBeVisible();
+  await expect(mcp.page.locator('iframe')).not.toBeAttached();
+});
+
+test('should have themed empty state colors in light mode', async ({ mcp }) => {
+  await mcp.openTool('show-albums', { theme: 'light' });
+
+  const emptyState = mcp.page.locator('text=Press Run to call the tool');
+  await expect(emptyState).toBeVisible();
+
+  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
+  const [r, g, b] = color.match(/\d+/g)!.map(Number);
+  expect(r + g + b).toBeLessThan(600);
+});
+
+test('should have themed empty state colors in dark mode', async ({ mcp }) => {
+  await mcp.openTool('show-albums', { theme: 'dark' });
+
+  const emptyState = mcp.page.locator('text=Press Run to call the tool');
+  await expect(emptyState).toBeVisible();
+
+  const color = await emptyState.evaluate((el) => window.getComputedStyle(el).color);
+  const [r, g, b] = color.match(/\d+/g)!.map(Number);
+  expect(r + g + b).toBeGreaterThan(200);
+});
+
+test('should activate prod resources mode without errors', async ({ mcp }) => {
+  await mcp.callTool('show-albums', {}, { theme: 'dark', prodResources: true });
+  const root = mcp.page.locator('#root');
+  await expect(root).not.toBeEmpty();
+});
+
+test('should render correctly in fullscreen', async ({ mcp }) => {
+  const result = await mcp.callTool('show-albums', {}, { displayMode: 'fullscreen' });
+  const app = result.app();
+
+  const albumCard = app.locator('button:has-text("Summer Slice")');
+  await expect(albumCard).toBeVisible();
+
+  const styles = await albumCard.evaluate((el) => ({
+    cursor: window.getComputedStyle(el).cursor,
+    borderRadius: window.getComputedStyle(el).borderRadius,
+  }));
+  expect(styles.cursor).toBe('pointer');
+  expect(styles.borderRadius).toBe('12px');
+});
+
+test('should preserve content when switching to fullscreen', async ({ mcp }) => {
+  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+  const app = result.app();
+  await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
+
+  await mcp.setDisplayMode('fullscreen');
+  await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible({ timeout: 5000 });
+});
+
+test('should preserve content when switching to PiP', async ({ mcp }) => {
+  test.skip(mcp.host === 'claude', 'Claude does not support PiP');
+
+  const result = await mcp.callTool('show-albums', {}, { theme: 'dark' });
+  const app = result.app();
+  await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible();
+
+  await mcp.setDisplayMode('pip');
+  await expect(app.locator('button:has-text("Summer Slice")')).toBeVisible({ timeout: 5000 });
+});