feat: Initialize the new Electron desktop application with core components, E2E tests, and build configurations.

Author: rimsila

AGENTS.md

@@ -27,24 +27,29 @@ This is a monorepo for React Native projects using UniWind (Tailwind v4 CSS-firs
 
 ## Testing
 
-> **⚠️ MANDATORY**: The desktop app (`apps/desktop`) is an **Electron.js** application. All E2E and UI testing MUST go through MCP Playwright — **never open a browser**.
-
-### ✅ DO
-
-- Use **MCP Playwright** tools for all UI testing and interaction:
-  - `mcp_playwright_browser_navigate` — navigate to pages
-  - `mcp_playwright_browser_snapshot` — inspect DOM and find element refs (preferred over screenshots)
-  - `mcp_playwright_browser_click`, `mcp_playwright_browser_type`, `mcp_playwright_browser_fill_form` — interact with elements
-  - `mcp_playwright_browser_console_messages`, `mcp_playwright_browser_network_requests` — debug issues
-- Navigate to `http://localhost:5173/` (Electron renderer process) for UI testing
-- Run `pnpm run dev` from the monorepo root before testing
-- **Save all screenshots to `.playwright-tmp/`** — this directory is gitignored. Use the `filename` parameter with a path prefix:
-  - Example: `filename: '.playwright-tmp/my_screenshot.png'`
-  - Or use `mcp_playwright_browser_run_code` with `path: '.playwright-tmp/screenshot.png'`
-
-### ❌ DON'T
-
-- **Never use `browser_subagent`** — it opens a separate browser and cannot attach to the Electron app
-- **Never open a standalone browser window** for testing — always test through MCP Playwright against localhost:5173
-- **Never use screenshots as the primary inspection method** — use `mcp_playwright_browser_snapshot` instead for DOM/accessibility tree
-- **Never save screenshots to the project root** — always use `.playwright-tmp/` directory to avoid polluting the repo with test artifacts
+> **⚠️ MANDATORY**: The desktop app (`apps/desktop`) is an **Electron.js** application. E2E tests use **Playwright's Electron support** (`_electron.launch()`) — **never open a standalone browser**.
+
+### E2E Tests (Playwright + Electron)
+
+Tests live in `apps/desktop/e2e/` and use custom fixtures from `e2e/fixtures.ts` that launch the real Electron app.
+
+```bash
+# Run all E2E tests (builds first, then launches Electron)
+pnpm --filter @next-dev/desktop test:e2e
+
+# Interactive Playwright UI mode
+pnpm --filter @next-dev/desktop test:e2e:ui
+```
+
+- **Config**: `apps/desktop/playwright.config.ts`
+- **Fixtures**: `apps/desktop/e2e/fixtures.ts` — provides `electronApp` and `window`
+- Tests get a real `Page` from the Electron `BrowserWindow` — no `baseURL` or browser projects needed
+- Build the app first (`electron-vite build`) before running tests
+
+### Agent Ad-Hoc Testing (MCP Playwright)
+
+For interactive AI-agent testing during development, use **MCP Playwright** tools against the dev server:
+
+#### ✅ DO
+
+- Use **MCP Playwright** for electronjs not browser

apps/desktop/.gitignore

@@ -0,0 +1,7 @@
+# Electron build output
+out/
+
+# Playwright
+test-results/
+playwright-report/
+.playwright-tmp/

apps/desktop/e2e/app.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from './fixtures';
+
+test.describe('DesignForge Desktop', () => {
+  test('app window opens with correct title', async ({ window }) => {
+    const title = await window.title();
+    expect(title).toContain('DesignForge');
+  });
+
+  test('renderer loads without errors', async ({ window }) => {
+    // Collect any uncaught errors during load
+    const errors: string[] = [];
+    window.on('pageerror', (err) => errors.push(err.message));
+
+    // Give the renderer a moment to settle
+    await window.waitForTimeout(2000);
+
+    expect(errors).toHaveLength(0);
+  });
+
+  test('main process exposes app version via IPC', async ({ electronApp }) => {
+    const version = await electronApp.evaluate(async ({ app }) => {
+      return app.getVersion();
+    });
+    expect(version).toBeTruthy();
+  });
+});

apps/desktop/e2e/code-preview.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from './fixtures';
+
+test('Code tab shows Monaco editor with generated code', async ({ window }) => {
+  // Wait for the app to fully render
+  await window.waitForSelector('.panel-tabs', { timeout: 15000 });
+
+  // Click the Code tab
+  const codeTab = window.locator('button.panel-tab').filter({ hasText: 'Code' });
+  await expect(codeTab).toBeVisible();
+  await codeTab.click();
+
+  // Verify the IDE preview panel appears
+  const idePreview = window.locator('.ide-preview');
+  await expect(idePreview).toBeVisible();
+
+  // Verify tab bar with App.tsx default active
+  const activeTab = window.locator('.ide-tab[data-active="true"]');
+  await expect(activeTab).toBeVisible();
+  await expect(activeTab).toContainText('App.tsx');
+
+  // Verify action buttons exist (copy, word wrap)
+  const actionBar = window.locator('.ide-action-bar');
+  await expect(actionBar).toBeVisible();
+
+  // Wait for Monaco editor to load (can be slow in Electron builds)
+  const editor = window.locator('.ide-editor .monaco-editor');
+  await expect(editor).toBeVisible({ timeout: 30000 });
+
+  // Verify status bar is visible with language info
+  const statusBar = window.locator('.ide-status-bar');
+  await expect(statusBar).toBeVisible();
+  await expect(statusBar).toContainText('TypeScript');
+  await expect(statusBar).toContainText('line');
+
+  // Take a screenshot of the code preview
+  await window.screenshot({ path: 'test-results/code-preview.png', fullPage: false });
+});
+
+test('Code tab file selector via tab bar works', async ({ window }) => {
+  await window.waitForSelector('.panel-tabs', { timeout: 15000 });
+
+  // Switch to Code tab
+  await window.locator('button.panel-tab').filter({ hasText: 'Code' }).click();
+  await expect(window.locator('.ide-preview')).toBeVisible();
+
+  // Wait for Monaco to load
+  await expect(window.locator('.ide-editor .monaco-editor')).toBeVisible({ timeout: 30000 });
+
+  // Click the design-spec.ts tab
+  const specTab = window.locator('.ide-tab').filter({ hasText: 'design-spec.ts' });
+  await specTab.click();
+
+  // Verify it's now active
+  await expect(specTab).toHaveAttribute('data-active', 'true');
+
+  // Verify the status bar updated to TypeScript
+  await expect(window.locator('.ide-status-bar')).toContainText('TypeScript');
+});

apps/desktop/e2e/fixtures.ts

@@ -0,0 +1,52 @@
+/**
+ * Electron test fixtures for Playwright.
+ *
+ * Provides `electronApp` and `window` fixtures that launch the built
+ * DesignForge Electron app before each test and tear it down after.
+ *
+ * Usage:
+ *   import { test, expect } from './fixtures';
+ *   test('window title', async ({ window }) => {
+ *     expect(await window.title()).toContain('DesignForge');
+ *   });
+ */
+
+import { test as base, type Page } from '@playwright/test';
+import { _electron as electron, type ElectronApplication } from 'playwright';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Path to the built main process entry point
+const MAIN_ENTRY = resolve(__dirname, '../out/main/index.js');
+
+type ElectronFixtures = {
+  electronApp: ElectronApplication;
+  window: Page;
+};
+
+export const test = base.extend<ElectronFixtures>({
+  // biome-ignore lint: Playwright fixture signature requires destructured use
+  electronApp: async ({}, use) => {
+    const app = await electron.launch({
+      args: [MAIN_ENTRY],
+      env: {
+        ...process.env,
+        NODE_ENV: 'test',
+      },
+    });
+    await use(app);
+    await app.close();
+  },
+
+  window: async ({ electronApp }, use) => {
+    // Wait for the first BrowserWindow to open
+    const window = await electronApp.firstWindow();
+    // Wait until the renderer has fully loaded
+    await window.waitForLoadState('domcontentloaded');
+    await use(window);
+  },
+});
+
+export { expect } from '@playwright/test';

apps/desktop/e2e/resizable-panels.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from './fixtures';
+
+test('left and right panels are resizable via drag handles', async ({ window }) => {
+  await window.waitForSelector('.editor-layout', { timeout: 15000 });
+
+  // Verify resize handles exist
+  const leftHandle = window.locator('.resize-handle--left');
+  const rightHandle = window.locator('.resize-handle--right');
+  await expect(leftHandle).toBeVisible();
+  await expect(rightHandle).toBeVisible();
+
+  // Get initial left panel width
+  const leftPanel = window.locator('.editor-left-panel');
+  const initialLeftWidth = await leftPanel.evaluate((el) => el.getBoundingClientRect().width);
+
+  // Drag left handle to the right to widen the left panel
+  const leftBox = await leftHandle.boundingBox();
+  if (!leftBox) throw new Error('Left handle not found');
+  await window.mouse.move(leftBox.x + leftBox.width / 2, leftBox.y + leftBox.height / 2);
+  await window.mouse.down();
+  await window.mouse.move(leftBox.x + 100, leftBox.y + leftBox.height / 2, { steps: 5 });
+  await window.mouse.up();
+
+  // Verify left panel got wider
+  const newLeftWidth = await leftPanel.evaluate((el) => el.getBoundingClientRect().width);
+  expect(newLeftWidth).toBeGreaterThan(initialLeftWidth);
+
+  // Get initial right panel width
+  const rightPanel = window.locator('.editor-right-panel');
+  const initialRightWidth = await rightPanel.evaluate((el) => el.getBoundingClientRect().width);
+
+  // Drag right handle to the left to widen the right panel
+  const rightBox = await rightHandle.boundingBox();
+  if (!rightBox) throw new Error('Right handle not found');
+  await window.mouse.move(rightBox.x + rightBox.width / 2, rightBox.y + rightBox.height / 2);
+  await window.mouse.down();
+  await window.mouse.move(rightBox.x - 100, rightBox.y + rightBox.height / 2, { steps: 5 });
+  await window.mouse.up();
+
+  // Verify right panel got wider
+  const newRightWidth = await rightPanel.evaluate((el) => el.getBoundingClientRect().width);
+  expect(newRightWidth).toBeGreaterThan(initialRightWidth);
+
+  // Take screenshot of resized layout
+  await window.screenshot({ path: 'test-results/resizable-panels.png', fullPage: false });
+});

apps/desktop/package.json

@@ -11,15 +11,20 @@
     "build": "electron-vite build",
     "preview": "electron-vite preview",
     "pack": "electron-builder --dir",
-    "dist": "electron-builder"
+    "dist": "electron-builder",
+    "test:e2e": "electron-vite build && npx playwright test",
+    "test:e2e:ui": "electron-vite build && npx playwright test --ui"
   },
   "dependencies": {
     "@electron-toolkit/utils": "^4.0.0",
+    "@monaco-editor/react": "^4.7.0",
     "@next-dev/catalog": "workspace:*",
     "@next-dev/editor-core": "workspace:*",
-    "@next-dev/json-render": "workspace:*"
+    "@next-dev/json-render": "workspace:*",
+    "monaco-editor": "^0.55.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.51.0",
     "@tailwindcss/vite": "^4.1.0",
     "@types/react": "~19.1.10",
     "@types/react-dom": "~19.1.5",
@@ -28,13 +33,14 @@
     "electron-builder": "^25.1.8",
     "electron-vite": "^5.0.0",
     "lucide-react": "^0.513.0",
+    "playwright": "^1.51.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.1.0",
     "typescript": "~5.9.2",
     "vite-tsconfig-paths": "^4.3.0",
-    "zustand": "^5.0.5",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "zustand": "^5.0.5"
   },
   "build": {
     "appId": "com.nextdev.designforge",

apps/desktop/playwright.config.ts

@@ -0,0 +1,36 @@
+/**
+ * Playwright config for DesignForge Electron E2E tests.
+ *
+ * This project uses Playwright's Electron support (_electron.launch()).
+ * Tests MUST import { test, expect } from './fixtures' which provides
+ * the `electronApp` and `window` fixtures — never open a standalone browser.
+ *
+ * @see https://playwright.dev/docs/api/class-electron
+ * @see e2e/fixtures.ts
+ */
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 60_000,
+  retries: process.env.CI ? 2 : 0,
+
+  /* Electron tests must run serially — only one app instance at a time */
+  workers: 1,
+  fullyParallel: false,
+
+  forbidOnly: !!process.env.CI,
+
+  reporter: [
+    ['list'],
+    ['html', { open: 'never', outputFolder: 'playwright-report' }],
+  ],
+
+  outputDir: 'test-results',
+
+  /*
+   * No "projects" block — we intentionally skip browser projects.
+   * Electron launches its own Chromium via _electron.launch() in fixtures.ts.
+   * No baseURL is needed; the renderer loads from the built Electron app.
+   */
+});

