clauddy 1.7.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.
@@ -118,7 +139,7 @@ Settings saved from the UI live in `~/.claude-usage-monitor/config.json`, so you
   "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 +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

@@ -4,6 +4,6 @@
   "alertThresholds": [80, 95],
   "fireThreshold": 90,
   "pollIntervalMs": 4000,
-  "activeThresholdMs": 8000,
+  "activeThresholdMs": 20000,
   "sleepThresholdMs": 300000
 }

package/main.js

@@ -52,7 +52,7 @@ function loadConfig() {
     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.7.0",
+  "version": "1.8.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {

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 -->

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'

package/renderer/style.css

@@ -628,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 */
@@ -657,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;
@@ -736,6 +747,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 +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 {
@@ -1188,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,
   }