clauddy 1.23.1 → 1.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,6 +8,11 @@
8
8
  <link rel="stylesheet" href="motion.css" />
9
9
  </head>
10
10
  <body class="state-idle one-account">
11
+ <!-- brand marks from simple-icons (CC0); the trademarks are Anthropic's and OpenAI's -->
12
+ <svg width="0" height="0" style="position: absolute" aria-hidden="true">
13
+ <symbol id="logo-claude" viewBox="0 0 24 24"><path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" /></symbol>
14
+ <symbol id="logo-openai" viewBox="0 0 24 24"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" /></symbol>
15
+ </svg>
11
16
  <div id="card">
12
17
  <div id="account-chip" hidden title="Switch account">
13
18
  <span class="ac-dot"></span>
@@ -28,6 +33,14 @@
28
33
  <circle cx="7" cy="7" r="3" />
29
34
  </svg>
30
35
  </button>
36
+ <button id="mute" title="Mute the voice for 1 hour" hidden>
37
+ <svg class="ic ic-sound" viewBox="0 0 24 24" aria-hidden="true">
38
+ <path d="M11 5 6 9H2v6h4l5 4Z" /><path d="M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14" />
39
+ </svg>
40
+ <svg class="ic ic-muted" viewBox="0 0 24 24" aria-hidden="true">
41
+ <path d="M11 5 6 9H2v6h4l5 4Z" /><path d="m22 9-6 6M16 9l6 6" />
42
+ </svg>
43
+ </button>
31
44
  <button id="usage" title="Open Usage page">
32
45
  <svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
33
46
  <path d="M7 7h10v10M7 17 17 7" />
@@ -118,9 +131,31 @@
118
131
  <g class="flame-tongue flame-three"><path d="M48 108Q35 76 68 16Q62 51 79 68Q98 91 77 108Z" fill="#ed6830"/><path d="M55 108Q47 89 67 60Q60 85 75 93L69 108Z" fill="#ffc75c"/></g>
119
132
  <g class="flame-tongue flame-four"><path d="M77 108Q66 86 91 36Q85 74 96 87Q103 101 89 108Z" fill="#efa140"/></g>
120
133
  </svg>
134
+ <svg id="compact-flames" viewBox="0 0 80 52" aria-hidden="true">
135
+ <ellipse class="compact-glow" cx="40" cy="40" rx="28" ry="10" fill="#ee7434" />
136
+ <g class="compact-flame compact-flame-left">
137
+ <path d="M12 48C3 38 12 26 18 15c-2 11 9 13 9 24 0 7-7 12-15 9Z" fill="#ec743b" />
138
+ <path d="M16 47c-5-5-1-12 3-17-1 7 7 13 1 17Z" fill="#ffd080" />
139
+ </g>
140
+ <g class="compact-flame compact-flame-center">
141
+ <path d="M29 49C17 37 32 22 35 7c2 12 17 15 18 28 1 12-12 19-24 14Z" fill="#f39843" />
142
+ <path d="M34 48c-8-8 3-17 4-24 0 8 9 11 8 18-1 6-7 9-12 6Z" fill="#ffe2a0" />
143
+ </g>
144
+ <g class="compact-flame compact-flame-right">
145
+ <path d="M53 48c-10-12 7-22 9-34 1 9 9 13 10 23 1 11-12 15-19 11Z" fill="#e97837" />
146
+ <path d="M58 47c-4-6 3-11 5-17 0 6 6 10 2 15-2 3-5 4-7 2Z" fill="#ffcf79" />
147
+ </g>
148
+ <g fill="#ffd58a">
149
+ <circle class="compact-ember compact-ember-one" cx="24" cy="21" r="1.2" />
150
+ <circle class="compact-ember compact-ember-two" cx="49" cy="18" r="1" />
151
+ <circle class="compact-ember compact-ember-three" cx="65" cy="26" r=".8" />
152
+ </g>
153
+ </svg>
121
154
  <div id="sweat"><i></i><i></i></div>
122
155
  <div id="dropzone"></div>
123
156
  </div>
157
+ <!-- the pet's remarks: only on transitions, never on a timer -->
158
+ <div id="bubble" role="status" aria-live="polite" hidden><span id="bubble-text"></span></div>
124
159
  <!-- editing mode, foreground: coffee mug in front of the pet -->
125
160
  <!-- mug: its own SVG with UNIFORM scaling (no stage stretch) so it stays perfectly shaped -->
