taskplane 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/bin/taskplane.mjs CHANGED
@@ -1,4 +1,4 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
2
2
 
3
3
  /**
4
4
  * Taskplane CLI — Project scaffolding, diagnostics, uninstall, and dashboard launcher.
@@ -1675,6 +1675,47 @@ $historySelect.addEventListener("change", (e) => {
1675
1675
  }
1676
1676
  });
1677
1677
 
1678
+ // ─── Theme Toggle ───────────────────────────────────────────────────────────
1679
+
1680
+ const DARK_LOGO = "taskplane-word-white.svg";
1681
+ const LIGHT_LOGO = "taskplane-word-color.svg";
1682
+
1683
+ function applyTheme(theme) {
1684
+ document.documentElement.setAttribute("data-theme", theme);
1685
+ const logo = document.getElementById("header-logo");
1686
+ const icon = document.getElementById("theme-toggle-icon");
1687
+ if (logo) logo.src = theme === "light" ? LIGHT_LOGO : DARK_LOGO;
1688
+ if (icon) icon.textContent = theme === "dark" ? "☀️" : "🌙";
1689
+ }
1690
+
1691
+ function loadThemePreference() {
1692
+ fetch("/api/preferences")
1693
+ .then(r => r.ok ? r.json() : { theme: "dark" })
1694
+ .then(prefs => applyTheme(prefs.theme || "dark"))
1695
+ .catch(() => applyTheme("dark"));
1696
+ }
1697
+
1698
+ function saveThemePreference(theme) {
1699
+ fetch("/api/preferences", {
1700
+ method: "POST",
1701
+ headers: { "Content-Type": "application/json" },
1702
+ body: JSON.stringify({ theme }),
1703
+ }).catch(() => {}); // best-effort
1704
+ }
1705
+
1706
+ const $themeToggle = document.getElementById("theme-toggle");
1707
+ if ($themeToggle) {
1708
+ $themeToggle.addEventListener("click", () => {
1709
+ const current = document.documentElement.getAttribute("data-theme") || "dark";
1710
+ const next = current === "dark" ? "light" : "dark";
1711
+ applyTheme(next);
1712
+ saveThemePreference(next);
1713
+ });
1714
+ }
1715
+
1716
+ // Load saved preference on startup
1717
+ loadThemePreference();
1718
+
1678
1719
  // ─── Boot ───────────────────────────────────────────────────────────────────
1679
1720
 
1680
1721
  connect();
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Orchestrator Dashboard</title>
6
+ <title>Taskplane Dashboard</title>
7
7
  <link rel="stylesheet" href="style.css">
8
8
 
9
9
  </head>
@@ -12,7 +12,7 @@
12
12
 
13
13
  <!-- Header -->
14
14
  <header class="header" id="header">
15
- <span class="header-title">Orchestrator Dashboard</span>
15
+ <img src="taskplane-word-white.svg" alt="Taskplane" class="header-logo" id="header-logo">
16
16
  <span class="header-badge badge-batch" id="batch-id">—</span>
17
17
  <span class="header-badge badge-phase" id="batch-phase">—</span>
18
18
  <select class="history-select" id="history-select" title="View past batch runs">
@@ -23,6 +23,9 @@
23
23
  </select>
24
24
  <div class="header-meta">
25
25
  <span id="last-update">—</span>
26
+ <button class="theme-toggle" id="theme-toggle" title="Toggle light/dark mode" aria-label="Toggle theme">
27
+ <span class="theme-toggle-icon" id="theme-toggle-icon">☀️</span>
28
+ </button>
26
29
  <span class="connection-dot disconnected" id="conn-dot" title="SSE connection"></span>
27
30
  </div>
28
31
  </header>
@@ -9,6 +9,16 @@
9
9
  }
10
10
 
11
11
  :root {
12
+ --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Consolas, monospace;
13
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
14
+ --radius: 8px;
15
+ --radius-sm: 4px;
16
+ }
17
+
18
+ /* ─── Dark Theme (default) ─────────────────────────────────────────────── */
19
+
20
+ :root,
21
+ [data-theme="dark"] {
12
22
  --bg: #0d1117;
13
23
  --bg-surface: #161b22;
14
24
  --bg-surface-hover: #1c2129;
@@ -28,10 +38,82 @@
28
38
  --yellow-dim: #9e6a03;
29
39
  --cyan: #39d2c0;
30
40
  --magenta: #bc8cff;
31
- --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Consolas, monospace;
32
- --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
33
- --radius: 8px;
34
- --radius-sm: 4px;
41
+ --phase-on-color: #fff;
42
+ --phase-merging-bg: #1a3a5c;
43
+ --wave-seg-border: rgba(0,0,0,0.3);
44
+ --wave-label-color: rgba(255,255,255,0.85);
45
+ --wave-label-shadow: 0 1px 2px rgba(0,0,0,0.6);
46
+ --wave-future-bg: rgba(139,148,158,0.25);
47
+ --wave-future-label: rgba(255,255,255,0.55);
48
+ --badge-succeeded-bg: rgba(63,185,80,0.15);
49
+ --badge-running-bg: rgba(88,166,255,0.15);
50
+ --badge-failed-bg: rgba(248,81,73,0.15);
51
+ --badge-stalled-bg: rgba(210,153,34,0.15);
52
+ --badge-pending-bg: rgba(139,148,158,0.1);
53
+ --badge-skipped-bg: rgba(139,148,158,0.1);
54
+ --accent-tint-bg: rgba(88,166,255,0.08);
55
+ --accent-tint-hover: rgba(88,166,255,0.18);
56
+ --accent-tint-active: rgba(88,166,255,0.25);
57
+ --accent-tint-subtle: rgba(88,166,255,0.06);
58
+ --green-tint-bg: rgba(63,185,80,0.06);
59
+ --green-tint-active: rgba(63,185,80,0.12);
60
+ --yellow-tint-active: rgba(210,153,34,0.25);
61
+ --magenta-tint-bg: rgba(188,140,255,0.12);
62
+ --magenta-tint: rgba(188,140,255,0.15);
63
+ --border-table-subtle: rgba(48,54,61,0.3);
64
+ --scrollbar-thumb: var(--border);
65
+ --scrollbar-thumb-hover: var(--text-faint);
66
+ color-scheme: dark;
67
+ }
68
+
69
+ /* ─── Light Theme ──────────────────────────────────────────────────────── */
70
+
71
+ [data-theme="light"] {
72
+ --bg: #ffffff;
73
+ --bg-surface: #f6f8fa;
74
+ --bg-surface-hover: #eaeef2;
75
+ --bg-inset: #f0f2f5;
76
+ --border: #d0d7de;
77
+ --border-subtle: #e1e4e8;
78
+ --text: #1f2328;
79
+ --text-muted: #656d76;
80
+ --text-faint: #8c959f;
81
+ --accent: #0969da;
82
+ --accent-dim: #0550ae;
83
+ --green: #1a7f37;
84
+ --green-dim: #116329;
85
+ --red: #cf222e;
86
+ --red-dim: #a40e26;
87
+ --yellow: #9a6700;
88
+ --yellow-dim: #7d4e00;
89
+ --cyan: #1b7c83;
90
+ --magenta: #8250df;
91
+ --phase-on-color: #fff;
92
+ --phase-merging-bg: #ddf4ff;
93
+ --wave-seg-border: rgba(0,0,0,0.08);
94
+ --wave-label-color: rgba(0,0,0,0.7);
95
+ --wave-label-shadow: none;
96
+ --wave-future-bg: rgba(139,148,158,0.15);
97
+ --wave-future-label: rgba(0,0,0,0.4);
98
+ --badge-succeeded-bg: rgba(26,127,55,0.1);
99
+ --badge-running-bg: rgba(9,105,218,0.1);
100
+ --badge-failed-bg: rgba(207,34,46,0.1);
101
+ --badge-stalled-bg: rgba(154,103,0,0.1);
102
+ --badge-pending-bg: rgba(140,149,159,0.08);
103
+ --badge-skipped-bg: rgba(140,149,159,0.08);
104
+ --accent-tint-bg: rgba(9,105,218,0.06);
105
+ --accent-tint-hover: rgba(9,105,218,0.12);
106
+ --accent-tint-active: rgba(9,105,218,0.18);
107
+ --accent-tint-subtle: rgba(9,105,218,0.04);
108
+ --green-tint-bg: rgba(26,127,55,0.06);
109
+ --green-tint-active: rgba(26,127,55,0.1);
110
+ --yellow-tint-active: rgba(154,103,0,0.15);
111
+ --magenta-tint-bg: rgba(130,80,223,0.08);
112
+ --magenta-tint: rgba(130,80,223,0.1);
113
+ --border-table-subtle: rgba(208,215,222,0.5);
114
+ --scrollbar-thumb: #c1c8cf;
115
+ --scrollbar-thumb-hover: #8c959f;
116
+ color-scheme: light;
35
117
  }
