shelldeck 0.0.1__py3-none-any.whl

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 (45) hide show
  1. shelldeck/__init__.py +0 -0
  2. shelldeck/__main__.py +4 -0
  3. shelldeck/addons/__init__.py +1 -0
  4. shelldeck/addons/fast_context.py +1346 -0
  5. shelldeck/auth.py +207 -0
  6. shelldeck/cli.py +587 -0
  7. shelldeck/db.py +794 -0
  8. shelldeck/gitgraph.py +150 -0
  9. shelldeck/integration/bash.sh +27 -0
  10. shelldeck/integration/shelldeck.fish +5 -0
  11. shelldeck/integration/shelldeck.ps1 +35 -0
  12. shelldeck/integration/zsh/.zshenv +6 -0
  13. shelldeck/integration/zsh/.zshrc +10 -0
  14. shelldeck/pty.py +352 -0
  15. shelldeck/runner.py +75 -0
  16. shelldeck/scheduler.py +283 -0
  17. shelldeck/server.py +1216 -0
  18. shelldeck/shells.py +174 -0
  19. shelldeck/static/app.css +2288 -0
  20. shelldeck/static/app.js +1863 -0
  21. shelldeck/static/gitgraph.js +142 -0
  22. shelldeck/static/history.js +172 -0
  23. shelldeck/static/icon-192.png +0 -0
  24. shelldeck/static/icon-32.png +0 -0
  25. shelldeck/static/icon-512.png +0 -0
  26. shelldeck/static/icon.svg +1 -0
  27. shelldeck/static/index.html +102 -0
  28. shelldeck/static/manifest.webmanifest +1 -0
  29. shelldeck/static/monitor.js +143 -0
  30. shelldeck/static/ui.js +316 -0
  31. shelldeck/static/vendor/LICENSE-xterm.txt +21 -0
  32. shelldeck/static/vendor/addon-fit.js +2 -0
  33. shelldeck/static/vendor/addon-search.js +2 -0
  34. shelldeck/static/vendor/addon-serialize.js +2 -0
  35. shelldeck/static/vendor/addon-web-links.js +2 -0
  36. shelldeck/static/vendor/addon-webgl.js +2 -0
  37. shelldeck/static/vendor/xterm.css +218 -0
  38. shelldeck/static/vendor/xterm.js +2 -0
  39. shelldeck/static/views.js +658 -0
  40. shelldeck/stats.py +128 -0
  41. shelldeck-0.0.1.dist-info/METADATA +254 -0
  42. shelldeck-0.0.1.dist-info/RECORD +45 -0
  43. shelldeck-0.0.1.dist-info/WHEEL +4 -0
  44. shelldeck-0.0.1.dist-info/entry_points.txt +3 -0
  45. shelldeck-0.0.1.dist-info/licenses/LICENSE +21 -0
