Skip to main content

desktop — Electron App

The frontend dashboard wrapped in Electron for Windows/ macOS/Linux, with auto-update, native notifications, and call/chat popups.

  • Stack: Vue 3 + TS + Vite renderer, Electron 37 main process, electron-builder
    • electron-updater. vite-plugin-electron compiles main + preload.
Sync policy

Desktop is synced from frontend at release time, not per-PR. Don't copy frontend changes into desktop during frontend work. White-label is a build flag, not a fork.

Current release: 0.8.0 (2026-07-21) — a web-parity sync (picks up the dashboard restructure, wallet UI, members layout, etc.), plus heavy screens lazy-loaded out of startup and vite build warnings cleaned. CI note: vue-tsc OOMs at the default ~2 GB Node heap — CI raises it to 4 GB.

Electron architecture​

  • Main process (electron/main.ts): single-instance lock; BrowserWindow (Vite HMR in dev, file:// in prod); IPC handlers for call/chat popup windows, screen-share (desktopCapturer), launch-at-login, native notifications, external URLs; CSP headers allowing Twilio/Stripe/Firebase/Socket.IO; an asset-protocol handler resolving /assets/* from the packaged renderer (Windows path fix).
  • Preload (electron/preload.ts): exposes ipcRenderer (send/on/off/invoke) via contextBridge.
  • Auto-update (electron-updater): checks GitHub releases every ~5 min, shows a progress bar via IPC, one-click install + restart. Target repo depends on the white-label flag.

White-label​

vite.config.ts injects __WHITE_LABEL__ at build time, switching app name, icon, window title, menu links, the auto-updater repo, and default company name. Built via build:next / publish:next (WHITE_LABEL=true). The "Next Level AI" brand is the current white-label target.

Relationship to frontend​

The renderer is the frontend app (same router, stores, components, API layer). Desktop adds only Electron-specific glue: utils/platform.js isElectron(), socket disconnect-on-close handling, white-label detection, and the native notification bridge (desktop_notification_white_label.js). Router uses hash history under file://.

Build & publish​

electron-builder.config.js:

  • Inputs: dist/ (renderer) + dist-electron/main.js + preload.mjs.
  • Output: release/{version}/ (or release/next-level/{version}/).
  • Targets: macOS DMG+ZIP (x64/arm64, notarized, hardened runtime, mic/camera entitlements); Windows NSIS (x64, per-machine, code-signed in CI); Linux AppImage (x64).
  • Publish: GitHub releases (KnockKnockAppLtd/KnockKnock or …/NextLevelAI) with delta updates.

Scripts: build / publish (standard), build:next / publish:next (white-label), dev / dev:next (hot reload).