perf(desktop): boot the renderer alongside the main process

packages/desktop/electron.vite.config.ts

@@ -28,6 +28,29 @@ const sentry =
       })
     : false
 
+// Every module the entry reaches through static imports lands in one chunk. Automatic splitting
+// otherwise fragments the initial graph into ~50 files shared with lazy routes, and each file costs
+// the renderer a main-thread request round trip through the main process before first paint.
+type ChunkingContext = { getModuleInfo(id: string): { isEntry: boolean; importers: readonly string[] } | null }
+const initialGraph = new WeakMap<ChunkingContext, Map<string, boolean>>()
+function inInitialGraph(id: string, ctx: ChunkingContext) {
+  const memo = initialGraph.get(ctx) ?? new Map<string, boolean>()
+  initialGraph.set(ctx, memo)
+  const visit = (id: string, path: Set<string>): boolean => {
+    const known = memo.get(id)
+    if (known !== undefined) return known
+    if (path.has(id)) return false
+    const info = ctx.getModuleInfo(id)
+    if (!info) return false
+    path.add(id)
+    const result = info.isEntry || info.importers.some((importer) => visit(importer, path))
+    path.delete(id)
+    memo.set(id, result)
+    return result
+  }
+  return visit(id, new Set())
+}
+
 export default defineConfig(({ command }) => ({
   main: {
     resolve: {
@@ -110,6 +133,11 @@ const require = __cjs_mod__.createRequire(import.meta.url);
         input: {
           main: "src/renderer/index.html",
         },
+        output: {
+          codeSplitting: {
+            groups: [{ name: (id, ctx) => (inInitialGraph(id, ctx) ? "app" : null), priority: 10 }],
+          },
+        },
       },
     },
   },

packages/desktop/scripts/bench-startup.ts

@@ -191,8 +191,14 @@ const phaseOrder = [
   ["electron js init → entry", "nodeBootstrapped", "entryStart"],
   ["entry → chromium ready", "entryStart", "electronReady"],
   ["ready → window shown", "electronReady", "windowVisible"],
-  ["main bundle load + evaluate", "windowVisible", "bundleEvaluated"],
-  ["layers → first log line", "bundleEvaluated", "appStarting"],
+  ["window → renderer assets served", "windowVisible", "rendererAssetsServed"],
+  ["main bundle load + evaluate", "rendererAssetsServed", "bundleEvaluated"],
+  ["bundle → onboarding decided", "bundleEvaluated", "onboardingDecided"],
+  ["onboarding → logging ready", "onboardingDecided", "loggingReady"],
+  ["logging → first log line", "loggingReady", "appStarting"],
+  ["first log line → storage open", "appStarting", "storageOpen"],
+  ["storage → initialization done", "storageOpen", "initializationDone"],
+  ["initialization → layers ready", "initializationDone", "layersReady"],
   ["layers → renderer process", "appStarting", "rendererProcess"],
   ["renderer boot → first paint", "rendererProcess", "firstPaint"],
   ["first paint → shell", "firstPaint", "shellVisible"],
@@ -397,8 +403,15 @@ async function launch(build: { label: string; exe: string }, run: number): Promi
       nodeBootstrapped: boot && Math.round(boot.origin + boot.bootstrapComplete - spawnAt),
       entryStart: main.marks.entry && main.marks.entry - spawnAt,
       electronReady: main.marks.ready && main.marks.ready - spawnAt,
+      rendererAssetsServed: main.marks.served && main.marks.served - spawnAt,
       bundleEvaluated: main.marks.bundle && main.marks.bundle - spawnAt,
+      onboardingDecided: main.marks.onboarding && main.marks.onboarding - spawnAt,
+      loggingReady: main.marks.logging && main.marks.logging - spawnAt,
+      crashReporterStarted: main.marks.crash && main.marks.crash - spawnAt,
       appStarting: main.appStarting && main.appStarting - spawnAt,
+      storageOpen: main.marks.storage && main.marks.storage - spawnAt,
+      initializationDone: main.marks.init && main.marks.init - spawnAt,
+      layersReady: main.marks.layers && main.marks.layers - spawnAt,
       cliVersionStart: main.versionStart && main.versionStart - spawnAt,
       cliVersionDone: main.versionDone && main.versionDone - spawnAt,
       serviceStarting: main.serviceStarting && main.serviceStarting - spawnAt,
@@ -593,8 +606,8 @@ function mainLog() {
       // A window shown before the logger existed reports when it was shown; the line itself is later.
       const shown = /main window visible/.test(message) ? entry.match(/shownAt: (\d+)/)?.[1] : undefined
       if (shown) windowShownAt = Number(shown)
-      if (/app starting/.test(message))
-        for (const [, key, value] of entry.matchAll(/\b(entry|ready|window|bundle): (\d{10,})/g)) marks[key] = Number(value)
+      if (/app starting|layers ready/.test(message))
+        for (const [, key, value] of entry.matchAll(/\b(\w+): (\d{10,})/g)) marks[key] = Number(value)
       timeline.push([new Date(m[1].replace(" ", "T")).getTime(), name.replace(/\.log$/, ""), message])
     }
   }

packages/desktop/scripts/bench-variant.ps1

@@ -0,0 +1,10 @@
+param([Parameter(Mandatory)][string]$Name, [int]$Runs = 5)
+$ErrorActionPreference = "Stop"
+Set-Location $PSScriptRoot\..
+# electron-vite directly: the package's prebuild hook re-downloads the CLI, which the bench keeps fixed.
+bunx electron-vite build 2>&1 | Select-String -Pattern "built in|error" | Select-Object -Last 3
+if (-not (Test-Path out\main\index.js)) { throw "build failed" }
+bunx electron-builder --win --dir --config electron-builder.config.ts 2>&1 | Select-String -Pattern "error|signing with signtool.*OpenCode Dev" | Select-Object -Last 2
+if (Test-Path "dist\$Name-unpacked") { Remove-Item "dist\$Name-unpacked" -Recurse -Force }
+Rename-Item -Path dist\win-unpacked -NewName "$Name-unpacked"
+bun ./scripts/bench-startup.ts --exe "dist\base-unpacked\OpenCode Dev.exe" --compare "dist\$Name-unpacked\OpenCode Dev.exe" --runs $Runs --warmup 1 --window-at=-1700,20 --out "dist\bench-startup\$Name" 2>&1 | Select-String -Pattern "^warm service|^\s{2,}|^phases|^\S+\s+\d+\s+\(|^report|^warm-up|Error|error" | Select-Object -Last 45

packages/desktop/scripts/profile-by-source.ts

@@ -0,0 +1,94 @@
+// Attribute a renderer .cpuprofile's self time to original source files through the build's
+// source maps. Run with: bun scripts/profile-by-source.ts <profile.cpuprofile> [out/renderer/assets]
+import { readFileSync, readdirSync } from "node:fs"
+import { join } from "node:path"
+import { TraceMap, originalPositionFor } from "C:/Users/Lukem/.local/share/opencode/worktree/6c1049/quiet-wolf-2/node_modules/.bun/@jridgewell+trace-mapping@0.3.31/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.mjs"
+
+const profilePath = process.argv[2]!
+const assets = process.argv[3] ?? "out/renderer/assets"
+const profile = JSON.parse(readFileSync(profilePath, "utf8"))
+const maps = new Map<string, TraceMap>()
+for (const name of readdirSync(assets).filter((f) => f.endsWith(".js.map"))) {
+  maps.set(name.slice(0, -4), new TraceMap(JSON.parse(readFileSync(join(assets, name), "utf8"))))
+}
+
+const nodes = new Map<number, any>()
+for (const n of profile.nodes) nodes.set(n.id, n)
+const self = new Map<string, number>()
+const byPkg = new Map<string, number>()
+const group = (source: string) => {
+  const n = source.replace(/\\/g, "/")
+  const nm = n.match(/node_modules\/(?:\.bun\/[^/]+\/node_modules\/)?((?:@[^/]+\/)?[^/]+)(?:\/dist\/([^/]+))?/)
+  if (nm) return nm[1] === "effect" ? `effect/${(nm[2] ?? "").replace(/\.js$/, "")}` : nm[1]
+  const pk = n.match(/packages\/([^/]+)\/src\/(.+)$/)
+  return pk ? `${pk[1]}/${pk[2]}` : n.slice(-50)
+}
+const parent = new Map<number, number>()
+for (const n of profile.nodes) for (const c of n.children ?? []) parent.set(c, n.id)
+const resolve = (frame: any) => {
+  const name = frame.functionName
+  if (name === "(program)" || name === "(garbage collector)") return { label: name, fn: name }
+  const file = frame.url.split("/").pop()
+  const map = maps.get(file)
+  if (!map) return { label: `(no map) ${file}`, fn: name }
+  const pos = originalPositionFor(map, { line: frame.lineNumber + 1, column: frame.columnNumber })
+  return { label: pos.source ? group(pos.source) : `(unmapped) ${file}`, fn: pos.name ?? name }
+}
+const labelOf = (frame: any) => resolve(frame).label
+// A sample belongs to the render phase once Solid's root is on the stack; everything before that is
+// module evaluation, everything after the first render is later work (hydration, effects, timers).
+const stackHas = (id: number, test: (label: string, fn: string) => boolean) => {
+  for (let cur: number | undefined = id; cur !== undefined; cur = parent.get(cur)) {
+    const resolved = resolve(nodes.get(cur).callFrame)
+    if (test(resolved.label, resolved.fn)) return true
+  }
+  return false
+}
+const phases = { evaluate: new Map<string, number>(), render: new Map<string, number>(), later: new Map<string, number>() }
+let phase: keyof typeof phases = "evaluate"
+let t = 0
+let total = 0
+for (let i = 0; i < profile.samples.length; i++) {
+  const dt = (profile.timeDeltas[i] ?? 0) / 1000
+  t += dt
+  const node = nodes.get(profile.samples[i])
+  if (node.callFrame.functionName === "(idle)") {
+    if (phase === "render" && dt > 5) phase = "later"
+    continue
+  }
+  total += dt
+  if (phase === "evaluate" && stackHas(node.id, (label, fn) => label === "solid-js" && (fn === "render" || fn === "createRoot")))
+    phase = "render"
+  const label = labelOf(node.callFrame)
+  const bucket = phases[phase]
+  bucket.set(label, (bucket.get(label) ?? 0) + dt)
+  self.set(label, (self.get(label) ?? 0) + dt)
+  const pkg = label.split("/").slice(0, label.startsWith("effect/") || label.startsWith("@") ? 2 : 1).join("/")
+  byPkg.set(pkg, (byPkg.get(pkg) ?? 0) + dt)
+}
+console.log(`busy ${total.toFixed(0)} ms over ${t.toFixed(0)} ms`)
+void phases
+// Timeline: 25 ms buckets with the top sources, so module evaluation, render and hydration show as bands.
+const buckets = new Map<number, Map<string, number>>()
+t = 0
+for (let i = 0; i < profile.samples.length; i++) {
+  const dt = (profile.timeDeltas[i] ?? 0) / 1000
+  t += dt
+  const node = nodes.get(profile.samples[i])
+  if (node.callFrame.functionName === "(idle)") continue
+  const b = Math.floor(t / 25) * 25
+  const m = buckets.get(b) ?? new Map()
+  const label = labelOf(node.callFrame).replace(/^(\.\.\/)+/, "")
+  m.set(label, (m.get(label) ?? 0) + dt)
+  buckets.set(b, m)
+}
+console.log("\n== timeline (25 ms buckets) ==")
+for (const [b, m] of [...buckets].sort((a, c) => a[0] - c[0])) {
+  const busy = [...m.values()].reduce((a, c) => a + c, 0)
+  if (busy < 1) continue
+  const top = [...m].sort((a, c) => c[1] - a[1]).slice(0, 4).map(([k, v]) => `${k} ${v.toFixed(0)}`).join(" | ")
+  console.log(String(b).padStart(5), busy.toFixed(0).padStart(3), top)
+}
+console.log("\n== by package (all) ==")
+for (const [k, v] of [...byPkg].sort((a, b) => b[1] - a[1]).slice(0, 20)) console.log(v.toFixed(1).padStart(7), k)
+

packages/desktop/src/main/desktop.ts

@@ -5,6 +5,7 @@ import { Ipc } from "./ipc"
 import { DesktopInitialization } from "./lifecycle/desktop-initialization"
 import { installContextMenu } from "./lifecycle/environment"
 import { ApplicationLifecycle } from "./lifecycle"
+import { DesktopLogging } from "./native/logging"
 import { BackgroundService } from "./service/background-service"
 import { DesktopCli } from "./service/desktop-cli"
 import { UpdaterLive } from "./updater/live"
@@ -15,8 +16,15 @@ marks.bundle = Date.now()
 
 const runIpc = Effect.fn("Desktop.runIpc")(function* () {
   const lifecycle = yield* ApplicationLifecycle.Service
+  marks.layers = Date.now()
+  yield* Effect.logInfo("layers ready", { marks })
   const ipc = yield* Ipc.registerIpcHandlers
   if (lifecycle.restoreWindows().length) ipc.installMenu()
+  // The first window's renderer now has its IPC port and is hydrating its stores over it. The crash
+  // reporter (spawns a process) and the context menu (a dependency tree) are not worth answering late.
+  yield* Effect.sleep("500 millis")
+  const logging = yield* DesktopLogging.Service
+  yield* logging.startCrashReporter
   yield* installContextMenu
   yield* Effect.callback<void>((resume) => {
     const quit = () => resume(Effect.void)

packages/desktop/src/main/index.ts

@@ -2,7 +2,10 @@
 import { marks } from "./lifecycle/marks"
 import { app } from "electron"
 import { acquireApplicationLock, configureApplication } from "./lifecycle/configure"
+import { startSidecarProbe } from "./service/sidecar-probe"
+import { registerStorageSnapshotHandler } from "./storage/snapshot"
 import { createEarlyWindow } from "./windows/early"
+import { rendererAssetsServed } from "./windows/protocol"
 import { registerRendererScheme } from "./windows/scheme"
 
 // This module stays small on purpose. Electron holds the ready event until the entry module has
@@ -14,10 +17,16 @@ if (acquireApplicationLock()) {
   registerRendererScheme()
   // Window first, then the bundle: starting the import before ready delays ready itself, because the
   // module graph evaluates on the same thread Chromium needs to finish initialising.
-  void app.whenReady().then(() => {
+  void app.whenReady().then(async () => {
     marks.ready = Date.now()
+    registerStorageSnapshotHandler()
     createEarlyWindow()
     marks.window = Date.now()
+    startSidecarProbe()
+    // The window's renderer is already loading. Its HTML and preloaded chunks are served from this
+    // thread, so the bundle waits for that burst to be answered (or a cap) before it evaluates.
+    if (!process.env.ELECTRON_RENDERER_URL) await rendererAssetsServed({ quietMs: 40, capMs: 400 })
+    marks.served = Date.now()
     return import("./desktop")
   })
 }

packages/desktop/src/main/ipc-handlers/events.ts

@@ -4,7 +4,7 @@ import { EventRpcs } from "../../shared/ipc-rpc"
 import { ipcEventStream } from "../ipc-events"
 import { IpcPortHandoff } from "../ipc-transport"
 import { Shutdown } from "../lifecycle/shutdown"
-import { isRendererUrl } from "../windows/protocol"
+import { isRendererUrl } from "../windows/scheme"
 import { DesktopStorage } from "../storage"
 import { sender } from "./context"
 

packages/desktop/src/main/ipc.ts

@@ -65,12 +65,15 @@ export const registerIpcHandlers = Effect.gen(function* () {
       if (input.type !== "keyDown" || input.key !== "Escape") return
       win.webContents.send(DragCancelEvent)
     })
-    win.webContents.on("did-finish-load", () => {
+    const post = () => {
       if (win.isDestroyed() || win.webContents.isDestroyed()) return
       const channel = new MessageChannelMain()
       handoff.bind(win.webContents, channel.port1)
       win.webContents.postMessage(IpcTransportPort, null, [channel.port2])
-    })
+    }
+    win.webContents.on("did-finish-load", post)
+    // The first window starts loading before the layers exist and may already be done.
+    if (!win.webContents.isLoading() && win.webContents.getURL()) post()
   }
   yield* Effect.sync(() => {
     app.on("browser-window-created", wire)

packages/desktop/src/main/lifecycle/configure.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from "node:crypto"
 import { mkdirSync, rmSync } from "node:fs"
+import { enableCompileCache } from "node:module"
 import { homedir, tmpdir } from "node:os"
 import path from "node:path"
 import { app } from "electron"
@@ -31,6 +32,8 @@ export function configureApplication() {
     app.setPath("sessionData", path.join(testRoot, "session"))
     if (testOnboarding) app.setPath("documents", path.join(testRoot, "documents"))
   }
+  // V8 bytecode for the main bundle survives between launches, like the renderer's code cache.
+  enableCompileCache(path.join(app.getPath("userData"), "compile-cache"))
 }
 
 export function acquireApplicationLock() {

packages/desktop/src/main/lifecycle/desktop-initialization.ts

@@ -4,6 +4,7 @@ import { app } from "electron"
 import { Context, Effect, Layer } from "effect"
 import { DesktopLogging } from "../native/logging"
 import { getStore } from "../storage/store"
+import { marks } from "./marks"
 import {
   loadProxyEnvironment,
   preferApplicationEnvironment,
@@ -22,12 +23,15 @@ export const layer = Layer.effect(
   Service,
   Effect.gen(function* () {
     const logging = yield* DesktopLogging.Service
-    yield* prepareApplicationEnvironment
     yield* preferApplicationEnvironment
-    yield* loadProxyEnvironment
+    // System certificates, the proxy and the net log serve later network work; the first window and
+    // its IPC port do not wait for them.
+    yield* Effect.forkScoped(
+      prepareApplicationEnvironment.pipe(Effect.andThen(loadProxyEnvironment), Effect.andThen(logging.startNetwork)),
+    )
     yield* Effect.promise(() => app.whenReady())
-    yield* logging.startNetwork
     yield* prepareDesktop
+    marks.init = Date.now()
     return Service.of({
       version: app.getVersion(),
       updaterStore: getStore("opencode.updater"),

packages/desktop/src/main/lifecycle/environment.ts

@@ -4,7 +4,8 @@ import { app } from "electron"
 import { Effect, Path } from "effect"
 import { DesktopPaths } from "../paths"
 import { getUserShell, loadShellEnv } from "../service/shell-env"
-import { registerRendererProtocol, setDockIcon } from "../windows"
+import { registerRendererProtocol, setDockIcon, setProtocolReporter } from "../windows"
+import { scoped } from "../native/logging"
 
 // electron-context-menu attaches to every existing and future window, so it can load once the first
 // window is up instead of holding up startup with its dependency tree.
@@ -37,7 +38,11 @@ export const prepareDesktop = Effect.gen(function* () {
   const paths = yield* DesktopPaths.resolve
   if (app.isPackaged || process.env.OPENCODE_DESKTOP_DISABLE_PROTOCOL_REGISTRATION !== "1")
     app.setAsDefaultProtocolClient("opencode")
-  yield* registerRendererProtocol()
+  const runFork = Effect.runForkWith(yield* Effect.context())
+  setProtocolReporter((level, message, data) =>
+    runFork(scoped("protocol", level === "error" ? Effect.logError(message, data) : Effect.logWarning(message, data))),
+  )
+  registerRendererProtocol(paths.rendererRoot)
   setDockIcon(path, paths)
 })
 

packages/desktop/src/main/lifecycle/index.ts

@@ -9,6 +9,7 @@ import { DesktopLogging, scoped } from "../native/logging"
 import { DesktopStorage } from "../storage"
 import { safeWebContentsURL } from "../windows/state"
 import { getLastFocusedWindow, makeMainWindows, setAppQuitting, setRelaunchHandler } from "../windows"
+import { marks } from "./marks"
 import { initializeFirstLaunchOnboarding } from "./onboarding"
 import { Shutdown } from "./shutdown"
 
@@ -157,6 +158,7 @@ export const layer = Layer.unwrap(
     // Decide first-launch state before the storage layer creates drafts.sqlite, which would
     // otherwise read as evidence of an earlier launch on a fresh install.
     yield* initializeFirstLaunchOnboarding(app.getPath("userData"))
+    marks.onboarding = Date.now()
     return runtime.pipe(Layer.provideMerge(platform))
   }),
 )

packages/desktop/src/main/lifecycle/marks.ts

@@ -1,4 +1,7 @@
 // Startup marks, epoch ms. The entry module records them before any logger exists; the logging
-// layer reports them with "app starting" so the startup benchmark can split the time before the
-// first log line into Electron's own initialisation, our entry, and the main bundle.
-export const marks: { entry: number; ready?: number; window?: number; bundle?: number } = { entry: Date.now() }
+// layer reports the early ones with "app starting" and the rest with "layers ready", so the startup
+// benchmark can split the time before the renderer gets its IPC port into Electron's own
+// initialisation, our entry, the main bundle and each layer.
+export const marks: { entry: number } & Partial<
+  Record<"ready" | "window" | "served" | "bundle" | "onboarding" | "logging" | "crash" | "storage" | "init" | "layers", number>
+> = { entry: Date.now() }