clauddy 1.18.0 → 1.20.0

package/README.md

@@ -29,6 +29,16 @@ The session/weekly **%** comes straight from your Anthropic account, so it match
 
 The token is saved locally (see [Data & privacy](#data--privacy)) and refreshed automatically. **Until you connect**, the limits area shows a _"Connect your account"_ prompt instead of percentages.
 
+### Several subscriptions
+
+Got more than one Claude account — say a personal Pro and a Max from work? The **account chip** in the top-left corner is the switcher: click it for the list of accounts, with the active one marked, plus **"+ Add another account"** — which opens the same browser login and drops the token it brings back into a new slot. The tray icon has the same list under its **Account** submenu. Give up halfway and the empty slot disappears on its own — the list only ever holds accounts you actually logged into.
+
+The widget follows **one account at a time**: the one you pick is the one whose % is shown, whose logs are counted, and the only one that can notify you. Each account keeps its own token and its own armed alerts, so switching never replays a notification you already dismissed elsewhere. Everything else — window position, display mode, zoom, thresholds — is shared.
+
+Removing an account (the **×** on its row) deletes its token from disk. The one you're currently on can't be removed — switch away first — and neither can the last one left. Removing the first account clears its token without touching the settings that live in the same folder.
+
+> Prefer one widget per account instead? Setting `CLAUDE_CONFIG_DIR` still isolates a whole instance — token, settings and logs — so you can run two Clauddys side by side.
+
 ## Burn rate
 
 Knowing you're at **82%** with **1h 12m** left on the window still leaves you doing arithmetic in your head. So Clauddy does it for you: it fits the slope of your recent usage and projects when you'd hit 100% — showing one extra line under the session bar:
@@ -242,7 +252,10 @@ Everything lives on your machine, in `~/.claude-usage-monitor/`:
 
 - `auth.json` — your OAuth token (file mode `600`, never committed)
 - `config.json` — your alert settings
+- `alerts.json` — which notifications are already armed, so a restart doesn't repeat them
+- `accounts.json` — your list of accounts and which one is active
 - `debug.json` — scratch file for the `./pet` simulator
+- `accounts/<id>/` — the same `auth.json` + `alerts.json`, for each extra account
 
 Nothing leaves your machine except the OAuth calls to Anthropic's own login and usage endpoints.
 

package/accounts.js

@@ -0,0 +1,154 @@
+// Multiple Claude subscriptions in one widget.
+//
+// An account is a token plus, optionally, the Claude config dir whose logs it
+// reads. The first one ("default") keeps the paths the app has always used, so
+// an existing install carries over untouched; every extra account gets its own
+// folder under `accounts/` for auth.json and alerts.json.
+//
+// Only the active account is polled — and therefore only it can notify.
+const fs = require('node:fs')
+const path = require('node:path')
+const os = require('node:os')
+
+const BASE_DIR = process.env.CLAUDE_CONFIG_DIR
+  ? path.join(process.env.CLAUDE_CONFIG_DIR, 'usage-monitor')
+  : path.join(os.homedir(), '.claude-usage-monitor')
+const FILE = path.join(BASE_DIR, 'accounts.json')
+const DEFAULT_ID = 'default'
+
+function defaults() {
+  return { active: DEFAULT_ID, accounts: [{ id: DEFAULT_ID, label: null, claudeDir: null }] }
+}
+
+function sane(j) {
+  const list = (Array.isArray(j?.accounts) ? j.accounts : [])
+    .filter((a) => a && typeof a.id === 'string' && a.id)
+    .map((a) => ({
+      id: a.id,
+      label: typeof a.label === 'string' && a.label ? a.label : null,
+      claudeDir: typeof a.claudeDir === 'string' && a.claudeDir ? a.claudeDir : null,
+    }))
+  // the default account can be removed like any other, so it is only recreated
+  // when nothing is left — an empty list would leave the widget with no token
+  if (!list.length) list.push(defaults().accounts[0])
+  const active = list.some((a) => a.id === j?.active) ? j.active : list[0].id
+  return { active, accounts: list }
+}
+
+// re-read on every call instead of caching: the file is a handful of rows, it
+// is read only when the account list is shown or changed, and a stale cache
+// here would mean the widget polling a token it thinks it still has
+function load() {
+  try {
+    return sane(JSON.parse(fs.readFileSync(FILE, 'utf8')))
+  } catch {
+    return defaults() // first run, or a corrupted file
+  }
+}
+
+function save(state) {
+  try {
+    fs.mkdirSync(BASE_DIR, { recursive: true })
+    fs.writeFileSync(FILE, JSON.stringify(state, null, 2))
+  } catch {}
+}
+
+// where an account's own files (auth.json, alerts.json) live
+function dataDirOf(id) {
+  return id === DEFAULT_ID ? BASE_DIR : path.join(BASE_DIR, 'accounts', id)
+}
+
+function list() {
+  return load().accounts.map((a) => ({ ...a }))
+}
+
+function activeId() {
+  return load().active
+}
+
+function active() {
+  const s = load()
+  return s.accounts.find((a) => a.id === s.active) || s.accounts[0]
+}
+
+function find(s, id) {
+  return s.accounts.find((a) => a.id === id)
+}
+
+function setActive(id) {
+  const s = load()
+  const hit = find(s, id)
+  if (!hit) return null
+  s.active = id
+  save(s)
+  return hit
+}
+
+// a fresh, logged-out account — the caller switches to it and runs the usual
+// browser login, which is what gives it an identity
+function add(claudeDir) {
+  const s = load()
+  // two clicks inside the same millisecond used to mint the same id, and the
+  // duplicate then looked like the account we were already on
+  let id = `acct-${Date.now().toString(36)}`
+  while (s.accounts.some((a) => a.id === id)) {
+    id = `acct-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
+  }
+  s.accounts.push({ id, label: null, claudeDir: claudeDir || null })
+  save(s)
+  return id
+}
+
+// the login flow knows the email; that's a better name than "Account 2"
+function label(id, text) {
+  const s = load()
+  const a = find(s, id)
+  if (!a || a.label === (text || null)) return
+  a.label = text || null
+  save(s)
+}
+
+function setClaudeDir(id, dir) {
+  const s = load()
+  const a = find(s, id)
+  if (!a) return
+  a.claudeDir = dir || null
+  save(s)
+}
+
+// removing an account takes its token with it — leaving a stray auth.json
+// behind would be a credential nobody can see or revoke from the UI
+function remove(id) {
+  const s = load()
+  if (id === s.active) return false // switch away first: the widget is showing it
+  const i = s.accounts.findIndex((a) => a.id === id)
+  if (i < 0) return false
+  if (s.accounts.length < 2) return false // never leave the widget with no account
+  s.accounts.splice(i, 1)
+  save(s)
+  try {
+    if (id === DEFAULT_ID) {
+      // its folder is the app's own data dir: drop the credentials, not the
+      // settings, the account list or the simulator file that live beside them
+      for (const f of ['auth.json', 'alerts.json'])
+        fs.rmSync(path.join(dataDirOf(id), f), { force: true })
+    } else {
+      fs.rmSync(dataDirOf(id), { recursive: true, force: true })
+    }
+  } catch {}
+  return true
+}
+
+module.exports = {
+  BASE_DIR,
+  DEFAULT_ID,
+  dataDirOf,
+  list,
+  active,
+  activeId,
+  setActive,
+  add,
+  label,
+  setClaudeDir,
+  remove,
+}

package/auth.js

@@ -17,7 +17,9 @@ const UA = 'claude-cli/2.1.181 (external, cli)'
 const DATA_DIR = process.env.CLAUDE_CONFIG_DIR
   ? path.join(process.env.CLAUDE_CONFIG_DIR, 'usage-monitor')
   : path.join(os.homedir(), '.claude-usage-monitor')
-const TOKEN_PATH = path.join(DATA_DIR, 'auth.json')
+// mutable: with several accounts configured, each one keeps its token in its
+// own dir and the widget switches between them at runtime
+let tokenPath = path.join(DATA_DIR, 'auth.json')
 
 const b64url = (buf) =>
   buf.toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
@@ -26,10 +28,19 @@ let tokens = null // { access_token, refresh_token, expires_at }
 let pending = null // { verifier, state }
 let profile = null // { email, name, plan } — cached account identity
 
+// point the module at another account's dir — the cached token and profile
+// belong to the previous one, so both are dropped
+function setDataDir(dir) {
+  tokenPath = path.join(dir || DATA_DIR, 'auth.json')
+  tokens = null
+  profile = null
+  pending = null
+}
+
 function load() {
   if (tokens) return tokens
   try {
-    tokens = JSON.parse(fs.readFileSync(TOKEN_PATH, 'utf8'))
+    tokens = JSON.parse(fs.readFileSync(tokenPath, 'utf8'))
   } catch {
     tokens = null
   }
@@ -38,15 +49,15 @@ function load() {
 function save(t) {
   tokens = t
   try {
-    fs.mkdirSync(path.dirname(TOKEN_PATH), { recursive: true })
-    fs.writeFileSync(TOKEN_PATH, JSON.stringify(t, null, 2), { mode: 0o600 })
+    fs.mkdirSync(path.dirname(tokenPath), { recursive: true })
+    fs.writeFileSync(tokenPath, JSON.stringify(t, null, 2), { mode: 0o600 })
   } catch {}
 }
 function clear() {
   tokens = null
   profile = null
   try {
-    fs.unlinkSync(TOKEN_PATH)
+    fs.unlinkSync(tokenPath)
   } catch {}
 }
 function isConnected() {
@@ -228,4 +239,4 @@ async function fetchProfile() {
   return profile
 }
 
-module.exports = { begin, complete, fetchUsage, fetchProfile, clear, isConnected }
+module.exports = { begin, complete, fetchUsage, fetchProfile, clear, isConnected, setDataDir }

package/main.js

@@ -13,8 +13,10 @@ const path = require('node:path')
 const fs = require('node:fs')
 const os = require('node:os')
 const { spawn } = require('node:child_process')
-const { getUsage } = require('./usage')
+const usage = require('./usage')
+const { getUsage } = usage
 const auth = require('./auth')
+const accounts = require('./accounts')
 
 const REPO = 'renatoaug/claude-usage-monitor'
 
@@ -98,20 +100,22 @@ function loadConfig() {
 // `armed` is persisted so relaunching at 85% doesn't repeat the 80% alert you
 // already dismissed; it also carries the last session % so a reset is detectable
 // across restarts.
-const ALERTS_FILE = path.join(DATA_DIR, 'alerts.json')
+// per account: two subscriptions have separate windows, so an alert armed on
+// one says nothing about the other
+let alertsFile = path.join(DATA_DIR, 'alerts.json')
 let armed = new Set()
 let lastSessionPct = null
 function loadAlertState() {
   try {
-    const j = JSON.parse(fs.readFileSync(ALERTS_FILE, 'utf8'))
+    const j = JSON.parse(fs.readFileSync(alertsFile, 'utf8'))
     armed = new Set(Array.isArray(j.armed) ? j.armed : [])
     lastSessionPct = typeof j.lastSessionPct === 'number' ? j.lastSessionPct : null
   } catch {} // first run, or a corrupted file: start from a clean slate
 }
 function saveAlertState() {
   try {
-    fs.mkdirSync(DATA_DIR, { recursive: true })
-    fs.writeFileSync(ALERTS_FILE, JSON.stringify({ armed: [...armed], lastSessionPct }))
+    fs.mkdirSync(path.dirname(alertsFile), { recursive: true })
+    fs.writeFileSync(alertsFile, JSON.stringify({ armed: [...armed], lastSessionPct }))
   } catch {}
 }
 
@@ -217,9 +221,120 @@ function alertAuthLost(config) {
   notify('Clauddy lost access to your usage', 'open Settings to reconnect')
 }
 
+// ---- accounts ----------------------------------------------------------------
+// One widget, several Claude subscriptions. Switching rebinds the token store
+// (auth), the log dir (usage) and the alert state — everything that is "whose
+// usage is this" — while the window itself (position, mode, zoom, settings)
+// stays global, because there is only one pet.
+function applyAccount(acc) {
+  const dir = accounts.dataDirOf(acc.id)
+  alertsFile = path.join(dir, 'alerts.json')
+  auth.setDataDir(dir)
+  usage.setClaudeDir(acc.claudeDir)
+  armed = new Set()
+  lastSessionPct = null
+  loadAlertState()
+}
+
+// `connected` is read off disk rather than through auth, which only ever knows
+// about the active account
+function accountsPayload() {
+  return {
+    active: accounts.activeId(),
+    accounts: accounts.list().map((a) => ({
+      id: a.id,
+      label: a.label,
+      connected: hasToken(a.id),
+    })),
+  }
+}
+
+// `busy` is the account being switched to, while its usage is still loading
+function sendAccounts(busy = null) {
+  if (win && !win.isDestroyed()) win.webContents.send('accounts', { ...accountsPayload(), busy })
+}
+
+// the numbers on screen belong to the old account: drop them before the new
+// account's first poll lands, so nothing stale is ever attributed to it
+function switchAccount(id) {
+  const leaving = accounts.activeId()
+  if (id === leaving) return
+  const acc = accounts.setActive(id)
+  if (!acc) return
+  saveAlertState() // the account we're leaving keeps what it had armed
+  pruneEmpty(leaving)
+  applyAccount(acc)
+  clearTimeout(usageTimer)
+  usageBackoff = 5 * 60 * 1000
+  pushRealUsage(null)
+  if (win && !win.isDestroyed()) {
+    win.webContents.send('auth-state', { connected: auth.isConnected() })
+    win.webContents.send('profile', null)
+  }
+  sendAccounts(id) // the row goes pending right away…
+
+  // …because the rest is synchronous and slow: re-reading the new account's
+  // logs walks every .jsonl under its projects dir, which blocks this process
+  // for a beat on a busy machine. Yielding first lets the renderer paint the
+  // pending state instead of freezing mid-click.
+  setTimeout(() => {
+    if (doTick) doTick()
+    startUsagePoll()
+    sendProfile()
+    updateTray()
+    sendAccounts()
+  }, 0)
+}
+
+// a slot only earns its place by holding a login. One that was never connected
+// — the browser flow abandoned, or "add" clicked twice — is dropped the moment
+// we leave it, so the list can't fill up with "Not connected yet".
+// asked of any account, not just the active one — auth only knows about the
+// dir it is currently pointed at
+function hasToken(id) {
+  return fs.existsSync(path.join(accounts.dataDirOf(id), 'auth.json'))
+}
+
+function pruneEmpty(id) {
+  if (id === accounts.DEFAULT_ID || id === accounts.activeId()) return // never auto-drop the original
+  const acc = accounts.list().find((a) => a.id === id)
+  if (!acc || acc.label || hasToken(id)) return
+  accounts.remove(id)
+}
+
+ipcMain.on('accounts-switch', (_e, id) => switchAccount(String(id)))
+// "add an account" *is* "log in": the browser opens on the new, empty slot, so
+// the token lands in it and not in the account we just left
+// the account an "add" left behind: cancelling the login has to land back on
+// it, or the widget is stuck on an empty slot with no chip to switch from
+let addedFrom = null
+ipcMain.on('accounts-add', () => {
+  addedFrom = accounts.activeId()
+  switchAccount(accounts.add())
+  startLogin()
+})
+ipcMain.on('accounts-cancel-add', () => {
+  const from = addedFrom
+  addedFrom = null
+  if (!from || from === accounts.activeId() || hasToken(accounts.activeId())) return
+  switchAccount(from) // the empty slot is pruned on the way out
+})
+ipcMain.on('accounts-remove', (_e, id) => {
+  if (accounts.remove(String(id))) sendAccounts()
+})
+
 function createWindow() {
   config = loadConfig()
-  loadAlertState()
+  // a login abandoned in an earlier run: nothing stays pending across a restart,
+  // so fall back to the first account and let the empty slots go
+  const boot = accounts.active()
+  if (!boot.label && !hasToken(boot.id)) {
+    // the default account can be gone by now, so land on whatever comes first
+    const fallback = accounts.list().find((a) => a.id !== boot.id)
+    if (fallback) accounts.setActive(fallback.id)
+  }
+  for (const a of accounts.list()) pruneEmpty(a.id)
+  applyAccount(accounts.active())
   const { workAreaSize } = screen.getPrimaryDisplay()
   const H = 480
 
@@ -295,6 +410,7 @@ function createWindow() {
     win.webContents.send('config', publicConfig(config))
     win.webContents.send('version', app.getVersion())
     win.webContents.send('auth-state', { connected: auth.isConnected() })
+    sendAccounts()
     pollTimer = setInterval(tick, config.pollIntervalMs)
     startUsagePoll()
     sendProfile()
@@ -353,9 +469,28 @@ function destroyTray() {
   }
 }
 
+// the accounts entry only earns its place once there's more than one
+function accountsMenuItems() {
+  const list = accounts.list()
+  if (list.length < 2) return []
+  const activeId = accounts.activeId()
+  return [
+    {
+      label: 'Account',
+      submenu: list.map((a) => ({
+        label: a.label || 'Not connected',
+        type: 'radio',
+        checked: a.id === activeId,
+        click: () => switchAccount(a.id),
+      })),
+    },
+  ]
+}
+
 function trayMenu() {
   return Menu.buildFromTemplate([
     { label: 'Open Clauddy', click: () => showPopover() },
+    ...accountsMenuItems(),
     {
       label: 'Open Usage page',
       click: () => shell.openExternal('https://claude.ai/settings/usage'),
@@ -527,6 +662,7 @@ async function pollUsage() {
     } else if (e && e.status === 401) {
       auth.clear()
       pushRealUsage(null)
+      sendAccounts()
       alertAuthLost(config)
       if (win && !win.isDestroyed()) {
         win.webContents.send('auth-state', { connected: false })
@@ -545,17 +681,29 @@ async function sendProfile() {
   if (!auth.isConnected()) return
   try {
     const p = await auth.fetchProfile()
+    if (p?.email) {
+      accounts.label(accounts.activeId(), p.email) // a better name than "acct-xyz"
+      sendAccounts()
+    }
     if (win && !win.isDestroyed()) win.webContents.send('profile', p)
   } catch {} // non-fatal: the chip just stays hidden
 }
 
-ipcMain.on('auth-start', () => shell.openExternal(auth.begin()))
+// begin() has to run *after* any account switch: switching resets the pending
+// PKCE verifier, which would strand a login started before it
+function startLogin() {
+  shell.openExternal(auth.begin())
+  if (win && !win.isDestroyed()) win.webContents.send('auth-pending')
+}
+ipcMain.on('auth-start', startLogin)
 ipcMain.on('auth-code', async (_e, code) => {
   const ok = () => {
+    addedFrom = null // the new account is real now: nothing to roll back to
     if (win && !win.isDestroyed()) {
       win.webContents.send('auth-state', { connected: true })
       win.webContents.send('auth-result', { ok: true })
     }
+    sendAccounts()
     sendProfile()
   }
   try {
@@ -584,6 +732,7 @@ ipcMain.on('auth-logout', () => {
   auth.clear()
   clearTimeout(usageTimer)
   pushRealUsage(null)
+  sendAccounts()
   if (win && !win.isDestroyed()) {
     win.webContents.send('auth-state', { connected: false })
     win.webContents.send('profile', null)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clauddy",
   "desktopName": "clauddy.desktop",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {
@@ -13,6 +13,7 @@
     "preload.js",
     "usage.js",
     "auth.js",
+    "accounts.js",
     "config.json",
     "renderer"
   ],
@@ -71,6 +72,7 @@
       "preload.js",
       "usage.js",
       "auth.js",
+      "accounts.js",
       "config.json",
       "renderer/**",
       "build/trayTemplate.png",

package/preload.js

@@ -10,10 +10,16 @@ contextBridge.exposeInMainWorld('api', {
   onRealUsage: (cb) => ipcRenderer.on('real-usage', (_e, u) => cb(u)),
   onAuthState: (cb) => ipcRenderer.on('auth-state', (_e, s) => cb(s)),
   onProfile: (cb) => ipcRenderer.on('profile', (_e, p) => cb(p)),
+  onAuthPending: (cb) => ipcRenderer.on('auth-pending', () => cb()),
   onAuthResult: (cb) => ipcRenderer.on('auth-result', (_e, r) => cb(r)),
   authStart: () => ipcRenderer.send('auth-start'),
   authCode: (code) => ipcRenderer.send('auth-code', code),
   authLogout: () => ipcRenderer.send('auth-logout'),
+  onAccounts: (cb) => ipcRenderer.on('accounts', (_e, a) => cb(a)),
+  accountSwitch: (id) => ipcRenderer.send('accounts-switch', id),
+  accountAdd: () => ipcRenderer.send('accounts-add'),
+  accountCancelAdd: () => ipcRenderer.send('accounts-cancel-add'),
+  accountRemove: (id) => ipcRenderer.send('accounts-remove', id),
   onDebugState: (cb) => ipcRenderer.on('debug-state', (_e, s) => cb(s)),
   onVersion: (cb) => ipcRenderer.on('version', (_e, v) => cb(v)),
   onUpdateStatus: (cb) => ipcRenderer.on('update-status', (_e, s) => cb(s)),

package/renderer/index.html

@@ -6,13 +6,18 @@
     <title>Clauddy</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body class="state-idle">
+  <body class="state-idle one-account">
     <div id="card">
-      <div id="account-chip" hidden>
+      <div id="account-chip" hidden title="Switch account">
         <span class="ac-dot"></span>
         <span id="ac-email"></span>
+        <svg class="ac-caret" viewBox="0 0 12 12" aria-hidden="true">
+          <path d="M3 5l3 3 3-3" />
+        </svg>
         <span id="ac-plan" class="plan-badge" hidden></span>
       </div>
+      <div id="acc-backdrop" hidden></div>
+      <div id="acc-menu" hidden></div>
       <div id="controls">
         <button id="gear" title="Settings">⚙</button>
         <button id="usage" title="Open Usage page">
@@ -305,8 +310,16 @@
       <!-- settings panel -->
       <div id="settings">
         <div id="account">
+          <!-- who you are comes first: the list, then the login for whichever
+               account is active — so "add" and the code field sit together -->
+          <div id="acc-connected">
+            <span class="acc-ok" id="acc-ok">● Connected</span>
+            <button id="acc-logout" class="acc-link">Disconnect</button>
+          </div>
           <div id="acc-disconnected">
-            <div class="set-hint set-hint-left">Connect your Claude account to show your real usage.</div>
+            <div class="set-hint set-hint-left" id="acc-intro">
+              Connect your Claude account to show your real usage.
+            </div>
             <button id="acc-connect" class="acc-btn">Log in with browser</button>
             <div id="acc-paste">
               <div class="set-hint set-hint-left">Paste the code from the browser page:</div>
@@ -315,10 +328,6 @@
               <div id="acc-msg"></div>
             </div>
           </div>
-          <div id="acc-connected">
-            <span class="acc-ok" id="acc-ok">● Connected</span>
-            <button id="acc-logout" class="acc-link">Disconnect</button>
-          </div>
         </div>
 
         <div id="set-rows">

package/renderer/pet.js

@@ -682,7 +682,9 @@ window.api.onAuthState((s) => {
   if (!on) {
     realUsage = null
     document.body.classList.remove('live')
-    el('acc-paste').classList.remove('show')
+    // main sends this before it opens the browser for a new login, so the
+    // pending state that comes next is not undone by it
+    endLogin()
     showProfile(null)
   }
   if (document.body.classList.contains('settings-open')) fitSize()
@@ -720,12 +722,163 @@ function setPlan(node, plan) {
   }
 }
 window.api.onProfile(showProfile)
+
+// ---- accounts ---------------------------------------------------------------
+// The account chip doubles as the switcher: click it for the list, with the
+// active one marked. Settings only keeps the login flow itself.
+let pendingRemove = null // id whose × is armed, so removal takes two clicks
+let lastAccounts = null
+let switching = false // a switch is in flight, so the menu waits for its answer
+
+// one row of the chip dropdown
+function accountRow(acc, a) {
+  const active = acc.id === a.active
+  const row = document.createElement('div')
+  row.className = 'acc-item'
+  if (active) row.classList.add('active')
+  if (acc.connected) row.classList.add('connected')
+  // the account being switched to owns the spinner: everything on screen
+  // still belongs to the one we're leaving
+  if (a.busy === acc.id) row.classList.add('loading')
+
+  const dot = document.createElement('span')
+  dot.className = 'dot'
+  const who = document.createElement('span')
+  who.className = 'who'
+  who.textContent =
+    acc.label || (acc.connected ? 'Connected' : active ? 'Waiting for login…' : 'Not connected')
+  row.append(dot, who)
+  return row
+}
+
+// Everything about accounts lives in the chip dropdown: the chip already says
+// which one you are on, so switching, adding and removing all happen there.
+function renderAccounts(a) {
+  lastAccounts = a
+  document.body.classList.toggle('one-account', (a?.accounts || []).length < 2)
+  if (el('acc-menu').hidden) return
+  // the switch is done: the chip now names the account the menu was pointing at
+  if (switching && !a?.busy) closeAccountMenu()
+  else renderAccountMenu()
+}
+
+function renderAccountMenu() {
+  const a = lastAccounts
+  const box = el('acc-menu')
+  box.textContent = ''
+  box.classList.toggle('busy', !!a?.busy)
+  for (const acc of a?.accounts || []) {
+    const active = acc.id === a.active
+    const row = accountRow(acc, a)
+
+    // the active account is what the widget is showing: it can't be removed
+    // from under you, and the last one standing can't be removed at all
+    if (!active && (a.accounts || []).length > 1) {
+      const x = document.createElement('button')
+      const armed = pendingRemove === acc.id
+      x.className = armed ? 'drop armed' : 'drop'
+      x.textContent = armed ? 'remove?' : '\u00d7'
+      x.title = 'Remove this account'
+      x.addEventListener('click', (e) => {
+        e.stopPropagation() // the row itself switches accounts
+        if (armed) {
+          pendingRemove = null
+          window.api.accountRemove(acc.id)
+        } else {
+          pendingRemove = acc.id // a click deletes a token: ask once
+          renderAccountMenu()
+        }
+      })
+      row.appendChild(x)
+    }
+
+    // stopPropagation: re-rendering detaches this row, and the document-level
+    // "clicked outside" handler would then read that as a click off the menu
+    if (!active)
+      row.addEventListener('click', (e) => {
+        e.stopPropagation()
+        switchAccount(acc.id)
+      })
+    box.appendChild(row)
+  }
+
+  const add = document.createElement('div')
+  add.className = 'acc-item acc-add'
+  add.textContent = '+ Add another account'
+  add.addEventListener('click', () => {
+    closeAccountMenu()
+    el('acc-msg').textContent = ''
+    window.api.accountAdd() // switches to a fresh slot and opens the browser
+  })
+  box.appendChild(add)
+}
+
+function closeAccountMenu() {
+  el('acc-menu').hidden = true
+  el('acc-backdrop').hidden = true
+  pendingRemove = null
+  switching = false
+}
+
+function toggleAccountMenu() {
+  const box = el('acc-menu')
+  if (!box.hidden) {
+    closeAccountMenu()
+    return
+  }
+  renderAccountMenu()
+  box.hidden = false
+  el('acc-backdrop').hidden = false
+}
+
+el('account-chip').addEventListener('click', (e) => {
+  e.stopPropagation()
+  toggleAccountMenu()
+})
+// clicking anywhere else — the pet, the gear, another app — puts it away
+el('acc-backdrop').addEventListener('mousedown', closeAccountMenu)
+document.addEventListener('click', (e) => {
+  if (!el('acc-menu').hidden && !el('acc-menu').contains(e.target)) closeAccountMenu()
+})
+window.addEventListener('blur', closeAccountMenu)
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeAccountMenu()
+})
+
+// paint the pending state from the click itself rather than waiting for main to
+// answer — the answer is exactly what takes a moment
+function switchAccount(id) {
+  if (lastAccounts?.busy) return
+  endLogin() // the code from the account we're leaving is no good here
+  pendingRemove = null
+  switching = true // the row stays on screen, pending, until main answers
+  renderAccounts({ ...lastAccounts, busy: id })
+  window.api.accountSwitch(id)
+}
+
+window.api.onAccounts((a) => {
+  pendingRemove = null
+  renderAccounts(a)
+})
+
+// closing the panel while a login is pending gives up on it: main puts us back
+// on the account we were using, and the half-made one goes away
+function abandonLogin() {
+  if (!document.body.classList.contains('awaiting')) return
+  endLogin()
+  window.api.accountCancelAdd()
+}
+
+function endLogin() {
+  document.body.classList.remove('awaiting')
+  el('acc-paste').classList.remove('show')
+  el('acc-code').value = ''
+  el('acc-msg').textContent = ''
+}
 let successTimer = null
 window.api.onAuthResult((r) => {
   if (r?.ok) {
-    el('acc-msg').textContent = ''
-    el('acc-code').value = ''
-    el('acc-paste').classList.remove('show')
+    endLogin()
     // logging in is done: land back on the home panel, where the fresh live
     // meters show up under a short-lived cheer — and the pet throws confetti
     document.body.classList.remove('settings-open')
@@ -738,6 +891,8 @@ window.api.onAuthResult((r) => {
     }, 6000)
     celebrate()
   } else {
+    // failed: put "Log in with browser" back, so a retry is one click away
+    document.body.classList.remove('awaiting')
     const e = r?.error || ''
     el('acc-msg').textContent = /429|rate_limit/i.test(e)
       ? 'Rate limited by Anthropic — wait a few minutes, then try once with a fresh code.'
@@ -794,14 +949,25 @@ el('close').addEventListener('click', () => window.api.quit())
 el('usage').addEventListener('click', () => window.api.openUsage())
 
 // account login (browser flow)
-el('acc-connect').addEventListener('click', () => {
-  window.api.authStart() // opens the browser to log in
-  el('acc-paste').classList.add('show') // reveal the code field
+el('acc-connect').addEventListener('click', () => window.api.authStart())
+// main opened the browser — the only thing left to do is paste the code back,
+// so the panel narrows to exactly that
+window.api.onAuthPending(() => {
+  // the login can start from the account menu, with the panel closed: the code
+  // field is where the flow continues, so bring it up
+  openSettings()
+  document.body.classList.add('awaiting')
+  el('acc-paste').classList.add('show')
+  el('acc-code').classList.remove('filled')
+  el('acc-code').focus()
   fitSize()
 })
-// the Connect button only lights up once there's a code to submit
+// the Connect button only lights up once there's a code to submit, and the
+// field stops asking for attention once it has one
 el('acc-code').addEventListener('input', () => {
-  el('acc-confirm').classList.toggle('ready', !!el('acc-code').value.trim())
+  const code = el('acc-code').value.trim()
+  el('acc-confirm').classList.toggle('ready', !!code)
+  el('acc-code').classList.toggle('filled', !!code)
 })
 el('acc-confirm').addEventListener('click', () => {
   const code = el('acc-code').value.trim()
@@ -952,12 +1118,14 @@ for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
   })
 }
 el('set-cancel').addEventListener('click', () => {
+  abandonLogin()
   document.body.classList.remove('settings-open')
   clearSaveDirty()
   applyZoom(currentConfig?.zoom != null ? currentConfig.zoom : 100) // undo the preview
   fitSize()
 })
 el('set-save').addEventListener('click', () => {
+  abandonLogin() // leaving the panel gives up on a login waiting for its code
   const num = (id) => parseFloat(el(id).value)
   const fire = num('set-fire')
   const zoomRaw = num('set-zoom')
@@ -1025,6 +1193,8 @@ if (typeof module === 'object' && module.exports) {
     renderProjects,
     renderHeat,
     showProfile,
+    renderAccounts,
+    renderAccountMenu,
     burn,
   }
 }

package/renderer/style.css

@@ -169,9 +169,10 @@ body.collapsed #usage {
   z-index: 10;
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 3px;
   height: 19px; /* match #controls buttons so text centers on the same line */
-  max-width: 138px;
+  /* #controls starts at ~154px: stop short of it, the pill has padding too */
+  max-width: 142px;
   font-size: 9.5px;
   line-height: 1;
   color: var(--muted);
@@ -179,6 +180,106 @@ body.collapsed #usage {
 #account-chip[hidden] {
   display: none;
 }
+/* with something to switch to, the chip stops being a label and reads as a
+   control: a pill that holds the caret instead of leaving it floating */
+#account-chip {
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+  padding: 0 5px 0 6px;
+  margin-left: -6px; /* the text stays where it has always been */
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+#account-chip:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+}
+/* a drawn chevron, not the ▾ glyph: the glyph's ink sits high in its em box, so
+   it never lines up with the dot and the text */
+.ac-caret {
+  flex: none;
+  width: 9px;
+  height: 9px;
+  margin-left: -2px; /* hugs the email rather than drifting off it */
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+/* a single account keeps the pill, minus the affordance: nothing to switch to.
+   The email then takes the width the chevron leaves behind. */
+body.one-account #account-chip {
+  cursor: default;
+}
+body.one-account #account-chip:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--muted);
+}
+body.one-account .ac-caret {
+  display: none;
+}
+/* the widget is mostly a drag region, and those swallow clicks before the page
+   ever sees them — so an invisible sheet under the menu catches them instead */
+#acc-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 19;
+  -webkit-app-region: no-drag;
+}
+#acc-backdrop[hidden] {
+  display: none;
+}
+/* dropdown under the chip; it overlays the pet rather than resizing the window */
+#acc-menu {
+  position: absolute;
+  top: 24px;
+  left: 8px;
+  z-index: 20;
+  min-width: 118px;
+  max-width: 176px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 3px;
+  border: 0.5px solid rgba(255, 210, 180, 0.1);
+  border-radius: 7px;
+  background: #221a15;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+  -webkit-app-region: no-drag;
+}
+#acc-menu[hidden] {
+  display: none;
+}
+#acc-menu.busy {
+  pointer-events: none; /* one switch at a time */
+}
+/* the add entry closes the list: it belongs to no account */
+#acc-menu .acc-add {
+  margin-top: 2px;
+  padding-top: 6px;
+  border-top: 0.5px solid var(--hair);
+  border-radius: 0;
+  color: var(--coral-soft);
+  /* no .who inside this one, so it needs the row font itself */
+  font-size: 9.5px;
+  white-space: nowrap;
+}
+#acc-menu .acc-add:hover {
+  background: none;
+  color: var(--coral);
+}
+/* tighter than the dropdown-less list it replaced: it floats over the pet */
+#acc-menu .acc-item {
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 5px;
+}
+#acc-menu .acc-item .who {
+  font-size: 9.5px;
+}
 .ac-dot {
   flex: none;
   width: 6px;
@@ -187,6 +288,11 @@ body.collapsed #usage {
   background: var(--pixel);
 }
 #ac-email {
+  /* line-height:1 leaves the ascender inside the box, so the text reads a hair
+     lower than the dot next to it — lift it back onto the same line */
+  transform: translateY(-1px);
+  flex: 1; /* claim the leftover width so the ellipsis is not left hanging */
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -683,6 +789,88 @@ body.live .live-only {
   gap: 10px; /* the email ellipsizes instead of touching Disconnect */
   flex-wrap: wrap; /* the success line drops to its own row */
 }
+/* a plain list, not a stack of cards: the panel already has enough boxes */
+.acc-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--muted);
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+.acc-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text);
+}
+.acc-item.active {
+  background: rgba(217, 119, 87, 0.14);
+  color: var(--text);
+  cursor: default;
+}
+.acc-item .dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.22); /* logged out: a row with no usage yet */
+  flex: none;
+}
+.acc-item.connected .dot {
+  background: var(--green);
+}
+.acc-item .who {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* switching re-reads that account's logs, which takes a beat — say so */
+.acc-item.loading .dot {
+  background: var(--coral);
+  animation: acc-pulse 0.9s ease-in-out infinite;
+}
+.acc-item.loading .who {
+  opacity: 0.6;
+}
+@keyframes acc-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
+.acc-item .drop {
+  border: none;
+  background: none;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1;
+  padding: 0 2px;
+  cursor: pointer;
+  opacity: 0.3; /* faint until hover: this deletes a token */
+  transition: opacity 0.15s;
+}
+.acc-item:hover .drop {
+  opacity: 0.75;
+}
+.acc-item .drop:hover {
+  opacity: 1;
+  color: var(--text);
+}
+/* armed: the confirm has to be legible whether or not the cursor is on the row */
+.acc-item .drop.armed,
+.acc-item:hover .drop.armed {
+  opacity: 1;
+  font-size: 10px;
+  color: var(--coral);
+}
 #acc-paste {
   display: none;
   margin-top: 8px;
@@ -690,6 +878,20 @@ body.live .live-only {
 #acc-paste.show {
   display: block;
 }
+/* while the browser is open, this empty field is the whole flow: make it say so */
+body.awaiting #acc-code:not(.filled) {
+  border-color: var(--coral);
+  animation: code-wait 1.6s ease-in-out infinite;
+}
+@keyframes code-wait {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.22);
+  }
+}
 #acc-code {
   width: 100%;
   margin: 4px 0 6px;
@@ -712,6 +914,15 @@ body.auth-on #acc-disconnected {
 body.auth-on #acc-connected {
   display: flex;
 }
+/* the browser is already open on the login page: the button that opens it and
+   the pitch for connecting are both noise now — only the code field matters */
+body.awaiting #acc-connect,
+body.awaiting #acc-intro {
+  display: none;
+}
+#acc-disconnected {
+  margin-top: 10px;
+}
 
 /* just logged in: a short-lived green cheer at the top of the home panel */
 #home-success {

package/usage.js

@@ -2,8 +2,26 @@ const fs = require('node:fs')
 const path = require('node:path')
 const os = require('node:os')
 
-const CLAUDE_DIR = process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), '.claude')
-const PROJECTS_DIR = path.join(CLAUDE_DIR, 'projects')
+// the Claude config dir whose logs we read. mutable because the widget can
+// switch between accounts at runtime, each one pointing at its own dir.
+const DEFAULT_CLAUDE_DIR = process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), '.claude')
+let claudeDir = DEFAULT_CLAUDE_DIR
+let projectsDir = path.join(claudeDir, 'projects')
+
+// point the reader at another account's logs. fileCache survives: it is keyed
+// by absolute path, so entries from another dir can't collide — and keeping it
+// is what makes switching back to an account instant instead of a full re-scan.
+// projectLabelCache is keyed by a directory *name*, which can repeat across
+// dirs, so that one goes.
+function setClaudeDir(dir) {
+  // an account with no dir of its own reads the default one — which is still
+  // CLAUDE_CONFIG_DIR when the whole instance is isolated that way
+  const next = dir || DEFAULT_CLAUDE_DIR
+  if (next === claudeDir) return
+  claudeDir = next
+  projectsDir = path.join(claudeDir, 'projects')
+  projectLabelCache.clear()
+}
 
 function labelFor(model) {
   if (!model) return 'desconhecido'
@@ -103,7 +121,7 @@ function projectLabel(dirName) {
 }
 
 function projectDirOf(file) {
-  const rel = path.relative(PROJECTS_DIR, file)
+  const rel = path.relative(projectsDir, file)
   const first = rel.split(path.sep)[0]
   return first && first !== '..' ? first : null
 }
@@ -279,7 +297,7 @@ function getUsage(config) {
   const scanCutoff = start30 - dayMs
 
   const files = []
-  walkJsonl(PROJECTS_DIR, files, scanCutoff)
+  walkJsonl(projectsDir, files, scanCutoff)
 
   let lastMtime = 0
   let newestFile = null
@@ -397,4 +415,12 @@ function getUsage(config) {
 // labelFor/tokensOf/detectActivity are exported for the tests — they're the
 // parts that decode Claude Code's log format, which is the thing most likely
 // to change out from under us.
-module.exports = { getUsage, labelFor, projectLabel, tokensOf, detectActivity, PLAN_BUDGETS }
+module.exports = {
+  getUsage,
+  setClaudeDir,
+  labelFor,
+  projectLabel,
+  tokensOf,
+  detectActivity,
+  PLAN_BUDGETS,
+}