126
161
  <svg id="mug" viewBox="0 0 46 44" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
@@ -169,6 +204,16 @@
169
204
  </div>
170
205
  <div class="mini-line"><span id="mini-dot"></span><span id="mini-text">idle</span></div>
171
206
  <div id="mini-pct-row"><span id="mini-pct">0%</span> <span class="lbl">session</span></div>
207
+ <!-- Dual-service dock: two glanceable readings, one shared pet. -->
208
+ <div id="mini-dual">
209
+ <button type="button" class="mini-source" data-provider="claude">
210
+ <svg class="mini-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg><span class="mini-source-name">Claude</span><span class="mini-track"><i id="mini-claude-bar"></i></span><b id="mini-claude-value">—</b>
211
+ </button>
212
+ <button type="button" class="mini-source" data-provider="codex">
213
+ <svg class="mini-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg><span class="mini-source-name">Codex</span><span class="mini-track"><i id="mini-codex-bar"></i></span><b id="mini-codex-value">—</b>
214
+ </button>
215
+ </div>
216
+ <div id="mini-reset" hidden></div>
172
217
  </div>
173
218
 
174
219
  <!-- collapsible content -->
@@ -184,58 +229,71 @@
184
229
 
185
230
  <!-- session + weekly (real usage; needs login) -->
186
231
  <div id="home-success" hidden>✓ Logged in — your real usage is live</div>
187
- <div id="limits">
188
- <div id="limits-meters">
189
- <div class="meter">
190
- <div class="meter-top"><span>current session</span><span id="session-pct">0%</span></div>
191
- <div class="track"><div class="fill" id="session-fill"></div></div>
192
- <div class="sub" id="session-sub">no active session</div>
193
- <div class="sub proj" id="session-proj" hidden></div>
194
- </div>
195
- <div class="meter">
196
- <div class="meter-top"><span>weekly · all models</span><span id="week-pct">0%</span></div>
197
- <div class="track"><div class="fill week" id="week-fill"></div></div>
198
- <div class="sub" id="week-sub">—</div>
232
+ <!-- Both services stay one click away, below the pet. -->
233
+ <div id="harness-tabs" role="tablist" aria-label="Monitored service">
234
+ <button id="tab-claude" type="button" role="tab" data-provider="claude" aria-selected="true" aria-controls="service-panel" tabindex="0"><svg class="tab-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg><span>Claude</span><span class="tab-value" id="tab-claude-value">—</span><span class="tab-alert" hidden>!</span></button>
235
+ <button id="tab-codex" type="button" role="tab" data-provider="codex" aria-selected="false" aria-controls="service-panel" tabindex="-1"><svg class="tab-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg><span>Codex</span><span class="tab-value" id="tab-codex-value">—</span><span class="tab-alert" hidden>!</span></button>
236
+ </div>
237
+ <div id="service-panel" role="tabpanel" aria-labelledby="tab-claude">
238
+ <div id="limits">
239
+ <div id="limits-meters">
240
+ <div class="meter">
241
+ <div class="meter-top"><span>current session</span><span id="session-pct">0%</span></div>
242
+ <div class="track"><div class="fill" id="session-fill"></div></div>
243
+ <div class="sub" id="session-sub">no active session</div>
244
+ <div class="sub proj" id="session-proj" hidden></div>
245
+ </div>
246
+ <div class="meter">
247
+ <div class="meter-top"><span>weekly · all models</span><span id="week-pct">0%</span></div>
248
+ <div class="track"><div class="fill week" id="week-fill"></div></div>
249
+ <div class="sub" id="week-sub">—</div>
250
+ </div>
251
+ <!-- per-model weekly limits (e.g. Fable), one meter each -->
252
+ <div id="scoped-meters"></div>
199
253
  </div>
200
- <!-- per-model weekly limits (e.g. Fable), one meter each -->
201
- <div id="scoped-meters"></div>
254
+ <button id="limits-connect">
255
+ <svg class="lc-ico" viewBox="0 0 24 24" aria-hidden="true">
256
+ <path d="M9 12h6 M8.5 8.5H6.5a3.5 3.5 0 0 0 0 7h2 M15.5 8.5h2a3.5 3.5 0 0 1 0 7h-2" />
257
+ </svg>
258
+ <span class="lc-text">
259
+ <b>Connect your account</b>
260
+ <i>to see your real usage</i>
261
+ </span>
262
+ </button>
202
263
  </div>
