desktop: add electron version (#15663)

packages/app/src/app.tsx

@@ -7,8 +7,8 @@ import { MarkedProvider } from "@opencode-ai/ui/context/marked"
 import { Font } from "@opencode-ai/ui/font"
 import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { MetaProvider } from "@solidjs/meta"
-import { Navigate, Route, Router } from "@solidjs/router"
-import { ErrorBoundary, type JSX, lazy, type ParentProps, Show, Suspense } from "solid-js"
+import { BaseRouterProps, Navigate, Route, Router } from "@solidjs/router"
+import { Component, ErrorBoundary, type JSX, lazy, type ParentProps, Show, Suspense } from "solid-js"
 import { CommandProvider } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
@@ -28,6 +28,7 @@ import { TerminalProvider } from "@/context/terminal"
 import DirectoryLayout from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
+import { Dynamic } from "solid-js/web"
 
 const Home = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
@@ -144,13 +145,15 @@ export function AppInterface(props: {
   children?: JSX.Element
   defaultServer: ServerConnection.Key
   servers?: Array<ServerConnection.Any>
+  router?: Component<BaseRouterProps>
 }) {
   return (
     <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
       <ServerKey>
         <GlobalSDKProvider>
           <GlobalSyncProvider>
-            <Router
+            <Dynamic
+              component={props.router ?? Router}
               root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
             >
               <Route path="/" component={HomeRoute} />
@@ -158,7 +161,7 @@ export function AppInterface(props: {
                 <Route path="/" component={SessionIndexRoute} />
                 <Route path="/session/:id?" component={SessionRoute} />
               </Route>
-            </Router>
+            </Dynamic>
           </GlobalSyncProvider>
         </GlobalSDKProvider>
       </ServerKey>

packages/app/src/components/titlebar.tsx

@@ -157,6 +157,7 @@ export function Titlebar() {
     <header
       class="h-10 shrink-0 bg-background-base relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-center"
       style={{ "min-height": minHeight() }}
+      data-tauri-drag-region
       onMouseDown={drag}
       onDblClick={maximize}
     >
@@ -276,6 +277,7 @@ export function Titlebar() {
           "flex items-center min-w-0 justify-end": true,
           "pr-2": !windows(),
         }}
+        data-tauri-drag-region
         onMouseDown={drag}
       >
         <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />

packages/app/src/pages/layout.tsx

@@ -42,6 +42,7 @@ import { Binary } from "@opencode-ai/util/binary"
 import { retry } from "@opencode-ai/util/retry"
 import { playSound, soundSrc } from "@/utils/sound"
 import { createAim } from "@/utils/aim"
+import { setNavigate } from "@/utils/notification-click"
 import { Worktree as WorktreeState } from "@/utils/worktree"
 
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -107,6 +108,7 @@ export default function Layout(props: ParentProps) {
   const notification = useNotification()
   const permission = usePermission()
   const navigate = useNavigate()
+  setNavigate(navigate)
   const providers = useProviders()
   const dialog = useDialog()
   const command = useCommand()

packages/app/src/utils/notification-click.test.ts

@@ -1,26 +1,27 @@
-import { describe, expect, test } from "bun:test"
-import { handleNotificationClick } from "./notification-click"
+import { afterEach, describe, expect, test } from "bun:test"
+import { handleNotificationClick, setNavigate } from "./notification-click"
 
 describe("notification click", () => {
-  test("focuses and navigates when href exists", () => {
-    const calls: string[] = []
-    handleNotificationClick("/abc/session/123", {
-      focus: () => calls.push("focus"),
-      location: {
-        assign: (href) => calls.push(href),
-      },
-    })
-    expect(calls).toEqual(["focus", "/abc/session/123"])
+  afterEach(() => {
+    setNavigate(undefined as any)
   })
 
-  test("only focuses when href is missing", () => {
+  test("navigates via registered navigate function", () => {
     const calls: string[] = []
-    handleNotificationClick(undefined, {
-      focus: () => calls.push("focus"),
-      location: {
-        assign: (href) => calls.push(href),
-      },
-    })
-    expect(calls).toEqual(["focus"])
+    setNavigate((href) => calls.push(href))
+    handleNotificationClick("/abc/session/123")
+    expect(calls).toEqual(["/abc/session/123"])
+  })
+
+  test("does not navigate when href is missing", () => {
+    const calls: string[] = []
+    setNavigate((href) => calls.push(href))
+    handleNotificationClick(undefined)
+    expect(calls).toEqual([])
+  })
+
+  test("falls back to location.assign without registered navigate", () => {
+    handleNotificationClick("/abc/session/123")
+    // falls back to window.location.assign — no error thrown
   })
 })

packages/app/src/utils/notification-click.ts

@@ -1,12 +1,12 @@
-type WindowTarget = {
-  focus: () => void
-  location: {
-    assign: (href: string) => void
-  }
+let nav: ((href: string) => void) | undefined
+
+export const setNavigate = (fn: (href: string) => void) => {
+  nav = fn
 }
 
-export const handleNotificationClick = (href?: string, target: WindowTarget = window) => {
-  target.focus()
+export const handleNotificationClick = (href?: string) => {
+  window.focus()
   if (!href) return
-  target.location.assign(href)
+  if (nav) nav(href)
+  else window.location.assign(href)
 }

packages/desktop-electron/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+out/
+
+resources/opencode-cli*
+resources/icons

packages/desktop-electron/AGENTS.md

@@ -0,0 +1,4 @@
+# Desktop package notes
+
+- Renderer process should only call `window.api` from `src/preload`.
+- Main process should register IPC handlers in `src/main/ipc.ts`.

packages/desktop-electron/README.md

@@ -0,0 +1,32 @@
+# OpenCode Desktop
+
+Native OpenCode desktop app, built with Tauri v2.
+
+## Development
+
+From the repo root:
+
+```bash
+bun install
+bun run --cwd packages/desktop tauri dev
+```
+
+This starts the Vite dev server on http://localhost:1420 and opens the native window.
+
+If you only want the web dev server (no native shell):
+
+```bash
+bun run --cwd packages/desktop dev
+```
+
+## Build
+
+To create a production `dist/` and build the native app bundle:
+
+```bash
+bun run --cwd packages/desktop tauri build
+```
+
+## Prerequisites
+
+Running the desktop app requires additional Tauri dependencies (Rust toolchain, platform-specific libraries). See the [Tauri prerequisites](https://v2.tauri.app/start/prerequisites/) for setup instructions.

packages/desktop-electron/electron-builder.config.ts

@@ -0,0 +1,97 @@
+import type { Configuration } from "electron-builder"
+
+const channel = (() => {
+  const raw = process.env.OPENCODE_CHANNEL
+  if (raw === "dev" || raw === "beta" || raw === "prod") return raw
+  return "dev"
+})()
+
+const getBase = (): Configuration => ({
+  artifactName: "opencode-electron-${os}-${arch}.${ext}",
+  directories: {
+    output: "dist",
+    buildResources: "resources",
+  },
+  files: ["out/**/*", "resources/**/*"],
+  extraResources: [
+    {
+      from: "resources/",
+      to: "",
+      filter: ["opencode-cli*"],
+    },
+    {
+      from: "native/",
+      to: "native/",
+      filter: ["index.js", "index.d.ts", "build/Release/mac_window.node", "swift-build/**"],
+    },
+  ],
+  mac: {
+    category: "public.app-category.developer-tools",
+    icon: `resources/icons/icon.icns`,
+    hardenedRuntime: true,
+    gatekeeperAssess: false,
+    entitlements: "resources/entitlements.plist",
+    entitlementsInherit: "resources/entitlements.plist",
+    notarize: true,
+    target: ["dmg", "zip"],
+  },
+  dmg: {
+    sign: true,
+  },
+  protocols: {
+    name: "OpenCode",
+    schemes: ["opencode"],
+  },
+  win: {
+    icon: `resources/icons/icon.ico`,
+    target: ["nsis"],
+  },
+  nsis: {
+    oneClick: false,
+    allowToChangeInstallationDirectory: true,
+    installerIcon: `resources/icons/icon.ico`,
+    installerHeaderIcon: `resources/icons/icon.ico`,
+  },
+  linux: {
+    icon: `resources/icons`,
+    category: "Development",
+    target: ["AppImage", "deb", "rpm"],
+  },
+})
+
+function getConfig() {
+  const base = getBase()
+
+  switch (channel) {
+    case "dev": {
+      return {
+        ...base,
+        appId: "ai.opencode.desktop.dev",
+        productName: "OpenCode Dev",
+        rpm: { packageName: "opencode-dev" },
+      }
+    }
+    case "beta": {
+      return {
+        ...base,
+        appId: "ai.opencode.desktop.beta",
+        productName: "OpenCode Beta",
+        protocols: { name: "OpenCode Beta", schemes: ["opencode"] },
+        publish: { provider: "github", owner: "anomalyco", repo: "opencode-beta", channel: "latest" },
+        rpm: { packageName: "opencode-beta" },
+      }
+    }
+    case "prod": {
+      return {
+        ...base,
+        appId: "ai.opencode.desktop",
+        productName: "OpenCode",
+        protocols: { name: "OpenCode", schemes: ["opencode"] },
+        publish: { provider: "github", owner: "anomalyco", repo: "opencode", channel: "latest" },
+        rpm: { packageName: "opencode" },
+      }
+    }
+  }
+}
+
+export default getConfig()

packages/desktop-electron/electron.vite.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from "electron-vite"
+import appPlugin from "@opencode-ai/app/vite"
+
+const channel = (() => {
+  const raw = process.env.OPENCODE_CHANNEL
+  if (raw === "dev" || raw === "beta" || raw === "prod") return raw
+  return "dev"
+})()
+
+export default defineConfig({
+  main: {
+    define: {
+      "import.meta.env.OPENCODE_CHANNEL": JSON.stringify(channel),
+    },
+    build: {
+      rollupOptions: {
+        input: { index: "src/main/index.ts" },
+      },
+    },
+  },
+  preload: {
+    build: {
+      rollupOptions: {
+        input: { index: "src/preload/index.ts" },
+      },
+    },
+  },
+  renderer: {
+    plugins: [appPlugin],
+    publicDir: "../app/public",
+    root: "src/renderer",
+    build: {
+      rollupOptions: {
+        input: {
+          main: "src/renderer/index.html",
+          loading: "src/renderer/loading.html",
+        },
+      },
+    },
+  },
+})

packages/desktop-electron/icons/README.md

@@ -0,0 +1,11 @@
+# Tauri Icons
+
+Here's the process I've been using to create icons:
+
+- Save source image as `app-icon.png` in `packages/desktop`
+- `cd` to `packages/desktop`
+- Run `bun tauri icon -o src-tauri/icons/{environment}`
+- Use [Image2Icon](https://img2icnsapp.com/)'s 'Big Sur Icon' preset to generate an `icon.icns` file and place it in the appropriate icons folder
+
+The Image2Icon step is necessary as the `icon.icns` generated by `app-icon.png` does not apply the shadow/padding expected by macOS,
+so app icons appear larger than expected.

packages/desktop-electron/icons/beta/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

packages/desktop-electron/icons/beta/android/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>

packages/desktop-electron/icons/dev/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

packages/desktop-electron/icons/dev/android/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>