@harness-mix/cli 0.2.0 → 0.2.2

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 (84) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/NOTICE +14 -0
  3. package/README.md +4 -24
  4. package/docs/multi-agent-collaboration.md +1 -1
  5. package/licenses/anthropic-codex-theme-MIT.txt +21 -0
  6. package/licenses/codex-dream-skin-MIT.txt +21 -0
  7. package/output/native-build/renderer-extension.js +703 -58
  8. package/package.json +192 -189
  9. package/scripts/collaboration-test.cjs +262 -200
  10. package/scripts/collaboration-ui-smoke.cjs +85 -77
  11. package/scripts/core-concurrency-test.cjs +23 -1
  12. package/scripts/e2e-pi-cancel.cjs +99 -0
  13. package/scripts/native-file-change-test.cjs +42 -2
  14. package/scripts/native-sidebar-test.cjs +8 -0
  15. package/scripts/native-vendor-adapters-test.cjs +67 -1
  16. package/scripts/pets-test.cjs +63 -0
  17. package/scripts/pi-cancel-race-test.cjs +102 -0
  18. package/scripts/stuck-turn-test.cjs +73 -0
  19. package/scripts/workspace-test.cjs +9 -0
  20. package/src/assets/skins/dream-skin/NOTICE.md +13 -0
  21. package/src/assets/skins/dream-skin/themes/gothic-void-crusade/hero.webp +0 -0
  22. package/src/assets/skins/dream-skin/themes/gothic-void-crusade/theme.json +34 -0
  23. package/src/main/adapters/claude.js +9 -6
  24. package/src/main/adapters/pi-family.js +41 -8
  25. package/src/main/harness-adapter/event-normalizer.js +270 -258
  26. package/src/main/host/collaboration-mcp.cjs +8 -1
  27. package/src/main/host/collaboration-tools.js +1 -1
  28. package/src/main/host/collaboration.js +81 -11
  29. package/src/main/host/runtime.js +1462 -1341
  30. package/src/main/native/pets.js +79 -2
  31. package/src/main/native/protocol.js +1164 -1145
  32. package/src/main/native/thread-list.js +6 -1
  33. package/src/main/workspace/core-review.js +75 -0
  34. package/src/main/workspace/diff.js +5 -1
  35. package/src/main/workspace/file-changes.js +9 -4
  36. package/src/main/workspace/review-controller.js +115 -102
  37. package/src/main/workspace/review.js +90 -88
  38. package/src/native-ui/renderer-extension/dist/contract-audit.js +16637 -0
  39. package/src/native-ui/renderer-extension/dist/index.js +34853 -0
  40. package/src/native-ui/renderer-extension/dist/production.js +34263 -0
  41. package/src/native-ui/renderer-extension/dist/renderer-binding-probe.js +34254 -0
  42. package/src/native-ui/renderer-extension/dist/types/renderer-binding-probe.d.ts.map +1 -1
  43. package/src/native-ui/renderer-extension/dist/types/renderer-model-client.d.ts +11 -0
  44. package/src/native-ui/renderer-extension/dist/types/renderer-model-client.d.ts.map +1 -1
  45. package/src/native-ui/renderer-extension/dist/types/renderer-pet-switcher.d.ts +73 -0
  46. package/src/native-ui/renderer-extension/dist/types/renderer-pet-switcher.d.ts.map +1 -0
  47. package/src/native-ui/renderer-extension/dist/types/renderer-settings-lifecycle.d.ts +1 -0
  48. package/src/native-ui/renderer-extension/dist/types/renderer-settings-lifecycle.d.ts.map +1 -1
  49. package/src/native-ui/renderer-extension/dist/types/renderer-team-cards.d.ts.map +1 -1
  50. package/src/native-ui/renderer-extension/dist/types/settings/collaboration-page.d.ts +12 -0
  51. package/src/native-ui/renderer-extension/dist/types/settings/collaboration-page.d.ts.map +1 -0
  52. package/src/native-ui/renderer-extension/dist/types/settings/icons.d.ts +1 -1
  53. package/src/native-ui/renderer-extension/dist/types/settings/icons.d.ts.map +1 -1
  54. package/src/native-ui/renderer-extension/dist/types/settings/localization.d.ts.map +1 -1
  55. package/src/native-ui/renderer-extension/dist/types/settings/pages.d.ts +5 -3
  56. package/src/native-ui/renderer-extension/dist/types/settings/pages.d.ts.map +1 -1
  57. package/src/native-ui/renderer-extension/dist/types/settings/pet-market.d.ts +1 -1
  58. package/src/native-ui/renderer-extension/dist/types/settings/pet-market.d.ts.map +1 -1
  59. package/src/native-ui/renderer-extension/dist/types/settings/pets-client.d.ts +9 -0
  60. package/src/native-ui/renderer-extension/dist/types/settings/pets-client.d.ts.map +1 -1
  61. package/src/native-ui/renderer-extension/dist/types/settings/skin-runtime.d.ts +1 -1
  62. package/src/native-ui/renderer-extension/dist/types/settings/skin-runtime.d.ts.map +1 -1
  63. package/src/native-ui/renderer-extension/dist/types/tsconfig.tsbuildinfo +1 -1
  64. package/src/native-ui/renderer-extension/src/renderer-binding-probe.ts +3181 -3171
  65. package/src/native-ui/renderer-extension/src/renderer-model-client.ts +14 -0
  66. package/src/native-ui/renderer-extension/src/renderer-pet-switcher.ts +308 -0
  67. package/src/native-ui/renderer-extension/src/renderer-settings-lifecycle.ts +2 -0
  68. package/src/native-ui/renderer-extension/src/renderer-team-cards.ts +76 -21
  69. package/src/native-ui/renderer-extension/src/settings/collaboration-page.ts +139 -0
  70. package/src/native-ui/renderer-extension/src/settings/icons.ts +155 -153
  71. package/src/native-ui/renderer-extension/src/settings/localization.ts +785 -783
  72. package/src/native-ui/renderer-extension/src/settings/pages.ts +694 -681
  73. package/src/native-ui/renderer-extension/src/settings/pet-market.css +110 -1
  74. package/src/native-ui/renderer-extension/src/settings/pet-market.ts +276 -22
  75. package/src/native-ui/renderer-extension/src/settings/pets-client.ts +32 -0
  76. package/src/native-ui/renderer-extension/src/settings/shell.css +2294 -2255
  77. package/src/native-ui/renderer-extension/src/settings/skin-runtime.ts +51 -1
  78. package/src/native-ui/renderer-extension/test/renderer-model-client.test.ts +2 -0
  79. package/src/native-ui/renderer-extension/test/renderer-pet-switcher.test.ts +400 -0
  80. package/src/native-ui/renderer-extension/test/settings/localization.test.ts +80 -79
  81. package/src/native-ui/renderer-extension/test/settings/pet-market.test.ts +378 -0
  82. package/src/native-ui/renderer-extension/test/settings/pets-client.test.ts +83 -0
  83. package/src/native-ui/renderer-extension/test/settings/shell.test.ts +3 -0
  84. package/src/native-ui/renderer-extension/test/settings/skin-runtime.test.ts +15 -1
