clauddy 1.11.1 → 1.13.0

package/README.md

@@ -3,19 +3,22 @@
 A cute pixel-art desktop pet for macOS that tracks your Claude Code usage — mirroring the official **Settings → Usage** panel (current session + weekly limits, in tokens & %), with animations.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/docs/media/overview.gif" width="300" alt="Clauddy — the full widget showing session, weekly, by-model and 30-day usage" /><br />
-  <em>A little terracotta creature that lives in the corner of your screen, eats your tokens, and naps when you're idle.</em>
+
+https://github.com/user-attachments/assets/76d87b6f-2876-4000-b6db-13ba2207ae31
+
+<em>A little terracotta creature that lives in the corner of your screen, eats your tokens, and naps when you're idle.</em>
 </p>
 
 ## What it shows
 
-- **Current session** — real % used + **"resets in Xh Ym"** + session tokens
+- **Current session** — real % used + **"resets in Xh Ym"** + session tokens, and a projection of where that pace is taking you (see [Burn rate](#burn-rate))
 - **Weekly · all models** — real % used + tokens over the last 7 days
 - **Status line** under the pet: `● working · 1.6M tok/min` (or today's tokens when idle)
 - **By model · 7 days** — Opus / Sonnet / Haiku / Fable, in tokens
+- **By project · 7 days** — which repo actually ate the week, ranked, with the tail folded into `other`
 - **30-day map** — colored squares by daily tokens (green = light → red = heavy), with the monthly total
 
-The **percentages are real**, pulled from your account (you log in once — see below). The token counts, by-model breakdown, activity status, and 30-day map come from your local logs (`~/.claude/projects/**/*.jsonl`). Everything is token-based — no dollars.
+The **percentages are real**, pulled from your account (you log in once — see below). The token counts, the by-model and by-project breakdowns, activity status, and 30-day map come from your local logs (`~/.claude/projects/**/*.jsonl`). Everything is token-based — no dollars.
 
 ## Account & live usage
 
@@ -26,6 +29,19 @@ The session/weekly **%** comes straight from your Anthropic account, so it match
 
 The token is saved locally (see [Data & privacy](#data--privacy)) and refreshed automatically. **Until you connect**, the limits area shows a _"Connect your account"_ prompt instead of percentages.
 
+## Burn rate
+
+Knowing you're at **82%** with **1h 12m** left on the window still leaves you doing arithmetic in your head. So Clauddy does it for you: it fits the slope of your recent usage and projects when you'd hit 100% — showing one extra line under the session bar:
+
+- **`~35m left at this pace`** (in coral) — you'd run out before the window resets. Ease off, or wrap up.
+- **`resets before you run out`** — the reset gets there first. Carry on.
+
+The slope is fitted over your **session tokens** rather than the account %. The % is the number you care about, but it arrives as a whole number every ~5 minutes — over a short window the whole signal is a single `16 → 17` step, which throws the fitted pace off by multiples. Local-log tokens step too — one jump per assistant turn — but in increments some 10–20× finer, so the slope is far steadier; the account % then anchors it, converting tokens into % and re-calibrating on every poll.
+
+It reads your **recent** pace, not the session average: go quiet for a few minutes and the projection eases off, which is the point.
+
+It only appears once there's enough to say honestly — roughly 5 minutes into a session — and stays hidden while you're idle, when the pace is flat, or right after a reset. A projection is a projection: change your pace and it changes with you.
+
 ## The pet's states
 
 <table>
@@ -109,9 +125,7 @@ The quickest path works the same as macOS — with [Bun](https://bun.sh) or Node
 bunx clauddy   # or: npx clauddy
 ```
 
-Prefer a standalone app with no Node/Bun? Grab the **portable zip** (`Clauddy-<version>-win.zip`) from the [latest release](https://github.com/renatoaug/claude-usage-monitor/releases), unzip it anywhere, and run `Clauddy.exe`. Because the app is unsigned, Windows **SmartScreen** shows a "Windows protected your PC" prompt the first time — click **More info → Run anyway**. From then on it starts with Windows.
-
-> Windows builds are produced by the **Build** workflow (Actions ▸ Build) — attaching them to every release automatically is on the roadmap.
+Prefer a standalone app with no Node/Bun? Grab the **portable zip** (`Clauddy-<version>-win-x64.zip`) from the [latest release](https://github.com/renatoaug/claude-usage-monitor/releases), unzip it anywhere, and run `Clauddy.exe`. Because the app is unsigned, Windows **SmartScreen** shows a "Windows protected your PC" prompt the first time — click **More info → Run anyway**. From then on it starts with Windows.
 
 ### Linux (x64)
 
@@ -121,15 +135,13 @@ The quickest path works the same as macOS — with [Bun](https://bun.sh) or Node
 bunx clauddy   # or: npx clauddy
 ```
 
-Prefer a standalone app? Grab the **AppImage** or **tar.gz** (`Clauddy-<version>.AppImage` / `clauddy-<version>.tar.gz`) from the [latest release](https://github.com/renatoaug/claude-usage-monitor/releases), then:
+Prefer a standalone app? Grab the **AppImage** or **tar.gz** (`Clauddy-<version>-linux-x86_64.AppImage` / `Clauddy-<version>-linux-x64.tar.gz`) from the [latest release](https://github.com/renatoaug/claude-usage-monitor/releases), then:
 
 ```bash
 chmod +x Clauddy-*.AppImage
 ./Clauddy-*.AppImage
 ```
 
-> Linux builds are produced by the **Build** workflow (Actions ▸ Build) — attaching them to every release automatically is on the roadmap.
-
 > The system tray icon needs an indicator extension on vanilla GNOME (e.g. "AppIndicator and KStatusNotifier Item Support") — it works out of the box on Cinnamon, KDE, and XFCE. Autostart-at-login is wired up via an XDG `.desktop` entry in `~/.config/autostart/`.
 
 > The app keeps its data in `~/.claude-usage-monitor`, regardless of platform or how you run it.
@@ -193,7 +205,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, the working/sleeping status, and which activity (reading/editing/running/…) Claude is on from its latest tool use.
+- **`usage.js`** — reads `~/.claude/projects/**/*.jsonl`, sums tokens per model/project/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`).
@@ -208,9 +220,17 @@ Everything lives on your machine, in `~/.claude-usage-monitor/`:
 
 Nothing leaves your machine except the OAuth calls to Anthropic's own login and usage endpoints.
 
+## Contributing
+
+Bug reports and ideas are welcome — see **[CONTRIBUTING.md](CONTRIBUTING.md)**
+for setup and the few gotchas worth knowing before a first PR.
+
 ## Dev tooling
 
 - **Bun** for install/scripts, **Node 24** pinned in `.nvmrc`
+- **Tests**: `bun run test` (never bare `bun test` — the groups under `test/`
+  must each run in their own process). `bun run test:coverage` enforces the
+  floor; every PR runs both.
 - **Biome** for format + lint (`bun run check`); a versioned **pre-commit hook** (`.githooks/pre-commit`) auto-formats staged files and blocks on errors. It's wired up automatically on `bun install` (via the `prepare` script).
 
 ### Releasing
@@ -218,9 +238,15 @@ Nothing leaves your machine except the OAuth calls to Anthropic's own login and
 Releases are **fully automated**. Every push to `main` runs
 [semantic-release](https://semantic-release.gitbook.io) (`.github/workflows/release.yml`):
 it reads the **Conventional Commits** and, when there's something to ship,
-computes the version, builds the macOS app, publishes `clauddy` to npm, and
-cuts a GitHub Release with the `.app` zip. Nothing to do by hand — just merge
-your PRs.
+computes the version, builds the app for **macOS, Windows and Linux** on their
+own runners, publishes `clauddy` to npm, and cuts a GitHub Release with every
+artifact attached. Nothing to do by hand — just merge your PRs.
+
+The pipeline runs in three stages, because electron-builder can't cross-build
+Windows/Linux from macOS: `version` (a semantic-release dry-run that computes
+the next version) → `build` (a matrix that stamps that version into
+`package.json` so the filenames are right) → `publish` (downloads every
+artifact and runs semantic-release for real).
 
 - `feat:` → minor, `fix:` → patch, `feat!:`/`BREAKING CHANGE` → major.
 - `docs:`/`chore:`/`ci:` etc. don't trigger a release.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clauddy",
   "desktopName": "clauddy.desktop",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {
@@ -24,6 +24,8 @@
     "dist:linux": "node scripts/build-app.js --linux --publish never",
     "icon": "bash build-icon.sh",
     "gifs": "electron tools/capture/capture.js",
+    "test": "bun test test/unit/ && bun test test/main/ && bun test test/dom/",
+    "test:coverage": "node scripts/check-coverage.js",
     "format": "biome format --write .",
     "lint": "biome lint .",
     "check": "biome check --write .",
@@ -80,17 +82,20 @@
       "category": "public.app-category.developer-tools",
       "target": "dir",
       "identity": null,
-      "icon": "build/icon.icns"
+      "icon": "build/icon.icns",
+      "artifactName": "${productName}-${version}-mac-${arch}.${ext}"
     },
     "win": {
       "target": "zip",
-      "icon": "build/icon.ico"
+      "icon": "build/icon.ico",
+      "artifactName": "${productName}-${version}-win-${arch}.${ext}"
     },
     "linux": {
       "target": [
         "tar.gz",
         "AppImage"
       ],
+      "artifactName": "${productName}-${version}-linux-${arch}.${ext}",
       "category": "Utility",
       "icon": "build/icon.png",
       "syncDesktopName": true
@@ -101,7 +106,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.0",
-    "@semantic-release/exec": "^7.1.0",
+    "@happy-dom/global-registrator": "^20.11.2",
     "electron-builder": "^26.15.3",
     "semantic-release": "^25.0.5"
   }

package/renderer/burn.js

@@ -0,0 +1,98 @@
+// ---- burn-rate projection ----
+// The panel knows where you are (82%) and when the window resets (1h 12m); it
+// can also say where you're headed — fit a slope through recent usage and
+// project the crossing of 100%. If the reset lands first there's nothing to
+// worry about, which is worth saying out loud rather than leaving blank.
+//
+// The slope is fitted over session *tokens*, not the account %. The % is the
+// number we ultimately care about, but it arrives as a whole number every ~5
+// min: over a short window the whole signal is a single 16 → 17 step, which
+// makes the fitted pace wrong by multiples. Local-log tokens step too — one
+// jump per assistant turn, with plateaus in between — but in increments some
+// 10-20x finer, so they carry a far steadier slope. The account % still anchors
+// it: pct/tokens converts tokens/ms into %/ms and re-calibrates on every poll,
+// so the projection stays tied to the real number.
+//
+// Loaded both as a plain <script> by the renderer (exposing `Burn`) and via
+// require() by the tests — hence the dual export at the bottom.
+;(() => {
+  const WINDOW_MS = 45 * 60 * 1000 // only fit recent samples — pace changes
+  const MIN_SAMPLES = 4
+  const MIN_SPAN_MS = 5 * 60 * 1000 // shorter than a % fit affords, and steadier
+  const SAMPLE_EVERY_MS = 30 * 1000 // usage polls every few seconds; thin it out
+
+  // `now` is injectable so tests can drive the trail without sleeping
+  function createBurnTracker() {
+    let trail = []
+
+    function note(tokens, active, now = Date.now()) {
+      if (!active || !(tokens > 0)) {
+        trail = [] // no session, no trend
+        return
+      }
+      // session tokens only climb within a window — a drop means it rolled
+      // over, and the fresh sample starts the new trail rather than being
+      // throttled away
+      let last = trail[trail.length - 1]
+      if (last && tokens < last.tokens) {
+        trail = []
+        last = undefined
+      }
+      if (last && now - last.t < SAMPLE_EVERY_MS) return
+      trail.push({ t: now, tokens })
+      trail = trail.filter((s) => s.t >= now - WINDOW_MS)
+    }
+
+    // least-squares slope in tokens per ms, or null when there isn't enough to say
+    function slope() {
+      if (trail.length < MIN_SAMPLES) return null
+      const span = trail[trail.length - 1].t - trail[0].t
+      if (span < MIN_SPAN_MS) return null
+      const n = trail.length
+      const t0 = trail[0].t
+      let sx = 0
+      let sy = 0
+      let sxy = 0
+      let sxx = 0
+      for (const s of trail) {
+        const x = s.t - t0
+        sx += x
+        sy += s.tokens
+        sxy += x * s.tokens
+        sxx += x * x
+      }
+      const denom = n * sxx - sx * sx
+      if (denom === 0) return null
+      return (n * sxy - sx * sy) / denom
+    }
+
+    // → { kind: 'eta', ms } when you'd run out first, { kind: 'safe' } when the
+    // reset beats you there, or null when we can't tell yet.
+    function project(pct, resetMs, tokens) {
+      if (!(pct > 0) || !(tokens > 0)) return null // no anchor to convert tokens → %
+      const tokPerMs = slope()
+      if (tokPerMs == null || tokPerMs <= 0) return null // idle or flat
+      const pctPerMs = tokPerMs * (pct / tokens)
+      const eta = (100 - pct) / pctPerMs
+      if (!Number.isFinite(eta) || eta <= 0) return null
+      if (resetMs != null && eta >= resetMs) return { kind: 'safe' }
+      return { kind: 'eta', ms: eta }
+    }
+
+    return {
+      note,
+      slope,
+      project,
+      reset: () => {
+        trail = []
+      },
+      get trail() {
+        return trail
+      },
+    }
+  }
+
+  const api = { createBurnTracker, WINDOW_MS, MIN_SAMPLES, MIN_SPAN_MS, SAMPLE_EVERY_MS }
+  if (typeof module === 'object' && module.exports) module.exports = api
+  else globalThis.Burn = api
+})()

package/renderer/index.html

@@ -246,6 +246,7 @@
               <div class="meter-top"><span>current session</span><span id="session-pct">0%</span></div>
               <div class="track"><div class="fill" id="session-fill"></div></div>
               <div class="sub" id="session-sub">no active session</div>
+              <div class="sub proj" id="session-proj" hidden></div>
             </div>
             <div class="meter">
               <div class="meter-top"><span>weekly · all models</span><span id="week-pct">0%</span></div>
@@ -267,9 +268,23 @@
         <div class="divider"></div>
 
         <!-- by model (7 days) -->
-        <div id="bymodel">
-          <div class="bymodel-title">by model · 7 days</div>
-          <div id="bymodel-list"></div>
+        <div id="bymodel" class="sec">
+          <button class="sec-head" data-sec="bymodel" aria-expanded="true">
+            <span class="sec-name">by model · 7 days</span>
+            <svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
+          </button>
+          <div id="bymodel-list" class="sec-body"></div>
+        </div>
+
+        <div class="divider"></div>
+
+        <!-- by project (7 days) -->
+        <div id="byproject" class="sec">
+          <button class="sec-head" data-sec="byproject" aria-expanded="true">
+            <span class="sec-name">by project · 7 days</span>
+            <svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
+          </button>
+          <div id="byproject-list" class="sec-body"></div>
         </div>
 
         <div class="divider"></div>
@@ -373,6 +388,7 @@
         </div>
       </div>
     </div>
-    <script src="pet.js"></script>
+    <script src="burn.js"></script>
+<script src="pet.js"></script>
   </body>
 </html>

package/renderer/pet.js

@@ -141,6 +141,14 @@ const SPRITE = [
 })()
 
 // helpers
+// labels come from log fields and directory names — neither is ours to trust
+function esc(s) {
+  return String(s).replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c],
+  )
+}
+
 function fmtTokens(t) {
   t = t || 0
   if (t >= 1e9) return `${(t / 1e9).toFixed(2)}B`
@@ -154,6 +162,9 @@ function fmtReset(ms) {
   const m = Math.floor((ms % 3600000) / 60000)
   return h > 0 ? `${h}h ${m}m` : `${m}m`
 }
+// burn-rate projection lives in burn.js (shared with the tests)
+const burn = Burn.createBurnTracker()
+
 function setState(name) {
   const b = document.body
   ;[...b.classList].forEach((c) => {
@@ -345,24 +356,60 @@ function renderHeat(days) {
   })
 }
 
-// by model (7 days)
-function renderModels(list) {
-  const box = el('bymodel-list')
+// ranked bar list — shared by the model and project panels
+//
+// The name column is one width for the whole list, never per row: the bars are
+// only comparable if every track starts and ends at the same x. So it is sized
+// to the widest label actually present, clamped so a long path cannot squeeze
+// the bars into stubs, and anything past the clamp is clipped with an ellipsis.
+const NAME_MIN = 64
+const BAR_MIN = 96 // room left for the track and the token count
+
+function renderBars(boxId, list, limit) {
+  const box = el(boxId)
   box.innerHTML = ''
-  const top = list.slice(0, 4)
+  const top = list.slice(0, limit)
   const max = Math.max(1, ...top.map((m) => m.tokens))
   for (const m of top) {
     const row = document.createElement('div')
     row.className = 'mrow'
     row.innerHTML =
-      `<span class="mname">${m.label}</span>` +
+      `<span class="mname">${esc(m.label)}</span>` +
       `<span class="mbar"><i style="width:${(m.tokens / max) * 100}%"></i></span>` +
       `<span class="mval">${fmtTokens(m.tokens)}</span>`
+    // the column can clip, so keep the full label reachable
+    row.firstChild.title = m.label
     box.appendChild(row)
   }
   if (!top.length) {
     box.innerHTML = '<div class="mrow" style="opacity:.5">no activity</div>'
+    return
   }
+  fitNames(box)
+}
+
+// measure the labels unconstrained, then lock the column to the widest one
+function fitNames(box) {
+  const names = [...box.querySelectorAll('.mname')]
+  // a collapsed section measures zero — it re-fits when it opens
+  if (!names.length || !box.getBoundingClientRect().width) return
+  box.style.setProperty('--name-w', 'auto')
+  let widest = 0
+  for (const n of names) widest = Math.max(widest, n.getBoundingClientRect().width)
+  const room = box.getBoundingClientRect().width - BAR_MIN
+  const w = Math.max(NAME_MIN, Math.min(Math.ceil(widest) + 1, room))
+  box.style.setProperty('--name-w', `${w}px`)
+}
+
+// by model (7 days)
+function renderModels(list) {
+  renderBars('bymodel-list', list, 4)
+}
+
+// by project (7 days) — usage.js already folds everything past the top few
+// into a single `other` row, so whatever arrives here is meant to be drawn
+function renderProjects(list) {
+  renderBars('byproject-list', list, 6)
 }
 
 // one-shot reaction (adds a class, removes after ms)
@@ -500,6 +547,18 @@ function render(d) {
     ? `resets in ${fmtReset(sessReset)} · ${fmtTokens(d.session.tokens)} tokens`
     : 'no active session'
 
+  // where this pace is taking you — hidden until there's enough trail to tell
+  burn.note(d.session.tokens, sessActive)
+  const proj =
+    sessActive && sessPct < 100 ? burn.project(sessPct, sessReset, d.session.tokens) : null
+  const pe = el('session-proj')
+  pe.hidden = !proj
+  pe.classList.toggle('tight', proj?.kind === 'eta')
+  if (proj) {
+    pe.textContent =
+      proj.kind === 'eta' ? `~${fmtReset(proj.ms)} left at this pace` : 'resets before you run out'
+  }
+
   el('week-pct').textContent = `${Math.round(wkPct)}%`
   const wf = el('week-fill')
   wf.style.width = `${wkPct}%`
@@ -510,6 +569,7 @@ function render(d) {
       : `${fmtTokens(d.week.tokens)} tokens · last 7 days`
 
   renderModels(d.byModel || [])
+  renderProjects(d.byProject || [])
   renderHeat(d.days30 || [])
   el('month-total').textContent = `${fmtTokens(d.monthTokens)} tokens`
 
@@ -620,6 +680,50 @@ window.api.onAuthResult((r) => {
   fitSize()
 })
 
+// collapsible panel sections — the widget is a desktop pet, not a dashboard, so
+// each breakdown can be folded away and the choice is remembered per machine
+const SEC_KEY = 'clauddy.folded'
+
+function readFolded() {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(SEC_KEY) || '[]'))
+  } catch {
+    return new Set()
+  }
+}
+
+function toggleSection(id, force) {
+  const sec = el(id)
+  if (!sec) return
+  // `folded`, not `collapsed` — the body already uses that word for the pet
+  const folded = force !== undefined ? force : !sec.classList.contains('folded')
+  sec.classList.toggle('folded', folded)
+  const head = sec.querySelector('.sec-head')
+  if (head) head.setAttribute('aria-expanded', String(!folded))
+  // the column width could not be measured while hidden
+  if (!folded) fitNames(sec.querySelector('.sec-body'))
+  // the card just changed height, and the next usage poll is seconds away —
+  // without this the window keeps its old size and clips the content
+  fitSize()
+}
+
+for (const head of document.querySelectorAll('.sec-head')) {
+  head.addEventListener('click', () => {
+    const id = head.dataset.sec
+    toggleSection(id)
+    const open = readFolded()
+    if (el(id).classList.contains('folded')) open.add(id)
+    else open.delete(id)
+    try {
+      localStorage.setItem(SEC_KEY, JSON.stringify([...open]))
+    } catch {
+      // private mode or a wiped profile — the panel just forgets, which is fine
+    }
+  })
+}
+
+for (const id of readFolded()) toggleSection(id, true)
+
 el('close').addEventListener('click', () => window.api.quit())
 el('usage').addEventListener('click', () => window.api.openUsage())
 
@@ -808,3 +912,20 @@ window.addEventListener('mouseout', (e) => {
 // welcome wave
 document.body.classList.add('greet')
 setTimeout(() => document.body.classList.remove('greet'), 1200)
+
+// Loaded as a plain <script> by the widget, where `module` doesn't exist. The
+// tests import it instead, against a happy-dom document and a stub bridge —
+// same dual export as burn.js.
+if (typeof module === 'object' && module.exports) {
+  module.exports = {
+    render,
+    fmtTokens,
+    fmtReset,
+    setState,
+    renderModels,
+    renderProjects,
+    renderHeat,
+    showProfile,
+    burn,
+  }
+}

package/renderer/style.css

@@ -1618,6 +1618,18 @@ body.state-tired #status-text {
   letter-spacing: 0.2px;
 }
 
+/* burn-rate projection — calm by default, warm when you'd run out first */
+.sub.proj {
+  margin-top: 2px;
+  font-style: italic;
+  opacity: 0.85;
+}
+.sub.proj.tight {
+  color: var(--coral);
+  font-style: normal;
+  opacity: 1;
+}
+
 /* 30-day map */
 #heat {
   margin-top: 12px;
@@ -1673,7 +1685,7 @@ body.state-tired #status-text {
 .meter-top {
   display: flex;
   justify-content: space-between;
-  font-size: 10.5px;
+  font-size: 10px;
   color: var(--muted);
   margin-bottom: 4px;
 }
@@ -1710,12 +1722,44 @@ body.state-tired #status-text {
   background: linear-gradient(90deg, #e98a68, #d8442f);
 }
 
-/* by model */
-.bymodel-title {
+/* by model / by project — collapsible sections */
+.sec-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 6px;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
   font-size: 9.5px;
   color: var(--muted);
   letter-spacing: 0.3px;
-  margin-bottom: 6px;
+  -webkit-app-region: no-drag;
+}
+.sec-head:hover {
+  color: var(--text);
+}
+.sec-chev {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 0.22s ease;
+}
+.sec.folded .sec-chev {
+  transform: rotate(-90deg);
+}
+.sec.folded .sec-body {
+  display: none;
+}
+.sec.folded .sec-head {
+  margin-bottom: 0;
 }
 .mrow {
   display: flex;
@@ -1726,8 +1770,18 @@ body.state-tired #status-text {
   margin-bottom: 5px;
 }
 .mrow .mname {
-  flex: 0 0 64px;
+  /* one width for the whole list, measured at render time — the bars are only
+     comparable if every track starts at the same x */
+  flex: 0 0 var(--name-w, 64px);
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* project names are paths, not four-letter families — give them room and clip
+   the rest, with the full name on the row's title attribute */
+#byproject .mrow {
+  font-size: 10px;
 }
 .mrow .mbar {
   flex: 1;

package/usage.js

@@ -28,6 +28,86 @@ function labelFor(model) {
   return fam
 }
 
+// Claude Code names each project directory after the working directory with
+// every `/` and `.` flattened to `-`, so `-Users-me-my-projects-clauddy` cannot
+// be reversed by string surgery alone: the separator and the names use the same
+// character. Instead of guessing, we walk the real filesystem and let it be the
+// dictionary — at each level we ask which actual child directory, once encoded
+// the same way, starts the remaining string. Longest match first, because `my`
+// and `my-projects` can both be candidates and only the longer one is right.
+const projectLabelCache = new Map()
+
+function encodePathSegment(name) {
+  return name.replace(/[/.]/g, '-')
+}
+
+// Walks as far as the filesystem allows and reports where it stopped. A project
+// that has since been moved or deleted still resolves its surviving ancestors,
+// which is what keeps the fallback label readable instead of a raw blob.
+//
+// `consumed` is the remainder as it stood *before* the last successful step.
+// That step is the only one that can have eaten into the name of a directory
+// that no longer exists — matching `qulture-identity` out of the encoded
+// `qulture-identity-web` leaves a bare `web`, which reads like a real project
+// and is not one. When the walk ends short, the caller rewinds to `consumed`
+// and shows a longer label rather than a confidently wrong one.
+function resolveProjectPath(dirName) {
+  let cur = path.sep
+  let rest = dirName
+  let consumed = null
+  while (rest) {
+    if (!rest.startsWith('-')) break
+    const tail = rest.slice(1)
+    let kids
+    try {
+      kids = fs.readdirSync(cur, { withFileTypes: true })
+    } catch {
+      break
+    }
+    let match = null
+    for (const k of kids) {
+      // symlinks count: /var is one on macOS, and people do symlink project trees
+      if (!k.isDirectory() && !k.isSymbolicLink()) continue
+      const enc = encodePathSegment(k.name)
+      // `my` and `my-projects` can both start the remainder — the longer one wins
+      if (tail !== enc && !tail.startsWith(`${enc}-`)) continue
+      if (!match || enc.length > encodePathSegment(match).length) match = k.name
+    }
+    if (!match) break
+    consumed = tail
+    cur = path.join(cur, match)
+    rest = tail.slice(encodePathSegment(match).length)
+  }
+  return { full: rest ? null : cur, consumed }
+}
+
+const LABEL_MAX = 26
+
+// The readable name for a project directory: its basename when the path still
+// exists, otherwise the raw tail. A moved or deleted project is shown as-is
+// rather than guessed at — a wrong name is worse than an ugly one.
+function projectLabel(dirName) {
+  const hit = projectLabelCache.get(dirName)
+  if (hit !== undefined) return hit
+  const { full, consumed } = resolveProjectPath(dirName)
+  let label
+  if (full) {
+    label = path.basename(full) || full
+  } else {
+    // whatever the filesystem could not account for, shown as-is
+    label = (consumed || dirName).replace(/^-+/, '')
+    if (label.length > LABEL_MAX) label = `…${label.slice(-(LABEL_MAX - 1))}`
+  }
+  projectLabelCache.set(dirName, label)
+  return label
+}
+
+function projectDirOf(file) {
+  const rel = path.relative(PROJECTS_DIR, file)
+  const first = rel.split(path.sep)[0]
+  return first && first !== '..' ? first : null
+}
+
 function tokensOf(entry) {
   const u = entry.usage || {}
   return (
@@ -100,6 +180,8 @@ function parseFile(full, st) {
 }
 
 const DAYS = 30
+// how many projects the panel ranks before folding the rest into `other`
+const TOP_PROJECTS = 5
 const SESSION_MS = 5 * 3600 * 1000
 
 // map a Claude Code tool name to what the pet is "doing"
@@ -213,12 +295,15 @@ function getUsage(config) {
   let weekTokens = 0
   let monthTokens = 0
   const byModel = new Map() // tokens per model, 7 days
+  const byProject = new Map() // tokens per project, 7 days
   const days30 = new Array(DAYS).fill(0) // tokens per day
   const recent = [] // last 12h, to detect the 5h session
   let last5mTokens = 0
 
   for (const f of files) {
     const entries = parseFile(f.full, f.st)
+    const dir = projectDirOf(f.full)
+    const proj = dir ? projectLabel(dir) : null
     for (const e of entries) {
       if (e.ts < start30) continue
       if (e.key && e.key !== ':' && seen.has(e.key)) continue
@@ -233,6 +318,7 @@ function getUsage(config) {
         weekTokens += t
         const lbl = labelFor(e.model)
         byModel.set(lbl, (byModel.get(lbl) || 0) + t)
+        if (proj) byProject.set(proj, (byProject.get(proj) || 0) + t)
       }
       if (e.ts >= todayMs) todayTokens += t
       if (e.ts >= recentCutoff) recent.push({ ts: e.ts, tokens: t })
@@ -277,11 +363,26 @@ function getUsage(config) {
     .map(([label, tokens]) => ({ label, tokens }))
     .sort((a, b) => b.tokens - a.tokens)
 
+  // ranked, then everything past the top N folded into one row — a machine with
+  // 40 project directories must not turn the panel into a 40-row list.
+  const ranked = [...byProject.entries()]
+    .map(([label, tokens]) => ({ label, tokens }))
+    .sort((a, b) => b.tokens - a.tokens)
+  const byProjectArr = ranked.slice(0, TOP_PROJECTS)
+  const rest = ranked.slice(TOP_PROJECTS)
+  if (rest.length) {
+    byProjectArr.push({
+      label: `other · ${rest.length}`,
+      tokens: rest.reduce((n, p) => n + p.tokens, 0),
+    })
+  }
+
   return {
     session,
     week: { tokens: weekTokens, pct: weekPct, resetMs: weekResetMs },
     today: { tokens: todayTokens },
     byModel: byModelArr,
+    byProject: byProjectArr,
     days30,
     monthTokens,
     tokensPerMin: Math.round(last5mTokens / 5),
@@ -293,4 +394,7 @@ function getUsage(config) {
   }
 }
 
-module.exports = { getUsage }
+// labelFor/tokensOf/detectActivity are exported for the tests — they're the
+// parts that decode Claude Code's log format, which is the thing most likely
+// to change out from under us.
+module.exports = { getUsage, labelFor, projectLabel, tokensOf, detectActivity, PLAN_BUDGETS }