clauddy 1.25.0 → 1.26.0

package/README.md

@@ -215,6 +215,7 @@ update-desktop-database ~/.local/share/applications 2>/dev/null
 
 - **Drag** the widget anywhere on screen
 - **–** minimizes to just the pet, ringed by the live session % (the number sits inside the ring) — or, with Claude and Codex both connected, one reading per service; the **⤢** button or a double-click on the pet expands it back
+- **Pet icon** in the compact header switches to **Just the pet** (floating mode). Drag the pet itself to move it. Hovering over the pet (or focusing it) reveals the usage glance; the small expand button in it returns to compact. Keyboard users can focus the pet and press Enter. The chosen size is remembered. In compact and pet-only modes, the pet follows whoever is working, with provider logos identifying Claude, Codex, or both. Usage selection stays manual; when neither is active the pet rests.
 - **⚙** opens settings (log in, toggle alerts, set thresholds, pick the display mode)
 - **↗** opens the official Usage page of the service on screen
 - **×** quits
@@ -228,6 +229,10 @@ Under **⚙ Settings → Preferences** you can pick where Clauddy lives:
 
 Switching is instant — no restart. (On Windows/Linux the icon lives in the system tray; the live % shows in its tooltip.)
 
+### Provider reactions
+
+When a provider's activity changes, the pet briefly glances toward it, with no caption. Both can be working at once. A glance never changes your selected provider, and glances share a 30-second cooldown. Inactivity is treated as a pause, not a completed task.
+
 ## Alerts
 
 Optional **macOS notifications**, toggled (with their thresholds) in **⚙ Settings**:
@@ -247,6 +252,12 @@ Percentages come from your account when you're logged in, and fall back to the l
 
 The first alert asks macOS for permission; after that the app shows up in **System Settings > Notifications** like any other.
 
+### Remind me at the session reset
+
+When the selected session crosses your first alert threshold, **Notify at reset** appears beneath the session details and in the compact monitor. Click to arm it; click **Reminder on** to cancel. This is a one-shot request, independent of the automatic threshold-alert toggle.
+
+Reminders survive restarts, belong to the Claude account or Codex connection that created them, and are canceled when you disconnect that source. Clauddy must be running to notify; an overdue reminder is delivered on reopening or waking up. A fresh, lower reading confirms that session budget returned and the pet celebrates. If usage hasn't refreshed — common with idle Codex logs — the reminder only says the scheduled reset time arrived and asks you to check usage.
+
 ## Configure (`config.json`)
 
 Settings saved from the UI live in `~/.claude-usage-monitor/config.json`, so you can tweak them without rebuilding:

package/main.js

@@ -19,6 +19,7 @@ const { getUsage } = usage
 const auth = require('./auth')
 const accounts = require('./accounts')
 const codex = require('./codex')
