Merge pull request #179 from multica-ai/forrestchang/desktop-menubar

feat(desktop): add system tray menu for background operation

apps/desktop/electron-builder.json5

@@ -10,6 +10,7 @@
   },
   "files": [
     "out",
+    "build/trayTemplate*.png",
     "!**/.vscode/*",
     "!src/*",
     "!electron.vite.config.{js,ts,mjs,cjs}",

apps/desktop/src/main/index.ts

@@ -57,6 +57,7 @@ import path from 'node:path'
 import { registerAllIpcHandlers, initializeApp, cleanupAll, setupDeviceConfirmation, setAuthMainWindow, handleAuthDeepLink } from './ipc/index.js'
 import { appStateManager } from '@multica/core'
 import { createUpdater, AutoUpdater } from './updater/index.js'
+import { createTray, destroyTray } from './tray.js'
 
 // CJS output will have __dirname natively, but TypeScript source needs this for type checking
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -77,6 +78,7 @@ const forceOnboarding = process.argv.includes('--force-onboarding')
 
 let win: BrowserWindow | null
 let updater: AutoUpdater
+let isQuitting = false
 
 // ============================================================================
 // Custom Protocol for Auth (multica://)
@@ -108,8 +110,9 @@ if (!gotTheLock) {
   app.quit()
 } else {
   app.on('second-instance', (_event, commandLine) => {
-    // Focus window
+    // Show and focus window
     if (win) {
+      if (!win.isVisible()) win.show()
       if (win.isMinimized()) win.restore()
       win.focus()
     }
@@ -144,6 +147,14 @@ function createWindow() {
     return { action: 'deny' }
   })
 
+  // Hide window on close instead of quitting (tray keeps running)
+  win.on('close', (event) => {
+    if (!isQuitting) {
+      event.preventDefault()
+      win?.hide()
+    }
+  })
+
   if (VITE_DEV_SERVER_URL) {
     win.loadURL(VITE_DEV_SERVER_URL)
   } else {
@@ -152,19 +163,20 @@ function createWindow() {
 }
 
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-    win = null
-  }
+  // Keep app running with tray on all platforms
 })
 
 app.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) {
     createWindow()
+  } else if (win && !win.isVisible()) {
+    win.show()
   }
 })
 
 app.on('before-quit', () => {
+  isQuitting = true
+  destroyTray()
   cleanupAll()
 })
 
