clauddy 1.18.0 → 1.19.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? **⚙ Settings → "+ Add another account"** opens the same browser login, and the token it brings back lands in a new slot. Once two accounts exist, a list appears in Settings (and an **Account** submenu on the tray icon) to switch between them. 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 deletes its token from disk. The first account can't be removed, and neither can the one you're currently on — switch away first.
+
+> 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,145 @@
+// 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,
+    }))
+  if (!list.some((a) => a.id === DEFAULT_ID)) list.unshift(defaults().accounts[0])
+  const active = list.some((a) => a.id === j?.active) ? j.active : DEFAULT_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 === DEFAULT_ID) return false // the original install's data: never dropped
+  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
+  s.accounts.splice(i, 1)
+  save(s)
+  try {
+    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,107 @@ 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
+  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
+ipcMain.on('accounts-add', () => {
+  switchAccount(accounts.add())
+  startLogin()
+})
+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.id !== accounts.DEFAULT_ID && !boot.label && !hasToken(boot.id))
+    accounts.setActive(accounts.DEFAULT_ID)
+  for (const a of accounts.list()) pruneEmpty(a.id)
+  applyAccount(accounts.active())
   const { workAreaSize } = screen.getPrimaryDisplay()
   const H = 480
 
@@ -295,6 +397,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 +456,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 +649,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 +668,28 @@ 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 = () => {
     if (win && !win.isDestroyed()) {
       win.webContents.send('auth-state', { connected: true })
       win.webContents.send('auth-result', { ok: true })
     }
+    sendAccounts()
     sendProfile()
   }
   try {
@@ -584,6 +718,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.19.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,15 @@ 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'),
+  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

@@ -305,8 +305,22 @@
       <!-- 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>
+          <!-- one row per subscription; only the active one is polled -->
+          <div id="acc-switch" hidden>
+            <div class="set-hint set-hint-left">Accounts</div>
+            <div id="acc-list"></div>
+          </div>
+          <button id="acc-add" class="acc-link">+ Add another account</button>
           <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 +329,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,94 @@ function setPlan(node, plan) {
   }
 }
 window.api.onProfile(showProfile)
+
+// ---- accounts ---------------------------------------------------------------
+// The list is only worth showing once there are two; with a single account the
+// panel keeps the shape it has always had, plus the "add" link.
+let pendingRemove = null // id whose × is armed, so removal takes two clicks
+let lastAccounts = null
+
+function renderAccounts(a) {
+  lastAccounts = a
+  const list = a?.accounts || []
+  const box = el('acc-list')
+  el('acc-switch').hidden = list.length < 2
+  box.textContent = ''
+  box.classList.toggle('busy', !!a?.busy)
+  for (const acc of list) {
+    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)
+
+    // the first account holds the original install's data, and the active one
+    // is what the widget is showing — neither can be removed from under you
+    if (acc.id !== 'default' && !active) {
+      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
+          renderAccounts(a)
+        }
+      })
+      row.appendChild(x)
+    }
+
+    if (!active) row.addEventListener('click', () => switchAccount(acc.id))
+    box.appendChild(row)
+  }
+  fitSize()
+}
+
+// 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
+  renderAccounts({ ...lastAccounts, busy: id })
+  window.api.accountSwitch(id)
+}
+
+window.api.onAccounts((a) => {
+  pendingRemove = null
+  renderAccounts(a)
+})
+
+function endLogin() {
+  document.body.classList.remove('awaiting')
+  el('acc-paste').classList.remove('show')
+  el('acc-code').value = ''
+  el('acc-msg').textContent = ''
+}
+el('acc-add').addEventListener('click', () => {
+  el('acc-msg').textContent = ''
+  window.api.accountAdd() // switches to a fresh slot and opens the browser
+})
 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 +822,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,9 +880,13 @@ 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(() => {
+  document.body.classList.add('awaiting')
+  el('acc-paste').classList.add('show')
+  el('acc-code').focus()
   fitSize()
 })
 // the Connect button only lights up once there's a code to submit
@@ -1025,6 +1115,7 @@ if (typeof module === 'object' && module.exports) {
     renderProjects,
     renderHeat,
     showProfile,
+    renderAccounts,
     burn,
   }
 }

package/renderer/style.css

@@ -683,6 +683,109 @@ body.live .live-only {
   gap: 10px; /* the email ellipsizes instead of touching Disconnect */
   flex-wrap: wrap; /* the success line drops to its own row */
 }
+#acc-switch {
+  margin-top: 10px;
+}
+#acc-switch[hidden] {
+  display: none;
+}
+#acc-list {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2px;
+}
+#acc-list.busy {
+  pointer-events: none; /* one switch at a time */
+}
+/* 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; /* one row at a time, on hover: this deletes a token */
+  transition: opacity 0.15s;
+}
+.acc-item:hover .drop {
+  opacity: 0.6;
+}
+.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-add {
+  margin-top: 6px;
+}
+/* while a login is pending, "add another" would start a second one */
+body.awaiting #acc-add {
+  display: none;
+}
 #acc-paste {
   display: none;
   margin-top: 8px;
@@ -712,6 +815,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,
+}