feat(desktop): Electron shell, build pipeline, and renderer skeleton

.github/workflows/pr-checks.yml

@@ -84,3 +84,21 @@ jobs:
 
       - name: Build web
         run: bun run --cwd web build
+
+  desktop:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@4bc047ad259df6fc24a6c9b0f9a0cb08cf17fbe5 # v2.0.1
+        with:
+          bun-version: 1.3.11
+
+      - name: Install desktop dependencies
+        run: bun install --cwd packages/desktop --frozen-lockfile
+
+      - name: Run desktop tests
+        run: bun run --cwd packages/desktop test

packages/desktop/.gitignore

@@ -0,0 +1,4 @@
+out/
+release/
+node_modules/
+dist/

packages/desktop/electron.vite.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig, externalizeDepsPlugin } from "electron-vite"
+import { resolve } from "path"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      lib: {
+        entry: resolve(__dirname, "src/main/index.ts"),
+      },
+      rollupOptions: {
+        output: {
+          format: "cjs",
+        },
+      },
+    },
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      lib: {
+        entry: resolve(__dirname, "src/preload/index.ts"),
+      },
+      rollupOptions: {
+        external: ["electron"],
+        output: {
+          format: "cjs",
+        },
+      },
+    },
+  },
+  renderer: {
+    plugins: [react()],
+    resolve: {
+      alias: {
+        "@": resolve(__dirname, "src/renderer"),
+      },
+    },
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, "src/renderer/index.html"),
+        },
+      },
+    },
+  },
+})

packages/desktop/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@openclaude/desktop",
+  "version": "0.1.0",
+  "private": true,
+  "author": {
+    "name": "OpenClaude",
+    "email": "support@openclaude.dev"
+  },
+  "description": "OpenClaude Desktop - AI coding assistant",
+  "type": "module",
+  "main": "out/main/index.cjs",
+  "scripts": {
+    "dev": "electron-vite dev",
+    "build": "electron-vite build",
+    "preview": "electron-vite preview",
+    "package": "electron-builder --dir",
+    "package:win": "electron-builder --win",
+    "package:mac": "electron-builder --mac",
+    "package:linux": "electron-builder --linux",
+    "dist": "electron-builder",
+    "ts:check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@electron-toolkit/utils": "^4.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^20.17.50",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "electron": "~39.4.0",
+    "electron-builder": "^25.1.8",
+    "electron-vite": "^3.0.0",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.5.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.3.4",
+    "vitest": "^3.2.1"
+  },
+  "build": {
+    "appId": "dev.openclaude.desktop",
+    "productName": "OpenClaude Desktop",
+    "directories": {
+      "buildResources": "build",
+      "output": "release"
+    },
+    "files": [
+      "out/**/*"
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": "dmg",
+      "icon": "build/icon.icns"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "build/icon.ico"
+    },
+    "linux": {
+      "target": "AppImage",
+      "icon": "build/icon.png",
+      "category": "Development"
+    }
+  }
+}

packages/desktop/src/main/index.ts

@@ -0,0 +1,75 @@
+import { app, BrowserWindow, shell, session } from "electron"
+import { join } from "path"
+import { electronApp, optimizer, is } from "@electron-toolkit/utils"
+
+const CSP_PRODUCTION =
+  "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: blob: https:;"
+
+const CSP_DEVELOPMENT =
+  "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws://localhost:* http://localhost:*; img-src 'self' data: blob: https:;"
+
+let mainWindow: BrowserWindow | null = null
+
+function createWindow(): void {
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 800,
+    minWidth: 900,
+    minHeight: 600,
+    show: false,
+    title: "OpenClaude Desktop",
+    webPreferences: {
+      preload: join(__dirname, "../preload/index.cjs"),
+      sandbox: false,
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  })
+
+  mainWindow.on("ready-to-show", () => {
+    mainWindow?.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: "deny" }
+  })
+
+  if (is.dev && process.env.ELECTRON_RENDERER_URL) {
+    mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
+  } else {
+    mainWindow.loadFile(join(__dirname, "../renderer/index.html"))
+  }
+}
+
+app.whenReady().then(() => {
+  electronApp.setAppUserModelId("dev.openclaude.desktop")
+
+  // Inject CSP via session headers — dev mode allows Vite HMR WebSocket
+  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
+    callback({
+      responseHeaders: {
+        ...details.responseHeaders,
+        "Content-Security-Policy": [is.dev ? CSP_DEVELOPMENT : CSP_PRODUCTION],
+      },
+    })
+  })
+
+  app.on("browser-window-created", (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  createWindow()
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+}).catch(console.error)
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit()
+  }
+})

packages/desktop/src/preload/index.ts

@@ -0,0 +1,6 @@
+import { contextBridge } from "electron"
+
+contextBridge.exposeInMainWorld("platform", {
+  os: process.platform,
+  arch: process.arch,
+})

packages/desktop/src/renderer/App.tsx

@@ -0,0 +1,14 @@
+import "./styles/globals.css"
+
+export function App() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>OpenClaude Desktop</h1>
+      </header>
+      <main className="app-main">
+        <p>Loading...</p>
+      </main>
+    </div>
+  )
+}

packages/desktop/src/renderer/env.d.ts

@@ -0,0 +1,10 @@
+export {}
+
+declare global {
+  interface Window {
+    platform: {
+      os: string
+      arch: string
+    }
+  }
+}

packages/desktop/src/renderer/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- CSP is injected from main process via session headers for dev/prod branching -->
+    <title>OpenClaude Desktop</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

packages/desktop/src/renderer/main.tsx

@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom/client"
+import { App } from "./App"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />)

packages/desktop/src/renderer/styles/globals.css

@@ -0,0 +1,42 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #09090b;
+  color: #fafafa;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.app-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #27272a;
+}
+
+.app-header h1 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #71717a;
+}