claude-code-popup 0.1.0

package/electron/main.js

@@ -0,0 +1,452 @@
+'use strict';
+
+const path = require('node:path');
+const fs = require('node:fs');
+const os = require('node:os');
+const { app, BrowserWindow, ipcMain, screen, nativeTheme, shell } = require('electron');
+
+const ipc = require('../src/ipc');
+const runtime = require('../src/runtime');
+const cfg = require('../src/config');
+const i18n = require('../src/i18n');
+const { installHooks, uninstallHooks } = require('../src/hooks');
+
+const MODE = process.env.CLAUDE_NOTIFY_MODE || 'notify';
+
+const NOTIFY_WIDTH = 400;
+const NOTIFY_MARGIN = 16;
+
+let notifyWindow = null;
+let setupWindow = null;
+let ipcServer = null;
+const sessions = new Set(); // tracks active Claude Code session dirs
+const sessionPpid = new Map(); // dir -> parent pid of the CLI invocation (fallback)
+const sessionHwnd = new Map(); // dir -> HWND captured at SessionStart (primary)
+const cards = new Map(); // id -> { id, dir, addedAt, ppid }
+let cardSeq = 0;
+
+app.commandLine.appendSwitch('disable-features', 'DialMediaRouteProvider');
+
+if (process.platform === 'darwin') {
+  app.dock?.hide();
+}
+
+app.whenReady().then(async () => {
+  if (MODE === 'setup') {
+    await openSetupWindow();
+    return;
+  }
+  await startNotifyMode();
+});
+
+app.on('window-all-closed', (e) => {
+  // Keep alive even with no windows open in notify mode (server still listens)
+  if (MODE === 'notify') {
+    e.preventDefault?.();
+  } else {
+    app.quit();
+  }
+});
+
+app.on('before-quit', () => {
+  try {
+    ipcServer?.close();
+  } catch {
+    /* ignore */
+  }
+  runtime.clearRuntime();
+});
+
+/* -------------------------------------------------------------------------- */
+/* Notify mode                                                                */
+/* -------------------------------------------------------------------------- */
+
+async function startNotifyMode() {
+  ipcServer = ipc.createServer(handleIpcMessage);
+  const port = await ipc.listen(ipcServer);
+  runtime.writeRuntime({ pid: process.pid, port, startedAt: Date.now() });
+  // pre-create the window hidden
+  ensureNotifyWindow();
+}
+
+function activeDisplay() {
+  // Multi-monitor: prefer the display the cursor is on (likely where the user is working).
+  try {
+    const point = screen.getCursorScreenPoint();
+    return screen.getDisplayNearestPoint(point);
+  } catch {
+    return screen.getPrimaryDisplay();
+  }
+}
+
+function ensureNotifyWindow() {
+  if (notifyWindow && !notifyWindow.isDestroyed()) return notifyWindow;
+  const config = cfg.readConfig();
+  const { workArea } = activeDisplay();
+  const winHeight = 200;
+  const { x, y } = positionFor(config.position, workArea, NOTIFY_WIDTH, winHeight);
+
+  notifyWindow = new BrowserWindow({
+    width: NOTIFY_WIDTH,
+    height: winHeight,
+    x,
+    y,
+    frame: false,
+    transparent: true,
+    resizable: false,
+    movable: false,
+    minimizable: false,
+    maximizable: false,
+    skipTaskbar: true,
+    alwaysOnTop: true,
+    show: false,
+    focusable: false,
+    hasShadow: false,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      sandbox: true,
+    },
+  });
+  notifyWindow.setAlwaysOnTop(true, 'screen-saver');
+  notifyWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+  notifyWindow.loadFile(path.join(__dirname, 'notify.html'));
+  // Re-broadcast once the renderer has finished loading — covers the race where
+  // the very first `send` arrives before notify.js has registered onState.
+  notifyWindow.webContents.once('did-finish-load', () => {
+    broadcastState();
+  });
+  notifyWindow.on('closed', () => {
+    notifyWindow = null;
+  });
+  return notifyWindow;
+}
+
+function positionFor(position, workArea, w, h) {
+  const top = workArea.y + NOTIFY_MARGIN;
+  const left = workArea.x + NOTIFY_MARGIN;
+  const right = workArea.x + workArea.width - w - NOTIFY_MARGIN;
+  const bottom = workArea.y + workArea.height - h - NOTIFY_MARGIN;
+  switch (position) {
+    case 'top-left':
+      return { x: left, y: top };
+    case 'top-right':
+      return { x: right, y: top };
+    case 'bottom-left':
+      return { x: left, y: bottom };
+    case 'bottom-right':
+    default:
+      return { x: right, y: bottom };
+  }
+}
+
+function applyWindowGeometry(measuredHeight) {
+  if (!notifyWindow || notifyWindow.isDestroyed()) return;
+  const config = cfg.readConfig();
+  const { workArea } = activeDisplay();
+  const h = Math.max(80, Math.min(measuredHeight, Math.floor(workArea.height * 0.8)));
+  const { x, y } = positionFor(config.position, workArea, NOTIFY_WIDTH, h);
+  notifyWindow.setBounds({ x, y, width: NOTIFY_WIDTH, height: h });
+}
+
+function broadcastState() {
+  ensureNotifyWindow();
+  const config = cfg.readConfig();
+  const cardList = Array.from(cards.values()).sort((a, b) => a.addedAt - b.addedAt);
+  notifyWindow.webContents.send('state', { config, cards: cardList });
+  if (cardList.length > 0) {
+    if (!notifyWindow.isVisible()) notifyWindow.showInactive();
+  } else {
+    if (notifyWindow.isVisible()) notifyWindow.hide();
+  }
+}
+
+function quitSoon() {
+  setTimeout(() => app.quit(), 200);
+}
+
+async function handleIpcMessage(msg) {
+  switch (msg?.type) {
+    case 'start': {
+      const dir = msg.dir || '';
+      if (dir) {
+        sessions.add(dir);
+        if (msg.ppid) sessionPpid.set(dir, Number(msg.ppid));
+        // SessionStart fires while the user is still focused on the terminal,
+        // so the captured hwnd reliably points at the right window.
+        if (msg.hwnd) sessionHwnd.set(dir, Number(msg.hwnd));
+      }
+      ensureNotifyWindow();
+      return { running: true };
+    }
+    case 'send': {
+      const dir = msg.dir || '';
+      sessions.add(dir);
+      const ppid = msg.ppid ? Number(msg.ppid) : sessionPpid.get(dir) || null;
+      if (ppid) sessionPpid.set(dir, ppid);
+      // Only adopt the foreground from `send` if `start` never seeded one —
+      // by the time a Notification hook fires the user is typically away.
+      if (msg.hwnd && !sessionHwnd.has(dir)) sessionHwnd.set(dir, Number(msg.hwnd));
+      const id = nextCardId(dir);
+      cards.set(id, { id, dir, addedAt: Date.now(), ppid });
+      broadcastState();
+      maybeNotifySound();
+      return { id };
+    }
+    case 'end': {
+      const dir = msg.dir || '';
+      sessions.delete(dir);
+      sessionPpid.delete(dir);
+      sessionHwnd.delete(dir);
+      for (const [id, card] of cards) {
+        if (card.dir === dir) cards.delete(id);
+      }
+      broadcastState();
+      // Claude Code session ended — if it was the last one, terminate Electron
+      if (sessions.size === 0) {
+        cards.clear();
+        broadcastState();
+        quitSoon();
+      }
+      return { removed: true };
+    }
+    case 'dismiss': {
+      if (msg.id && cards.has(msg.id)) cards.delete(msg.id);
+      broadcastState();
+      return { removed: true };
+    }
+    case 'clearAll': {
+      cards.clear();
+      broadcastState();
+      return { cleared: true };
+    }
+    case 'getConfig':
+      return cfg.readConfig();
+    case 'saveConfig': {
+      const merged = cfg.writeConfig(msg.config || {});
+      broadcastState();
+      return merged;
+    }
+    case 'installHooks':
+      return { path: installHooks() };
+    case 'uninstallHooks':
+      return { path: uninstallHooks() };
+    case 'openSetup':
+      await openSetupWindow();
+      return { opened: true };
+    default:
+      throw new Error(`unknown_message_type: ${msg?.type}`);
+  }
+}
+
+function nextCardId(dir) {
+  cardSeq += 1;
+  return `${Buffer.from(dir).toString('base64url')}-${Date.now()}-${cardSeq}`;
+}
+
+function maybeNotifySound() {
+  const config = cfg.readConfig();
+  if (!config.sound) return;
+  if (process.platform === 'win32') {
+    spawnDetached('powershell.exe', [
+      '-NoProfile',
+      '-NonInteractive',
+      '-Command',
+      '[System.Media.SystemSounds]::Notification.Play()',
+    ]);
+  } else if (process.platform === 'darwin') {
+    spawnDetached('afplay', ['/System/Library/Sounds/Glass.aiff']);
+  } else {
+    spawnDetached('paplay', ['/usr/share/sounds/freedesktop/stereo/message.oga']);
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Setup mode                                                                 */
+/* -------------------------------------------------------------------------- */
+
+async function openSetupWindow() {
+  if (setupWindow && !setupWindow.isDestroyed()) {
+    setupWindow.show();
+    setupWindow.focus();
+    return;
+  }
+  const width = 720;
+  const height = 720;
+  const { workArea } = activeDisplay();
+  const x = Math.round(workArea.x + (workArea.width - width) / 2);
+  const y = Math.round(workArea.y + (workArea.height - height) / 2);
+
+  setupWindow = new BrowserWindow({
+    width,
+    height,
+    x,
+    y,
+    title: 'claude-code-popup Settings',
+    resizable: true,
+    minimizable: true,
+    maximizable: false,
+    autoHideMenuBar: true,
+    show: false,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      sandbox: true,
+    },
+  });
+  setupWindow.once('ready-to-show', () => {
+    setupWindow.show();
+    setupWindow.focus();
+    setupWindow.moveTop();
+  });
+  setupWindow.on('closed', () => {
+    setupWindow = null;
+    if (MODE === 'setup' && sessions.size === 0 && cards.size === 0) {
+      app.quit();
+    }
+  });
+  await setupWindow.loadFile(path.join(__dirname, 'setup.html'));
+}
+
+/* -------------------------------------------------------------------------- */
+/* Renderer-facing IPC (preload)                                              */
+/* -------------------------------------------------------------------------- */
+
+ipcMain.handle('cn:getConfig', () => cfg.readConfig());
+ipcMain.handle('cn:saveConfig', (_e, next) => {
+  const merged = cfg.writeConfig(next || {});
+  broadcastState();
+  return merged;
+});
+ipcMain.handle('cn:installHooks', () => ({ path: installHooks() }));
+ipcMain.handle('cn:uninstallHooks', () => ({ path: uninstallHooks() }));
+ipcMain.handle('cn:platform', () => ({
+  platform: process.platform,
+  themeShouldBeDark: nativeTheme.shouldUseDarkColors,
+}));
+ipcMain.handle('cn:i18n', () => i18n.getDict(app.getLocale()));
+ipcMain.handle('cn:openExternal', (_e, url) => shell.openExternal(url));
+ipcMain.handle('cn:dismiss', (_e, id) => handleIpcMessage({ type: 'dismiss', id }));
+ipcMain.handle('cn:clearAll', () => handleIpcMessage({ type: 'clearAll' }));
+ipcMain.handle('cn:openSetup', () => openSetupWindow());
+ipcMain.handle('cn:resize', (_e, height) => applyWindowGeometry(Number(height) || 0));
+ipcMain.handle('cn:openTerminal', (_e, dir) => openTerminalAt(dir));
+ipcMain.handle('cn:focusOrigin', (_e, dir) => {
+  const hwnd = sessionHwnd.get(dir);
+  const ppid = sessionPpid.get(dir);
+  if (hwnd) focusHwnd(hwnd);
+  else if (ppid) focusProcessTree(ppid);
+});
+
+function openTerminalAt(dir) {
+  if (!dir) return;
+  if (process.platform === 'win32') {
+    spawnDetached('cmd', ['/c', 'start', '', 'cmd', '/k', `cd /d "${dir}"`]);
+  } else if (process.platform === 'darwin') {
+    spawnDetached('open', ['-a', 'Terminal', dir]);
+  } else {
+    spawnDetached('x-terminal-emulator', [], { cwd: dir });
+  }
+}
+
+function spawnDetached(cmd, args, opts = {}) {
+  const { spawn } = require('node:child_process');
+  try {
+    const child = spawn(cmd, args, { detached: true, stdio: 'ignore', ...opts });
+    child.unref();
+  } catch {
+    /* ignore */
+  }
+}
+
+function focusHwnd(hwnd) {
+  if (!hwnd || process.platform !== 'win32') return;
+  const script = `
+$ErrorActionPreference = 'SilentlyContinue'
+Add-Type -MemberDefinition '
+[DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr hWnd);
+[DllImport("user32.dll")] public static extern bool ShowWindow(IntPtr hWnd, int nCmdShow);
+[DllImport("user32.dll")] public static extern bool IsIconic(IntPtr hWnd);
+[DllImport("user32.dll")] public static extern bool IsWindow(IntPtr hWnd);
+[DllImport("user32.dll")] public static extern IntPtr GetForegroundWindow();
+[DllImport("user32.dll")] public static extern uint GetWindowThreadProcessId(IntPtr hWnd, out uint procId);
+[DllImport("kernel32.dll")] public static extern uint GetCurrentThreadId();
+[DllImport("user32.dll")] public static extern bool AttachThreadInput(uint idAttach, uint idAttachTo, bool fAttach);
+' -Name CN -Namespace Win
+$hwnd = [IntPtr]${Number(hwnd)}
+if (-not [Win.CN]::IsWindow($hwnd)) { exit 0 }
+if ([Win.CN]::IsIconic($hwnd)) { [Win.CN]::ShowWindow($hwnd, 9) | Out-Null }
+$foreHwnd = [Win.CN]::GetForegroundWindow()
+$foreThread = 0
+$null = [Win.CN]::GetWindowThreadProcessId($foreHwnd, [ref]$foreThread)
+$myThread = [Win.CN]::GetCurrentThreadId()
+[Win.CN]::AttachThreadInput($myThread, $foreThread, $true) | Out-Null
+[Win.CN]::SetForegroundWindow($hwnd) | Out-Null
+[Win.CN]::AttachThreadInput($myThread, $foreThread, $false) | Out-Null
+`;
+  runPowerShell(script);
+}
+
+function focusProcessTree(startPid) {
+  if (!startPid) return;
+  if (process.platform === 'win32') {
+    const script = `
+$ErrorActionPreference = 'SilentlyContinue'
+Add-Type -MemberDefinition '
+[DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr hWnd);
+[DllImport("user32.dll")] public static extern bool ShowWindow(IntPtr hWnd, int nCmdShow);
+[DllImport("user32.dll")] public static extern bool IsIconic(IntPtr hWnd);
+[DllImport("user32.dll")] public static extern IntPtr GetForegroundWindow();
+[DllImport("user32.dll")] public static extern uint GetWindowThreadProcessId(IntPtr hWnd, out uint procId);
+[DllImport("kernel32.dll")] public static extern uint GetCurrentThreadId();
+[DllImport("user32.dll")] public static extern bool AttachThreadInput(uint idAttach, uint idAttachTo, bool fAttach);
+' -Name CN -Namespace Win
+$targetPid = ${Number(startPid)}
+$hwnd = [IntPtr]::Zero
+for ($i = 0; $i -lt 12; $i++) {
+  $proc = Get-CimInstance Win32_Process -Filter ("ProcessId = " + $targetPid)
+  if (-not $proc) { break }
+  $p = Get-Process -Id $targetPid -ErrorAction SilentlyContinue
+  if ($p -and $p.MainWindowHandle -ne [IntPtr]::Zero) { $hwnd = $p.MainWindowHandle; break }
+  $targetPid = [int]$proc.ParentProcessId
+  if ($targetPid -le 0) { break }
+}
+if ($hwnd -ne [IntPtr]::Zero) {
+  if ([Win.CN]::IsIconic($hwnd)) { [Win.CN]::ShowWindow($hwnd, 9) | Out-Null }
+  $foreHwnd = [Win.CN]::GetForegroundWindow()
+  $foreThread = 0
+  $null = [Win.CN]::GetWindowThreadProcessId($foreHwnd, [ref]$foreThread)
+  $myThread = [Win.CN]::GetCurrentThreadId()
+  [Win.CN]::AttachThreadInput($myThread, $foreThread, $true) | Out-Null
+  [Win.CN]::SetForegroundWindow($hwnd) | Out-Null
+  [Win.CN]::AttachThreadInput($myThread, $foreThread, $false) | Out-Null
+}
+`;
+    runPowerShell(script);
+  } else if (process.platform === 'darwin') {
+    // best effort: ask the system to activate the frontmost terminal app
+    spawnDetached('osascript', ['-e', 'tell application "Terminal" to activate']);
+  } else {
+    spawnDetached('wmctrl', ['-a', `:ACTIVE:`]);
+  }
+}
+
+function runPowerShell(script) {
+  const { spawn } = require('node:child_process');
+  try {
+    const scriptPath = path.join(os.tmpdir(), `claude-code-popup-focus-${process.pid}-${Date.now()}.ps1`);
+    fs.writeFileSync(scriptPath, '' + script, 'utf8');
+    const child = spawn(
+      'powershell.exe',
+      ['-NoProfile', '-ExecutionPolicy', 'Bypass', '-File', scriptPath],
+      { windowsHide: true },
+    );
+    child.stdout?.on('data', () => {});
+    child.stderr?.on('data', () => {});
+    child.on('exit', () => {
+      setTimeout(() => { try { fs.unlinkSync(scriptPath); } catch { /* ignore */ } }, 200);
+    });
+  } catch {
+    /* ignore */
+  }
+}

package/electron/notify.css

@@ -0,0 +1,221 @@
+:root {
+  --cn-radius: 12px;
+  --cn-card-radius: 10px;
+  --cn-shadow: 0 12px 32px rgba(15, 17, 21, 0.18), 0 2px 6px rgba(15, 17, 21, 0.08);
+  --cn-anim: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
+    "Noto Sans JP", Roboto, Helvetica, Arial, sans-serif;
+  color: #1a1d21;
+  -webkit-user-select: none;
+}
+
+.cn-shell {
+  border-radius: var(--cn-radius);
+  overflow: hidden;
+  background: #ffffff;
+  box-shadow: var(--cn-shadow);
+  display: flex;
+  flex-direction: column;
+}
+
+.cn-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  background: #f5f6f8;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.cn-header__icon { font-size: 14px; }
+.cn-header__title { flex: 1; }
+.cn-header__count {
+  font-size: 11px;
+  font-weight: 600;
+  color: #606770;
+  background: rgba(0, 0, 0, 0.06);
+  padding: 1px 8px;
+  border-radius: 999px;
+}
+.cn-header__btn {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.65;
+}
+.cn-header__btn:hover { background: rgba(0,0,0,0.08); opacity: 1; }
+body[data-design="2"] .cn-header__btn:hover,
+body[data-design="5"] .cn-header__btn:hover { background: rgba(255,255,255,0.10); }
+.cn-card {
+  cursor: pointer;
+}
+
+.cn-cards {
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.cn-cards::-webkit-scrollbar { width: 6px; }
+.cn-cards::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
+
+.cn-card {
+  position: relative;
+  background: #ffffff;
+  border-radius: var(--cn-card-radius);
+  padding: 14px 40px 14px 14px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
+  animation: cn-fade-in var(--cn-anim);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.cn-card--leaving {
+  animation: cn-fade-out 180ms forwards;
+}
+.cn-card__dir {
+  font-size: 11px;
+  font-weight: 500;
+  color: #606770;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cn-card__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1d21;
+}
+.cn-card__body {
+  font-size: 12px;
+  color: #2c2f33;
+}
+.cn-card__close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.06);
+  color: #1a1d21;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.cn-card__close:hover { background: rgba(0, 0, 0, 0.12); }
+
+.cn-card__progress {
+  display: block;
+  height: 3px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.08);
+  margin-top: 8px;
+  overflow: hidden;
+}
+.cn-card__progress-bar {
+  display: block;
+  height: 100%;
+  background: #d97757;
+  transform-origin: left center;
+  animation: cn-shrink linear forwards;
+}
+/* darker designs need a brighter base for the bar */
+body[data-design="2"] .cn-card__progress,
+body[data-design="5"] .cn-card__progress { background: rgba(255,255,255,0.10); }
+
+@keyframes cn-fade-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes cn-fade-out {
+  from { opacity: 1; transform: translateX(0); max-height: 200px; }
+  to   { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; margin: 0; }
+}
+@keyframes cn-shrink {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+/* ---------- Design 1: minimal (default — nothing extra) ---------- */
+body[data-design="1"] .cn-card__actions { display: none; }
+
+/* ---------- Design 2: accent bar dark ---------- */
+body[data-design="2"] { color: #e6e8eb; }
+body[data-design="2"] .cn-shell { background: #1d2026; box-shadow: var(--cn-shadow); }
+body[data-design="2"] .cn-header { background: #15171b; color: #f4f5f7; }
+body[data-design="2"] .cn-header__count { background: rgba(255,255,255,0.08); color: #c2c6cc; }
+body[data-design="2"] .cn-card {
+  background: #23272d;
+  color: #e6e8eb;
+  border: none;
+  border-left: 3px solid #5fa8ff;
+  border-radius: 6px;
+}
+body[data-design="2"] .cn-card__dir { color: #9aa0a8; }
+body[data-design="2"] .cn-card__title { color: #f4f5f7; }
+body[data-design="2"] .cn-card__body { color: #d1d4d9; }
+body[data-design="2"] .cn-card__close { background: rgba(255,255,255,0.08); color: #e6e8eb; }
+
+/* ---------- Design 3: Claude colour ---------- */
+body[data-design="3"] .cn-shell { background: #fffaf5; border: 1px solid #f3dccb; }
+body[data-design="3"] .cn-header {
+  background: linear-gradient(90deg, #d97757 0%, #c95f3f 100%);
+  color: #fff;
+}
+body[data-design="3"] .cn-header__count { background: rgba(255,255,255,0.22); color: #fff; }
+body[data-design="3"] .cn-card { background: #fff; border-color: #f3dccb; }
+
+/* ---------- Design 4: light + accent bar ---------- */
+body[data-design="4"] .cn-shell { background: #ffffff; }
+body[data-design="4"] .cn-header { background: #fff8f3; color: #2a1d14; }
+body[data-design="4"] .cn-header__count { background: rgba(217,119,87,0.16); color: #c95f3f; }
+body[data-design="4"] .cn-card {
+  background: #ffffff;
+  border: none;
+  border-left: 3px solid #d97757;
+  border-radius: 6px;
+}
+
+/* ---------- Design 5: dark + timer bar ---------- */
+body[data-design="5"] .cn-shell { background: #1d2026; }
+body[data-design="5"] .cn-header { background: #15171b; color: #f4f5f7; }
+body[data-design="5"] .cn-header__count { background: rgba(255,255,255,0.08); color: #c2c6cc; }
+body[data-design="5"] .cn-card {
+  background: #23272d;
+  color: #e6e8eb;
+  border-color: rgba(255,255,255,0.04);
+}
+body[data-design="5"] .cn-card__dir { color: #9aa0a8; }
+body[data-design="5"] .cn-card__title { color: #f4f5f7; }
+body[data-design="5"] .cn-card__body { color: #d1d4d9; }
+body[data-design="5"] .cn-card__close { background: rgba(255,255,255,0.08); color: #e6e8eb; }

package/electron/notify.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self';" />
+    <title>claude-code-popup</title>
+    <link rel="stylesheet" href="notify.css" />
+  </head>
+  <body data-design="1">
+    <div id="root" class="cn-shell">
+      <header class="cn-header">
+        <span class="cn-header__icon" aria-hidden="true">🤖</span>
+        <span class="cn-header__title">Claude Code</span>
+        <span class="cn-header__count" id="cn-count">0</span>
+        <button id="cn-settings" class="cn-header__btn" type="button">⚙</button>
+        <button id="cn-clear"    class="cn-header__btn" type="button">×</button>
+      </header>
+      <ul id="cn-cards" class="cn-cards"></ul>
+    </div>
+    <script src="notify.js"></script>
+  </body>
+</html>