203
- <button id="limits-connect">
204
- <svg class="lc-ico" viewBox="0 0 24 24" aria-hidden="true">
205
- <path d="M9 12h6 M8.5 8.5H6.5a3.5 3.5 0 0 0 0 7h2 M15.5 8.5h2a3.5 3.5 0 0 1 0 7h-2" />
206
- </svg>
207
- <span class="lc-text">
208
- <b>Connect your account</b>
209
- <i>to see your real usage</i>
210
- </span>
211
- </button>
212
- </div>
213
264
 
214
- <!-- by model (7 days) -->
215
- <div id="bymodel" class="sec">
216
- <button class="sec-head" data-sec="bymodel" aria-expanded="true">
217
- <span class="sec-name">by model · 7 days</span>
265
+ <button id="details-toggle" type="button" aria-expanded="false" aria-controls="usage-details">
266
+ <span>Details</span>
218
267
  <svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
219
268
  </button>
220
- <div class="sec-body"><div id="bymodel-list"></div></div>
221
- </div>
269
+ <div id="usage-details" hidden>
270
+ <!-- by model (7 days) -->
271
+ <div id="bymodel" class="sec">
272
+ <button class="sec-head" data-sec="bymodel" aria-expanded="true">
273
+ <span class="sec-name">by model · 7 days</span>
274
+ <svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
275
+ </button>
276
+ <div class="sec-body"><div id="bymodel-list"></div></div>
277
+ </div>
222
278
 
223
- <!-- by project (7 days) -->
224
- <div id="byproject" class="sec">
225
- <button class="sec-head" data-sec="byproject" aria-expanded="true">
226
- <span class="sec-name">by project · 7 days</span>
227
- <svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
228
- </button>
229
- <div class="sec-body"><div id="byproject-list"></div></div>
230
- </div>
279
+ <!-- by project (7 days) -->
280
+ <div id="byproject" class="sec">
281
+ <button class="sec-head" data-sec="byproject" aria-expanded="true">
282
+ <span class="sec-name">by project · 7 days</span>
283
+ <svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
284
+ </button>
285
+ <div class="sec-body"><div id="byproject-list"></div></div>
286
+ </div>
231
287
 
232
- <!-- 30-day map -->
233
- <div id="heat">
234
- <div id="heat-meta">
235
- <span>30 days</span>
236
- <span id="month-total">0</span>
288
+ <!-- 30-day map -->
289
+ <div id="heat">
290
+ <div id="heat-meta">
291
+ <span>30 days</span>
292
+ <span id="month-total">0</span>
293
+ </div>
294
+ <div id="heat-row"></div>
295
+ </div>
237
296
  </div>
238
- <div id="heat-row"></div>
239
297
  </div>
240
298
  </div>
241
299
 
@@ -243,42 +301,36 @@
243
301
  <div id="settings">
244
302
  <div class="settings-heading">
245
303
  <div>
246
- <h3>A little tune-up</h3>
247
- <p>Make Clauddy feel at home.</p>
304
+ <h3>Make yourself at home.</h3>
305
+ <p>Your accounts, your little companion.</p>
248
306
  </div>
249
- <svg class="ic sh-ico" viewBox="0 0 24 24" aria-hidden="true">
250
- <path d="M20 7h-9M14 17H5" />
251
- <circle cx="17" cy="17" r="3" />
252
- <circle cx="7" cy="7" r="3" />
253
- </svg>
254
307
  </div>
255
308
 
309
+ <div class="settings-label connections-label">Connections</div>
256
310
  <div id="account">
257
311
  <!-- who you are comes first: the list, then the login for whichever
258
312
  account is active — so "add" and the code field sit together -->
259
- <div id="acc-connected" class="connect-block">
260
- <span class="account-avatar" id="acc-avatar">●</span>
261
- <div>
262
- <b class="acc-ok" id="acc-ok">Connected</b>
263
- <span id="acc-sub">your real usage is live</span>
313
+ <div id="acc-connected" class="connect-block connection-card">
314
+ <span class="connection-avatar claude-avatar" id="acc-avatar"><svg class="connection-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg></span>
315
+ <div class="connection-copy">
316
+ <div class="connection-heading"><b>Claude</b><span id="acc-sub" class="plan-badge" hidden></span></div>
317
+ <span class="connection-caption acc-ok" id="acc-ok">Connected</span>
264
318
  </div>