+const { createReminders } = require('./reminders')
 
 const REPO = 'renatoaug/claude-usage-monitor'
 const USAGE_URLS = {
@@ -50,6 +51,7 @@ const WINDOW_STATE = path.join(DATA_DIR, 'window.json')
 
 let win
 let pollTimer
+let petPointerTimer
 let config
 let doTick = null
 const W = 304
@@ -61,6 +63,8 @@ let trayBounds = null // last known tray icon rect, to anchor the popover
 let lastBlurHide = 0 // debounce: ignore the tray click that dismissed the popover
 let sessionPct = null // authoritative session % shown in the tray title
 let codexUsage = null // last Codex payload, null while it isn't enabled
+let realUsageAt = 0
+let codexReadAt = 0
 let realUsage = null // last OAuth usage payload — the % alerts trust when logged in
 let lastProgrammaticMove = 0 // ignore the 'moved' event our own setPosition triggers
 let displayChanging = 0 // ignore OS window-shuffles while a display (dis)connects
@@ -153,6 +157,96 @@ function notify(title, body, { silent = true } = {}) {
   n.show()
 }
 
+// Explicit reminders survive restarts and belong to the account that armed them.
+const REMINDERS_FILE = path.join(DATA_DIR, 'reset-reminders.json')
+const resetReminders = createReminders({
+  now: () => Date.now(),
+  load: () => JSON.parse(fs.readFileSync(REMINDERS_FILE, 'utf8')),
+  save: (data) => {
+    fs.mkdirSync(DATA_DIR, { recursive: true })
+    const tmp = `${REMINDERS_FILE}.tmp`
+    fs.writeFileSync(tmp, JSON.stringify(data))
+    fs.renameSync(tmp, REMINDERS_FILE)
+  },
+})
+const reminderKey = (provider) => (provider === 'codex' ? 'codex' : `claude:${accounts.activeId()}`)
+function sendReminders(error = null) {
+  if (!win || win.isDestroyed()) return
+  win.webContents.send('reminders', {
+    claude: resetReminders.list().find((r) => r.key === reminderKey('claude')) || null,
+    codex: resetReminders.list().find((r) => r.key === 'codex') || null,
+    error,
+  })
+}
+function cancelReminder(key) {
+  try {
+    resetReminders.cancel(key)
+    sendReminders()
+    return true
+  } catch (err) {
+    console.error('reset reminder:', err)
+    sendReminders('Could not cancel the reminder. Please try again.')
+    return false
+  }
+}
+function checkResetReminders() {
+  try {
+    for (const r of resetReminders.list()) {
+      const connected =
+        r.provider === 'codex'
+          ? config.codex?.enabled
+          : accounts.list().some((a) => r.key === `claude:${a.id}` && hasToken(a.id))
+      if (!connected && !cancelReminder(r.key)) return
+    }
+    const due = resetReminders.takeDue()
+    for (const r of due) {
+      const isCurrent = r.provider === 'codex' || r.key === reminderKey('claude')
+      const session = r.provider === 'codex' ? codexUsage?.session : realUsage?.session
+      const readAt = r.provider === 'codex' ? codexUsage?.limitsAt : realUsageAt
+      const confirmed = isCurrent && readAt >= r.at && session?.pct != null && session.pct < r.pct
+      const message = confirmed
+        ? `${r.label}: session budget is available again.`
+        : `${r.label}: the scheduled session reset time has arrived. Open usage to confirm the new budget.`
+      notify(
+        confirmed ? 'Your session budget is back' : 'Time to check your session budget',
+        message,
+      )
+      if (win && !win.isDestroyed())
+        win.webContents.send('reminder-due', { ...r, confirmed, isCurrent })
+    }
+    if (due.length) sendReminders()
+  } catch (err) {
+    console.error('reset reminder:', err)
+  }
+}
+ipcMain.on('set-reminder', (_e, provider, enabled) => {
+  if (!['claude', 'codex'].includes(provider) || typeof enabled !== 'boolean') return
+  const key = reminderKey(provider)
+  if (!enabled) return cancelReminder(key)
+  const cx = provider === 'codex'
+  const session = cx ? codexUsage?.session : realUsage?.session
+  const at = (cx ? codexReadAt : realUsageAt) + (session?.resetMs || 0)
+  const freshAt = cx ? codexUsage?.limitsAt : realUsageAt
+  const connected = cx ? config.codex?.enabled : auth.isConnected()
+  if (
+    !connected ||
+    !freshAt ||
+    Date.now() - freshAt > 15 * 60000 ||
+    !Number.isFinite(session?.pct)
+  ) {
+    return sendReminders('Wait for a fresh usage reading before setting a reminder.')
+  }
+  try {
+    const label = cx ? 'Codex' : `Claude · ${accounts.active().label || 'your account'}`
+    if (!resetReminders.arm({ key, provider, label, at, pct: session.pct })) {
+      return sendReminders('This reset time has passed. Wait for a fresh reading.')
+    }
+    sendReminders()
+  } catch {
+    sendReminders('Could not save the reminder. Please try again.')
+  }
+})
+
 // the alert lines carry the reset, since "what do I do about it" is a question
 // about time left, not about the threshold that happened to fire
 function resetLine(resetMs, withRemaining) {
@@ -232,7 +326,14 @@ function checkWindowReset(config, pct) {
   if (pct == null) return
   const was = lastSessionPct
   lastSessionPct = pct
-  if (config.alerts && was != null && was >= RESET_FROM && pct <= RESET_TO) {
+  if (
+    config.alerts &&
+    was != null &&
+    was >= RESET_FROM &&
+    pct <= RESET_TO &&
+    !resetReminders.list().some((r) => r.key === reminderKey('claude')) &&
+    !resetReminders.recentlyDelivered(reminderKey('claude'))
+  ) {
     notify('Session window reset', 'full budget again')
   }
   if (was == null || Math.round(was) !== Math.round(pct)) saveAlertState()
@@ -259,6 +360,7 @@ function applyAccount(acc) {
   lastSessionPct = null
   lastSeenTokens = null // the new account's first read is a baseline, not a spend
   loadAlertState()
+  sendReminders()
 }
 
 // `connected` is read off disk rather than through auth, which only ever knows
@@ -346,7 +448,10 @@ ipcMain.on('accounts-cancel-add', () => {
   switchAccount(from) // the empty slot is pruned on the way out
 })
 ipcMain.on('accounts-remove', (_e, id) => {
-  if (accounts.remove(String(id))) sendAccounts()
+  if (accounts.remove(String(id))) {
+    cancelReminder(`claude:${id}`)
+    sendAccounts()
+  }
 })
 
 function createWindow() {
@@ -438,12 +543,14 @@ function createWindow() {
     try {
       const c = config.codex?.enabled ? codex.getCodexUsage() : null
       codexUsage = c
+      codexReadAt = Date.now()
       win.webContents.send('codex', c)
       checkCodexAlerts(config, c)
       updateTray()
     } catch (err) {
       console.error('codex:', err)
     }
+    checkResetReminders()
   }
   doTick = tick
 
@@ -451,6 +558,7 @@ function createWindow() {
     tick()
     win.webContents.send('config', publicConfig(config))
     win.webContents.send('version', app.getVersion())
+    sendReminders()
     win.webContents.send('auth-state', { connected: auth.isConnected() })
     sendAccounts()
     pollTimer = setInterval(tick, config.pollIntervalMs)
@@ -659,12 +767,38 @@ function updateTray() {
 // send real usage to the renderer and refresh the tray title in one place
 function pushRealUsage(u) {
   realUsage = u
+  realUsageAt = u ? Date.now() : 0
   sessionPct = u?.session ? u.session.pct : null
   updateTray()
   checkScopedAlerts(config, u)
   if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
 }
 
+// Native drag regions swallow renderer pointer events. Poll only in pet-only
+// mode so its hover still works while the sprite remains a native drag handle.
+ipcMain.on('pet-pointer-watch', (_e, enabled) => {
+  if (typeof enabled !== 'boolean') return
+  clearInterval(petPointerTimer)
+  petPointerTimer = null
+  if (!enabled) return
+  let last // only a moved cursor crosses IPC, not ten idle messages a second
+  petPointerTimer = setInterval(() => {
+    if (!win || win.isDestroyed()) return
+    let point = null
+    if (win.isVisible()) {
+      const cursor = screen.getCursorScreenPoint()
+      const bounds = win.getContentBounds()
+      const x = cursor.x - bounds.x
+      const y = cursor.y - bounds.y
+      if (x >= 0 && y >= 0 && x < bounds.width && y < bounds.height) point = { x, y }
+    }
+    const key = point ? `${point.x},${point.y}` : ''
+    if (key === last) return
+    last = key
+    win.webContents.send('pet-pointer', point)
+  }, 100)
+})
+
 // resize the window to fit the content
 ipcMain.on('resize', (_e, w, h) => {
   if (!win || win.isDestroyed()) return
@@ -742,9 +876,11 @@ function scheduleUsagePoll() {
   if (auth.isConnected()) usageTimer = setTimeout(pollUsage, usageBackoff)
 }
 async function pollUsage() {
+  const accountId = accounts.activeId()
   lastPollAt = Date.now()
   try {
     const u = await auth.fetchUsage()
+    if (accountId !== accounts.activeId()) return
     usageBackoff = 5 * 60 * 1000
     authFails = 0
     pushRealUsage(u)
@@ -756,6 +892,7 @@ async function pollUsage() {
       sendProfile()
     }
   } catch (e) {
+    if (accountId !== accounts.activeId()) return
     if (e && e.status === 429) {
       usageBackoff = Math.min(usageBackoff * 2, 30 * 60 * 1000)
     } else if (e && e.status === 401) {
@@ -870,6 +1007,7 @@ ipcMain.on('auth-code', async (_e, code) => {
   }
 })
 ipcMain.on('auth-logout', () => {
+  cancelReminder(reminderKey('claude'))
   auth.clear()
   clearTimeout(usageTimer)
   pushRealUsage(null)
@@ -885,7 +1023,10 @@ ipcMain.on('auth-logout', () => {
 function setCodexEnabled(on) {
   writeConfigPatch({ codex: { ...(config.codex || {}), enabled: on } })
   config = loadConfig()
-  if (!on) codexUsage = null
+  if (!on) {
+    codexUsage = null
+    cancelReminder('codex')
+  }
   if (win && !win.isDestroyed()) win.webContents.send('config', publicConfig(config))
   if (doTick) doTick()
   updateTray()
@@ -1029,6 +1170,7 @@ app.whenReady().then(() => {
 
 app.on('window-all-closed', () => {
   if (pollTimer) clearInterval(pollTimer)
+  clearInterval(petPointerTimer)
   fs.unwatchFile(DEBUG_FILE)
   destroyTray()
   app.quit()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clauddy",
   "desktopName": "clauddy.desktop",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {
@@ -15,6 +15,7 @@
     "auth.js",
     "accounts.js",
     "codex.js",
+    "reminders.js",
     "config.json",
     "renderer"
   ],
@@ -75,6 +76,7 @@
       "auth.js",
       "accounts.js",
       "codex.js",
+      "reminders.js",
       "config.json",
       "renderer/**",
       "build/trayTemplate.png",

package/preload.js

@@ -1,6 +1,11 @@
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('api', {
+  watchPetPointer: (enabled) => ipcRenderer.send('pet-pointer-watch', enabled),
+  onPetPointer: (cb) => ipcRenderer.on('pet-pointer', (_e, point) => cb(point)),
+  setReminder: (provider, enabled) => ipcRenderer.send('set-reminder', provider, enabled),
+  onReminders: (cb) => ipcRenderer.on('reminders', (_e, state) => cb(state)),
+  onReminderDue: (cb) => ipcRenderer.on('reminder-due', (_e, event) => cb(event)),
   onUsage: (cb) => ipcRenderer.on('usage', (_e, data) => cb(data)),
   onError: (cb) => ipcRenderer.on('usage-error', (_e, msg) => cb(msg)),
   onConfig: (cb) => ipcRenderer.on('config', (_e, cfg) => cb(cfg)),

package/reminders.js

@@ -0,0 +1,53 @@
+// One-shot reset reminders, independent of automatic threshold alerts.
+function createReminders({ load, save, now = Date.now }) {
+  let pending = []
+  let delivered = {}
+  const valid = (r) =>
+    r &&
+    ['claude', 'codex'].includes(r.provider) &&
+    typeof r.key === 'string' &&
+    typeof r.label === 'string' &&
+    Number.isFinite(r.at) &&
+    Number.isFinite(r.pct)
+  try {
+    const data = load()
+    pending = Array.isArray(data?.pending) ? data.pending.filter(valid) : []
+    delivered = data?.delivered || {}
+  } catch {}
+  function persist(nextPending, nextDelivered = delivered) {
+    const recent = Object.fromEntries(
+      Object.entries(nextDelivered).filter(([, at]) => Number.isFinite(at) && now() - at < 3600000),
+    )
+    save({ pending: nextPending, delivered: recent })
+    pending = nextPending
+    delivered = recent
+  }
+  return {
+    list: () => pending.map((r) => ({ ...r })),
+    arm(reminder) {
+      if (!valid(reminder) || reminder.at <= now() || reminder.at > now() + 7 * 86400000)
+        return false
+      persist([...pending.filter((r) => r.key !== reminder.key), { ...reminder }])
+      return true
+    },
+    cancel(key) {
+      const found = pending.some((r) => r.key === key)
+      if (found) persist(pending.filter((r) => r.key !== key))
+    },
+    takeDue() {
+      const due = pending.filter((r) => r.at <= now())
+      if (!due.length) return []
+      const nextDelivered = { ...delivered }
+      for (const r of due) nextDelivered[r.key] = now()
+      // Consume before delivering: restart must not replay it.
+      persist(
+        pending.filter((r) => r.at > now()),
+        nextDelivered,
+      )
+      return due
+    },
+    recentlyDelivered: (key) => Number.isFinite(delivered[key]) && now() - delivered[key] < 3600000,
+  }
+}
+
+module.exports = { createReminders }

package/renderer/companion.js

@@ -0,0 +1,48 @@
+// A quiet transition detector. Startup and reconnects establish a baseline;
+// inactivity is a pause, never proof that an agent finished its task.
+;((root) => {
+  function createActivityTracker({ now = Date.now, cooldown = 30000 } = {}) {
+    const seen = new Map()
+    let lastCue = -Infinity
+    return {
+      forget(provider) {
+        seen.delete(provider)
+      },
+      observe(provider, data) {
+        if (!data) {
+          seen.delete(provider)
+          return null
+        }
+        const next = { active: !!data.active, activity: data.activity || 'working' }
+        const previous = seen.get(provider)
+        seen.set(provider, next)
+        if (!previous) return null
+        const changed =
+          next.active !== previous.active || (next.active && next.activity !== previous.activity)
+        if (!changed || now() - lastCue < cooldown) return null
+        lastCue = now()
+        return { provider, activity: next.active ? next.activity : 'paused' }
+      },
+    }
+  }
+  // Activity freshness is separate from quota freshness: Codex can work while
+  // its last rate-limit reading is old. Ignore abandoned activity snapshots.
+  const FRESH_MS = 60000
+  const SLEEP_MS = 300000 // main's default sleepThresholdMs; Codex has no flag of its own
+  function currentActivity(claude, codex, now = Date.now()) {
+    const fresh = (at) => Number.isFinite(at) && now - at <= FRESH_MS
+    const providers = []
+    if (claude?.active && fresh(claude.ts)) providers.push('claude')
+    if (codex?.active && fresh(codex.lastSeen)) providers.push('codex')
+    // only Claude's logs say *what* it's doing; two workers share one scene
+    const activity = providers.join() === 'claude' ? claude.activity || 'working' : 'working'
+    const asleep = [
+      claude && !!claude.sleeping,
+      codex && !!codex.lastSeen && now - codex.lastSeen >= SLEEP_MS,
+    ].filter((v) => v !== null && v !== undefined)
+    return { providers, activity, sleeping: asleep.length > 0 && asleep.every(Boolean) }
+  }
+  const api = { createActivityTracker, currentActivity }
+  if (typeof module === 'object' && module.exports) module.exports = api
+  else root.Companion = api
+})(globalThis)

package/renderer/index.html

@@ -46,6 +46,9 @@
             <path d="M7 7h10v10M7 17 17 7" />
           </svg>
         </button>
+        <button id="pet-only-toggle" title="Just the pet" aria-label="Just the pet">
+          <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v4h3v10h-3v3h-3v-3H8v3H5v-3H2V8h3Z"/><path d="M8 11v2m8-2v2"/></svg>
+        </button>
         <button id="min" title="Minimize / expand">
           <svg class="ic ic-min" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M5 12h14" />
@@ -202,7 +205,7 @@
           <span id="mini-acct-name"></span>
           <span id="mini-acct-plan" class="plan-badge" hidden></span>
         </div>
-        <div class="mini-line"><span id="mini-dot"></span><span id="mini-text">idle</span></div>
+        <div class="mini-line"><span id="mini-dot"></span><span id="mini-workers" class="activity-logos" role="img" hidden><span data-provider="claude"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg></span><span data-provider="codex"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg></span></span><span id="mini-text">idle</span></div>
         <div id="mini-pct-row"><span id="mini-pct">0%</span> <span class="lbl">session</span></div>
         <!-- Dual-service dock: two glanceable readings, one shared pet. -->
         <div id="mini-dual">
@@ -214,8 +217,17 @@
           </button>
         </div>
         <div id="mini-reset" hidden></div>
+        <button type="button" id="mini-reminder" class="reminder-toggle" hidden></button>
       </div>
 
+      <div id="pet-activity" class="activity-logos" role="img" hidden><span data-provider="claude"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg></span><span data-provider="codex"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg></span></div>
+      <section id="pet-glance" aria-label="Session usage">
+        <button type="button" data-provider="claude" id="glance-claude"><svg class="mini-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg><span>Claude</span><b id="glance-claude-value">—</b></button>
+        <button type="button" data-provider="codex" id="glance-codex"><svg class="mini-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg><span>Codex</span><b id="glance-codex-value">—</b></button>
+        <span id="glance-empty" hidden>Connect an account in Settings.</span>
+        <button type="button" id="pet-restore" aria-label="Open compact monitor" title="Open compact monitor"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7" /></svg></button>
+      </section>
+      <div id="companion-notice" role="status" hidden></div>
       <!-- collapsible content -->
       <div id="content">
         <!-- status -->
@@ -241,6 +253,7 @@
                 <div class="meter-top"><span>current session</span><span id="session-pct">0%</span></div>
                 <div class="track"><div class="fill" id="session-fill"></div></div>
                 <div class="sub" id="session-sub">no active session</div>
+            <button type="button" id="reminder-toggle" class="reminder-toggle" hidden></button>
                 <div class="sub proj" id="session-proj" hidden></div>
               </div>
               <div class="meter">
@@ -418,6 +431,7 @@
     </div>
     <script src="burn.js"></script>
 <script src="voice.js"></script>
+<script src="companion.js"></script>
 <script src="pet.js"></script>
   </body>
 </html>

package/renderer/pet.js

@@ -503,7 +503,7 @@ function moodOf(st) {
 // mini face has room for a glance, not a sentence, so it gets the short one.
 // `force` is the simulator's: it skips the gates but still respects the mute
 function say(line, { headline = false, mood = 'normal', force = false } = {}) {
-  if (!line) return false
+  if (!line || document.body.classList.contains('pet-only')) return false
   const collapsed = document.body.classList.contains('collapsed')
   const text = typeof line === 'string' ? line : collapsed ? line.short : line.text
   if (!force) {
@@ -743,8 +743,8 @@ el('mute').addEventListener('click', (e) => {
 
 // ---- services ---------------------------------------------------------------
 // Claude and Codex are monitored side by side, but the panel shows one at a
-// time: the tabs under the pet pick which one owns the chip, the pet, the
-// meters, the breakdowns and the Usage arrow.
+// time: tabs own the chip, meters, breakdowns and Usage arrow. The expanded
+// scene follows that view; compact pets follow activity across both services.
 const PROVIDER_KEY = 'clauddy.provider'
 let codexData = null // last Codex payload; null while Codex isn't enabled
 let pickedProvider = (() => {
@@ -899,12 +899,203 @@ el('harness-tabs').addEventListener('keydown', (e) => {
   el(`tab-${providers[next]}`).focus()
 })
 
+// ---- companion: pet-only size, reset reminders, and provider reactions -------
+const SIZE_KEY = 'clauddy.size'
+let sizeLoaded = false
+let peekTimer = null
+let nativePetInside = null
+let noticeTimer = null
+let reminders = { claude: null, codex: null }
+const activityTracker = Companion.createActivityTracker()
+
+function setPetPeek(on) {
+  if (!document.body.classList.contains('pet-only')) return
+  clearTimeout(peekTimer)
+  document.body.classList.toggle('pet-peek', on)
+}
+function setDisplaySize(size, remember = true) {
+  if (!['expanded', 'compact', 'pet'].includes(size)) size = 'expanded'
+  if (currentConfig.mode === 'menubar' && size === 'pet') size = 'compact'
+  hideBubble()
+  clearTimeout(peekTimer)
+  document.body.classList.remove('pet-peek')
+  document.body.classList.toggle('collapsed', size !== 'expanded')
+  document.body.classList.toggle('pet-only', size === 'pet')
+  nativePetInside = null
+  window.api.watchPetPointer(size === 'pet')
+  el('pet').tabIndex = size === 'pet' ? 0 : -1
+  if (size === 'pet') {
+    el('pet').setAttribute('role', 'button')
+    el('pet').setAttribute('aria-label', 'Drag to move; press Enter to open compact monitor')
+  } else {
+    el('pet').removeAttribute('role')
+    el('pet').removeAttribute('aria-label')
+  }
+  if (remember) {
+    try {
+      localStorage.setItem(SIZE_KEY, size)
+    } catch {}
+  }
+  paint()
+  fitSize()
+}
+el('pet-only-toggle').addEventListener('click', () => setDisplaySize('pet'))
+el('pet-restore').addEventListener('click', () => setDisplaySize('compact'))
+window.api.onPetPointer((point) => {
+  if (!document.body.classList.contains('pet-only')) return
+  const contains = (rect) =>
+    point &&
+    point.x >= rect.left &&
+    point.x <= rect.right &&
+    point.y >= rect.top &&
+    point.y <= rect.bottom
+  // Keep the preview open across the small gap to its controls. It opens from
+  // the sprite, not from the otherwise empty space below it.
+  const inside = !!(
+    contains(el('pet').getBoundingClientRect()) ||
+    (document.body.classList.contains('pet-peek') && contains(el('card').getBoundingClientRect()))
+  )
+  if (inside === nativePetInside) return
+  nativePetInside = inside
+  clearTimeout(peekTimer)
+  if (inside) setPetPeek(true)
+  else peekTimer = setTimeout(() => setPetPeek(false), 180)
+})
+window.addEventListener('blur', () => setPetPeek(false))
+el('card').addEventListener('focusin', () => setPetPeek(true))
+el('card').addEventListener('focusout', (e) => {
+  if (!el('card').contains(e.relatedTarget)) setPetPeek(false)
+})
+el('pet').addEventListener('keydown', (e) => {
+  if (!document.body.classList.contains('pet-only')) return
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    setDisplaySize('compact')
+  } else if (e.key === 'Escape') {
+    el('pet').blur()
+    setPetPeek(false)
+  }
+})
+for (const button of document.querySelectorAll('#pet-glance button[data-provider]')) {
+  button.addEventListener('click', () => pickProvider(button.dataset.provider))
+}
+function paintCompanion(view) {
+  for (const provider of ['claude', 'codex']) {
+    const connected = provider === 'claude' ? claudeOn() : codexOn()
+    const session = provider === 'claude' ? realUsage?.session : codexData?.session
+    const button = el(`glance-${provider}`)
+    button.hidden = !connected
+    button.setAttribute('aria-pressed', String(provider === view))
+    button.classList.toggle('urgent', session?.pct >= warnAt())
+    el(`glance-${provider}-value`).textContent = pctText(session?.pct)
+    const stale = provider === 'codex' && codexStale(codexData)
+    button.title = stale
+      ? 'Last recorded usage · waiting for a fresh reading'
+      : `Show ${provider} usage`
+    button.classList.toggle('stale-reading', !!stale)
+  }
+  el('glance-empty').hidden = claudeOn() || codexOn()
+  const session = view === 'claude' ? realUsage?.session : codexData?.session
+  const reminder = reminders[view]
+  const stale =
+    view === 'codex'
+      ? !codexData?.limitsAt || codexStale(codexData)
+      : !realUsageReadAt || Date.now() - realUsageReadAt > STALE_MS
+  const available = session?.pct != null && session.resetMs > 0 && !stale
+  const name = view === 'codex' ? 'Codex' : 'Claude'
+  for (const id of ['reminder-toggle', 'mini-reminder']) {
+    const button = el(id)
+    button.hidden = !reminder && (!available || session.pct < warnAt())
+    button.setAttribute('aria-pressed', String(!!reminder))
+    button.textContent = reminder ? '✓ Reminder on' : 'Notify at reset'
+    button.title = reminder
+      ? `Cancel ${name} reminder for ${new Date(reminder.at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`
+      : `Remind me when ${name}'s session reset is due`
+  }
+}
+function companionNotice(text, provider = null) {
+  clearTimeout(noticeTimer)
+  const notice = el('companion-notice')
+  notice.textContent = text
+  notice.title = text
+  notice.dataset.provider = provider || ''
+  notice.hidden = false
+  fitSize()
+  noticeTimer = setTimeout(() => {
+    notice.hidden = true
+    fitSize()
+  }, 5000)
+}
+for (const id of ['reminder-toggle', 'mini-reminder']) {
+  el(id).addEventListener('click', () => {
+    const provider = viewProvider()
+    window.api.setReminder(provider, !reminders[provider])
+  })
+}
+window.api.onReminders((state) => {
+  reminders = state || { claude: null, codex: null }
+  if (state?.error) companionNotice(state.error)
+  paintCompanion(viewProvider())
+  fitSize()
+})
+window.api.onReminderDue((event) => {
+  if (!event.isCurrent) return
+  const name = event.provider === 'codex' ? 'Codex' : 'Claude'
+  companionNotice(
+    event.confirmed ? `${name} · budget is back!` : `${name} · reset time reached`,
+    event.provider,
+  )
+  if (event.confirmed) celebrate()
+})
+function reactToProvider(provider, data) {
+  // no caption: the eyes glance toward whichever service changed
+  const cue = activityTracker.observe(provider, data)
+  if (!cue || document.body.classList.contains('settings-open')) return
+  if (!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+    const x = provider === 'codex' ? 3 : -3
+    el('eyes').animate(
+      [
+        { transform: 'translateX(0)' },
+        { transform: `translateX(${x}px)`, offset: 0.3 },
+        { transform: `translateX(${x}px)`, offset: 0.7 },
+        { transform: 'translateX(0)' },
+      ],
+      { duration: 1100, easing: 'ease-in-out' },
+    )
+  }
+}
+
+function paintActivity() {
+  const activity = Companion.currentActivity(
+    claudeOn() ? claudeActivityData : null,
+    codexOn() ? codexData : null,
+  )
+  const names = activity.providers.map((p) => (p === 'claude' ? 'Claude' : 'Codex')).join(' + ')
+  const label = names ? `${names} · ${activity.activity}` : ''
+  for (const id of ['pet-activity', 'mini-workers']) {
+    const badge = el(id)
+    badge.hidden = !names
+    badge.setAttribute('aria-label', label)
+    for (const logo of badge.querySelectorAll('[data-provider]')) {
+      logo.hidden = !activity.providers.includes(logo.dataset.provider)
+    }
+  }
+  el('mini-dot').hidden =
+    activity.providers.length > 0 && document.body.classList.contains('collapsed')
+  return activity
+}
+
 // main render
 let prevState = null
 const prevPct = {} // per service: a switch must not read as a reset
 let lastData = null
+// Claude's activity, kept apart from lastData: an account switch or a logout
+// must drop the old account's worker at once, not a tick later
+let claudeActivityData = null
 function render(d) {
+  if (claudeOn()) reactToProvider('claude', d)
   lastData = d
+  claudeActivityData = claudeOn() ? d : null
   noteSession(d)
   // the burn trail is Claude's, fed on every Claude tick whatever is on screen
   const cl = realUsage
@@ -918,6 +1109,7 @@ function paint() {
   if (!d0) return
   const view = viewProvider()
   paintServices(view)
+  paintCompanion(view)
   const isCodex = view === 'codex' && !!codexData
   const cv = isCodex ? codexView(codexData) : null
   const d = isCodex ? cv.d : d0
@@ -945,6 +1137,12 @@ function paint() {
             : 'idle'
   const acts = ['editing', 'reading', 'planning', 'running', 'researching', 'delegating', 'waiting']
   let curActivity = d.activity
+  const activity = paintActivity()
+  const collapsedNow = document.body.classList.contains('collapsed')
+  if (collapsedNow) {
+    st = activity.providers.length ? 'working' : activity.sleeping ? 'sleeping' : 'idle'
+    curActivity = activity.providers.length ? activity.activity : null
+  }
   // dev override from `./pet <state>` (base states or an activity name)
   if (debugState) {
     const map = {
@@ -1051,7 +1249,9 @@ function paint() {
   el('month-total').textContent = d.monthTokens == null ? '—' : `${fmtTokens(d.monthTokens)} tokens`
   paintChip()
 
-  currentRate = d.tokensPerMin || 0
+  // compact eats at Claude's pace only while Claude is one of the workers
+  const claudeRate = !collapsedNow || activity.providers.includes('claude')
+  currentRate = claudeRate ? (collapsedNow ? d0 : d).tokensPerMin || 0 : 0
   if (st === 'working') {
     if (!eating) {
       eating = true
@@ -1075,7 +1275,8 @@ function fitSize() {
     const zoom = Number.parseFloat(document.body.style.zoom) || 1
     // The dual-service dock trades height for a little horizontal room.
     const dual = document.body.classList.contains('dual')
-    const w = (collapsed ? (dual ? 240 : 168) : 304) * zoom
+    const petOnly = document.body.classList.contains('pet-only')
+    const w = (petOnly ? 168 : collapsed ? (dual ? 240 : 192) : 304) * zoom
     // offsetHeight never reflects a CSS zoom applied to an ancestor (confirmed
     // empirically against this Electron build) — so measure the unzoomed content
     // height, then scale the whole thing (content + margin) ourselves
@@ -1096,6 +1297,7 @@ function applyZoom(z) {
 
 let currentConfig = {}
 let realUsage = null
+let realUsageReadAt = 0
 let debugState = null
 window.api.onDebugState((o) => {
   const s = o?.state
@@ -1115,6 +1317,17 @@ window.api.onConfig((cfg) => {
   document.body.classList.toggle('is-menubar', currentConfig.mode === 'menubar')
   document.body.classList.toggle('codex-on', !!currentConfig.codex)
   if (!currentConfig.codex) codexData = null
+  if (!currentConfig.codex) activityTracker.forget('codex')
+  if (!sizeLoaded) {
+    sizeLoaded = true
+    let size = 'expanded'
+    try {
+      size = localStorage.getItem(SIZE_KEY) || size
+    } catch {}
+    setDisplaySize(size, false)
+  } else if (currentConfig.mode === 'menubar' && document.body.classList.contains('pet-only')) {
+    setDisplaySize('compact', false)
+  }
   heardConfig = true
   paintMute()
   paint()
@@ -1123,16 +1336,20 @@ window.api.onConfig((cfg) => {
 })
 window.api.onCodex((c) => {
   codexData = c || null
+  reactToProvider('codex', codexOn() ? c : null)
   paint()
 })
 window.api.onRealUsage((u) => {
   realUsage = u || null
+  realUsageReadAt = u ? Date.now() : 0
   if (lastData) render(lastData)
 })
 window.api.onAuthState((s) => {
   const on = !!s?.connected
   document.body.classList.toggle('auth-on', on)
   if (!on) {
+    activityTracker.forget('claude')
+    claudeActivityData = null
     realUsage = null
     document.body.classList.remove('live')
     // main sends this before it opens the browser for a new login, so the
@@ -1342,8 +1559,13 @@ function switchAccount(id) {
 }
 
 window.api.onAccounts((a) => {
+  if (lastAccounts?.active !== a?.active) {
+    activityTracker.forget('claude')
+    claudeActivityData = null
+  }
   pendingRemove = null
   renderAccounts(a)
+  paint()
 })
 
 // closing the panel while a login is pending gives up on it: main puts us back
@@ -1636,7 +1858,7 @@ function populateSettings() {
 }
 function openSettings() {
   hideBubble()
-  document.body.classList.remove('collapsed')
+  setDisplaySize('expanded', false)
   populateSettings()
   document.body.classList.add('settings-open')
   fitSize()
@@ -1728,18 +1950,19 @@ el('set-save').addEventListener('click', () => {
 })
 el('min').addEventListener('click', () => {
   hideBubble()
-  document.body.classList.toggle('collapsed')
-  fitSize()
+  setDisplaySize(document.body.classList.contains('collapsed') ? 'expanded' : 'compact')
 })
 // double-click the pet to collapse / expand
 el('pet').addEventListener('dblclick', () => {
+  if (document.body.classList.contains('pet-only')) return
   hideBubble()
-  document.body.classList.toggle('collapsed')
-  fitSize()
+  setDisplaySize(document.body.classList.contains('collapsed') ? 'expanded' : 'compact')
 })
 
 // poke the pet -> bouncy squish + hearts
-el('pet').addEventListener('click', () => pokePet())
+el('pet').addEventListener('click', () => {
+  if (!document.body.classList.contains('pet-only')) pokePet()
+})
 
 // eyes follow the cursor
 const eyesG = el('eyes')
@@ -1785,6 +2008,10 @@ if (typeof module === 'object' && module.exports) {
     say,
     hideBubble,
     soundOn,
+    setDisplaySize,
+    setPetPeek,
+    paintCompanion,
+    activityTracker,
     blipper,
   }
 }

package/renderer/style.css

@@ -316,6 +316,11 @@ body.collapsed #account-chip {
   display: none;
 }
 /* collapsed: the account rides up on the button line, like the chip does */
+/* collapsed, the buttons share the account's line: centre them on it
+   (top 6px + half its 19px), not on the expanded 38px title band */
+body.collapsed #controls {
+  height: 31px;
+}
 body.collapsed #mini-acct {
   position: absolute;
   top: 6px;
@@ -1238,6 +1243,18 @@ body.collapsed #card {
   width: 144px;
   padding: 12px 12px 13px;
 }
+/* one service: three buttons plus the account need a title band of their
+   own, like the dual dock has, or they sit on the ring's arc */
+body.collapsed:not(.dual):not(.pet-only) #card {
+  width: 168px;
+  padding-top: 32px;
+}
+body.collapsed:not(.dual):not(.pet-only) #stage {
+  margin-top: 0;
+}
+body.collapsed:not(.dual):not(.pet-only) #mini-acct-name {
+  max-width: 46px;
+}
 body.collapsed #stage {
   margin-top: 9px;
 }
@@ -3020,3 +3037,258 @@ body.collapsed #mute {
     animation: none;
   }
 }
+
+/* Companion controls stay quiet until they are useful. */
+#controls #pet-only-toggle,
+#pet-glance {
+  display: none;
+}
+body.collapsed:not(.pet-only):not(.is-menubar) #controls #pet-only-toggle {
+  display: grid;
+}
+.reminder-toggle {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  margin-top: 4px;
+  padding: 2px 6px;
+  border: 1px solid var(--hair);
+  border-radius: 5px;
+  background: #ffffff04;
+  color: #cfc0ac;
+  font: inherit;
+  font-size: 10px;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+}
+.reminder-toggle[hidden] {
+  display: none;
+}
+.reminder-toggle[aria-pressed="true"] {
+  color: #bed4aa;
+  border-color: #bed4aa33;
+}
+.reminder-toggle:hover {
+  background: #ffffff0c;
+}
+#mini-reminder {
+  font-size: 8px;
+  min-height: 20px;
+}
+body.collapsed.dual #mini-reminder {
+  float: right;
+}
+#companion-notice {
+  grid-column: 1 / -1;
+  padding: 6px 8px;
+  margin-top: 6px;
+  border-radius: 6px;
+  background: #ffffff07;
+  color: #d5c6b6;
+  font-size: 10px;
+  line-height: 1.4;
+  text-align: center;
+  -webkit-app-region: no-drag;
+}
+#companion-notice[data-provider="codex"] {
+  color: #c1d1b8;
+}
+#companion-notice[hidden],
+body.settings-open #companion-notice {
+  display: none;
+}
+/* Hover only fades the glance in; neither the window nor the pet moves. */
+body.collapsed.pet-only #card {
+  width: 144px;
+  height: 166px;
+  padding: 0;
+  display: block;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  overflow: visible;
+  -webkit-app-region: no-drag;
+}
+body.collapsed.pet-only #stage {
+  position: absolute;
+  width: 100px;
+  height: 102px;
+  right: 21px;
+  bottom: 38px;
+  margin: 0;
+  background: none;
+}
+body.collapsed.pet-only #pet {
+  zoom: 1.05;
+  transform: none;
+  transition: none;
+  cursor: grab;
+  -webkit-app-region: drag;
+}
+body.collapsed.pet-only #pet:active {
+  cursor: grabbing;
+}
+body.collapsed.pet-only :is(#mini, #controls, #ring, #ring-pct, #companion-notice, #bubble) {
+  display: none;
+}
+body.collapsed.pet-only #pet-glance {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  left: 50%;
+  width: max-content;
+  max-width: calc(100% - 2px);
+  transform: translateX(-50%);
+  bottom: 2px;
+  min-height: 32px;
+  padding: 2px 5px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  font-size: 10px;
+  color: var(--muted);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 160ms ease,
+    visibility 160ms,
+    background 160ms ease,
+    border-color 160ms ease;
+  -webkit-app-region: no-drag;
+}
+body.collapsed.pet-only.pet-peek #pet-glance {
+  background: #221e1bec;
+  border-color: #ffffff0d;
+  opacity: 1;
+  visibility: visible;
+}
+#pet-glance #pet-restore {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  justify-content: center;
+  border-radius: 6px;
+  color: #c8bcaf;
+  opacity: 0.65;
+}
+#pet-glance #pet-restore:hover,
+#pet-glance #pet-restore:focus-visible {
+  background: #ffffff12;
+  color: #f1e5d8;
+  opacity: 1;
+}
+#pet-glance button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #a99e91;
+  font: inherit;
+  cursor: pointer;
+}
+/* Keep provider names available to assistive technology. */
+#pet-glance button > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+#pet-glance button[hidden] {
+  display: none;
+}
+#pet-glance button[aria-pressed="true"],
+#pet-glance button:hover {
+  color: #f1e5d8;
+}
+#pet-glance button:focus-visible {
+  outline: 1px solid #e6a07f;
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+#pet-glance b {
+  font-size: 11px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+#pet-glance .urgent b {
+  color: #f3a38b;
+}
+#pet-glance .stale-reading b::after {
+  content: "*";
+  font-size: 9px;
+  vertical-align: super;
+}
+body.collapsed.pet-only #pet:focus-visible {
+  outline: 1px solid #e6a07f;
+  outline-offset: 4px;
+}
+@media (prefers-reduced-motion: reduce) {
+  body.collapsed.pet-only #pet-glance,
+  body.collapsed.pet-only #pet-glance > * {
+    transition: none;
+  }
+}
+/* A short reaction temporarily occupies the account label, so the compact
+   widget stays still instead of growing for every activity transition. */
+body.collapsed.dual:not(.pet-only) #companion-notice {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 78px;
+  margin: 0;
+  padding: 0;
+  background: none;
+  font-size: 8px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+body.collapsed.dual:has(#companion-notice:not([hidden])) #mini-acct {
+  visibility: hidden;
+}
+
+/* Activity belongs to the pet, independently of the selected usage tab. */
+.activity-logos {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+}
+.activity-logos [data-provider="claude"] {
+  color: #df9777;
+}
+.activity-logos [data-provider="codex"] {
+  color: #b9c8b0;
+}
+.activity-logos svg {
+  display: block;
+  width: 11px;
+  height: 11px;
+  fill: currentColor;
+}
+.activity-logos[hidden],
+.activity-logos [hidden],
+#mini-dot[hidden],
+#pet-activity {
+  display: none;
+}
+body.collapsed.pet-only #pet-activity:not([hidden]) {
+  position: absolute;
+  top: 30px;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px;
+  border-radius: 8px;
+  background: #221e1be6;
+  border: 1px solid #ffffff0d;
+  pointer-events: none;
+}