clauddy 1.23.1 → 1.25.0

package/renderer/pet.js

@@ -136,6 +136,9 @@ function fmtTokens(t) {
 }
 function fmtReset(ms) {
   if (!ms || ms <= 0) return 'now'
+  // past a day, hours are the useful grain: "6d 16h", not "160h 57m"
+  if (ms >= 86400000)
+    return `${Math.floor(ms / 86400000)}d ${Math.floor((ms % 86400000) / 3600000)}h`
   const h = Math.floor(ms / 3600000)
   const m = Math.floor((ms % 3600000) / 60000)
   return h > 0 ? `${h}h ${m}m` : `${m}m`
@@ -468,28 +471,474 @@ function celebrate() {
   for (let i = 0; i < 24; i++) spawnConfetti(i)
 }
 
+// ---- voice ------------------------------------------------------------------
+// The bubble speaks on transitions only, at most once per REMARK_GAP_MS. The
+// headline moments (the day's first hello, a fresh window, catching fire) may
+// jump that queue, and only they blip: a noise on every remark wears out far
+// faster than the remark itself.
+const REMARK_GAP_MS = 10 * 60000
+const MUTE_MS = 60 * 60000
+const blipper = Voice.createBlipper(() => {
+  const AC = globalThis.AudioContext || globalThis.webkitAudioContext
+  return AC ? new AC() : null
+})
+let lastRemarkAt = 0
+let bubbleTimer = null
+
+const talkOn = () => currentConfig.talk !== false
+const mutedNow = () => currentConfig.soundMutedUntil > Date.now()
+// opt-in, and never where it would surprise someone: the menu-bar popover, the
+// mini face, or the hour after a mute
+function soundOn() {
+  if (!currentConfig.sound || currentConfig.mode === 'menubar') return false
+  if (document.body.classList.contains('collapsed')) return false
+  return !mutedNow()
+}
+
+function moodOf(st) {
+  return st === 'stressed' ? 'fire' : st === 'sleeping' || st === 'tired' ? 'sleepy' : 'normal'
+}
+
+// `line` is a remark from voice.js ({ text, short }) or a plain string. The
+// mini face has room for a glance, not a sentence, so it gets the short one.
+// `force` is the simulator's: it skips the gates but still respects the mute
+function say(line, { headline = false, mood = 'normal', force = false } = {}) {
+  if (!line) return false
+  const collapsed = document.body.classList.contains('collapsed')
+  const text = typeof line === 'string' ? line : collapsed ? line.short : line.text
+  if (!force) {
+    const b = document.body.classList
+    if (!talkOn() || b.contains('settings-open')) return false
+    if (!headline && Date.now() - lastRemarkAt < REMARK_GAP_MS) return false
+  }
+  lastRemarkAt = Date.now()
+  const bubble = el('bubble')
+  el('bubble-text').textContent = text
+  bubble.classList.remove('leaving')
+  placeBubble()
+  bubble.hidden = false
+  fitSize() // collapsed, the bubble is in the flow: the window grows to fit it
+  clearTimeout(bubbleTimer)
+  bubbleTimer = setTimeout(hideBubble, Math.max(4500, text.length * 70 + 2500))
+  // the mouth moves along, whether or not there's sound
+  for (let i = 0; i < Math.min(4, Math.ceil(text.length / 18)); i++) setTimeout(chomp, i * 260)
+  if ((headline || force) && soundOn()) blipper.play(text, mood)
+  return true
+}
+
+// expanded, the bubble floats over the scene beside the pet; collapsed there's
+// no room beside it, so it moves above the pet, into the card's flow
+function placeBubble() {
+  const bubble = el('bubble')
+  const stage = el('stage')
+  if (document.body.classList.contains('collapsed')) {
+    if (bubble.nextElementSibling !== stage) stage.before(bubble)
+  } else if (bubble.parentElement !== stage) stage.appendChild(bubble)
+}
+
+function hideBubble() {
+  clearTimeout(bubbleTimer)
+  const bubble = el('bubble')
+  if (bubble.hidden) return
+  bubble.classList.add('leaving')
+  bubbleTimer = setTimeout(() => {
+    bubble.hidden = true
+    bubble.classList.remove('leaving')
+    fitSize()
+  }, 180)
+}
+el('bubble').addEventListener('click', (e) => {
+  e.stopPropagation()
+  hideBubble()
+})
+
+// once-a-day remarks, keyed by local date; memory is the fallback when storage
+// isn't there, so a broken profile can't make the pet repeat itself
+const toldMemo = {}
+const dayKey = () => new Date().toDateString()
+function toldToday(key) {
+  try {
+    if (localStorage.getItem(key) === dayKey()) return true
+  } catch {}
+  return toldMemo[key] === dayKey()
+}
+function markToday(key) {
+  toldMemo[key] = dayKey()
+  try {
+    localStorage.setItem(key, dayKey())
+  } catch {}
+}
+
+// what the pet has noticed so far — the transitions are all relative to it
+const AWAY_MS = 2 * 3600000
+const STREAK_MS = 90 * 60000
+const STREAK_GAP_MS = 10 * 60000
+let greeted = false
+let heardConfig = false
+let lastLivePct = null // Claude's session %, null until a live reading lands
+let awayMs = 0
+let streakFrom = 0
+let lastWorkAt = 0
+let streakTold = false
+
+// what the current Claude window has been like, for the recap when it closes
+// (#31). The peak is the session's tokens just before the rollover — after it
+// the counter starts over. Only the time the pet actually watched counts.
+const TALLY_GAP_MS = 15000 // a longer gap is the machine asleep, not work
+let tally = { peak: 0, activeMs: 0, acts: {}, at: 0 }
+function noteSession(d) {
+  const now = Date.now()
+  const dt = tally.at ? Math.min(now - tally.at, TALLY_GAP_MS) : 0
+  tally.at = now
+  if (d.active) {
+    tally.activeMs += dt
+    if (d.activity) tally.acts[d.activity] = (tally.acts[d.activity] || 0) + dt
+  }
+  tally.peak = Math.max(tally.peak, d.session?.tokens || 0)
+}
+function takeRecap(was) {
+  const top = Object.entries(tally.acts).sort((a, b) => b[1] - a[1])[0]?.[0] || null
+  const r = { was, tokens: tally.peak, activeMs: tally.activeMs, top }
+  tally = { peak: 0, activeMs: 0, acts: {}, at: tally.at }
+  return r
+}
+
+// Codex, followed whichever tab is on screen. Its logs only move while it
+// runs, so a stale reading keeps the baseline: the next fresh one is compared
+// against the last number actually seen.
+let lastCodexPct = null
+function listenCodex() {
+  const c = codexData
+  if (!codexOn() || !c) {
+    lastCodexPct = null
+    return
+  }
+  const pct = c.session?.pct
+  if (pct == null || codexStale(c)) return
+  const was = lastCodexPct
+  lastCodexPct = pct
+  if (was == null) return
+  const fireAt = currentConfig.fireThreshold ?? 90
+  const reset = c.session.resetMs
+  if (was - pct > 25) say(Voice.codexResetLine(was), { headline: true })
+  else if (was < 100 && pct >= 100)
+    say(Voice.codexMaxedLine(fmtResetClock(reset)), { mood: 'sleepy' })
+  else if (was < fireAt && pct >= fireAt && pct < 100)
+    say(Voice.codexFireLine(pct, reset, fmtReset), { headline: true, mood: 'fire' })
+}
+
+// called by paint() with the state it just drew. The Claude remarks follow the
+// Claude view; Codex has its own, above.
+function listen(before, st, { isCodex, liveOn, sp, sessReset, proj }) {
+  // the saved config decides whether it talks at all, and it lands just after
+  // the first usage tick: speaking before it would ignore a "talk: false"
+  if (!heardConfig) return
+  const d = lastData
+  const mood = moodOf(st)
+  if (!greeted) {
+    greeted = true
+    if (!toldToday('clauddy.greeted')) {
+      markToday('clauddy.greeted')
+      const line = Voice.greetingLine(d.days30, new Date().getHours(), fmtTokens)
+      if (say(line, { headline: true, mood })) return
+    }
+  }
+  listenCodex()
+  if (isCodex) return
+  const now = Date.now()
+
+  if (liveOn) {
+    const fireAt = currentConfig.fireThreshold ?? 90
+    const was = lastLivePct
+    lastLivePct = sp
+    // a first reading is a baseline: launching at 95% is not "catching fire"
+    if (was != null && was < 100 && sp >= 100) {
+      say(Voice.maxedLine(fmtResetClock(sessReset)), { mood: 'sleepy' })
+    } else if (was != null && was < fireAt && sp >= fireAt && sp < 100) {
+      const eta = proj?.kind === 'eta' ? proj.ms : null
+      say(Voice.fireLine(sp, eta, sessReset, fmtReset), { headline: true, mood: 'fire' })
+    }
+  } else {
+    lastLivePct = null // logged out, or switching: the next reading starts over
+  }
+
+  if (st === 'sleeping' && Number.isFinite(d.lastActivityMs))
+    awayMs = Math.max(awayMs, d.lastActivityMs)
+  else if (before === 'sleeping') {
+    if (awayMs >= AWAY_MS) say(Voice.welcomeLine(awayMs, liveOn ? sp : null, fmtReset))
+    awayMs = 0
+  }
+
+  if (st === 'working') {
+    if (!streakFrom || now - lastWorkAt > STREAK_GAP_MS) {
+      streakFrom = now
+      streakTold = false
+    }
+    lastWorkAt = now
+    if (!streakTold && now - streakFrom >= STREAK_MS)
+      streakTold = say(Voice.streakLine(now - streakFrom, fmtReset))
+  }
+
+  const record = Voice.recordLine(d.days30, fmtTokens)
+  if (record && !toldToday('clauddy.record') && say(record, { mood })) markToday('clauddy.record')
+}
+
+// `./pet say <kind>` previews one remark — real numbers where there are some,
+// plausible ones where the moment hasn't happened
+function sampleLine(kind) {
+  const days = lastData?.days30?.length ? [...lastData.days30] : new Array(30).fill(0)
+  const pct = realUsage?.session?.pct
+  const reset = realUsage?.session?.resetMs ?? 72 * 60000
+  if (kind === 'fire') return Voice.fireLine(Math.max(pct ?? 0, 91), 40 * 60000, reset, fmtReset)
+  if (kind === 'reset') {
+    const t = tally.peak ? tally : { peak: 34e6, activeMs: 4 * 3600000 + 12 * 60000, acts: {} }
+    const top = Object.entries(t.acts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'editing'
+    return Voice.recapLine(
+      { was: 92, tokens: t.peak, activeMs: t.activeMs, top },
+      fmtTokens,
+      fmtReset,
+    )
+  }
+  if (kind === 'codex')
+    return Voice.codexFireLine(91, codexData?.session?.resetMs ?? reset, fmtReset)
+  if (kind === 'maxed') return Voice.maxedLine(fmtResetClock(reset))
+  if (kind === 'welcome') return Voice.welcomeLine(3 * 3600000 + 12 * 60000, pct ?? null, fmtReset)
+  if (kind === 'streak') return Voice.streakLine(95 * 60000, fmtReset)
+  if (kind === 'record') {
+    days[days.length - 1] = Math.max(2e6, Math.max(...days.slice(0, -1)) * 1.15)
+    return Voice.recordLine(days, fmtTokens)
+  }
+  if (!days[days.length - 2]) days[days.length - 2] = 12e6 // no yesterday yet: pretend one
+  return Voice.greetingLine(days, new Date().getHours(), fmtTokens)
+}
+function sayDebug(kind) {
+  const st = [...document.body.classList].find((c) => c.startsWith('state-'))?.slice(6)
+  const mood =
+    kind === 'fire' || kind === 'codex' ? 'fire' : kind === 'maxed' ? 'sleepy' : moodOf(st)
+  return say(sampleLine(kind), { force: true, mood })
+}
+
+// mute sits in the title bar while the voice is on: one click before a call
+let unmuteTimer = null
+function paintMute() {
+  const btn = el('mute')
+  // menu-bar mode is always silent, so there is nothing there to mute
+  btn.hidden = !(currentConfig.sound && talkOn()) || currentConfig.mode === 'menubar'
+  document.body.classList.toggle('has-mute', !btn.hidden) // the chip makes room for it
+  const muted = mutedNow()
+  btn.classList.toggle('muted', muted)
+  btn.title = muted
+    ? `Muted until ${new Date(currentConfig.soundMutedUntil).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })} — click to unmute`
+    : 'Mute the voice for 1 hour'
+  clearTimeout(unmuteTimer)
+  if (muted) unmuteTimer = setTimeout(paintMute, currentConfig.soundMutedUntil - Date.now() + 50)
+}
+el('mute').addEventListener('click', (e) => {
+  e.stopPropagation()
+  const until = mutedNow() ? 0 : Date.now() + MUTE_MS
+  currentConfig = { ...currentConfig, soundMutedUntil: until } // repaint now, main confirms
+  paintMute()
+  window.api.saveConfig({ soundMutedUntil: until })
+})
+
+// ---- services ---------------------------------------------------------------
+// Claude and Codex are monitored side by side, but the panel shows one at a
+// time: the tabs under the pet pick which one owns the chip, the pet, the
+// meters, the breakdowns and the Usage arrow.
+const PROVIDER_KEY = 'clauddy.provider'
+let codexData = null // last Codex payload; null while Codex isn't enabled
+let pickedProvider = (() => {
+  try {
+    return localStorage.getItem(PROVIDER_KEY) === 'codex' ? 'codex' : 'claude'
+  } catch {
+    return 'claude'
+  }
+})()
+
+const claudeOn = () => document.body.classList.contains('auth-on')
+const codexOn = () => !!currentConfig.codex
+const bothOn = () => claudeOn() && codexOn()
+// the service on screen: the pick, unless that one isn't there any more
+function viewProvider() {
+  if (!codexOn()) return 'claude'
+  if (!claudeOn()) return 'codex'
+  return pickedProvider
+}
+
+function pickProvider(p) {
+  if (p === pickedProvider) return
+  pickedProvider = p
+  try {
+    localStorage.setItem(PROVIDER_KEY, p)
+  } catch {}
+  paint()
+}
+
+const STALE_MS = 15 * 60000
+const CODEX_SLEEP_MS = 5 * 60000 // main's default sleepThresholdMs
+// Codex logs are only written while it runs, so a reading can be hours old
+const codexStale = (c) =>
+  !!c && (c.session?.expired || (c.limitsAt != null && Date.now() - c.limitsAt > STALE_MS))
+
+// Codex's numbers in the shape the panel draws; its logs have no activity or tok/min
+function codexView(c) {
+  const idleFor = c.lastSeen ? Date.now() - c.lastSeen : null
+  return {
+    d: {
+      active: c.active,
+      activity: null,
+      // no data is not the same as asleep
+      sleeping: !c.active && idleFor != null && idleFor >= CODEX_SLEEP_MS,
+      tokensPerMin: 0,
+      today: { tokens: c.tokensToday || 0 },
+      session: { tokens: c.tokens5h || 0 },
+      week: { tokens: c.tokensWeek || 0 },
+      byModel: c.byModel || [],
+      byProject: c.byProject || [],
+      days30: c.days30 || [],
+      monthTokens: c.monthTokens ?? null,
+    },
+    sess: c.session,
+    week: c.weekly,
+    stale: c.limitsAt != null && Date.now() - c.limitsAt > STALE_MS ? c.limitsAt : null,
+  }
+}
+
+// a Codex meter caption: its reset, or how old the reading is when that's what matters
+function codexSub(w, tokens, stale) {
+  const t = `${fmtTokens(tokens)} tokens`
+  if (!w) return `limits not recorded yet · ${t}`
+  if (w.pct == null) return `waiting for a fresh reading · ${t}`
+  if (stale) {
+    const at = w.resetMs != null ? `resets ${fmtResetClock(w.resetMs)} · ` : ''
+    return `${at}read ${fmtReset(Date.now() - stale)} ago`
+  }
+  const reset = w.resetMs != null ? `resets in ${fmtResetIn(w.resetMs)} · ` : ''
+  return `${reset}${t}`
+}
+
+const pctText = (v) => (v == null ? '—' : `${Math.round(v)}%`)
+const warnAt = () => Math.min(...(currentConfig.alertThresholds || [80, 95]))
+
+// tabs + the collapsed pair: both services' session %, whichever is on screen
+function paintServices(view) {
+  const dual = bothOn()
+  document.body.classList.toggle('dual', dual)
+  document.body.classList.toggle('view-codex', view === 'codex')
+  // collapsed with both: when the selected service's session resets
+  const resetMs = view === 'codex' ? codexData?.session?.resetMs : realUsage?.session?.resetMs
+  el('mini-reset').hidden = !dual || resetMs == null
+  el('mini-reset').textContent = resetMs == null ? '' : `resets ${fmtResetClock(resetMs)}`
+  el('service-panel').setAttribute('role', dual ? 'tabpanel' : 'region')
+  if (dual) {
+    el('service-panel').setAttribute('aria-labelledby', `tab-${view}`)
+    el('service-panel').removeAttribute('aria-label')
+  } else {
+    el('service-panel').removeAttribute('aria-labelledby')
+    el('service-panel').setAttribute('aria-label', `${view === 'codex' ? 'Codex' : 'Claude'} usage`)
+    return
+  }
+  const cl = realUsage
+  const cx = codexData
+  const rows = {
+    claude: {
+      pct: cl?.session?.pct ?? null,
+      week: cl?.week?.pct ?? null,
+      active: !!lastData?.active,
+    },
+    codex: {
+      pct: cx?.session?.pct ?? null,
+      week: cx?.weekly?.pct ?? null,
+      active: !!cx?.active,
+      stale: codexStale(cx),
+    },
+  }
+  for (const [p, r] of Object.entries(rows)) {
+    const on = p === view
+    const urgent = Math.max(r.pct ?? 0, r.week ?? 0) >= warnAt()
+    const tab = el(`tab-${p}`)
+    tab.setAttribute('aria-selected', String(on))
+    tab.tabIndex = on ? 0 : -1
+    tab.classList.toggle('active', r.active)
+    tab.classList.toggle('urgent', urgent)
+    tab.querySelector('.tab-alert').hidden = !urgent
+    el(`tab-${p}-value`).textContent = pctText(r.pct)
+    const name = p === 'claude' ? 'Claude' : 'Codex'
+    tab.title = `${name} session ${pctText(r.pct)} · weekly ${pctText(r.week)}${r.active ? ' · working' : ''}${r.stale ? ' · not updated recently' : ''}`
+    const line = document.querySelector(`.mini-source[data-provider="${p}"]`)
+    line.setAttribute('aria-pressed', String(on))
+    line.title = tab.title
+    line.setAttribute('aria-label', `Show ${tab.title}`)
+    line.classList.toggle('urgent', urgent)
+    tab.setAttribute('aria-label', `Show ${tab.title}`)
+    el(`mini-${p}-value`).textContent = pctText(r.pct)
+    const bar = el(`mini-${p}-bar`)
+    bar.style.width = `${Math.min(r.pct ?? 0, 100)}%`
+    bar.classList.toggle('hot', (r.pct ?? 0) >= 80)
+  }
+}
+
+for (const b of document.querySelectorAll('#harness-tabs button, .mini-source')) {
+  b.addEventListener('click', (e) => {
+    e.stopPropagation()
+    pickProvider(b.dataset.provider)
+  })
+}
+el('harness-tabs').addEventListener('keydown', (e) => {
+  const providers = ['claude', 'codex']
+  const current = providers.indexOf(e.target.dataset.provider)
+  if (current < 0) return
+  let next
+  if (e.key === 'ArrowRight') next = (current + 1) % providers.length
+  else if (e.key === 'ArrowLeft') next = (current + providers.length - 1) % providers.length
+  else if (e.key === 'Home') next = 0
+  else if (e.key === 'End') next = providers.length - 1
+  else return
+  e.preventDefault()
+  pickProvider(providers[next])
+  el(`tab-${providers[next]}`).focus()
+})
+
 // main render
 let prevState = null
-let prevPct = null
+const prevPct = {} // per service: a switch must not read as a reset
 let lastData = null
 function render(d) {
   lastData = d
-  // % comes only from the connected account — no estimates
-  const liveOn = !!realUsage
+  noteSession(d)
+  // the burn trail is Claude's, fed on every Claude tick whatever is on screen
+  const cl = realUsage
+  burn.note(d.session.tokens, !!cl && cl.session.resetMs != null)
+  paint()
+}
+
+function paint() {
+  setPlan(el('codex-plan'), codexData?.plan)
+  const d0 = lastData
+  if (!d0) return
+  const view = viewProvider()
+  paintServices(view)
+  const isCodex = view === 'codex' && !!codexData
+  const cv = isCodex ? codexView(codexData) : null
+  const d = isCodex ? cv.d : d0
+  // % comes only from the connected account (or Codex's own logs) — no estimates
+  const liveOn = isCodex || !!realUsage
   document.body.classList.toggle('live', liveOn)
-  const sessPct = liveOn ? realUsage.session.pct : 0
-  const sessReset = liveOn ? realUsage.session.resetMs : null
+  const sessPct = isCodex ? (cv.sess?.pct ?? null) : liveOn ? realUsage.session.pct : 0
+  const sessReset = isCodex ? (cv.sess?.resetMs ?? null) : liveOn ? realUsage.session.resetMs : null
   const sessActive = liveOn && sessReset != null
-  const wkPct = liveOn ? realUsage.week.pct : 0
-  const wkReset = liveOn ? realUsage.week.resetMs : null
+  const wkPct = isCodex ? (cv.week?.pct ?? null) : liveOn ? realUsage.week.pct : 0
+  const wkReset = isCodex ? (cv.week?.resetMs ?? null) : liveOn ? realUsage.week.resetMs : null
+  const sp = sessPct ?? 0
+  const wp = wkPct ?? 0
 
   const fireAt = currentConfig.fireThreshold ?? 90
   let st =
-    liveOn && sessPct >= 100
+    liveOn && sp >= 100
       ? 'tired'
       : d.active
         ? 'working'
-        : liveOn && sessPct >= fireAt
+        : liveOn && sp >= fireAt
           ? 'stressed'
           : d.sleeping
             ? 'sleeping'
@@ -519,6 +968,7 @@ function render(d) {
   for (const a of acts) {
     document.body.classList.toggle(`act-${a}`, st === 'working' && curActivity === a)
   }
+  const before = prevState
   if (prevState && prevState !== st) {
     if (st === 'sleeping') oneShot('drowse', 700)
     else if (prevState === 'sleeping') oneShot('wake', 700)
@@ -542,32 +992,38 @@ function render(d) {
       ? `${fmtTokens(d.tokensPerMin)} tok/min`
       : `${fmtTokens(d.today.tokens)} tokens today`
 
-  if (liveOn && prevPct != null && sessActive && prevPct - sessPct > 25) celebrate()
-  prevPct = sessPct
-  el('session-pct').textContent = `${Math.round(sessPct)}%`
-  setLevel(el('session-pct'), liveOn ? sessPct : 0)
+  const was = prevPct[view]
+  if (liveOn && was != null && sessActive && sessPct != null && was - sessPct > 25) {
+    celebrate()
+    // Codex's own reset is called out by listenCodex, on screen or not
+    if (!isCodex) say(Voice.recapLine(takeRecap(was), fmtTokens, fmtReset), { headline: true })
+  }
+  prevPct[view] = sessPct
+  el('session-pct').textContent = pctText(liveOn ? sessPct : 0)
+  setLevel(el('session-pct'), liveOn ? sp : 0)
   const mini = el('mini-pct')
-  mini.textContent = liveOn ? `${Math.round(sessPct)}%` : '—'
-  mini.classList.toggle('high', liveOn && sessPct >= 80)
+  mini.textContent = liveOn ? pctText(sessPct) : '—'
+  mini.classList.toggle('high', liveOn && sp >= 80)
   // the collapsed ring: how much of the session is already spent
   const rf = el('ring-fill')
-  rf.style.strokeDashoffset = `${RING_LEN * (1 - Math.min(sessPct, 100) / 100)}`
-  rf.classList.toggle('high', sessPct >= 80)
+  rf.style.strokeDashoffset = `${RING_LEN * (1 - Math.min(sp, 100) / 100)}`
+  rf.classList.toggle('high', sp >= 80)
   const rp = el('ring-pct')
   rp.textContent = mini.textContent
-  rp.classList.toggle('high', liveOn && sessPct >= 80)
+  rp.classList.toggle('high', liveOn && sp >= 80)
   const sf = el('session-fill')
-  sf.style.width = `${sessPct}%`
-  sf.classList.toggle('high', sessPct >= 80)
-  setLevel(sf, sessPct)
-  el('session-sub').textContent = sessActive
-    ? `resets in ${fmtResetIn(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)
+  sf.style.width = `${sp}%`
+  sf.classList.toggle('high', sp >= 80)
+  setLevel(sf, sp)
+  el('session-sub').textContent = isCodex
+    ? codexSub(cv.sess, d.session.tokens, cv.stale)
+    : sessActive
+      ? `resets in ${fmtResetIn(sessReset)} · ${fmtTokens(d.session.tokens)} tokens`
+      : 'no active session'
+
+  // where this pace is taking you — Claude's only: Codex has no trail to read
   const proj =
-    sessActive && sessPct < 100 ? burn.project(sessPct, sessReset, d.session.tokens) : null
+    !isCodex && sessActive && sp < 100 ? burn.project(sp, sessReset, d.session.tokens) : null
   const pe = el('session-proj')
   pe.hidden = !proj
   pe.classList.toggle('tight', proj?.kind === 'eta')
@@ -576,22 +1032,24 @@ function render(d) {
       proj.kind === 'eta' ? `~${fmtReset(proj.ms)} left at this pace` : 'resets before you run out'
   }
 
-  el('week-pct').textContent = `${Math.round(wkPct)}%`
-  setLevel(el('week-pct'), wkPct)
+  el('week-pct').textContent = pctText(liveOn ? wkPct : 0)
+  setLevel(el('week-pct'), wp)
   const wf = el('week-fill')
-  wf.style.width = `${wkPct}%`
-  wf.classList.toggle('high', wkPct >= 80)
-  setLevel(wf, wkPct)
-  el('week-sub').textContent =
-    wkReset != null
+  wf.style.width = `${wp}%`
+  wf.classList.toggle('high', wp >= 80)
+  setLevel(wf, wp)
+  el('week-sub').textContent = isCodex
+    ? codexSub(cv.week, d.week.tokens, cv.stale)
+    : wkReset != null
       ? `resets in ${fmtResetIn(wkReset)} · ${fmtTokens(d.week.tokens)} tokens`
       : `${fmtTokens(d.week.tokens)} tokens · last 7 days`
 
-  renderScoped(liveOn ? realUsage.scoped || [] : [], d.byModel || [])
+  renderScoped(!isCodex && liveOn ? realUsage.scoped || [] : [], d.byModel || [])
   renderModels(d.byModel || [])
   renderProjects(d.byProject || [])
   renderHeat(d.days30 || [])
-  el('month-total').textContent = `${fmtTokens(d.monthTokens)} tokens`
+  el('month-total').textContent = d.monthTokens == null ? '—' : `${fmtTokens(d.monthTokens)} tokens`
+  paintChip()
 
   currentRate = d.tokensPerMin || 0
   if (st === 'working') {
@@ -604,6 +1062,7 @@ function render(d) {
     stopEating()
   }
 
+  listen(before, st, { isCodex, liveOn, sp, sessReset, proj })
   fitSize()
 }
 
@@ -614,7 +1073,9 @@ function fitSize() {
   requestAnimationFrame(() => {
     const collapsed = document.body.classList.contains('collapsed')
     const zoom = Number.parseFloat(document.body.style.zoom) || 1
-    const w = (collapsed ? 168 : 276) * zoom
+    // The dual-service dock trades height for a little horizontal room.
+    const dual = document.body.classList.contains('dual')
+    const w = (collapsed ? (dual ? 240 : 168) : 304) * zoom
     // offsetHeight never reflects a CSS zoom applied to an ancestor (confirmed
     // empirically against this Electron build) — so measure the unzoomed content
     // height, then scale the whole thing (content + margin) ourselves
@@ -640,6 +1101,7 @@ window.api.onDebugState((o) => {
   const s = o?.state
   if (s === 'poke') return pokePet()
   if (s === 'celebrate') return celebrate()
+  if (s === 'say') return sayDebug(o.kind)
   debugState = s === 'auto' || s === 'clear' || !s ? null : s
   if (lastData) render(lastData)
 })
@@ -651,9 +1113,18 @@ window.api.onError((msg) => {
 window.api.onConfig((cfg) => {
   currentConfig = cfg || {}
   document.body.classList.toggle('is-menubar', currentConfig.mode === 'menubar')
+  document.body.classList.toggle('codex-on', !!currentConfig.codex)
+  if (!currentConfig.codex) codexData = null
+  heardConfig = true
+  paintMute()
+  paint()
   applyZoom(currentConfig.zoom)
   fitSize()
 })
+window.api.onCodex((c) => {
+  codexData = c || null
+  paint()
+})
 window.api.onRealUsage((u) => {
   realUsage = u || null
   if (lastData) render(lastData)
@@ -669,6 +1140,7 @@ window.api.onAuthState((s) => {
     endLogin()
     showProfile(null)
   }
+  paint() // losing Claude can leave Codex as the only service
   if (document.body.classList.contains('settings-open')) fitSize()
 })
 
@@ -689,12 +1161,24 @@ function paintChip() {
   const active = (a?.accounts || []).find((x) => x.id === a?.active)
   const email = p?.email || (active?.connected ? active.label : null)
   // the settings block says who is connected, not just that someone is: the
-  // avatar carries the initial, the name line the email, the sub line the plan
+  // logo identifies the service, followed by the same plan badge and email.
   el('acc-ok').textContent = email || 'Connected'
-  el('acc-sub').textContent = p?.plan || 'your real usage is live'
-  el('acc-avatar').textContent = email ? email[0].toUpperCase() : '●'
+  setPlan(el('acc-sub'), p?.plan)
+  el('acc-ok').title = email || 'Connected'
   const chip = el('account-chip')
   const mini = el('mini-acct')
+  // the Codex view never borrows Claude's identity: its logs carry no email
+  if (viewProvider() === 'codex') {
+    const plan = codexData?.plan || null
+    el('ac-email').textContent = 'Codex'
+    chip.title = 'Codex on this computer'
+    setPlan(el('ac-plan'), plan)
+    chip.hidden = false
+    el('mini-acct-name').textContent = 'Codex'
+    setPlan(el('mini-acct-plan'), plan)
+    mini.hidden = false
+    return
+  }
   if (!email) {
     chip.hidden = true
     mini.hidden = true
@@ -832,6 +1316,8 @@ function toggleAccountMenu() {
 
 el('account-chip').addEventListener('click', (e) => {
   e.stopPropagation()
+  // Codex has no account switcher: its chip leads to its Settings block
+  if (viewProvider() === 'codex') return openSettings()
   toggleAccountMenu()
 })
 // clicking anywhere else — the pet, the gear, another app — puts it away
@@ -890,7 +1376,7 @@ window.api.onAuthResult((r) => {
     }, 6000)
     celebrate()
   } else {
-    // failed: put "Log in with browser" back, so a retry is one click away
+    // failed: restore the connection card so a retry is one click away
     document.body.classList.remove('awaiting')
     const e = r?.error || ''
     el('acc-msg').textContent = /429|rate_limit/i.test(e)
@@ -900,6 +1386,26 @@ window.api.onAuthResult((r) => {
   fitSize()
 })
 
+// Keep the main view focused on limits; history is an explicit, remembered choice.
+const DETAILS_KEY = 'clauddy.details-open'
+function setDetailsOpen(open) {
+  el('usage-details').hidden = !open
+  el('details-toggle').setAttribute('aria-expanded', String(open))
+  fitSize()
+}
+try {
+  setDetailsOpen(localStorage.getItem(DETAILS_KEY) === 'true')
+} catch {
+  setDetailsOpen(false)
+}
+el('details-toggle').addEventListener('click', () => {
+  const open = el('usage-details').hidden
+  setDetailsOpen(open)
+  try {
+    localStorage.setItem(DETAILS_KEY, String(open))
+  } catch {}
+})
+
 // 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'
@@ -955,7 +1461,36 @@ for (const head of document.querySelectorAll('.sec-head')) {
 for (const id of readFolded()) toggleSection(id, true)
 
 el('close').addEventListener('click', () => window.api.quit())
-el('usage').addEventListener('click', () => window.api.openUsage())
+el('usage').addEventListener('click', () => window.api.openUsage(viewProvider()))
+
+// Settings → Codex: Connect looks for a local session and turns monitoring on if found
+function endCodexSetup() {
+  document.body.classList.remove('codex-setup')
+  el('codex-setup').hidden = true
+  el('codex-hint').textContent = 'Track Codex alongside Claude, in this pet.'
+}
+el('codex-connect').addEventListener('click', () => {
+  el('codex-hint').textContent = 'Looking…'
+  window.api.codexDetect()
+})
+el('codex-retry').addEventListener('click', () => window.api.codexDetect())
+// Connect is the consent: found → monitoring starts, not found → say why
+window.api.onCodexDetected((r) => {
+  if (r?.found) {
+    endCodexSetup()
+    window.api.codexEnable(true)
+    return
+  }
+  document.body.classList.add('codex-setup')
+  el('codex-setup').hidden = false
+  el('codex-hint').textContent = 'No session — sign in to Codex'
+  fitSize()
+})
+el('codex-setup-cancel').addEventListener('click', () => {
+  endCodexSetup()
+  fitSize()
+})
+el('codex-disconnect').addEventListener('click', () => window.api.codexEnable(false))
 
 // account login (browser flow)
 el('acc-connect').addEventListener('click', () => window.api.authStart())
@@ -1052,6 +1587,8 @@ function snapshotSettings() {
     t2: el('set-t2').value,
     fire: el('set-fire').value,
     zoom: el('set-zoom').value,
+    talk: el('set-talk').checked,
+    sound: el('set-sound').checked,
   })
 }
 function refreshSaveDirty() {
@@ -1070,6 +1607,9 @@ function clearSaveDirty() {
 function reflectAlertsOn() {
   el('set-rows').classList.toggle('alerts-off', !el('set-alerts').checked)
 }
+function reflectTalkOn() {
+  el('set-rows').classList.toggle('talk-off', !el('set-talk').checked)
+}
 // zoom applies as you step it, so the widget shows the size right away;
 // Cancel puts the saved value back
 function previewZoom() {
@@ -1089,9 +1629,13 @@ function populateSettings() {
   el('set-t2').value = th[1] != null ? th[1] : 95
   el('set-fire').value = c.fireThreshold != null ? c.fireThreshold : 90
   el('set-zoom').value = c.zoom != null ? c.zoom : 100
+  el('set-talk').checked = c.talk !== false
+  el('set-sound').checked = !!c.sound
+  reflectTalkOn()
   clearSaveDirty() // fields now match the saved config
 }
 function openSettings() {
+  hideBubble()
   document.body.classList.remove('collapsed')
   populateSettings()
   document.body.classList.add('settings-open')
@@ -1105,6 +1649,7 @@ let closingTimer = null
 function closeSettings() {
   if (!document.body.classList.contains('settings-open')) return
   abandonLogin()
+  endCodexSetup()
   document.body.classList.remove('settings-open')
   document.body.classList.add('settings-closing')
   clearTimeout(closingTimer)
@@ -1132,11 +1677,24 @@ for (const b of document.querySelectorAll('.num-btn')) {
   })
 }
 // light up Save whenever an editable field changes
-for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire', 'set-zoom']) {
+for (const id of [
+  'set-alerts',
+  'set-t1',
+  'set-t2',
+  'set-fire',
+  'set-zoom',
+  'set-talk',
+  'set-sound',
+]) {
   el(id).addEventListener('input', refreshSaveDirty)
   el(id).addEventListener('change', refreshSaveDirty)
 }
 el('set-alerts').addEventListener('change', reflectAlertsOn)
+el('set-talk').addEventListener('change', reflectTalkOn)
+// turning the voice on plays a sample, so you hear what you just agreed to
+el('set-sound').addEventListener('change', () => {
+  if (el('set-sound').checked) blipper.play('Hello there!')
+})
 el('set-zoom').addEventListener('input', previewZoom)
 // display-mode segmented control (floating pet | menu bar)
 for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
@@ -1161,17 +1719,21 @@ el('set-save').addEventListener('click', () => {
       .sort((a, b) => a - b),
     fireThreshold: fire >= 1 && fire <= 99 ? fire : 90,
     zoom,
+    talk: el('set-talk').checked,
+    sound: el('set-sound').checked,
   })
   clearSaveDirty()
   document.body.classList.remove('settings-open')
   fitSize()
 })
 el('min').addEventListener('click', () => {
+  hideBubble()
   document.body.classList.toggle('collapsed')
   fitSize()
 })
 // double-click the pet to collapse / expand
 el('pet').addEventListener('dblclick', () => {
+  hideBubble()
   document.body.classList.toggle('collapsed')
   fitSize()
 })
@@ -1217,6 +1779,12 @@ if (typeof module === 'object' && module.exports) {
     showProfile,
     renderAccounts,
     renderAccountMenu,
+    paint,
+    pickProvider,
     burn,
+    say,
+    hideBubble,
+    soundOn,
+    blipper,
   }
 }