@@ -187,17 +199,20 @@ app.whenReady().then(async () => {
 
   createWindow()
 
-  // Set up device confirmation flow and auth (requires window)
-  if (win) {
-    setupDeviceConfirmation(win)
-    setAuthMainWindow(win)
-  }
-
   // Initialize auto-updater
   const forceDevUpdate = process.env.FORCE_DEV_UPDATE === 'true'
   updater = createUpdater(forceDevUpdate)
   updater.setMainWindow(() => win)
 
+  // Set up device confirmation flow, auth, and tray (requires window)
+  if (win) {
+    setupDeviceConfirmation(win)
+    setAuthMainWindow(win)
+    createTray(win, {
+      onCheckForUpdates: () => updater.checkForUpdates(),
+    })
+  }
+
   // Auto-check for updates in production (or when forced in dev)
   const isDev = !!VITE_DEV_SERVER_URL
   if (!isDev || forceDevUpdate) {

apps/desktop/src/main/ipc/hub.ts

@@ -74,7 +74,7 @@ function getHub(): Hub {
 /**
  * Get the default agent.
  */
-function getDefaultAgent(): AsyncAgent | null {
+export function getDefaultAgent(): AsyncAgent | null {
   if (!hub || !defaultAgentId) return null
   return hub.getAgent(defaultAgentId) ?? null
 }

apps/desktop/src/main/ipc/index.ts

@@ -3,7 +3,7 @@
  */
 export { registerAgentIpcHandlers, cleanupAgent } from './agent.js'
 export { registerSkillsIpcHandlers } from './skills.js'
-export { registerHubIpcHandlers, cleanupHub, initializeHub, setupDeviceConfirmation } from './hub.js'
+export { registerHubIpcHandlers, cleanupHub, initializeHub, setupDeviceConfirmation, getDefaultAgent } from './hub.js'
 export { registerProfileIpcHandlers } from './profile.js'
 export { registerProviderIpcHandlers } from './provider.js'
 export { registerChannelsIpcHandlers } from './channels.js'

apps/desktop/src/main/tray.ts

@@ -0,0 +1,119 @@
+/**
+ * System tray (menu bar) for the desktop app.
+ *
+ * Shows agent/hub status and allows window show/hide even
+ * when the main window is closed.
+ */
+import { Tray, Menu, nativeImage, app, type BrowserWindow } from 'electron'
+import path from 'node:path'
+import { getCurrentHub, getDefaultAgent } from './ipc/hub.js'
+
+let tray: Tray | null = null
+let mainWindowRef: BrowserWindow | null = null
+let statusInterval: ReturnType<typeof setInterval> | null = null
+let checkForUpdatesFn: (() => void) | null = null
+
+export interface TrayOptions {
+  onCheckForUpdates?: () => void
+}
+
+/**
+ * Create the system tray and start status polling.
+ */
+export function createTray(window: BrowserWindow, options?: TrayOptions): void {
+  mainWindowRef = window
+  checkForUpdatesFn = options?.onCheckForUpdates ?? null
+
+  // Use dedicated tray icon (asterisk shape matching MulticaIcon).
+  // On macOS, Electron auto-picks trayTemplate.png / trayTemplate@2x.png
+  // and treats "Template" suffix as a template image (adapts to dark/light menu bar).
+  const iconPath = path.join(process.env.APP_ROOT!, 'build', 'trayTemplate.png')
+  const icon = nativeImage.createFromPath(iconPath)
+
+  tray = new Tray(icon)
+  tray.setToolTip('Multica')
+
+  // Initial menu
+  updateTrayMenu()
+
+  // Poll status every 2 seconds
+  statusInterval = setInterval(updateTrayMenu, 2000)
+}
+
+/**
+ * Destroy tray and stop polling.
+ */
+export function destroyTray(): void {
+  if (statusInterval) {
+    clearInterval(statusInterval)
+    statusInterval = null
+  }
+  if (tray) {
+    tray.destroy()
+    tray = null
+  }
+  mainWindowRef = null
+  checkForUpdatesFn = null
+}
+
+function showMainWindow(): void {
+  if (!mainWindowRef || mainWindowRef.isDestroyed()) return
+  mainWindowRef.show()
+  mainWindowRef.focus()
+}
+
+function updateTrayMenu(): void {
+  if (!tray) return
+
+  const hub = getCurrentHub()
+  const agent = getDefaultAgent()
+
+  let agentStatus = 'Initializing'
+  let hubStatus = 'Disconnected'
+  let gatewayUrl = ''
+
+  if (hub) {
+    hubStatus = hub.connectionState === 'connected' ? 'Connected' : 'Disconnected'
+    gatewayUrl = hub.url
+  }
+
+  if (agent && !agent.closed) {
+    if (agent.isStreaming) {
+      agentStatus = 'Streaming'
+    } else if (agent.isRunning) {
+      agentStatus = 'Running'
+    } else {
+      agentStatus = 'Idle'
+    }
+  }
+
+  tray.setToolTip(`Multica - Agent: ${agentStatus}`)
+
+  const template: Electron.MenuItemConstructorOptions[] = [
+    { label: `Agent: ${agentStatus}`, enabled: false },
+    { label: `Hub: ${hubStatus}`, enabled: false },
+  ]
+
+  if (gatewayUrl) {
+    template.push({ label: `Gateway: ${gatewayUrl}`, enabled: false })
+  }
+
+  template.push(
+    { type: 'separator' },
+    { label: 'Show Main Window', click: showMainWindow },
+    { type: 'separator' },
+    { label: `Version ${app.getVersion()}`, enabled: false },
+  )
+
+  if (checkForUpdatesFn) {
+    const fn = checkForUpdatesFn
+    template.push({ label: 'Check for Updates', click: () => fn() })
+  }
+
+  template.push(
+    { type: 'separator' },
+    { label: 'Quit Multica', accelerator: 'CommandOrControl+Q', click: () => app.quit() },
+  )
+
+  tray.setContextMenu(Menu.buildFromTemplate(template))
+}