@@ -0,0 +1,2288 @@
1
+ :root,
2
+ [data-theme="dark"] {
3
+ --bg: #0a0a0b;
4
+ --bg-side: #0f0f11;
5
+ --panel: #131316;
6
+ --elev: #18181b;
7
+ --hover: #1f1f23;
8
+ --border: #26262b;
9
+ --border-strong: #34343a;
10
+ --text: #f4f4f5;
11
+ --muted: #a1a1aa;
12
+ --faint: #71717a;
13
+ --accent: #a78bfa;
14
+ --accent-soft: rgba(167, 139, 250, 0.14);
15
+ --primary-bg: #f4f4f5;
16
+ --primary-fg: #0a0a0b;
17
+ --ok: #4ade80;
18
+ --warn: #fbbf24;
19
+ --bad: #f87171;
20
+ --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
21
+ color-scheme: dark;
22
+ }
23
+
24
+ [data-theme="light"] {
25
+ --bg: #ffffff;
26
+ --bg-side: #f7f7f8;
27
+ --panel: #ffffff;
28
+ --elev: #ffffff;
29
+ --hover: #efeff1;
30
+ --border: #e4e4e7;
31
+ --border-strong: #d4d4d8;
32
+ --text: #18181b;
33
+ --muted: #52525b;
34
+ --faint: #8a8a93;
35
+ --accent: #7c3aed;
36
+ --accent-soft: rgba(124, 58, 237, 0.1);
37
+ --primary-bg: #18181b;
38
+ --primary-fg: #fafafa;
39
+ --ok: #16a34a;
40
+ --warn: #d97706;
41
+ --bad: #dc2626;
42
+ --shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
43
+ color-scheme: light;
44
+ }
45
+
46
+ * {
47
+ box-sizing: border-box;
48
+ }
49
+
50
+ html,
51
+ body {
52
+ height: 100%;
53
+ margin: 0;
54
+ background: var(--bg);
55
+ color: var(--text);
56
+ font: 13px/1.45 "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
57
+ -webkit-font-smoothing: antialiased;
58
+ overflow: hidden;
59
+ }
60
+
61
+ button,
62
+ input,
63
+ select,
64
+ textarea {
65
+ font: inherit;
66
+ color: inherit;
67
+ }
68
+
69
+ button {
70
+ cursor: pointer;
71
+ }
72
+
73
+ [hidden] {
74
+ display: none !important;
75
+ }
76
+
77
+ :focus-visible {
78
+ outline: 2px solid var(--accent);
79
+ outline-offset: 1px;
80
+ }
81
+
82
+ kbd {
83
+ font: 10.5px/1 "Cascadia Mono", Consolas, monospace;
84
+ color: var(--faint);
85
+ border: 1px solid var(--border);
86
+ border-radius: 4px;
87
+ padding: 3px 5px;
88
+ white-space: nowrap;
89
+ }
90
+
91
+ i[data-icon] {
92
+ display: inline-flex;
93
+ width: 16px;
94
+ height: 16px;
95
+ flex: none;
96
+ }
97
+
98
+ i[data-icon] svg {
99
+ width: 100%;
100
+ height: 100%;
101
+ }
102
+
103
+ ::-webkit-scrollbar {
104
+ width: 10px;
105
+ height: 10px;
106
+ }
107
+
108
+ ::-webkit-scrollbar-thumb {
109
+ background: var(--border);
110
+ border-radius: 10px;
111
+ border: 2px solid transparent;
112
+ background-clip: padding-box;
113
+ }
114
+
115
+ ::-webkit-scrollbar-thumb:hover {
116
+ background: var(--border-strong);
117
+ background-clip: padding-box;
118
+ border: 2px solid transparent;
119
+ }
120
+
121
+ ::-webkit-scrollbar-track,
122
+ ::-webkit-scrollbar-corner {
123
+ background: transparent;
124
+ }
125
+
126
+ /* ---------------------------------------------------------------- layout */
127
+
128
+ #app {
129
+ --sb-w: 264px;
130
+ transition: grid-template-columns 0.22s ease;
131
+ display: grid;
132
+ grid-template-columns: var(--sb-w) minmax(0, 1fr);
133
+ grid-template-rows: minmax(0, 1fr);
134
+ height: 100vh;
135
+ height: 100dvh;
136
+ }
137
+
138
+ #app.sb-hidden {
139
+ grid-template-columns: 0 minmax(0, 1fr);
140
+ }
141
+
142
+ #app.sb-hidden #sidebar {
143
+ visibility: hidden;
144
+ }
145
+
146
+ #sb-open {
147
+ display: none;
148
+ }
149
+
150
+ #app.sb-hidden #sb-open {
151
+ display: inline-flex;
152
+ }
153
+
154
+ #scrim {
155
+ display: none;
156
+ }
157
+
158
+ /* --------------------------------------------------------------- sidebar */
159
+
160
+ #sidebar {
161
+ position: relative;
162
+ display: flex;
163
+ flex-direction: column;
164
+ min-width: 0;
165
+ background: var(--bg-side);
166
+ border-right: 1px solid var(--border);
167
+ padding: 10px 8px 8px;
168
+ gap: 2px;
169
+ }
170
+
171
+ .sb-head {
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: space-between;
175
+ padding: 2px 4px 10px 6px;
176
+ }
177
+
178
+ .brand {
179
+ display: flex;
180
+ align-items: center;
181
+ gap: 8px;
182
+ font-weight: 600;
183
+ letter-spacing: -0.01em;
184
+ }
185
+
186
+ .sb-new,
187
+ .sb-search,
188
+ .sb-link {
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 8px;
192
+ width: 100%;
193
+ border: 0;
194
+ background: none;
195
+ color: var(--muted);
196
+ padding: 6px 8px;
197
+ border-radius: 6px;
198
+ text-align: left;
199
+ }
200
+
201
+ .sb-new span,
202
+ .sb-search span {
203
+ flex: 1;
204
+ }
205
+
206
+ .sb-new {
207
+ color: var(--text);
208
+ }
209
+
210
+ .sb-new:hover,
211
+ .sb-search:hover,
212
+ .sb-link:hover {
213
+ background: var(--hover);
214
+ color: var(--text);
215
+ }
216
+
217
+ .sb-link.active {
218
+ background: var(--hover);
219
+ color: var(--text);
220
+ }
221
+
222
+ .sb-section {
223
+ display: flex;
224
+ align-items: center;
225
+ justify-content: space-between;
226
+ padding: 14px 4px 4px 8px;
227
+ color: var(--faint);
228
+ font-size: 11px;
229
+ font-weight: 500;
230
+ text-transform: uppercase;
231
+ letter-spacing: 0.06em;
232
+ }
233
+
234
+ .sb-projects {
235
+ flex: 1;
236
+ overflow-y: auto;
237
+ min-height: 60px;
238
+ margin: 0 -4px;
239
+ padding: 0 4px;
240
+ }
241
+
242
+ .proj {
243
+ margin-bottom: 2px;
244
+ border-radius: 6px;
245
+ }
246
+
247
+ .proj.drop-before {
248
+ box-shadow: inset 0 2px 0 var(--accent);
249
+ }
250
+
251
+ .proj-row,
252
+ .sess-row {
253
+ display: flex;
254
+ align-items: center;
255
+ gap: 6px;
256
+ padding: 5px 6px;
257
+ border-radius: 6px;
258
+ color: var(--muted);
259
+ cursor: pointer;
260
+ user-select: none;
261
+ min-height: 28px;
262
+ }
263
+
264
+ .proj-row:hover,
265
+ .sess-row:hover {
266
+ background: var(--hover);
267
+ color: var(--text);
268
+ }
269
+
270
+ .proj-row .name {
271
+ flex: 1;
272
+ min-width: 0;
273
+ overflow: hidden;
274
+ text-overflow: ellipsis;
275
+ white-space: nowrap;
276
+ color: var(--text);
277
+ font-weight: 500;
278
+ }
279
+
280
+ .proj-row .chev {
281
+ display: inline-flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ width: 16px;
285
+ height: 16px;
286
+ flex: none;
287
+ color: var(--faint);
288
+ transform-origin: 50% 50%;
289
+ transition: transform 0.15s ease;
290
+ }
291
+
292
+ .proj-row .chev i[data-icon] {
293
+ width: 14px;
294
+ height: 14px;
295
+ }
296
+
297
+ .proj-dot {
298
+ width: 8px;
299
+ height: 8px;
300
+ border-radius: 3px;
301
+ flex: none;
302
+ }
303
+
304
+ .proj-row .count {
305
+ color: var(--faint);
306
+ font-size: 11px;
307
+ font-variant-numeric: tabular-nums;
308
+ }
309
+
310
+ .proj-row:hover .count {
311
+ display: none;
312
+ }
313
+
314
+ .proj.collapsed .chev {
315
+ transform: rotate(-90deg);
316
+ }
317
+
318
+ .sessions {
319
+ display: grid;
320
+ grid-template-rows: 1fr;
321
+ transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
322
+ }
323
+
324
+ .sessions-inner {
325
+ min-height: 0;
326
+ overflow: hidden;
327
+ }
328
+
329
+ .proj.collapsed .sessions {
330
+ grid-template-rows: 0fr;
331
+ opacity: 0;
332
+ }
333
+
334
+ .proj.missing .name {
335
+ color: var(--faint);
336
+ text-decoration: line-through;
337
+ }
338
+
339
+ .row-actions {
340
+ display: none;
341
+ gap: 2px;
342
+ }
343
+
344
+ .proj-row:hover .row-actions,
345
+ .sess-row:hover .row-actions,
346
+ .row-actions.open {
347
+ display: flex;
348
+ }
349
+
350
+ .sessions {
351
+ padding-left: 14px;
352
+ }
353
+
354
+ .sess-row {
355
+ padding-left: 10px;
356
+ }
357
+
358
+ .sess-row .name {
359
+ flex: 1;
360
+ min-width: 0;
361
+ overflow: hidden;
362
+ text-overflow: ellipsis;
363
+ white-space: nowrap;
364
+ }
365
+
366
+ .sess-row.active {
367
+ background: var(--accent-soft);
368
+ color: var(--text);
369
+ }
370
+
371
+ .sess-row.visible .name {
372
+ color: var(--text);
373
+ }
374
+
375
+ .sess-row.unread .name {
376
+ color: var(--text);
377
+ font-weight: 600;
378
+ }
379
+
380
+ .sess-row.unread .name::after {
381
+ content: "";
382
+ display: inline-block;
383
+ width: 6px;
384
+ height: 6px;
385
+ margin-left: 6px;
386
+ border-radius: 50%;
387
+ background: var(--accent);
388
+ vertical-align: middle;
389
+ }
390
+
391
+ .dot {
392
+ width: 7px;
393
+ height: 7px;
394
+ border-radius: 50%;
395
+ background: var(--faint);
396
+ flex: none;
397
+ }
398
+
399
+ .dot.alive {
400
+ background: var(--ok);
401
+ }
402
+
403
+ .badge {
404
+ font-size: 10.5px;
405
+ color: var(--faint);
406
+ border: 1px solid var(--border);
407
+ border-radius: 4px;
408
+ padding: 0 4px;
409
+ line-height: 16px;
410
+ }
411
+
412
+ .sb-empty {
413
+ color: var(--faint);
414
+ padding: 8px;
415
+ font-size: 12px;
416
+ }
417
+
418
+ .sb-foot {
419
+ border-top: 1px solid var(--border);
420
+ padding-top: 6px;
421
+ margin-top: 6px;
422
+ }
423
+
424
+ .sb-row {
425
+ display: flex;
426
+ align-items: center;
427
+ gap: 6px;
428
+ }
429
+
430
+ .conn {
431
+ width: 8px;
432
+ height: 8px;
433
+ border-radius: 50%;
434
+ background: var(--ok);
435
+ margin-right: 8px;
436
+ flex: none;
437
+ }
438
+
439
+ .conn.down {
440
+ background: var(--bad);
441
+ box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
442
+ }
443
+
444
+ .sb-resize {
445
+ position: absolute;
446
+ top: 0;
447
+ right: -3px;
448
+ width: 6px;
449
+ height: 100%;
450
+ cursor: col-resize;
451
+ z-index: 5;
452
+ }
453
+
454
+ .sb-resize:hover,
455
+ .sb-resize.dragging {
456
+ background: var(--accent);
457
+ opacity: 0.5;
458
+ }
459
+
460
+ /* ------------------------------------------------------------------ main */
461
+
462
+ #main {
463
+ display: flex;
464
+ flex-direction: column;
465
+ min-width: 0;
466
+ min-height: 0;
467
+ }
468
+
469
+ #topbar {
470
+ display: flex;
471
+ align-items: center;
472
+ gap: 8px;
473
+ height: 44px;
474
+ padding: 0 10px 0 14px;
475
+ border-bottom: 1px solid var(--border);
476
+ flex: none;
477
+ }
478
+
479
+ .crumbs {
480
+ flex: 1;
481
+ min-width: 0;
482
+ display: flex;
483
+ align-items: center;
484
+ gap: 6px;
485
+ color: var(--muted);
486
+ white-space: nowrap;
487
+ overflow: hidden;
488
+ }
489
+
490
+ .crumbs b {
491
+ color: var(--text);
492
+ font-weight: 500;
493
+ overflow: hidden;
494
+ text-overflow: ellipsis;
495
+ }
496
+
497
+ .crumbs .sep {
498
+ color: var(--faint);
499
+ }
500
+
501
+ .crumbs .path {
502
+ color: var(--faint);
503
+ overflow: hidden;
504
+ text-overflow: ellipsis;
505
+ font-size: 12px;
506
+ }
507
+
508
+ .top-actions {
509
+ display: flex;
510
+ gap: 2px;
511
+ }
512
+
513
+ .view {
514
+ flex: 1;
515
+ min-height: 0;
516
+ position: relative;
517
+ }
518
+
519
+ .page {
520
+ overflow: auto;
521
+ padding: 24px clamp(14px, 4vw, 40px) 40px;
522
+ }
523
+
524
+ /* --------------------------------------------------------------- buttons */
525
+
526
+ .icon-btn {
527
+ display: inline-flex;
528
+ align-items: center;
529
+ justify-content: center;
530
+ width: 28px;
531
+ height: 28px;
532
+ border: 0;
533
+ border-radius: 6px;
534
+ background: none;
535
+ color: var(--muted);
536
+ flex: none;
537
+ }
538
+
539
+ .icon-btn.sm {
540
+ width: 22px;
541
+ height: 22px;
542
+ }
543
+
544
+ .icon-btn.sm i[data-icon] {
545
+ width: 14px;
546
+ height: 14px;
547
+ }
548
+
549
+ .icon-btn:hover {
550
+ background: var(--hover);
551
+ color: var(--text);
552
+ }
553
+
554
+ .icon-btn.danger:hover {
555
+ color: var(--bad);
556
+ }
557
+
558
+ .btn {
559
+ display: inline-flex;
560
+ align-items: center;
561
+ gap: 6px;
562
+ height: 32px;
563
+ padding: 0 12px;
564
+ border: 1px solid var(--border);
565
+ border-radius: 7px;
566
+ background: var(--elev);
567
+ color: var(--text);
568
+ white-space: nowrap;
569
+ }
570
+
571
+ .btn:hover {
572
+ background: var(--hover);
573
+ }
574
+
575
+ .btn.primary {
576
+ background: var(--primary-bg);
577
+ color: var(--primary-fg);
578
+ border-color: transparent;
579
+ }
580
+
581
+ .btn.primary:hover {
582
+ opacity: 0.9;
583
+ }
584
+
585
+ .btn.danger {
586
+ color: var(--bad);
587
+ }
588
+
589
+ .btn.sm {
590
+ height: 26px;
591
+ padding: 0 8px;
592
+ font-size: 12px;
593
+ }
594
+
595
+ .btn:disabled {
596
+ opacity: 0.5;
597
+ cursor: default;
598
+ }
599
+
600
+ /* ---------------------------------------------------------------- panes */
601
+
602
+ #layout {
603
+ position: absolute;
604
+ inset: 0;
605
+ display: flex;
606
+ padding: 6px;
607
+ overflow: hidden auto;
608
+ }
609
+
610
+ /* no min-size override: splits can't shrink below their panes' minimums, so #layout scrolls */
611
+ .split {
612
+ display: flex;
613
+ flex: 1 1 0;
614
+ min-width: 0;
615
+ min-height: 0;
616
+ }
617
+
618
+ .split.split-col {
619
+ flex-direction: column;
620
+ }
621
+
622
+ .gutter {
623
+ flex: none;
624
+ position: relative;
625
+ z-index: 2;
626
+ }
627
+
628
+ .split.split-row > .gutter {
629
+ width: 6px;
630
+ cursor: col-resize;
631
+ }
632
+
633
+ .split.split-col > .gutter {
634
+ height: 6px;
635
+ cursor: row-resize;
636
+ }
637
+
638
+ .gutter::after {
639
+ content: "";
640
+ position: absolute;
641
+ inset: 0;
642
+ margin: auto;
643
+ border-radius: 2px;
644
+ }
645
+
646
+ .split.split-row > .gutter::after {
647
+ width: 2px;
648
+ }
649
+
650
+ .split.split-col > .gutter::after {
651
+ height: 2px;
652
+ }
653
+
654
+ .gutter:hover::after,
655
+ .gutter.dragging::after {
656
+ background: var(--accent);
657
+ }
658
+
659
+ .pane {
660
+ position: relative;
661
+ display: flex;
662
+ flex-direction: column;
663
+ flex: 1 1 0;
664
+ min-width: 0;
665
+ min-height: var(--pane-h, 340px); /* fixed default height; #layout scrolls past it */
666
+ border: 1px solid var(--border);
667
+ border-radius: 9px;
668
+ background: var(--panel);
669
+ overflow: hidden;
670
+ }
671
+
672
+ .pane.focused {
673
+ border-color: var(--border-strong);
674
+ box-shadow: 0 0 0 1px var(--accent-soft);
675
+ }
676
+
677
+ .pane::before {
678
+ content: "";
679
+ position: absolute;
680
+ inset: 0 0 auto;
681
+ height: 2px;
682
+ background: var(--proj, transparent);
683
+ opacity: 0.55;
684
+ z-index: 1;
685
+ }
686
+
687
+ .pane.focused::before {
688
+ opacity: 1;
689
+ }
690
+
691
+ .free-canvas {
692
+ position: absolute;
693
+ inset: 0;
694
+ overflow: auto;
695
+ isolation: isolate; /* window z-indexes stay below menus */
696
+ }
697
+
698
+ .free-spacer {
699
+ position: absolute;
700
+ width: 1px;
701
+ height: 1px;
702
+ }
703
+
704
+ .pane.floating {
705
+ position: absolute;
706
+ min-width: 280px;
707
+ min-height: 160px;
708
+ box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
709
+ }
710
+
711
+ .pane.floating.dragging {
712
+ will-change: transform;
713
+ transition: none;
714
+ }
715
+
716
+ .pane.floating .pane-head {
717
+ cursor: move;
718
+ touch-action: none;
719
+ }
720
+
721
+ .grip {
722
+ position: absolute;
723
+ right: 0;
724
+ bottom: 0;
725
+ width: 16px;
726
+ height: 16px;
727
+ cursor: nwse-resize;
728
+ z-index: 4;
729
+ touch-action: none;
730
+ background: linear-gradient(135deg, transparent 55%, var(--border-strong) 55%, var(--border-strong) 62%, transparent 62%, transparent 72%, var(--border-strong) 72%, var(--border-strong) 79%, transparent 79%);
731
+ }
732
+
733
+ .pane-head {
734
+ display: flex;
735
+ align-items: center;
736
+ gap: 6px;
737
+ height: 30px;
738
+ padding: 0 4px 0 10px;
739
+ border-bottom: 1px solid var(--border);
740
+ color: var(--muted);
741
+ cursor: grab;
742
+ user-select: none;
743
+ flex: none;
744
+ font-size: 12px;
745
+ }
746
+
747
+ .pane.focused .pane-head {
748
+ color: var(--text);
749
+ }
750
+
751
+ .pane-head .title {
752
+ flex: 1;
753
+ min-width: 0;
754
+ overflow: hidden;
755
+ text-overflow: ellipsis;
756
+ white-space: nowrap;
757
+ }
758
+
759
+ .pane-head .title .cmd {
760
+ margin-left: 8px;
761
+ font-family: "Cascadia Mono", Consolas, monospace;
762
+ font-size: 11.5px;
763
+ color: var(--muted);
764
+ }
765
+
766
+ .pane-head .title .cmd:not(:empty)::before {
767
+ content: "› ";
768
+ color: var(--faint);
769
+ }
770
+
771
+ .pane-head .title small {
772
+ color: var(--faint);
773
+ margin-left: 6px;
774
+ }
775
+
776
+ .pane-body {
777
+ position: relative;
778
+ flex: 1;
779
+ min-width: 0;
780
+ min-height: 0;
781
+ padding: 6px 2px 2px 8px;
782
+ overflow: hidden;
783
+ }
784
+
785
+ .pane-body .xterm {
786
+ height: 100%;
787
+ }
788
+
789
+ .pane-body .xterm-viewport {
790
+ background: transparent !important;
791
+ }
792
+
793
+ .pane-status {
794
+ position: absolute;
795
+ inset: 0;
796
+ display: flex;
797
+ align-items: center;
798
+ justify-content: center;
799
+ color: var(--faint);
800
+ pointer-events: none;
801
+ }
802
+
803
+ .pane-head .title .cmd.fail {
804
+ color: var(--bad);
805
+ }
806
+
807
+ .find-bar {
808
+ position: absolute;
809
+ top: 6px;
810
+ right: 14px;
811
+ z-index: 5;
812
+ display: flex;
813
+ align-items: center;
814
+ gap: 2px;
815
+ padding: 3px 3px 3px 8px;
816
+ border: 1px solid var(--border-strong);
817
+ border-radius: 8px;
818
+ background: var(--panel);
819
+ box-shadow: var(--shadow);
820
+ }
821
+
822
+ .find-bar input {
823
+ width: 180px;
824
+ border: 0;
825
+ outline: 0;
826
+ background: transparent;
827
+ color: var(--text);
828
+ font: inherit;
829
+ font-size: 12.5px;
830
+ }
831
+
832
+ .find-count {
833
+ min-width: 52px;
834
+ color: var(--faint);
835
+ font-size: 11px;
836
+ font-variant-numeric: tabular-nums;
837
+ text-align: right;
838
+ }
839
+
840
+ .drop-hint {
841
+ position: absolute;
842
+ background: var(--accent-soft);
843
+ border: 2px solid var(--accent);
844
+ border-radius: 8px;
845
+ pointer-events: none;
846
+ z-index: 10;
847
+ transition: all 0.08s;
848
+ }
849
+
850
+ .empty {
851
+ position: absolute;
852
+ inset: 0;
853
+ display: flex;
854
+ align-items: center;
855
+ justify-content: center;
856
+ padding: 20px;
857
+ }
858
+
859
+ .empty-card {
860
+ text-align: center;
861
+ max-width: 360px;
862
+ color: var(--muted);
863
+ }
864
+
865
+ .empty-card h2 {
866
+ color: var(--text);
867
+ font-size: 16px;
868
+ font-weight: 600;
869
+ margin: 14px 0 4px;
870
+ }
871
+
872
+ .empty-card .row {
873
+ justify-content: center;
874
+ margin-top: 18px;
875
+ }
876
+
877
+ .row {
878
+ display: flex;
879
+ gap: 8px;
880
+ align-items: center;
881
+ flex-wrap: wrap;
882
+ }
883
+
884
+ /* ---------------------------------------------------------------- pages */
885
+
886
+ .page-head {
887
+ display: flex;
888
+ align-items: flex-end;
889
+ justify-content: space-between;
890
+ gap: 12px;
891
+ flex-wrap: wrap;
892
+ margin-bottom: 18px;
893
+ }
894
+
895
+ .page-head h1 {
896
+ font-size: 18px;
897
+ font-weight: 600;
898
+ margin: 0;
899
+ letter-spacing: -0.01em;
900
+ }
901
+
902
+ .page-head p {
903
+ margin: 4px 0 0;
904
+ color: var(--muted);
905
+ }
906
+
907
+ .list {
908
+ border: 1px solid var(--border);
909
+ border-radius: 10px;
910
+ overflow: hidden;
911
+ }
912
+
913
+ .list-item {
914
+ display: grid;
915
+ grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto auto;
916
+ align-items: center;
917
+ gap: 14px;
918
+ padding: 10px 12px;
919
+ border-top: 1px solid var(--border);
920
+ }
921
+
922
+ .list-item:first-child {
923
+ border-top: 0;
924
+ }
925
+
926
+ .list-item:hover {
927
+ background: var(--hover);
928
+ }
929
+
930
+ .list-item .cmd {
931
+ font-family: "Cascadia Mono", Consolas, monospace;
932
+ font-size: 12px;
933
+ color: var(--muted);
934
+ overflow: hidden;
935
+ text-overflow: ellipsis;
936
+ white-space: nowrap;
937
+ }
938
+
939
+ .list-item .actions {
940
+ display: flex;
941
+ gap: 2px;
942
+ }
943
+
944
+ .muted {
945
+ color: var(--muted);
946
+ }
947
+
948
+ .faint {
949
+ color: var(--faint);
950
+ }
951
+
952
+ .placeholder {
953
+ padding: 36px 16px;
954
+ text-align: center;
955
+ color: var(--faint);
956
+ }
957
+
958
+ .board {
959
+ display: flex;
960
+ gap: 12px;
961
+ overflow-x: auto;
962
+ padding-bottom: 8px;
963
+ align-items: flex-start;
964
+ }
965
+
966
+ .col {
967
+ flex: 1 0 240px;
968
+ max-width: 340px;
969
+ background: var(--bg-side);
970
+ border: 1px solid var(--border);
971
+ border-radius: 10px;
972
+ padding: 8px;
973
+ min-height: 120px;
974
+ }
975
+
976
+ .col.drag-over {
977
+ border-color: var(--accent);
978
+ background: var(--accent-soft);
979
+ }
980
+
981
+ .col-head {
982
+ display: flex;
983
+ align-items: center;
984
+ justify-content: space-between;
985
+ padding: 2px 4px 8px;
986
+ color: var(--muted);
987
+ font-weight: 500;
988
+ }
989
+
990
+ .col-head .count {
991
+ color: var(--faint);
992
+ font-size: 12px;
993
+ }
994
+
995
+ .card {
996
+ background: var(--panel);
997
+ border: 1px solid var(--border);
998
+ border-radius: 8px;
999
+ padding: 9px 10px;
1000
+ margin-bottom: 6px;
1001
+ cursor: pointer;
1002
+ }
1003
+
1004
+ .card:hover {
1005
+ border-color: var(--border-strong);
1006
+ }
1007
+
1008
+ .card.dragging {
1009
+ opacity: 0.4;
1010
+ }
1011
+
1012
+ .card.overdue {
1013
+ border-left: 3px solid var(--bad);
1014
+ }
1015
+
1016
+ .card .title {
1017
+ display: flex;
1018
+ align-items: center;
1019
+ gap: 6px;
1020
+ font-weight: 500;
1021
+ }
1022
+
1023
+ .card .title span:first-child {
1024
+ flex: 1;
1025
+ min-width: 0;
1026
+ }
1027
+
1028
+ .card .meta {
1029
+ color: var(--faint);
1030
+ font-size: 12px;
1031
+ margin-top: 4px;
1032
+ }
1033
+
1034
+ .tag {
1035
+ display: inline-block;
1036
+ font-size: 11px;
1037
+ color: var(--muted);
1038
+ background: var(--hover);
1039
+ border-radius: 4px;
1040
+ padding: 0 5px;
1041
+ margin: 6px 4px 0 0;
1042
+ }
1043
+
1044
+ .prio {
1045
+ font-size: 10.5px;
1046
+ border-radius: 4px;
1047
+ padding: 0 5px;
1048
+ text-transform: uppercase;
1049
+ letter-spacing: 0.04em;
1050
+ background: var(--hover);
1051
+ color: var(--muted);
1052
+ }
1053
+
1054
+ .prio.high {
1055
+ color: var(--warn);
1056
+ }
1057
+
1058
+ .prio.urgent {
1059
+ color: var(--bad);
1060
+ }
1061
+
1062
+ .status-dot {
1063
+ width: 8px;
1064
+ height: 8px;
1065
+ border-radius: 50%;
1066
+ background: var(--faint);
1067
+ flex: none;
1068
+ }
1069
+
1070
+ .status-dot.success {
1071
+ background: var(--ok);
1072
+ }
1073
+
1074
+ .status-dot.failed {
1075
+ background: var(--bad);
1076
+ }
1077
+
1078
+ .status-dot.running {
1079
+ background: var(--warn);
1080
+ }
1081
+
1082
+ .add-card {
1083
+ width: 100%;
1084
+ border: 1px dashed var(--border);
1085
+ background: none;
1086
+ color: var(--faint);
1087
+ border-radius: 8px;
1088
+ padding: 6px;
1089
+ margin-bottom: 6px;
1090
+ }
1091
+
1092
+ .add-card:hover {
1093
+ color: var(--text);
1094
+ border-color: var(--border-strong);
1095
+ }
1096
+
1097
+ /* -------------------------------------------------------- dialogs/menus */
1098
+
1099
+ .dialog-bg {
1100
+ position: fixed;
1101
+ inset: 0;
1102
+ z-index: 50;
1103
+ display: flex;
1104
+ align-items: flex-start;
1105
+ justify-content: center;
1106
+ padding: 10vh 16px 16px;
1107
+ background: rgba(0, 0, 0, 0.55);
1108
+ animation: fade 0.12s;
1109
+ }
1110
+
1111
+ .dialog:focus {
1112
+ outline: none;
1113
+ }
1114
+
1115
+ .dialog {
1116
+ width: min(520px, 100%);
1117
+ max-height: 80vh;
1118
+ display: flex;
1119
+ flex-direction: column;
1120
+ background: var(--elev);
1121
+ border: 1px solid var(--border);
1122
+ border-radius: 12px;
1123
+ box-shadow: var(--shadow);
1124
+ overflow: hidden;
1125
+ }
1126
+
1127
+ .dialog.wide {
1128
+ width: min(760px, 100%);
1129
+ }
1130
+
1131
+ .dialog.git-dialog .dialog-body {
1132
+ padding: 0;
1133
+ }
1134
+
1135
+ .git-head {
1136
+ display: flex;
1137
+ align-items: center;
1138
+ justify-content: space-between;
1139
+ padding: 10px 16px;
1140
+ border-bottom: 1px solid var(--border);
1141
+ }
1142
+
1143
+ .git-rows {
1144
+ max-height: 60vh;
1145
+ overflow: auto;
1146
+ }
1147
+
1148
+ .git-row {
1149
+ display: flex;
1150
+ align-items: center;
1151
+ gap: 8px;
1152
+ height: 28px;
1153
+ padding: 0 12px;
1154
+ cursor: default;
1155
+ }
1156
+
1157
+ .git-row:hover {
1158
+ background: var(--hover);
1159
+ }
1160
+
1161
+ .git-lanes {
1162
+ flex: none;
1163
+ overflow: visible;
1164
+ }
1165
+
1166
+ .git-lanes path {
1167
+ fill: none;
1168
+ stroke-width: 1.8;
1169
+ }
1170
+
1171
+ .git-hash {
1172
+ color: var(--faint);
1173
+ flex: none;
1174
+ }
1175
+
1176
+ .git-subject {
1177
+ flex: 1;
1178
+ min-width: 0;
1179
+ overflow: hidden;
1180
+ text-overflow: ellipsis;
1181
+ white-space: nowrap;
1182
+ }
1183
+
1184
+ .git-refs {
1185
+ display: flex;
1186
+ gap: 4px;
1187
+ flex: none;
1188
+ }
1189
+
1190
+ .git-ref {
1191
+ font-size: 10.5px;
1192
+ padding: 1px 6px;
1193
+ border-radius: 10px;
1194
+ background: var(--hover);
1195
+ border: 1px solid var(--border);
1196
+ cursor: pointer;
1197
+ }
1198
+
1199
+ .git-ref.tag {
1200
+ border-style: dashed;
1201
+ }
1202
+
1203
+ .git-ref:hover {
1204
+ border-color: var(--accent);
1205
+ }
1206
+
1207
+ .git-author {
1208
+ flex: none;
1209
+ width: 110px;
1210
+ overflow: hidden;
1211
+ text-overflow: ellipsis;
1212
+ white-space: nowrap;
1213
+ color: var(--muted);
1214
+ font-size: 12px;
1215
+ }
1216
+
1217
+ .git-date {
1218
+ flex: none;
1219
+ font-size: 11.5px;
1220
+ }
1221
+
1222
+ .dialog-head {
1223
+ display: flex;
1224
+ align-items: center;
1225
+ justify-content: space-between;
1226
+ padding: 14px 16px 0;
1227
+ }
1228
+
1229
+ .dialog-head h2 {
1230
+ font-size: 15px;
1231
+ font-weight: 600;
1232
+ margin: 0;
1233
+ }
1234
+
1235
+ .dialog-body {
1236
+ padding: 14px 16px;
1237
+ overflow: auto;
1238
+ }
1239
+
1240
+ .dialog-foot {
1241
+ display: flex;
1242
+ justify-content: flex-end;
1243
+ gap: 8px;
1244
+ padding: 12px 16px;
1245
+ border-top: 1px solid var(--border);
1246
+ }
1247
+
1248
+ .dialog-foot .spacer {
1249
+ flex: 1;
1250
+ }
1251
+
1252
+ .field {
1253
+ display: flex;
1254
+ flex-direction: column;
1255
+ gap: 5px;
1256
+ margin-bottom: 12px;
1257
+ }
1258
+
1259
+ .field > span {
1260
+ color: var(--muted);
1261
+ font-size: 12px;
1262
+ }
1263
+
1264
+ .field-row {
1265
+ display: grid;
1266
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1267
+ gap: 0 12px;
1268
+ }
1269
+
1270
+ .check {
1271
+ display: flex;
1272
+ align-items: center;
1273
+ gap: 8px;
1274
+ margin-bottom: 12px;
1275
+ }
1276
+
1277
+ input[type="text"],
1278
+ input[type="password"],
1279
+ input[type="number"],
1280
+ input[type="search"],
1281
+ input[type="datetime-local"],
1282
+ select,
1283
+ textarea {
1284
+ width: 100%;
1285
+ height: 32px;
1286
+ padding: 0 10px;
1287
+ border: 1px solid var(--border);
1288
+ border-radius: 7px;
1289
+ background: var(--bg);
1290
+ outline: none;
1291
+ }
1292
+
1293
+ textarea {
1294
+ height: auto;
1295
+ min-height: 72px;
1296
+ padding: 8px 10px;
1297
+ resize: vertical;
1298
+ }
1299
+
1300
+ input:focus,
1301
+ select:focus,
1302
+ textarea:focus {
1303
+ border-color: var(--accent);
1304
+ }
1305
+
1306
+ .mono {
1307
+ font-family: "Cascadia Mono", Consolas, monospace;
1308
+ font-size: 12px;
1309
+ }
1310
+
1311
+ .error {
1312
+ color: var(--bad);
1313
+ font-size: 12px;
1314
+ min-height: 16px;
1315
+ }
1316
+
1317
+ .fs-list {
1318
+ border: 1px solid var(--border);
1319
+ border-radius: 8px;
1320
+ height: 260px;
1321
+ overflow: auto;
1322
+ margin-top: 8px;
1323
+ }
1324
+
1325
+ .fs-item {
1326
+ display: flex;
1327
+ align-items: center;
1328
+ gap: 8px;
1329
+ padding: 6px 10px;
1330
+ cursor: pointer;
1331
+ color: var(--muted);
1332
+ }
1333
+
1334
+ .fs-item:hover {
1335
+ background: var(--hover);
1336
+ color: var(--text);
1337
+ }
1338
+
1339
+ .logs {
1340
+ margin-top: 8px;
1341
+ }
1342
+
1343
+ .log {
1344
+ border: 1px solid var(--border);
1345
+ border-radius: 8px;
1346
+ margin-bottom: 8px;
1347
+ overflow: hidden;
1348
+ }
1349
+
1350
+ .log-head {
1351
+ display: flex;
1352
+ align-items: center;
1353
+ gap: 8px;
1354
+ padding: 6px 10px;
1355
+ background: var(--bg-side);
1356
+ font-size: 12px;
1357
+ color: var(--muted);
1358
+ }
1359
+
1360
+ .log pre {
1361
+ margin: 0;
1362
+ padding: 8px 10px;
1363
+ max-height: 180px;
1364
+ overflow: auto;
1365
+ font: 12px/1.4 "Cascadia Mono", Consolas, monospace;
1366
+ white-space: pre-wrap;
1367
+ word-break: break-all;
1368
+ }
1369
+
1370
+ .menu {
1371
+ position: fixed;
1372
+ z-index: 60;
1373
+ min-width: 190px;
1374
+ padding: 4px;
1375
+ background: var(--elev);
1376
+ border: 1px solid var(--border);
1377
+ border-radius: 9px;
1378
+ box-shadow: var(--shadow);
1379
+ animation: fade 0.08s;
1380
+ }
1381
+
1382
+ .menu button {
1383
+ display: flex;
1384
+ align-items: center;
1385
+ gap: 8px;
1386
+ width: 100%;
1387
+ padding: 6px 8px;
1388
+ border: 0;
1389
+ border-radius: 6px;
1390
+ background: none;
1391
+ text-align: left;
1392
+ }
1393
+
1394
+ .menu button:hover,
1395
+ .menu button.sel {
1396
+ background: var(--hover);
1397
+ }
1398
+
1399
+ .menu button.danger {
1400
+ color: var(--bad);
1401
+ }
1402
+
1403
+ .menu hr {
1404
+ border: 0;
1405
+ border-top: 1px solid var(--border);
1406
+ margin: 4px 0;
1407
+ }
1408
+
1409
+ .menu .menu-label {
1410
+ padding: 4px 8px;
1411
+ color: var(--faint);
1412
+ font-size: 11px;
1413
+ }
1414
+
1415
+ /* ------------------------------------------------------------- palette */
1416
+
1417
+ .palette {
1418
+ width: min(600px, 100%);
1419
+ }
1420
+
1421
+ .palette input {
1422
+ border: 0;
1423
+ border-bottom: 1px solid var(--border);
1424
+ border-radius: 0;
1425
+ height: 46px;
1426
+ padding: 0 16px;
1427
+ background: none;
1428
+ font-size: 14px;
1429
+ }
1430
+
1431
+ .palette-list {
1432
+ overflow: auto;
1433
+ max-height: 55vh;
1434
+ padding: 4px;
1435
+ }
1436
+
1437
+ .palette-item {
1438
+ display: flex;
1439
+ align-items: center;
1440
+ gap: 10px;
1441
+ padding: 8px 10px;
1442
+ border-radius: 7px;
1443
+ color: var(--muted);
1444
+ cursor: pointer;
1445
+ }
1446
+
1447
+ .palette-item .label {
1448
+ flex: 1;
1449
+ min-width: 0;
1450
+ color: var(--text);
1451
+ overflow: hidden;
1452
+ text-overflow: ellipsis;
1453
+ white-space: nowrap;
1454
+ }
1455
+
1456
+ .palette-item .hint {
1457
+ color: var(--faint);
1458
+ font-size: 12px;
1459
+ white-space: nowrap;
1460
+ }
1461
+
1462
+ .palette-item.sel {
1463
+ background: var(--hover);
1464
+ }
1465
+
1466
+ .palette-item input[type="checkbox"] {
1467
+ margin: 0;
1468
+ }
1469
+
1470
+ .palette-group {
1471
+ padding: 8px 10px 4px;
1472
+ color: var(--faint);
1473
+ font-size: 11px;
1474
+ text-transform: uppercase;
1475
+ letter-spacing: 0.06em;
1476
+ }
1477
+
1478
+ .palette-foot {
1479
+ padding: 8px 12px;
1480
+ border-top: 1px solid var(--border);
1481
+ color: var(--faint);
1482
+ font-size: 12px;
1483
+ }
1484
+
1485
+ /* ------------------------------------------------------ toasts + lock */
1486
+
1487
+ #toasts {
1488
+ position: fixed;
1489
+ right: 16px;
1490
+ bottom: 16px;
1491
+ z-index: 70;
1492
+ display: flex;
1493
+ flex-direction: column;
1494
+ gap: 8px;
1495
+ max-width: min(360px, calc(100vw - 32px));
1496
+ }
1497
+
1498
+ .toast {
1499
+ background: var(--elev);
1500
+ border: 1px solid var(--border);
1501
+ border-radius: 10px;
1502
+ box-shadow: var(--shadow);
1503
+ padding: 10px 12px;
1504
+ animation: fade 0.15s;
1505
+ }
1506
+
1507
+ .toast.alarm {
1508
+ border-left: 3px solid var(--warn);
1509
+ }
1510
+
1511
+ .toast.error {
1512
+ border-left: 3px solid var(--bad);
1513
+ }
1514
+
1515
+ .toast .t-title {
1516
+ font-weight: 500;
1517
+ }
1518
+
1519
+ .toast .t-body {
1520
+ color: var(--muted);
1521
+ font-size: 12px;
1522
+ margin-top: 2px;
1523
+ }
1524
+
1525
+ .toast .row {
1526
+ margin-top: 8px;
1527
+ }
1528
+
1529
+ #lock {
1530
+ position: fixed;
1531
+ inset: 0;
1532
+ z-index: 100;
1533
+ display: flex;
1534
+ align-items: center;
1535
+ justify-content: center;
1536
+ background: var(--bg);
1537
+ }
1538
+
1539
+ .lock-card {
1540
+ width: min(320px, 90vw);
1541
+ display: flex;
1542
+ flex-direction: column;
1543
+ align-items: center;
1544
+ gap: 10px;
1545
+ }
1546
+
1547
+ .lock-card h2 {
1548
+ font-size: 15px;
1549
+ font-weight: 600;
1550
+ margin: 6px 0;
1551
+ }
1552
+
1553
+ .lock-card .btn {
1554
+ width: 100%;
1555
+ justify-content: center;
1556
+ }
1557
+
1558
+ .lock-card > input,
1559
+ .lock-card .pw-wrap {
1560
+ width: 100%;
1561
+ }
1562
+
1563
+ .lock-card p {
1564
+ margin: 0;
1565
+ text-align: center;
1566
+ font-size: 12.5px;
1567
+ line-height: 1.5;
1568
+ }
1569
+
1570
+ .lock-card code {
1571
+ font-family: "Cascadia Mono", Consolas, monospace;
1572
+ font-size: 11.5px;
1573
+ }
1574
+
1575
+ .pw-wrap {
1576
+ position: relative;
1577
+ display: block;
1578
+ }
1579
+
1580
+ .pw-wrap input {
1581
+ width: 100%;
1582
+ padding-right: 34px;
1583
+ }
1584
+
1585
+ .pw-eye {
1586
+ position: absolute;
1587
+ top: 50%;
1588
+ right: 4px;
1589
+ display: inline-flex;
1590
+ align-items: center;
1591
+ justify-content: center;
1592
+ width: 26px;
1593
+ height: 26px;
1594
+ transform: translateY(-50%);
1595
+ border: 0;
1596
+ border-radius: 6px;
1597
+ background: transparent;
1598
+ color: var(--faint);
1599
+ cursor: pointer;
1600
+ }
1601
+
1602
+ .pw-eye:hover,
1603
+ .pw-eye[aria-pressed="true"] {
1604
+ color: var(--text);
1605
+ background: var(--hover);
1606
+ }
1607
+
1608
+ .pw-eye svg {
1609
+ width: 15px;
1610
+ height: 15px;
1611
+ }
1612
+
1613
+ @keyframes fade {
1614
+ from {
1615
+ opacity: 0;
1616
+ transform: translateY(-3px);
1617
+ }
1618
+ }
1619
+
1620
+ /* ------------------------------------------------------------ responsive */
1621
+
1622
+ @media (max-width: 900px) {
1623
+ #app,
1624
+ #app.sb-hidden {
1625
+ grid-template-columns: minmax(0, 1fr);
1626
+ }
1627
+
1628
+ #sidebar {
1629
+ position: fixed;
1630
+ z-index: 40;
1631
+ top: 0;
1632
+ bottom: 0;
1633
+ left: 0;
1634
+ width: min(300px, 86vw);
1635
+ transform: translateX(-100%);
1636
+ transition: transform 0.18s ease;
1637
+ box-shadow: var(--shadow);
1638
+ visibility: visible !important;
1639
+ }
1640
+
1641
+ #app.sb-mobile-open #sidebar {
1642
+ transform: none;
1643
+ }
1644
+
1645
+ #app.sb-mobile-open #scrim {
1646
+ display: block;
1647
+ position: fixed;
1648
+ inset: 0;
1649
+ z-index: 35;
1650
+ background: rgba(0, 0, 0, 0.45);
1651
+ }
1652
+
1653
+ #sb-open {
1654
+ display: inline-flex !important;
1655
+ }
1656
+
1657
+ .sb-resize {
1658
+ display: none;
1659
+ }
1660
+
1661
+ .row-actions {
1662
+ display: flex;
1663
+ }
1664
+
1665
+ .list-item {
1666
+ grid-template-columns: minmax(0, 1fr) auto;
1667
+ }
1668
+
1669
+ .list-item .cmd {
1670
+ grid-column: 1 / -1;
1671
+ grid-row: 2;
1672
+ }
1673
+
1674
+ .list-item .scope {
1675
+ display: none;
1676
+ }
1677
+
1678
+ .dialog-bg {
1679
+ padding: 0;
1680
+ align-items: flex-end;
1681
+ }
1682
+
1683
+ .dialog {
1684
+ border-radius: 14px 14px 0 0;
1685
+ max-height: 92vh;
1686
+ }
1687
+
1688
+ .crumbs .path,
1689
+ kbd {
1690
+ display: none;
1691
+ }
1692
+
1693
+ #layout {
1694
+ padding: 0;
1695
+ }
1696
+
1697
+ .pane {
1698
+ border-radius: 0;
1699
+ border: 0;
1700
+ }
1701
+ }
1702
+
1703
+ @media (pointer: coarse) {
1704
+ .proj-row,
1705
+ .sess-row,
1706
+ .sb-link,
1707
+ .menu button,
1708
+ .palette-item {
1709
+ min-height: 40px;
1710
+ }
1711
+
1712
+ .icon-btn {
1713
+ width: 36px;
1714
+ height: 36px;
1715
+ }
1716
+ }
1717
+
1718
+ /* ---------------------------------------------------------------- polish */
1719
+
1720
+ .proj-row,
1721
+ .sess-row,
1722
+ .sb-link,
1723
+ .sb-new,
1724
+ .sb-search,
1725
+ .icon-btn,
1726
+ .btn,
1727
+ .card,
1728
+ .palette-item {
1729
+ transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
1730
+ }
1731
+
1732
+ .sess-row .badge {
1733
+ opacity: 0.7;
1734
+ }
1735
+
1736
+ .sess-row:hover .badge,
1737
+ .sess-row.active .badge {
1738
+ opacity: 1;
1739
+ }
1740
+
1741
+ /* ------------------------------------------------------------ animation */
1742
+
1743
+ .enter {
1744
+ animation: enter 0.22s ease both;
1745
+ }
1746
+
1747
+ .view:not([hidden]) {
1748
+ animation: fade 0.18s ease;
1749
+ }
1750
+
1751
+ .sb-projects .proj {
1752
+ animation: enter 0.25s ease both;
1753
+ animation-delay: calc(var(--i, 0) * 30ms);
1754
+ }
1755
+
1756
+ .sb-projects.settled .proj {
1757
+ animation: none;
1758
+ }
1759
+
1760
+ .icon-btn:active,
1761
+ .btn:active {
1762
+ transform: scale(0.96);
1763
+ }
1764
+
1765
+ .dot.alive {
1766
+ animation: pulse 2.4s ease-in-out infinite;
1767
+ }
1768
+
1769
+ @keyframes enter {
1770
+ from {
1771
+ opacity: 0;
1772
+ transform: translateX(-6px);
1773
+ }
1774
+ }
1775
+
1776
+ @keyframes pane-enter {
1777
+ from {
1778
+ opacity: 0;
1779
+ transform: scale(0.97);
1780
+ }
1781
+ }
1782
+
1783
+ @keyframes pulse {
1784
+ 50% {
1785
+ opacity: 0.45;
1786
+ }
1787
+ }
1788
+
1789
+ /* boot: only transform/opacity animate, so it stays on the compositor at 60fps */
1790
+ #boot {
1791
+ position: fixed;
1792
+ inset: 0;
1793
+ z-index: 200;
1794
+ display: flex;
1795
+ align-items: center;
1796
+ justify-content: center;
1797
+ background: var(--bg);
1798
+ transition: opacity 0.5s ease, visibility 0.5s;
1799
+ will-change: opacity;
1800
+ }
1801
+
1802
+ #boot.done {
1803
+ opacity: 0;
1804
+ visibility: hidden;
1805
+ }
1806
+
1807
+ .boot-mark {
1808
+ display: flex;
1809
+ align-items: center;
1810
+ gap: 14px;
1811
+ animation: boot-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
1812
+ will-change: transform, opacity;
1813
+ }
1814
+
1815
+ #boot.done .boot-mark {
1816
+ transform: scale(1.04);
1817
+ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
1818
+ }
1819
+
1820
+ .boot-mark svg {
1821
+ width: 56px;
1822
+ height: 56px;
1823
+ }
1824
+
1825
+ .boot-mark .chev {
1826
+ animation: chev-in 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
1827
+ transform-box: fill-box;
1828
+ will-change: transform, opacity;
1829
+ }
1830
+
1831
+ .boot-mark .cursor {
1832
+ animation: blink 1.1s 0.8s ease-in-out infinite;
1833
+ will-change: opacity;
1834
+ }
1835
+
1836
+ .boot-name {
1837
+ position: relative;
1838
+ font: 600 26px/1 "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
1839
+ letter-spacing: -0.02em;
1840
+ white-space: nowrap;
1841
+ }
1842
+
1843
+ /* a background-colored cover slides off the name: a smooth "typing" reveal */
1844
+ .boot-cover {
1845
+ position: absolute;
1846
+ inset: -4px -6px;
1847
+ background: var(--bg);
1848
+ transform-origin: right center;
1849
+ animation: reveal 0.9s 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
1850
+ will-change: transform;
1851
+ }
1852
+
1853
+ @keyframes boot-rise {
1854
+ from {
1855
+ opacity: 0;
1856
+ transform: translateY(10px) scale(0.94);
1857
+ }
1858
+ }
1859
+
1860
+ @keyframes chev-in {
1861
+ from {
1862
+ opacity: 0;
1863
+ transform: translateX(-5px);
1864
+ }
1865
+ }
1866
+
1867
+ @keyframes blink {
1868
+ 50% {
1869
+ opacity: 0.15;
1870
+ }
1871
+ }
1872
+
1873
+ @keyframes reveal {
1874
+ to {
1875
+ transform: scaleX(0);
1876
+ }
1877
+ }
1878
+
1879
+ @media (prefers-reduced-motion: reduce) {
1880
+ *,
1881
+ *::before,
1882
+ *::after {
1883
+ animation-duration: 0.01ms !important;
1884
+ animation-delay: 0s !important;
1885
+ transition-duration: 0.01ms !important;
1886
+ }
1887
+ }
1888
+
1889
+ /* ------------------------------------------------------------ resource monitor */
1890
+
1891
+ .sysmon {
1892
+ display: flex;
1893
+ align-items: center;
1894
+ gap: 12px;
1895
+ flex: none;
1896
+ padding: 4px 8px;
1897
+ border: 0;
1898
+ border-radius: 7px;
1899
+ background: transparent;
1900
+ color: var(--muted);
1901
+ font: inherit;
1902
+ font-size: 11px;
1903
+ cursor: pointer;
1904
+ }
1905
+
1906
+ .sysmon:hover {
1907
+ background: var(--hover);
1908
+ }
1909
+
1910
+ .sysmon:empty {
1911
+ display: none;
1912
+ }
1913
+
1914
+ .meter {
1915
+ display: inline-flex;
1916
+ align-items: center;
1917
+ gap: 5px;
1918
+ --lvl: var(--accent);
1919
+ }
1920
+
1921
+ .meter[data-level="mid"],
1922
+ .mon-card[data-level="mid"],
1923
+ .cell-bar[data-level="mid"] {
1924
+ --lvl: var(--warn);
1925
+ }
1926
+
1927
+ .meter[data-level="high"],
1928
+ .mon-card[data-level="high"],
1929
+ .cell-bar[data-level="high"] {
1930
+ --lvl: var(--bad);
1931
+ }
1932
+
1933
+ .m-label {
1934
+ color: var(--faint);
1935
+ font-weight: 600;
1936
+ letter-spacing: 0.04em;
1937
+ }
1938
+
1939
+ .m-bar,
1940
+ .cell-bar {
1941
+ position: relative;
1942
+ width: 36px;
1943
+ height: 5px;
1944
+ border-radius: 3px;
1945
+ background: var(--border);
1946
+ overflow: hidden;
1947
+ }
1948
+
1949
+ .m-bar i,
1950
+ .cell-bar i {
1951
+ position: absolute;
1952
+ inset: 0 auto 0 0;
1953
+ border-radius: 3px;
1954
+ background: var(--lvl, var(--accent));
1955
+ transition: width 0.4s ease;
1956
+ }
1957
+
1958
+ .m-val {
1959
+ min-width: 30px;
1960
+ color: var(--text);
1961
+ font-variant-numeric: tabular-nums;
1962
+ }
1963
+
1964
+ .mon-cards {
1965
+ display: grid;
1966
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
1967
+ gap: 12px;
1968
+ margin-bottom: 16px;
1969
+ }
1970
+
1971
+ .mon-card {
1972
+ position: relative;
1973
+ padding: 14px 16px 0;
1974
+ overflow: hidden;
1975
+ --lvl: var(--accent);
1976
+ }
1977
+
1978
+ .mon-label {
1979
+ color: var(--faint);
1980
+ font-size: 11px;
1981
+ font-weight: 600;
1982
+ letter-spacing: 0.05em;
1983
+ text-transform: uppercase;
1984
+ }
1985
+
1986
+ .mon-value {
1987
+ margin-top: 4px;
1988
+ font-size: 22px;
1989
+ font-weight: 600;
1990
+ font-variant-numeric: tabular-nums;
1991
+ }
1992
+
1993
+ .mon-sub {
1994
+ margin: 2px 0 10px;
1995
+ color: var(--muted);
1996
+ font-size: 12px;
1997
+ white-space: nowrap;
1998
+ overflow: hidden;
1999
+ text-overflow: ellipsis;
2000
+ }
2001
+
2002
+ .spark {
2003
+ display: block;
2004
+ width: calc(100% + 32px);
2005
+ height: 40px;
2006
+ margin: 0 -16px;
2007
+ }
2008
+
2009
+ .spark polyline {
2010
+ fill: none;
2011
+ stroke: var(--lvl);
2012
+ stroke-width: 1.5;
2013
+ vector-effect: non-scaling-stroke;
2014
+ }
2015
+
2016
+ .spark polygon {
2017
+ fill: var(--lvl);
2018
+ opacity: 0.12;
2019
+ }
2020
+
2021
+ .mon-table {
2022
+ padding: 0;
2023
+ overflow-x: auto;
2024
+ }
2025
+
2026
+ .mon-table table {
2027
+ width: 100%;
2028
+ border-collapse: collapse;
2029
+ font-size: 13px;
2030
+ }
2031
+
2032
+ .mon-table th,
2033
+ .mon-table td {
2034
+ padding: 9px 14px;
2035
+ text-align: left;
2036
+ white-space: nowrap;
2037
+ }
2038
+
2039
+ .mon-table th {
2040
+ color: var(--faint);
2041
+ font-size: 11px;
2042
+ font-weight: 600;
2043
+ letter-spacing: 0.04em;
2044
+ text-transform: uppercase;
2045
+ border-bottom: 1px solid var(--border);
2046
+ }
2047
+
2048
+ .mon-table .num {
2049
+ text-align: right;
2050
+ font-variant-numeric: tabular-nums;
2051
+ }
2052
+
2053
+ .mon-table tbody tr[data-sid] {
2054
+ cursor: pointer;
2055
+ }
2056
+
2057
+ .mon-table tbody tr[data-sid]:hover {
2058
+ background: var(--hover);
2059
+ }
2060
+
2061
+ .mon-table tbody tr + tr td {
2062
+ border-top: 1px solid var(--border);
2063
+ }
2064
+
2065
+ .mon-table tfoot td {
2066
+ border-top: 1px solid var(--border-strong);
2067
+ color: var(--muted);
2068
+ font-weight: 600;
2069
+ }
2070
+
2071
+ .mon-table .proj-dot {
2072
+ display: inline-block;
2073
+ margin-right: 8px;
2074
+ vertical-align: middle;
2075
+ }
2076
+
2077
+ .mon-table .cell-bar {
2078
+ display: inline-block;
2079
+ margin-right: 8px;
2080
+ vertical-align: middle;
2081
+ }
2082
+
2083
+ .mon-table .empty-row {
2084
+ padding: 24px 14px;
2085
+ text-align: center;
2086
+ }
2087
+
2088
+ @media (max-width: 900px) {
2089
+ .sysmon .m-bar,
2090
+ .sysmon .meter:nth-child(3) {
2091
+ display: none;
2092
+ }
2093
+ }
2094
+
2095
+ /* ------------------------------------------------------------ ports, history, search-all */
2096
+
2097
+ .pane-head .ports {
2098
+ display: inline-flex;
2099
+ gap: 4px;
2100
+ flex: none;
2101
+ }
2102
+
2103
+ .port-chip {
2104
+ display: inline-flex;
2105
+ align-items: center;
2106
+ gap: 3px;
2107
+ height: 18px;
2108
+ padding: 0 6px;
2109
+ border: 1px solid var(--accent-soft);
2110
+ border-radius: 9px;
2111
+ background: var(--accent-soft);
2112
+ color: var(--accent);
2113
+ font: 600 10.5px/1 "Cascadia Mono", Consolas, monospace;
2114
+ cursor: pointer;
2115
+ }
2116
+
2117
+ .port-chip:hover {
2118
+ border-color: var(--accent);
2119
+ }
2120
+
2121
+ .port-chip i[data-icon],
2122
+ .port-chip svg {
2123
+ width: 10px;
2124
+ height: 10px;
2125
+ }
2126
+
2127
+ .hist-filters {
2128
+ display: flex;
2129
+ flex-wrap: wrap;
2130
+ gap: 10px;
2131
+ margin-bottom: 12px;
2132
+ align-items: center;
2133
+ }
2134
+
2135
+ .hist-filters .hist-q {
2136
+ flex: 1;
2137
+ min-width: 200px;
2138
+ width: auto;
2139
+ }
2140
+
2141
+ .hist-filters .hist-project {
2142
+ width: auto;
2143
+ min-width: 160px;
2144
+ }
2145
+
2146
+ .hist-failed {
2147
+ display: inline-flex;
2148
+ align-items: center;
2149
+ gap: 6px;
2150
+ color: var(--muted);
2151
+ font-size: 13px;
2152
+ }
2153
+
2154
+ .hist-table {
2155
+ padding: 0;
2156
+ overflow-x: auto;
2157
+ }
2158
+
2159
+ .hist-table table {
2160
+ width: 100%;
2161
+ border-collapse: collapse;
2162
+ font-size: 13px;
2163
+ }
2164
+
2165
+ .hist-table td {
2166
+ padding: 8px 12px;
2167
+ vertical-align: top;
2168
+ }
2169
+
2170
+ .hist-table tr + tr td {
2171
+ border-top: 1px solid var(--border);
2172
+ }
2173
+
2174
+ .hist-table tr:hover {
2175
+ background: var(--hover);
2176
+ }
2177
+
2178
+ .hist-table .nowrap {
2179
+ white-space: nowrap;
2180
+ }
2181
+
2182
+ .hist-table .num {
2183
+ text-align: right;
2184
+ font-variant-numeric: tabular-nums;
2185
+ }
2186
+
2187
+ .hist-cmd {
2188
+ width: 100%;
2189
+ max-width: 0;
2190
+ }
2191
+
2192
+ .hist-cmd code,
2193
+ .sa-hit code {
2194
+ display: block;
2195
+ overflow: hidden;
2196
+ text-overflow: ellipsis;
2197
+ white-space: nowrap;
2198
+ font: 12.5px/1.5 "Cascadia Mono", Consolas, monospace;
2199
+ color: var(--text);
2200
+ }
2201
+
2202
+ .hist-meta {
2203
+ margin-top: 2px;
2204
+ color: var(--muted);
2205
+ font-size: 11.5px;
2206
+ overflow: hidden;
2207
+ text-overflow: ellipsis;
2208
+ white-space: nowrap;
2209
+ }
2210
+
2211
+ .hist-meta .proj-dot,
2212
+ .sa-head .proj-dot {
2213
+ display: inline-block;
2214
+ margin-right: 6px;
2215
+ vertical-align: middle;
2216
+ }
2217
+
2218
+ .hist-actions {
2219
+ opacity: 0.35;
2220
+ }
2221
+
2222
+ .hist-table tr:hover .hist-actions,
2223
+ .hist-actions:focus-within {
2224
+ opacity: 1;
2225
+ }
2226
+
2227
+ .exit {
2228
+ padding: 1px 7px;
2229
+ border-radius: 9px;
2230
+ font-size: 11px;
2231
+ font-weight: 600;
2232
+ }
2233
+
2234
+ .exit.ok {
2235
+ color: var(--ok);
2236
+ background: color-mix(in srgb, var(--ok) 14%, transparent);
2237
+ }
2238
+
2239
+ .exit.bad {
2240
+ color: var(--bad);
2241
+ background: color-mix(in srgb, var(--bad) 14%, transparent);
2242
+ }
2243
+
2244
+ .hist-table .empty-row {
2245
+ padding: 24px;
2246
+ text-align: center;
2247
+ }
2248
+
2249
+ .search-all .sa-q {
2250
+ width: 100%;
2251
+ margin-bottom: 12px;
2252
+ }
2253
+
2254
+ .sa-results {
2255
+ max-height: 60vh;
2256
+ overflow: auto;
2257
+ }
2258
+
2259
+ .sa-group + .sa-group {
2260
+ margin-top: 14px;
2261
+ }
2262
+
2263
+ .sa-head {
2264
+ margin-bottom: 4px;
2265
+ font-size: 12.5px;
2266
+ font-weight: 600;
2267
+ }
2268
+
2269
+ .sa-hit {
2270
+ display: block;
2271
+ width: 100%;
2272
+ padding: 4px 8px;
2273
+ border: 0;
2274
+ border-radius: 6px;
2275
+ background: transparent;
2276
+ text-align: left;
2277
+ cursor: pointer;
2278
+ }
2279
+
2280
+ .sa-hit:hover {
2281
+ background: var(--hover);
2282
+ }
2283
+
2284
+ .sa-hit mark {
2285
+ background: var(--accent-soft);
2286
+ color: var(--accent);
2287
+ border-radius: 2px;
2288
+ }