clauddy 1.6.0 → 1.8.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.
@@ -115,9 +136,10 @@ Settings saved from the UI live in `~/.claude-usage-monitor/config.json`, so you
 ```jsonc
 {
   "alerts": true, // macOS notifications on/off
-  "alertThresholds": [80, 95], // notify when session/week cross these %
+  "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)
 }
 ```
@@ -144,7 +166,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

@@ -2,7 +2,8 @@
   "_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).",
   "alerts": true,
   "alertThresholds": [80, 95],
+  "fireThreshold": 90,
   "pollIntervalMs": 4000,
-  "activeThresholdMs": 8000,
+  "activeThresholdMs": 20000,
   "sleepThresholdMs": 300000
 }

package/main.js

@@ -38,6 +38,7 @@ function publicConfig(c) {
     weeklyAnchorIso: c.weeklyAnchorIso,
     alerts: c.alerts,
     alertThresholds: c.alertThresholds,
+    fireThreshold: c.fireThreshold,
   }
 }
 
@@ -49,8 +50,9 @@ function loadConfig() {
     weeklyAnchorIso: null,
     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')]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clauddy",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {

package/renderer/index.html

@@ -31,13 +31,111 @@
 
       <!-- Claude pixel pet -->
       <div id="stage">
+        <!-- reusable gear shape -->
+        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+          <defs>
+            <g id="gear-unit">
+              <g id="gear-teeth">
+                <rect x="10.5" y="0.5" width="3" height="5" rx="0.5" />
+                <rect x="10.5" y="18.5" width="3" height="5" rx="0.5" />
+                <rect x="0.5" y="10.5" width="5" height="3" rx="0.5" />
+                <rect x="18.5" y="10.5" width="5" height="3" rx="0.5" />
+              </g>
+              <use href="#gear-teeth" transform="rotate(45 12 12)" />
+              <circle cx="12" cy="12" r="7.5" />
+              <circle cx="12" cy="12" r="2.6" fill="#0a0706" />
+            </g>
+          </defs>
+        </svg>
+        <!-- loose gears turning on the ground behind the pet (settings only) -->
+        <svg id="gears" viewBox="0 0 216 135" preserveAspectRatio="none">
+          <g transform="translate(150 118) scale(1.35)">
+            <g>
+              <use href="#gear-unit" x="-12" y="-12" />
+              <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite" />
+            </g>
+          </g>
+          <g transform="translate(188 124) scale(0.78)">
+            <g>
+              <use href="#gear-unit" x="-12" y="-12" />
+              <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="2.3s" repeatCount="indefinite" />
+            </g>
+          </g>
+          <g transform="translate(118 125) scale(0.6)">
+            <g>
+              <use href="#gear-unit" x="-12" y="-12" />
+              <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.8s" repeatCount="indefinite" />
+            </g>
+          </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) -->
+              <g id="hardhat"></g>
+              <!-- screwdriver held at an angle to the side, tapping away -->
+              <g id="driver">
+                <rect class="dr-tip" x="90" y="39" width="6" height="4" />
+                <rect class="dr-shaft" x="91" y="43" width="4" height="19" />
+                <rect class="dr-hi" x="91" y="43" width="1.6" height="19" />
+                <rect class="dr-collar" x="87" y="61" width="12" height="5" rx="1" />
+                <rect class="dr-handle" x="84" y="66" width="18" height="24" rx="8" />
+                <rect class="dr-handle-hi" x="86.5" y="69" width="2.6" height="17" rx="1.3" />
+                <animateTransform attributeName="transform" type="rotate" values="-32 93 70; -26 93 70; -32 93 70" dur="1s" repeatCount="indefinite" />
+              </g>
+            </g>
           </svg>
           <svg id="zzz" viewBox="0 0 44 44" width="44" height="44">
             <text x="2" y="34" class="z1">Z</text>
@@ -48,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 -->
@@ -141,7 +306,7 @@
         </div>
 
         <label class="set-check"><input id="set-alerts" type="checkbox" /> Alerts</label>