package/src/native-ui/renderer-extension/src/settings/shell.css CHANGED
@@ -1,1843 +1,1882 @@
1
- :host {
2
- --settings-bg: light-dark(#ffffff, #202020);
3
- --settings-sidebar: light-dark(#f7f7f8, #191919);
4
- --settings-panel: light-dark(#ffffff, #232323);
5
- --settings-surface: light-dark(#f6f6f6, #292929);
6
- --settings-surface-hover: light-dark(#eeeeee, #303030);
7
- --settings-inset: light-dark(#f3f3f3, #161616);
8
- --settings-text: light-dark(#0d0d0d, #ececec);
9
- --settings-muted: light-dark(#676767, #a3a3a3);
10
- --settings-subtle: light-dark(#8a8a8a, #777777);
11
- --settings-border: light-dark(rgb(13 13 13 / 9%), rgb(255 255 255 / 9%));
12
- --settings-divider: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 7%));
13
- --settings-hover: light-dark(rgb(13 13 13 / 5%), rgb(255 255 255 / 7%));
14
- --settings-active: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 9%));
15
- --settings-focus: light-dark(#0b75d1, #66aaf9);
16
- --settings-primary: light-dark(#171717, #f4f4f4);
17
- --settings-primary-hover: light-dark(#2f2f2f, #ffffff);
18
- --settings-primary-text: light-dark(#ffffff, #171717);
19
- --settings-warning: light-dark(#8a5500, #f5c96a);
20
- --settings-warning-bg: light-dark(#fff8e6, rgb(245 201 106 / 8%));
21
- --settings-warning-border: light-dark(#ead8a8, rgb(245 201 106 / 24%));
22
- --settings-danger: light-dark(#b42318, #f87171);
23
- --settings-danger-bg: light-dark(#fff1f0, rgb(239 68 68 / 8%));
24
- --settings-danger-border: light-dark(#f3c7c3, rgb(239 68 68 / 22%));
25
- --settings-success: light-dark(#16784a, #4ade80);
26
- color: var(--settings-text);
27
- color-scheme: inherit;
28
- font:
29
- 13px/1.5 system-ui,
30
- -apple-system,
31
- BlinkMacSystemFont,
32
- "Segoe UI",
33
- sans-serif;
34
- letter-spacing: 0;
35
- }
36
-
37
- *,
38
- *::before,
39
- *::after {
40
- box-sizing: border-box;
41
- letter-spacing: 0;
42
- }
43
-
44
- button,
45
- input,
46
- select {
47
- font: inherit;
48
- }
49
-
50
- button {
51
- color: inherit;
52
- }
53
-
54
- [hidden] {
55
- display: none !important;
56
- }
57
-
58
- .settings-visually-hidden {
59
- position: absolute;
60
- width: 1px;
61
- height: 1px;
62
- padding: 0;
63
- margin: -1px;
64
- overflow: hidden;
65
- clip-path: inset(50%);
66
- white-space: nowrap;
67
- border: 0;
68
- }
69
-
70
- .harnessmix-settings-dialog {
71
- width: min(1120px, calc(100vw - 48px));
72
- height: min(780px, calc(100vh - 88px));
73
- max-width: none;
74
- max-height: calc(100vh - 88px);
75
- margin-top: max(56px, calc((100vh - 780px) / 2));
76
- margin-inline: auto;
77
- margin-bottom: auto;
78
- padding: 0;
79
- overflow: hidden;
80
- color: var(--settings-text);
81
- background: var(--settings-bg);
82
- border: 1px solid var(--settings-border);
83
- border-radius: 14px;
84
- box-shadow: light-dark(0 16px 42px rgb(0 0 0 / 16%), 0 20px 54px rgb(0 0 0 / 42%));
85
- }
86
-
87
- .harnessmix-settings-dialog::backdrop {
88
- background: light-dark(rgb(0 0 0 / 24%), rgb(0 0 0 / 56%));
89
- backdrop-filter: blur(1px);
90
- }
91
-
92
- .settings-frame,
93
- .settings-layout {
94
- width: 100%;
95
- height: 100%;
96
- min-width: 0;
97
- min-height: 0;
98
- }
99
-
100
- .settings-frame {
101
- display: flex;
102
- flex-direction: column;
103
- }
104
-
105
- .settings-layout {
106
- flex: 1;
107
- display: grid;
108
- grid-template-columns: 184px minmax(0, 1fr);
109
- background: var(--settings-bg);
110
- }
111
-
112
- .settings-sidebar {
113
- display: flex;
114
- min-width: 0;
115
- min-height: 0;
116
- flex-direction: column;
117
- overflow: hidden;
118
- background: var(--settings-sidebar);
119
- border-right: 1px solid var(--settings-border);
120
- padding-top: 14px;
121
- }
122
-
123
- .settings-header {
124
- display: flex;
125
- align-items: center;
126
- min-width: 0;
127
- height: 50px;
128
- flex: none;
129
- padding: 0 16px;
130
- border-bottom: 1px solid var(--settings-border);
131
- }
132
-
133
- .settings-header-actions {
134
- display: flex;
135
- align-items: center;
136
- flex: none;
137
- gap: 12px;
138
- margin-left: auto;
139
- }
140
-
141
- .settings-brand {
142
- display: flex;
143
- align-items: center;
144
- min-width: 0;
145
- gap: 7px;
146
- }
147
-
148
- .settings-brand__mark {
149
- display: inline-flex;
150
- align-items: center;
151
- justify-content: center;
152
- width: 26px;
153
- height: 26px;
154
- flex: none;
155
- color: var(--settings-text);
156
- }
157
-
158
- .settings-brand__mark .harnessmix-settings-icon {
159
- width: 24px;
160
- height: 24px;
161
- object-fit: contain;
162
- }
163
-
164
- .settings-brand__copy {
165
- display: flex;
166
- min-width: 0;
167
- align-items: baseline;
168
- gap: 0;
169
- line-height: 20px;
170
- }
171
-
172
- .settings-brand__name {
173
- overflow: hidden;
174
- color: var(--settings-text);
175
- font-size: 13px;
176
- font-weight: 600;
177
- text-overflow: ellipsis;
178
- white-space: nowrap;
179
- }
180
-
181
- .settings-brand__title {
182
- margin-left: 8px;
183
- padding-left: 8px;
184
- color: var(--settings-muted);
185
- font-size: 13px;
186
- font-weight: 400;
187
- border-left: 1px solid var(--settings-border);
188
- }
189
-
190
- .settings-nav {
191
- display: flex;
192
- min-width: 0;
193
- min-height: 0;
194
- flex: 1;
195
- flex-direction: column;
196
- gap: 2px;
197
- padding: 0 7px 10px;
198
- overflow-y: auto;
199
- }
200
-
201
- .settings-nav-section-label {
202
- min-height: 24px;
203
- padding: 4px 9px 2px;
204
- color: var(--settings-subtle);
205
- font-size: 11px;
206
- font-weight: 600;
207
- line-height: 18px;
208
- }
209
-
210
- .settings-nav-section-label:not(:first-child) {
211
- margin-top: 8px;
212
- }
213
-
214
- .settings-nav-button {
215
- display: grid;
216
- grid-template-columns: 16px minmax(0, 1fr);
217
- align-items: center;
218
- width: 100%;
219
- position: relative;
220
- min-height: 34px;
221
- flex: none;
222
- gap: 9px;
223
- padding: 6px 9px;
224
- color: var(--settings-text);
225
- font-size: 13px;
226
- line-height: 20px;
227
- text-align: left;
228
- background: transparent;
229
- border: 0;
230
- border-radius: 8px;
231
- cursor: pointer;
232
- }
233
-
234
- .settings-nav-button .harnessmix-settings-icon {
235
- width: 16px;
236
- height: 16px;
237
- opacity: 0.9;
238
- }
239
-
240
- .settings-nav-button:hover {
241
- background: var(--settings-hover);
242
- }
243
-
244
- .settings-nav-button[aria-current="page"] {
245
- background: var(--settings-active);
246
- color: var(--settings-text);
247
- font-weight: 500;
248
- }
249
-
250
- .settings-nav-button span {
251
- min-width: 0;
252
- overflow: hidden;
253
- text-overflow: ellipsis;
254
- white-space: nowrap;
255
- }
256
-
257
- .settings-nav-star-link {
258
- margin-top: 0;
259
- color: var(--settings-text);
260
- text-decoration: none;
261
- }
262
-
263
- .settings-nav-star-link .harnessmix-settings-icon {
264
- color: var(--settings-warning);
265
- }
266
-
267
- .settings-nav-star-link:hover {
268
- color: var(--settings-warning);
269
- background: var(--settings-warning-bg);
270
- }
271
-
272
- .settings-icon-button {
273
- display: inline-flex;
274
- align-items: center;
275
- justify-content: center;
276
- width: 32px;
277
- height: 32px;
278
- flex: none;
279
- padding: 0;
280
- color: var(--settings-muted);
281
- background: transparent;
282
- border: 0;
283
- border-radius: 8px;
284
- cursor: pointer;
285
- transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
286
- }
287
-
288
- .settings-icon-button:hover {
289
- color: var(--settings-text);
290
- background: var(--settings-hover);
291
- }
292
-
293
- .settings-icon-button:active {
294
- background: var(--settings-active);
295
- transform: scale(0.95);
296
- }
297
-
298
- .settings-header-actions .settings-icon-button {
299
- width: 34px;
300
- height: 34px;
301
- border-radius: 8px;
302
- }
303
-
304
- .settings-header-actions .settings-icon-button:hover {
305
- color: var(--settings-text);
306
- background: var(--settings-hover);
307
- }
308
-
309
- .settings-icon-button:focus-visible,
310
- .settings-nav-button:focus-visible {
311
- outline: 2px solid var(--settings-focus);
312
- outline-offset: 1px;
313
- }
314
-
315
- .settings-page {
316
- display: block;
317
- position: relative;
318
- min-width: 0;
319
- min-height: 0;
320
- overflow-y: auto;
321
- background: var(--settings-bg);
322
- scrollbar-gutter: stable;
323
- }
324
-
325
- .settings-page__content {
326
- width: min(930px, calc(100% - 80px));
327
- margin-inline: auto;
328
- }
329
-
330
- .settings-page__content {
331
- min-width: 0;
332
- padding: 28px 0 36px;
333
- }
334
-
335
- .settings-section-label {
336
- min-height: auto;
337
- margin: 0;
338
- padding: 0 0 18px;
339
- color: var(--settings-text);
340
- font-size: 18px;
341
- font-weight: 600;
342
- line-height: 26px;
343
- }
344
-
345
- .settings-status-list,
346
- .settings-empty {
347
- overflow: hidden;
348
- background: var(--settings-panel);
349
- }
350
-
351
- .settings-status-row {
352
- display: grid;
353
- grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);
354
- position: relative;
355
- align-items: center;
356
- min-height: 72px;
357
- gap: 20px;
358
- padding: 12px 0;
359
- }
360
-
361
- .settings-status-row:not(:last-child)::after {
362
- content: "";
363
- position: absolute;
364
- right: 0;
365
- bottom: 0;
366
- left: 0;
367
- height: 1px;
368
- background: var(--settings-divider);
369
- }
370
-
371
- .settings-status-row__identity {
372
- display: inline-flex;
373
- align-items: center;
374
- min-width: 0;
375
- color: var(--settings-text);
376
- gap: 10px;
377
- font-size: 14px;
378
- font-weight: 500;
379
- line-height: 22px;
380
- }
381
-
382
- .settings-status-row__icon {
383
- display: inline-flex;
384
- align-items: center;
385
- justify-content: center;
386
- width: 36px;
387
- height: 36px;
388
- flex: none;
389
- color: var(--settings-muted);
390
- background: var(--settings-surface);
391
- border-radius: 50%;
392
- }
393
-
394
- .settings-status-badge {
395
- flex: none;
396
- padding: 3px 8px;
397
- color: var(--settings-muted);
398
- font-size: 11px;
399
- font-weight: 500;
400
- line-height: 18px;
401
- background: var(--settings-surface);
402
- border: 1px solid var(--settings-border);
403
- border-radius: 6px;
404
- }
405
-
406
- .settings-status-row__detail {
407
- min-width: 0;
408
- color: var(--settings-muted);
409
- font-size: 13px;
410
- line-height: 20px;
411
- }
412
-
413
- .settings-page-description {
414
- max-width: 760px;
415
- margin: -10px 0 20px;
416
- color: var(--settings-muted);
417
- font-size: 12px;
418
- line-height: 18px;
419
- }
420
-
421
- .settings-session-import-header {
422
- display: flex;
423
- align-items: flex-start;
424
- justify-content: space-between;
425
- gap: 24px;
426
- }
427
-
428
- .settings-session-import-header .settings-section-label {
429
- min-width: 0;
430
- }
431
-
432
- .settings-session-import-harness {
433
- display: flex;
434
- align-items: center;
435
- min-width: 0;
436
- gap: 12px;
437
- margin: -12px 0 16px;
438
- color: var(--settings-muted);
439
- font-size: 13px;
440
- }
441
-
442
- .settings-session-import-harness > span {
443
- flex: none;
444
- }
445
-
446
- .settings-session-import-harness__options {
447
- display: flex;
448
- align-items: center;
449
- min-width: 0;
450
- flex: 1;
451
- gap: 6px;
452
- overflow-x: auto;
453
- overflow-y: hidden;
454
- scrollbar-width: none;
455
- }
456
-
457
- .settings-session-import-harness__options::-webkit-scrollbar {
458
- display: none;
459
- }
460
-
461
- .settings-session-import-harness__option {
462
- min-height: 32px;
463
- flex: none;
464
- padding: 6px 10px;
465
- color: var(--settings-muted);
466
- font: inherit;
467
- font-size: 12px;
468
- white-space: nowrap;
469
- background: rgb(255 255 255 / 4%);
470
- border: 1px solid var(--settings-border);
471
- border-radius: 6px;
472
- cursor: pointer;
473
- }
474
-
475
- .settings-session-import-harness__option[aria-pressed="true"] {
476
- color: var(--settings-text);
477
- background: var(--settings-active);
478
- border-color: rgb(51 156 255 / 50%);
479
- }
480
-
481
- .settings-session-import-harness__option:disabled {
482
- opacity: 0.38;
483
- cursor: not-allowed;
484
- }
485
-
486
- .settings-session-import-harness__option:focus-visible {
487
- outline: 2px solid var(--settings-focus);
488
- outline-offset: 2px;
489
- }
490
-
491
- .settings-session-import-harness + .settings-page-description {
492
- margin-top: 0;
493
- margin-bottom: 4px;
494
- }
495
-
496
- .settings-session-import-availability-note {
497
- margin-top: 0;
498
- }
499
-
500
- .settings-session-import-search,
501
- .settings-session-import-pagination {
502
- display: flex;
503
- flex-wrap: wrap;
504
- align-items: center;
505
- gap: 10px;
506
- margin: 16px 0;
507
- }
508
-
509
- .settings-session-import-search input {
510
- flex: 1;
511
- min-width: 160px;
512
- }
513
-
514
- .settings-session-import-search input,
515
- .settings-session-import-pagination select {
516
- min-height: 36px;
517
- padding: 6px 10px;
518
- color: var(--settings-text);
519
- background: var(--settings-bg);
520
- border: 1px solid var(--settings-border);
521
- border-radius: 6px;
522
- }
523
-
524
- .settings-session-import-search input:focus-visible,
525
- .settings-session-import-pagination select:focus-visible {
526
- outline: 2px solid var(--settings-focus);
527
- outline-offset: 2px;
528
- }
529
-
530
- .settings-session-import-pagination {
531
- color: var(--settings-muted);
532
- font-size: 12px;
533
- }
534
-
535
- .settings-session-import-pagination label {
536
- display: flex;
537
- align-items: center;
538
- gap: 8px;
539
- }
540
-
541
- .settings-session-import-pagination > span {
542
- flex: 1;
543
- min-width: 130px;
544
- }
545
-
546
- .settings-session-import-pagination__navigation {
547
- display: flex;
548
- gap: 8px;
549
- margin-left: auto;
550
- }
551
-
552
- .settings-session-import-content,
553
- .settings-session-import-list {
554
- display: grid;
555
- gap: 10px;
556
- }
557
-
558
- .settings-session-import-status {
559
- display: flex;
560
- align-items: center;
561
- min-height: 64px;
562
- gap: 12px;
563
- padding: 16px;
564
- color: var(--settings-muted);
565
- background: var(--settings-panel);
566
- border: 1px solid var(--settings-border);
567
- border-radius: 8px;
568
- }
569
-
570
- .settings-session-import-status.is-error {
571
- color: #ef4444;
572
- }
573
-
574
- .settings-session-import-recovery {
575
- display: grid;
576
- justify-items: start;
577
- gap: 14px;
578
- padding: 16px;
579
- background: var(--settings-panel);
580
- border: 1px solid var(--settings-border);
581
- border-radius: 8px;
582
- }
583
-
584
- .settings-session-import-recovery:focus-visible {
585
- outline: 2px solid var(--settings-focus);
586
- outline-offset: 2px;
587
- }
588
-
589
- .settings-session-import-recovery__copy {
590
- display: grid;
591
- gap: 4px;
592
- }
593
-
594
- .settings-session-import-recovery__copy strong {
595
- color: var(--settings-text);
596
- font-size: 14px;
597
- }
598
-
599
- .settings-session-import-recovery__copy p {
600
- margin: 0;
601
- color: var(--settings-muted);
602
- font-size: 13px;
603
- line-height: 20px;
604
- }
605
-
606
- .settings-session-import-recovery__path {
607
- display: flex;
608
- align-items: stretch;
609
- width: 100%;
610
- min-width: 0;
611
- overflow: hidden;
612
- border: 1px solid var(--settings-border);
613
- border-radius: 6px;
614
- }
615
-
616
- .settings-session-import-recovery__path code {
617
- min-width: 0;
618
- flex: 1;
619
- padding: 8px 10px;
620
- overflow-x: auto;
621
- color: var(--settings-text);
622
- font-size: 12px;
623
- line-height: 20px;
624
- white-space: nowrap;
625
- }
626
-
627
- .settings-session-import-recovery__path .settings-command-button {
628
- min-height: 0;
629
- flex: none;
630
- border-width: 0 0 0 1px;
631
- border-radius: 0;
632
- }
633
-
634
- .settings-session-import-row {
635
- display: grid;
636
- grid-template-columns: minmax(0, 1fr) auto;
637
- align-items: center;
638
- gap: 20px;
639
- min-width: 0;
640
- padding: 16px;
641
- background: var(--settings-panel);
642
- border: 1px solid var(--settings-border);
643
- border-radius: 8px;
644
- }
645
-
646
- .settings-session-import-row__copy {
647
- display: grid;
648
- min-width: 0;
649
- gap: 4px;
650
- }
651
-
652
- .settings-session-import-row__copy strong {
653
- overflow: hidden;
654
- color: var(--settings-text);
655
- font-size: 14px;
656
- text-overflow: ellipsis;
657
- white-space: nowrap;
658
- }
659
-
660
- .settings-session-import-row__copy span,
661
- .settings-session-import-row__cwd {
662
- overflow: hidden;
663
- color: var(--settings-muted);
664
- font-size: 12px;
665
- line-height: 18px;
666
- text-overflow: ellipsis;
667
- white-space: nowrap;
668
- }
669
-
670
- .settings-session-import-row__cwd {
671
- display: block;
672
- min-width: 0;
673
- background: transparent;
674
- }
675
-
676
- .settings-session-import-row__action {
677
- display: flex;
678
- align-items: flex-end;
679
- flex-direction: column;
680
- gap: 8px;
681
- }
682
-
683
- .settings-session-import-running {
684
- color: var(--settings-muted);
685
- font-size: 12px;
686
- }
687
-
688
- .settings-preference-row {
689
- display: flex;
690
- align-items: center;
691
- justify-content: space-between;
692
- gap: 32px;
693
- min-height: 88px;
694
- padding: 18px 0;
695
- border-top: 1px solid var(--settings-divider);
696
- border-bottom: 1px solid var(--settings-divider);
697
- }
698
-
699
- .settings-preference-row__copy {
700
- display: flex;
701
- flex: 1 1 auto;
702
- flex-direction: column;
703
- min-width: 0;
704
- gap: 5px;
705
- }
706
-
707
- .settings-preference-row__copy strong {
708
- color: var(--settings-text);
709
- font-size: 15px;
710
- font-weight: 600;
711
- line-height: 22px;
712
- }
713
-
714
- .settings-preference-row__copy span {
715
- max-width: 680px;
716
- color: var(--settings-muted);
717
- font-size: 13px;
718
- line-height: 20px;
719
- }
720
-
721
- .settings-preference-switch {
722
- display: inline-flex;
723
- align-items: center;
724
- width: 42px;
725
- height: 24px;
726
- flex: none;
727
- padding: 2px;
728
- border: 0;
729
- border-radius: 999px;
730
- background: var(--settings-surface-hover);
731
- cursor: pointer;
732
- transition: background 120ms ease;
733
- }
734
-
735
- .settings-preference-switch[aria-checked="true"] {
736
- justify-content: flex-end;
737
- background: var(--settings-focus);
738
- }
739
-
740
- .settings-preference-switch:focus-visible {
741
- outline: 2px solid var(--settings-focus);
742
- outline-offset: 2px;
743
- }
744
-
745
- .settings-preference-switch__thumb {
746
- width: 20px;
747
- height: 20px;
748
- border-radius: 50%;
749
- background: var(--settings-primary-text);
750
- box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
751
- }
752
-
753
- .settings-connection-page-header {
754
- display: flex;
755
- align-items: flex-start;
756
- justify-content: space-between;
757
- gap: 18px;
758
- margin-bottom: 18px;
759
- }
760
-
761
- .settings-connection-page-header .settings-section-label {
762
- padding-bottom: 0;
763
- }
764
-
765
- .settings-connection-page-header .settings-page-description {
766
- margin: 5px 0 0;
767
- }
768
-
769
- .settings-connections-content,
770
- .settings-connections-layout,
771
- .settings-connection-list,
772
- .settings-connection-rows {
773
- min-width: 0;
774
- }
775
-
776
- .settings-connections-layout {
777
- display: grid;
778
- grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
779
- align-items: start;
780
- gap: 18px;
781
- }
782
-
783
- .settings-connection-list,
784
- .settings-connection-inspector {
785
- overflow: hidden;
786
- background: var(--settings-panel);
787
- border: 1px solid var(--settings-border);
788
- border-radius: 10px;
789
- }
790
-
791
- .settings-connection-host-strip {
792
- display: grid;
793
- grid-template-columns: 30px minmax(0, 1fr) 30px;
794
- align-items: center;
795
- min-width: 0;
796
- gap: 5px;
797
- padding: 9px 10px;
798
- border-bottom: 1px solid var(--settings-divider);
799
- }
800
-
801
- .settings-connection-host-scroll {
802
- display: none;
803
- align-items: center;
804
- justify-content: center;
805
- width: 30px;
806
- height: 34px;
807
- padding: 0;
808
- color: var(--settings-muted);
809
- background: var(--settings-inset);
810
- border: 1px solid var(--settings-border);
811
- border-radius: 8px;
812
- cursor: pointer;
813
- }
814
-
815
- .settings-connection-host-strip[data-connection-host-overflow="true"]
816
- .settings-connection-host-scroll {
817
- display: inline-flex;
818
- }
819
-
820
- .settings-connection-host-strip:not([data-connection-host-overflow="true"]) {
821
- grid-template-columns: minmax(0, 1fr);
822
- }
823
-
824
- .settings-connection-host-scroll:hover:not(:disabled) {
825
- color: var(--settings-text);
826
- background: var(--settings-hover);
827
- }
828
-
829
- .settings-connection-host-scroll:disabled {
830
- cursor: default;
831
- opacity: 0.35;
832
- }
833
-
834
- .settings-connection-host-scroll:focus-visible,
835
- .settings-connection-host-tab:focus-visible,
836
- .settings-connection-row:focus-visible,
837
- .settings-connection-install-link:focus-visible,
838
- .settings-connection-view-error:focus-visible {
839
- outline: 2px solid var(--settings-focus);
840
- outline-offset: 1px;
841
- }
842
-
843
- .settings-connection-host-tabs {
844
- display: flex;
845
- align-items: center;
846
- min-width: 0;
847
- gap: 6px;
848
- overflow-x: auto;
849
- overflow-y: hidden;
850
- overscroll-behavior-x: contain;
851
- scrollbar-width: none;
852
- scroll-behavior: smooth;
853
- scroll-snap-type: x proximity;
854
- touch-action: pan-x;
855
- }
856
-
857
- .settings-connection-host-tabs::-webkit-scrollbar {
858
- display: none;
859
- }
860
-
861
- .settings-connection-host-tab {
862
- display: inline-flex;
863
- align-items: center;
864
- height: 30px;
865
- min-width: max-content;
866
- flex: none;
867
- padding: 0 9px;
868
- color: var(--settings-muted);
869
- font: inherit;
870
- font-size: 12px;
871
- line-height: 18px;
872
- white-space: nowrap;
873
- background: var(--settings-inset);
874
- border: 1px solid var(--settings-border);
875
- border-radius: 7px;
876
- cursor: pointer;
877
- scroll-snap-align: start;
878
- }
879
-
880
- .settings-connection-host-tab:hover {
881
- color: var(--settings-text);
882
- background: var(--settings-hover);
883
- }
884
-
885
- .settings-connection-host-tab[aria-selected="true"] {
886
- color: var(--settings-text);
887
- font-weight: 600;
888
- background: var(--settings-active);
889
- border-color: var(--settings-border);
890
- }
891
-
892
- .settings-connection-table-header,
893
- .settings-connection-row {
894
- display: grid;
895
- grid-template-columns: minmax(160px, 1fr) minmax(92px, auto) 108px;
896
- align-items: center;
897
- min-width: 0;
898
- gap: 10px;
899
- }
900
-
901
- .settings-connection-table-header {
902
- min-height: 30px;
903
- padding: 0 10px;
904
- color: var(--settings-muted);
905
- font-size: 10px;
906
- font-weight: 600;
907
- line-height: 16px;
908
- text-transform: uppercase;
909
- letter-spacing: 0.06em;
910
- background: transparent;
911
- border-bottom: 1px solid var(--settings-divider);
912
- }
913
-
914
- .settings-connection-row {
915
- min-height: 52px;
916
- padding: 8px 10px;
917
- cursor: pointer;
918
- border-bottom: 1px solid var(--settings-divider);
919
- }
920
-
921
- .settings-connection-row:last-child {
922
- border-bottom: 0;
923
- }
924
-
925
- .settings-connection-row:hover {
926
- background: var(--settings-hover);
927
- }
928
-
929
- .settings-connection-row[data-connection-selected="true"] {
930
- background: var(--settings-surface);
931
- }
932
-
933
- .settings-connection-row__identity,
934
- .settings-connection-inspector__identity {
935
- display: inline-flex;
936
- align-items: center;
937
- min-width: 0;
938
- gap: 8px;
939
- color: var(--settings-text);
940
- }
941
-
942
- .settings-connection-row__identity strong,
943
- .settings-connection-inspector__identity strong {
944
- min-width: 0;
945
- overflow-wrap: anywhere;
946
- font-size: 12px;
947
- font-weight: 500;
948
- line-height: 18px;
949
- }
950
-
951
- .settings-connection-row__mark {
952
- display: inline-flex;
953
- align-items: center;
954
- justify-content: center;
955
- width: 24px;
956
- height: 24px;
957
- flex: none;
958
- color: var(--settings-muted);
959
- font-size: 10px;
960
- font-weight: 700;
961
- background: var(--settings-surface);
962
- border-radius: 6px;
963
- }
964
-
965
- .settings-connection-row__mark--logo {
966
- color: var(--settings-text);
967
- background: transparent;
968
- }
969
-
970
- .settings-connection-row__mark--logo > img,
971
- .settings-connection-row__mark--logo > svg {
972
- display: block;
973
- max-width: 18px;
974
- max-height: 18px;
975
- }
976
-
977
- .settings-connection-row__status {
978
- display: inline-flex;
979
- align-items: center;
980
- width: fit-content;
981
- gap: 5px;
982
- color: var(--settings-muted);
983
- font-size: 11px;
984
- font-weight: 500;
985
- line-height: 18px;
986
- }
987
-
988
- .settings-connection-row__status::before {
989
- width: 6px;
990
- height: 6px;
991
- flex: none;
992
- content: "";
993
- background: currentColor;
994
- border-radius: 50%;
995
- }
996
-
997
- .settings-connection-row__status[data-connection-tone="ready"] {
998
- color: var(--settings-success);
999
- }
1000
-
1001
- .settings-connection-row__status[data-connection-tone="checking"] {
1002
- color: var(--settings-warning);
1003
- }
1004
-
1005
- .settings-connection-row__status[data-connection-tone="setup"] {
1006
- color: var(--settings-muted);
1007
- }
1008
-
1009
- .settings-connection-row__status[data-connection-tone="setup"]::before {
1010
- background: transparent;
1011
- border: 1.5px solid currentColor;
1012
- }
1013
-
1014
- .settings-connection-row__status[data-connection-tone="failed"] {
1015
- color: var(--settings-danger);
1016
- }
1017
-
1018
- .settings-connection-row__action {
1019
- display: flex;
1020
- align-items: center;
1021
- justify-content: flex-end;
1022
- min-width: 0;
1023
- gap: 4px;
1024
- }
1025
-
1026
- .settings-connection-row__handle {
1027
- display: inline-flex;
1028
- flex: none;
1029
- align-items: center;
1030
- justify-content: center;
1031
- width: 16px;
1032
- color: var(--settings-muted);
1033
- cursor: grab;
1034
- opacity: 0.6;
1035
- }
1036
-
1037
- .settings-connection-row__handle:hover {
1038
- opacity: 1;
1039
- }
1040
-
1041
- .settings-connection-row[draggable="true"] {
1042
- cursor: grab;
1043
- }
1044
-
1045
- .settings-connection-row[data-connection-dragging="true"] {
1046
- opacity: 0.4;
1047
- }
1048
-
1049
- .settings-connection-row[data-connection-drop-indicator="before"] {
1050
- box-shadow: inset 0 2px 0 0 var(--settings-focus);
1051
- }
1052
-
1053
- .settings-connection-row[data-connection-drop-indicator="after"] {
1054
- box-shadow: inset 0 -2px 0 0 var(--settings-focus);
1055
- }
1056
-
1057
- .settings-connection-row__group-toggle {
1058
- display: inline-flex;
1059
- flex: none;
1060
- align-items: center;
1061
- justify-content: center;
1062
- width: 26px;
1063
- height: 26px;
1064
- color: var(--settings-muted);
1065
- background: transparent;
1066
- border: 0;
1067
- border-radius: 6px;
1068
- cursor: pointer;
1069
- }
1070
-
1071
- .settings-connection-row__group-toggle:hover {
1072
- color: var(--settings-text);
1073
- background: var(--settings-hover);
1074
- }
1075
-
1076
- .settings-connection-group-divider {
1077
- padding: 10px 12px 6px;
1078
- color: var(--settings-muted);
1079
- font-size: 10px;
1080
- font-weight: 600;
1081
- line-height: 16px;
1082
- text-transform: uppercase;
1083
- letter-spacing: 0.06em;
1084
- /* No border-top here: the row immediately above already carries its own
1085
- border-bottom (it is no longer :last-child once this divider follows
1086
- it), so adding one here would double the separator line. */
1087
- }
1088
-
1089
- .settings-connection-group-more[data-connection-drag-over="true"] {
1090
- background: rgb(51 156 255 / 8%);
1091
- }
1092
-
1093
- .settings-connection-group-hint {
1094
- display: grid;
1095
- gap: 3px;
1096
- margin: 0 12px 12px;
1097
- padding: 14px 16px;
1098
- text-align: center;
1099
- border: 1.5px dashed var(--settings-border);
1100
- border-radius: 10px;
1101
- }
1102
-
1103
- .settings-connection-group-more[data-connection-drag-over="true"] .settings-connection-group-hint {
1104
- border-color: var(--settings-focus);
1105
- }
1106
-
1107
- .settings-connection-group-hint strong {
1108
- color: var(--settings-text);
1109
- font-size: 12.5px;
1110
- font-weight: 500;
1111
- line-height: 18px;
1112
- }
1113
-
1114
- .settings-connection-group-hint span {
1115
- color: var(--settings-muted);
1116
- font-size: 12px;
1117
- line-height: 17px;
1118
- }
1119
-
1120
- .settings-connection-group-reset {
1121
- display: flex;
1122
- width: 100%;
1123
- align-items: center;
1124
- gap: 6px;
1125
- padding: 10px 12px;
1126
- color: var(--settings-muted);
1127
- font: inherit;
1128
- font-size: 12px;
1129
- text-align: left;
1130
- background: transparent;
1131
- border: 0;
1132
- border-top: 1px solid var(--settings-divider);
1133
- cursor: pointer;
1134
- }
1135
-
1136
- .settings-connection-group-reset:hover {
1137
- color: var(--settings-text);
1138
- background: var(--settings-hover);
1139
- }
1140
-
1141
- .settings-connection-install-link {
1142
- display: inline-flex;
1143
- align-items: center;
1144
- justify-content: center;
1145
- width: 26px;
1146
- height: 26px;
1147
- color: var(--settings-focus);
1148
- text-decoration: none;
1149
- background: transparent;
1150
- border: 1px solid transparent;
1151
- border-radius: 7px;
1152
- opacity: 0;
1153
- transition: opacity 120ms ease;
1154
- }
1155
-
1156
- .settings-connection-row:hover .settings-connection-install-link,
1157
- .settings-connection-install-link:focus-visible {
1158
- opacity: 1;
1159
- }
1160
-
1161
- .settings-connection-install-link:hover {
1162
- color: var(--settings-focus);
1163
- background: var(--settings-active);
1164
- border-color: var(--settings-border);
1165
- }
1166
-
1167
- .settings-connection-view-error {
1168
- padding: 4px 7px;
1169
- color: var(--settings-danger);
1170
- font: inherit;
1171
- font-size: 11px;
1172
- line-height: 18px;
1173
- background: transparent;
1174
- border: 0;
1175
- border-radius: 6px;
1176
- cursor: pointer;
1177
- }
1178
-
1179
- .settings-connection-view-error:hover {
1180
- color: var(--settings-danger);
1181
- background: var(--settings-danger-bg);
1182
- }
1183
-
1184
- .settings-connection-inspector {
1185
- position: sticky;
1186
- top: 18px;
1187
- }
1188
-
1189
- .settings-connection-inspector__header {
1190
- display: flex;
1191
- align-items: flex-start;
1192
- justify-content: space-between;
1193
- min-width: 0;
1194
- gap: 10px;
1195
- padding: 12px;
1196
- border-bottom: 1px solid var(--settings-divider);
1197
- }
1198
-
1199
- .settings-connection-inspector__body {
1200
- display: grid;
1201
- min-width: 0;
1202
- gap: 12px;
1203
- padding: 12px;
1204
- }
1205
-
1206
- .settings-connection-install-callout {
1207
- display: flex;
1208
- flex-direction: column;
1209
- gap: 14px;
1210
- padding: 14px;
1211
- background: var(--settings-surface);
1212
- border: 1px solid var(--settings-border);
1213
- border-radius: 10px;
1214
- }
1215
-
1216
- .settings-connection-install-head {
1217
- display: flex;
1218
- align-items: flex-start;
1219
- gap: 12px;
1220
- min-width: 0;
1221
- }
1222
-
1223
- .settings-connection-install-head > div {
1224
- min-width: 0;
1225
- flex: 1;
1226
- }
1227
-
1228
- .settings-connection-install-callout__icon {
1229
- display: inline-flex;
1230
- align-items: center;
1231
- justify-content: center;
1232
- width: 32px;
1233
- height: 32px;
1234
- flex: none;
1235
- color: var(--settings-focus);
1236
- background: var(--settings-active);
1237
- border-radius: 8px;
1238
- }
1239
-
1240
- .settings-connection-install-callout strong,
1241
- .settings-connection-install-head strong,
1242
- .settings-connection-error-summary strong,
1243
- .settings-connection-state-summary strong {
1244
- display: block;
1245
- margin: 0 0 4px;
1246
- color: var(--settings-text);
1247
- font-size: 13px;
1248
- font-weight: 600;
1249
- line-height: 19px;
1250
- }
1251
-
1252
- .settings-connection-install-callout p,
1253
- .settings-connection-install-head p,
1254
- .settings-connection-error-summary p,
1255
- .settings-connection-state-summary p,
1256
- .settings-connection-issue-note {
1257
- margin: 0;
1258
- color: var(--settings-muted);
1259
- font-size: 12px;
1260
- line-height: 18px;
1261
- }
1262
-
1263
- .settings-connection-install-button {
1264
- width: 100%;
1265
- }
1266
-
1267
- .settings-connection-error-summary {
1268
- padding: 13px 14px;
1269
- color: var(--settings-danger);
1270
- background: var(--settings-danger-bg);
1271
- border: 1px solid var(--settings-danger-border);
1272
- border-radius: 10px;
1273
- }
1274
-
1275
- .settings-connection-error-metadata {
1276
- display: grid;
1277
- gap: 7px;
1278
- padding: 12px;
1279
- background: var(--settings-inset);
1280
- border: 1px solid var(--settings-border);
1281
- border-radius: 9px;
1282
- }
1283
-
1284
- .settings-connection-detail-line {
1285
- display: grid;
1286
- grid-template-columns: 92px minmax(0, 1fr);
1287
- gap: 10px;
1288
- min-width: 0;
1289
- color: var(--settings-muted);
1290
- font-size: 10px;
1291
- line-height: 16px;
1292
- }
1293
-
1294
- .settings-connection-detail-line code {
1295
- min-width: 0;
1296
- overflow-wrap: anywhere;
1297
- color: var(--settings-text);
1298
- font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1299
- white-space: pre-wrap;
1300
- }
1301
-
1302
- .settings-connection-error-log-header {
1303
- display: flex;
1304
- align-items: center;
1305
- justify-content: space-between;
1306
- gap: 10px;
1307
- }
1308
-
1309
- .settings-connection-error-log-header strong {
1310
- color: var(--settings-text);
1311
- font-size: 11px;
1312
- font-weight: 600;
1313
- }
1314
-
1315
- .settings-connection-error-log-header .settings-command-button {
1316
- min-height: 30px;
1317
- padding: 5px 9px;
1318
- font-size: 11px;
1319
- }
1320
-
1321
- .settings-connection-stderr {
1322
- max-height: 220px;
1323
- min-width: 0;
1324
- margin: 0;
1325
- padding: 11px;
1326
- overflow: auto;
1327
- color: var(--settings-text);
1328
- font:
1329
- 10px/16px ui-monospace,
1330
- "SFMono-Regular",
1331
- Consolas,
1332
- "Liberation Mono",
1333
- monospace;
1334
- white-space: pre-wrap;
1335
- overflow-wrap: anywhere;
1336
- background: var(--settings-inset);
1337
- border: 1px solid var(--settings-border);
1338
- border-radius: 9px;
1339
- }
1340
-
1341
- .settings-connection-error-actions {
1342
- display: grid;
1343
- grid-template-columns: minmax(0, 1fr);
1344
- gap: 8px;
1345
- }
1346
-
1347
- .settings-connection-error-actions .settings-command-button {
1348
- width: 100%;
1349
- }
1350
-
1351
- .settings-connection-issue-note {
1352
- margin-top: -4px;
1353
- }
1354
-
1355
- .settings-connection-state-summary {
1356
- padding: 14px;
1357
- background: var(--settings-surface);
1358
- border: 1px solid var(--settings-border);
1359
- border-radius: 10px;
1360
- }
1361
-
1362
- .settings-empty {
1363
- display: flex;
1364
- align-items: center;
1365
- min-height: 72px;
1366
- padding: 12px 16px;
1367
- }
1368
-
1369
- .settings-empty > div {
1370
- display: grid;
1371
- min-width: 0;
1372
- gap: 2px;
1373
- }
1374
-
1375
- .settings-empty strong {
1376
- color: var(--settings-text);
1377
- font-size: 13px;
1378
- font-weight: 500;
1379
- line-height: 19px;
1380
- }
1381
-
1382
- .settings-empty span {
1383
- color: var(--settings-muted);
1384
- font-size: 13px;
1385
- line-height: 19px;
1386
- }
1387
-
1388
- .settings-about-panel {
1389
- display: grid;
1390
- max-width: 720px;
1391
- gap: 18px;
1392
- padding: 24px;
1393
- background: var(--settings-panel);
1394
- border: 1px solid var(--settings-border);
1395
- border-radius: 12px;
1396
- }
1397
-
1398
- .settings-about-product {
1399
- color: var(--settings-text);
1400
- font-size: 24px;
1401
- font-weight: 700;
1402
- line-height: 32px;
1403
- }
1404
-
1405
- .settings-about-tagline {
1406
- color: var(--settings-text);
1407
- font-size: 16px;
1408
- font-weight: 600;
1409
- line-height: 24px;
1410
- }
1411
-
1412
- .settings-about-version-row {
1413
- display: flex;
1414
- align-items: center;
1415
- gap: 12px;
1416
- margin: 4px 0 8px;
1417
- }
1418
-
1419
- .settings-about-version-badge {
1420
- display: inline-flex;
1421
- align-items: center;
1422
- font-size: 13px;
1423
- font-weight: 600;
1424
- color: var(--settings-text);
1425
- background: var(--settings-surface);
1426
- border: 1px solid var(--settings-border);
1427
- padding: 4px 10px;
1428
- border-radius: 6px;
1429
- }
1430
-
1431
- .settings-about-copy {
1432
- display: grid;
1433
- max-width: 660px;
1434
- gap: 12px;
1435
- }
1436
-
1437
- .settings-about-copy p,
1438
- .settings-about-repository p {
1439
- margin: 0;
1440
- color: var(--settings-muted);
1441
- font-size: 13px;
1442
- line-height: 21px;
1443
- }
1444
-
1445
- .settings-about-star-callout {
1446
- margin: 2px 0;
1447
- color: var(--settings-warning);
1448
- font-size: 14px;
1449
- font-weight: 600;
1450
- line-height: 22px;
1451
- }
1452
-
1453
- .settings-about-repository {
1454
- display: grid;
1455
- gap: 10px;
1456
- padding-top: 18px;
1457
- border-top: 1px solid var(--settings-divider);
1458
- }
1459
-
1460
- .settings-about-repository-link {
1461
- display: flex;
1462
- align-items: center;
1463
- width: fit-content;
1464
- min-width: 0;
1465
- max-width: 100%;
1466
- gap: 8px;
1467
- color: var(--settings-focus);
1468
- font-size: 13px;
1469
- font-weight: 600;
1470
- text-decoration: none;
1471
- }
1472
-
1473
- .settings-about-repository-link:hover {
1474
- text-decoration: underline;
1475
- }
1476
-
1477
- .settings-about-repository-link code {
1478
- min-width: 0;
1479
- overflow: hidden;
1480
- color: var(--settings-muted);
1481
- font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1482
- font-size: 11px;
1483
- font-weight: 400;
1484
- text-overflow: ellipsis;
1485
- white-space: nowrap;
1486
- }
1487
-
1488
- .settings-page-error {
1489
- padding: 16px;
1490
- color: var(--settings-text);
1491
- font-size: 13px;
1492
- background: var(--settings-panel);
1493
- border: 1px solid var(--settings-border);
1494
- border-radius: 20px;
1495
- }
1496
-
1497
- .settings-update-metadata {
1498
- display: grid;
1499
- grid-template-columns: repeat(3, minmax(0, 1fr));
1500
- gap: 24px;
1501
- margin-bottom: 24px;
1502
- padding: 0 4px 20px;
1503
- border-bottom: 1px solid var(--settings-divider);
1504
- }
1505
-
1506
- .settings-update-metadata__item {
1507
- display: grid;
1508
- min-width: 0;
1509
- gap: 4px;
1510
- }
1511
-
1512
- .settings-update-metadata__item span {
1513
- color: var(--settings-muted);
1514
- font-size: 12px;
1515
- line-height: 18px;
1516
- }
1517
-
1518
- .settings-update-metadata__item strong {
1519
- min-width: 0;
1520
- overflow-wrap: anywhere;
1521
- color: var(--settings-text);
1522
- font-size: 15px;
1523
- font-weight: 500;
1524
- line-height: 22px;
1525
- }
1526
-
1527
- /* The only emphasis on this screen: a latest version newer than the installed one. */
1528
- .settings-update-metadata__value--newer {
1529
- color: var(--settings-focus);
1530
- }
1531
-
1532
- .settings-update-panel {
1533
- display: grid;
1534
- gap: 12px;
1535
- padding: 20px;
1536
- color: var(--settings-text);
1537
- background: var(--settings-panel);
1538
- border: 1px solid var(--settings-border);
1539
- border-radius: 8px;
1540
- }
1541
-
1542
- .settings-update-panel__head {
1543
- display: flex;
1544
- align-items: center;
1545
- min-width: 0;
1546
- gap: 8px;
1547
- }
1548
-
1549
- .settings-update-panel__head .harnessmix-settings-icon {
1550
- color: var(--settings-muted);
1551
- }
1552
-
1553
- .settings-update-panel[data-update-state="available"] .harnessmix-settings-icon,
1554
- .settings-update-panel[data-update-state="downloading"] .harnessmix-settings-icon,
1555
- .settings-update-panel[data-update-state="installing"] .harnessmix-settings-icon,
1556
- .settings-update-panel[data-update-state="restarting"] .harnessmix-settings-icon {
1557
- color: var(--settings-focus);
1558
- }
1559
-
1560
- .settings-update-panel[data-update-state="current"] .harnessmix-settings-icon {
1561
- color: var(--settings-success);
1562
- }
1563
-
1564
- .settings-update-panel[data-update-state="failed"] .harnessmix-settings-icon,
1565
- .settings-update-panel[data-update-state="error"] .harnessmix-settings-icon {
1566
- color: var(--settings-danger);
1567
- }
1568
-
1569
- .settings-update-panel__title {
1570
- min-width: 0;
1571
- overflow-wrap: anywhere;
1572
- color: var(--settings-text);
1573
- font-size: 14px;
1574
- font-weight: 600;
1575
- line-height: 22px;
1576
- }
1577
-
1578
- .settings-update-summary,
1579
- .settings-update-error {
1580
- margin: 0;
1581
- overflow-wrap: anywhere;
1582
- font-size: 13px;
1583
- line-height: 20px;
1584
- }
1585
-
1586
- .settings-update-summary {
1587
- color: var(--settings-muted);
1588
- }
1589
-
1590
- .settings-update-error {
1591
- color: var(--settings-danger);
1592
- }
1593
-
1594
- .settings-update-progress {
1595
- width: 100%;
1596
- height: 8px;
1597
- accent-color: var(--settings-focus);
1598
- }
1599
-
1600
- .settings-update-progress-detail {
1601
- color: var(--settings-muted);
1602
- font-size: 12px;
1603
- line-height: 18px;
1604
- }
1605
-
1606
- /* Release notes scroll with the page; a scroller inside a scroller traps the wheel. */
1607
- .settings-update-notes-section {
1608
- min-width: 0;
1609
- margin-top: 24px;
1610
- padding-top: 24px;
1611
- border-top: 1px solid var(--settings-divider);
1612
- }
1613
-
1614
- .settings-update-notes-section:empty {
1615
- display: none;
1616
- }
1617
-
1618
- .settings-update-notes {
1619
- display: grid;
1620
- min-width: 0;
1621
- gap: 12px;
1622
- color: var(--settings-muted);
1623
- font-size: 14px;
1624
- line-height: 22px;
1625
- overflow-wrap: anywhere;
1626
- }
1627
-
1628
- .settings-update-notes > :first-child {
1629
- margin-top: 0;
1630
- }
1631
-
1632
- .settings-update-notes > :last-child {
1633
- margin-bottom: 0;
1634
- }
1635
-
1636
- .settings-update-notes h1,
1637
- .settings-update-notes h2,
1638
- .settings-update-notes h3,
1639
- .settings-update-notes h4,
1640
- .settings-update-notes h5,
1641
- .settings-update-notes h6 {
1642
- margin: 6px 0 0;
1643
- color: var(--settings-text);
1644
- font-weight: 600;
1645
- }
1646
-
1647
- .settings-update-notes h1 {
1648
- font-size: 18px;
1649
- line-height: 26px;
1650
- }
1651
-
1652
- .settings-update-notes h2 {
1653
- font-size: 17px;
1654
- line-height: 24px;
1655
- }
1656
-
1657
- .settings-update-notes h3,
1658
- .settings-update-notes h4,
1659
- .settings-update-notes h5,
1660
- .settings-update-notes h6 {
1661
- font-size: 14px;
1662
- line-height: 22px;
1663
- }
1664
-
1665
- .settings-update-notes p,
1666
- .settings-update-notes ul,
1667
- .settings-update-notes ol,
1668
- .settings-update-notes pre,
1669
- .settings-update-notes blockquote {
1670
- margin: 0;
1671
- }
1672
-
1673
- .settings-update-notes ul,
1674
- .settings-update-notes ol {
1675
- padding-left: 24px;
1676
- }
1677
-
1678
- .settings-update-notes li {
1679
- padding-left: 4px;
1680
- }
1681
-
1682
- .settings-update-notes li::marker {
1683
- color: var(--settings-muted);
1684
- font-size: 0.85em;
1685
- }
1686
-
1687
- .settings-update-notes li + li {
1688
- margin-top: 14px;
1689
- }
1690
-
1691
- .settings-update-notes .release-note-translation {
1692
- display: block;
1693
- margin-top: 3px;
1694
- color: var(--settings-muted);
1695
- font-size: 13px;
1696
- line-height: 20px;
1697
- }
1698
-
1699
- .settings-update-notes blockquote {
1700
- padding: 8px 12px;
1701
- color: var(--settings-muted);
1702
- border-left: 3px solid var(--settings-focus);
1703
- background: var(--settings-surface);
1704
- }
1705
-
1706
- .settings-update-notes hr {
1707
- width: 100%;
1708
- margin: 2px 0;
1709
- border: 0;
1710
- border-top: 1px solid var(--settings-divider);
1711
- }
1712
-
1713
- .settings-update-notes strong {
1714
- color: var(--settings-text);
1715
- font-weight: 600;
1716
- }
1717
-
1718
- .settings-update-notes a {
1719
- color: var(--settings-focus);
1720
- text-decoration: none;
1721
- }
1722
-
1723
- .settings-update-notes a:hover {
1724
- text-decoration: underline;
1725
- }
1726
-
1727
- .settings-update-notes code {
1728
- font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1729
- font-size: 12px;
1730
- }
1731
-
1732
- .settings-update-notes :not(pre) > code {
1733
- padding: 1px 5px;
1734
- background: var(--settings-surface);
1735
- border-radius: 4px;
1736
- }
1737
-
1738
- .settings-update-notes pre {
1739
- min-width: 0;
1740
- max-width: 100%;
1741
- padding: 10px 12px;
1742
- overflow-x: auto;
1743
- overflow-y: hidden;
1744
- background: var(--settings-inset);
1745
- border-radius: 6px;
1746
- }
1747
-
1748
- .settings-update-notes pre code {
1749
- line-height: 18px;
1750
- white-space: pre-wrap;
1751
- }
1752
-
1753
- /* Manual update sits directly under the status panel, not behind a disclosure:
1754
- automatic updates can fail for machine-local reasons and this is the way out. */
1755
- .settings-update-controls {
1756
- display: grid;
1757
- min-width: 0;
1758
- gap: 10px;
1759
- margin-top: 24px;
1760
- }
1761
-
1762
- .settings-update-manual-title {
1763
- color: var(--settings-text);
1764
- font-size: 15px;
1765
- font-weight: 600;
1766
- line-height: 22px;
1767
- }
1768
-
1769
- .settings-update-manual {
1770
- display: grid;
1771
- min-width: 0;
1772
- gap: 8px;
1773
- }
1774
-
1775
- .settings-update-manual[hidden] {
1776
- display: none;
1777
- }
1778
-
1779
- .settings-update-manual-description {
1780
- margin: 0;
1781
- color: var(--settings-muted);
1782
- font-size: 12px;
1783
- line-height: 18px;
1784
- }
1785
-
1786
- .settings-update-manual-description.is-fallback {
1787
- color: var(--settings-danger);
1788
- }
1789
-
1790
- .settings-update-command {
1791
- display: flex;
1792
- align-items: stretch;
1793
- min-width: 0;
1794
- overflow: hidden;
1795
- border: 1px solid var(--settings-border);
1796
- border-radius: 6px;
1797
- }
1798
-
1799
- .settings-update-command code {
1800
- min-width: 0;
1801
- flex: 1;
1802
- padding: 9px 12px;
1803
- overflow-x: auto;
1804
- color: var(--settings-text);
1805
- font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1806
- font-size: 12px;
1807
- line-height: 20px;
1808
- white-space: nowrap;
1809
- }
1810
-
1811
- .settings-update-command__copy {
1812
- display: inline-flex;
1813
- align-items: center;
1814
- flex: none;
1815
- gap: 6px;
1816
- padding: 0 12px;
1817
- color: var(--settings-muted);
1818
- font-size: 12px;
1819
- background: transparent;
1820
- border: 0;
1821
- border-left: 1px solid var(--settings-border);
1822
- cursor: pointer;
1823
- }
1824
-
1825
- .settings-update-command__copy:hover {
1826
- color: var(--settings-text);
1827
- background: var(--settings-hover);
1828
- }
1829
-
1830
- .settings-update-command__copy:focus-visible {
1831
- outline: 2px solid var(--settings-focus);
1832
- outline-offset: -2px;
1833
- }
1834
-
1
+ :host {
2
+ --settings-bg: light-dark(#ffffff, #202020);
3
+ --settings-sidebar: light-dark(#f7f7f8, #191919);
4
+ --settings-panel: light-dark(#ffffff, #232323);
5
+ --settings-surface: light-dark(#f6f6f6, #292929);
6
+ --settings-surface-hover: light-dark(#eeeeee, #303030);
7
+ --settings-inset: light-dark(#f3f3f3, #161616);
8
+ --settings-text: light-dark(#0d0d0d, #ececec);
9
+ --settings-muted: light-dark(#676767, #a3a3a3);
10
+ --settings-subtle: light-dark(#8a8a8a, #777777);
11
+ --settings-border: light-dark(rgb(13 13 13 / 9%), rgb(255 255 255 / 9%));
12
+ --settings-divider: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 7%));
13
+ --settings-hover: light-dark(rgb(13 13 13 / 5%), rgb(255 255 255 / 7%));
14
+ --settings-active: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 9%));
15
+ --settings-focus: light-dark(#0b75d1, #66aaf9);
16
+ --settings-primary: light-dark(#171717, #f4f4f4);
17
+ --settings-primary-hover: light-dark(#2f2f2f, #ffffff);
18
+ --settings-primary-text: light-dark(#ffffff, #171717);
19
+ --settings-warning: light-dark(#8a5500, #f5c96a);
20
+ --settings-warning-bg: light-dark(#fff8e6, rgb(245 201 106 / 8%));
21
+ --settings-warning-border: light-dark(#ead8a8, rgb(245 201 106 / 24%));
22
+ --settings-danger: light-dark(#b42318, #f87171);
23
+ --settings-danger-bg: light-dark(#fff1f0, rgb(239 68 68 / 8%));
24
+ --settings-danger-border: light-dark(#f3c7c3, rgb(239 68 68 / 22%));
25
+ --settings-success: light-dark(#16784a, #4ade80);
26
+ color: var(--settings-text);
27
+ color-scheme: inherit;
28
+ font:
29
+ 13px/1.5 system-ui,
30
+ -apple-system,
31
+ BlinkMacSystemFont,
32
+ "Segoe UI",
33
+ sans-serif;
34
+ letter-spacing: 0;
35
+ }
36
+
37
+ *,
38
+ *::before,
39
+ *::after {
40
+ box-sizing: border-box;
41
+ letter-spacing: 0;
42
+ }
43
+
44
+ button,
45
+ input,
46
+ select {
47
+ font: inherit;
48
+ }
49
+
50
+ button {
51
+ color: inherit;
52
+ }
53
+
54
+ [hidden] {
55
+ display: none !important;
56
+ }
57
+
58
+ .settings-visually-hidden {
59
+ position: absolute;
60
+ width: 1px;
61
+ height: 1px;
62
+ padding: 0;
63
+ margin: -1px;
64
+ overflow: hidden;
65
+ clip-path: inset(50%);
66
+ white-space: nowrap;
67
+ border: 0;
68
+ }
69
+
70
+ .harnessmix-settings-dialog {
71
+ width: min(1120px, calc(100vw - 48px));
72
+ height: min(780px, calc(100vh - 88px));
73
+ max-width: none;
74
+ max-height: calc(100vh - 88px);
75
+ margin-top: max(56px, calc((100vh - 780px) / 2));
76
+ margin-inline: auto;
77
+ margin-bottom: auto;
78
+ padding: 0;
79
+ overflow: hidden;
80
+ color: var(--settings-text);
81
+ background: var(--settings-bg);
82
+ border: 1px solid var(--settings-border);
83
+ border-radius: 14px;
84
+ box-shadow: light-dark(0 16px 42px rgb(0 0 0 / 16%), 0 20px 54px rgb(0 0 0 / 42%));
85
+ }
86
+
87
+ .harnessmix-settings-dialog::backdrop {
88
+ background: light-dark(rgb(0 0 0 / 24%), rgb(0 0 0 / 56%));
89
+ backdrop-filter: blur(1px);
90
+ }
91
+
92
+ .settings-frame,
93
+ .settings-layout {
94
+ width: 100%;
95
+ height: 100%;
96
+ min-width: 0;
97
+ min-height: 0;
98
+ }
99
+
100
+ .settings-frame {
101
+ display: flex;
102
+ flex-direction: column;
103
+ }
104
+
105
+ .settings-layout {
106
+ flex: 1;
107
+ display: grid;
108
+ grid-template-columns: 184px minmax(0, 1fr);
109
+ background: var(--settings-bg);
110
+ }
111
+
112
+ .settings-sidebar {
113
+ display: flex;
114
+ min-width: 0;
115
+ min-height: 0;
116
+ flex-direction: column;
117
+ overflow: hidden;
118
+ background: var(--settings-sidebar);
119
+ border-right: 1px solid var(--settings-border);
120
+ padding-top: 14px;
121
+ }
122
+
123
+ .settings-header {
124
+ display: flex;
125
+ align-items: center;
126
+ min-width: 0;
127
+ height: 50px;
128
+ flex: none;
129
+ padding: 0 16px;
130
+ border-bottom: 1px solid var(--settings-border);
131
+ }
132
+
133
+ .settings-header-actions {
134
+ display: flex;
135
+ align-items: center;
136
+ flex: none;
137
+ gap: 12px;
138
+ margin-left: auto;
139
+ }
140
+
141
+ .settings-brand {
142
+ display: flex;
143
+ align-items: center;
144
+ min-width: 0;
145
+ gap: 7px;
146
+ }
147
+
148
+ .settings-brand__mark {
149
+ display: inline-flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ width: 26px;
153
+ height: 26px;
154
+ flex: none;
155
+ color: var(--settings-text);
156
+ }
157
+
158
+ .settings-brand__mark .harnessmix-settings-icon {
159
+ width: 24px;
160
+ height: 24px;
161
+ object-fit: contain;
162
+ }
163
+
164
+ .settings-brand__copy {
165
+ display: flex;
166
+ min-width: 0;
167
+ align-items: baseline;
168
+ gap: 0;
169
+ line-height: 20px;
170
+ }
171
+
172
+ .settings-brand__name {
173
+ overflow: hidden;
174
+ color: var(--settings-text);
175
+ font-size: 13px;
176
+ font-weight: 600;
177
+ text-overflow: ellipsis;
178
+ white-space: nowrap;
179
+ }
180
+
181
+ .settings-brand__title {
182
+ margin-left: 8px;
183
+ padding-left: 8px;
184
+ color: var(--settings-muted);
185
+ font-size: 13px;
186
+ font-weight: 400;
187
+ border-left: 1px solid var(--settings-border);
188
+ }
189
+
190
+ .settings-nav {
191
+ display: flex;
192
+ min-width: 0;
193
+ min-height: 0;
194
+ flex: 1;
195
+ flex-direction: column;
196
+ gap: 2px;
197
+ padding: 0 7px 10px;
198
+ overflow-y: auto;
199
+ }
200
+
201
+ .settings-nav-section-label {
202
+ min-height: 24px;
203
+ padding: 4px 9px 2px;
204
+ color: var(--settings-subtle);
205
+ font-size: 11px;
206
+ font-weight: 600;
207
+ line-height: 18px;
208
+ }
209
+
210
+ .settings-nav-section-label:not(:first-child) {
211
+ margin-top: 8px;
212
+ }
213
+
214
+ .settings-nav-button {
215
+ display: grid;
216
+ grid-template-columns: 16px minmax(0, 1fr);
217
+ align-items: center;
218
+ width: 100%;
219
+ position: relative;
220
+ min-height: 34px;
221
+ flex: none;
222
+ gap: 9px;
223
+ padding: 6px 9px;
224
+ color: var(--settings-text);
225
+ font-size: 13px;
226
+ line-height: 20px;
227
+ text-align: left;
228
+ background: transparent;
229
+ border: 0;
230
+ border-radius: 8px;
231
+ cursor: pointer;
232
+ }
233
+
234
+ .settings-nav-button .harnessmix-settings-icon {
235
+ width: 16px;
236
+ height: 16px;
237
+ opacity: 0.9;
238
+ }
239
+
240
+ .settings-nav-button:hover {
241
+ background: var(--settings-hover);
242
+ }
243
+
244
+ .settings-nav-button[aria-current="page"] {
245
+ background: var(--settings-active);
246
+ color: var(--settings-text);
247
+ font-weight: 500;
248
+ }
249
+
250
+ .settings-nav-button span {
251
+ min-width: 0;
252
+ overflow: hidden;
253
+ text-overflow: ellipsis;
254
+ white-space: nowrap;
255
+ }
256
+
257
+ .settings-nav-star-link {
258
+ margin-top: 0;
259
+ color: var(--settings-text);
260
+ text-decoration: none;
261
+ }
262
+
263
+ .settings-nav-star-link .harnessmix-settings-icon {
264
+ color: var(--settings-warning);
265
+ }
266
+
267
+ .settings-nav-star-link:hover {
268
+ color: var(--settings-warning);
269
+ background: var(--settings-warning-bg);
270
+ }
271
+
272
+ .settings-icon-button {
273
+ display: inline-flex;
274
+ align-items: center;
275
+ justify-content: center;
276
+ width: 32px;
277
+ height: 32px;
278
+ flex: none;
279
+ padding: 0;
280
+ color: var(--settings-muted);
281
+ background: transparent;
282
+ border: 0;
283
+ border-radius: 8px;
284
+ cursor: pointer;
285
+ transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
286
+ }
287
+
288
+ .settings-icon-button:hover {
289
+ color: var(--settings-text);
290
+ background: var(--settings-hover);
291
+ }
292
+
293
+ .settings-icon-button:active {
294
+ background: var(--settings-active);
295
+ transform: scale(0.95);
296
+ }
297
+
298
+ .settings-header-actions .settings-icon-button {
299
+ width: 34px;
300
+ height: 34px;
301
+ border-radius: 8px;
302
+ }
303
+
304
+ .settings-header-actions .settings-icon-button:hover {
305
+ color: var(--settings-text);
306
+ background: var(--settings-hover);
307
+ }
308
+
309
+ .settings-icon-button:focus-visible,
310
+ .settings-nav-button:focus-visible {
311
+ outline: 2px solid var(--settings-focus);
312
+ outline-offset: 1px;
313
+ }
314
+
315
+ .settings-page {
316
+ display: block;
317
+ position: relative;
318
+ min-width: 0;
319
+ min-height: 0;
320
+ overflow-y: auto;
321
+ background: var(--settings-bg);
322
+ scrollbar-gutter: stable;
323
+ }
324
+
325
+ .settings-page__content {
326
+ width: min(930px, calc(100% - 80px));
327
+ margin-inline: auto;
328
+ }
329
+
330
+ .settings-page__content {
331
+ min-width: 0;
332
+ padding: 28px 0 36px;
333
+ }
334
+
335
+ .settings-section-label {
336
+ min-height: auto;
337
+ margin: 0;
338
+ padding: 0 0 18px;
339
+ color: var(--settings-text);
340
+ font-size: 18px;
341
+ font-weight: 600;
342
+ line-height: 26px;
343
+ }
344
+
345
+ .settings-status-list,
346
+ .settings-empty {
347
+ overflow: hidden;
348
+ background: var(--settings-panel);
349
+ }
350
+
351
+ .settings-status-row {
352
+ display: grid;
353
+ grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);
354
+ position: relative;
355
+ align-items: center;
356
+ min-height: 72px;
357
+ gap: 20px;
358
+ padding: 12px 0;
359
+ }
360
+
361
+ .settings-status-row:not(:last-child)::after {
362
+ content: "";
363
+ position: absolute;
364
+ right: 0;
365
+ bottom: 0;
366
+ left: 0;
367
+ height: 1px;
368
+ background: var(--settings-divider);
369
+ }
370
+
371
+ .settings-status-row__identity {
372
+ display: inline-flex;
373
+ align-items: center;
374
+ min-width: 0;
375
+ color: var(--settings-text);
376
+ gap: 10px;
377
+ font-size: 14px;
378
+ font-weight: 500;
379
+ line-height: 22px;
380
+ }
381
+
382
+ .settings-status-row__icon {
383
+ display: inline-flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ width: 36px;
387
+ height: 36px;
388
+ flex: none;
389
+ color: var(--settings-muted);
390
+ background: var(--settings-surface);
391
+ border-radius: 50%;
392
+ }
393
+
394
+ .settings-status-badge {
395
+ flex: none;
396
+ padding: 3px 8px;
397
+ color: var(--settings-muted);
398
+ font-size: 11px;
399
+ font-weight: 500;
400
+ line-height: 18px;
401
+ background: var(--settings-surface);
402
+ border: 1px solid var(--settings-border);
403
+ border-radius: 6px;
404
+ }
405
+
406
+ .settings-status-row__detail {
407
+ min-width: 0;
408
+ color: var(--settings-muted);
409
+ font-size: 13px;
410
+ line-height: 20px;
411
+ }
412
+
413
+ .settings-page-description {
414
+ max-width: 760px;
415
+ margin: -10px 0 20px;
416
+ color: var(--settings-muted);
417
+ font-size: 12px;
418
+ line-height: 18px;
419
+ }
420
+
421
+ .settings-session-import-header {
422
+ display: flex;
423
+ align-items: flex-start;
424
+ justify-content: space-between;
425
+ gap: 24px;
426
+ }
427
+
428
+ .settings-session-import-header .settings-section-label {
429
+ min-width: 0;
430
+ }
431
+
432
+ .settings-session-import-harness {
433
+ display: flex;
434
+ align-items: center;
435
+ min-width: 0;
436
+ gap: 12px;
437
+ margin: -12px 0 16px;
438
+ color: var(--settings-muted);
439
+ font-size: 13px;
440
+ }
441
+
442
+ .settings-session-import-harness > span {
443
+ flex: none;
444
+ }
445
+
446
+ .settings-session-import-harness__options {
447
+ display: flex;
448
+ align-items: center;
449
+ min-width: 0;
450
+ flex: 1;
451
+ gap: 6px;
452
+ overflow-x: auto;
453
+ overflow-y: hidden;
454
+ scrollbar-width: none;
455
+ }
456
+
457
+ .settings-session-import-harness__options::-webkit-scrollbar {
458
+ display: none;
459
+ }
460
+
461
+ .settings-session-import-harness__option {
462
+ min-height: 32px;
463
+ flex: none;
464
+ padding: 6px 10px;
465
+ color: var(--settings-muted);
466
+ font: inherit;
467
+ font-size: 12px;
468
+ white-space: nowrap;
469
+ background: rgb(255 255 255 / 4%);
470
+ border: 1px solid var(--settings-border);
471
+ border-radius: 6px;
472
+ cursor: pointer;
473
+ }
474
+
475
+ .settings-session-import-harness__option[aria-pressed="true"] {
476
+ color: var(--settings-text);
477
+ background: var(--settings-active);
478
+ border-color: rgb(51 156 255 / 50%);
479
+ }
480
+
481
+ .settings-session-import-harness__option:disabled {
482
+ opacity: 0.38;
483
+ cursor: not-allowed;
484
+ }
485
+
486
+ .settings-session-import-harness__option:focus-visible {
487
+ outline: 2px solid var(--settings-focus);
488
+ outline-offset: 2px;
489
+ }
490
+
491
+ .settings-session-import-harness + .settings-page-description {
492
+ margin-top: 0;
493
+ margin-bottom: 4px;
494
+ }
495
+
496
+ .settings-session-import-availability-note {
497
+ margin-top: 0;
498
+ }
499
+
500
+ .settings-session-import-search,
501
+ .settings-session-import-pagination {
502
+ display: flex;
503
+ flex-wrap: wrap;
504
+ align-items: center;
505
+ gap: 10px;
506
+ margin: 16px 0;
507
+ }
508
+
509
+ .settings-session-import-search input {
510
+ flex: 1;
511
+ min-width: 160px;
512
+ }
513
+
514
+ .settings-session-import-search input,
515
+ .settings-session-import-pagination select {
516
+ min-height: 36px;
517
+ padding: 6px 10px;
518
+ color: var(--settings-text);
519
+ background: var(--settings-bg);
520
+ border: 1px solid var(--settings-border);
521
+ border-radius: 6px;
522
+ }
523
+
524
+ .settings-session-import-search input:focus-visible,
525
+ .settings-session-import-pagination select:focus-visible {
526
+ outline: 2px solid var(--settings-focus);
527
+ outline-offset: 2px;
528
+ }
529
+
530
+ .settings-session-import-pagination {
531
+ color: var(--settings-muted);
532
+ font-size: 12px;
533
+ }
534
+
535
+ .settings-session-import-pagination label {
536
+ display: flex;
537
+ align-items: center;
538
+ gap: 8px;
539
+ }
540
+
541
+ .settings-session-import-pagination > span {
542
+ flex: 1;
543
+ min-width: 130px;
544
+ }
545
+
546
+ .settings-session-import-pagination__navigation {
547
+ display: flex;
548
+ gap: 8px;
549
+ margin-left: auto;
550
+ }
551
+
552
+ .settings-session-import-content,
553
+ .settings-session-import-list {
554
+ display: grid;
555
+ gap: 10px;
556
+ }
557
+
558
+ .settings-session-import-status {
559
+ display: flex;
560
+ align-items: center;
561
+ min-height: 64px;
562
+ gap: 12px;
563
+ padding: 16px;
564
+ color: var(--settings-muted);
565
+ background: var(--settings-panel);
566
+ border: 1px solid var(--settings-border);
567
+ border-radius: 8px;
568
+ }
569
+
570
+ .settings-session-import-status.is-error {
571
+ color: #ef4444;
572
+ }
573
+
574
+ .settings-session-import-recovery {
575
+ display: grid;
576
+ justify-items: start;
577
+ gap: 14px;
578
+ padding: 16px;
579
+ background: var(--settings-panel);
580
+ border: 1px solid var(--settings-border);
581
+ border-radius: 8px;
582
+ }
583
+
584
+ .settings-session-import-recovery:focus-visible {
585
+ outline: 2px solid var(--settings-focus);
586
+ outline-offset: 2px;
587
+ }
588
+
589
+ .settings-session-import-recovery__copy {
590
+ display: grid;
591
+ gap: 4px;
592
+ }
593
+
594
+ .settings-session-import-recovery__copy strong {
595
+ color: var(--settings-text);
596
+ font-size: 14px;
597
+ }
598
+
599
+ .settings-session-import-recovery__copy p {
600
+ margin: 0;
601
+ color: var(--settings-muted);
602
+ font-size: 13px;
603
+ line-height: 20px;
604
+ }
605
+
606
+ .settings-session-import-recovery__path {
607
+ display: flex;
608
+ align-items: stretch;
609
+ width: 100%;
610
+ min-width: 0;
611
+ overflow: hidden;
612
+ border: 1px solid var(--settings-border);
613
+ border-radius: 6px;
614
+ }
615
+
616
+ .settings-session-import-recovery__path code {
617
+ min-width: 0;
618
+ flex: 1;
619
+ padding: 8px 10px;
620
+ overflow-x: auto;
621
+ color: var(--settings-text);
622
+ font-size: 12px;
623
+ line-height: 20px;
624
+ white-space: nowrap;
625
+ }
626
+
627
+ .settings-session-import-recovery__path .settings-command-button {
628
+ min-height: 0;
629
+ flex: none;
630
+ border-width: 0 0 0 1px;
631
+ border-radius: 0;
632
+ }
633
+
634
+ .settings-session-import-row {
635
+ display: grid;
636
+ grid-template-columns: minmax(0, 1fr) auto;
637
+ align-items: center;
638
+ gap: 20px;
639
+ min-width: 0;
640
+ padding: 16px;
641
+ background: var(--settings-panel);
642
+ border: 1px solid var(--settings-border);
643
+ border-radius: 8px;
644
+ }
645
+
646
+ .settings-session-import-row__copy {
647
+ display: grid;
648
+ min-width: 0;
649
+ gap: 4px;
650
+ }
651
+
652
+ .settings-session-import-row__copy strong {
653
+ overflow: hidden;
654
+ color: var(--settings-text);
655
+ font-size: 14px;
656
+ text-overflow: ellipsis;
657
+ white-space: nowrap;
658
+ }
659
+
660
+ .settings-session-import-row__copy span,
661
+ .settings-session-import-row__cwd {
662
+ overflow: hidden;
663
+ color: var(--settings-muted);
664
+ font-size: 12px;
665
+ line-height: 18px;
666
+ text-overflow: ellipsis;
667
+ white-space: nowrap;
668
+ }
669
+
670
+ .settings-session-import-row__cwd {
671
+ display: block;
672
+ min-width: 0;
673
+ background: transparent;
674
+ }
675
+
676
+ .settings-session-import-row__action {
677
+ display: flex;
678
+ align-items: flex-end;
679
+ flex-direction: column;
680
+ gap: 8px;
681
+ }
682
+
683
+ .settings-session-import-running {
684
+ color: var(--settings-muted);
685
+ font-size: 12px;
686
+ }
687
+
688
+ .settings-preference-row {
689
+ display: flex;
690
+ align-items: center;
691
+ justify-content: space-between;
692
+ gap: 32px;
693
+ min-height: 88px;
694
+ padding: 18px 0;
695
+ border-top: 1px solid var(--settings-divider);
696
+ border-bottom: 1px solid var(--settings-divider);
697
+ }
698
+
699
+ .settings-preference-row__copy {
700
+ display: flex;
701
+ flex: 1 1 auto;
702
+ flex-direction: column;
703
+ min-width: 0;
704
+ gap: 5px;
705
+ }
706
+
707
+ .settings-preference-row__copy strong {
708
+ color: var(--settings-text);
709
+ font-size: 15px;
710
+ font-weight: 600;
711
+ line-height: 22px;
712
+ }
713
+
714
+ .settings-preference-row__copy span {
715
+ max-width: 680px;
716
+ color: var(--settings-muted);
717
+ font-size: 13px;
718
+ line-height: 20px;
719
+ }
720
+
721
+ .settings-preference-switch {
722
+ display: inline-flex;
723
+ align-items: center;
724
+ width: 42px;
725
+ height: 24px;
726
+ flex: none;
727
+ padding: 2px;
728
+ border: 0;
729
+ border-radius: 999px;
730
+ background: var(--settings-surface-hover);
731
+ cursor: pointer;
732
+ transition: background 120ms ease;
733
+ }
734
+
735
+ .settings-preference-switch[aria-checked="true"] {
736
+ justify-content: flex-end;
737
+ background: var(--settings-focus);
738
+ }
739
+
740
+ .settings-preference-switch:focus-visible {
741
+ outline: 2px solid var(--settings-focus);
742
+ outline-offset: 2px;
743
+ }
744
+
745
+ .settings-preference-switch__thumb {
746
+ width: 20px;
747
+ height: 20px;
748
+ border-radius: 50%;
749
+ background: var(--settings-primary-text);
750
+ box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
751
+ }
752
+
753
+ .settings-connection-page-header {
754
+ display: flex;
755
+ align-items: flex-start;
756
+ justify-content: space-between;
757
+ gap: 18px;
758
+ margin-bottom: 18px;
759
+ }
760
+
761
+ .settings-connection-page-header .settings-section-label {
762
+ padding-bottom: 0;
763
+ }
764
+
765
+ .settings-connection-page-header .settings-page-description {
766
+ margin: 5px 0 0;
767
+ }
768
+
769
+ .settings-connections-content,
770
+ .settings-connections-layout,
771
+ .settings-connection-list,
772
+ .settings-connection-rows {
773
+ min-width: 0;
774
+ }
775
+
776
+ .settings-connections-layout {
777
+ display: grid;
778
+ grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
779
+ align-items: start;
780
+ gap: 18px;
781
+ }
782
+
783
+ .settings-connection-list,
784
+ .settings-connection-inspector {
785
+ overflow: hidden;
786
+ background: var(--settings-panel);
787
+ border: 1px solid var(--settings-border);
788
+ border-radius: 10px;
789
+ }
790
+
791
+ .settings-connection-host-strip {
792
+ display: grid;
793
+ grid-template-columns: 30px minmax(0, 1fr) 30px;
794
+ align-items: center;
795
+ min-width: 0;
796
+ gap: 5px;
797
+ padding: 9px 10px;
798
+ border-bottom: 1px solid var(--settings-divider);
799
+ }
800
+
801
+ .settings-connection-host-scroll {
802
+ display: none;
803
+ align-items: center;
804
+ justify-content: center;
805
+ width: 30px;
806
+ height: 34px;
807
+ padding: 0;
808
+ color: var(--settings-muted);
809
+ background: var(--settings-inset);
810
+ border: 1px solid var(--settings-border);
811
+ border-radius: 8px;
812
+ cursor: pointer;
813
+ }
814
+
815
+ .settings-connection-host-strip[data-connection-host-overflow="true"]
816
+ .settings-connection-host-scroll {
817
+ display: inline-flex;
818
+ }
819
+
820
+ .settings-connection-host-strip:not([data-connection-host-overflow="true"]) {
821
+ grid-template-columns: minmax(0, 1fr);
822
+ }
823
+
824
+ .settings-connection-host-scroll:hover:not(:disabled) {
825
+ color: var(--settings-text);
826
+ background: var(--settings-hover);
827
+ }
828
+
829
+ .settings-connection-host-scroll:disabled {
830
+ cursor: default;
831
+ opacity: 0.35;
832
+ }
833
+
834
+ .settings-connection-host-scroll:focus-visible,
835
+ .settings-connection-host-tab:focus-visible,
836
+ .settings-connection-row:focus-visible,
837
+ .settings-connection-install-link:focus-visible,
838
+ .settings-connection-view-error:focus-visible {
839
+ outline: 2px solid var(--settings-focus);
840
+ outline-offset: 1px;
841
+ }
842
+
843
+ .settings-connection-host-tabs {
844
+ display: flex;
845
+ align-items: center;
846
+ min-width: 0;
847
+ gap: 6px;
848
+ overflow-x: auto;
849
+ overflow-y: hidden;
850
+ overscroll-behavior-x: contain;
851
+ scrollbar-width: none;
852
+ scroll-behavior: smooth;
853
+ scroll-snap-type: x proximity;
854
+ touch-action: pan-x;
855
+ }
856
+
857
+ .settings-connection-host-tabs::-webkit-scrollbar {
858
+ display: none;
859
+ }
860
+
861
+ .settings-connection-host-tab {
862
+ display: inline-flex;
863
+ align-items: center;
864
+ height: 30px;
865
+ min-width: max-content;
866
+ flex: none;
867
+ padding: 0 9px;
868
+ color: var(--settings-muted);
869
+ font: inherit;
870
+ font-size: 12px;
871
+ line-height: 18px;
872
+ white-space: nowrap;
873
+ background: var(--settings-inset);
874
+ border: 1px solid var(--settings-border);
875
+ border-radius: 7px;
876
+ cursor: pointer;
877
+ scroll-snap-align: start;
878
+ }
879
+
880
+ .settings-connection-host-tab:hover {
881
+ color: var(--settings-text);
882
+ background: var(--settings-hover);
883
+ }
884
+
885
+ .settings-connection-host-tab[aria-selected="true"] {
886
+ color: var(--settings-text);
887
+ font-weight: 600;
888
+ background: var(--settings-active);
889
+ border-color: var(--settings-border);
890
+ }
891
+
892
+ .settings-connection-table-header,
893
+ .settings-connection-row {
894
+ display: grid;
895
+ grid-template-columns: minmax(160px, 1fr) minmax(92px, auto) 108px;
896
+ align-items: center;
897
+ min-width: 0;
898
+ gap: 10px;
899
+ }
900
+
901
+ .settings-connection-table-header {
902
+ min-height: 30px;
903
+ padding: 0 10px;
904
+ color: var(--settings-muted);
905
+ font-size: 10px;
906
+ font-weight: 600;
907
+ line-height: 16px;
908
+ text-transform: uppercase;
909
+ letter-spacing: 0.06em;
910
+ background: transparent;
911
+ border-bottom: 1px solid var(--settings-divider);
912
+ }
913
+
914
+ .settings-connection-row {
915
+ min-height: 52px;
916
+ padding: 8px 10px;
917
+ cursor: pointer;
918
+ border-bottom: 1px solid var(--settings-divider);
919
+ }
920
+
921
+ .settings-connection-row:last-child {
922
+ border-bottom: 0;
923
+ }
924
+
925
+ .settings-connection-row:hover {
926
+ background: var(--settings-hover);
927
+ }
928
+
929
+ .settings-connection-row[data-connection-selected="true"] {
930
+ background: var(--settings-surface);
931
+ }
932
+
933
+ .settings-connection-row__identity,
934
+ .settings-connection-inspector__identity {
935
+ display: inline-flex;
936
+ align-items: center;
937
+ min-width: 0;
938
+ gap: 8px;
939
+ color: var(--settings-text);
940
+ }
941
+
942
+ .settings-connection-row__identity strong,
943
+ .settings-connection-inspector__identity strong {
944
+ min-width: 0;
945
+ overflow-wrap: anywhere;
946
+ font-size: 12px;
947
+ font-weight: 500;
948
+ line-height: 18px;
949
+ }
950
+
951
+ .settings-connection-row__mark {
952
+ display: inline-flex;
953
+ align-items: center;
954
+ justify-content: center;
955
+ width: 24px;
956
+ height: 24px;
957
+ flex: none;
958
+ color: var(--settings-muted);
959
+ font-size: 10px;
960
+ font-weight: 700;
961
+ background: var(--settings-surface);
962
+ border-radius: 6px;
963
+ }
964
+
965
+ .settings-connection-row__mark--logo {
966
+ color: var(--settings-text);
967
+ background: transparent;
968
+ }
969
+
970
+ .settings-connection-row__mark--logo > img,
971
+ .settings-connection-row__mark--logo > svg {
972
+ display: block;
973
+ max-width: 18px;
974
+ max-height: 18px;
975
+ }
976
+
977
+ .settings-connection-row__status {
978
+ display: inline-flex;
979
+ align-items: center;
980
+ width: fit-content;
981
+ gap: 5px;
982
+ color: var(--settings-muted);
983
+ font-size: 11px;
984
+ font-weight: 500;
985
+ line-height: 18px;
986
+ }
987
+
988
+ .settings-connection-row__status::before {
989
+ width: 6px;
990
+ height: 6px;
991
+ flex: none;
992
+ content: "";
993
+ background: currentColor;
994
+ border-radius: 50%;
995
+ }
996
+
997
+ .settings-connection-row__status[data-connection-tone="ready"] {
998
+ color: var(--settings-success);
999
+ }
1000
+
1001
+ .settings-connection-row__status[data-connection-tone="checking"] {
1002
+ color: var(--settings-warning);
1003
+ }
1004
+
1005
+ .settings-connection-row__status[data-connection-tone="setup"] {
1006
+ color: var(--settings-muted);
1007
+ }
1008
+
1009
+ .settings-connection-row__status[data-connection-tone="setup"]::before {
1010
+ background: transparent;
1011
+ border: 1.5px solid currentColor;
1012
+ }
1013
+
1014
+ .settings-connection-row__status[data-connection-tone="failed"] {
1015
+ color: var(--settings-danger);
1016
+ }
1017
+
1018
+ .settings-connection-row__action {
1019
+ display: flex;
1020
+ align-items: center;
1021
+ justify-content: flex-end;
1022
+ min-width: 0;
1023
+ gap: 4px;
1024
+ }
1025
+
1026
+ .settings-connection-row__handle {
1027
+ display: inline-flex;
1028
+ flex: none;
1029
+ align-items: center;
1030
+ justify-content: center;
1031
+ width: 16px;
1032
+ color: var(--settings-muted);
1033
+ cursor: grab;
1034
+ opacity: 0.6;
1035
+ }
1036
+
1037
+ .settings-connection-row__handle:hover {
1038
+ opacity: 1;
1039
+ }
1040
+
1041
+ .settings-connection-row[draggable="true"] {
1042
+ cursor: grab;
1043
+ }
1044
+
1045
+ .settings-connection-row[data-connection-dragging="true"] {
1046
+ opacity: 0.4;
1047
+ }
1048
+
1049
+ .settings-connection-row[data-connection-drop-indicator="before"] {
1050
+ box-shadow: inset 0 2px 0 0 var(--settings-focus);
1051
+ }
1052
+
1053
+ .settings-connection-row[data-connection-drop-indicator="after"] {
1054
+ box-shadow: inset 0 -2px 0 0 var(--settings-focus);
1055
+ }
1056
+
1057
+ .settings-connection-row__group-toggle {
1058
+ display: inline-flex;
1059
+ flex: none;
1060
+ align-items: center;
1061
+ justify-content: center;
1062
+ width: 26px;
1063
+ height: 26px;
1064
+ color: var(--settings-muted);
1065
+ background: transparent;
1066
+ border: 0;
1067
+ border-radius: 6px;
1068
+ cursor: pointer;
1069
+ }
1070
+
1071
+ .settings-connection-row__group-toggle:hover {
1072
+ color: var(--settings-text);
1073
+ background: var(--settings-hover);
1074
+ }
1075
+
1076
+ .settings-connection-group-divider {
1077
+ padding: 10px 12px 6px;
1078
+ color: var(--settings-muted);
1079
+ font-size: 10px;
1080
+ font-weight: 600;
1081
+ line-height: 16px;
1082
+ text-transform: uppercase;
1083
+ letter-spacing: 0.06em;
1084
+ /* No border-top here: the row immediately above already carries its own
1085
+ border-bottom (it is no longer :last-child once this divider follows
1086
+ it), so adding one here would double the separator line. */
1087
+ }
1088
+
1089
+ .settings-connection-group-more[data-connection-drag-over="true"] {
1090
+ background: rgb(51 156 255 / 8%);
1091
+ }
1092
+
1093
+ .settings-connection-group-hint {
1094
+ display: grid;
1095
+ gap: 3px;
1096
+ margin: 0 12px 12px;
1097
+ padding: 14px 16px;
1098
+ text-align: center;
1099
+ border: 1.5px dashed var(--settings-border);
1100
+ border-radius: 10px;
1101
+ }
1102
+
1103
+ .settings-connection-group-more[data-connection-drag-over="true"] .settings-connection-group-hint {
1104
+ border-color: var(--settings-focus);
1105
+ }
1106
+
1107
+ .settings-connection-group-hint strong {
1108
+ color: var(--settings-text);
1109
+ font-size: 12.5px;
1110
+ font-weight: 500;
1111
+ line-height: 18px;
1112
+ }
1113
+
1114
+ .settings-connection-group-hint span {
1115
+ color: var(--settings-muted);
1116
+ font-size: 12px;
1117
+ line-height: 17px;
1118
+ }
1119
+
1120
+ .settings-connection-group-reset {
1121
+ display: flex;
1122
+ width: 100%;
1123
+ align-items: center;
1124
+ gap: 6px;
1125
+ padding: 10px 12px;
1126
+ color: var(--settings-muted);
1127
+ font: inherit;
1128
+ font-size: 12px;
1129
+ text-align: left;
1130
+ background: transparent;
1131
+ border: 0;
1132
+ border-top: 1px solid var(--settings-divider);
1133
+ cursor: pointer;
1134
+ }
1135
+
1136
+ .settings-connection-group-reset:hover {
1137
+ color: var(--settings-text);
1138
+ background: var(--settings-hover);
1139
+ }
1140
+
1141
+ .settings-connection-install-link {
1142
+ display: inline-flex;
1143
+ align-items: center;
1144
+ justify-content: center;
1145
+ width: 26px;
1146
+ height: 26px;
1147
+ color: var(--settings-focus);
1148
+ text-decoration: none;
1149
+ background: transparent;
1150
+ border: 1px solid transparent;
1151
+ border-radius: 7px;
1152
+ opacity: 0;
1153
+ transition: opacity 120ms ease;
1154
+ }
1155
+
1156
+ .settings-connection-row:hover .settings-connection-install-link,
1157
+ .settings-connection-install-link:focus-visible {
1158
+ opacity: 1;
1159
+ }
1160
+
1161
+ .settings-connection-install-link:hover {
1162
+ color: var(--settings-focus);
1163
+ background: var(--settings-active);
1164
+ border-color: var(--settings-border);
1165
+ }
1166
+
1167
+ .settings-connection-view-error {
1168
+ padding: 4px 7px;
1169
+ color: var(--settings-danger);
1170
+ font: inherit;
1171
+ font-size: 11px;
1172
+ line-height: 18px;
1173
+ background: transparent;
1174
+ border: 0;
1175
+ border-radius: 6px;
1176
+ cursor: pointer;
1177
+ }
1178
+
1179
+ .settings-connection-view-error:hover {
1180
+ color: var(--settings-danger);
1181
+ background: var(--settings-danger-bg);
1182
+ }
1183
+
1184
+ .settings-connection-inspector {
1185
+ position: sticky;
1186
+ top: 18px;
1187
+ }
1188
+
1189
+ .settings-connection-inspector__header {
1190
+ display: flex;
1191
+ align-items: flex-start;
1192
+ justify-content: space-between;
1193
+ min-width: 0;
1194
+ gap: 10px;
1195
+ padding: 12px;
1196
+ border-bottom: 1px solid var(--settings-divider);
1197
+ }
1198
+
1199
+ .settings-connection-inspector__body {
1200
+ display: grid;
1201
+ min-width: 0;
1202
+ gap: 12px;
1203
+ padding: 12px;
1204
+ }
1205
+
1206
+ .settings-connection-install-callout {
1207
+ display: flex;
1208
+ flex-direction: column;
1209
+ gap: 14px;
1210
+ padding: 14px;
1211
+ background: var(--settings-surface);
1212
+ border: 1px solid var(--settings-border);
1213
+ border-radius: 10px;
1214
+ }
1215
+
1216
+ .settings-connection-install-head {
1217
+ display: flex;
1218
+ align-items: flex-start;
1219
+ gap: 12px;
1220
+ min-width: 0;
1221
+ }
1222
+
1223
+ .settings-connection-install-head > div {
1224
+ min-width: 0;
1225
+ flex: 1;
1226
+ }
1227
+
1228
+ .settings-connection-install-callout__icon {
1229
+ display: inline-flex;
1230
+ align-items: center;
1231
+ justify-content: center;
1232
+ width: 32px;
1233
+ height: 32px;
1234
+ flex: none;
1235
+ color: var(--settings-focus);
1236
+ background: var(--settings-active);
1237
+ border-radius: 8px;
1238
+ }
1239
+
1240
+ .settings-connection-install-callout strong,
1241
+ .settings-connection-install-head strong,
1242
+ .settings-connection-error-summary strong,
1243
+ .settings-connection-state-summary strong {
1244
+ display: block;
1245
+ margin: 0 0 4px;
1246
+ color: var(--settings-text);
1247
+ font-size: 13px;
1248
+ font-weight: 600;
1249
+ line-height: 19px;
1250
+ }
1251
+
1252
+ .settings-connection-install-callout p,
1253
+ .settings-connection-install-head p,
1254
+ .settings-connection-error-summary p,
1255
+ .settings-connection-state-summary p,
1256
+ .settings-connection-issue-note {
1257
+ margin: 0;
1258
+ color: var(--settings-muted);
1259
+ font-size: 12px;
1260
+ line-height: 18px;
1261
+ }
1262
+
1263
+ .settings-connection-install-button {
1264
+ width: 100%;
1265
+ }
1266
+
1267
+ .settings-connection-error-summary {
1268
+ padding: 13px 14px;
1269
+ color: var(--settings-danger);
1270
+ background: var(--settings-danger-bg);
1271
+ border: 1px solid var(--settings-danger-border);
1272
+ border-radius: 10px;
1273
+ }
1274
+
1275
+ .settings-connection-error-metadata {
1276
+ display: grid;
1277
+ gap: 7px;
1278
+ padding: 12px;
1279
+ background: var(--settings-inset);
1280
+ border: 1px solid var(--settings-border);
1281
+ border-radius: 9px;
1282
+ }
1283
+
1284
+ .settings-connection-detail-line {
1285
+ display: grid;
1286
+ grid-template-columns: 92px minmax(0, 1fr);
1287
+ gap: 10px;
1288
+ min-width: 0;
1289
+ color: var(--settings-muted);
1290
+ font-size: 10px;
1291
+ line-height: 16px;
1292
+ }
1293
+
1294
+ .settings-connection-detail-line code {
1295
+ min-width: 0;
1296
+ overflow-wrap: anywhere;
1297
+ color: var(--settings-text);
1298
+ font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1299
+ white-space: pre-wrap;
1300
+ }
1301
+
1302
+ .settings-connection-error-log-header {
1303
+ display: flex;
1304
+ align-items: center;
1305
+ justify-content: space-between;
1306
+ gap: 10px;
1307
+ }
1308
+
1309
+ .settings-connection-error-log-header strong {
1310
+ color: var(--settings-text);
1311
+ font-size: 11px;
1312
+ font-weight: 600;
1313
+ }
1314
+
1315
+ .settings-connection-error-log-header .settings-command-button {
1316
+ min-height: 30px;
1317
+ padding: 5px 9px;
1318
+ font-size: 11px;
1319
+ }
1320
+
1321
+ .settings-connection-stderr {
1322
+ max-height: 220px;
1323
+ min-width: 0;
1324
+ margin: 0;
1325
+ padding: 11px;
1326
+ overflow: auto;
1327
+ color: var(--settings-text);
1328
+ font:
1329
+ 10px/16px ui-monospace,
1330
+ "SFMono-Regular",
1331
+ Consolas,
1332
+ "Liberation Mono",
1333
+ monospace;
1334
+ white-space: pre-wrap;
1335
+ overflow-wrap: anywhere;
1336
+ background: var(--settings-inset);
1337
+ border: 1px solid var(--settings-border);
1338
+ border-radius: 9px;
1339
+ }
1340
+
1341
+ .settings-connection-error-actions {
1342
+ display: grid;
1343
+ grid-template-columns: minmax(0, 1fr);
1344
+ gap: 8px;
1345
+ }
1346
+
1347
+ .settings-connection-error-actions .settings-command-button {
1348
+ width: 100%;
1349
+ }
1350
+
1351
+ .settings-connection-issue-note {
1352
+ margin-top: -4px;
1353
+ }
1354
+
1355
+ .settings-connection-state-summary {
1356
+ padding: 14px;
1357
+ background: var(--settings-surface);
1358
+ border: 1px solid var(--settings-border);
1359
+ border-radius: 10px;
1360
+ }
1361
+
1362
+ .settings-empty {
1363
+ display: flex;
1364
+ align-items: center;
1365
+ min-height: 72px;
1366
+ padding: 12px 16px;
1367
+ }
1368
+
1369
+ .settings-empty > div {
1370
+ display: grid;
1371
+ min-width: 0;
1372
+ gap: 2px;
1373
+ }
1374
+
1375
+ .settings-empty strong {
1376
+ color: var(--settings-text);
1377
+ font-size: 13px;
1378
+ font-weight: 500;
1379
+ line-height: 19px;
1380
+ }
1381
+
1382
+ .settings-empty span {
1383
+ color: var(--settings-muted);
1384
+ font-size: 13px;
1385
+ line-height: 19px;
1386
+ }
1387
+
1388
+ .settings-about-panel {
1389
+ display: grid;
1390
+ max-width: 720px;
1391
+ gap: 18px;
1392
+ padding: 24px;
1393
+ background: var(--settings-panel);
1394
+ border: 1px solid var(--settings-border);
1395
+ border-radius: 12px;
1396
+ }
1397
+
1398
+ .settings-collab-toggle {
1399
+ display: flex;
1400
+ align-items: center;
1401
+ justify-content: space-between;
1402
+ gap: 16px;
1403
+ cursor: pointer;
1404
+ }
1405
+
1406
+ .settings-collab-toggle > span {
1407
+ display: grid;
1408
+ gap: 4px;
1409
+ }
1410
+
1411
+ .settings-collab-toggle strong {
1412
+ color: var(--settings-text);
1413
+ font-size: 14px;
1414
+ font-weight: 600;
1415
+ }
1416
+
1417
+ .settings-collab-toggle small {
1418
+ color: var(--settings-muted, var(--settings-text));
1419
+ opacity: 0.72;
1420
+ font-size: 12px;
1421
+ line-height: 18px;
1422
+ }
1423
+
1424
+ .settings-collab-toggle input[type="checkbox"] {
1425
+ flex: none;
1426
+ width: 18px;
1427
+ height: 18px;
1428
+ accent-color: var(--settings-accent, #4c8dff);
1429
+ cursor: pointer;
1430
+ }
1431
+
1432
+ .settings-collab-toggle input[type="checkbox"]:disabled {
1433
+ cursor: not-allowed;
1434
+ opacity: 0.5;
1435
+ }
1436
+
1437
+ .settings-about-product {
1438
+ color: var(--settings-text);
1439
+ font-size: 24px;
1440
+ font-weight: 700;
1441
+ line-height: 32px;
1442
+ }
1443
+
1444
+ .settings-about-tagline {
1445
+ color: var(--settings-text);
1446
+ font-size: 16px;
1447
+ font-weight: 600;
1448
+ line-height: 24px;
1449
+ }
1450
+
1451
+ .settings-about-version-row {
1452
+ display: flex;
1453
+ align-items: center;
1454
+ gap: 12px;
1455
+ margin: 4px 0 8px;
1456
+ }
1457
+
1458
+ .settings-about-version-badge {
1459
+ display: inline-flex;
1460
+ align-items: center;
1461
+ font-size: 13px;
1462
+ font-weight: 600;
1463
+ color: var(--settings-text);
1464
+ background: var(--settings-surface);
1465
+ border: 1px solid var(--settings-border);
1466
+ padding: 4px 10px;
1467
+ border-radius: 6px;
1468
+ }
1469
+
1470
+ .settings-about-copy {
1471
+ display: grid;
1472
+ max-width: 660px;
1473
+ gap: 12px;
1474
+ }
1475
+
1476
+ .settings-about-copy p,
1477
+ .settings-about-repository p {
1478
+ margin: 0;
1479
+ color: var(--settings-muted);
1480
+ font-size: 13px;
1481
+ line-height: 21px;
1482
+ }
1483
+
1484
+ .settings-about-star-callout {
1485
+ margin: 2px 0;
1486
+ color: var(--settings-warning);
1487
+ font-size: 14px;
1488
+ font-weight: 600;
1489
+ line-height: 22px;
1490
+ }
1491
+
1492
+ .settings-about-repository {
1493
+ display: grid;
1494
+ gap: 10px;
1495
+ padding-top: 18px;
1496
+ border-top: 1px solid var(--settings-divider);
1497
+ }
1498
+
1499
+ .settings-about-repository-link {
1500
+ display: flex;
1501
+ align-items: center;
1502
+ width: fit-content;
1503
+ min-width: 0;
1504
+ max-width: 100%;
1505
+ gap: 8px;
1506
+ color: var(--settings-focus);
1507
+ font-size: 13px;
1508
+ font-weight: 600;
1509
+ text-decoration: none;
1510
+ }
1511
+
1512
+ .settings-about-repository-link:hover {
1513
+ text-decoration: underline;
1514
+ }
1515
+
1516
+ .settings-about-repository-link code {
1517
+ min-width: 0;
1518
+ overflow: hidden;
1519
+ color: var(--settings-muted);
1520
+ font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1521
+ font-size: 11px;
1522
+ font-weight: 400;
1523
+ text-overflow: ellipsis;
1524
+ white-space: nowrap;
1525
+ }
1526
+
1527
+ .settings-page-error {
1528
+ padding: 16px;
1529
+ color: var(--settings-text);
1530
+ font-size: 13px;
1531
+ background: var(--settings-panel);
1532
+ border: 1px solid var(--settings-border);
1533
+ border-radius: 20px;
1534
+ }
1535
+
1536
+ .settings-update-metadata {
1537
+ display: grid;
1538
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1539
+ gap: 24px;
1540
+ margin-bottom: 24px;
1541
+ padding: 0 4px 20px;
1542
+ border-bottom: 1px solid var(--settings-divider);
1543
+ }
1544
+
1545
+ .settings-update-metadata__item {
1546
+ display: grid;
1547
+ min-width: 0;
1548
+ gap: 4px;
1549
+ }
1550
+
1551
+ .settings-update-metadata__item span {
1552
+ color: var(--settings-muted);
1553
+ font-size: 12px;
1554
+ line-height: 18px;
1555
+ }
1556
+
1557
+ .settings-update-metadata__item strong {
1558
+ min-width: 0;
1559
+ overflow-wrap: anywhere;
1560
+ color: var(--settings-text);
1561
+ font-size: 15px;
1562
+ font-weight: 500;
1563
+ line-height: 22px;
1564
+ }
1565
+
1566
+ /* The only emphasis on this screen: a latest version newer than the installed one. */
1567
+ .settings-update-metadata__value--newer {
1568
+ color: var(--settings-focus);
1569
+ }
1570
+
1571
+ .settings-update-panel {
1572
+ display: grid;
1573
+ gap: 12px;
1574
+ padding: 20px;
1575
+ color: var(--settings-text);
1576
+ background: var(--settings-panel);
1577
+ border: 1px solid var(--settings-border);
1578
+ border-radius: 8px;
1579
+ }
1580
+
1581
+ .settings-update-panel__head {
1582
+ display: flex;
1583
+ align-items: center;
1584
+ min-width: 0;
1585
+ gap: 8px;
1586
+ }
1587
+
1588
+ .settings-update-panel__head .harnessmix-settings-icon {
1589
+ color: var(--settings-muted);
1590
+ }
1591
+
1592
+ .settings-update-panel[data-update-state="available"] .harnessmix-settings-icon,
1593
+ .settings-update-panel[data-update-state="downloading"] .harnessmix-settings-icon,
1594
+ .settings-update-panel[data-update-state="installing"] .harnessmix-settings-icon,
1595
+ .settings-update-panel[data-update-state="restarting"] .harnessmix-settings-icon {
1596
+ color: var(--settings-focus);
1597
+ }
1598
+
1599
+ .settings-update-panel[data-update-state="current"] .harnessmix-settings-icon {
1600
+ color: var(--settings-success);
1601
+ }
1602
+
1603
+ .settings-update-panel[data-update-state="failed"] .harnessmix-settings-icon,
1604
+ .settings-update-panel[data-update-state="error"] .harnessmix-settings-icon {
1605
+ color: var(--settings-danger);
1606
+ }
1607
+
1608
+ .settings-update-panel__title {
1609
+ min-width: 0;
1610
+ overflow-wrap: anywhere;
1611
+ color: var(--settings-text);
1612
+ font-size: 14px;
1613
+ font-weight: 600;
1614
+ line-height: 22px;
1615
+ }
1616
+
1617
+ .settings-update-summary,
1618
+ .settings-update-error {
1619
+ margin: 0;
1620
+ overflow-wrap: anywhere;
1621
+ font-size: 13px;
1622
+ line-height: 20px;
1623
+ }
1624
+
1625
+ .settings-update-summary {
1626
+ color: var(--settings-muted);
1627
+ }
1628
+
1629
+ .settings-update-error {
1630
+ color: var(--settings-danger);
1631
+ }
1632
+
1633
+ .settings-update-progress {
1634
+ width: 100%;
1635
+ height: 8px;
1636
+ accent-color: var(--settings-focus);
1637
+ }
1638
+
1639
+ .settings-update-progress-detail {
1640
+ color: var(--settings-muted);
1641
+ font-size: 12px;
1642
+ line-height: 18px;
1643
+ }
1644
+
1645
+ /* Release notes scroll with the page; a scroller inside a scroller traps the wheel. */
1646
+ .settings-update-notes-section {
1647
+ min-width: 0;
1648
+ margin-top: 24px;
1649
+ padding-top: 24px;
1650
+ border-top: 1px solid var(--settings-divider);
1651
+ }
1652
+
1653
+ .settings-update-notes-section:empty {
1654
+ display: none;
1655
+ }
1656
+
1657
+ .settings-update-notes {
1658
+ display: grid;
1659
+ min-width: 0;
1660
+ gap: 12px;
1661
+ color: var(--settings-muted);
1662
+ font-size: 14px;
1663
+ line-height: 22px;
1664
+ overflow-wrap: anywhere;
1665
+ }
1666
+
1667
+ .settings-update-notes > :first-child {
1668
+ margin-top: 0;
1669
+ }
1670
+
1671
+ .settings-update-notes > :last-child {
1672
+ margin-bottom: 0;
1673
+ }
1674
+
1675
+ .settings-update-notes h1,
1676
+ .settings-update-notes h2,
1677
+ .settings-update-notes h3,
1678
+ .settings-update-notes h4,
1679
+ .settings-update-notes h5,
1680
+ .settings-update-notes h6 {
1681
+ margin: 6px 0 0;
1682
+ color: var(--settings-text);
1683
+ font-weight: 600;
1684
+ }
1685
+
1686
+ .settings-update-notes h1 {
1687
+ font-size: 18px;
1688
+ line-height: 26px;
1689
+ }
1690
+
1691
+ .settings-update-notes h2 {
1692
+ font-size: 17px;
1693
+ line-height: 24px;
1694
+ }
1695
+
1696
+ .settings-update-notes h3,
1697
+ .settings-update-notes h4,
1698
+ .settings-update-notes h5,
1699
+ .settings-update-notes h6 {
1700
+ font-size: 14px;
1701
+ line-height: 22px;
1702
+ }
1703
+
1704
+ .settings-update-notes p,
1705
+ .settings-update-notes ul,
1706
+ .settings-update-notes ol,
1707
+ .settings-update-notes pre,
1708
+ .settings-update-notes blockquote {
1709
+ margin: 0;
1710
+ }
1711
+
1712
+ .settings-update-notes ul,
1713
+ .settings-update-notes ol {
1714
+ padding-left: 24px;
1715
+ }
1716
+
1717
+ .settings-update-notes li {
1718
+ padding-left: 4px;
1719
+ }
1720
+
1721
+ .settings-update-notes li::marker {
1722
+ color: var(--settings-muted);
1723
+ font-size: 0.85em;
1724
+ }
1725
+
1726
+ .settings-update-notes li + li {
1727
+ margin-top: 14px;
1728
+ }
1729
+
1730
+ .settings-update-notes .release-note-translation {
1731
+ display: block;
1732
+ margin-top: 3px;
1733
+ color: var(--settings-muted);
1734
+ font-size: 13px;
1735
+ line-height: 20px;
1736
+ }
1737
+
1738
+ .settings-update-notes blockquote {
1739
+ padding: 8px 12px;
1740
+ color: var(--settings-muted);
1741
+ border-left: 3px solid var(--settings-focus);
1742
+ background: var(--settings-surface);
1743
+ }
1744
+
1745
+ .settings-update-notes hr {
1746
+ width: 100%;
1747
+ margin: 2px 0;
1748
+ border: 0;
1749
+ border-top: 1px solid var(--settings-divider);
1750
+ }
1751
+
1752
+ .settings-update-notes strong {
1753
+ color: var(--settings-text);
1754
+ font-weight: 600;
1755
+ }
1756
+
1757
+ .settings-update-notes a {
1758
+ color: var(--settings-focus);
1759
+ text-decoration: none;
1760
+ }
1761
+
1762
+ .settings-update-notes a:hover {
1763
+ text-decoration: underline;
1764
+ }
1765
+
1766
+ .settings-update-notes code {
1767
+ font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1768
+ font-size: 12px;
1769
+ }
1770
+
1771
+ .settings-update-notes :not(pre) > code {
1772
+ padding: 1px 5px;
1773
+ background: var(--settings-surface);
1774
+ border-radius: 4px;
1775
+ }
1776
+
1777
+ .settings-update-notes pre {
1778
+ min-width: 0;
1779
+ max-width: 100%;
1780
+ padding: 10px 12px;
1781
+ overflow-x: auto;
1782
+ overflow-y: hidden;
1783
+ background: var(--settings-inset);
1784
+ border-radius: 6px;
1785
+ }
1786
+
1787
+ .settings-update-notes pre code {
1788
+ line-height: 18px;
1789
+ white-space: pre-wrap;
1790
+ }
1791
+
1792
+ /* Manual update sits directly under the status panel, not behind a disclosure:
1793
+ automatic updates can fail for machine-local reasons and this is the way out. */
1794
+ .settings-update-controls {
1795
+ display: grid;
1796
+ min-width: 0;
1797
+ gap: 10px;
1798
+ margin-top: 24px;
1799
+ }
1800
+
1801
+ .settings-update-manual-title {
1802
+ color: var(--settings-text);
1803
+ font-size: 15px;
1804
+ font-weight: 600;
1805
+ line-height: 22px;
1806
+ }
1807
+
1808
+ .settings-update-manual {
1809
+ display: grid;
1810
+ min-width: 0;
1811
+ gap: 8px;
1812
+ }
1813
+
1814
+ .settings-update-manual[hidden] {
1815
+ display: none;
1816
+ }
1817
+
1818
+ .settings-update-manual-description {
1819
+ margin: 0;
1820
+ color: var(--settings-muted);
1821
+ font-size: 12px;
1822
+ line-height: 18px;
1823
+ }
1824
+
1825
+ .settings-update-manual-description.is-fallback {
1826
+ color: var(--settings-danger);
1827
+ }
1828
+
1829
+ .settings-update-command {
1830
+ display: flex;
1831
+ align-items: stretch;
1832
+ min-width: 0;
1833
+ overflow: hidden;
1834
+ border: 1px solid var(--settings-border);
1835
+ border-radius: 6px;
1836
+ }
1837
+
1838
+ .settings-update-command code {
1839
+ min-width: 0;
1840
+ flex: 1;
1841
+ padding: 9px 12px;
1842
+ overflow-x: auto;
1843
+ color: var(--settings-text);
1844
+ font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1845
+ font-size: 12px;
1846
+ line-height: 20px;
1847
+ white-space: nowrap;
1848
+ }
1849
+
1850
+ .settings-update-command__copy {
1851
+ display: inline-flex;
1852
+ align-items: center;
1853
+ flex: none;
1854
+ gap: 6px;
1855
+ padding: 0 12px;
1856
+ color: var(--settings-muted);
1857
+ font-size: 12px;
1858
+ background: transparent;
1859
+ border: 0;
1860
+ border-left: 1px solid var(--settings-border);
1861
+ cursor: pointer;
1862
+ }
1863
+
1864
+ .settings-update-command__copy:hover {
1865
+ color: var(--settings-text);
1866
+ background: var(--settings-hover);
1867
+ }
1868
+
1869
+ .settings-update-command__copy:focus-visible {
1870
+ outline: 2px solid var(--settings-focus);
1871
+ outline-offset: -2px;
1872
+ }
1873
+
1835
1874
  .settings-update-actions {
1836
- display: flex;
1837
- align-items: center;
1838
- min-width: 0;
1839
- gap: 12px;
1840
- flex-wrap: wrap;
1875
+ display: flex;
1876
+ align-items: center;
1877
+ min-width: 0;
1878
+ gap: 12px;
1879
+ flex-wrap: wrap;
1841
1880
  }
1842
1881
 
1843
1882
  .settings-storage-block {
@@ -1845,422 +1884,422 @@ button {
1845
1884
  gap: 12px;
1846
1885
  margin-bottom: 16px;
1847
1886
  }
1848
-
1849
- .settings-command-button,
1850
- .settings-update-link {
1851
- display: inline-flex;
1852
- align-items: center;
1853
- justify-content: center;
1854
- flex: none;
1855
- width: max-content;
1856
- max-width: 100%;
1857
- min-height: 30px;
1858
- gap: 6px;
1859
- padding: 5px 10px;
1860
- white-space: nowrap;
1861
- color: var(--settings-primary-text);
1862
- font: inherit;
1863
- font-size: 12px;
1864
- text-decoration: none;
1865
- background: var(--settings-primary);
1866
- border: 1px solid var(--settings-primary);
1867
- border-radius: 7px;
1868
- cursor: pointer;
1869
- }
1870
-
1871
- .settings-command-button--secondary,
1872
- .settings-update-link {
1873
- color: var(--settings-text);
1874
- background: var(--settings-panel);
1875
- border-color: var(--settings-border);
1876
- }
1877
-
1878
- .settings-command-button:hover:not(:disabled) {
1879
- background: var(--settings-primary-hover);
1880
- border-color: var(--settings-primary-hover);
1881
- }
1882
-
1883
- .settings-command-button--secondary:hover:not(:disabled),
1884
- .settings-update-link:hover {
1885
- background: var(--settings-hover);
1886
- border-color: var(--settings-border);
1887
- }
1888
-
1889
- .settings-command-button--danger {
1890
- color: #f87171;
1891
- }
1892
-
1893
- .settings-command-button--danger:hover:not(:disabled) {
1894
- color: #fecaca;
1895
- background: rgb(127 29 29 / 24%);
1896
- border-color: rgb(248 113 113 / 45%);
1897
- }
1898
-
1899
- .settings-command-button:disabled {
1900
- cursor: default;
1901
- opacity: 0.45;
1902
- }
1903
-
1904
- .settings-command-button:disabled,
1905
- .settings-command-button[aria-disabled="true"] {
1906
- opacity: 0.55;
1907
- cursor: not-allowed;
1908
- filter: none;
1909
- }
1910
-
1911
- .settings-command-button:focus-visible,
1912
- .settings-update-link:focus-visible {
1913
- outline: 2px solid var(--settings-focus);
1914
- outline-offset: 2px;
1915
- }
1916
-
1917
- .harnessmix-settings-icon {
1918
- display: block;
1919
- flex: none;
1920
- stroke: currentColor;
1921
- }
1922
-
1923
- @media (max-width: 720px) {
1924
- .harnessmix-settings-dialog {
1925
- width: calc(100vw - 16px);
1926
- height: calc(100vh - 16px);
1927
- border-radius: 10px;
1928
- }
1929
-
1930
- .settings-layout {
1931
- grid-template-columns: minmax(0, 1fr);
1932
- grid-template-rows: auto minmax(0, 1fr);
1933
- }
1934
-
1935
- .settings-session-import-row {
1936
- grid-template-columns: minmax(0, 1fr);
1937
- }
1938
-
1939
- .settings-session-import-row__action {
1940
- align-items: flex-start;
1941
- }
1942
-
1943
- .settings-sidebar {
1944
- border-right: 0;
1945
- border-bottom: 1px solid var(--settings-border);
1946
- }
1947
-
1948
- .settings-header {
1949
- height: 56px;
1950
- padding-inline: 14px;
1951
- }
1952
-
1953
- .settings-sidebar {
1954
- padding-top: 20px;
1955
- }
1956
-
1957
- .settings-nav {
1958
- flex: none;
1959
- flex-direction: row;
1960
- gap: 4px;
1961
- padding: 7px 8px 8px;
1962
- overflow-x: auto;
1963
- overflow-y: hidden;
1964
- }
1965
-
1966
- .settings-nav-section-label {
1967
- display: none;
1968
- }
1969
-
1970
- .settings-nav-button {
1971
- width: auto;
1972
- min-width: max-content;
1973
- min-height: 34px;
1974
- grid-template-columns: 16px auto;
1975
- border-radius: 10px;
1976
- }
1977
-
1978
- .settings-nav-star-link {
1979
- margin-top: 0;
1980
- }
1981
-
1982
- .settings-page__content {
1983
- width: calc(100% - 40px);
1984
- }
1985
-
1986
- .settings-page__content {
1987
- padding-top: 32px;
1988
- padding-bottom: 32px;
1989
- }
1990
-
1991
- .settings-section-label {
1992
- padding-bottom: 20px;
1993
- font-size: 20px;
1994
- line-height: 26px;
1995
- }
1996
-
1997
- .settings-update-metadata {
1998
- grid-template-columns: minmax(0, 1fr);
1999
- gap: 16px;
2000
- }
2001
-
2002
- .settings-status-row {
2003
- grid-template-columns: minmax(0, 1fr) auto;
2004
- gap: 16px;
2005
- }
2006
-
2007
- .settings-account-header,
2008
- .settings-connection-page-header {
2009
- flex-direction: column;
2010
- }
2011
-
2012
- .settings-account-header > .settings-command-button,
2013
- .settings-connection-page-header > .settings-command-button {
2014
- width: 100%;
2015
- }
2016
-
2017
- .settings-connections-layout {
2018
- grid-template-columns: minmax(0, 1fr);
2019
- }
2020
-
2021
- .settings-connection-inspector {
2022
- position: static;
2023
- }
2024
-
2025
- .settings-status-row__detail {
2026
- grid-column: 1 / -1;
2027
- margin: -8px 0 0 58px;
2028
- }
2029
- }
2030
-
2031
- @media (forced-colors: active) {
2032
- :host {
2033
- --settings-bg: Canvas;
2034
- --settings-sidebar: Canvas;
2035
- --settings-panel: Canvas;
2036
- --settings-surface: Canvas;
2037
- --settings-surface-hover: Highlight;
2038
- --settings-inset: Canvas;
2039
- --settings-text: CanvasText;
2040
- --settings-muted: GrayText;
2041
- --settings-subtle: GrayText;
2042
- --settings-border: ButtonBorder;
2043
- --settings-divider: ButtonBorder;
2044
- --settings-hover: Highlight;
2045
- --settings-active: Highlight;
2046
- --settings-focus: Highlight;
2047
- --settings-primary: ButtonFace;
2048
- --settings-primary-hover: Highlight;
2049
- --settings-primary-text: ButtonText;
2050
- --settings-warning: CanvasText;
2051
- --settings-warning-bg: Canvas;
2052
- --settings-warning-border: ButtonBorder;
2053
- --settings-danger: CanvasText;
2054
- --settings-danger-bg: Canvas;
2055
- --settings-danger-border: ButtonBorder;
2056
- --settings-success: CanvasText;
2057
- }
2058
- }
2059
-
2060
- @media (prefers-reduced-motion: reduce) {
2061
- *,
2062
- *::before,
2063
- *::after {
2064
- scroll-behavior: auto !important;
2065
- transition-duration: 0s !important;
2066
- }
2067
- }
2068
-
2069
- /* Harness Mix: Model Configuration & One-click Install */
2070
- .settings-model-config-panel {
2071
- display: flex;
2072
- flex-direction: column;
2073
- gap: 12px;
2074
- padding: 14px;
2075
- margin-top: 14px;
2076
- border-radius: 8px;
2077
- background: var(--settings-surface);
2078
- border: 1px solid var(--settings-border);
2079
- }
2080
-
2081
- .settings-model-config-head {
2082
- display: flex;
2083
- flex-direction: column;
2084
- gap: 4px;
2085
- }
2086
-
2087
- .settings-model-config-title {
2088
- font-size: 13px;
2089
- font-weight: 600;
2090
- color: var(--settings-text);
2091
- }
2092
-
2093
- .settings-model-config-description {
2094
- font-size: 11px;
2095
- color: var(--settings-muted);
2096
- margin: 0;
2097
- }
2098
-
2099
- .settings-model-config-loading,
2100
- .settings-model-config-empty {
2101
- font-size: 12px;
2102
- color: var(--settings-muted);
2103
- padding: 8px 0;
2104
- }
2105
-
2106
- .settings-model-config-form {
2107
- display: flex;
2108
- flex-direction: column;
2109
- gap: 12px;
2110
- margin-top: 4px;
2111
- }
2112
-
2113
- .settings-model-config-field {
2114
- display: flex;
2115
- flex-direction: column;
2116
- gap: 6px;
2117
- }
2118
-
2119
- .settings-model-config-label {
2120
- font-size: 11px;
2121
- font-weight: 600;
2122
- color: var(--settings-muted);
2123
- text-transform: uppercase;
2124
- letter-spacing: 0.5px;
2125
- }
2126
-
2127
- .settings-model-config-select {
2128
- height: 32px;
2129
- padding: 0 10px;
2130
- border-radius: 6px;
2131
- border: 1px solid var(--settings-border);
2132
- background: var(--settings-panel);
2133
- color: var(--settings-text);
2134
- font-size: 12px;
2135
- outline: none;
2136
- }
2137
-
2138
- .settings-model-config-select:focus {
2139
- border-color: var(--settings-primary);
2140
- }
2141
-
2142
- .settings-model-config-actions {
2143
- display: flex;
2144
- align-items: center;
2145
- flex-wrap: wrap;
2146
- gap: 8px;
2147
- margin-top: 6px;
2148
- }
2149
-
2150
- .settings-model-config-feedback {
2151
- font-size: 12px;
2152
- font-weight: 500;
2153
- }
2154
-
2155
- .settings-feedback-success {
2156
- color: var(--settings-success);
2157
- }
2158
-
2159
- .settings-feedback-error {
2160
- color: var(--settings-danger);
2161
- }
2162
-
2163
- .settings-feedback-info {
2164
- color: var(--settings-primary);
2165
- }
2166
-
2167
- .settings-install-command-box {
2168
- display: flex;
2169
- flex-direction: column;
2170
- gap: 6px;
2171
- min-width: 0;
2172
- margin: 0;
2173
- }
2174
-
2175
- .settings-install-command-label {
2176
- font-size: 11px;
2177
- font-weight: 600;
2178
- color: var(--settings-muted);
2179
- }
2180
-
2181
- .settings-install-command-row {
2182
- display: flex;
2183
- align-items: center;
2184
- background: var(--settings-inset);
2185
- padding: 8px 12px;
2186
- border-radius: 6px;
2187
- border: 1px solid var(--settings-border);
2188
- min-width: 0;
2189
- overflow-x: auto;
2190
- }
2191
-
2192
- .settings-install-command-row code {
2193
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2194
- font-size: 12px;
2195
- line-height: 18px;
2196
- color: var(--settings-text);
2197
- user-select: all;
2198
- white-space: pre-wrap;
2199
- word-break: break-all;
2200
- }
2201
-
2202
- .settings-install-actions {
2203
- display: grid;
2204
- grid-template-columns: minmax(0, 1fr);
2205
- gap: 8px;
2206
- margin-top: 4px;
2207
- }
2208
-
2209
- .settings-install-actions .settings-command-button {
2210
- width: 100%;
2211
- justify-content: center;
2212
- }
2213
-
2214
- .settings-install-feedback {
2215
- font-size: 12px;
2216
- font-weight: 500;
2217
- line-height: 18px;
2218
- margin-top: 2px;
2219
- overflow-wrap: anywhere;
2220
- }
2221
-
2222
- .settings-install-manual-card {
2223
- display: flex;
2224
- flex-direction: column;
2225
- gap: 8px;
2226
- background: var(--settings-inset);
2227
- padding: 12px 14px;
2228
- border-radius: 8px;
2229
- border: 1px solid var(--settings-border);
2230
- margin-top: 6px;
2231
- margin-bottom: 4px;
2232
- }
2233
-
2234
- .settings-install-manual-badge {
2235
- display: inline-flex;
2236
- align-items: center;
2237
- font-size: 11px;
2238
- font-weight: 600;
2239
- color: var(--settings-accent, #10a37f);
2240
- background: var(--settings-accent-subtle, rgba(16, 163, 127, 0.1));
2241
- padding: 2px 8px;
2242
- border-radius: 4px;
2243
- width: fit-content;
2244
- }
2245
-
2246
- .settings-install-manual-notice {
2247
- font-size: 12px;
2248
- line-height: 18px;
2249
- color: var(--settings-text);
2250
- margin: 0;
2251
- }
2252
-
2253
- .settings-install-steps {
2254
- margin: 0;
2255
- padding-left: 18px;
2256
- font-size: 12px;
2257
- line-height: 20px;
2258
- color: var(--settings-muted);
2259
- }
2260
-
2261
- .settings-install-steps li {
2262
- margin-bottom: 2px;
2263
- }
1887
+
1888
+ .settings-command-button,
1889
+ .settings-update-link {
1890
+ display: inline-flex;
1891
+ align-items: center;
1892
+ justify-content: center;
1893
+ flex: none;
1894
+ width: max-content;
1895
+ max-width: 100%;
1896
+ min-height: 30px;
1897
+ gap: 6px;
1898
+ padding: 5px 10px;
1899
+ white-space: nowrap;
1900
+ color: var(--settings-primary-text);
1901
+ font: inherit;
1902
+ font-size: 12px;
1903
+ text-decoration: none;
1904
+ background: var(--settings-primary);
1905
+ border: 1px solid var(--settings-primary);
1906
+ border-radius: 7px;
1907
+ cursor: pointer;
1908
+ }
1909
+
1910
+ .settings-command-button--secondary,
1911
+ .settings-update-link {
1912
+ color: var(--settings-text);
1913
+ background: var(--settings-panel);
1914
+ border-color: var(--settings-border);
1915
+ }
1916
+
1917
+ .settings-command-button:hover:not(:disabled) {
1918
+ background: var(--settings-primary-hover);
1919
+ border-color: var(--settings-primary-hover);
1920
+ }
1921
+
1922
+ .settings-command-button--secondary:hover:not(:disabled),
1923
+ .settings-update-link:hover {
1924
+ background: var(--settings-hover);
1925
+ border-color: var(--settings-border);
1926
+ }
1927
+
1928
+ .settings-command-button--danger {
1929
+ color: #f87171;
1930
+ }
1931
+
1932
+ .settings-command-button--danger:hover:not(:disabled) {
1933
+ color: #fecaca;
1934
+ background: rgb(127 29 29 / 24%);
1935
+ border-color: rgb(248 113 113 / 45%);
1936
+ }
1937
+
1938
+ .settings-command-button:disabled {
1939
+ cursor: default;
1940
+ opacity: 0.45;
1941
+ }
1942
+
1943
+ .settings-command-button:disabled,
1944
+ .settings-command-button[aria-disabled="true"] {
1945
+ opacity: 0.55;
1946
+ cursor: not-allowed;
1947
+ filter: none;
1948
+ }
1949
+
1950
+ .settings-command-button:focus-visible,
1951
+ .settings-update-link:focus-visible {
1952
+ outline: 2px solid var(--settings-focus);
1953
+ outline-offset: 2px;
1954
+ }
1955
+
1956
+ .harnessmix-settings-icon {
1957
+ display: block;
1958
+ flex: none;
1959
+ stroke: currentColor;
1960
+ }
1961
+
1962
+ @media (max-width: 720px) {
1963
+ .harnessmix-settings-dialog {
1964
+ width: calc(100vw - 16px);
1965
+ height: calc(100vh - 16px);
1966
+ border-radius: 10px;
1967
+ }
1968
+
1969
+ .settings-layout {
1970
+ grid-template-columns: minmax(0, 1fr);
1971
+ grid-template-rows: auto minmax(0, 1fr);
1972
+ }
1973
+
1974
+ .settings-session-import-row {
1975
+ grid-template-columns: minmax(0, 1fr);
1976
+ }
1977
+
1978
+ .settings-session-import-row__action {
1979
+ align-items: flex-start;
1980
+ }
1981
+
1982
+ .settings-sidebar {
1983
+ border-right: 0;
1984
+ border-bottom: 1px solid var(--settings-border);
1985
+ }
1986
+
1987
+ .settings-header {
1988
+ height: 56px;
1989
+ padding-inline: 14px;
1990
+ }
1991
+
1992
+ .settings-sidebar {
1993
+ padding-top: 20px;
1994
+ }
1995
+
1996
+ .settings-nav {
1997
+ flex: none;
1998
+ flex-direction: row;
1999
+ gap: 4px;
2000
+ padding: 7px 8px 8px;
2001
+ overflow-x: auto;
2002
+ overflow-y: hidden;
2003
+ }
2004
+
2005
+ .settings-nav-section-label {
2006
+ display: none;
2007
+ }
2008
+
2009
+ .settings-nav-button {
2010
+ width: auto;
2011
+ min-width: max-content;
2012
+ min-height: 34px;
2013
+ grid-template-columns: 16px auto;
2014
+ border-radius: 10px;
2015
+ }
2016
+
2017
+ .settings-nav-star-link {
2018
+ margin-top: 0;
2019
+ }
2020
+
2021
+ .settings-page__content {
2022
+ width: calc(100% - 40px);
2023
+ }
2024
+
2025
+ .settings-page__content {
2026
+ padding-top: 32px;
2027
+ padding-bottom: 32px;
2028
+ }
2029
+
2030
+ .settings-section-label {
2031
+ padding-bottom: 20px;
2032
+ font-size: 20px;
2033
+ line-height: 26px;
2034
+ }
2035
+
2036
+ .settings-update-metadata {
2037
+ grid-template-columns: minmax(0, 1fr);
2038
+ gap: 16px;
2039
+ }
2040
+
2041
+ .settings-status-row {
2042
+ grid-template-columns: minmax(0, 1fr) auto;
2043
+ gap: 16px;
2044
+ }
2045
+
2046
+ .settings-account-header,
2047
+ .settings-connection-page-header {
2048
+ flex-direction: column;
2049
+ }
2050
+
2051
+ .settings-account-header > .settings-command-button,
2052
+ .settings-connection-page-header > .settings-command-button {
2053
+ width: 100%;
2054
+ }
2055
+
2056
+ .settings-connections-layout {
2057
+ grid-template-columns: minmax(0, 1fr);
2058
+ }
2059
+
2060
+ .settings-connection-inspector {
2061
+ position: static;
2062
+ }
2063
+
2064
+ .settings-status-row__detail {
2065
+ grid-column: 1 / -1;
2066
+ margin: -8px 0 0 58px;
2067
+ }
2068
+ }
2069
+
2070
+ @media (forced-colors: active) {
2071
+ :host {
2072
+ --settings-bg: Canvas;
2073
+ --settings-sidebar: Canvas;
2074
+ --settings-panel: Canvas;
2075
+ --settings-surface: Canvas;
2076
+ --settings-surface-hover: Highlight;
2077
+ --settings-inset: Canvas;
2078
+ --settings-text: CanvasText;
2079
+ --settings-muted: GrayText;
2080
+ --settings-subtle: GrayText;
2081
+ --settings-border: ButtonBorder;
2082
+ --settings-divider: ButtonBorder;
2083
+ --settings-hover: Highlight;
2084
+ --settings-active: Highlight;
2085
+ --settings-focus: Highlight;
2086
+ --settings-primary: ButtonFace;
2087
+ --settings-primary-hover: Highlight;
2088
+ --settings-primary-text: ButtonText;
2089
+ --settings-warning: CanvasText;
2090
+ --settings-warning-bg: Canvas;
2091
+ --settings-warning-border: ButtonBorder;
2092
+ --settings-danger: CanvasText;
2093
+ --settings-danger-bg: Canvas;
2094
+ --settings-danger-border: ButtonBorder;
2095
+ --settings-success: CanvasText;
2096
+ }
2097
+ }
2098
+
2099
+ @media (prefers-reduced-motion: reduce) {
2100
+ *,
2101
+ *::before,
2102
+ *::after {
2103
+ scroll-behavior: auto !important;
2104
+ transition-duration: 0s !important;
2105
+ }
2106
+ }
2107
+
2108
+ /* Harness Mix: Model Configuration & One-click Install */
2109
+ .settings-model-config-panel {
2110
+ display: flex;
2111
+ flex-direction: column;
2112
+ gap: 12px;
2113
+ padding: 14px;
2114
+ margin-top: 14px;
2115
+ border-radius: 8px;
2116
+ background: var(--settings-surface);
2117
+ border: 1px solid var(--settings-border);
2118
+ }
2119
+
2120
+ .settings-model-config-head {
2121
+ display: flex;
2122
+ flex-direction: column;
2123
+ gap: 4px;
2124
+ }
2125
+
2126
+ .settings-model-config-title {
2127
+ font-size: 13px;
2128
+ font-weight: 600;
2129
+ color: var(--settings-text);
2130
+ }
2131
+
2132
+ .settings-model-config-description {
2133
+ font-size: 11px;
2134
+ color: var(--settings-muted);
2135
+ margin: 0;
2136
+ }
2137
+
2138
+ .settings-model-config-loading,
2139
+ .settings-model-config-empty {
2140
+ font-size: 12px;
2141
+ color: var(--settings-muted);
2142
+ padding: 8px 0;
2143
+ }
2144
+
2145
+ .settings-model-config-form {
2146
+ display: flex;
2147
+ flex-direction: column;
2148
+ gap: 12px;
2149
+ margin-top: 4px;
2150
+ }
2151
+
2152
+ .settings-model-config-field {
2153
+ display: flex;
2154
+ flex-direction: column;
2155
+ gap: 6px;
2156
+ }
2157
+
2158
+ .settings-model-config-label {
2159
+ font-size: 11px;
2160
+ font-weight: 600;
2161
+ color: var(--settings-muted);
2162
+ text-transform: uppercase;
2163
+ letter-spacing: 0.5px;
2164
+ }
2165
+
2166
+ .settings-model-config-select {
2167
+ height: 32px;
2168
+ padding: 0 10px;
2169
+ border-radius: 6px;
2170
+ border: 1px solid var(--settings-border);
2171
+ background: var(--settings-panel);
2172
+ color: var(--settings-text);
2173
+ font-size: 12px;
2174
+ outline: none;
2175
+ }
2176
+
2177
+ .settings-model-config-select:focus {
2178
+ border-color: var(--settings-primary);
2179
+ }
2180
+
2181
+ .settings-model-config-actions {
2182
+ display: flex;
2183
+ align-items: center;
2184
+ flex-wrap: wrap;
2185
+ gap: 8px;
2186
+ margin-top: 6px;
2187
+ }
2188
+
2189
+ .settings-model-config-feedback {
2190
+ font-size: 12px;
2191
+ font-weight: 500;
2192
+ }
2193
+
2194
+ .settings-feedback-success {
2195
+ color: var(--settings-success);
2196
+ }
2197
+
2198
+ .settings-feedback-error {
2199
+ color: var(--settings-danger);
2200
+ }
2201
+
2202
+ .settings-feedback-info {
2203
+ color: var(--settings-primary);
2204
+ }
2205
+
2206
+ .settings-install-command-box {
2207
+ display: flex;
2208
+ flex-direction: column;
2209
+ gap: 6px;
2210
+ min-width: 0;
2211
+ margin: 0;
2212
+ }
2213
+
2214
+ .settings-install-command-label {
2215
+ font-size: 11px;
2216
+ font-weight: 600;
2217
+ color: var(--settings-muted);
2218
+ }
2219
+
2220
+ .settings-install-command-row {
2221
+ display: flex;
2222
+ align-items: center;
2223
+ background: var(--settings-inset);
2224
+ padding: 8px 12px;
2225
+ border-radius: 6px;
2226
+ border: 1px solid var(--settings-border);
2227
+ min-width: 0;
2228
+ overflow-x: auto;
2229
+ }
2230
+
2231
+ .settings-install-command-row code {
2232
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2233
+ font-size: 12px;
2234
+ line-height: 18px;
2235
+ color: var(--settings-text);
2236
+ user-select: all;
2237
+ white-space: pre-wrap;
2238
+ word-break: break-all;
2239
+ }
2240
+
2241
+ .settings-install-actions {
2242
+ display: grid;
2243
+ grid-template-columns: minmax(0, 1fr);
2244
+ gap: 8px;
2245
+ margin-top: 4px;
2246
+ }
2247
+
2248
+ .settings-install-actions .settings-command-button {
2249
+ width: 100%;
2250
+ justify-content: center;
2251
+ }
2252
+
2253
+ .settings-install-feedback {
2254
+ font-size: 12px;
2255
+ font-weight: 500;
2256
+ line-height: 18px;
2257
+ margin-top: 2px;
2258
+ overflow-wrap: anywhere;
2259
+ }
2260
+
2261
+ .settings-install-manual-card {
2262
+ display: flex;
2263
+ flex-direction: column;
2264
+ gap: 8px;
2265
+ background: var(--settings-inset);
2266
+ padding: 12px 14px;
2267
+ border-radius: 8px;
2268
+ border: 1px solid var(--settings-border);
2269
+ margin-top: 6px;
2270
+ margin-bottom: 4px;
2271
+ }
2272
+
2273
+ .settings-install-manual-badge {
2274
+ display: inline-flex;
2275
+ align-items: center;
2276
+ font-size: 11px;
2277
+ font-weight: 600;
2278
+ color: var(--settings-accent, #10a37f);
2279
+ background: var(--settings-accent-subtle, rgba(16, 163, 127, 0.1));
2280
+ padding: 2px 8px;
2281
+ border-radius: 4px;
2282
+ width: fit-content;
2283
+ }
2284
+
2285
+ .settings-install-manual-notice {
2286
+ font-size: 12px;
2287
+ line-height: 18px;
2288
+ color: var(--settings-text);
2289
+ margin: 0;
2290
+ }
2291
+
2292
+ .settings-install-steps {
2293
+ margin: 0;
2294
+ padding-left: 18px;
2295
+ font-size: 12px;
2296
+ line-height: 20px;
2297
+ color: var(--settings-muted);
2298
+ }
2299
+
2300
+ .settings-install-steps li {
2301
+ margin-bottom: 2px;
2302
+ }
2264
2303
  /* MCP and Skills share native settings controls while keeping separate flows. */
2265
2304
  .settings-integrations-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 12px; }
2266
2305
  .settings-integrations-controls input { flex: 1; min-width: 180px; }