@agent-native/core 0.168.10 → 0.168.12

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.
Files changed (42) hide show
  1. package/corpus/README.md +1 -1
  2. package/corpus/templates/clips/changelog/2026-08-19-desktop-settings-are-tighter-with-a-new-advanced-tab.md +6 -0
  3. package/corpus/templates/clips/desktop/README.md +79 -1
  4. package/corpus/templates/clips/desktop/components.json +20 -0
  5. package/corpus/templates/clips/desktop/package.json +10 -1
  6. package/corpus/templates/clips/desktop/src/app.tsx +1812 -1994
  7. package/corpus/templates/clips/desktop/src/components/ReadinessPanel.tsx +23 -65
  8. package/corpus/templates/clips/desktop/src/components/settings/settings-ui.tsx +399 -0
  9. package/corpus/templates/clips/desktop/src/components/ui/alert-dialog.tsx +166 -0
  10. package/corpus/templates/clips/desktop/src/components/ui/button.tsx +57 -0
  11. package/corpus/templates/clips/desktop/src/components/ui/empty.tsx +104 -0
  12. package/corpus/templates/clips/desktop/src/components/ui/input.tsx +22 -0
  13. package/corpus/templates/clips/desktop/src/components/ui/popover.tsx +38 -0
  14. package/corpus/templates/clips/desktop/src/components/ui/select.tsx +164 -0
  15. package/corpus/templates/clips/desktop/src/components/ui/skeleton.tsx +15 -0
  16. package/corpus/templates/clips/desktop/src/components/ui/spinner.tsx +17 -0
  17. package/corpus/templates/clips/desktop/src/components/ui/switch.tsx +27 -0
  18. package/corpus/templates/clips/desktop/src/components/ui/textarea.tsx +22 -0
  19. package/corpus/templates/clips/desktop/src/dev/browser-preview.ts +65 -0
  20. package/corpus/templates/clips/desktop/src/hooks/useSystemAccessRows.ts +128 -0
  21. package/corpus/templates/clips/desktop/src/hooks/useWhisperSettings.ts +0 -2
  22. package/corpus/templates/clips/desktop/src/lib/permission-status.ts +84 -0
  23. package/corpus/templates/clips/desktop/src/lib/rewind-status.ts +6 -5
  24. package/corpus/templates/clips/desktop/src/lib/settings-navigation.ts +18 -5
  25. package/corpus/templates/clips/desktop/src/lib/utils.ts +6 -0
  26. package/corpus/templates/clips/desktop/src/main.tsx +31 -4
  27. package/corpus/templates/clips/desktop/src/overlays/finalizing.tsx +2 -2
  28. package/corpus/templates/clips/desktop/src/overlays/toolbar.tsx +2 -2
  29. package/corpus/templates/clips/desktop/src/styles.css +75 -1427
  30. package/corpus/templates/clips/desktop/src/tailwind.css +282 -0
  31. package/corpus/templates/clips/desktop/tsconfig.json +4 -1
  32. package/corpus/templates/clips/desktop/vite.config.ts +7 -1
  33. package/corpus/templates/design/app/components/layout/Layout.tsx +38 -14
  34. package/dist/collab/awareness.d.ts +2 -2
  35. package/dist/collab/routes.d.ts +1 -1
  36. package/dist/notifications/routes.d.ts +3 -3
  37. package/dist/progress/routes.d.ts +1 -1
  38. package/dist/resources/handlers.d.ts +1 -1
  39. package/dist/server/action-routes.js +3 -2
  40. package/dist/server/request-origin.d.ts +6 -0
  41. package/dist/server/request-origin.js +12 -0
  42. package/package.json +1 -1
@@ -13,7 +13,6 @@
13
13
  --surface: #f7f7f7;
14
14
  --surface-hover: #f0f0f0;
15
15
  --surface-strong: #ebebeb;
16
- --settings-nav-active: #ffffff;
17
16
  --fg: #171717;
18
17
  --fg-muted: #737373;
19
18
  --fg-subtle: #a3a3a3;
@@ -49,7 +48,6 @@
49
48
  --surface: #262626;
50
49
  --surface-hover: #2e2e2e;
51
50
  --surface-strong: #3d3d3d;
52
- --settings-nav-active: var(--surface-hover);
53
51
  --fg: #f5f5f5;
54
52
  --fg-muted: #a3a3a3;
55
53
  --fg-subtle: #737373;
@@ -153,472 +151,6 @@ body[data-clips-route="recording-pill"] #root {
153
151
  overflow-y: auto;
154
152
  }
155
153
 