-        <div class="set-hint set-hint-left">macOS notifications when your session or weekly usage crosses these % thresholds.</div>
+        <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 (%)
           <span class="set-two">
             <span class="num">
@@ -159,6 +324,23 @@
               </span>
             </span>
           </span>
+          <span class="set-two set-caps">
+            <span class="num-cap">heads-up</span>
+            <span class="num-cap">near limit</span>
+          </span>
+        </label>
+        <div class="set-hint set-hint-left">The pet catches fire past this session % (it's maxed out at 100%).</div>
+        <label class="set-field">Catch fire at (%)
+          <span class="set-two">
+            <span class="num">
+              <input id="set-fire" type="number" min="1" max="99" />
+              <span class="num-spin">
+                <button type="button" class="num-btn" data-for="set-fire" data-step="1">▲</button>
+                <button type="button" class="num-btn" data-for="set-fire" data-step="-1">▼</button>
+              </span>
+            </span>
+            <span class="num" aria-hidden="true"></span>
+          </span>
         </label>
         <div class="set-actions">
           <button id="set-cancel">Cancel</button>

package/renderer/pet.js

@@ -40,6 +40,39 @@ const SPRITE = [
   })
 })()
 
+// hard hat (mechanic mode): pixel-art bitmap so it matches the pet's blocky look
+;(function buildHat() {
+  const g = el('hardhat')
+  if (!g) return
+  // L = highlight, Y = main, D = shadow rim, B = brim
+  const HAT = [
+    '.....YLLY.....',
+    '...YYYLLYYY...',
+    '..YYYYLLYYYY..',
+    '.YYYYYLLYYYYY.',
+    '.DDDDDDDDDDDD.',
+    'BBBBBBBBBBBBBB',
+  ]
+  const COL = { L: '#ffe27a', Y: '#f5c518', D: '#d99a00', B: '#c98f14' }
+  const C = 8 // cell size in svg units
+  const cols = HAT[0].length
+  const ox = 50 - (cols * C) / 2 // centered on the head (center x = 50)
+  const oy = -24 // rises above the head, brim ends just over the eyes
+  HAT.forEach((row, r) => {
+    for (let c = 0; c < row.length; c++) {
+      const ch = row[c]
+      if (ch === '.') continue
+      const rect = document.createElementNS(SVGNS, 'rect')
+      rect.setAttribute('x', ox + c * C)
+      rect.setAttribute('y', oy + r * C)
+      rect.setAttribute('width', C)
+      rect.setAttribute('height', C)
+      rect.setAttribute('fill', COL[ch])
+      g.appendChild(rect)
+    }
+  })
+})()
+
 // night scene backdrop (clouds, crescent moon, stars, dotted ground/sky)
 ;(function buildScene() {
   const s = el('scene')
@@ -81,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
@@ -369,17 +428,20 @@ function render(d) {
   const wkPct = liveOn ? realUsage.week.pct : 0
   const wkReset = liveOn ? realUsage.week.resetMs : null
 
+  const fireAt = currentConfig.fireThreshold ?? 90
   let st =
     liveOn && sessPct >= 100
       ? 'tired'
       : d.active
         ? 'working'
-        : liveOn && sessPct >= 90
+        : liveOn && sessPct >= fireAt
           ? 'stressed'
           : 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',
@@ -388,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)
@@ -399,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'
@@ -567,12 +640,32 @@ el('acc-confirm').addEventListener('click', () => {
 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
+function snapshotSettings() {
+  return JSON.stringify({
+    alerts: el('set-alerts').checked,
+    t1: el('set-t1').value,
+    t2: el('set-t2').value,
+    fire: el('set-fire').value,
+  })
+}
+function refreshSaveDirty() {
+  if (settingsBaseline == null) return
+  el('set-save').classList.toggle('dirty', snapshotSettings() !== settingsBaseline)
+}
+function clearSaveDirty() {
+  settingsBaseline = snapshotSettings()
+  el('set-save').classList.remove('dirty')
+}
 function populateSettings() {
   const c = currentConfig || {}
   el('set-alerts').checked = c.alerts !== false
   const th = c.alertThresholds || [80, 95]
   el('set-t1').value = th[0] != null ? th[0] : 80
   el('set-t2').value = th[1] != null ? th[1] : 95
+  el('set-fire').value = c.fireThreshold != null ? c.fireThreshold : 90
+  clearSaveDirty() // fields now match the saved config
 }
 function openSettings() {
   document.body.classList.remove('collapsed')
@@ -591,20 +684,30 @@ for (const b of document.querySelectorAll('.num-btn')) {
     const max = Number(input.max) || 100
     const next = (Number.parseInt(input.value, 10) || 0) + Number(b.dataset.step)
     input.value = Math.min(max, Math.max(min, next))
+    refreshSaveDirty() // steppers change the value without an 'input' event
   })
 }
+// light up Save whenever an editable field changes
+for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire']) {
+  el(id).addEventListener('input', refreshSaveDirty)
+  el(id).addEventListener('change', refreshSaveDirty)
+}
 el('set-cancel').addEventListener('click', () => {
   document.body.classList.remove('settings-open')
+  clearSaveDirty()
   fitSize()
 })
 el('set-save').addEventListener('click', () => {
   const num = (id) => parseFloat(el(id).value)
+  const fire = num('set-fire')
   window.api.saveConfig({
     alerts: el('set-alerts').checked,
     alertThresholds: [num('set-t1'), num('set-t2')]
       .filter((n) => n >= 1 && n <= 100)
       .sort((a, b) => a - b),
+    fireThreshold: fire >= 1 && fire <= 99 ? fire : 90,
   })
+  clearSaveDirty()
   document.body.classList.remove('settings-open')
   fitSize()
 })

package/renderer/style.css

@@ -242,6 +242,16 @@ body.settings-open #settings {
   display: flex;
   gap: 6px;
 }
+/* small captions under each threshold box */
+.set-caps {
+  margin-top: 3px;
+}
+.num-cap {
+  flex: 1;
+  font-size: 8.5px;
+  color: var(--muted);
+  padding-left: 2px;
+}
 /* custom number stepper */
 .num {
   position: relative;
@@ -324,12 +334,26 @@ body.settings-open #settings {
   background: rgba(255, 255, 255, 0.2);
 }
 #set-save {
-  background: var(--coral);
+  background: rgba(217, 119, 87, 0.4); /* calm until there are unsaved changes */
   color: #fff;
 }
 #set-save:hover {
   background: #e2876a;
 }