apps/desktop/src/main/index.ts

@@ -8,7 +8,7 @@
  * 4. Spawn MCP server as child process
  */
 
-import { app, BrowserWindow, ipcMain, dialog, shell, nativeTheme, Menu } from 'electron';
+import { app, BrowserWindow, ipcMain, dialog, shell, nativeTheme, Menu, session } from 'electron';
 import { dirname, join } from 'node:path';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { watch, type FSWatcher } from 'node:fs';
@@ -17,6 +17,32 @@ import { setupMCPIPC } from './mcp-client';
 
 let mainWindow: BrowserWindow | null = null;
 
+/**
+ * Override Content-Security-Policy headers at the session level so that
+ * renderer fetch() calls can reach local LLM APIs (Ollama, PocketPaw, LM Studio)
+ * and remote endpoints (OpenAI, etc.).
+ *
+ * electron-vite injects a restrictive CSP header by default that blocks
+ * connections to localhost origins other than the dev-server port.
+ */
+function setupCSP(): void {
+  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
+    callback({
+      responseHeaders: {
+        ...details.responseHeaders,
+        'Content-Security-Policy': [
+          "default-src 'self';" +
+          " script-src 'self' 'unsafe-inline';" +
+          " style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;" +
+          " font-src 'self' https://fonts.gstatic.com;" +
+          " img-src 'self' data:;" +
+          " connect-src 'self' http://localhost:* http://127.0.0.1:* https://* ws://localhost:* ws://127.0.0.1:*",
+        ],
+      },
+    });
+  });
+}
+
 function createWindow(): void {
   mainWindow = new BrowserWindow({
     width: 1440,
@@ -225,6 +251,7 @@ app.whenReady().then(() => {
   ];
   Menu.setApplicationMenu(Menu.buildFromTemplate(template));
 
+  setupCSP();
   setupIPC();
   setupMCPIPC();
   createWindow();

apps/desktop/src/renderer/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self' http://localhost:* http://127.0.0.1:* https://*"
     />
     <title>DesignForge</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />