clauddy 1.7.0 → 1.9.0

package/README.md

@@ -48,6 +48,27 @@ The token is saved locally (see [Data & privacy](#data--privacy)) and refreshed
 
 Plus a welcome **wave** on launch. You can [poke the pet from the terminal](#play-with-the-pet) too.
 
+### What Claude's up to
+
+While Claude Code is actively working, the pet sets up a little desk scene that
+mirrors **what it's doing right now** — inferred from your local logs (the last
+tool it used). The status line names the activity, and three of them get their
+own animated scene:
+
+<table>
+  <tr>
+    <td align="center"><img src="https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/docs/media/reading.gif" width="280" alt="reading" /><br /><b>reading</b><br /><sub>puts on glasses &amp; flips through docs</sub></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/docs/media/editing.gif" width="280" alt="editing" /><br /><b>editing</b><br /><sub>types at the laptop, coffee in reach</sub></td>
+  </tr>
+  <tr>
+    <td colspan="2" align="center"><img src="https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/docs/media/running.gif" width="280" alt="running" /><br /><b>running</b><br /><sub>watches a task log tick through its checks</sub></td>
+  </tr>
+</table>
+
+Other activities — **planning**, **researching**, **delegating**, **waiting** —
+show up in the status line as they happen. When Claude goes quiet, the pet drops
+back to plain **working** / **idle**.
+
 ## Install
 
 **macOS (Apple Silicon)** is the first-class build. **Windows (x64)** works too, and **Linux** is next. The `bunx`/`npx` route below runs on all of them today.
@@ -100,10 +121,19 @@ Coming soon — the build is already wired for `tar.gz` and AppImage. In the mea
 
 - **Drag** the widget anywhere on screen
 - **–** minimizes to just the pet's face (showing the live session %); the **⤢** button or a double-click on the pet expands it back
-- **⚙** opens settings (log in, toggle alerts, set thresholds)
+- **⚙** opens settings (log in, toggle alerts, set thresholds, pick the display mode)
 - **↗** opens the official Usage page
 - **×** quits
 
+### Floating or menu bar
+
+Under **⚙ Settings → Display** you can pick where Clauddy lives:
+
+- **Floating pet** — the always-on widget in the corner (default).
+- **Menu bar** — a small pet icon in the macOS menu bar showing your live session **%** (it turns 🔥 near your limit). Click it to pop open the full pet + usage panel; click away to dismiss. Right-click for a quick menu.
+
+Switching is instant — no restart. (On Windows/Linux the icon lives in the system tray; the live % shows in its tooltip.)
+
 ## Alerts
 
 Optional **macOS notifications** when your session or weekly usage crosses the thresholds you set (default **80%** and **95%**) — e.g. _"Your session is over 80% — now at 82%"_. They re-arm automatically once usage drops back below a threshold (after a reset). Toggle them and edit the thresholds in **⚙ Settings**.
@@ -114,11 +144,12 @@ Settings saved from the UI live in `~/.claude-usage-monitor/config.json`, so you
 
 ```jsonc
 {
+  "mode": "floating", // "floating" pet in the corner, or "menubar" popover
   "alerts": true, // macOS notifications on/off
   "alertThresholds": [80, 95], // notify when session/week cross these % (two levels)
   "fireThreshold": 90, // session % at which the pet catches fire (maxed out stays 100)
   "pollIntervalMs": 4000, // how often local logs are re-read
-  "activeThresholdMs": 8000, // "working" if Claude was active within this window
+  "activeThresholdMs": 20000, // "active" if Claude wrote to its logs within this window
   "sleepThresholdMs": 300000, // "sleeping" after this much idle time (5 min)
 }
 ```
@@ -145,7 +176,7 @@ live. (Installed globally? Drop the `bunx`: `clauddy poke`. Working on the repo?
 ## How it works
 
 - **`main.js`** — Electron main process: frameless, transparent, always-on-top window; polls usage; fires macOS notifications; watches `config.json` and `debug.json`.
-- **`usage.js`** — reads `~/.claude/projects/**/*.jsonl`, sums tokens per model/day, detects the rolling 5-hour session window, and the working/sleeping activity status.
+- **`usage.js`** — reads `~/.claude/projects/**/*.jsonl`, sums tokens per model/day, detects the rolling 5-hour session window, the working/sleeping status, and which activity (reading/editing/running/…) Claude is on from its latest tool use.
 - **`auth.js`** — OAuth login (PKCE, same public client as Claude Code) that fetches the authoritative usage %. Token stored locally, never committed.
 - **`renderer/`** — the pet itself: an SVG pixel sprite, CSS animations, and the Web Animations API for particles.
 - **`make-icon.js`** — generates the app icon from the pixel sprite (`build/icon.icns`).

package/bin/clauddy.js

@@ -22,6 +22,14 @@ const STATES = [
   'celebrate',
   'auto',
   'clear',
+  // activity states (what Claude Code is doing)
+  'editing',
+  'reading',
+  'planning',
+  'running',
+  'researching',
+  'delegating',
+  'waiting',
 ]
 const arg = process.argv[2]
 

package/config.json

@@ -1,9 +1,10 @@
 {
   "_note": "Defaults bundled with the app. User settings are saved to ~/.claude-usage-monitor/config.json. Session/weekly % come from your account (log in via Settings).",
+  "mode": "floating",
   "alerts": true,
   "alertThresholds": [80, 95],
   "fireThreshold": 90,
   "pollIntervalMs": 4000,
-  "activeThresholdMs": 8000,
+  "activeThresholdMs": 20000,
   "sleepThresholdMs": 300000
 }

package/main.js

@@ -1,4 +1,14 @@
-const { app, BrowserWindow, ipcMain, screen, Notification, shell } = require('electron')
+const {
+  app,
+  BrowserWindow,
+  ipcMain,
+  screen,
+  Notification,
+  shell,
+  Tray,
+  Menu,
+  nativeImage,
+} = require('electron')
 const path = require('node:path')
 const fs = require('node:fs')
 const os = require('node:os')
@@ -30,12 +40,20 @@ let config
 let doTick = null
 const W = 276
 
+// menu-bar (tray) mode state
+let tray = null
+let currentMode = 'floating' // 'floating' widget | 'menubar' popover
+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
+
 function publicConfig(c) {
   return {
     plan: c.plan,
     sessionTokenBudget: c.sessionTokenBudget,
     weeklyTokenBudget: c.weeklyTokenBudget,
     weeklyAnchorIso: c.weeklyAnchorIso,
+    mode: c.mode,
     alerts: c.alerts,
     alertThresholds: c.alertThresholds,
     fireThreshold: c.fireThreshold,
@@ -48,11 +66,12 @@ function loadConfig() {
     sessionTokenBudget: 630000000,
     weeklyTokenBudget: 3450000000,
     weeklyAnchorIso: null,
+    mode: 'floating', // 'floating' widget or 'menubar' popover
     alerts: true,
     alertThresholds: [80, 95],
     fireThreshold: 90, // session % at which the pet catches fire (tired still fixed at 100)
     pollIntervalMs: 4000,
-    activeThresholdMs: 8000,
+    activeThresholdMs: 20000,
     sleepThresholdMs: 300000,
   }
   for (const p of [EXTERNAL_CONFIG, path.join(__dirname, 'config.json')]) {
@@ -105,6 +124,7 @@ function createWindow() {
     transparent: true,
     backgroundColor: '#00000000', // fully transparent — Windows needs this or the window paints black
     resizable: false,
+    show: false, // applyMode() reveals it (floating) or keeps it a hidden popover (menubar)
     alwaysOnTop: true,
     skipTaskbar: true,
     hasShadow: false,
@@ -120,6 +140,14 @@ function createWindow() {
   win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true })
   win.loadFile(path.join(__dirname, 'renderer', 'index.html'))
 
+  // in menu-bar mode the popover dismisses when it loses focus (click elsewhere)
+  win.on('blur', () => {
+    if (currentMode === 'menubar' && win.isVisible()) {
+      win.hide()
+      lastBlurHide = Date.now()
+    }
+  })
+
   const tick = () => {
     if (!win || win.isDestroyed()) return
     try {
@@ -140,7 +168,115 @@ function createWindow() {
     startUsagePoll()
     sendProfile()
     watchDebug()
+    applyMode(config.mode) // reveal the widget, or set up the tray + popover
+  })
+}
+
+// ---- menu-bar (tray) mode ----------------------------------------------------
+// Floating mode: the widget lives bottom-right, always visible. Menu-bar mode:
+// the same window becomes a popover shown under a tray icon on click. Switching
+// is live — no relaunch — so the Settings toggle applies immediately.
+function applyMode(mode) {
+  const next = mode === 'menubar' ? 'menubar' : 'floating'
+  const changed = next !== currentMode
+  currentMode = next
+  if (currentMode === 'menubar') {
+    ensureTray()
+    win.setSkipTaskbar(true)
+    if (changed && win.isVisible()) win.hide() // hide only when switching in
+  } else {
+    destroyTray()
+    if (changed || !win.isVisible()) {
+      positionFloating()
+      win.show()
+    }
+  }
+  updateTray()
+}
+
+function ensureTray() {
+  if (tray) return
+  const img = nativeImage.createFromPath(path.join(__dirname, 'build', 'trayTemplate.png'))
+  img.setTemplateImage(true) // let macOS recolor it for the light/dark menu bar
+  tray = new Tray(img)
+  tray.setToolTip('Clauddy')
+  tray.on('click', (_e, bounds) => {
+    trayBounds = bounds
+    togglePopover()
   })
+  tray.on('right-click', () => tray.popUpContextMenu(trayMenu()))
+}
+
+function destroyTray() {
+  if (tray) {
+    tray.destroy()
+    tray = null
+  }
+}
+
+function trayMenu() {
+  return Menu.buildFromTemplate([
+    { label: 'Open Clauddy', click: () => showPopover() },
+    {
+      label: 'Open Usage page',
+      click: () => shell.openExternal('https://claude.ai/settings/usage'),
+    },
+    { type: 'separator' },
+    { label: 'Quit Clauddy', click: () => app.quit() },
+  ])
+}
+
+function togglePopover() {
+  if (Date.now() - lastBlurHide < 250) return // this click just dismissed it
+  if (win.isVisible()) win.hide()
+  else showPopover()
+}
+
+function showPopover() {
+  positionUnderTray()
+  win.show()
+  win.focus()
+}
+
+// center the popover under the tray icon, kept on-screen
+function positionUnderTray() {
+  const b = win.getBounds()
+  const { workAreaSize } = screen.getPrimaryDisplay()
+  let x = workAreaSize.width - b.width - 24
+  let y = 24
+  if (trayBounds?.width) {
+    x = Math.round(trayBounds.x + trayBounds.width / 2 - b.width / 2)
+    y = Math.round(trayBounds.y + trayBounds.height)
+  }
+  x = Math.max(8, Math.min(x, workAreaSize.width - b.width - 8))
+  win.setPosition(x, y)
+}
+
+function positionFloating() {
+  const { workAreaSize } = screen.getPrimaryDisplay()
+  const b = win.getBounds()
+  win.setPosition(workAreaSize.width - b.width - 24, workAreaSize.height - b.height - 24)
+}
+
+// the tray shows the live session % (macOS title), turning 🔥 near the limit
+function updateTray() {
+  if (!tray) return
+  if (sessionPct == null) {
+    if (process.platform === 'darwin') tray.setTitle('')
+    tray.setToolTip('Clauddy — connect your account for live %')
+    return
+  }
+  const pct = Math.round(sessionPct)
+  const hot = pct >= (config?.fireThreshold ?? 90)
+  if (process.platform === 'darwin') tray.setTitle(hot ? ` ${pct}% 🔥` : ` ${pct}%`)
+  tray.setToolTip(`Clauddy — session ${pct}%`)
+}
+
+// send real usage to the renderer and refresh the tray title in one place
+function pushRealUsage(u) {
+  sessionPct = u?.session ? u.session.pct : null
+  updateTray()
+  if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
 }
 
 // resize the window to fit the content
@@ -149,8 +285,12 @@ ipcMain.on('resize', (_e, w, h) => {
   const width = Math.max(100, Math.round(w))
   const height = Math.max(110, Math.round(h))
   win.setContentSize(width, height)
-  const { workAreaSize } = screen.getPrimaryDisplay()
-  win.setPosition(workAreaSize.width - width - 24, workAreaSize.height - height - 24)
+  if (currentMode === 'menubar') {
+    if (win.isVisible()) positionUnderTray() // keep it anchored under the tray
+  } else {
+    const { workAreaSize } = screen.getPrimaryDisplay()
+    win.setPosition(workAreaSize.width - width - 24, workAreaSize.height - height - 24)
+  }
 })
 
 ipcMain.on('open-usage', () => shell.openExternal('https://claude.ai/settings/usage'))
@@ -177,15 +317,15 @@ async function pollUsage() {
   try {
     const u = await auth.fetchUsage()
     usageBackoff = 5 * 60 * 1000
-    if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
+    pushRealUsage(u)
   } catch (e) {
     if (e && e.status === 429) {
       usageBackoff = Math.min(usageBackoff * 2, 30 * 60 * 1000)
     } else if (e && e.status === 401) {
       auth.clear()
+      pushRealUsage(null)
       if (win && !win.isDestroyed()) {
         win.webContents.send('auth-state', { connected: false })
-        win.webContents.send('real-usage', null)
         win.webContents.send('profile', null)
       }
     }
@@ -220,7 +360,7 @@ ipcMain.on('auth-code', async (_e, code) => {
     try {
       const u = await auth.fetchUsage() // validate the token
       ok()
-      if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
+      pushRealUsage(u)
     } catch (e) {
       if (e && e.status === 429) {
         // token is fine, the usage endpoint is just throttled — keep it and retry later
@@ -239,9 +379,9 @@ ipcMain.on('auth-code', async (_e, code) => {
 ipcMain.on('auth-logout', () => {
   auth.clear()
   clearTimeout(usageTimer)
+  pushRealUsage(null)
   if (win && !win.isDestroyed()) {
     win.webContents.send('auth-state', { connected: false })
-    win.webContents.send('real-usage', null)
     win.webContents.send('profile', null)
   }
 })
@@ -263,6 +403,7 @@ ipcMain.on('save-config', (_e, patch) => {
   armed.clear() // re-arm alerts with new thresholds
   if (doTick) doTick()
   if (win && !win.isDestroyed()) win.webContents.send('config', publicConfig(config))
+  applyMode(config.mode) // switch between floating widget and menu-bar popover live
 })
 
 ipcMain.on('quit', () => app.quit())
@@ -280,6 +421,7 @@ app.whenReady().then(() => {
 app.on('window-all-closed', () => {
   if (pollTimer) clearInterval(pollTimer)
   fs.unwatchFile(DEBUG_FILE)
+  destroyTray()
   app.quit()
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clauddy",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {
@@ -68,7 +68,9 @@
       "usage.js",
       "auth.js",
       "config.json",
-      "renderer/**"
+      "renderer/**",
+      "build/trayTemplate.png",
+      "build/trayTemplate@2x.png"
     ],
     "mac": {
       "category": "public.app-category.developer-tools",

package/renderer/index.html

@@ -69,12 +69,58 @@
           </g>
         </svg>
         <svg id="scene" viewBox="0 0 216 135" preserveAspectRatio="none"></svg>
+        <!-- editing mode: a coding desk (laptop + coffee + plant) behind the pet -->
+        <svg id="desk" viewBox="0 0 216 135" preserveAspectRatio="none">
+          <rect class="dk-desk" x="4" y="113" width="208" height="3" />
+          <!-- laptop (shrunk + shifted right for breathing room) -->
+          <g class="dk-laptop" transform="translate(49 28) scale(0.7)">
+          <rect class="dk-screen" x="110" y="64" width="66" height="48" rx="3" />
+          <rect class="dk-glass" x="114" y="68" width="58" height="40" rx="2" />
+          <polygon class="dk-deck2" points="106,110 180,110 190,121 96,121" />
+          <rect class="dk-keys" x="112" y="112" width="7" height="2.4" rx="0.5" />
+          <rect class="dk-keys" x="121" y="112" width="7" height="2.4" rx="0.5" />
+          <rect class="dk-keys" x="130" y="112" width="7" height="2.4" rx="0.5" />
+          <rect class="dk-keys" x="139" y="112" width="7" height="2.4" rx="0.5" />
+          <rect class="dk-keys" x="148" y="112" width="7" height="2.4" rx="0.5" />
+          <rect class="dk-keys" x="157" y="112" width="7" height="2.4" rx="0.5" />
+          <rect class="dk-keys" x="109" y="115.5" width="8" height="2.6" rx="0.5" />
+          <rect class="dk-keys" x="119" y="115.5" width="8" height="2.6" rx="0.5" />
+          <rect class="dk-keys" x="129" y="115.5" width="18" height="2.6" rx="0.5" />
+          <rect class="dk-keys" x="149" y="115.5" width="8" height="2.6" rx="0.5" />
+          <rect class="dk-keys" x="159" y="115.5" width="8" height="2.6" rx="0.5" />
+          <rect class="c-grn" x="119" y="75" width="4" height="3" />
+          <rect class="c-grn" x="126" y="75" width="22" height="3" />
+          <rect class="c-grn" x="119" y="82" width="30" height="3" />
+          <rect class="c-yel" x="123" y="89" width="26" height="3" />
+          <rect class="c-blu" x="119" y="96" width="14" height="3" />
+          <rect class="c-yel" x="136" y="96" width="12" height="3" />
+          <rect class="c-grn" x="119" y="103" width="10" height="3" />
+          <rect class="c-cur" x="132" y="103" width="2.5" height="3.6" />
+          </g>
+        </svg>
+        <!-- potted plant, shared by the editing + reading desks -->
+        <svg id="plant" viewBox="0 0 216 135" preserveAspectRatio="none">
+          <polygon class="dk-pot" points="188,102 208,102 205,113 191,113" />
+          <path class="dk-leaf" d="M198 103 q-11 -7 -13 -21 q11 4 13 21" />
+          <path class="dk-leaf" d="M198 103 q11 -7 13 -21 q-11 4 -13 21" />
+          <path class="dk-leaf" d="M198 103 q-5 -12 -3 -25 q7 9 3 25" />
+          <path class="dk-leaf" d="M198 103 q5 -12 3 -25 q-7 9 -3 25" />
+          <path class="dk-leaf-c" d="M198 103 q0 -14 0 -27 q3 13 0 27" />
+        </svg>
         <div id="shadow"></div>
         <div id="pet">
           <svg id="claude" viewBox="0 0 100 90" width="86" height="77">
             <g id="body"></g>
             <g id="eyes"></g>
             <rect id="mouth" x="38" y="54" width="24" height="10" rx="2" />
+            <!-- reading glasses (reading mode) -->
+            <g id="glasses">
+              <circle class="gl-lens" cx="35" cy="35" r="8.5" />
+              <circle class="gl-lens" cx="65" cy="35" r="8.5" />
+              <path class="gl-bridge" d="M43 34 q7 -3 14 0" />
+              <line class="gl-arm" x1="26.5" y1="35" x2="20" y2="33" />
+              <line class="gl-arm" x1="73.5" y1="35" x2="80" y2="33" />
+            </g>
             <!-- mechanic mode (settings): hard hat + screwdriver -->
             <g id="robot">
               <!-- yellow hard hat: pixel-art bitmap, built in pet.js (buildHat) -->
@@ -100,6 +146,73 @@
           <div id="sweat"><i></i><i></i></div>
           <div id="dropzone"></div>
         </div>
+        <!-- editing mode, foreground: coffee mug in front of the pet -->
+        <!-- mug: its own SVG with UNIFORM scaling (no stage stretch) so it stays perfectly shaped -->
+        <svg id="mug" viewBox="0 0 46 44" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+          <g class="dk-steam">
+            <path class="dk-wisp" d="M19 15 q4 -4 0 -8 q-4 -4 0 -8" style="animation-delay: 0s" />
+            <path class="dk-wisp" d="M25 15 q4 -4 0 -8 q-4 -4 0 -8" style="animation-delay: 0.9s" />
+          </g>
+          <path class="mug-handle" d="M31 23 q8 1 8 7 q0 6 -8 6.5" />
+          <rect class="mug-body" x="12" y="18" width="19" height="26" rx="2.5" />
+          <rect class="mug-rim" x="12.5" y="18" width="18" height="3" rx="1.6" />
+          <path class="mug-code" d="M17 26 L14 32 L17 38 M20 38 L25 26 M26 26 L29 32 L26 38" />
+        </svg>
+        <!-- running mode: a task log — Claude working (uniform scale) -->
+        <svg id="terminal" viewBox="0 0 92 64" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+          <rect class="tm-win" x="2" y="2" width="88" height="60" rx="4" />
+          <rect class="tm-bar" x="2" y="2" width="88" height="8" rx="4" />
+          <rect class="tm-bar" x="2" y="6.5" width="88" height="3.5" />
+          <circle class="tm-d1" cx="8" cy="6" r="1.6" />
+          <circle class="tm-d2" cx="13" cy="6" r="1.6" />
+          <circle class="tm-d3" cx="18" cy="6" r="1.6" />
+          <!-- hairline border around the content area only (open at the top bar) -->
+          <path class="tm-border" d="M2.4 10 L2.4 58 Q2.4 61.6 6 61.6 L86 61.6 Q89.6 61.6 89.6 58 L89.6 10" />
+          <text class="tm-prompt-c" x="7" y="20">&#10095;</text>
+          <text class="tm-head" x="13" y="20">Running</text>
+          <text class="tm-dots" x="33" y="20">...</text>
+          <rect class="tm-cursor" x="43" y="15" width="2.4" height="5.4" />
+          <g class="tskA">
+            <path class="tm-check" d="M7 30 l1.5 1.5 l2.7 -3.2" />
+            <text class="tm-txt" x="14" y="32">Reading files</text>
+          </g>
+          <g class="tskB">
+            <path class="tm-check" d="M7 38 l1.5 1.5 l2.7 -3.2" />
+            <text class="tm-txt" x="14" y="40">Editing code</text>
+          </g>
+          <g class="tskC">
+            <path class="tm-check" d="M7 46 l1.5 1.5 l2.7 -3.2" />
+            <text class="tm-txt" x="14" y="48">Executing</text>
+          </g>
+          <g class="tskWait">
+            <path class="tm-spin" d="M10.4 54 A2.4 2.4 0 1 1 8 51.6" />
+            <text class="tm-txt" x="14" y="56">Waiting</text>
+            <text class="tm-dots" x="33" y="56">...</text>
+          </g>
+          <g class="tskDone">
+            <path class="tm-check" d="M7 54 l1.5 1.5 l2.7 -3.2" />
+            <text class="tm-done-txt" x="14" y="56">Done</text>
+          </g>
+        </svg>
+        <!-- reading mode: a "docs.md" markdown file being read (uniform scale) -->
+        <svg id="reading" viewBox="0 0 84 74" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+          <rect class="dc-card" x="2" y="2" width="80" height="70" rx="4" />
+          <!-- title bar -->
+          <rect class="dc-ico" x="7" y="7" width="7" height="9" rx="1" />
+          <rect class="dc-ico-fold" x="11.5" y="7" width="2.5" height="2.5" />
+          <text id="dc-fname" class="dc-title" x="17" y="14">README.md</text>
+          <line class="dc-divider" x1="6" y1="19" x2="78" y2="19" />
+          <!-- content -->
+          <text class="dc-h dc-h1" x="7" y="29" style="animation-delay: 0s"># Getting Started</text>
+          <rect class="dc-body" x="9" y="32" width="42" height="2" />
+          <rect class="dc-body" x="9" y="35.5" width="34" height="2" />
+          <text class="dc-h dc-g" x="7" y="45" style="animation-delay: 1s">## Installation</text>
+          <rect class="dc-body" x="9" y="48" width="30" height="2" />
+          <text class="dc-h dc-b" x="7" y="57" style="animation-delay: 2s">## Usage</text>
+          <rect class="dc-body" x="9" y="60" width="40" height="2" />
+          <text class="dc-h dc-a" x="7" y="68" style="animation-delay: 3s">## Examples</text>
+          <rect class="dc-body" x="9" y="70.5" width="26" height="2" />
+        </svg>
       </div>
 
       <!-- shown only when collapsed -->
@@ -192,6 +305,14 @@
           </div>
         </div>
 
+        <div class="set-hint set-hint-left">Where Clauddy lives: a floating pet, or a menu-bar icon with a pop-up.</div>
+        <label class="set-field">Display
+          <span class="seg" id="set-mode">
+            <button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
+            <button type="button" class="seg-btn" data-mode="menubar">Menu bar</button>
+          </span>
+        </label>
+
         <label class="set-check"><input id="set-alerts" type="checkbox" /> Alerts</label>
         <div class="set-hint set-hint-left">A macOS notification when your session or weekly usage crosses each level.</div>
         <label class="set-field">Alert thresholds (%)

package/renderer/pet.js

@@ -114,6 +114,32 @@ const SPRITE = [
   })
 })()
 
+// reading mode: the doc's filename slowly cycles through project docs, since
+// it's a Claude app "reading" different files (a gentle fade between names)
+;(function cycleDocName() {
+  const node = el('dc-fname')
+  if (!node) return
+  const names = [
+    'README.md',
+    'ARCHITECTURE.md',
+    'api.md',
+    'AUTH.md',
+    'MIGRATION.md',
+    'CONTRIBUTING.md',
+    'usage.md',
+    'config.md',
+  ]
+  let i = 0
+  setInterval(() => {
+    node.style.opacity = '0'
+    setTimeout(() => {
+      i = (i + 1) % names.length
+      node.textContent = names[i]
+      node.style.opacity = '1'
+    }, 260)
+  }, 3800)
+})()
+
 // helpers
 function fmtTokens(t) {
   t = t || 0
@@ -413,7 +439,9 @@ function render(d) {
           : d.sleeping
             ? 'sleeping'
             : 'idle'
-  // dev override from `./pet <state>`
+  const acts = ['editing', 'reading', 'planning', 'running', 'researching', 'delegating', 'waiting']
+  let curActivity = d.activity
+  // dev override from `./pet <state>` (base states or an activity name)
   if (debugState) {
     const map = {
       working: 'working',
@@ -422,9 +450,20 @@ function render(d) {
       tired: 'tired',
       idle: 'idle',
     }
-    if (map[debugState]) st = map[debugState]
+    if (map[debugState]) {
+      st = map[debugState]
+      curActivity = null
+    } else if (acts.includes(debugState)) {
+      st = 'working'
+      curActivity = debugState
+    }
   }
   setState(st)
+  // expose the current activity as a body class so per-action animations can
+  // hook it (e.g. body.act-reading). Only while actively working.
+  for (const a of acts) {
+    document.body.classList.toggle(`act-${a}`, st === 'working' && curActivity === a)
+  }
   if (prevState && prevState !== st) {
     if (st === 'sleeping') oneShot('drowse', 700)
     else if (prevState === 'sleeping') oneShot('wake', 700)
@@ -433,7 +472,7 @@ function render(d) {
 
   const word =
     st === 'working'
-      ? 'working'
+      ? curActivity || 'working' // show what Claude's doing (editing/reading/…)
       : st === 'sleeping'
         ? 'sleeping'
         : st === 'stressed'
@@ -521,6 +560,7 @@ window.api.onError((msg) => {
 })
 window.api.onConfig((cfg) => {
   currentConfig = cfg || {}
+  document.body.classList.toggle('is-menubar', currentConfig.mode === 'menubar')
 })
 window.api.onRealUsage((u) => {
   realUsage = u || null
@@ -603,8 +643,16 @@ el('acc-logout').addEventListener('click', () => window.api.authLogout())
 // settings panel
 // snapshot of the editable fields, to tell whether there are unsaved changes
 let settingsBaseline = null
+let selectedMode = 'floating'
+function setModeUI(mode) {
+  selectedMode = mode === 'menubar' ? 'menubar' : 'floating'
+  for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
+    b.classList.toggle('on', b.dataset.mode === selectedMode)
+  }
+}
 function snapshotSettings() {
   return JSON.stringify({
+    mode: selectedMode,
     alerts: el('set-alerts').checked,
     t1: el('set-t1').value,
     t2: el('set-t2').value,
@@ -621,6 +669,7 @@ function clearSaveDirty() {
 }
 function populateSettings() {
   const c = currentConfig || {}
+  setModeUI(c.mode)
   el('set-alerts').checked = c.alerts !== false
   const th = c.alertThresholds || [80, 95]
   el('set-t1').value = th[0] != null ? th[0] : 80
@@ -653,6 +702,13 @@ for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire']) {
   el(id).addEventListener('input', refreshSaveDirty)
   el(id).addEventListener('change', refreshSaveDirty)
 }
+// display-mode segmented control (floating pet | menu bar)
+for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
+  b.addEventListener('click', () => {
+    setModeUI(b.dataset.mode)
+    refreshSaveDirty()
+  })
+}
 el('set-cancel').addEventListener('click', () => {
   document.body.classList.remove('settings-open')
   clearSaveDirty()
@@ -662,6 +718,7 @@ el('set-save').addEventListener('click', () => {
   const num = (id) => parseFloat(el(id).value)
   const fire = num('set-fire')
   window.api.saveConfig({
+    mode: selectedMode,
     alerts: el('set-alerts').checked,
     alertThresholds: [num('set-t1'), num('set-t2')]
       .filter((n) => n >= 1 && n <= 100)

package/renderer/style.css

@@ -238,6 +238,38 @@ body.settings-open #settings {
   appearance: none;
   margin: 0;
 }
+/* display-mode segmented control (floating pet | menu bar) */
+.seg {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+.seg-btn {
+  flex: 1;
+  padding: 6px 4px;
+  font-size: 11px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.06);
+  border: 0.5px solid var(--hair);
+  border-radius: 7px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+.seg-btn:hover {
+  color: var(--text);
+}
+.seg-btn.on {
+  background: var(--coral);
+  border-color: var(--coral);
+  color: #fff;
+}
+/* menu-bar mode: the popover auto-sizes, so the minimize control is redundant */
+body.is-menubar #min {
+  display: none;
+}
 .set-two {
   display: flex;
   gap: 6px;
@@ -628,6 +660,7 @@ body.settings-open #min {
   position: absolute;
   left: 26px;
   bottom: 3px;
+  transition: left 0.35s ease;
   width: 86px;
   height: 77px;
   zoom: 0.8; /* a bit smaller in the scene */
@@ -657,6 +690,16 @@ body.collapsed #stage {
 body.collapsed #scene {
   display: none;
 }
+/* minimized = just the pet's face: hide all activity scenery + props */
+body.collapsed #desk,
+body.collapsed #plant,
+body.collapsed #mug,
+body.collapsed #reading,
+body.collapsed #terminal,
+body.collapsed #gears,
+body.collapsed #glasses {
+  display: none;
+}
 body.collapsed #pet {
   position: static;
   left: auto;
@@ -736,6 +779,259 @@ body.settings-open #flames,
 body.settings-open #sweat {
   display: none;
 }
+/* reading mode: an open book with a magnifying glass scanning the lines */
+#reading {
+  position: absolute;
+  left: 64%;
+  bottom: 3px;
+  width: 66px;
+  height: 63px;
+  z-index: 3;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+body.act-reading #reading {
+  opacity: 1;
+}
+/* reading glasses on the pet */
+#glasses {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+.gl-lens {
+  fill: rgba(190, 225, 255, 0.16);
+  stroke: #241c17;
+  stroke-width: 2.4;
+}
+.gl-bridge,
+.gl-arm {
+  fill: none;
+  stroke: #241c17;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+}
+body.act-reading #glasses {
+  opacity: 1;
+}
+.dc-card {
+  fill: #191d23; /* dark markdown viewer — easier to read on the dark scene */
+}
+.dc-ico {
+  fill: none;
+  stroke: #8a9098;
+  stroke-width: 1.1;
+}
+.dc-ico-fold {
+  fill: #8a9098;
+}
+.dc-title {
+  fill: #e2e5ea;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 7px;
+  font-weight: 700;
+}
+#dc-fname {
+  transition: opacity 0.25s ease;
+}
+.dc-divider {
+  stroke: rgba(255, 255, 255, 0.1);
+  stroke-width: 1;
+}
+.dc-h {
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 6.5px;
+  font-weight: 700;
+}
+.dc-h1 {
+  fill: #c39cf0; /* purple */
+}
+.dc-g {
+  fill: #7ed07e; /* green */
+}
+.dc-b {
+  fill: #6fb3f2; /* blue */
+}
+.dc-a {
+  fill: #e0b46a; /* amber */
+}
+.dc-body {
+  fill: #626b76; /* muted body text */
+}
+/* each heading lights up in turn (a "being read" pulse) */
+body.act-reading .dc-h {
+  animation: dc-read 4s ease-in-out infinite;
+}
+@keyframes dc-read {
+  0% {
+    opacity: 0.5;
+  }
+  7% {
+    opacity: 1;
+  }
+  24% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+/* editing mode: a coding desk (laptop with colorful code, coffee, plant) */
+#desk {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+#mug {
+  position: absolute;
+  left: 36%; /* editing: on the desk, near the laptop */
+  bottom: 3px;
+  width: 44px;
+  height: 42px;
+  z-index: 3; /* the mug sits in front, on the desk */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+body.act-editing #desk,
+body.act-editing #mug,
+body.act-reading #mug {
+  opacity: 1;
+}
+/* editing: raise the mug onto the desk, level with the plant */
+body.act-editing #mug {
+  bottom: 22px;
+}
+/* the mug shifts right in reading (centered with the doc) */
+body.act-reading #mug {
+  left: 38%;
+}
+/* slide the pet left in editing to open up the full desk */
+body.act-editing:not(.collapsed) #pet {
+  left: 4px;
+}
+/* reading: pet + mug + doc, centered as a group */
+body.act-reading:not(.collapsed) #pet {
+  left: 12px;
+}
+/* running: pet + terminal centered as a pair */
+body.act-running:not(.collapsed) #pet {
+  left: 27px;
+}
+.dk-desk {
+  fill: #262626;
+}
+.dk-keys {
+  fill: #4d4d4d;
+}
+.mug-body {
+  fill: #d8cbaf;
+}
+.mug-rim {
+  fill: #c6b896;
+}
+.mug-handle {
+  fill: none;
+  stroke: #d8cbaf;
+  stroke-width: 2.8;
+  stroke-linecap: round;
+}
+.mug-code {
+  fill: none;
+  stroke: #2a211a;
+  stroke-width: 1.7;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+}
+.dk-wisp {
+  fill: none;
+  stroke: #c9c9c9;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  opacity: 0;
+  vector-effect: non-scaling-stroke;
+}
+.dk-deck2 {
+  fill: #3a3a3a;
+}
+.dk-screen {
+  fill: #1c1c1c;
+}
+.dk-glass {
+  fill: #0b0b0b;
+}
+.c-grn {
+  fill: #6fcf6f;
+}
+.c-yel {
+  fill: #e2c46a;
+}
+.c-blu {
+  fill: #6fb3f2;
+}
+.c-cur {
+  fill: #cdeccf;
+}
+.dk-pot {
+  fill: #b98a5e;
+}
+.dk-leaf {
+  fill: #3f9150;
+}
+.dk-leaf-c {
+  fill: #57a95f;
+}
+/* shared potted plant (editing + reading desks) */
+#plant {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+body.act-editing #plant {
+  opacity: 1;
+}
+body.act-editing .c-cur {
+  animation: cursor-blink 1s steps(1, end) infinite;
+}
+body.act-editing .dk-wisp,
+body.act-reading .dk-wisp {
+  transform-box: view-box;
+  animation: steam 2.6s ease-in-out infinite;
+}
+@keyframes cursor-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes steam {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  35% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-7px);
+  }
+}
 #mouth {
   fill: var(--eye);
   transform-box: fill-box;
@@ -940,6 +1236,198 @@ body.drowse #claude {
 body.celebrate #claude {
   animation: celebrate 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+/* reading/editing/running: calm bob instead of the working hop */
+body.act-reading #claude,
+body.act-editing #claude,
+body.act-running #claude {
+  animation: bob 3.6s ease-in-out infinite;
+}
+/* running mode: a mini terminal with a typing command */
+#terminal {
+  position: absolute;
+  left: 48%;
+  bottom: 3px;
+  width: 88px;
+  height: 68px;
+  z-index: 3;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+body.act-running #terminal {
+  opacity: 1;
+}
+.tm-win {
+  fill: #14161a;
+}
+.tm-border {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.14);
+  stroke-width: 0.7;
+}
+.tm-bar {
+  fill: #262a30;
+}
+.tm-d1 {
+  fill: #ff5f57;
+}
+.tm-d2 {
+  fill: #febc2e;
+}
+.tm-d3 {
+  fill: #28c840;
+}
+.tm-prompt-c {
+  fill: #6fcf6f;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 7.5px;
+  font-weight: 700;
+}
+.tm-head {
+  fill: #d6d9de;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 7px;
+  font-weight: 600;
+}
+.tm-txt {
+  fill: #cfd3d8;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 6.5px;
+}
+.tm-dots {
+  fill: #8a9098;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 7px;
+  font-weight: 700;
+}
+.tm-cursor {
+  fill: #6fcf6f;
+}
+.tm-check {
+  fill: none;
+  stroke: #28c840;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.tm-spin {
+  fill: none;
+  stroke: #cfd3d8;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  transform-box: view-box;
+  transform-origin: 8px 54px; /* the spinner's own centre */
+}
+.tm-done-txt {
+  fill: #6fcf6f;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 6.5px;
+  font-weight: 600;
+}
+/* task log lifecycle (5s): lines stream in → Waiting spins → ✓ Done → restart */
+.tskA,
+.tskB,
+.tskC,
+.tskWait,
+.tskDone {
+  opacity: 0;
+}
+body.act-running .tskA {
+  animation: tskA 5s linear infinite;
+}
+body.act-running .tskB {
+  animation: tskB 5s linear infinite;
+}
+body.act-running .tskC {
+  animation: tskC 5s linear infinite;
+}
+body.act-running .tskWait {
+  animation: tskWait 5s linear infinite;
+}
+body.act-running .tskDone {
+  animation: tskDone 5s linear infinite;
+}
+body.act-running .tm-spin {
+  animation: tm-spin-rot 0.8s linear infinite;
+}
+body.act-running .tm-cursor {
+  animation: cursor-blink 1s steps(1, end) infinite;
+}
+@keyframes tm-spin-rot {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes tskA {
+  0%,
+  4% {
+    opacity: 0;
+  }
+  8%,
+  90% {
+    opacity: 1;
+  }
+  96%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tskB {
+  0%,
+  16% {
+    opacity: 0;
+  }
+  20%,
+  90% {
+    opacity: 1;
+  }
+  96%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tskC {
+  0%,
+  30% {
+    opacity: 0;
+  }
+  34%,
+  90% {
+    opacity: 1;
+  }
+  96%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tskWait {
+  0%,
+  6% {
+    opacity: 0;
+  }
+  10%,
+  46% {
+    opacity: 1;
+  }
+  52%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tskDone {
+  0%,
+  52% {
+    opacity: 0;
+  }
+  58%,
+  90% {
+    opacity: 1;
+  }
+  96%,
+  100% {
+    opacity: 0;
+  }
+}
 
 /* status */
 #statusline {
@@ -1188,17 +1676,6 @@ body.state-tired #status-text {
     transform: scaleY(0.1);
   }
 }
-@keyframes shadowPulse {
-  0%,
-  100% {
-    transform: translateX(-50%) scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: translateX(-50%) scale(0.84);
-    opacity: 0.7;
-  }
-}
 @keyframes ping {
   0% {
     box-shadow: 0 0 0 0 rgba(126, 199, 125, 0.5);

package/usage.js

@@ -99,6 +99,69 @@ function parseFile(full, st) {
 const DAYS = 30
 const SESSION_MS = 5 * 3600 * 1000
 
+// map a Claude Code tool name to what the pet is "doing"
+const ACTIVITY_BY_TOOL = {
+  Edit: 'editing',
+  MultiEdit: 'editing',
+  Write: 'editing',
+  NotebookEdit: 'editing',
+  Read: 'reading',
+  Grep: 'reading',
+  Glob: 'reading',
+  LS: 'reading',
+  Bash: 'running',
+  BashOutput: 'running',
+  KillShell: 'running',
+  WebSearch: 'researching',
+  WebFetch: 'researching',
+  Task: 'delegating',
+  Agent: 'delegating',
+  TodoWrite: 'planning',
+  ExitPlanMode: 'planning',
+  AskUserQuestion: 'waiting',
+}
+
+// Classify what Claude Code is doing right now by reading the tail of the most
+// recently touched session log: the latest tool_use → an activity, plan mode
+// (permission-mode) wins over everything. Returns null when there's no signal.
+function detectActivity(file) {
+  let raw
+  try {
+    const fd = fs.openSync(file, 'r')
+    const size = fs.fstatSync(fd).size
+    const len = Math.min(size, 65536) // last 64KB is plenty for the recent tail
+    const buf = Buffer.alloc(len)
+    fs.readSync(fd, buf, 0, len, size - len)
+    fs.closeSync(fd)
+    raw = buf.toString('utf8')
+  } catch {
+    return null
+  }
+  const lines = raw.split('\n').filter(Boolean)
+  let activity = null
+  let permMode = null
+  for (let i = lines.length - 1; i >= 0 && i >= lines.length - 80; i--) {
+    let o
+    try {
+      o = JSON.parse(lines[i])
+    } catch {
+      continue
+    }
+    if (permMode === null && (o.type === 'permission-mode' || o.type === 'mode')) {
+      const v = o.mode || o.permissionMode || o.value
+      if (typeof v === 'string') permMode = v
+    }
+    if (activity === null && o.type === 'assistant' && Array.isArray(o.message?.content)) {
+      const blocks = o.message.content
+      const tools = blocks.filter((b) => b && b.type === 'tool_use')
+      if (tools.length) activity = ACTIVITY_BY_TOOL[tools[tools.length - 1].name] || 'working'
+    }
+    if (activity !== null && permMode !== null) break
+  }
+  if (permMode === 'plan') return 'planning'
+  return activity
+}
+
 // Plan presets (token budgets ~= 100%). Calibrated for Max 5x from the official
 // panel (5h ~24% at 152M tokens, weekly ~62% at 2.14B); Pro/Max20x scaled by the
 // plan multiplier. ESTIMATES — Anthropic doesn't publish exact numbers.
@@ -134,7 +197,13 @@ function getUsage(config) {
   walkJsonl(PROJECTS_DIR, files, scanCutoff)
 
   let lastMtime = 0
-  for (const f of files) lastMtime = Math.max(lastMtime, f.st.mtimeMs)
+  let newestFile = null
+  for (const f of files) {
+    if (f.st.mtimeMs > lastMtime) {
+      lastMtime = f.st.mtimeMs
+      newestFile = f.full
+    }
+  }
 
   const seen = new Set()
   let todayTokens = 0
@@ -195,9 +264,12 @@ function getUsage(config) {
   const weekPct = weeklyBudget ? Math.min(100, (weekTokens / weeklyBudget) * 100) : 0
 
   const lastActivityMs = lastMtime ? now - lastMtime : Infinity
-  const active = lastActivityMs <= (config.activeThresholdMs || 8000)
+  const active = lastActivityMs <= (config.activeThresholdMs || 20000)
   const sleeping = lastActivityMs >= (config.sleepThresholdMs || 300000)
 
+  // what Claude is doing right now (only meaningful while active)
+  const activity = active && newestFile ? detectActivity(newestFile) : null
+
   const byModelArr = [...byModel.entries()]
     .map(([label, tokens]) => ({ label, tokens }))
     .sort((a, b) => b.tokens - a.tokens)
@@ -212,6 +284,7 @@ function getUsage(config) {
     tokensPerMin: Math.round(last5mTokens / 5),
     active,
     sleeping,
+    activity,
     lastActivityMs,
     ts: now,
   }