36
118
 
37
119
  html { font-size: 14px; }
@@ -42,6 +124,29 @@ body {
42
124
  color: var(--text);
43
125
  min-height: 100vh;
44
126
  overflow-x: hidden;
127
+ transition: background-color 0.3s ease, color 0.3s ease;
128
+ }
129
+
130
+ /* Smooth theme transition for key elements */
131
+ .panel,
132
+ .summary-bar,
133
+ .header-badge,
134
+ .status-badge,
135
+ .count-chip,
136
+ .wave-chip,
137
+ .tmux-view-btn,
138
+ .tmux-cmd,
139
+ .repo-filter-select,
140
+ .history-select,
141
+ .task-row,
142
+ .lane-header,
143
+ .conv-tool-call,
144
+ .conv-tool-result,
145
+ .copy-toast,
146
+ .auto-scroll-label input[type="checkbox"],
147
+ .terminal-close,
148
+ .stat-card {
149
+ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
45
150
  }
46
151
 
47
152
  /* ─── Layout Shell ─────────────────────────────────────────────────────── */
@@ -72,6 +177,13 @@ body {
72
177
  white-space: nowrap;
73
178
  }
74
179
 
180
+ .header-logo {
181
+ height: 1.6rem;
182
+ width: auto;
183
+ vertical-align: middle;
184
+ opacity: 0.95;
185
+ }
186
+
75
187
  .header-badge {
76
188
  display: inline-flex;
77
189
  align-items: center;
@@ -96,13 +208,13 @@ body {
96
208
  font-size: 0.7rem;
97
209
  }
98
210
 
99
- .phase-executing { background: var(--accent-dim); color: #fff; }
100
- .phase-merging { background: #1a3a5c; color: var(--accent); }
101
- .phase-completed { background: var(--green-dim); color: #fff; }
102
- .phase-paused { background: var(--yellow-dim); color: #fff; }
211
+ .phase-executing { background: var(--accent-dim); color: var(--phase-on-color); }
212
+ .phase-merging { background: var(--phase-merging-bg); color: var(--accent); }
213
+ .phase-completed { background: var(--green-dim); color: var(--phase-on-color); }
214
+ .phase-paused { background: var(--yellow-dim); color: var(--phase-on-color); }
103
215
  .phase-stopped,
104
- .phase-aborted { background: var(--red-dim); color: #fff; }
105
- .phase-failed { background: var(--red-dim); color: #fff; }
216
+ .phase-aborted { background: var(--red-dim); color: var(--phase-on-color); }
217
+ .phase-failed { background: var(--red-dim); color: var(--phase-on-color); }
106
218
 
107
219
  .header-meta {
108
220
  margin-left: auto;
@@ -123,6 +235,30 @@ body {
123
235
  .connection-dot.connected { background: var(--green); }
124
236
  .connection-dot.disconnected { background: var(--red); }
125
237
 
238
+ /* ─── Theme Toggle ─────────────────────────────────────────────────────── */
239
+
240
+ .theme-toggle {
241
+ background: none;
242
+ border: 1px solid var(--border);
243
+ border-radius: var(--radius-sm);
244
+ cursor: pointer;
245
+ padding: 3px 8px;
246
+ font-size: 0.9rem;
247
+ line-height: 1;
248
+ color: var(--text-muted);
249
+ transition: background-color 0.2s, border-color 0.2s, color 0.2s;
250
+ }
251
+
252
+ .theme-toggle:hover {
253
+ background: var(--bg-surface-hover);
254
+ border-color: var(--accent-dim);
255
+ color: var(--accent);
256
+ }
257
+
258
+ .theme-toggle-icon {
259
+ display: inline-block;
260
+ }
261
+
126
262
  /* ─── Summary Bar ──────────────────────────────────────────────────────── */
127
263
 
128
264
  .summary-bar {
@@ -158,7 +294,7 @@ body {
158
294
  position: relative;
159
295
  height: 100%;
160
296
  overflow: hidden;
161
- border-right: 1px solid var(--bg-deeper, rgba(0,0,0,0.3));
297
+ border-right: 1px solid var(--wave-seg-border);
162
298
  }
163
299
  .wave-seg:last-child { border-right: none; }
164
300
 
@@ -182,9 +318,9 @@ body {
182
318
  font-size: 0.6rem;
183
319
  font-weight: 700;
184
320
  letter-spacing: 0.03em;
185
- color: rgba(255,255,255,0.85);
321
+ color: var(--wave-label-color);
186
322
  pointer-events: none;
187
- text-shadow: 0 1px 2px rgba(0,0,0,0.6);
323
+ text-shadow: var(--wave-label-shadow);
188
324
  }
189
325
 
190
326
  /* Highlight the active wave segment */
@@ -192,10 +328,10 @@ body {
192
328
 
193
329
  /* Future waves: visible but subdued */
194
330
  .wave-seg-future {
195
- background: rgba(139,148,158,0.25);
331
+ background: var(--wave-future-bg);
196
332
  }
197
333
  .wave-seg-future .wave-seg-label {
198
- color: rgba(255,255,255,0.55);
334
+ color: var(--wave-future-label);
199
335
  text-shadow: none;
200
336
  }
201
337
 
@@ -237,11 +373,11 @@ body {
237
373
  .count-icon { font-size: 0.85em; opacity: 0.9; }
238
374
  .count-total { color: var(--text-faint); margin-left: 2px; }
239
375
 
240
- .count-succeeded { background: rgba(63,185,80,0.15); color: var(--green); }
241
- .count-running { background: rgba(88,166,255,0.15); color: var(--accent); }
242
- .count-failed { background: rgba(248,81,73,0.15); color: var(--red); }
243
- .count-stalled { background: rgba(210,153,34,0.15); color: var(--yellow); }
244
- .count-pending { background: rgba(139,148,158,0.1); color: var(--text-muted); }
376
+ .count-succeeded { background: var(--badge-succeeded-bg); color: var(--green); }
377
+ .count-running { background: var(--badge-running-bg); color: var(--accent); }
378
+ .count-failed { background: var(--badge-failed-bg); color: var(--red); }
379
+ .count-stalled { background: var(--badge-stalled-bg); color: var(--yellow); }
380
+ .count-pending { background: var(--badge-pending-bg); color: var(--text-muted); }
245
381
 
246
382
  .summary-elapsed {
247
383
  color: var(--text-muted);
@@ -268,14 +404,14 @@ body {
268
404
 
269
405
  .wave-chip.current {
270
406
  border-color: var(--accent-dim);
271
- background: rgba(88,166,255,0.12);
407
+ background: var(--badge-running-bg);
272
408
  color: var(--accent);
273
409
  font-weight: 700;
274
410
  }
275
411
 
276
412
  .wave-chip.done {
277
413
  border-color: var(--green-dim);
278
- background: rgba(63,185,80,0.12);
414
+ background: var(--green-tint-active);
279
415
  color: var(--green);
280
416
  }
281
417
 
@@ -395,7 +531,7 @@ body {
395
531
  border-radius: var(--radius-sm);
396
532
  background: var(--accent-dim);
397
533
  border: 1px solid var(--accent-dim);
398
- color: #fff;
534
+ color: var(--phase-on-color);
399
535
  cursor: pointer;
400
536
  white-space: nowrap;
401
537
  transition: background 0.2s, border-color 0.2s;
@@ -493,12 +629,12 @@ body {
493
629
  border-radius: 10px;
494
630
  }
495
631
 
496
- .status-succeeded { background: rgba(63,185,80,0.15); color: var(--green); }
497
- .status-running { background: rgba(88,166,255,0.15); color: var(--accent); }
498
- .status-failed { background: rgba(248,81,73,0.15); color: var(--red); }
499
- .status-stalled { background: rgba(210,153,34,0.15); color: var(--yellow); }
500
- .status-pending { background: rgba(139,148,158,0.1); color: var(--text-muted); }
501
- .status-skipped { background: rgba(139,148,158,0.1); color: var(--text-faint); }
632
+ .status-succeeded { background: var(--badge-succeeded-bg); color: var(--green); }
633
+ .status-running { background: var(--badge-running-bg); color: var(--accent); }
634
+ .status-failed { background: var(--badge-failed-bg); color: var(--red); }
635
+ .status-stalled { background: var(--badge-stalled-bg); color: var(--yellow); }
636
+ .status-pending { background: var(--badge-pending-bg); color: var(--text-muted); }
637
+ .status-skipped { background: var(--badge-skipped-bg); color: var(--text-faint); }
502
638
 
503
639
  .status-dot {
504
640
  width: 6px;
@@ -635,7 +771,7 @@ body {
635
771
 
636
772
  .reviewer-sub-row {
637
773
  background: var(--bg-surface-hover);
638
- border-left: 3px solid var(--yellow, #e5c07b);
774
+ border-left: 3px solid var(--yellow);
639
775
  padding-left: 11px; /* compensate for border */
640
776
  font-size: 0.85em;
641
777
  }
@@ -643,7 +779,7 @@ body {
643
779
  .reviewer-sub-row .reviewer-label {
644
780
  font-family: var(--font-mono);
645
781
  font-size: 0.75rem;
646
- color: var(--yellow, #e5c07b);
782
+ color: var(--yellow);
647
783
  font-weight: 600;
648
784
  }
649
785
 
@@ -673,18 +809,18 @@ body {
673
809
  }
674
810
 
675
811
  .telem-retry {
676
- background: rgba(210,153,34,0.15);
812
+ background: var(--badge-stalled-bg);
677
813
  color: var(--yellow);
678
814
  }
679
815
 
680
816
  .telem-retry-active {
681
- background: rgba(210,153,34,0.25);
817
+ background: var(--yellow-tint-active);
682
818
  color: var(--yellow);
683
819
  animation: pulse 1.5s infinite;
684
820
  }
685
821
 
686
822
  .telem-compaction {
687
- background: rgba(188,140,255,0.15);
823
+ background: var(--magenta-tint);
688
824
  color: var(--magenta);
689
825
  }
690
826
 
@@ -711,7 +847,7 @@ body {
711
847
  .conv-tool-call {
712
848
  margin: 8px 0 4px;
713
849
  padding: 6px 10px;
714
- background: rgba(88,166,255,0.08);
850
+ background: var(--accent-tint-bg);
715
851
  border-left: 3px solid var(--accent-dim);
716
852
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
717
853
  }
@@ -780,13 +916,13 @@ body {
780
916
 
781
917
  .viewer-eye-btn:hover {
782
918
  opacity: 1;
783
- background: rgba(88,166,255,0.18);
919
+ background: var(--accent-tint-hover);
784
920
  color: var(--accent);
785
921
  }
786
922
 
787
923
  .viewer-eye-btn.active {
788
924
  opacity: 1;
789
- background: rgba(88,166,255,0.25);
925
+ background: var(--accent-tint-active);
790
926
  color: var(--accent);
791
927
  box-shadow: 0 0 0 1px var(--accent-dim);
792
928
  }
@@ -839,7 +975,7 @@ body {
839
975
  top: -1px;
840
976
  left: 2px;
841
977
  font-size: 11px;
842
- color: #fff;
978
+ color: var(--phase-on-color);
843
979
  }
844
980
 
845
981
  /* ─── STATUS.md Rendered Content ───────────────────────────────────────── */
@@ -918,7 +1054,7 @@ body {
918
1054
  /* Progress frontier highlight — only when tracking is active */
919
1055
  .status-md-content.tracking .status-md-check.last-checked {
920
1056
  border-left-color: var(--accent);
921
- background: rgba(88, 166, 255, 0.06);
1057
+ background: var(--accent-tint-subtle);
922
1058
  }
923
1059
 
924
1060
  .status-md-li {
@@ -1032,7 +1168,7 @@ body {
1032
1168
  font-weight: 500;
1033
1169
  padding: 1px 7px;
1034
1170
  border-radius: 8px;
1035
- background: rgba(188,140,255,0.12);
1171
+ background: var(--magenta-tint-bg);
1036
1172
  color: var(--magenta);
1037
1173
  white-space: nowrap;
1038
1174
  max-width: 140px;
@@ -1121,17 +1257,17 @@ body {
1121
1257
  }
1122
1258
 
1123
1259
  .supervisor-status-badge.supervisor-active {
1124
- background: rgba(63,185,80,0.15);
1260
+ background: var(--badge-succeeded-bg);
1125
1261
  color: var(--green);
1126
1262
  }
1127
1263
 
1128
1264
  .supervisor-status-badge.supervisor-stale {
1129
- background: rgba(210,153,34,0.15);
1265
+ background: var(--badge-stalled-bg);
1130
1266
  color: var(--yellow);
1131
1267
  }
1132
1268
 
1133
1269
  .supervisor-status-badge.supervisor-inactive {
1134
- background: rgba(139,148,158,0.1);
1270
+ background: var(--badge-pending-bg);
1135
1271
  color: var(--text-muted);
1136
1272
  }
1137
1273
 
@@ -1176,7 +1312,7 @@ body {
1176
1312
  font-weight: 500;
1177
1313
  padding: 1px 7px;
1178
1314
  border-radius: 8px;
1179
- background: rgba(188,140,255,0.12);
1315
+ background: var(--magenta-tint-bg);
1180
1316
  color: var(--magenta);
1181
1317
  }
1182
1318
 
@@ -1223,12 +1359,12 @@ body {
1223
1359
  }
1224
1360
 
1225
1361
  .supervisor-conv-entry.conv-role-operator {
1226
- background: rgba(88,166,255,0.06);
1362
+ background: var(--accent-tint-subtle);
1227
1363
  border-left: 3px solid var(--accent-dim);
1228
1364
  }
1229
1365
 
1230
1366
  .supervisor-conv-entry.conv-role-supervisor {
1231
- background: rgba(63,185,80,0.06);
1367
+ background: var(--green-tint-bg);
1232
1368
  border-left: 3px solid var(--green-dim);
1233
1369
  }
1234
1370
 
@@ -1325,7 +1461,7 @@ body {
1325
1461
  font-weight: 700;
1326
1462
  padding: 1px 5px;
1327
1463
  border-radius: 4px;
1328
- background: rgba(188,140,255,0.12);
1464
+ background: var(--magenta-tint-bg);
1329
1465
  color: var(--magenta);
1330
1466
  }
1331
1467
 
@@ -1350,17 +1486,17 @@ body {
1350
1486
  }
1351
1487
 
1352
1488
  .supervisor-action-outcome.action-success {
1353
- background: rgba(63,185,80,0.15);
1489
+ background: var(--badge-succeeded-bg);
1354
1490
  color: var(--green);
1355
1491
  }
1356
1492
 
1357
1493
  .supervisor-action-outcome.action-failed {
1358
- background: rgba(248,81,73,0.15);
1494
+ background: var(--badge-failed-bg);
1359
1495
  color: var(--red);
1360
1496
  }
1361
1497
 
1362
1498
  .supervisor-action-outcome.action-pending {
1363
- background: rgba(210,153,34,0.15);
1499
+ background: var(--badge-stalled-bg);
1364
1500
  color: var(--yellow);
1365
1501
  }
1366
1502
 
@@ -1387,8 +1523,8 @@ body {
1387
1523
 
1388
1524
  ::-webkit-scrollbar { width: 6px; }
1389
1525
  ::-webkit-scrollbar-track { background: transparent; }
1390
- ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
1391
- ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
1526
+ ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
1527
+ ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
1392
1528
 
1393
1529
  /* ─── Pulse animation ──────────────────────────────────────────────────── */
1394
1530
 
@@ -1406,7 +1542,7 @@ body {
1406
1542
  bottom: 20px;
1407
1543
  right: 20px;
1408
1544
  background: var(--green-dim);
1409
- color: #fff;
1545
+ color: var(--phase-on-color);
1410
1546
  padding: 8px 16px;
1411
1547
  border-radius: var(--radius);
1412
1548
  font-size: 0.8rem;
@@ -1473,10 +1609,10 @@ body {
1473
1609
  font-weight: 600;
1474
1610
  }
1475
1611
 
1476
- .history-header .batch-status.completed { background: rgba(63,185,80,0.15); color: var(--green); }
1477
- .history-header .batch-status.partial { background: rgba(210,153,34,0.15); color: var(--yellow); }
1478
- .history-header .batch-status.failed { background: rgba(248,81,73,0.15); color: var(--red); }
1479
- .history-header .batch-status.aborted { background: rgba(139,148,158,0.15); color: var(--text-muted); }
1612
+ .history-header .batch-status.completed { background: var(--badge-succeeded-bg); color: var(--green); }
1613
+ .history-header .batch-status.partial { background: var(--badge-stalled-bg); color: var(--yellow); }
1614
+ .history-header .batch-status.failed { background: var(--badge-failed-bg); color: var(--red); }
1615
+ .history-header .batch-status.aborted { background: var(--badge-pending-bg); color: var(--text-muted); }
1480
1616
 
1481
1617
  .history-header .batch-time {
1482
1618
  color: var(--text-muted);
@@ -1537,7 +1673,7 @@ body {
1537
1673
  .history-waves-table td,
1538
1674
  .history-tasks-table td {
1539
1675
  padding: 6px 10px;
1540
- border-bottom: 1px solid rgba(48,54,61,0.3);
1676
+ border-bottom: 1px solid var(--border-table-subtle);
1541
1677
  font-family: var(--font-mono);
1542
1678
  font-size: 0.85rem;
1543
1679
  color: var(--text-muted);
@@ -0,0 +1,22 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1187.09 168.3">
3
+ <defs>
4
+ <style>
5
+ .cls-1 {
6
+ fill: #244c7c;
7
+ font-family: Conthrax-SemiBold, Conthrax;
8
+ font-size: 150px;
9
+ font-weight: 600;
10
+ }
11
+
12
+ .cls-2 {
13
+ letter-spacing: -.13em;
14
+ }
15
+
16
+ .cls-3 {
17
+ letter-spacing: 0em;
18
+ }
19
+ </style>
20
+ </defs>
21
+ <text class="cls-1" transform="translate(0 127.5)"><tspan class="cls-2" x="0" y="0">T</tspan><tspan class="cls-3" x="111.45" y="0">ASKPLANE</tspan></text>
22
+ </svg>
@@ -0,0 +1,22 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1187.09 168.3">
3
+ <defs>
4
+ <style>
5
+ .cls-1 {
6
+ fill: #fff;
7
+ font-family: Conthrax-SemiBold, Conthrax;
8
+ font-size: 150px;
9
+ font-weight: 600;
10
+ }
11
+
12
+ .cls-2 {
13
+ letter-spacing: -.13em;
14
+ }
15
+
16
+ .cls-3 {
17
+ letter-spacing: 0em;
18
+ }
19
+ </style>
20
+ </defs>
21
+ <text class="cls-1" transform="translate(0 127.5)"><tspan class="cls-2" x="0" y="0">T</tspan><tspan class="cls-3" x="111.45" y="0">ASKPLANE</tspan></text>
22
+ </svg>