clauddy 1.6.0 → 1.7.0

package/README.md

@@ -115,7 +115,8 @@ 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
   "sleepThresholdMs": 300000, // "sleeping" after this much idle time (5 min)

package/config.json

@@ -2,6 +2,7 @@
   "_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,
   "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,6 +50,7 @@ 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,
     sleepThresholdMs: 300000,

package/package.json

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

package/renderer/index.html

@@ -31,6 +31,43 @@
 
       <!-- 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>
         <div id="shadow"></div>
         <div id="pet">
@@ -38,6 +75,21 @@
             <g id="body"></g>
             <g id="eyes"></g>
             <rect id="mouth" x="38" y="54" width="24" height="10" rx="2" />
+            <!-- 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>
@@ -141,7 +193,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 +211,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')
@@ -369,12 +402,13 @@ 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'
@@ -567,12 +601,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 +645,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 {
@@ -667,6 +691,51 @@ 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;
+}
 #mouth {
   fill: var(--eye);
   transform-box: fill-box;