+/* unsaved changes: light up and pulse so you don't forget to save */
+#set-save.dirty {
+  background: var(--coral);
+  animation: save-pulse 1.6s ease-in-out infinite;
+}
+@keyframes save-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
+  }
+  50% {
+    box-shadow: 0 0 9px 2px rgba(217, 119, 87, 0.6);
+  }
+}
 
 /* live tag */
 .live-only {
@@ -604,6 +628,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 */
@@ -633,6 +658,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;
@@ -667,6 +702,304 @@ body.collapsed #shadow {
   transform-origin: center;
   animation: blink 5.5s infinite;
 }
+/* mechanic mode (settings): hard hat + screwdriver on the pet, loose gears
+   turning behind it. Hidden otherwise. */
+#robot {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+/* hard hat colors live inline (built pixel-by-pixel in pet.js buildHat) */
+.dr-handle {
+  fill: #c0392b;
+}
+.dr-handle-hi {
+  fill: #e0685a;
+}
+.dr-collar {
+  fill: #9a9a9a;
+}
+.dr-tip,
+.dr-shaft {
+  fill: #d0d0d0;
+}
+.dr-hi {
+  fill: #f2f2f2;
+}
+#gears {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  fill: #7a6a5c;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+body.settings-open #robot,
+body.settings-open #gears {
+  opacity: 1;
+}
+/* declutter the scene while configuring */
+body.settings-open #zzz,
+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;
@@ -871,6 +1204,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 {
@@ -1119,17 +1644,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,
   }