feat: add desktop notifications and skills updates

electron/desktopNotifications.js

@@ -0,0 +1,378 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { Notification } from 'electron';
+import WebSocket from 'ws';
+
+const RECONNECT_MIN_MS = 1000;
+const RECONNECT_MAX_MS = 30000;
+const TARGET_REGISTER_TIMEOUT_MS = 8000;
+
+function toNotificationsWsUrl(httpUrl) {
+  try {
+    const parsed = new URL(httpUrl);
+    parsed.protocol = parsed.protocol === 'http:' ? 'ws:' : 'wss:';
+    parsed.pathname = '/desktop-notifications';
+    parsed.search = '';
+    parsed.hash = '';
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+}
+
+function readJsonMessage(raw) {
+  try {
+    return JSON.parse(String(raw));
+  } catch {
+    return null;
+  }
+}
+
+async function requestJson(url, { method = 'POST', body = null, headers = {} } = {}) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), TARGET_REGISTER_TIMEOUT_MS);
+  try {
+    const response = await fetch(url, {
+      method,
+      signal: controller.signal,
+      headers: {
+        'Content-Type': 'application/json',
+        ...headers,
+      },
+      ...(body == null ? {} : { body: JSON.stringify(body) }),
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error(payload.error || `Request failed with status ${response.status}`);
+    }
+    return payload;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+export class DesktopNotificationsController {
+  constructor({
+    settingsPath,
+    appVersion,
+    appName,
+    getDeviceId,
+    getAccountEmail,
+    getRunningEnvironmentUrls,
+    getApiKey,
+    getAuthToken,
+    getIconPath,
+    openNotificationTarget,
+    onChange,
+  }) {
+    this.settingsPath = settingsPath;
+    this.appVersion = appVersion;
+    this.appName = appName;
+    this.getDeviceId = getDeviceId;
+    this.getAccountEmail = getAccountEmail;
+    this.getRunningEnvironmentUrls = getRunningEnvironmentUrls;
+    this.getApiKey = getApiKey;
+    this.getAuthToken = getAuthToken;
+    this.getIconPath = getIconPath;
+    this.openNotificationTarget = openNotificationTarget;
+    this.onChange = onChange;
+    this.settings = { enabled: false };
+    this.connections = new Map();
+    this.lastEvent = null;
+    this.lastError = null;
+  }
+
+  getState() {
+    const connectedTargets = [];
+    for (const [url, connection] of this.connections.entries()) {
+      if (connection.ws?.readyState === WebSocket.OPEN) {
+        connectedTargets.push(url);
+      }
+    }
+
+    return {
+      enabled: this.settings.enabled,
+      supported: Notification.isSupported(),
+      targetCount: this.connections.size,
+      connectedCount: connectedTargets.length,
+      connectedTargets,
+      lastEvent: this.lastEvent,
+      lastError: this.lastError,
+    };
+  }
+
+  async loadSettings() {
+    try {
+      const raw = await fs.readFile(this.settingsPath, 'utf8');
+      const stored = JSON.parse(raw);
+      this.settings = { enabled: Boolean(stored.enabled) };
+    } catch {
+      this.settings = { enabled: false };
+    }
+    return this.settings;
+  }
+
+  async saveSettings(next) {
+    const enabled = Boolean(next?.enabled);
+    if (!enabled && this.settings.enabled) {
+      await this.disableCurrentTargets();
+    }
+    this.settings = { enabled };
+    await fs.mkdir(path.dirname(this.settingsPath), { recursive: true });
+    await fs.writeFile(this.settingsPath, JSON.stringify(this.settings, null, 2), 'utf8');
+    await this.sync();
+    this.onChange?.();
+    return this.settings;
+  }
+
+  async sync() {
+    if (!this.settings.enabled) {
+      this.stop();
+      this.lastEvent = 'disabled';
+      this.onChange?.();
+      return;
+    }
+
+    if (!Notification.isSupported()) {
+      this.stop();
+      this.lastEvent = 'unsupported';
+      this.lastError = 'Native notifications are not supported on this system.';
+      this.onChange?.();
+      return;
+    }
+
+    const deviceId = this.getDeviceId?.();
+    if (!deviceId) {
+      this.stop();
+      this.lastEvent = 'missing-device';
+      this.lastError = 'Connect a CloudCLI account before enabling desktop notifications.';
+      this.onChange?.();
+      return;
+    }
+
+    const targets = (this.getRunningEnvironmentUrls?.() || [])
+      .map((httpUrl) => ({
+        httpUrl,
+        wsUrl: toNotificationsWsUrl(httpUrl),
+      }))
+      .filter((target) => target.wsUrl);
+
+    const nextWsUrls = new Set(targets.map((target) => target.wsUrl));
+    for (const [wsUrl, connection] of this.connections.entries()) {
+      if (!nextWsUrls.has(wsUrl)) {
+        this.closeConnection(connection);
+        this.connections.delete(wsUrl);
+      }
+    }
+
+    for (const target of targets) {
+      if (!this.connections.has(target.wsUrl)) {
+        void this.connect(target).catch((error) => {
+          this.lastEvent = 'connect-error';
+          this.lastError = error instanceof Error ? error.message : String(error);
+          this.onChange?.();
+        });
+      }
+    }
+
+    this.lastEvent = targets.length ? 'sync' : 'no-targets';
+    this.onChange?.();
+  }
+
+  async connect(target, attempt = 0) {
+    const existing = this.connections.get(target.wsUrl);
+    if (existing?.ws && [WebSocket.CONNECTING, WebSocket.OPEN].includes(existing.ws.readyState)) {
+      return;
+    }
+
+    const connection = {
+      ...target,
+      ws: null,
+      reconnectTimer: null,
+      closed: false,
+      attempt,
+    };
+    this.connections.set(target.wsUrl, connection);
+
+    const headers = await this.getTargetAuthHeaders(target.httpUrl);
+    if (connection.closed || this.connections.get(target.wsUrl) !== connection) {
+      return;
+    }
+
+    const ws = new WebSocket(target.wsUrl, { headers: Object.keys(headers).length ? headers : undefined });
+    connection.ws = ws;
+
+    ws.on('open', async () => {
+      try {
+        await this.registerTarget(target.httpUrl);
+        ws.send(JSON.stringify({
+          type: 'register',
+          deviceId: this.getDeviceId?.(),
+          label: this.getAccountEmail?.() || this.appName,
+          platform: process.platform,
+          appVersion: this.appVersion,
+        }));
+        connection.attempt = 0;
+        this.lastEvent = 'connected';
+        this.lastError = null;
+        this.onChange?.();
+      } catch (error) {
+        this.lastEvent = 'register-error';
+        this.lastError = error instanceof Error ? error.message : String(error);
+        this.onChange?.();
+        try { ws.close(); } catch {}
+      }
+    });
+
+    ws.on('message', (raw) => this.handleMessage(target, ws, raw));
+    ws.on('close', () => this.scheduleReconnect(target.wsUrl));
+    ws.on('error', (error) => {
+      this.lastEvent = 'socket-error';
+      this.lastError = error instanceof Error ? error.message : String(error);
+      this.onChange?.();
+    });
+  }
+
+  async registerTarget(httpUrl) {
+    const url = new URL('/api/notifications/endpoints/current', httpUrl).toString();
+    await requestJson(url, {
+      method: 'POST',
+      headers: await this.getTargetAuthHeaders(httpUrl),
+      body: {
+        channel: 'desktop',
+        endpointId: this.getDeviceId?.(),
+        label: this.getAccountEmail?.() || this.appName,
+        metadata: {
+          platform: process.platform,
+          appVersion: this.appVersion,
+        },
+        enabled: true,
+      },
+    });
+  }
+
+  async disableCurrentTargets() {
+    const deviceId = this.getDeviceId?.();
+    if (!deviceId) return;
+
+    const targets = new Set([
+      ...[...this.connections.values()].map((connection) => connection.httpUrl).filter(Boolean),
+      ...(this.getRunningEnvironmentUrls?.() || []),
+    ]);
+
+    const results = await Promise.allSettled([...targets].map(async (httpUrl) => {
+      const url = new URL(`/api/notifications/endpoints/desktop/${encodeURIComponent(deviceId)}`, httpUrl).toString();
+      await requestJson(url, {
+        method: 'PATCH',
+        headers: await this.getTargetAuthHeaders(httpUrl),
+        body: { enabled: false },
+      });
+    }));
+
+    const rejected = results.find((result) => result.status === 'rejected');
+    if (rejected) {
+      this.lastEvent = 'disable-endpoint-error';
+      this.lastError = rejected.reason instanceof Error ? rejected.reason.message : String(rejected.reason);
+    }
+  }
+
+  async getTargetAuthHeaders(httpUrl) {
+    const headers = {};
+    const apiKey = this.getApiKey?.();
+    if (apiKey) {
+      headers['X-API-Key'] = apiKey;
+    }
+
+    const authToken = await Promise.resolve(this.getAuthToken?.(httpUrl)).catch(() => null);
+    if (authToken) {
+      headers.Authorization = `Bearer ${authToken}`;
+    }
+    return headers;
+  }
+
+  handleMessage(target, ws, raw) {
+    const message = readJsonMessage(raw);
+    if (!message || message.type !== 'notification' || !message.payload) {
+      return;
+    }
+
+    const shown = this.showNativeNotification(target, message.payload);
+    if (shown && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({
+        type: 'notification_ack',
+        id: message.id || message.payload?.data?.tag || null,
+        action: 'shown',
+      }));
+    }
+  }
+
+  showNativeNotification(target, payload) {
+    if (!Notification.isSupported()) return false;
+
+    const notification = new Notification({
+      title: payload.title || this.appName,
+      body: payload.body || '',
+      icon: this.getIconPath?.(),
+      silent: false,
+    });
+
+    notification.on('click', () => {
+      void this.openNotificationTarget?.({
+        environmentUrl: target.httpUrl,
+        sessionId: payload.data?.sessionId || null,
+        provider: payload.data?.provider || null,
+      }).catch((error) => {
+        this.lastEvent = 'click-error';
+        this.lastError = error instanceof Error ? error.message : String(error);
+        this.onChange?.();
+      });
+    });
+
+    notification.show();
+    this.lastEvent = 'notification-shown';
+    this.lastError = null;
+    this.onChange?.();
+    return true;
+  }
+
+  scheduleReconnect(wsUrl) {
+    const connection = this.connections.get(wsUrl);
+    if (!connection || connection.closed || !this.settings.enabled) {
+      return;
+    }
+
+    const attempt = connection.attempt + 1;
+    connection.attempt = attempt;
+    const delay = Math.min(RECONNECT_MAX_MS, RECONNECT_MIN_MS * (2 ** Math.min(attempt, 5)));
+    connection.reconnectTimer = setTimeout(() => {
+      if (!this.connections.has(wsUrl) || !this.settings.enabled) return;
+      void this.connect({
+        httpUrl: connection.httpUrl,
+        wsUrl: connection.wsUrl,
+      }, attempt).catch((error) => {
+        this.lastEvent = 'connect-error';
+        this.lastError = error instanceof Error ? error.message : String(error);
+        this.onChange?.();
+      });
+    }, delay);
+    this.lastEvent = 'reconnecting';
+    this.onChange?.();
+  }
+
+  closeConnection(connection) {
+    connection.closed = true;
+    if (connection.reconnectTimer) {
+      clearTimeout(connection.reconnectTimer);
+      connection.reconnectTimer = null;
+    }
+    try { connection.ws?.close(); } catch {}
+  }
+
+  stop() {
+    for (const connection of this.connections.values()) {
+      this.closeConnection(connection);
+    }
+    this.connections.clear();
+    this.onChange?.();
+  }
+}

electron/desktopWindow.js

@@ -3,6 +3,7 @@ import { BrowserWindow, Menu, Tray, clipboard, nativeImage, nativeTheme, session
 import { ViewHost } from './viewHost.js';
 
 const TITLEBAR_HEIGHT = 44;
+const AUTH_TOKEN_STORAGE_KEY = 'auth-token';
 // TODO: Re-enable Computer Use menus after fixing the MCP server connection
 // between the desktop app and the web UI.
 const COMPUTER_USE_MENUS_ENABLED = false;
@@ -249,6 +250,16 @@ export class DesktopWindowManager {
     return this.getDesktopState();
   }
 
+  async navigateActiveView(url) {
+    const navigated = await this.viewHost.navigateActiveView(url);
+    this.emitDesktopState();
+    return navigated;
+  }
+
+  async readAuthTokenForTarget(url) {
+    return this.viewHost.readLocalStorageValueForOrigin(url, AUTH_TOKEN_STORAGE_KEY);
+  }
+
   openActiveTabDevTools() {
     if (this.viewHost.openActiveViewDevTools()) return;
     void this.actions.showError('No active BrowserView', new Error('Switch to a non-launcher tab before opening active tab DevTools.'));

electron/main.js

@@ -6,6 +6,7 @@ import { fileURLToPath } from 'node:url';
 import { CloudController } from './cloud.js';
 import { ComputerAgentController } from './computerAgent.js';
 import { DesktopWindowManager } from './desktopWindow.js';
+import { DesktopNotificationsController } from './desktopNotifications.js';
 import { LocalServerController } from './localServer.js';
 import { TabsController } from './tabs.js';
 
@@ -30,6 +31,7 @@ let desktopWindow = null;
 let localServer = null;
 let cloud = null;
 let computerAgent = null;
+let desktopNotifications = null;
 let isQuitting = false;
 let isRefreshingCloud = false;
 let pendingCloudConnectStartedAt = 0;
@@ -65,6 +67,10 @@ function getComputerUseSettingsPath() {
   return path.join(app.getPath('userData'), 'computer-use-settings.json');
 }
 
+function getDesktopNotificationsSettingsPath() {
+  return path.join(app.getPath('userData'), 'desktop-notifications-settings.json');
+}
+
 function getRunningEnvironmentUrls() {
   return cloud.getEnvironments()
     .filter((environment) => environment.status === 'running')
@@ -146,6 +152,7 @@ function getDesktopState() {
     activeTabId: tabs.activeTabId,
     environments: cloud.getEnvironments().map(serializeEnvironment),
     computerUse: computerAgent?.getState() || { enabled: false, consentMode: 'ask', running: false, connectedCount: 0, targetCount: 0 },
+    desktopNotifications: desktopNotifications?.getState() || { enabled: false, supported: false, connectedCount: 0, targetCount: 0 },
     computerUsePermissions: getComputerUsePermissions(),
   };
 }
@@ -364,6 +371,7 @@ async function refreshCloudEnvironments({ showErrors = false } = {}) {
   } finally {
     isRefreshingCloud = false;
     void computerAgent?.sync().catch((error) => console.error('[ComputerAgent] sync failed:', error?.message || error));
+    void desktopNotifications?.sync().catch((error) => console.error('[DesktopNotifications] sync failed:', error?.message || error));
     syncDesktopState();
   }
 }
@@ -718,8 +726,57 @@ async function openEnvironmentInDesktop(environment) {
   return getDesktopState();
 }
 
+function findEnvironmentByUrl(environmentUrl) {
+  const targetOrigin = (() => {
+    try {
+      return new URL(environmentUrl).origin;
+    } catch {
+      return null;
+    }
+  })();
+  if (!targetOrigin) return null;
+
+  return cloud.getEnvironments().find((environment) => {
+    try {
+      return new URL(cloud.getEnvironmentUrl(environment)).origin === targetOrigin;
+    } catch {
+      return false;
+    }
+  }) || null;
+}
+
+async function openNotificationTarget({ environmentUrl, sessionId = null }) {
+  const window = desktopWindow?.getMainWindow();
+  if (window) {
+    if (window.isMinimized()) window.restore();
+    window.show();
+    window.focus();
+  }
+
+  const environment = findEnvironmentByUrl(environmentUrl);
+  if (environment) {
+    await openEnvironmentInDesktop(environment);
+  } else {
+    const parsed = new URL(environmentUrl);
+    await desktopWindow.showTarget({
+      kind: 'remote',
+      name: parsed.hostname,
+      url: parsed.origin,
+    });
+  }
+
+  const targetUrl = new URL(sessionId ? `/session/${encodeURIComponent(sessionId)}` : '/', environmentUrl).toString();
+  await desktopWindow.navigateActiveView(targetUrl);
+  return getDesktopState();
+}
+
+async function getEnvironmentAuthToken(environmentUrl) {
+  return desktopWindow?.readAuthTokenForTarget(environmentUrl) || null;
+}
+
 async function clearCloudAccount() {
   await cloud.clearCloudAccount();
+  desktopNotifications?.stop();
   const removedTabs = tabs.removeByKind('remote');
   for (const tab of removedTabs) {
     desktopWindow?.destroyTabView(tab.id);
@@ -800,6 +857,10 @@ function registerIpcHandlers() {
     return getDesktopState();
   });
   ipcMain.handle('cloudcli-desktop:update-computer-use', async (_event, settings) => updateComputerUse(settings));
+  ipcMain.handle('cloudcli-desktop:update-desktop-notifications', async (_event, settings) => {
+    await desktopNotifications?.saveSettings(settings);
+    return getDesktopState();
+  });
   ipcMain.handle('cloudcli-desktop:request-computer-use-permission', async (_event, permission) => requestComputerUsePermission(permission));
   ipcMain.handle('cloudcli-desktop:show-desktop-settings', async () => desktopWindow.showDesktopSettings());
   ipcMain.handle('cloudcli-desktop:show-local-settings', async () => desktopWindow.showLocalSettings());
@@ -839,6 +900,7 @@ function registerAppEvents() {
 
   app.on('before-quit', () => {
     computerAgent?.stop();
+    desktopNotifications?.stop();
   });
 
   app.on('before-quit', (event) => {
@@ -896,6 +958,7 @@ async function createDesktopWindow() {
       stopEnvironment,
       updateDesktopSetting,
       copyLocalWebUrl,
+      openNotificationTarget,
     },
   });
 
@@ -963,10 +1026,24 @@ async function bootstrap() {
     promptConsent: promptComputerUseConsent,
     onChange: syncDesktopState,
   });
+  desktopNotifications = new DesktopNotificationsController({
+    settingsPath: getDesktopNotificationsSettingsPath(),
+    appVersion: app.getVersion(),
+    appName: APP_NAME,
+    getDeviceId: () => cloud.getAccount()?.deviceId || '',
+    getAccountEmail: () => cloud.getAccount()?.email || null,
+    getRunningEnvironmentUrls,
+    getApiKey: () => cloud.getAccount()?.apiKey || '',
+    getAuthToken: getEnvironmentAuthToken,
+    getIconPath: getWindowIconPath,
+    openNotificationTarget,
+    onChange: syncDesktopState,
+  });
 
   await localServer.loadDesktopSettings();
   await cloud.loadCloudAccount();
   await computerAgent.loadSettings();
+  await desktopNotifications.loadSettings();
 
   registerProtocolHandler();
   registerIpcHandlers();

electron/preload.cjs

@@ -1,5 +1,33 @@
 const { contextBridge, ipcRenderer } = require('electron');
 
+function isCloudCliAppOrigin(location) {
+  if (location.protocol === 'file:') return true;
+
+  if (location.protocol === 'http:') {
+    return location.hostname === '127.0.0.1' || location.hostname === 'localhost';
+  }
+
+  return location.protocol === 'https:' && (
+    location.hostname === 'cloudcli.ai' || location.hostname.endsWith('.cloudcli.ai')
+  );
+}
+
+function onDesktopStateUpdated(callback) {
+  const listener = (_event, state) => callback(state);
+  ipcRenderer.on('cloudcli-desktop:state-updated', listener);
+  return () => {
+    ipcRenderer.removeListener('cloudcli-desktop:state-updated', listener);
+  };
+}
+
+if (isCloudCliAppOrigin(window.location)) {
+  contextBridge.exposeInMainWorld('cloudcliDesktopNotifications', {
+    getState: () => ipcRenderer.invoke('cloudcli-desktop:get-state'),
+    update: (settings) => ipcRenderer.invoke('cloudcli-desktop:update-desktop-notifications', settings),
+    onStateUpdated: onDesktopStateUpdated,
+  });
+}
+
 if (window.location.protocol === 'file:') {
   contextBridge.exposeInMainWorld('cloudcliDesktop', {
     connectCloud: () => ipcRenderer.invoke('cloudcli-desktop:connect-cloud'),
@@ -27,9 +55,7 @@ if (window.location.protocol === 'file:') {
     switchTab: (tabId) => ipcRenderer.invoke('cloudcli-desktop:switch-tab', tabId),
     closeTab: (tabId) => ipcRenderer.invoke('cloudcli-desktop:close-tab', tabId),
     updateSetting: (key, value) => ipcRenderer.invoke('cloudcli-desktop:update-setting', key, value),
-    onStateUpdated: (callback) => {
-      ipcRenderer.on('cloudcli-desktop:state-updated', (_event, state) => callback(state));
-    },
+    onStateUpdated: onDesktopStateUpdated,
     onLauncherCommand: (callback) => {
       ipcRenderer.on('cloudcli-desktop:launcher-command', (_event, command) => callback(command));
     },

electron/viewHost.js

@@ -135,6 +135,38 @@ export class ViewHost {
     return true;
   }
 
+  async readLocalStorageValueForOrigin(originUrl, key) {
+    let targetOrigin;
+    try {
+      targetOrigin = new URL(originUrl).origin;
+    } catch {
+      return null;
+    }
+
+    for (const view of this.tabViews.values()) {
+      if (!view || view.webContents.isDestroyed()) continue;
+      let viewOrigin;
+      try {
+        viewOrigin = new URL(view.webContents.getURL()).origin;
+      } catch {
+        continue;
+      }
+      if (viewOrigin !== targetOrigin) continue;
+
+      try {
+        const value = await view.webContents.executeJavaScript(
+          `window.localStorage.getItem(${JSON.stringify(key)})`,
+          true
+        );
+        return typeof value === 'string' && value ? value : null;
+      } catch {
+        return null;
+      }
+    }
+
+    return null;
+  }
+
   getTabViewDiagnostics() {
     const mainWindow = this.getMainWindow();
     const attachedViews = new Set();
@@ -257,6 +289,15 @@ export class ViewHost {
     return true;
   }
 
+  async navigateActiveView(url) {
+    const view = this.getActiveView();
+    if (!view) return false;
+    await loadUrlWithTimeout(view.webContents, url);
+    view.__cloudcliLoadedUrl = url;
+    view.__cloudcliStartupHtml = null;
+    return true;
+  }
+
   destroyTabView(tabId) {
     const view = this.tabViews.get(tabId);
     if (!view) return;