156
- /* Settings uses the same calm rail + grouped rows as the hosted workspace
157
- settings pages. The native popover keeps its own light/dark tokens, but the
158
- hierarchy is intentionally shared: navigate on the left, edit one setting
159
- at a time on the right. */
160
- .settings-page {
161
- min-height: 560px;
162
- max-height: calc(100vh - 48px);
163
- padding: 0;
164
- gap: 0;
165
- overflow: hidden;
166
- }
167
-
168
- .settings-page-header {
169
- flex: 0 0 auto;
170
- min-height: 68px;
171
- padding: 16px 24px 14px;
172
- border-bottom: 1px solid var(--border);
173
- }
174
-
175
- .settings-page-title {
176
- display: grid;
177
- gap: 2px;
178
- }
179
-
180
- .settings-page-title h2 {
181
- font-size: 17px;
182
- letter-spacing: -0.01em;
183
- }
184
-
185
- .settings-page-title p {
186
- font-size: 11px;
187
- color: var(--fg-muted);
188
- }
189
-
190
- .settings-page-layout {
191
- display: grid;
192
- grid-template-columns: 190px minmax(0, 1fr);
193
- min-height: 0;
194
- flex: 1 1 auto;
195
- }
196
-
197
- .settings-nav {
198
- min-width: 0;
199
- padding: 18px 12px;
200
- border-right: 1px solid var(--border);
201
- background: var(--surface);
202
- overflow-y: auto;
203
- }
204
-
205
- .settings-nav-group--start:not(:first-child) {
206
- margin-top: 18px;
207
- }
208
-
209
- .settings-nav-group-label {
210
- padding: 0 10px 7px;
211
- color: var(--fg-subtle);
212
- font-size: 10px;
213
- font-weight: 700;
214
- letter-spacing: 0.08em;
215
- text-transform: uppercase;
216
- }
217
-
218
- .settings-nav-button {
219
- display: block;
220
- width: 100%;
221
- min-height: 36px;
222
- padding: 8px 10px;
223
- border: 0;
224
- border-radius: var(--radius-sm);
225
- background: transparent;
226
- color: var(--fg-muted);
227
- cursor: pointer;
228
- font-size: 13px;
229
- font-weight: 600;
230
- text-align: left;
231
- transition:
232
- background 120ms,
233
- color 120ms;
234
- }
235
-
236
- .settings-nav-button:hover {
237
- background: var(--surface-hover);
238
- color: var(--fg);
239
- }
240
-
241
- .settings-nav-button.is-active {
242
- background: var(--settings-nav-active);
243
- color: var(--fg);
244
- box-shadow: none;
245
- }
246
-
247
- .settings-nav-button:focus-visible {
248
- outline: none;
249
- box-shadow: 0 0 0 3px var(--brand-ring);
250
- }
251
-
252
- .settings-page-content {
253
- min-width: 0;
254
- min-height: 0;
255
- padding: 24px 28px 32px;
256
- overflow-y: auto;
257
- overscroll-behavior: contain;
258
- }
259
-
260
- .settings-tab-heading {
261
- display: grid;
262
- gap: 4px;
263
- margin: 0 auto 22px;
264
- max-width: 760px;
265
- }
266
-
267
- .settings-tab-heading h3 {
268
- margin: 0;
269
- font-size: 19px;
270
- font-weight: 650;
271
- letter-spacing: -0.02em;
272
- }
273
-
274
- .settings-tab-heading p {
275
- color: var(--fg-muted);
276
- font-size: 12px;
277
- }
278
-
279
- .settings-tab-content {
280
- display: grid;
281
- gap: 22px;
282
- width: 100%;
283
- max-width: 760px;
284
- margin: 0 auto;
285
- }
286
-
287
- .settings-group {
288
- min-width: 0;
289
- }
290
-
291
- .settings-group-header {
292
- display: grid;
293
- gap: 3px;
294
- padding: 0 2px 9px;
295
- }
296
-
297
- .settings-group-header h4 {
298
- margin: 0;
299
- color: var(--fg);
300
- font-size: 13px;
301
- font-weight: 700;
302
- }
303
-
304
- .settings-group-header p {
305
- color: var(--fg-muted);
306
- font-size: 11px;
307
- line-height: 1.45;
308
- }
309
-
310
- .settings-group-body {
311
- overflow: hidden;
312
- border: 1px solid var(--border);
313
- border-radius: var(--radius);
314
- background: var(--surface);
315
- box-shadow: var(--shadow-sm);
316
- }
317
-
318
- .settings-row {
319
- display: grid;
320
- grid-template-columns: minmax(0, 1fr) minmax(230px, 360px);
321
- align-items: center;
322
- gap: 24px;
323
- min-width: 0;
324
- padding: 16px 18px;
325
- border-bottom: 1px solid var(--border);
326
- }
327
-
328
- .settings-row:last-child {
329
- border-bottom: 0;
330
- }
331
-
332
- .settings-row--stacked {
333
- align-items: start;
334
- }
335
-
336
- .settings-row-copy {
337
- display: grid;
338
- gap: 4px;
339
- min-width: 0;
340
- }
341
-
342
- .settings-row-copy strong {
343
- color: var(--fg);
344
- font-size: 13px;
345
- font-weight: 650;
346
- }
347
-
348
- .settings-row-copy span {
349
- color: var(--fg-muted);
350
- font-size: 11px;
351
- line-height: 1.45;
352
- }
353
-
354
- .settings-row-control {
355
- display: flex;
356
- min-width: 0;
357
- justify-content: flex-end;
358
- }
359
-
360
- .settings-row-control > .setup-select,
361
- .settings-row-control > .setup-shortcut-recorder {
362
- width: min(100%, 300px);
363
- }
364
-
365
- .settings-row-control > .whisper-model-picker-trigger {
366
- width: min(100%, 300px);
367
- }
368
-
369
- .settings-row-control > .setup-textarea {
370
- width: 100%;
371
- }
372
-
373
- .settings-control-group {
374
- display: flex;
375
- align-items: center;
376
- justify-content: flex-end;
377
- gap: 8px;
378
- width: 100%;
379
- min-width: 0;
380
- flex-wrap: wrap;
381
- }
382
-
383
- .settings-control-group--wide {
384
- flex-wrap: nowrap;
385
- }
386
-
387
- .settings-control-group .setup-select {
388
- width: min(100%, 300px);
389
- }
390
-
391
- .settings-control-group .settings-url-input {
392
- min-width: 0;
393
- flex: 1 1 180px;
394
- }
395
-
396
- .settings-page .secondary,
397
- .settings-page .link-button {
398
- width: auto;
399
- flex: 0 0 auto;
400
- white-space: nowrap;
401
- }
402
-
403
- .whisper-model-picker-trigger {
404
- display: flex;
405
- align-items: center;
406
- justify-content: space-between;
407
- gap: 8px;
408
- min-width: 0;
409
- padding: 10px 12px;
410
- border: 1px solid var(--border-strong);
411
- border-radius: var(--radius-sm);
412
- background: var(--bg);
413
- color: var(--fg);
414
- cursor: pointer;
415
- font-size: 13px;
416
- text-align: left;
417
- outline: none;
418
- transition:
419
- border-color 120ms,
420
- box-shadow 120ms;
421
- }
422
-
423
- .whisper-model-picker-trigger:hover:not(:disabled) {
424
- border-color: var(--fg-muted);
425
- }
426
-
427
- .whisper-model-picker-trigger:focus-visible {
428
- border-color: var(--brand);
429
- box-shadow: 0 0 0 3px var(--brand-ring);
430
- }
431
-
432
- .whisper-model-picker-trigger:disabled {
433
- opacity: 0.48;
434
- background: var(--surface);
435
- cursor: not-allowed;
436
- }
437
-
438
- .whisper-model-picker-trigger-label {
439
- min-width: 0;
440
- overflow: hidden;
441
- text-overflow: ellipsis;
442
- white-space: nowrap;
443
- }
444
-
445
- .whisper-model-picker {
446
- z-index: 80;
447
- width: min(420px, calc(100vw - 24px));
448
- max-height: min(360px, calc(100vh - 24px));
449
- overflow-x: hidden;
450
- overflow-y: auto;
451
- padding: 6px;
452
- border: 1px solid var(--border);
453
- border-radius: var(--radius);
454
- background: var(--bg);
455
- color: var(--fg);
456
- box-shadow: var(--shadow-md);
457
- outline: none;
458
- }
459
-
460
- .whisper-model-picker-list {
461
- display: grid;
462
- gap: 2px;
463
- }
464
-
465
- .whisper-model-picker-option {
466
- display: grid;
467
- gap: 4px;
468
- width: 100%;
469
- min-width: 0;
470
- padding: 9px 10px;
471
- border: 1px solid transparent;
472
- border-radius: var(--radius-sm);
473
- background: transparent;
474
- color: var(--fg-muted);
475
- cursor: pointer;
476
- text-align: left;
477
- }
478
-
479
- .whisper-model-picker-option:hover,
480
- .whisper-model-picker-option.is-selected {
481
- background: var(--surface-hover);
482
- color: var(--fg);
483
- }
484
-
485
- .whisper-model-picker-option.is-selected {
486
- border-color: var(--border);
487
- }
488
-
489
- .whisper-model-picker-option:focus-visible {
490
- outline: none;
491
- box-shadow: 0 0 0 3px var(--brand-ring);
492
- }
493
-
494
- .whisper-model-picker-option-title {
495
- display: flex;
496
- align-items: center;
497
- justify-content: space-between;
498
- gap: 10px;
499
- min-width: 0;
500
- color: var(--fg);
501
- font-size: 12px;
502
- font-weight: 650;
503
- }
504
-
505
- .whisper-model-picker-option-title > span {
506
- min-width: 0;
507
- }
508
-
509
- .whisper-model-picker-option-description {
510
- color: var(--fg-muted);
511
- font-size: 11px;
512
- line-height: 1.4;
513
- white-space: normal;
514
- }
515
-
516
- .settings-url-input {
517
- width: 100%;
518
- }
519
-
520
- .settings-row-extra {
521
- grid-column: 1 / -1;
522
- display: grid;
523
- gap: 8px;
524
- min-width: 0;
525
- padding-top: 2px;
526
- color: var(--fg-muted);
527
- font-size: 11px;
528
- line-height: 1.45;
529
- }
530
-
531
- .settings-row-extra--inline {
532
- display: flex;
533
- align-items: center;
534
- flex-wrap: wrap;
535
- gap: 10px;
536
- }
537
-
538
- .settings-row-extra--inline > span:first-child {
539
- flex: 1 1 260px;
540
- }
541
-
542
- .settings-text-button {
543
- width: auto;
544
- padding: 0;
545
- border: 0;
546
- background: transparent;
547
- color: var(--fg-muted);
548
- cursor: pointer;
549
- font-size: 11px;
550
- font-weight: 600;
551
- text-decoration: underline;
552
- }
553
-
554
- .settings-text-button:hover {
555
- color: var(--fg);
556
- }
557
-
558
- .settings-text-button:focus-visible {
559
- outline: none;
560
- box-shadow: 0 0 0 3px var(--brand-ring);
561
- }
562
-
563
- .settings-group-inset {
564
- padding: 12px 14px;
565
- }
566
-
567
- @media (max-width: 760px) {
568
- .settings-page {
569
- min-height: 480px;
570
- }
571
-
572
- .settings-page-layout {
573
- display: flex;
574
- flex-direction: column;
575
- }
576
-
577
- .settings-nav {
578
- display: flex;
579
- gap: 4px;
580
- padding: 10px 12px;
581
- border-right: 0;
582
- border-bottom: 1px solid var(--border);
583
- overflow-x: auto;
584
- }
585
-
586
- .settings-nav-group,
587
- .settings-nav-group + .settings-nav-group,
588
- .settings-nav-group--start:not(:first-child) {
589
- display: contents;
590
- margin: 0;
591
- }
592
-
593
- .settings-nav-group-label {
594
- display: none;
595
- }
596
-
597
- .settings-nav-button {
598
- flex: 0 0 auto;
599
- width: auto;
600
- }
601
-
602
- .settings-page-content {
603
- padding: 20px 16px 24px;
604
- }
605
-
606
- .settings-row {
607
- grid-template-columns: minmax(0, 1fr);
608
- gap: 12px;
609
- }
610
-
611
- .settings-row-control {
612
- justify-content: flex-start;
613
- }
614
-
615
- .settings-control-group,
616
- .settings-control-group--wide {
617
- justify-content: flex-start;
618
- flex-wrap: wrap;
619
- }
620
- }
621
-
622
154
  /* Recorder Home keeps its navigation present even when active-recording
623
155
  content exceeds the restored popover height. Only the content region may
624
156
  scroll; the window shell and bottom destinations stay put. */
