@zhangferry-dev/tokendash 1.3.0 → 1.4.0

package/electron/main.js

@@ -0,0 +1,291 @@
+const { app, BrowserWindow, screen, shell } = require('electron');
+const path = require('node:path');
+const fs = require('node:fs');
+const http = require('node:http');
+const { spawn } = require('node:child_process');
+
+// Global debug logger (writes to file since stdout is lost in packaged apps)
+const DEBUG_LOG = '/tmp/tokendash-debug.log';
+try { fs.writeFileSync(DEBUG_LOG, 'main.js loaded\n'); } catch(_){}
+
+// Import from bundled server (created by esbuild)
+let createApp;
+try {
+  createApp = require('../dist/electron-server.cjs').createApp;
+} catch (e) {
+  console.error('Failed to load bundled server. Did you run the build?', e.message);
+  app.quit();
+}
+
+const { formatCost } = require('./trayBadge.js');
+
+// Resolve trayHelper binary: extract from asar if needed
+function resolveTrayHelperPath() {
+  const srcPath = path.join(__dirname, 'trayHelper');
+  const isAsar = srcPath.includes('.asar');
+  const debugLog = (msg) => {
+    const logPath = '/tmp/tokendash-debug.log';
+    fs.appendFileSync(logPath, msg + '\n');
+  };
+  debugLog('[trayHelper] __dirname: ' + __dirname);
+  debugLog('[trayHelper] srcPath: ' + srcPath + ' isAsar: ' + isAsar);
+  if (isAsar) {
+    const destDir = path.join(app.getPath('userData'), 'helpers');
+    const destPath = path.join(destDir, 'trayHelper');
+    debugLog('[trayHelper] extracting to: ' + destPath);
+    if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
+    fs.copyFileSync(srcPath, destPath);
+    fs.chmodSync(destPath, 0o755);
+    debugLog('[trayHelper] extracted OK');
+    return destPath;
+  }
+  return srcPath;
+}
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+
+let popover = null;
+let server = null;
+let trayProcess = null;
+const serverPort = parseInt(process.env.TOKENDASH_PORT || '3456', 10);
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function listenWithFallback(expressApp, port) {
+  return new Promise((resolve, reject) => {
+    let currentPort = port;
+    let attempts = 0;
+
+    function tryListen() {
+      const s = expressApp.listen(currentPort);
+      s.once('listening', () => resolve({ server: s, port: currentPort }));
+      s.once('error', (err) => {
+        if (err.code === 'EADDRINUSE' && attempts < 20) {
+          attempts++;
+          currentPort++;
+          tryListen();
+        } else {
+          reject(err);
+        }
+      });
+    }
+
+    tryListen();
+  });
+}
+
+function fetchJson(url) {
+  return new Promise((resolve, reject) => {
+    http.get(url, (res) => {
+      let data = '';
+      res.on('data', (chunk) => { data += chunk; });
+      res.on('end', () => {
+        try { resolve(JSON.parse(data)); }
+        catch (e) { reject(e); }
+      });
+    }).on('error', reject);
+  });
+}
+
+function positionPopoverBelowTray() {
+  if (!trayProcess || !popover) return;
+
+  // Use primary screen top-right area for positioning
+  const primaryDisplay = screen.getPrimaryDisplay();
+  const { width: screenW } = primaryDisplay.workArea;
+  const popoverWidth = 340;
+  const popoverHeight = 460;
+
+  // Position in top-right area, below menu bar
+  const x = screenW - popoverWidth - 16;
+  const y = 32; // below menu bar
+
+  popover.setPosition(Math.round(x), Math.round(y), false);
+}
+
+function togglePopover() {
+  if (!popover) return;
+
+  if (popover.isVisible()) {
+    popover.hide();
+  } else {
+    positionPopoverBelowTray();
+    popover.show();
+    popover.focus();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Native tray helper (Swift binary for macOS 26+ compatibility)
+// ---------------------------------------------------------------------------
+
+function startTrayHelper() {
+  const helperPath = resolveTrayHelperPath();
+  trayProcess = spawn(helperPath, [], {
+    stdio: ['pipe', 'pipe', 'inherit'],
+  });
+
+  let buffer = '';
+
+  trayProcess.stdout.on('data', (data) => {
+    buffer += data.toString();
+    const lines = buffer.split('\n');
+    buffer = lines.pop(); // keep incomplete line in buffer
+
+    for (const line of lines) {
+      const event = line.trim();
+      if (event === 'click') {
+        togglePopover();
+      } else if (event === 'open-dashboard') {
+        const port = serverPort;
+        shell.openExternal(`http://localhost:${port}`);
+      } else if (event === 'quit-request') {
+        app.quit();
+      } else if (event === 'ready') {
+        // Helper is ready, start badge updates
+        startBadgeUpdates();
+      }
+    }
+  });
+
+  trayProcess.on('close', (code) => {
+    console.log('Tray helper exited with code', code);
+    trayProcess = null;
+  });
+
+  trayProcess.on('error', (err) => {
+    console.error('Failed to start tray helper:', err.message);
+    trayProcess = null;
+  });
+}
+
+function sendTrayCommand(command) {
+  if (trayProcess && trayProcess.stdin && !trayProcess.stdin.destroyed) {
+    trayProcess.stdin.write(command + '\n');
+  }
+}
+
+function stopTrayHelper() {
+  if (trayProcess) {
+    sendTrayCommand('quit');
+    trayProcess = null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Tray badge updater
+// ---------------------------------------------------------------------------
+
+let updateTimer = null;
+
+function updateTrayBadge() {
+  fetchJson(`http://localhost:${serverPort}/api/daily`)
+    .then((data) => {
+      if (!data || !data.totals) return;
+      const cost = data.totals.totalCost || 0;
+      const tokens = data.totals.totalTokens || 0;
+
+      const badgeText = formatCost(cost);
+      sendTrayCommand('title:' + badgeText);
+
+      const tokenStr = tokens >= 1e6
+        ? (tokens / 1e6).toFixed(1) + 'M'
+        : tokens >= 1e3
+          ? (tokens / 1e3).toFixed(1) + 'K'
+          : String(tokens);
+      sendTrayCommand('tooltip:TokenDash - $' + cost.toFixed(2) + ' today - ' + tokenStr + ' tokens');
+    })
+    .catch((err) => {
+      if (err.code !== 'ECONNREFUSED') {
+        console.error('Tray badge update error:', err.message);
+      }
+    });
+}
+
+function startBadgeUpdates() {
+  updateTrayBadge();
+  updateTimer = setInterval(updateTrayBadge, 30000);
+}
+
+function stopBadgeUpdates() {
+  if (updateTimer) {
+    clearInterval(updateTimer);
+    updateTimer = null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Create popover window
+// ---------------------------------------------------------------------------
+
+function createPopoverWindow() {
+  popover = new BrowserWindow({
+    width: 340,
+    height: 460,
+    frame: false,
+    resizable: false,
+    hasShadow: true,
+    alwaysOnTop: true,
+    skipTaskbar: true,
+    show: false,
+    fullscreenable: false,
+    transparent: false,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  });
+
+  popover.loadURL(`http://localhost:${serverPort}/popover.html`);
+
+  popover.on('blur', () => {
+    popover.hide();
+  });
+
+  popover.on('close', (e) => {
+    if (!app.isQuitting) {
+      e.preventDefault();
+      popover.hide();
+    }
+  });
+}
+
+// ---------------------------------------------------------------------------
+// App lifecycle
+// ---------------------------------------------------------------------------
+
+app.whenReady().then(async () => {
+  app.on('before-quit', () => {
+    app.isQuitting = true;
+    stopBadgeUpdates();
+    stopTrayHelper();
+    if (server) server.close();
+  });
+
+  // Create and bind Express server
+  const expressApp = createApp(serverPort);
+  try {
+    const result = await listenWithFallback(expressApp, serverPort);
+    server = result.server;
+    console.log(`tokendash running on http://localhost:${result.port}`);
+  } catch (err) {
+    console.error('Failed to start server:', err);
+    app.quit();
+    return;
+  }
+
+  // Start native tray helper
+  startTrayHelper();
+
+  // Create popover
+  createPopoverWindow();
+});
+
+process.on('uncaughtException', (err) => {
+  console.error('Fatal error in Electron main:', err);
+  app.quit();
+});

package/electron/preload.cjs

@@ -0,0 +1,22 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openDashboard(url) {
+    return ipcRenderer.invoke('tokendash:open-dashboard', url);
+  },
+  getAppInfo() {
+    return ipcRenderer.invoke('tokendash:get-app-info');
+  },
+  setLaunchAtLogin(enabled) {
+    return ipcRenderer.invoke('tokendash:set-launch-at-login', enabled);
+  },
+  checkForUpdates() {
+    return ipcRenderer.invoke('tokendash:check-for-updates');
+  },
+  quitApp() {
+    return ipcRenderer.invoke('tokendash:quit');
+  },
+  setSelectedAgents(agents) {
+    return ipcRenderer.invoke('tokendash:set-selected-agents', agents);
+  },
+});

package/electron/trayBadge.cjs

@@ -0,0 +1,25 @@
+// electron/trayBadge.cjs
+
+/**
+ * Format token count as compact string for tray badge.
+ * Examples: 1234 -> "1.2K", 567890 -> "567.9K", 1500000 -> "1.5M"
+ */
+function formatTokens(tokens) {
+  if (tokens >= 1e6) return (tokens / 1e6).toFixed(1) + 'M';
+  if (tokens >= 1e3) return (tokens / 1e3).toFixed(1) + 'K';
+  if (tokens > 0) return String(tokens);
+  return '0.0M';
+}
+
+/**
+ * Format cost as compact string for tray badge (max 5 chars).
+ * Examples: 1.234 -> "$1.2", 12.5 -> "$12", 0.05 -> "$0.1", 123.4 -> "$123"
+ */
+function formatCost(cost) {
+  if (cost < 0.05) return '$0';
+  if (cost < 10) return '$' + cost.toFixed(1);
+  if (cost < 100) return '$' + Math.round(cost);
+  return '$' + Math.round(cost);
+}
+
+module.exports = { formatCost, formatTokens };

package/electron/trayBadge.js

@@ -0,0 +1,30 @@
+// electron/trayBadge.js
+const { nativeImage } = require('electron');
+
+/**
+ * Format cost as compact string for tray badge (max 5 chars).
+ * Examples: 1.234 -> "$1.2", 12.5 -> "$12", 0.05 -> "$0.1", 123.4 -> "$123"
+ */
+function formatCost(cost) {
+  if (cost < 0.05) return '$0';
+  if (cost < 10) return '$' + cost.toFixed(1);
+  if (cost < 100) return '$' + Math.round(cost);
+  return '$' + Math.round(cost);
+}
+
+// Embedded 22x22 PNG: white circle on transparent background
+// Used as a template image — macOS auto-adapts to menu bar appearance
+const TRAY_PNG_BASE64 =
+  'iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAWElEQVR4nO2U2QkAMAjFnNatOqsFP+2BJxRpBgjh0QrQCiIadGZ4hHgRSjCj0ldvLNWXB6RM5gSSdZIEKfPFzcQ1zy2jeiuFyi8dmER3QkvOpqHefuifZgKh/EKNb7YAbgAAAABJRU5ErkJggg==';
+
+/**
+ * Create a macOS tray icon template.
+ * setTemplate(true) lets macOS automatically invert colors for light/dark menu bars.
+ */
+function createBadgeIcon(_text) {
+  const img = nativeImage.createFromDataURL(`data:image/png;base64,${TRAY_PNG_BASE64}`);
+  img.setTemplateImage(true);
+  return img;
+}
+
+module.exports = { createBadgeIcon, formatCost };

package/electron/trayHelper.swift

@@ -0,0 +1,130 @@
+import Cocoa
+
+// TokenDash Native Tray Helper for macOS 26+
+// Communicates with Electron main process via stdin/stdout
+// Protocol:
+//   stdin commands:  "title:<text>\n"  "tooltip:<text>\n"  "quit\n"
+//   stdout events:   "click:<screenX>,<screenY>\n"
+
+class AppDelegate: NSObject, NSApplicationDelegate {
+    var statusItem: NSStatusItem!
+    var readHandle: FileHandle?
+
+    func applicationDidFinishLaunching(_ notification: Notification) {
+        // Create status bar item
+        statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
+
+        // Add a small template icon (filled circle) before the title
+        let icon = createTemplateIcon(size: NSSize(width: 18, height: 18))
+        statusItem.button?.image = icon
+        statusItem.button?.imagePosition = .imageLeft
+        statusItem.button?.imageScaling = .scaleProportionallyDown
+
+        statusItem.button?.title = "0.0M"
+        statusItem.button?.toolTip = "TokenDash"
+
+        // Set up click actions — both left and right click
+        statusItem.button?.target = self
+        statusItem.button?.action = #selector(handleClick(_:))
+        statusItem.button?.sendAction(on: [.leftMouseUp, .rightMouseUp])
+
+        // Read commands from stdin
+        readHandle = FileHandle.standardInput
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(handleStdin),
+            name: .NSFileHandleDataAvailable,
+            object: readHandle
+        )
+        readHandle?.waitForDataInBackgroundAndNotify()
+
+        // Signal ready
+        sendEvent("ready")
+    }
+
+    @objc func handleClick(_ sender: Any?) {
+        guard let _ = NSApp.currentEvent else { return }
+        // Send click with screen coordinates so Electron can position the popover
+        let loc = NSEvent.mouseLocation
+        sendEvent("click:\(Int(loc.x)),\(Int(loc.y))")
+    }
+
+    @objc func handleStdin() {
+        guard let data = readHandle?.availableData, data.count > 0 else {
+            readHandle?.waitForDataInBackgroundAndNotify()
+            return
+        }
+
+        if let line = String(data: data, encoding: .utf8) {
+            for command in line.split(separator: "\n") {
+                let cmd = command.trimmingCharacters(in: .whitespacesAndNewlines)
+                if cmd.hasPrefix("title:") {
+                    let title = String(cmd.dropFirst(6))
+                    statusItem.button?.title = title
+                } else if cmd.hasPrefix("tooltip:") {
+                    let tooltip = String(cmd.dropFirst(8))
+                    statusItem.button?.toolTip = tooltip
+                } else if cmd == "quit" {
+                    NSApp.terminate(nil)
+                    return
+                }
+            }
+        }
+
+        readHandle?.waitForDataInBackgroundAndNotify()
+    }
+
+    func sendEvent(_ event: String) {
+        print(event)
+        fflush(stdout)
+    }
+
+    func createTemplateIcon(size: NSSize) -> NSImage {
+        let image = NSImage(size: size)
+        image.lockFocus()
+
+        // Draw the TokenDash wavy line icon (from SVG, 64x64 viewBox scaled to size)
+        // SVG coords use top-left origin; AppKit uses bottom-left, so flip Y: y = (64 - svgY)
+        let sx = size.width / 64.0
+        let sy = size.height / 64.0
+
+        let path = NSBezierPath()
+        // M6,32 H18
+        path.move(to: NSPoint(x: 6 * sx, y: (64 - 32) * sy))
+        path.line(to: NSPoint(x: 18 * sx, y: (64 - 32) * sy))
+        // C21,32 22.5,34 24.5,39
+        path.curve(to: NSPoint(x: 24.5 * sx, y: (64 - 39) * sy),
+                   controlPoint1: NSPoint(x: 21 * sx, y: (64 - 32) * sy),
+                   controlPoint2: NSPoint(x: 22.5 * sx, y: (64 - 34) * sy))
+        // C27,45.5 30,50 34,50
+        path.curve(to: NSPoint(x: 34 * sx, y: (64 - 50) * sy),
+                   controlPoint1: NSPoint(x: 27 * sx, y: (64 - 45.5) * sy),
+                   controlPoint2: NSPoint(x: 30 * sx, y: (64 - 50) * sy))
+        // C38,50 40.5,42 44,22
+        path.curve(to: NSPoint(x: 44 * sx, y: (64 - 22) * sy),
+                   controlPoint1: NSPoint(x: 38 * sx, y: (64 - 50) * sy),
+                   controlPoint2: NSPoint(x: 40.5 * sx, y: (64 - 42) * sy))
+        // C46,11 49,8 52,8
+        path.curve(to: NSPoint(x: 52 * sx, y: (64 - 8) * sy),
+                   controlPoint1: NSPoint(x: 46 * sx, y: (64 - 11) * sy),
+                   controlPoint2: NSPoint(x: 49 * sx, y: (64 - 8) * sy))
+        // C55,8 57.5,13 60,22
+        path.curve(to: NSPoint(x: 60 * sx, y: (64 - 22) * sy),
+                   controlPoint1: NSPoint(x: 55 * sx, y: (64 - 8) * sy),
+                   controlPoint2: NSPoint(x: 57.5 * sx, y: (64 - 13) * sy))
+
+        path.lineWidth = 5 * sx
+        path.lineCapStyle = .round
+        path.lineJoinStyle = .round
+        NSColor.black.setStroke()
+        path.stroke()
+
+        image.unlockFocus()
+        image.isTemplate = true
+        return image
+    }
+}
+
+let delegate = AppDelegate()
+NSApplication.shared.delegate = delegate
+NSApp.run()

package/electron-builder.yml

@@ -0,0 +1,17 @@
+appId: com.zhangferry-dev.tokendash
+productName: TokenDash
+directories:
+  output: release
+files:
+  - dist/**/*
+  - bin/**/*
+  - electron/**/*
+  - package.json
+mac:
+  target: dmg
+  category: public.app-category.developer-tools
+  icon: resources/icon.png
+  identity: null
+  darkModeSupport: true
+extraMetadata:
+  main: electron/main.cjs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangferry-dev/tokendash",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "description": "Token Usage Analytics Dashboard",
   "publishConfig": {
@@ -13,20 +13,26 @@
   },
   "files": [
     "dist",
-    "bin"
+    "bin",
+    "electron",
+    "resources",
+    "electron-builder.yml"
   ],
   "scripts": {
     "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
     "dev:server": "tsx watch src/server/index.ts",
     "dev:client": "vite",
-    "build": "vite build && tsc -p tsconfig.json",
+    "build": "vite build && tsc -p tsconfig.json && cp public/popover.html dist/client/popover.html && node esbuild.config.mjs",
+    "dev:electron": "ELECTRON_DEV=1 electron .",
+    "build:electron": "electron-builder --mac",
+    "build:all": "npm run build && npm run build:electron",
     "start": "node dist/server/index.js",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.frontend.json --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "playwright test",
     "prepack": "npm run build",
-    "publish": "npm publish --access public --registry https://registry.npmjs.org"
+    "release": "npm publish --access public --registry https://registry.npmjs.org"
   },
   "dependencies": {
     "express": "^5.1.0",
@@ -45,6 +51,9 @@
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
     "concurrently": "^9.1.2",
+    "electron": "^41.5.0",
+    "electron-builder": "^26.0.0",
+    "esbuild": "^0.25.0",
     "tailwindcss": "^4.1.4",
     "tsx": "^4.19.3",
     "typescript": "^5.8.3",