clauddy 1.15.0 → 1.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clauddy",
   "desktopName": "clauddy.desktop",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {

package/renderer/index.html

@@ -240,6 +240,7 @@
         <div class="divider"></div>
 
         <!-- session + weekly (real usage; needs login) -->
+        <div id="home-success" hidden>✓ Logged in — your real usage is live</div>
         <div id="limits">
           <div id="limits-meters">
             <div class="meter">
@@ -303,91 +304,52 @@
 
       <!-- settings panel -->
       <div id="settings">
-        <div class="set-title">Settings</div>
-
         <div id="account">
           <div id="acc-disconnected">
-            <div class="set-hint">Connect your account to show your real usage %.</div>
+            <div class="set-hint set-hint-left">Connect your Claude account to show your real usage.</div>
             <button id="acc-connect" class="acc-btn">Log in with browser</button>
             <div id="acc-paste">
-              <div class="set-hint">After logging in, paste the code from the browser page:</div>
+              <div class="set-hint set-hint-left">Paste the code from the browser page:</div>
               <input id="acc-code" type="text" placeholder="authentication code" />
               <button id="acc-confirm" class="acc-btn">Connect</button>
               <div id="acc-msg"></div>
             </div>
           </div>
           <div id="acc-connected">
-            <span class="acc-ok">● Connected · live data</span>
+            <span class="acc-ok" id="acc-ok">● Connected</span>
             <button id="acc-logout" class="acc-link">Disconnect</button>
           </div>
         </div>
 
-        <div class="set-section">
-          <div class="set-sec-title">Display</div>
-          <span class="seg" id="set-mode">
-            <button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
-            <button type="button" class="seg-btn" data-mode="menubar">Menu bar</button>
-          </span>
-        </div>
-
-        <div class="set-section">
-          <div class="set-sec-title">Zoom</div>
-          <div class="set-thresholds">
-            <span class="thr">
-              <span class="thr-cap">size</span>
-              <span class="num">
-                <input id="set-zoom" type="number" min="100" max="200" step="25" />
-                <span class="num-spin">
-                  <button type="button" class="num-btn" data-for="set-zoom" data-step="25">▲</button>
-                  <button type="button" class="num-btn" data-for="set-zoom" data-step="-25">▼</button>
-                </span>
-              </span>
+        <div id="set-rows">
+          <div class="set-row">
+            <span class="set-row-label">Display</span>
+            <span class="seg" id="set-mode">
+              <button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
+              <button type="button" class="seg-btn" data-mode="menubar">Menu bar</button>
             </span>
           </div>
-        </div>
-
-        <div class="set-section">
-          <div class="set-sec-title">
-            Alerts
+          <div class="set-row">
+            <span class="set-row-label">Alerts</span>
             <input id="set-alerts" class="set-toggle" type="checkbox" aria-label="Enable alerts" />
           </div>
-          <div class="set-thresholds">
-            <span class="thr">
-              <span class="thr-cap">heads-up</span>
-              <span class="num">
-                <input id="set-t1" type="number" min="1" max="100" />
-                <span class="num-spin">
-                  <button type="button" class="num-btn" data-for="set-t1" data-step="1">▲</button>
-                  <button type="button" class="num-btn" data-for="set-t1" data-step="-1">▼</button>
-                </span>
-              </span>
-            </span>
-            <span class="thr">
-              <span class="thr-cap">near limit</span>
-              <span class="num">
-                <input id="set-t2" type="number" min="1" max="100" />
-                <span class="num-spin">
-                  <button type="button" class="num-btn" data-for="set-t2" data-step="1">▲</button>
-                  <button type="button" class="num-btn" data-for="set-t2" data-step="-1">▼</button>
-                </span>
-              </span>
-            </span>
+          <div class="set-subgroup">
+            <div class="set-row set-sub">
+              <span class="set-row-label sub-label">heads-up</span>
+              <span class="num"><button type="button" class="num-btn" data-for="set-t1" data-step="-1">−</button><span class="num-val"><input id="set-t1" type="number" min="1" max="100" step="1" /><i>%</i></span><button type="button" class="num-btn" data-for="set-t1" data-step="1">+</button></span>
+            </div>
+            <div class="set-row set-sub">
+              <span class="set-row-label sub-label">near limit</span>
+              <span class="num"><button type="button" class="num-btn" data-for="set-t2" data-step="-1">−</button><span class="num-val"><input id="set-t2" type="number" min="1" max="100" step="1" /><i>%</i></span><button type="button" class="num-btn" data-for="set-t2" data-step="1">+</button></span>
+            </div>
           </div>
-        </div>
-
-        <div class="set-section">
-          <div class="set-sec-title">Catch fire</div>
-          <div class="set-thresholds">
-            <span class="thr">
-              <span class="thr-cap">session %</span>
-              <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>
+          <div class="set-row">
+            <span class="set-row-label">Catch fire<i class="set-row-hint">at this session %</i></span>
+            <span class="num"><button type="button" class="num-btn" data-for="set-fire" data-step="-1">−</button><span class="num-val"><input id="set-fire" type="number" min="1" max="99" step="1" /><i>%</i></span><button type="button" class="num-btn" data-for="set-fire" data-step="1">+</button></span>
+          </div>
+          <div class="set-row">
+            <span class="set-row-label">Zoom</span>
+            <span class="num"><button type="button" class="num-btn" data-for="set-zoom" data-step="-25">−</button><span class="num-val"><input id="set-zoom" type="number" min="100" max="200" step="25" /><i>%</i></span><button type="button" class="num-btn" data-for="set-zoom" data-step="25">+</button></span>
           </div>
         </div>
 

package/renderer/pet.js

@@ -89,9 +89,9 @@ const SPRITE = [
   }
   // clouds (blocky, dark gray)
   const cloud = (x, y, b, m, t) => {
-    add('rect', { x: x + 12, y: y, width: t, height: 9, fill: '#3a3a3a' })
-    add('rect', { x: x + 5, y: y + 7, width: m, height: 9, fill: '#3a3a3a' })
-    add('rect', { x: x, y: y + 14, width: b, height: 10, fill: '#3a3a3a' })
+    add('rect', { x: x + 12, y: y, width: t, height: 9, fill: '#3a3a3a', class: 'cloud' })
+    add('rect', { x: x + 5, y: y + 7, width: m, height: 9, fill: '#3a3a3a', class: 'cloud' })
+    add('rect', { x: x, y: y + 14, width: b, height: 10, fill: '#3a3a3a', class: 'cloud' })
   }
   cloud(16, 10, 58, 42, 22)
   cloud(120, 50, 40, 28, 15)
@@ -677,6 +677,10 @@ window.api.onAuthState((s) => {
 
 // logged-in account chip (email + plan) shown top-left when connected
 function showProfile(p) {
+  // the settings line says who is connected, not just that someone is
+  el('acc-ok').textContent = p?.email
+    ? `● ${p.email}${p.plan ? ` · ${p.plan}` : ''}`
+    : '● Connected'
   const chip = el('account-chip')
   const mini = el('mini-acct')
   if (!p?.email) {
@@ -703,11 +707,23 @@ function setPlan(node, plan) {
   }
 }
 window.api.onProfile(showProfile)
+let successTimer = null
 window.api.onAuthResult((r) => {
   if (r?.ok) {
     el('acc-msg').textContent = ''
     el('acc-code').value = ''
     el('acc-paste').classList.remove('show')
+    // logging in is done: land back on the home panel, where the fresh live
+    // meters show up under a short-lived cheer — and the pet throws confetti
+    document.body.classList.remove('settings-open')
+    clearSaveDirty()
+    el('home-success').hidden = false
+    clearTimeout(successTimer)
+    successTimer = setTimeout(() => {
+      el('home-success').hidden = true
+      fitSize()
+    }, 6000)
+    celebrate()
   } else {
     const e = r?.error || ''
     el('acc-msg').textContent = /429|rate_limit/i.test(e)
@@ -770,6 +786,10 @@ el('acc-connect').addEventListener('click', () => {
   el('acc-paste').classList.add('show') // reveal the code field
   fitSize()
 })
+// the Connect button only lights up once there's a code to submit
+el('acc-code').addEventListener('input', () => {
+  el('acc-confirm').classList.toggle('ready', !!el('acc-code').value.trim())
+})
 el('acc-confirm').addEventListener('click', () => {
   const code = el('acc-code').value.trim()
   if (!code) return
@@ -848,16 +868,34 @@ function snapshotSettings() {
 }
 function refreshSaveDirty() {
   if (settingsBaseline == null) return
-  el('set-save').classList.toggle('dirty', snapshotSettings() !== settingsBaseline)
+  const dirty = snapshotSettings() !== settingsBaseline
+  const b = el('set-save')
+  b.classList.toggle('dirty', dirty)
+  b.disabled = !dirty // nothing to save, nothing to click
 }
 function clearSaveDirty() {
   settingsBaseline = snapshotSettings()
-  el('set-save').classList.remove('dirty')
+  const b = el('set-save')
+  b.classList.remove('dirty')
+  b.disabled = true
+}
+function reflectAlertsOn() {
+  el('set-rows').classList.toggle('alerts-off', !el('set-alerts').checked)
+}
+// zoom applies as you step it, so the widget shows the size right away;
+// Cancel puts the saved value back
+function previewZoom() {
+  const v = Number.parseFloat(el('set-zoom').value)
+  if (v >= 100 && v <= 200) {
+    applyZoom(v)
+    fitSize()
+  }
 }
 function populateSettings() {
   const c = currentConfig || {}
   setModeUI(c.mode)
   el('set-alerts').checked = c.alerts !== false
+  reflectAlertsOn()
   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
@@ -883,6 +921,7 @@ for (const b of document.querySelectorAll('.num-btn')) {
     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
+    if (input.id === 'set-zoom') previewZoom()
   })
 }
 // light up Save whenever an editable field changes
@@ -890,6 +929,8 @@ for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire', 'set-zoom']) {
   el(id).addEventListener('input', refreshSaveDirty)
   el(id).addEventListener('change', refreshSaveDirty)
 }
+el('set-alerts').addEventListener('change', reflectAlertsOn)
+el('set-zoom').addEventListener('input', previewZoom)
 // display-mode segmented control (floating pet | menu bar)
 for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
   b.addEventListener('click', () => {
@@ -900,6 +941,7 @@ for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
 el('set-cancel').addEventListener('click', () => {
   document.body.classList.remove('settings-open')
   clearSaveDirty()
+  applyZoom(currentConfig?.zoom != null ? currentConfig.zoom : 100) // undo the preview
   fitSize()
 })
 el('set-save').addEventListener('click', () => {

package/renderer/style.css

@@ -221,13 +221,17 @@ body.settings-open #mini {
 }
 body.settings-open #settings {
   display: block;
+  animation: set-in 0.18s ease;
 }
-.set-title {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--text);
-  text-align: center;
-  margin-bottom: 6px;
+@keyframes set-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 .set-hint {
   font-size: 9px;
@@ -302,94 +306,168 @@ input[type="number"]::-webkit-outer-spin-button {
 body.is-menubar #min {
   display: none;
 }
-/* settings sections: Display / Alerts / Catch fire — each with a standardized
-   title, separated by a hairline divider */
-.set-section {
-  margin-bottom: 10px;
+/* settings rows: label on the left, control on the right — one setting per
+   line so the screen stays short. Alert thresholds indent under their toggle
+   and dim while alerts are off. */
+#set-rows {
+  margin-bottom: 10px; /* #account above already draws the divider */
 }
-.set-section + .set-section {
-  border-top: 0.5px solid var(--hair);
-  padding-top: 10px;
-}
-.set-sec-title {
+.set-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
+  min-height: 34px;
+  border-bottom: 0.5px solid var(--hair);
+}
+/* the threshold pair lives in an inset card under its toggle row */
+.set-row:has(+ .set-subgroup) {
+  border-bottom: none;
+}
+/* flat, but visibly nested: a soft coral guide bar ties the pair to the
+   toggle above, and each label hugs its own stepper */
+.set-subgroup {
+  position: relative;
+  padding-left: 14px;
+  border-bottom: 0.5px solid var(--hair);
+  padding-bottom: 3px;
+  transition: opacity 0.15s;
+}
+.set-subgroup::before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 5px;
+  bottom: 10px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--coral);
+  opacity: 0.35;
+}
+.set-subgroup .set-row {
+  border-bottom: none;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.set-row-label {
   font-size: 11px;
   font-weight: 600;
   color: var(--text);
-  margin-bottom: 8px;
 }
-/* alerts on/off toggle, sitting to the right of the section title */
+.set-row-hint {
+  display: block;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 9px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+.set-row.set-sub {
+  min-height: 31px;
+}
+.set-row.set-sub .set-row-label {
+  font-weight: 400;
+  font-size: 10.5px;
+  color: var(--muted);
+}
+#set-rows.alerts-off .set-subgroup {
+  opacity: 0.35;
+  pointer-events: none;
+}
+.set-row .seg {
+  margin-top: 0;
+  flex: none;
+}
+.set-row .seg-btn {
+  flex: none;
+  padding: 4px 9px;
+}
+/* alerts on/off pill switch (still an <input type=checkbox> underneath) */
 .set-toggle {
+  appearance: none;
+  -webkit-appearance: none;
   margin: 0;
-  width: 13px;
-  height: 13px;
-  accent-color: var(--coral);
+  width: 30px;
+  height: 18px;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.14);
+  position: relative;
   cursor: pointer;
+  -webkit-app-region: no-drag;
+  transition: background 0.18s;
 }
-/* threshold fields: caption on top, number input below — same shape for all
-   three (heads-up, near limit, catch fire) so they read as one set */
-.set-thresholds {
-  display: flex;
-  gap: 12px;
+.set-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  opacity: 0.85;
+  transition:
+    left 0.18s,
+    opacity 0.18s;
 }
-.thr {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.set-toggle:checked {
+  background: var(--coral);
 }
-.thr-cap {
-  font-size: 9px;
-  color: var(--muted);
-  height: 12px;
-  line-height: 12px;
+.set-toggle:checked::after {
+  left: 14px;
+  opacity: 1;
 }
-/* number field + custom stepper */
+/* number field: minus / value% / plus */
 .num {
-  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   flex: none;
-  width: 66px;
 }
-.num input {
+.num-val {
+  position: relative;
+  width: 54px;
+}
+.num-val input {
   width: 100%;
   background: rgba(255, 255, 255, 0.06);
   border: 0.5px solid var(--hair);
-  border-radius: 8px;
+  border-radius: 7px;
   color: var(--text);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  padding: 6px 24px 6px 10px;
+  text-align: right;
+  padding: 4px 20px 4px 6px;
   outline: none;
   transition:
     border-color 0.15s,
     background 0.15s;
 }
-.num input:focus {
+.num-val input:focus {
   border-color: var(--coral);
   background: rgba(255, 255, 255, 0.09);
 }
-.num-spin {
+.num-val i {
   position: absolute;
-  top: 3px;
-  right: 4px;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
+  right: 7px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-style: normal;
+  font-size: 10px;
+  color: var(--muted);
+  pointer-events: none;
 }
 .num-btn {
   -webkit-app-region: no-drag;
   border: none;
   background: rgba(255, 255, 255, 0.1);
   color: var(--muted);
-  width: 16px;
-  height: 9px;
-  border-radius: 3px;
-  font-size: 6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  font-size: 12px;
   line-height: 1;
   display: flex;
   align-items: center;
@@ -432,7 +510,7 @@ body.is-menubar #min {
     background 0.18s,
     transform 0.1s;
 }
-.set-actions button:active {
+.set-actions button:active:not(:disabled) {
   transform: scale(0.97);
 }
 #set-cancel {
@@ -443,10 +521,18 @@ body.is-menubar #min {
   background: rgba(255, 255, 255, 0.2);
 }
 #set-save {
-  background: rgba(217, 119, 87, 0.4); /* calm until there are unsaved changes */
+  background: rgba(255, 255, 255, 0.12); /* rests like Cancel; dirty lights it */
+  color: var(--text);
+}
+#set-save:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+#set-save.dirty,
+#set-save.dirty:hover {
   color: #fff;
 }
-#set-save:hover {
+#set-save.dirty:hover {
   background: #e2876a;
 }
 /* unsaved changes: light up and pulse so you don't forget to save */
@@ -562,6 +648,10 @@ body.live .live-only {
   opacity: 0.5;
   cursor: default;
 }
+#acc-confirm:not(.ready) {
+  background: rgba(255, 255, 255, 0.12);
+  color: var(--muted);
+}
 .acc-link {
   border: none;
   background: none;
@@ -580,11 +670,18 @@ body.live .live-only {
   color: var(--green);
   font-size: 11px;
   font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 #acc-connected {
   display: none;
   align-items: center;
   justify-content: space-between;
+  gap: 10px; /* the email ellipsizes instead of touching Disconnect */
+  flex-wrap: wrap; /* the success line drops to its own row */
 }
 #acc-paste {
   display: none;
@@ -616,6 +713,16 @@ body.auth-on #acc-connected {
   display: flex;
 }
 
+/* just logged in: a short-lived green cheer at the top of the home panel */
+#home-success {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--green);
+  text-align: center;
+  margin-bottom: 8px;
+  animation: set-in 0.18s ease;
+}
+
 /* limits: real meters when connected, a "connect" prompt otherwise */
 #limits-connect {
   display: flex;
@@ -775,6 +882,24 @@ body.settings-open #min {
 
 /* pet */
 /* expanded: a little night scene */
+body.settings-open #stage {
+  height: 100px;
+}
+/* the ground layers stretch to fill the stage; while it's shortened, pin them
+   at their natural height so the gears stay round — the top just clips away.
+   #scene keeps stretching (dots and stars tolerate it) so its frame rows stay
+   at the edges; the blocky clouds don't, so they sit this screen out. */
+body.settings-open #gears {
+  top: auto;
+  bottom: 0;
+  height: 132px;
+}
+body.settings-open .cloud {
+  display: none;
+}
+body.settings-open #pet {
+  zoom: 0.65;
+}
 #stage {
   position: relative;
   height: 132px;
@@ -908,10 +1033,17 @@ body.settings-open #robot,
 body.settings-open #gears {
   opacity: 1;
 }
-/* declutter the scene while configuring */
+/* declutter the scene while configuring: mood marks AND activity props —
+   the shortened stage only fits the pet and its gears */
 body.settings-open #zzz,
 body.settings-open #flames,
-body.settings-open #sweat {
+body.settings-open #sweat,
+body.settings-open #terminal,
+body.settings-open #reading,
+body.settings-open #mug,
+body.settings-open #desk,
+body.settings-open #plant,
+body.settings-open #glasses {
   display: none;
 }
 /* reading mode: an open book with a magnifying glass scanning the lines */