@@ -1870,385 +1402,71 @@ body[data-clips-route="recording-pill"] #root {
1870
1402
  gap: 9px;
1871
1403
  }
1872
1404
 
1873
- .rewind-capture-lock-note {
1874
- margin: 0;
1875
- color: var(--fg-muted);
1876
- font-size: 10.5px;
1877
- line-height: 1.4;
1878
- }
1879
-
1880
- .rewind-capture-lock-note {
1881
- padding: 9px 10px;
1882
- border-radius: var(--radius-sm);
1883
- background: var(--surface);
1884
- }
1885
-
1886
- .rewind-home-dot {
1887
- width: 9px;
1888
- height: 9px;
1889
- margin-top: 4px;
1890
- border-radius: 50%;
1891
- background: var(--fg-subtle);
1892
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-subtle) 13%, transparent);
1893
- flex-shrink: 0;
1894
- }
1895
-
1896
- .rewind-home-dot.is-live {
1897
- background: var(--status-ok);
1898
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-ok) 15%, transparent);
1899
- }
1900
-
1901
- .rewind-consent-choices button:focus-visible,
1902
- .rewind-consent-primary:focus-visible,
1903
- .rewind-quiet-button:focus-visible,
1904
- .rewind-search-row input:focus-visible,
1905
- .rewind-search-row button:focus-visible,
1906
- .rewind-setting-control:focus-visible,
1907
- .rewind-settings-entry .secondary:focus-visible,
1908
- .rewind-evidence-card .secondary:focus-visible,
1909
- .rewind-memory-empty .secondary:focus-visible,
1910
- .setup-back:focus-visible {
1911
- outline: none;
1912
- box-shadow: 0 0 0 3px var(--brand-ring);
1913
- }
1914
-
1915
- .rewind-consent {
1916
- min-height: 430px;
1917
- align-items: center;
1918
- padding: 24px;
1919
- text-align: center;
1920
- }
1921
-
1922
- .rewind-consent-mark {
1923
- width: 48px;
1924
- height: 48px;
1925
- display: grid;
1926
- place-items: center;
1927
- border-radius: 15px;
1928
- background: var(--surface);
1929
- }
1930
-
1931
- .rewind-kicker {
1932
- margin: -4px 0 -10px;
1933
- color: var(--fg-muted);
1934
- font-size: 10px;
1935
- font-weight: 700;
1936
- letter-spacing: 0.09em;
1937
- text-transform: uppercase;
1938
- }
1939
-
1940
- .rewind-consent h2 {
1941
- margin: 0;
1942
- font-size: 20px;
1943
- letter-spacing: -0.02em;
1944
- }
1945
-
1946
- .rewind-consent-copy,
1947
- .rewind-surface-lede {
1948
- margin: 0;
1949
- color: var(--fg-muted);
1950
- font-size: 12px;
1951
- line-height: 1.5;
1952
- }
1953
-
1954
- .rewind-consent-choices {
1955
- width: 100%;
1956
- display: grid;
1957
- gap: 8px;
1958
- }
1959
-
1960
- .rewind-consent-choices button {
1961
- display: grid;
1962
- gap: 3px;
1963
- padding: 12px 13px;
1964
- border: 1px solid var(--border);
1965
- border-radius: var(--radius);
1966
- background: var(--bg);
1967
- color: var(--fg);
1968
- cursor: pointer;
1969
- text-align: left;
1970
- }
1971
-
1972
- .rewind-consent-choices button.selected {
1973
- border-color: var(--fg);
1974
- box-shadow: 0 0 0 1px var(--fg);
1975
- }
1976
-
1977
- .rewind-consent-choices span {
1978
- color: var(--fg-muted);
1979
- font-size: 11px;
1980
- }
1981
-
1982
- .rewind-local-promise {
1983
- display: grid;
1984
- grid-template-columns: auto minmax(0, 1fr);
1985
- gap: 9px;
1986
- width: 100%;
1987
- padding: 11px;
1988
- border-radius: var(--radius);
1989
- background: var(--surface);
1990
- color: var(--fg-muted);
1991
- text-align: left;
1992
- }
1993
-
1994
- .rewind-local-promise p {
1995
- margin: 0;
1996
- font-size: 11px;
1997
- line-height: 1.5;
1998
- }
1999
-
2000
- .rewind-local-promise strong {
2001
- color: var(--fg);
2002
- }
2003
-
2004
- .rewind-consent-primary {
2005
- width: 100%;
2006
- min-height: 42px;
2007
- }
2008
-
2009
- .rewind-quiet-button {
2010
- border: none;
2011
- background: transparent;
2012
- color: var(--fg-muted);
2013
- cursor: pointer;
2014
- font-size: 12px;
2015
- font-weight: 600;
2016
- }
2017
-
2018
- .rewind-memory-surface,
2019
- .rewind-settings-surface {
2020
- gap: 14px;
2021
- min-width: 0;
2022
- max-width: 100%;
2023
- overflow-x: hidden;
2024
- }
2025
-
2026
- .rewind-settings-surface {
2027
- padding-bottom: 18px;
2028
- }
2029
-
2030
- /* Settings detail stays inside the existing tray window. The content is a
2031
- floating layer, so changing a choice never becomes a native window resize. */
2032
- .desktop-settings-popover {
2033
- z-index: 80;
2034
- width: min(360px, calc(100vw - 24px));
2035
- max-height: min(680px, calc(100vh - 24px));
2036
- overflow-x: hidden;
2037
- overflow-y: auto;
2038
- padding: 12px;
2039
- border: 1px solid var(--border);
2040
- border-radius: var(--radius);
2041
- background: var(--bg);
2042
- color: var(--fg);
2043
- box-shadow: var(--shadow-md);
2044
- outline: none;
2045
- transform-origin: var(--radix-popover-content-transform-origin);
2046
- }
2047
-
2048
- .desktop-settings-popover[data-state="open"] {
2049
- animation: feedback-popover-in 120ms ease-out;
2050
- }
2051
-
2052
- .desktop-settings-popover[data-state="closed"] {
2053
- animation: feedback-popover-out 90ms ease-out;
2054
- }
2055
-
2056
- .desktop-settings-popover-header {
2057
- display: flex;
2058
- align-items: center;
2059
- justify-content: space-between;
2060
- gap: 10px;
2061
- margin-bottom: 10px;
2062
- }
2063
-
2064
- .desktop-settings-popover-title {
2065
- min-width: 0;
2066
- color: var(--fg);
2067
- font-size: 13px;
2068
- font-weight: 650;
2069
- letter-spacing: -0.01em;
2070
- }
2071
-
2072
- .desktop-settings-popover-close {
2073
- display: inline-flex;
2074
- align-items: center;
2075
- justify-content: center;
2076
- width: 26px;
2077
- height: 26px;
2078
- flex: 0 0 auto;
2079
- padding: 0;
2080
- border: none;
2081
- border-radius: var(--radius-sm);
2082
- background: transparent;
2083
- color: var(--fg-muted);
2084
- cursor: pointer;
2085
- }
2086
-
2087
- .desktop-settings-popover-close:hover {
2088
- background: var(--surface-hover);
2089
- color: var(--fg);
2090
- }
2091
-
2092
- .desktop-settings-popover-close:focus-visible,
2093
- .rewind-setting-trigger:focus-visible,
2094
- .rewind-choice-option:focus-visible,
2095
- .rewind-manage-button:focus-visible {
2096
- outline: none;
2097
- box-shadow: 0 0 0 3px var(--brand-ring);
2098
- }
2099
-
2100
- .desktop-settings-popover > .setup {
2101
- width: auto;
2102
- max-height: none;
2103
- padding: 0;
2104
- overflow: visible;
2105
- border-radius: 0;
2106
- background: transparent;
2107
- }
2108
-
2109
- .desktop-settings-popover > .setup > .setup-header {
2110
- display: none;
2111
- }
2112
-
2113
- .desktop-settings-popover > .rewind-settings-surface,
2114
- .desktop-settings-popover > .rewind-memory-surface {
2115
- gap: 12px;
2116
- padding-bottom: 2px;
2117
- }
2118
-
2119
- .rewind-settings-launcher {
2120
- width: min(430px, calc(100vw - 24px));
2121
- }
2122
-
2123
- .rewind-memory-launcher {
2124
- width: min(430px, calc(100vw - 24px));
2125
- }
2126
-
2127
- .rewind-popover-content {
2128
- width: min(380px, calc(100vw - 24px));
2129
- }
2130
-
2131
- .rewind-setting-trigger {
2132
- display: flex;
2133
- align-items: center;
2134
- justify-content: space-between;
2135
- gap: 10px;
2136
- width: 142px;
2137
- min-height: 34px;
2138
- padding: 7px 9px 7px 10px;
2139
- border: 1px solid var(--border-strong);
2140
- border-radius: var(--radius-sm);
2141
- background: var(--surface);
2142
- color: var(--fg);
2143
- cursor: pointer;
2144
- font-size: 11px;
2145
- font-weight: 600;
2146
- text-align: left;
2147
- }
2148
-
2149
- .rewind-setting-trigger:hover:not(:disabled) {
2150
- border-color: var(--fg-muted);
2151
- background: var(--surface-hover);
2152
- }
2153
-
2154
- .rewind-setting-trigger:disabled {
2155
- opacity: 0.48;
2156
- cursor: not-allowed;
2157
- }
2158
-
2159
- .rewind-choice-list {
2160
- display: grid;
2161
- gap: 3px;
2162
- }
2163
-
2164
- .rewind-choice-option {
2165
- display: flex;
2166
- align-items: center;
2167
- justify-content: space-between;
2168
- gap: 10px;
2169
- width: 100%;
2170
- min-height: 34px;
2171
- padding: 8px 9px;
2172
- border: 1px solid transparent;
2173
- border-radius: var(--radius-sm);
2174
- background: transparent;
2175
- color: var(--fg-muted);
2176
- cursor: pointer;
2177
- font-size: 12px;
2178
- text-align: left;
2179
- }
2180
-
2181
- .rewind-choice-option:hover,
2182
- .rewind-choice-option.is-selected {
2183
- background: var(--surface-hover);
2184
- color: var(--fg);
2185
- }
2186
-
2187
- .rewind-choice-option.is-selected {
2188
- border-color: var(--border);
2189
- }
2190
-
2191
- .rewind-settings-section {
2192
- display: grid;
2193
- min-width: 0;
2194
- }
2195
-
2196
- .rewind-setting-copy {
2197
- display: grid;
2198
- gap: 3px;
2199
- min-width: 0;
1405
+ .rewind-consent-primary:focus-visible,
1406
+ .rewind-quiet-button:focus-visible,
1407
+ .rewind-search-row input:focus-visible,
1408
+ .rewind-search-row button:focus-visible,
1409
+ .rewind-settings-entry .secondary:focus-visible,
1410
+ .rewind-evidence-card .secondary:focus-visible,
1411
+ .rewind-memory-empty .secondary:focus-visible,
1412
+ .setup-back:focus-visible {
1413
+ outline: none;
1414
+ box-shadow: 0 0 0 3px var(--brand-ring);
2200
1415
  }
2201
1416
 
2202
- .rewind-setting-copy > span {
2203
- overflow: hidden;
1417
+ .rewind-surface-lede {
1418
+ margin: 0;
2204
1419
  color: var(--fg-muted);
2205
- font-size: 10.5px;
2206
- line-height: 1.35;
2207
- text-overflow: ellipsis;
2208
- white-space: nowrap;
1420
+ font-size: 12px;
1421
+ line-height: 1.5;
2209
1422
  }
2210
1423
 
2211
- .rewind-setting-row--action {
2212
- grid-template-columns: minmax(0, 1fr) auto;
2213
- min-height: 58px;
1424
+ .rewind-local-promise {
1425
+ display: grid;
1426
+ grid-template-columns: auto minmax(0, 1fr);
1427
+ gap: 9px;
1428
+ width: 100%;
1429
+ padding: 11px;
1430
+ border-radius: var(--radius);
1431
+ background: var(--surface);
1432
+ color: var(--fg-muted);
1433
+ text-align: left;
2214
1434
  }
2215
1435
 
2216
- .rewind-manage-button {
2217
- width: auto;
2218
- min-width: 72px;
2219
- padding: 7px 10px;
1436
+ .rewind-local-promise p {
1437
+ margin: 0;
2220
1438
  font-size: 11px;
1439
+ line-height: 1.5;
2221
1440
  }
2222
1441
 
2223
- .rewind-popover-stack {
2224
- display: grid;
2225
- gap: 10px;
2226
- min-width: 0;
1442
+ .rewind-local-promise strong {
1443
+ color: var(--fg);
2227
1444
  }
2228
1445
 
2229
- .rewind-popover-hint {
2230
- margin: 0;
2231
- color: var(--fg-muted);
2232
- font-size: 11px;
2233
- line-height: 1.45;
1446
+ .rewind-consent-primary {
1447
+ width: 100%;
1448
+ min-height: 42px;
2234
1449
  }
2235
1450
 
2236
- .rewind-popover-setting-row {
2237
- display: grid;
2238
- grid-template-columns: minmax(0, 1fr) auto;
2239
- align-items: center;
2240
- gap: 12px;
2241
- min-width: 0;
2242
- padding: 9px 0;
2243
- border-bottom: 1px solid var(--border);
1451
+ .rewind-quiet-button {
1452
+ border: none;
1453
+ background: transparent;
1454
+ color: var(--fg-muted);
1455
+ cursor: pointer;
1456
+ font-size: 12px;
1457
+ font-weight: 600;
2244
1458
  }
2245
1459
 
2246
- .rewind-popover-setting-row:last-child {
2247
- border-bottom: none;
1460
+ .rewind-memory-surface,
1461
+ .rewind-settings-surface {
1462
+ gap: 14px;
1463
+ min-width: 0;
1464
+ max-width: 100%;
1465
+ overflow-x: hidden;
2248
1466
  }
2249
1467
 
2250
- .rewind-popover-setting-row .rewind-setting-trigger {
2251
- width: 150px;
1468
+ .rewind-settings-surface {
1469
+ padding-bottom: 18px;
2252
1470
  }
2253
1471
 
2254
1472
  .rewind-search-row {
@@ -2333,149 +1551,6 @@ body[data-clips-route="recording-pill"] #root {
2333
1551
  margin-top: 2px;
2334
1552
  }
2335
1553
 
2336
- .rewind-setting-row {
2337
- min-height: 62px;
2338
- display: grid;
2339
- grid-template-columns: minmax(0, 1fr) 142px;
2340
- align-items: center;
2341
- gap: 14px;
2342
- border-bottom: 1px solid var(--border);
2343
- }
2344
-
2345
- .rewind-setting-row > * {
2346
- min-width: 0;
2347
- }
2348
-
2349
- .rewind-setting-control {
2350
- width: 142px;
2351
- max-width: 100%;
2352
- padding-right: 28px;
2353
- }
2354
-
2355
- .rewind-settings-status,
2356
- .rewind-boundary-note {
2357
- display: flex;
2358
- align-items: flex-start;
2359
- gap: 9px;
2360
- padding: 10px;
2361
- border-radius: var(--radius-sm);
2362
- background: var(--surface);
2363
- color: var(--fg-muted);
2364
- font-size: 11px;
2365
- line-height: 1.45;
2366
- }
2367
-
2368
- .rewind-boundary-note {
2369
- margin: -4px 0 0;
2370
- }
2371
-
2372
- .rewind-settings-status-copy {
2373
- display: grid;
2374
- gap: 1px;
2375
- }
2376
-
2377
- .rewind-settings-status-copy strong {
2378
- color: var(--fg);
2379
- font-weight: 600;
2380
- }
2381
-
2382
- .rewind-agent-row {
2383
- border-bottom: none;
2384
- }
2385
-
2386
- .rewind-excluded-apps {
2387
- display: grid;
2388
- gap: 9px;
2389
- padding: 12px 0;
2390
- border-bottom: 1px solid var(--border);
2391
- }
2392
-
2393
- .rewind-excluded-apps-header {
2394
- display: flex;
2395
- align-items: center;
2396
- justify-content: space-between;
2397
- gap: 10px;
2398
- min-width: 0;
2399
- }
2400
-
2401
- .rewind-choose-apps.secondary {
2402
- width: auto;
2403
- flex: 0 0 auto;
2404
- padding: 7px 9px;
2405
- font-size: 10.5px;
2406
- }
2407
-
2408
- .rewind-excluded-app-list {
2409
- display: grid;
2410
- gap: 5px;
2411
- }
2412
-
2413
- .rewind-excluded-app {
2414
- display: grid;
2415
- grid-template-columns: 28px minmax(0, 1fr) 26px;
2416
- align-items: center;
2417
- gap: 8px;
2418
- min-width: 0;
2419
- padding: 6px 7px;
2420
- border: 1px solid var(--border);
2421
- border-radius: var(--radius-sm);
2422
- background: var(--surface);
2423
- }
2424
-
2425
- .rewind-excluded-app.is-missing {
2426
- opacity: 0.62;
2427
- }
2428
-
2429
- .rewind-excluded-app-mark {
2430
- width: 28px;
2431
- height: 28px;
2432
- display: grid;
2433
- place-items: center;
2434
- border-radius: 7px;
2435
- background: var(--surface-strong);
2436
- color: var(--fg-muted);
2437
- font-size: 11px;
2438
- font-weight: 700;
2439
- }
2440
-
2441
- .rewind-excluded-app-copy {
2442
- display: grid;
2443
- min-width: 0;
2444
- }
2445
-
2446
- .rewind-excluded-app-copy strong,
2447
- .rewind-excluded-app-copy span {
2448
- overflow: hidden;
2449
- text-overflow: ellipsis;
2450
- white-space: nowrap;
2451
- }
2452
-
2453
- .rewind-excluded-app-copy strong {
2454
- font-size: 11px;
2455
- }
2456
-
2457
- .rewind-excluded-app-copy span {
2458
- color: var(--fg-muted);
2459
- font-size: 9.5px;
2460
- }
2461
-
2462
- .rewind-excluded-app-remove {
2463
- width: 26px;
2464
- height: 26px;
2465
- display: grid;
2466
- place-items: center;
2467
- border: none;
2468
- border-radius: 7px;
2469
- background: transparent;
2470
- color: var(--fg-muted);
2471
- cursor: pointer;
2472
- }
2473
-
2474
- .rewind-excluded-app-remove:hover:not(:disabled) {
2475
- background: var(--surface-hover);
2476
- color: var(--fg);
2477
- }
2478
-
2479
1554
  .rewind-agent-guide {
2480
1555
  display: grid;
2481
1556
  grid-template-columns: auto minmax(0, 1fr);
@@ -2500,116 +1575,10 @@ body[data-clips-route="recording-pill"] #root {
2500
1575
  line-height: 1.45;
2501
1576
  }
2502
1577
 
2503
- .rewind-text-button {
2504
- padding: 0;
2505
- border: none;
2506
- background: transparent;
2507
- color: var(--fg-muted);
2508
- cursor: pointer;
2509
- font-size: 10.5px;
2510
- font-weight: 600;
2511
- text-decoration: underline;
2512
- text-underline-offset: 2px;
2513
- }
2514
-
2515
- .rewind-text-button:hover {
2516
- color: var(--fg);
2517
- }
2518
-
2519
1578
  .rewind-detail-label {
2520
1579
  font-size: 11px;
2521
1580
  }
2522
1581
 
2523
- .rewind-memory-actions {
2524
- display: grid;
2525
- }
2526
-
2527
- .rewind-memory-action {
2528
- display: grid;
2529
- grid-template-columns: minmax(0, 1fr) minmax(120px, 156px);
2530
- align-items: center;
2531
- gap: 12px;
2532
- min-width: 0;
2533
- padding: 11px 0;
2534
- border-bottom: 1px solid var(--border);
2535
- }
2536
-
2537
- .rewind-memory-action:first-child {
2538
- padding-top: 2px;
2539
- }
2540
-
2541
- .rewind-memory-action:last-child {
2542
- padding-bottom: 2px;
2543
- border-bottom: none;
2544
- }
2545
-
2546
- .rewind-memory-action p {
2547
- margin: 3px 0 0;
2548
- color: var(--fg-muted);
2549
- font-size: 10.5px;
2550
- line-height: 1.4;
2551
- }
2552
-
2553
- .rewind-memory-action-copy {
2554
- min-width: 0;
2555
- }
2556
-
2557
- .rewind-inline-receipt {
2558
- display: flex;
2559
- align-items: center;
2560
- gap: 8px;
2561
- margin-top: 7px;
2562
- color: #15803d;
2563
- font-size: 10.5px;
2564
- font-weight: 600;
2565
- }
2566
-
2567
- .rewind-inline-receipt .rewind-text-button {
2568
- color: inherit;
2569
- }
2570
-
2571
- .rewind-agent-repair .rewind-memory-actions {
2572
- grid-template-columns: repeat(2, minmax(0, 1fr));
2573
- gap: 8px;
2574
- margin-top: 8px;
2575
- }
2576
-
2577
- .rewind-agent-repair .secondary {
2578
- min-width: 0;
2579
- white-space: normal;
2580
- }
2581
-
2582
- @media (max-width: 420px) {
2583
- .rewind-setting-row,
2584
- .rewind-memory-action {
2585
- grid-template-columns: minmax(0, 1fr);
2586
- align-items: stretch;
2587
- }
2588
-
2589
- .rewind-setting-control {
2590
- width: 100%;
2591
- }
2592
-
2593
- .rewind-agent-repair .rewind-memory-actions {
2594
- grid-template-columns: minmax(0, 1fr);
2595
- }
2596
- }
2597
-
2598
- .rewind-memory-action .secondary {
2599
- width: 100%;
2600
- min-width: 0;
2601
- white-space: normal;
2602
- line-height: 1.25;
2603
- }
2604
-
2605
- .rewind-memory-action.is-danger strong {
2606
- color: #991b1b;
2607
- }
2608
-
2609
- .rewind-danger-button {
2610
- color: #b91c1c;
2611
- }
2612
-
2613
1582
  .setup .rewind-settings-entry {
2614
1583
  display: grid;
2615
1584
  grid-template-columns: minmax(0, 1fr) auto;
@@ -2801,6 +1770,17 @@ body[data-clips-route="recording-pill"] #root {
2801
1770
  box-shadow: 0 0 0 2px var(--bg);
2802
1771
  }
2803
1772
 
1773
+ .bottom-dot {
1774
+ position: absolute;
1775
+ top: -2px;
1776
+ right: -3px;
1777
+ width: 6px;
1778
+ height: 6px;
1779
+ border-radius: 50%;
1780
+ background: hsl(var(--ui-info));
1781
+ box-shadow: 0 0 0 2px var(--bg);
1782
+ }
1783
+
2804
1784
  /* ------------------------------------------------------------------------- */
2805
1785
  /* Recent list (collapsible) */
2806
1786
  /* ------------------------------------------------------------------------- */
@@ -2920,12 +1900,6 @@ body[data-clips-route="recording-pill"] #root {
2920
1900
  overscroll-behavior: contain;
2921
1901
  }
2922
1902
 
2923
- .setup.settings-page {
2924
- padding: 0;
2925
- gap: 0;
2926
- overflow: hidden;
2927
- }
2928
-
2929
1903
  /* Meetings / dictation drill-ins: a touch more room under the last row so
2930
1904
  content isn't flush with the panel edge. Must follow `.setup` so it wins
2931
1905
  over the shorthand padding above. */
@@ -2945,9 +1919,7 @@ body[data-clips-route="recording-pill"] #root {
2945
1919
  color: var(--fg-muted);
2946
1920
  }
2947
1921
 
2948
- .setup input,
2949
- .setup-select,
2950
- .setup-textarea {
1922
+ .setup input {
2951
1923
  width: 100%;
2952
1924
  padding: 10px 12px;
2953
1925
  border: 1px solid var(--border-strong);
@@ -2959,9 +1931,7 @@ body[data-clips-route="recording-pill"] #root {
2959
1931
  transition: border-color 120ms;
2960
1932
  }
2961
1933
 
2962
- .setup input:focus,
2963
- .setup-select:focus,
2964
- .setup-textarea:focus {
1934
+ .setup input:focus {
2965
1935
  border-color: var(--brand);
2966
1936
  box-shadow: 0 0 0 3px var(--brand-ring);
2967
1937
  }
@@ -2972,17 +1942,6 @@ body[data-clips-route="recording-pill"] #root {
2972
1942
  gap: 6px;
2973
1943
  }
2974
1944
 
2975
- .setup-section-heading {
2976
- font-size: 10px;
2977
- font-weight: 700;
2978
- letter-spacing: 0.07em;
2979
- text-transform: uppercase;
2980
- color: var(--fg-muted);
2981
- padding-top: 6px;
2982
- border-top: 1px solid var(--border);
2983
- margin-top: 4px;
2984
- }
2985
-
2986
1945
  .setup-advanced {
2987
1946
  border: 1px solid var(--border);
2988
1947
  border-radius: var(--radius-sm);
@@ -3047,42 +2006,6 @@ body[data-clips-route="recording-pill"] #root {
3047
2006
  box-shadow: 0 0 0 2px var(--brand-ring);
3048
2007
  }
3049
2008
 
3050
- .setup-label {
3051
- display: flex;
3052
- align-items: center;
3053
- gap: 6px;
3054
- font-size: 12px;
3055
- color: var(--fg-muted);
3056
- }
3057
-
3058
- .setup-help {
3059
- display: inline-flex;
3060
- align-items: center;
3061
- justify-content: center;
3062
- margin: 0;
3063
- padding: 0;
3064
- border: none;
3065
- background: none;
3066
- font: inherit;
3067
- color: var(--fg-muted);
3068
- opacity: 0.6;
3069
- cursor: pointer;
3070
- transition: opacity 120ms;
3071
- }
3072
-
3073
- .setup-help:hover,
3074
- .setup-help:focus-visible,
3075
- .setup-help[data-state="delayed-open"],
3076
- .setup-help[data-state="instant-open"] {
3077
- opacity: 1;
3078
- }
3079
-
3080
- .setup-help:focus-visible {
3081
- outline: none;
3082
- border-radius: 4px;
3083
- box-shadow: 0 0 0 2px var(--brand-ring);
3084
- }
3085
-
3086
2009
  /* ------------------------------------------------------------------------- */
3087
2010
  /* Tooltip (shadcn-style, Radix-backed) */
3088
2011
  /* ------------------------------------------------------------------------- */
@@ -3395,19 +2318,6 @@ body[data-clips-route="recording-pill"] #root {
3395
2318
  gap: 12px;
3396
2319
  }
3397
2320
 
3398
- .setup-shortcut-row {
3399
- display: grid;
3400
- grid-template-columns: minmax(0, 1fr) auto;
3401
- gap: 8px;
3402
- }
3403
-
3404
- .setup-shortcut-row .setup-warning,
3405
- .setup-shortcut-row .setup-success {
3406
- grid-column: 1 / -1;
3407
- }
3408
-
3409
- .setup-shortcut-recorder,
3410
- .setup-shortcut-clear,
3411
2321
  .setup-permission-button {
3412
2322
  border: 1px solid var(--border-strong);
3413
2323
  border-radius: var(--radius-sm);
@@ -3421,44 +2331,16 @@ body[data-clips-route="recording-pill"] #root {
3421
2331
  box-shadow 120ms;
3422
2332
  }
3423
2333
 
3424
- .setup-shortcut-recorder {
3425
- min-width: 0;
3426
- height: 38px;
3427
- padding: 0 12px;
3428
- text-align: left;
3429
- overflow: hidden;
3430
- text-overflow: ellipsis;
3431
- white-space: nowrap;
3432
- font-weight: 600;
3433
- }
3434
-
3435
- .setup-shortcut-recorder:hover,
3436
- .setup-shortcut-clear:hover,
3437
2334
  .setup-permission-button:hover {
3438
2335
  background: var(--surface-hover);
3439
2336
  }
3440
2337
 
3441
- .setup-shortcut-recorder:focus-visible,
3442
- .setup-shortcut-clear:focus-visible,
3443
2338
  .setup-permission-button:focus-visible {
3444
2339
  outline: none;
3445
2340
  border-color: var(--brand);
3446
2341
  box-shadow: 0 0 0 3px var(--brand-ring);
3447
2342
  }
3448
2343
 
3449
- .setup-shortcut-recorder.recording {
3450
- border-color: var(--brand);
3451
- background: var(--bg);
3452
- color: var(--brand);
3453
- }
3454
-
3455
- .setup-shortcut-clear {
3456
- height: 38px;
3457
- padding: 0 12px;
3458
- font-size: 12px;
3459
- font-weight: 600;
3460
- }
3461
-
3462
2344
  .setup-permission-grid {
3463
2345
  display: grid;
3464
2346
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
@@ -3496,27 +2378,6 @@ body[data-clips-route="recording-pill"] #root {
3496
2378
  line-height: 1.4;
3497
2379
  }
3498
2380
 
3499
- .setup-select {
3500
- appearance: none;
3501
- background-image:
3502
- linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
3503
- linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
3504
- background-position:
3505
- calc(100% - 16px) 50%,
3506
- calc(100% - 11px) 50%;
3507
- background-size:
3508
- 5px 5px,
3509
- 5px 5px;
3510
- background-repeat: no-repeat;
3511
- }
3512
-
3513
- .setup-select:disabled {
3514
- opacity: 0.48;
3515
- color: var(--fg-muted);
3516
- background-color: var(--surface);
3517
- cursor: not-allowed;
3518
- }
3519
-
3520
2381
  .setup-grid {
3521
2382
  display: grid;
3522
2383
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3532,12 +2393,6 @@ body[data-clips-route="recording-pill"] #root {
3532
2393
  font-weight: 600;
3533
2394
  }
3534
2395
 
3535
- .setup-textarea {
3536
- min-height: 86px;
3537
- resize: vertical;
3538
- line-height: 1.4;
3539
- }
3540
-
3541
2396
  .setup-key-row {
3542
2397
  display: grid;
3543
2398
  grid-template-columns: minmax(0, 1fr) auto;
@@ -5095,12 +3950,22 @@ body[data-clips-route="recording-pill"] #root {
5095
3950
  padding: 4px 2px 0;
5096
3951
  }
5097
3952
 
3953
+ /* Agent Native's mark, so the first screen says whose app this is. */
3954
+ .signin-mark {
3955
+ display: block;
3956
+ width: 26px;
3957
+ height: auto;
3958
+ margin: 2px auto 8px;
3959
+ color: var(--fg);
3960
+ }
3961
+
5098
3962
  .signin-title {
5099
- font-size: 13px;
5100
- font-weight: 600;
3963
+ font-size: 15px;
3964
+ font-weight: 650;
3965
+ letter-spacing: -0.01em;
5101
3966
  color: var(--fg);
5102
3967
  text-align: center;
5103
- margin-bottom: 2px;
3968
+ margin-bottom: 3px;
5104
3969
  }
5105
3970
 
5106
3971
  .signin-subtitle {
@@ -5127,7 +3992,7 @@ body[data-clips-route="recording-pill"] #root {
5127
3992
  font-weight: 600;
5128
3993
  }
5129
3994
 
5130
- .signin input {
3995
+ .signin input:not([data-tw-surface] *) {
5131
3996
  width: 100%;
5132
3997
  padding: 10px 12px;
5133
3998
  border: 1px solid var(--border-strong);
@@ -5138,7 +4003,7 @@ body[data-clips-route="recording-pill"] #root {
5138
4003
  outline: none;
5139
4004
  }
5140
4005
 
5141
- .signin input:focus {
4006
+ .signin input:not([data-tw-surface] *):focus {
5142
4007
  border-color: var(--brand);
5143
4008
  box-shadow: 0 0 0 3px var(--brand-ring);
5144
4009
  }
@@ -5211,53 +4076,6 @@ body[data-clips-route="recording-pill"] #root {
5211
4076
  border-color: var(--border-strong, var(--border));
5212
4077
  }
5213
4078
 
5214
- /* --- Pending Google sign-in state ---------------------------------------- */
5215
- .signin-pending {
5216
- display: flex;
5217
- flex-direction: column;
5218
- align-items: center;
5219
- justify-content: center;
5220
- gap: 10px;
5221
- padding: 24px 16px;
5222
- flex: 1;
5223
- }
5224
-
5225
- .signin-pending-spinner {
5226
- width: 24px;
5227
- height: 24px;
5228
- border: 2.5px solid var(--border);
5229
- border-top-color: var(--fg-muted, #888);
5230
- border-radius: 50%;
5231
- animation: signin-spin 0.8s linear infinite;
5232
- }
5233
-
5234
- @keyframes signin-spin {
5235
- to {
5236
- transform: rotate(360deg);
5237
- }
5238
- }
5239
-
5240
- .signin-pending-text {
5241
- font-size: 13px;
5242
- color: var(--fg-muted, #888);
5243
- margin: 0;
5244
- text-align: center;
5245
- }
5246
-
5247
- .signin-pending-cancel {
5248
- font-size: 12px;
5249
- color: var(--fg-muted, #888);
5250
- background: none;
5251
- border: none;
5252
- cursor: pointer;
5253
- text-decoration: underline;
5254
- padding: 2px 4px;
5255
- }
5256
-
5257
- .signin-pending-cancel:hover {
5258
- color: var(--fg);
5259
- }
5260
-
5261
4079
  /* --- Update banner -------------------------------------------------------
5262
4080
  * Slots into the top of the popover when an update is in flight or ready.
5263
4081
  * Two visual states:
@@ -6336,176 +5154,6 @@ body[data-clips-route="recording-pill"] #root {
6336
5154
  background: rgba(255, 255, 255, 0.1);
6337
5155
  }
6338
5156
 
6339
- /* Whisper model status row in Settings */
6340
-
6341
- .whisper-status {
6342
- display: flex;
6343
- align-items: center;
6344
- flex-wrap: wrap;
6345
- gap: 4px 6px;
6346
- margin-top: 6px;
6347
- font-size: 11px;
6348
- line-height: 1.4;
6349
- color: var(--fg-muted);
6350
- }
6351
-
6352
- .whisper-status-icon {
6353
- flex-shrink: 0;
6354
- margin-top: 1px;
6355
- }
6356
-
6357
- .whisper-status-ready {
6358
- color: #16a34a;
6359
- }
6360
-
6361
- @media (prefers-color-scheme: dark) {
6362
- .whisper-status-ready {
6363
- color: #4ade80;
6364
- }
6365
- }
6366
-
6367
- .whisper-status-disabled,
6368
- .whisper-status-missing {
6369
- color: #b45309;
6370
- }
6371
-
6372
- @media (prefers-color-scheme: dark) {
6373
- .whisper-status-disabled,
6374
- .whisper-status-missing {
6375
- color: #fbbf24;
6376
- }
6377
- }
6378
-
6379
- .whisper-status-path {
6380
- flex-basis: 100%;
6381
- font-size: 10px;
6382
- color: var(--fg-subtle);
6383
- word-break: break-all;
6384
- }
6385
-
6386
- .whisper-status-downloading {
6387
- flex-direction: column;
6388
- align-items: stretch;
6389
- }
6390
-
6391
- .whisper-progress-bar {
6392
- width: 100%;
6393
- height: 4px;
6394
- margin-top: 4px;
6395
- border: none;
6396
- border-radius: 999px;
6397
- appearance: none;
6398
- overflow: hidden;
6399
- background: var(--surface-strong);
6400
- color: #16a34a;
6401
- }
6402
-
6403
- .whisper-progress-bar::-webkit-progress-bar {
6404
- border-radius: inherit;
6405
- background: var(--surface-strong);
6406
- }
6407
-
6408
- .whisper-progress-bar::-webkit-progress-value {
6409
- border-radius: inherit;
6410
- background: #16a34a;
6411
- }
6412
-
6413
- .whisper-progress-bar::-moz-progress-bar {
6414
- border-radius: inherit;
6415
- background: #16a34a;
6416
- }
6417
-
6418
- @media (prefers-color-scheme: dark) {
6419
- .whisper-progress-bar {
6420
- color: #4ade80;
6421
- }
6422
-
6423
- .whisper-progress-bar::-webkit-progress-value,
6424
- .whisper-progress-bar::-moz-progress-bar {
6425
- background: #4ade80;
6426
- }
6427
- }
6428
-
6429
- .whisper-progress-label {
6430
- font-size: 11px;
6431
- color: var(--fg-muted);
6432
- }
6433
-
6434
- .whisper-download-btn {
6435
- flex-shrink: 0;
6436
- height: 22px;
6437
- border: 1px solid var(--border-strong);
6438
- border-radius: var(--radius-sm);
6439
- background: var(--surface);
6440
- color: var(--fg);
6441
- cursor: pointer;
6442
- font-size: 11px;
6443
- font-weight: 600;
6444
- padding: 0 8px;
6445
- transition: background 120ms;
6446
- }
6447
-
6448
- .whisper-download-btn:hover {
6449
- background: var(--surface-hover);
6450
- }
6451
-
6452
- .whisper-other-models {
6453
- display: flex;
6454
- flex-direction: column;
6455
- gap: 4px;
6456
- margin-top: 6px;
6457
- }
6458
-
6459
- .whisper-other-model-row {
6460
- display: flex;
6461
- align-items: center;
6462
- justify-content: space-between;
6463
- gap: 8px;
6464
- padding: 5px 8px;
6465
- border: 1px solid var(--border);
6466
- border-radius: var(--radius-sm);
6467
- background: var(--surface);
6468
- }
6469
-
6470
- .whisper-other-model-name {
6471
- font-size: 11px;
6472
- color: var(--fg-muted);
6473
- }
6474
-
6475
- .whisper-delete-btn {
6476
- display: inline-flex;
6477
- align-items: center;
6478
- gap: 4px;
6479
- flex-shrink: 0;
6480
- height: 22px;
6481
- padding: 0 8px;
6482
- border: 1px solid var(--border-strong);
6483
- border-radius: var(--radius-sm);
6484
- background: var(--surface);
6485
- color: var(--fg-muted);
6486
- cursor: pointer;
6487
- font-size: 11px;
6488
- font-weight: 600;
6489
- transition:
6490
- background 120ms,
6491
- color 120ms,
6492
- border-color 120ms;
6493
- }
6494
-
6495
- .whisper-delete-btn:hover {
6496
- background: rgba(239, 68, 68, 0.1);
6497
- border-color: rgba(239, 68, 68, 0.4);
6498
- color: #ef4444;
6499
- }
6500
-
6501
- @media (prefers-color-scheme: dark) {
6502
- .whisper-delete-btn:hover {
6503
- background: rgba(239, 68, 68, 0.15);
6504
- border-color: rgba(239, 68, 68, 0.5);
6505
- color: #f87171;
6506
- }
6507
- }
6508
-
6509
5157
  /* ---- */
6510
5158
 
6511
5159
  .pill-error {