265
- <button id="acc-logout" class="cb-out" title="Sign out" aria-label="Sign out">
319
+ <button id="acc-logout" class="cb-out connection-remove" title="Disconnect Claude" aria-label="Disconnect Claude">
266
320
  <svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
267
- <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
321
+ <path d="M18 6 6 18M6 6l12 12" />
268
322
  </svg>
269
323
  </button>
270
324
  </div>
271
325
  <div id="acc-disconnected">
272
- <div class="set-hint set-hint-left" id="acc-intro">
273
- Connect your Claude account to show your real usage.
326
+ <div id="acc-intro" class="connection-card">
327
+ <span class="connection-avatar claude-avatar"><svg class="connection-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg></span>
328
+ <div class="connection-copy">
329
+ <div class="connection-heading"><b>Claude</b></div>
330
+ <span class="connection-hint">Connect via browser to track your usage.</span>
331
+ </div>
332
+ <button id="acc-connect" class="connection-btn claude-connect-btn" aria-label="Connect Claude" title="Log in with browser"><svg class="connection-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg><span>Connect</span></button>
274
333
  </div>
275
- <button id="acc-connect" class="acc-btn">
276
- <svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
277
- <circle cx="12" cy="12" r="10" />
278
- <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20" />
279
- </svg>
280
- <span>Log in with browser</span>
281
- </button>
282
334
  <div id="acc-paste">
283
335
  <div class="set-hint set-hint-left">Paste the code from the browser page:</div>
284
336
  <input id="acc-code" type="text" placeholder="authentication code" />
@@ -288,7 +340,29 @@
288
340
  </div>
289
341
  </div>
290
342
 
291
- <div class="settings-label">where should i live?</div>
343
+ <!-- Codex: opt-in, read from its local logs — nothing to log into here -->
344
+ <div id="codex-settings" class="connection-card">
345
+ <span class="codex-avatar connection-avatar"><svg class="codex-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg></span>
346
+ <div class="connection-copy">
347
+ <div class="connection-heading"><b>Codex</b><span id="codex-plan" class="plan-badge" hidden></span></div>
348
+ <span class="connection-caption" id="codex-connected-caption">Connected on this device</span>
349
+ <span id="codex-hint" class="connection-hint">Track Codex alongside Claude, in this pet.</span>
350
+ </div>
351
+ <div class="codex-actions">
352
+ <button id="codex-connect" class="connection-btn" aria-label="Connect Codex"><svg class="codex-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg><span>Connect</span></button>
353
+ <span id="codex-setup" hidden>
354
+ <button id="codex-retry" class="connection-btn">Retry</button>
355
+ <button id="codex-setup-cancel" class="codex-x" title="Cancel" aria-label="Cancel">
356
+ <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
357
+ </button>
358
+ </span>
359
+ <button id="codex-disconnect" class="codex-x connection-remove" title="Disconnect Codex" aria-label="Disconnect Codex">
360
+ <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
361
+ </button>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="settings-label">Preferences</div>
292
366
  <div id="set-rows">
293
367
  <span class="seg settings-segment" id="set-mode">
294
368
  <button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
@@ -316,6 +390,15 @@
316
390
  <span class="set-row-label">Zoom</span>
317
391
  <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>
318
392
  </div>
393
+ <div class="settings-label threshold-label">voice</div>
394
+ <div class="set-row">
395
+ <span class="set-row-label">Speech bubbles</span>
396
+ <input id="set-talk" class="set-toggle" type="checkbox" aria-label="Let the pet talk" />
397
+ </div>
398
+ <div class="set-row voice-sub">
399
+ <span class="set-row-label">Chiptune voice</span>
400
+ <input id="set-sound" class="set-toggle" type="checkbox" aria-label="Play blips when the pet talks" />
401
+ </div>
319
402
  </div>
320
403
 
321
404
  <div class="set-actions">
@@ -334,6 +417,7 @@
334
417
  </div>
335
418
  </div>
336
419
  <script src="burn.js"></script>
420
+ <script src="voice.js"></script>
337
421
  <script src="pet.js"></script>
338
422
  </body>
339
423
  </html>
@@ -231,9 +231,127 @@ body.settings-open :is(#reading, #reading-room, #desk, #terminal, #heat-scene, #
231
231
  body.collapsed :is(#reading, #reading-room, #desk, #terminal, #heat-scene) {
232
232
  opacity: 0;
233
233
  }
234
+ /* collapsed: a smaller fire behind the head that never covers the face or the % */
234
235
  body.collapsed #flames {
235
- width: 90px;
236
- height: 98px;
236
+ display: none;
237
+ }
238
+ #compact-flames {
239
+ display: none;
240
+ position: absolute;
241
+ top: -26px;
242
+ left: 50%;
243
+ width: 76px;
244
+ height: 46px;
245
+ transform: translateX(-50%);
246
+ z-index: 1;
247
+ pointer-events: none;
248
+ overflow: hidden;
249
+ }
250
+ body.collapsed.state-stressed #compact-flames {
251
+ display: block;
252
+ }
253
+ /* In the single-provider ring, flames overlap only the top of the head. */
254
+ body.collapsed.state-stressed:not(.dual) #compact-flames {
255
+ z-index: 3;
256
+ height: 40px;
257
+ }
258
+ body.collapsed.state-stressed:not(.dual) #pet {
259
+ transform: translateY(-5px);
260
+ }
261
+ body.collapsed.dual.state-stressed #compact-flames {
262
+ top: -30px;
263
+ }
264
+ body.collapsed.dual.state-stressed #pet {
265
+ transform: translateY(4px);
266
+ }
267
+ body.collapsed.state-stressed .compact-flame {
268
+ transform-box: fill-box;
269
+ transform-origin: 50% 100%;
270
+ animation: compact-fire-dance 1.25s ease-in-out infinite alternate;
271
+ }
272
+ body.collapsed.state-stressed .compact-flame-left {
273
+ animation-duration: 0.95s;
274
+ animation-delay: -0.4s;
275
+ }
276
+ body.collapsed.state-stressed .compact-flame-right {
277
+ animation-duration: 1.45s;
278
+ animation-delay: -0.8s;
279
+ }
280
+ .compact-glow {
281
+ opacity: 0.2;
282
+ }
283
+ body.collapsed.state-stressed .compact-glow {
284
+ animation: compact-fire-glow 2.4s ease-in-out infinite alternate;
285
+ }
286
+ .compact-ember {
287
+ opacity: 0;
288
+ }
289
+ body.collapsed.state-stressed .compact-ember {
290
+ animation: compact-ember-rise 2.2s ease-out infinite;
291
+ }
292
+ body.collapsed.state-stressed .compact-ember-two {
293
+ animation-delay: -0.8s;
294
+ }
295
+ body.collapsed.state-stressed .compact-ember-three {
296
+ animation-delay: -1.5s;
297
+ }
298
+ body.collapsed.state-stressed:not(.poke):not(.celebrate) #claude {
299
+ animation: compact-heat-rock 1.8s ease-in-out infinite;
300
+ }
301
+ body.collapsed.state-stressed #shadow {
302
+ background: radial-gradient(ellipse, #ef74332b, transparent 70%);
303
+ }
304
+ body.settings-open #compact-flames {
305
+ display: none;
306
+ }
307
+ @keyframes compact-fire-dance {
308
+ 0% {
309
+ transform: scale(0.92, 0.78) rotate(-5deg);
310
+ }
311
+ 55% {
312
+ transform: scale(1.03, 0.95) rotate(2deg);
313
+ }
314
+ 100% {
315
+ transform: scale(0.97, 1.05) rotate(5deg);
316
+ }
317
+ }
318
+ @keyframes compact-fire-glow {
319
+ from {
320
+ opacity: 0.14;
321
+ }
322
+ to {
323
+ opacity: 0.32;
324
+ }
325
+ }
326
+ @keyframes compact-ember-rise {
327
+ 0% {
328
+ opacity: 0;
329
+ transform: translate(0, 5px) scale(0.7);
330
+ }
331
+ 25% {
332
+ opacity: 0.8;
333
+ }
334
+ 100% {
335
+ opacity: 0;
336
+ transform: translate(3px, -7px) scale(0.3);
337
+ }
338
+ }
339
+ @keyframes compact-heat-rock {
340
+ 0%,
341
+ 100% {
342
+ transform: translateY(0) rotate(-0.6deg);
343
+ }
344
+ 50% {
345
+ transform: translateY(-1px) rotate(0.6deg);
346
+ }
347
+ }
348
+ @media (prefers-reduced-motion: reduce) {
349
+ body.collapsed.state-stressed #compact-flames * {
350
+ animation: none;
351
+ }
352
+ body.collapsed.state-stressed .compact-ember {
353
+ display: none;
354
+ }
237
355
  }
238
356
  @keyframes book-attention {
239
357
  0%,