@hanzlaa/rcode 4.5.0 → 4.6.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/package.json +1 -1
- package/rcode/agents/rcode-mariam.md +6 -0
- package/rcode/agents/rcode-sadiq.md +6 -0
- package/rcode/agents/rcode-waleed.md +6 -0
- package/rcode/bin/rcode-hooks.cjs +41 -5
- package/rcode/skills/agents/mariam-marketing/SKILL.md +1 -0
- package/rcode/skills/agents/sadiq-analyst/SKILL.md +1 -0
- package/rcode/skills/agents/waleed-architect/SKILL.md +1 -0
- package/rcode/workflows/council.md +29 -1
- package/server/dashboard.js +6 -3
- package/server/lib/html/client/components/App.js +1 -1
- package/server/lib/html/client/components/OrchPanel.js +2 -2
- package/server/lib/html/client/components/XtermPanel.js +98 -23
- package/server/lib/html/client/orchestrator.js +28 -15
- package/server/lib/html/client/views/OrchestrationView.js +247 -169
- package/server/lib/html/css.js +596 -227
- package/server/lib/html/shell.js +9 -3
- package/server/orchestrator.js +3 -4
package/server/lib/html/css.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* CLAUDE.md exemption: pure CSS data file, no logic — 1000-line limit does not apply */
|
|
2
2
|
/**
|
|
3
|
-
* Dashboard CSS —
|
|
4
|
-
* Dark-first
|
|
3
|
+
* Dashboard CSS — Diwan design system.
|
|
4
|
+
* Dark-first. rcode accent: #22b6cf (Diwan Teal).
|
|
5
5
|
*/
|
|
6
6
|
function renderCss() {
|
|
7
7
|
return `<style>
|
|
@@ -10,56 +10,72 @@ function renderCss() {
|
|
|
10
10
|
/* ── Design tokens ─────────────────────────────────────────────── */
|
|
11
11
|
:root {
|
|
12
12
|
/* Surfaces */
|
|
13
|
-
--bg-page: #
|
|
14
|
-
--bg-elev-1: #
|
|
15
|
-
--bg-elev-2: #
|
|
16
|
-
--bg-elev-3: #
|
|
17
|
-
--bg-hover: #
|
|
18
|
-
--bg-input: #
|
|
19
|
-
--bg-active: #
|
|
13
|
+
--bg-page: #0b0d0f;
|
|
14
|
+
--bg-elev-1: #131619;
|
|
15
|
+
--bg-elev-2: #1a1e22;
|
|
16
|
+
--bg-elev-3: #222831;
|
|
17
|
+
--bg-hover: #1e2329;
|
|
18
|
+
--bg-input: #1a1e22;
|
|
19
|
+
--bg-active: #262d35;
|
|
20
|
+
--bg-sunken: #070809; /* wells/terminal chrome — one step below bg-page */
|
|
20
21
|
|
|
21
22
|
/* Borders */
|
|
22
23
|
--border-subtle: rgba(255,255,255,0.06);
|
|
23
|
-
--border-default:
|
|
24
|
-
--border-strong: #
|
|
24
|
+
--border-default: rgba(255,255,255,0.10);
|
|
25
|
+
--border-strong: #2f373f;
|
|
25
26
|
|
|
26
27
|
/* Text */
|
|
27
|
-
--text-primary: #
|
|
28
|
-
--text-secondary: #
|
|
29
|
-
--text-tertiary: #
|
|
30
|
-
--text-muted: #
|
|
31
|
-
|
|
32
|
-
/* Brand —
|
|
33
|
-
--accent-primary: #
|
|
34
|
-
--accent-hover: #
|
|
35
|
-
--accent-active: #
|
|
36
|
-
--accent-bg: rgba(
|
|
37
|
-
--accent-border: rgba(
|
|
28
|
+
--text-primary: #e8edf1;
|
|
29
|
+
--text-secondary: #a6b2bd;
|
|
30
|
+
--text-tertiary: #717d88;
|
|
31
|
+
--text-muted: #4c565f;
|
|
32
|
+
|
|
33
|
+
/* Brand — Diwan accent (teal) */
|
|
34
|
+
--accent-primary: #22b6cf;
|
|
35
|
+
--accent-hover: #46cde3;
|
|
36
|
+
--accent-active: #178ea3;
|
|
37
|
+
--accent-bg: rgba(34,182,207,0.12);
|
|
38
|
+
--accent-border: rgba(34,182,207,0.35);
|
|
39
|
+
--accent-fg: #04222a;
|
|
38
40
|
|
|
39
41
|
/* Semantic */
|
|
40
|
-
--green: #
|
|
41
|
-
--amber: #
|
|
42
|
-
--red: #
|
|
43
|
-
--blue: #
|
|
42
|
+
--green: #3cb98a;
|
|
43
|
+
--amber: #e0a63a;
|
|
44
|
+
--red: #ec6a5e;
|
|
45
|
+
--blue: #4d9fe8;
|
|
44
46
|
--violet: #bf7af0;
|
|
45
47
|
|
|
46
48
|
/* Status */
|
|
47
|
-
--status-todo: #
|
|
48
|
-
--status-progress: #
|
|
49
|
-
--status-blocked: #
|
|
50
|
-
--status-done: #
|
|
49
|
+
--status-todo: #7f8ea0;
|
|
50
|
+
--status-progress: #e0a63a;
|
|
51
|
+
--status-blocked: #ec6a5e;
|
|
52
|
+
--status-done: #3cb98a;
|
|
53
|
+
|
|
54
|
+
/* Per-status wash + border (badge/pill treatment) */
|
|
55
|
+
--st-planned: #7f8ea0;
|
|
56
|
+
--st-planned-wash: rgba(127,142,160,0.14);
|
|
57
|
+
--st-planned-border: rgba(127,142,160,0.36);
|
|
58
|
+
--st-executing-wash: rgba(224,166,58,0.15);
|
|
59
|
+
--st-executing-border: rgba(224,166,58,0.40);
|
|
60
|
+
--st-complete-wash: rgba(60,185,138,0.15);
|
|
61
|
+
--st-complete-border: rgba(60,185,138,0.40);
|
|
62
|
+
--st-blocked-wash: rgba(236,106,94,0.15);
|
|
63
|
+
--st-blocked-border: rgba(236,106,94,0.42);
|
|
64
|
+
--st-info-wash: rgba(77,159,232,0.14);
|
|
65
|
+
--st-info-border: rgba(77,159,232,0.40);
|
|
66
|
+
--chart-track: rgba(255,255,255,0.07);
|
|
51
67
|
|
|
52
68
|
/* Type */
|
|
53
69
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
54
|
-
--font-mono: "
|
|
70
|
+
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
|
55
71
|
|
|
56
72
|
/* Size scale */
|
|
57
73
|
--text-xl: 20px;
|
|
58
|
-
--text-lg:
|
|
59
|
-
--text-md:
|
|
60
|
-
--text-sm:
|
|
61
|
-
--text-xs:
|
|
62
|
-
--text-2xs:
|
|
74
|
+
--text-lg: 16px;
|
|
75
|
+
--text-md: 14px;
|
|
76
|
+
--text-sm: 12px;
|
|
77
|
+
--text-xs: 11px;
|
|
78
|
+
--text-2xs: 10px;
|
|
63
79
|
--text-stat: 28px; /* stat card value — large metric numeral */
|
|
64
80
|
|
|
65
81
|
/* Component dimensions */
|
|
@@ -67,21 +83,21 @@ function renderCss() {
|
|
|
67
83
|
--size-icon-btn: 32px; /* square icon button (hamburger, etc.) */
|
|
68
84
|
|
|
69
85
|
/* Spacing (4px base) */
|
|
70
|
-
--space-1:
|
|
71
|
-
--space-2:
|
|
72
|
-
--space-3:
|
|
73
|
-
--space-4:
|
|
74
|
-
--space-5:
|
|
75
|
-
--space-6:
|
|
76
|
-
--space-7:
|
|
86
|
+
--space-1: 4px;
|
|
87
|
+
--space-2: 8px;
|
|
88
|
+
--space-3: 12px;
|
|
89
|
+
--space-4: 16px;
|
|
90
|
+
--space-5: 24px;
|
|
91
|
+
--space-6: 32px;
|
|
92
|
+
--space-7: 48px;
|
|
77
93
|
--space-8: 32px;
|
|
78
94
|
--space-10: 64px;
|
|
79
95
|
|
|
80
96
|
/* Radius */
|
|
81
|
-
--radius-1:
|
|
82
|
-
--radius-2:
|
|
83
|
-
--radius-3:
|
|
84
|
-
--radius-4:
|
|
97
|
+
--radius-1: 4px;
|
|
98
|
+
--radius-2: 6px;
|
|
99
|
+
--radius-3: 9px;
|
|
100
|
+
--radius-4: 14px;
|
|
85
101
|
--radius-5: 12px;
|
|
86
102
|
--radius-full: 9999px;
|
|
87
103
|
|
|
@@ -89,9 +105,9 @@ function renderCss() {
|
|
|
89
105
|
--shadow-lg: 0 16px 32px rgba(0,0,0,0.6);
|
|
90
106
|
|
|
91
107
|
/* Motion */
|
|
92
|
-
--ease: cubic-bezier(0.
|
|
93
|
-
--t-fast:
|
|
94
|
-
--t-base:
|
|
108
|
+
--ease: cubic-bezier(0.32,0.72,0,1);
|
|
109
|
+
--t-fast: 90ms;
|
|
110
|
+
--t-base: 160ms;
|
|
95
111
|
--t-menu: 240ms;
|
|
96
112
|
|
|
97
113
|
/* Legacy compat aliases */
|
|
@@ -105,51 +121,81 @@ function renderCss() {
|
|
|
105
121
|
--accent-red: var(--red);
|
|
106
122
|
--accent-blue: var(--blue);
|
|
107
123
|
|
|
108
|
-
/* ── Dashboard
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
--dash-bg:
|
|
113
|
-
--dash-card:
|
|
114
|
-
--dash-border:
|
|
115
|
-
--dash-teal:
|
|
116
|
-
--dash-purple:
|
|
117
|
-
--dash-blue:
|
|
118
|
-
--dash-amber:
|
|
119
|
-
--dash-sev-high:
|
|
120
|
-
--dash-sev-medium:
|
|
121
|
-
--dash-sev-low:
|
|
122
|
-
--dash-text:
|
|
123
|
-
--dash-text-muted:
|
|
124
|
-
--dash-hover:
|
|
124
|
+
/* ── Dashboard chrome tokens ──────────────────────────────────────
|
|
125
|
+
--dash-* aliases onto the Diwan design tokens above so the Overview
|
|
126
|
+
card grid, sidebar, and topbar share one palette with the rest of
|
|
127
|
+
the app — no independent hex values, single source of truth. */
|
|
128
|
+
--dash-bg: var(--bg-page);
|
|
129
|
+
--dash-card: var(--bg-elev-1);
|
|
130
|
+
--dash-border: var(--border-subtle);
|
|
131
|
+
--dash-teal: var(--accent-primary);
|
|
132
|
+
--dash-purple: var(--accent-primary); /* was lavender; aliases accent teal now */
|
|
133
|
+
--dash-blue: var(--status-progress); /* was blue; "in progress" amber now */
|
|
134
|
+
--dash-amber: var(--amber);
|
|
135
|
+
--dash-sev-high: var(--red);
|
|
136
|
+
--dash-sev-medium: var(--amber);
|
|
137
|
+
--dash-sev-low: var(--text-tertiary);
|
|
138
|
+
--dash-text: var(--text-primary);
|
|
139
|
+
--dash-text-muted: var(--text-tertiary);
|
|
140
|
+
--dash-hover: var(--bg-hover);
|
|
125
141
|
}
|
|
126
142
|
|
|
127
143
|
/* Light mode */
|
|
128
144
|
[data-theme="light"] {
|
|
129
|
-
--bg-page: #
|
|
145
|
+
--bg-page: #f3f5f8;
|
|
130
146
|
--bg-elev-1: #ffffff;
|
|
131
|
-
--bg-elev-2: #
|
|
132
|
-
--bg-elev-3: #
|
|
133
|
-
--bg-hover: #
|
|
134
|
-
--bg-input: #
|
|
135
|
-
--bg-active: #
|
|
136
|
-
--
|
|
137
|
-
--border-
|
|
138
|
-
--border-
|
|
139
|
-
--
|
|
140
|
-
--text-
|
|
141
|
-
--text-
|
|
142
|
-
--text-
|
|
143
|
-
--
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
--
|
|
148
|
-
--
|
|
149
|
-
--
|
|
150
|
-
--
|
|
151
|
-
|
|
152
|
-
--
|
|
147
|
+
--bg-elev-2: #ffffff;
|
|
148
|
+
--bg-elev-3: #eef2f6;
|
|
149
|
+
--bg-hover: #edf1f5;
|
|
150
|
+
--bg-input: #ffffff;
|
|
151
|
+
--bg-active: #e4eaf0;
|
|
152
|
+
--bg-sunken: #e7ecf1;
|
|
153
|
+
--border-subtle: rgba(15,25,35,0.08);
|
|
154
|
+
--border-default: rgba(15,25,35,0.13);
|
|
155
|
+
--border-strong: #ccd5de;
|
|
156
|
+
--text-primary: #0f161c;
|
|
157
|
+
--text-secondary: #45525d;
|
|
158
|
+
--text-tertiary: #6b7883;
|
|
159
|
+
--text-muted: #a3adb6;
|
|
160
|
+
|
|
161
|
+
--accent-primary: #0f97b0;
|
|
162
|
+
--accent-hover: #0c8299;
|
|
163
|
+
--accent-active: #0a6d80;
|
|
164
|
+
--accent-bg: rgba(15,151,176,0.10);
|
|
165
|
+
--accent-border: rgba(15,151,176,0.34);
|
|
166
|
+
--accent-fg: #ffffff;
|
|
167
|
+
|
|
168
|
+
--green: #178a5f;
|
|
169
|
+
--amber: #b0741a;
|
|
170
|
+
--red: #d1443a;
|
|
171
|
+
--blue: #2679c9;
|
|
172
|
+
|
|
173
|
+
--status-todo: #62707d;
|
|
174
|
+
--status-progress: #b0741a;
|
|
175
|
+
--status-blocked: #d1443a;
|
|
176
|
+
--status-done: #178a5f;
|
|
177
|
+
|
|
178
|
+
--st-planned: #62707d;
|
|
179
|
+
--st-planned-wash: rgba(98,112,125,0.11);
|
|
180
|
+
--st-planned-border: rgba(98,112,125,0.34);
|
|
181
|
+
--st-executing-wash: rgba(176,116,26,0.12);
|
|
182
|
+
--st-executing-border: rgba(176,116,26,0.36);
|
|
183
|
+
--st-complete-wash: rgba(23,138,95,0.12);
|
|
184
|
+
--st-complete-border: rgba(23,138,95,0.36);
|
|
185
|
+
--st-blocked-wash: rgba(209,68,58,0.11);
|
|
186
|
+
--st-blocked-border: rgba(209,68,58,0.36);
|
|
187
|
+
--st-info-wash: rgba(38,121,201,0.11);
|
|
188
|
+
--st-info-border: rgba(38,121,201,0.36);
|
|
189
|
+
--chart-track: rgba(15,25,35,0.09);
|
|
190
|
+
|
|
191
|
+
/* Dashboard chrome tokens — light theme. Same alias approach; flips
|
|
192
|
+
automatically with the base tokens above. */
|
|
193
|
+
--dash-bg: var(--bg-page);
|
|
194
|
+
--dash-card: var(--bg-elev-1);
|
|
195
|
+
--dash-border: var(--border-subtle);
|
|
196
|
+
--dash-text: var(--text-primary);
|
|
197
|
+
--dash-text-muted: var(--text-tertiary);
|
|
198
|
+
--dash-hover: var(--bg-hover);
|
|
153
199
|
}
|
|
154
200
|
|
|
155
201
|
/* ── Reset ─────────────────────────────────────────────────────── */
|
|
@@ -233,6 +279,7 @@ html, body {
|
|
|
233
279
|
.nav-section:first-child { margin-top: 0; }
|
|
234
280
|
|
|
235
281
|
.nav-link {
|
|
282
|
+
position: relative;
|
|
236
283
|
display: flex;
|
|
237
284
|
align-items: center;
|
|
238
285
|
gap: var(--space-3);
|
|
@@ -252,7 +299,17 @@ html, body {
|
|
|
252
299
|
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
|
|
253
300
|
}
|
|
254
301
|
.nav-link:hover { background: var(--bg-hover); color: var(--text-secondary); }
|
|
255
|
-
.nav-link.active { background: var(--bg
|
|
302
|
+
.nav-link.active { background: var(--accent-bg); color: var(--text-primary); font-weight: 600; }
|
|
303
|
+
.nav-link.active::before {
|
|
304
|
+
content: '';
|
|
305
|
+
position: absolute;
|
|
306
|
+
left: 0;
|
|
307
|
+
top: 7px;
|
|
308
|
+
bottom: 7px;
|
|
309
|
+
width: 2px;
|
|
310
|
+
border-radius: 2px;
|
|
311
|
+
background: var(--accent-primary);
|
|
312
|
+
}
|
|
256
313
|
.nav-count {
|
|
257
314
|
margin-left: auto;
|
|
258
315
|
font-size: 10px;
|
|
@@ -308,7 +365,7 @@ html, body {
|
|
|
308
365
|
|
|
309
366
|
/* ── Topbar / header ───────────────────────────────────────────── */
|
|
310
367
|
header {
|
|
311
|
-
background: rgba(
|
|
368
|
+
background: rgba(11,13,15,0.8); /* intentional: frosted glass tied to --bg-page exact value; alpha can't be expressed as a theme token */
|
|
312
369
|
backdrop-filter: blur(12px);
|
|
313
370
|
-webkit-backdrop-filter: blur(12px);
|
|
314
371
|
border-bottom: 1px solid var(--border-subtle);
|
|
@@ -323,7 +380,7 @@ header {
|
|
|
323
380
|
}
|
|
324
381
|
|
|
325
382
|
[data-theme="light"] header {
|
|
326
|
-
background: rgba(
|
|
383
|
+
background: rgba(243,245,248,0.85); /* intentional: light frosted glass; alpha channel can't be expressed as a theme token */
|
|
327
384
|
}
|
|
328
385
|
|
|
329
386
|
.brand {
|
|
@@ -418,6 +475,11 @@ header {
|
|
|
418
475
|
/* ── Views ─────────────────────────────────────────────────────── */
|
|
419
476
|
.view { display: none; }
|
|
420
477
|
.view.active { display: block; }
|
|
478
|
+
/* Orchestration's 2-column grid needs display:grid, not the block above.
|
|
479
|
+
Three classes (0,3,0) beats .view.active's (0,2,0) regardless of source
|
|
480
|
+
order, so this wins without touching the shared .view/.view.active rules
|
|
481
|
+
every other view relies on. */
|
|
482
|
+
.view.active.orch-layout { display: grid; }
|
|
421
483
|
|
|
422
484
|
.view-title {
|
|
423
485
|
font-size: var(--text-xl);
|
|
@@ -658,7 +720,7 @@ section .body {
|
|
|
658
720
|
/* ── Progress bar ───────────────────────────────────────────────── */
|
|
659
721
|
.progress-bar {
|
|
660
722
|
height: 4px;
|
|
661
|
-
background: var(--
|
|
723
|
+
background: var(--chart-track);
|
|
662
724
|
border-radius: 2px;
|
|
663
725
|
overflow: hidden;
|
|
664
726
|
width: 100%;
|
|
@@ -688,7 +750,7 @@ section .body {
|
|
|
688
750
|
.velocity-bar-track {
|
|
689
751
|
flex: 1;
|
|
690
752
|
height: 6px;
|
|
691
|
-
background: var(--
|
|
753
|
+
background: var(--chart-track);
|
|
692
754
|
border-radius: 3px;
|
|
693
755
|
overflow: hidden;
|
|
694
756
|
}
|
|
@@ -946,7 +1008,7 @@ section .body {
|
|
|
946
1008
|
}
|
|
947
1009
|
.inline-file-entry:last-child { border-bottom: none; }
|
|
948
1010
|
.inline-file-entry:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
949
|
-
.inline-file-entry.selected { background: rgba(
|
|
1011
|
+
.inline-file-entry.selected { background: rgba(34,182,207,0.1); color: var(--accent-primary); }
|
|
950
1012
|
.inline-file-group { margin-bottom: var(--space-3); }
|
|
951
1013
|
.inline-subgroup { padding-left: var(--space-4); }
|
|
952
1014
|
.file-path-header {
|
|
@@ -1073,7 +1135,7 @@ section .body {
|
|
|
1073
1135
|
font-weight: 500;
|
|
1074
1136
|
padding: 1px 5px;
|
|
1075
1137
|
border-radius: var(--radius-full);
|
|
1076
|
-
background: rgba(
|
|
1138
|
+
background: rgba(34,182,207,0.15);
|
|
1077
1139
|
color: var(--accent-hover);
|
|
1078
1140
|
text-transform: uppercase;
|
|
1079
1141
|
letter-spacing: 0.04em;
|
|
@@ -1121,8 +1183,8 @@ section .body {
|
|
|
1121
1183
|
align-items: center;
|
|
1122
1184
|
gap: var(--space-4);
|
|
1123
1185
|
padding: var(--space-3) var(--space-5);
|
|
1124
|
-
background: rgba(
|
|
1125
|
-
border-bottom: 1px solid rgba(
|
|
1186
|
+
background: rgba(236,106,94,0.1);
|
|
1187
|
+
border-bottom: 1px solid rgba(236,106,94,0.25);
|
|
1126
1188
|
font-size: var(--text-xs);
|
|
1127
1189
|
flex-shrink: 0;
|
|
1128
1190
|
}
|
|
@@ -1130,7 +1192,7 @@ section .body {
|
|
|
1130
1192
|
.banner-list { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1131
1193
|
.banner-dismiss {
|
|
1132
1194
|
background: none;
|
|
1133
|
-
border: 1px solid rgba(
|
|
1195
|
+
border: 1px solid rgba(236,106,94,0.4);
|
|
1134
1196
|
border-radius: var(--radius-2);
|
|
1135
1197
|
color: var(--red);
|
|
1136
1198
|
font-size: var(--text-2xs);
|
|
@@ -1139,12 +1201,12 @@ section .body {
|
|
|
1139
1201
|
cursor: pointer;
|
|
1140
1202
|
white-space: nowrap;
|
|
1141
1203
|
}
|
|
1142
|
-
.banner-dismiss:hover { background: rgba(
|
|
1204
|
+
.banner-dismiss:hover { background: rgba(236,106,94,0.15); }
|
|
1143
1205
|
|
|
1144
1206
|
#parse-warning {
|
|
1145
1207
|
padding: var(--space-3) var(--space-5);
|
|
1146
|
-
background: rgba(
|
|
1147
|
-
border-bottom: 1px solid rgba(
|
|
1208
|
+
background: rgba(224,166,58,0.08);
|
|
1209
|
+
border-bottom: 1px solid rgba(224,166,58,0.2);
|
|
1148
1210
|
font-size: var(--text-xs);
|
|
1149
1211
|
color: var(--amber);
|
|
1150
1212
|
}
|
|
@@ -1234,7 +1296,7 @@ footer {
|
|
|
1234
1296
|
}
|
|
1235
1297
|
|
|
1236
1298
|
.kanban-col {
|
|
1237
|
-
background: var(--bg-
|
|
1299
|
+
background: var(--bg-sunken);
|
|
1238
1300
|
border: 1px solid var(--border-subtle);
|
|
1239
1301
|
border-radius: var(--radius-4);
|
|
1240
1302
|
min-height: 200px;
|
|
@@ -1317,10 +1379,10 @@ footer {
|
|
|
1317
1379
|
box-shadow: 0 0 0 1px var(--accent-border);
|
|
1318
1380
|
}
|
|
1319
1381
|
.kanban-card.done {
|
|
1320
|
-
border-color: rgba(
|
|
1382
|
+
border-color: rgba(60,185,138,0.3);
|
|
1321
1383
|
}
|
|
1322
1384
|
.kanban-card.blocked-state {
|
|
1323
|
-
border-color: rgba(
|
|
1385
|
+
border-color: rgba(236,106,94,0.3);
|
|
1324
1386
|
}
|
|
1325
1387
|
|
|
1326
1388
|
/* Drag-over highlight */
|
|
@@ -1368,10 +1430,10 @@ footer {
|
|
|
1368
1430
|
padding: 1px 5px;
|
|
1369
1431
|
border-radius: var(--radius-1);
|
|
1370
1432
|
}
|
|
1371
|
-
.s-todo .kanban-card-status { background:
|
|
1372
|
-
.s-in_progress .kanban-card-status { background:
|
|
1373
|
-
.s-blocked .kanban-card-status { background:
|
|
1374
|
-
.s-done .kanban-card-status { background:
|
|
1433
|
+
.s-todo .kanban-card-status { background: var(--st-planned-wash); color: var(--status-todo); border: 1px solid var(--st-planned-border); }
|
|
1434
|
+
.s-in_progress .kanban-card-status { background: var(--st-executing-wash); color: var(--status-progress); border: 1px solid var(--st-executing-border); }
|
|
1435
|
+
.s-blocked .kanban-card-status { background: var(--st-blocked-wash); color: var(--status-blocked); border: 1px solid var(--st-blocked-border); }
|
|
1436
|
+
.s-done .kanban-card-status { background: var(--st-complete-wash); color: var(--status-done); border: 1px solid var(--st-complete-border); }
|
|
1375
1437
|
|
|
1376
1438
|
/* Running indicator on card */
|
|
1377
1439
|
.card-run-indicator {
|
|
@@ -1428,17 +1490,17 @@ footer {
|
|
|
1428
1490
|
.kanban-run-btn:hover {
|
|
1429
1491
|
background: var(--accent-primary);
|
|
1430
1492
|
border-color: var(--accent-primary);
|
|
1431
|
-
color:
|
|
1493
|
+
color: var(--accent-fg);
|
|
1432
1494
|
}
|
|
1433
1495
|
.kanban-run-btn:active { transform: scale(0.97); }
|
|
1434
1496
|
|
|
1435
1497
|
.kanban-stop-btn {
|
|
1436
|
-
background: rgba(
|
|
1437
|
-
border-color: rgba(
|
|
1498
|
+
background: rgba(236,106,94,0.1);
|
|
1499
|
+
border-color: rgba(236,106,94,0.3);
|
|
1438
1500
|
color: var(--red);
|
|
1439
1501
|
}
|
|
1440
1502
|
.kanban-stop-btn:hover {
|
|
1441
|
-
background: rgba(
|
|
1503
|
+
background: rgba(236,106,94,0.2);
|
|
1442
1504
|
}
|
|
1443
1505
|
.kanban-stop-btn:active { transform: scale(0.97); }
|
|
1444
1506
|
|
|
@@ -1514,7 +1576,7 @@ footer {
|
|
|
1514
1576
|
}
|
|
1515
1577
|
.orch-panel-resize:hover,
|
|
1516
1578
|
.orch-panel-resize.dragging {
|
|
1517
|
-
background: var(--accent, #
|
|
1579
|
+
background: var(--accent-primary, #22b6cf);
|
|
1518
1580
|
opacity: 0.35;
|
|
1519
1581
|
}
|
|
1520
1582
|
.orch-panel.open {
|
|
@@ -1636,7 +1698,7 @@ footer {
|
|
|
1636
1698
|
flex: 1;
|
|
1637
1699
|
overflow-y: auto;
|
|
1638
1700
|
padding: var(--space-4) var(--space-5);
|
|
1639
|
-
background:
|
|
1701
|
+
background: var(--bg-sunken);
|
|
1640
1702
|
font-family: var(--font-mono);
|
|
1641
1703
|
font-size: 12px;
|
|
1642
1704
|
line-height: 1.6;
|
|
@@ -1756,11 +1818,11 @@ footer {
|
|
|
1756
1818
|
}
|
|
1757
1819
|
.orch-footer-btn:hover { background: var(--bg-active); color: var(--text-primary); }
|
|
1758
1820
|
.orch-footer-btn.stop {
|
|
1759
|
-
background: rgba(
|
|
1760
|
-
border-color: rgba(
|
|
1821
|
+
background: rgba(236,106,94,0.1);
|
|
1822
|
+
border-color: rgba(236,106,94,0.3);
|
|
1761
1823
|
color: var(--red);
|
|
1762
1824
|
}
|
|
1763
|
-
.orch-footer-btn.stop:hover { background: rgba(
|
|
1825
|
+
.orch-footer-btn.stop:hover { background: rgba(236,106,94,0.2); }
|
|
1764
1826
|
|
|
1765
1827
|
/* ── Old kanban inline terminals (hidden) ────────────────────── */
|
|
1766
1828
|
.kanban-log-panel { display: none !important; }
|
|
@@ -1800,9 +1862,9 @@ footer {
|
|
|
1800
1862
|
padding: 1px 5px;
|
|
1801
1863
|
border-radius: var(--radius-1);
|
|
1802
1864
|
}
|
|
1803
|
-
.phase-status.done { background:
|
|
1804
|
-
.phase-status.planned { background:
|
|
1805
|
-
.phase-status.active { background:
|
|
1865
|
+
.phase-status.done { background: var(--st-complete-wash); color: var(--green); border: 1px solid var(--st-complete-border); }
|
|
1866
|
+
.phase-status.planned { background: var(--accent-bg); color: var(--accent-hover); border: 1px solid var(--accent-border); }
|
|
1867
|
+
.phase-status.active { background: var(--st-executing-wash); color: var(--amber); border: 1px solid var(--st-executing-border); }
|
|
1806
1868
|
|
|
1807
1869
|
/* Sprint / tasks */
|
|
1808
1870
|
.sprint-card {
|
|
@@ -1854,7 +1916,7 @@ footer {
|
|
|
1854
1916
|
font-size: 9px;
|
|
1855
1917
|
color: var(--green);
|
|
1856
1918
|
}
|
|
1857
|
-
.task-check.done { border-color: var(--green); background:
|
|
1919
|
+
.task-check.done { border-color: var(--green); background: var(--st-complete-wash); }
|
|
1858
1920
|
.task-id {
|
|
1859
1921
|
font-family: var(--font-mono);
|
|
1860
1922
|
font-size: var(--text-2xs);
|
|
@@ -1899,10 +1961,10 @@ footer {
|
|
|
1899
1961
|
display: inline-flex;
|
|
1900
1962
|
align-self: flex-start;
|
|
1901
1963
|
}
|
|
1902
|
-
.memory-type.user { background:
|
|
1903
|
-
.memory-type.feedback { background:
|
|
1904
|
-
.memory-type.project { background:
|
|
1905
|
-
.memory-type.reference { background:
|
|
1964
|
+
.memory-type.user { background: var(--accent-bg); color: var(--accent-hover); border: 1px solid var(--accent-border); }
|
|
1965
|
+
.memory-type.feedback { background: var(--st-executing-wash); color: var(--amber); border: 1px solid var(--st-executing-border); }
|
|
1966
|
+
.memory-type.project { background: var(--st-complete-wash); color: var(--green); border: 1px solid var(--st-complete-border); }
|
|
1967
|
+
.memory-type.reference { background: var(--st-info-wash); color: var(--blue); border: 1px solid var(--st-info-border); }
|
|
1906
1968
|
.memory-name {
|
|
1907
1969
|
font-size: var(--text-xs);
|
|
1908
1970
|
font-weight: 600;
|
|
@@ -2024,7 +2086,7 @@ footer {
|
|
|
2024
2086
|
right: 0;
|
|
2025
2087
|
height: 55vh;
|
|
2026
2088
|
min-height: 300px;
|
|
2027
|
-
background:
|
|
2089
|
+
background: var(--bg-sunken);
|
|
2028
2090
|
border-top: 2px solid var(--accent-primary);
|
|
2029
2091
|
z-index: 201;
|
|
2030
2092
|
flex-direction: column;
|
|
@@ -2126,7 +2188,7 @@ footer {
|
|
|
2126
2188
|
flex: 1;
|
|
2127
2189
|
overflow: hidden;
|
|
2128
2190
|
padding: 6px 8px;
|
|
2129
|
-
background:
|
|
2191
|
+
background: var(--bg-sunken);
|
|
2130
2192
|
}
|
|
2131
2193
|
.term-hint {
|
|
2132
2194
|
padding: var(--space-2) var(--space-3);
|
|
@@ -2146,7 +2208,7 @@ footer {
|
|
|
2146
2208
|
background: var(--accent-primary);
|
|
2147
2209
|
border: 1px solid rgba(255,255,255,0.1);
|
|
2148
2210
|
border-radius: var(--radius-3);
|
|
2149
|
-
color:
|
|
2211
|
+
color: var(--accent-fg);
|
|
2150
2212
|
font-size: var(--text-xs);
|
|
2151
2213
|
font-weight: 500;
|
|
2152
2214
|
font-family: var(--font-sans);
|
|
@@ -2232,7 +2294,7 @@ footer {
|
|
|
2232
2294
|
.orch-card.orch-running { border-left-color: var(--accent-green); }
|
|
2233
2295
|
.orch-card.orch-waiting {
|
|
2234
2296
|
border-left-color: var(--accent-amber);
|
|
2235
|
-
background: rgba(
|
|
2297
|
+
background: rgba(224,166,58,0.05);
|
|
2236
2298
|
}
|
|
2237
2299
|
.orch-card.orch-waiting .orch-card-badge { color: var(--accent-amber); }
|
|
2238
2300
|
.orch-card.orch-error,
|
|
@@ -2274,6 +2336,312 @@ footer {
|
|
|
2274
2336
|
gap: var(--space-2);
|
|
2275
2337
|
}
|
|
2276
2338
|
|
|
2339
|
+
/* ── Orchestration view — 2-column Diwan layout ──────────────────
|
|
2340
|
+
.orch-layout replaces the old single-column stack (header → banner →
|
|
2341
|
+
command runner → orch-grid → history). Left rail is fixed 300px; right
|
|
2342
|
+
column hosts the docked xterm terminal (XtermPanel docked=true) + run
|
|
2343
|
+
history beneath it. Reuses the existing bg-elev/border/st-*-wash
|
|
2344
|
+
tokens — no new colors introduced. */
|
|
2345
|
+
.orch-layout {
|
|
2346
|
+
display: grid;
|
|
2347
|
+
grid-template-columns: 300px 1fr;
|
|
2348
|
+
gap: var(--space-4);
|
|
2349
|
+
height: 100%;
|
|
2350
|
+
padding: var(--space-5) var(--space-6);
|
|
2351
|
+
box-sizing: border-box;
|
|
2352
|
+
}
|
|
2353
|
+
.orch-left-rail {
|
|
2354
|
+
display: flex;
|
|
2355
|
+
flex-direction: column;
|
|
2356
|
+
gap: var(--space-4);
|
|
2357
|
+
min-height: 0;
|
|
2358
|
+
}
|
|
2359
|
+
.orch-h1 {
|
|
2360
|
+
margin: 0 0 2px;
|
|
2361
|
+
font-size: var(--text-xl);
|
|
2362
|
+
font-weight: 660;
|
|
2363
|
+
letter-spacing: -0.01em;
|
|
2364
|
+
color: var(--text-primary);
|
|
2365
|
+
}
|
|
2366
|
+
.orch-header-sub {
|
|
2367
|
+
font-size: var(--text-sm);
|
|
2368
|
+
color: var(--text-tertiary);
|
|
2369
|
+
}
|
|
2370
|
+
.orch-card-label {
|
|
2371
|
+
padding: var(--space-3) var(--space-4);
|
|
2372
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
2373
|
+
font-size: var(--text-2xs);
|
|
2374
|
+
text-transform: uppercase;
|
|
2375
|
+
letter-spacing: 0.06em;
|
|
2376
|
+
color: var(--text-tertiary);
|
|
2377
|
+
}
|
|
2378
|
+
|
|
2379
|
+
/* Agents card — live rows for sessions the orchestrator is currently running. */
|
|
2380
|
+
.orch-runner-card {
|
|
2381
|
+
background: var(--bg-elev-1);
|
|
2382
|
+
border: 1px solid var(--border-subtle);
|
|
2383
|
+
border-radius: var(--radius-3);
|
|
2384
|
+
overflow: hidden;
|
|
2385
|
+
display: flex;
|
|
2386
|
+
flex-direction: column;
|
|
2387
|
+
}
|
|
2388
|
+
.orch-runner-list {
|
|
2389
|
+
padding: var(--space-2);
|
|
2390
|
+
display: flex;
|
|
2391
|
+
flex-direction: column;
|
|
2392
|
+
gap: 2px;
|
|
2393
|
+
overflow-y: auto;
|
|
2394
|
+
}
|
|
2395
|
+
.orch-runner-row {
|
|
2396
|
+
display: flex;
|
|
2397
|
+
align-items: center;
|
|
2398
|
+
gap: 10px;
|
|
2399
|
+
padding: 9px 10px;
|
|
2400
|
+
border-radius: var(--radius-2);
|
|
2401
|
+
cursor: pointer;
|
|
2402
|
+
border: 1px solid transparent;
|
|
2403
|
+
background: transparent;
|
|
2404
|
+
transition: background var(--t-fast) var(--ease);
|
|
2405
|
+
}
|
|
2406
|
+
.orch-runner-row:hover { background: var(--bg-hover); }
|
|
2407
|
+
.orch-runner-row.selected { background: var(--accent-bg); border-color: var(--accent-border); }
|
|
2408
|
+
.orch-runner-row.attached { border-color: var(--accent-primary); }
|
|
2409
|
+
.orch-runner-abbr {
|
|
2410
|
+
width: 26px;
|
|
2411
|
+
height: 26px;
|
|
2412
|
+
border-radius: var(--radius-2);
|
|
2413
|
+
background: var(--bg-elev-3);
|
|
2414
|
+
display: grid;
|
|
2415
|
+
place-items: center;
|
|
2416
|
+
font-family: var(--font-mono);
|
|
2417
|
+
font-size: var(--text-xs);
|
|
2418
|
+
color: var(--accent-primary);
|
|
2419
|
+
flex-shrink: 0;
|
|
2420
|
+
}
|
|
2421
|
+
.orch-runner-info { flex: 1; min-width: 0; }
|
|
2422
|
+
.orch-runner-name {
|
|
2423
|
+
font-size: var(--text-md);
|
|
2424
|
+
color: var(--text-primary);
|
|
2425
|
+
overflow: hidden;
|
|
2426
|
+
text-overflow: ellipsis;
|
|
2427
|
+
white-space: nowrap;
|
|
2428
|
+
}
|
|
2429
|
+
.orch-runner-role {
|
|
2430
|
+
font-family: var(--font-mono);
|
|
2431
|
+
font-size: var(--text-2xs);
|
|
2432
|
+
color: var(--text-tertiary);
|
|
2433
|
+
overflow: hidden;
|
|
2434
|
+
text-overflow: ellipsis;
|
|
2435
|
+
white-space: nowrap;
|
|
2436
|
+
}
|
|
2437
|
+
.orch-runner-glance {
|
|
2438
|
+
font-size: var(--text-2xs);
|
|
2439
|
+
color: var(--text-muted);
|
|
2440
|
+
overflow: hidden;
|
|
2441
|
+
text-overflow: ellipsis;
|
|
2442
|
+
white-space: nowrap;
|
|
2443
|
+
margin-top: 1px;
|
|
2444
|
+
}
|
|
2445
|
+
.orch-runner-status {
|
|
2446
|
+
font-size: var(--text-xs);
|
|
2447
|
+
font-weight: 600;
|
|
2448
|
+
color: var(--text-muted);
|
|
2449
|
+
white-space: nowrap;
|
|
2450
|
+
}
|
|
2451
|
+
.orch-runner-status.running { color: var(--green); }
|
|
2452
|
+
.orch-agent-status {
|
|
2453
|
+
font-size: var(--text-2xs);
|
|
2454
|
+
font-weight: 600;
|
|
2455
|
+
text-transform: uppercase;
|
|
2456
|
+
letter-spacing: 0.04em;
|
|
2457
|
+
padding: 2px 7px;
|
|
2458
|
+
border-radius: var(--radius-1);
|
|
2459
|
+
white-space: nowrap;
|
|
2460
|
+
flex-shrink: 0;
|
|
2461
|
+
}
|
|
2462
|
+
.orch-agent-status.running { background: var(--st-executing-wash); color: var(--status-progress); border: 1px solid var(--st-executing-border); }
|
|
2463
|
+
.orch-agent-status.blocked { background: var(--st-blocked-wash); color: var(--status-blocked); border: 1px solid var(--st-blocked-border); }
|
|
2464
|
+
.orch-agent-status.exited { background: transparent; color: var(--text-tertiary); border: 1px solid var(--border-subtle); }
|
|
2465
|
+
.orch-runner-empty { padding: var(--space-2) var(--space-1); }
|
|
2466
|
+
.orch-runner-card-footer {
|
|
2467
|
+
padding: var(--space-3) var(--space-4);
|
|
2468
|
+
border-top: 1px solid var(--border-subtle);
|
|
2469
|
+
display: flex;
|
|
2470
|
+
flex-direction: column;
|
|
2471
|
+
gap: var(--space-2);
|
|
2472
|
+
}
|
|
2473
|
+
.orch-runner-hint { font-size: var(--text-2xs); color: var(--text-tertiary); }
|
|
2474
|
+
.orch-run-cmd-field {
|
|
2475
|
+
display: flex;
|
|
2476
|
+
flex-direction: column;
|
|
2477
|
+
gap: 4px;
|
|
2478
|
+
}
|
|
2479
|
+
|
|
2480
|
+
/* Pipeline card — live sessions, or a history-status summary fallback. */
|
|
2481
|
+
.orch-pipeline-card {
|
|
2482
|
+
background: var(--bg-elev-1);
|
|
2483
|
+
border: 1px solid var(--border-subtle);
|
|
2484
|
+
border-radius: var(--radius-3);
|
|
2485
|
+
padding: var(--space-4);
|
|
2486
|
+
overflow-y: auto;
|
|
2487
|
+
}
|
|
2488
|
+
.orch-pipeline-label {
|
|
2489
|
+
font-size: var(--text-2xs);
|
|
2490
|
+
text-transform: uppercase;
|
|
2491
|
+
letter-spacing: 0.06em;
|
|
2492
|
+
color: var(--text-tertiary);
|
|
2493
|
+
margin-bottom: var(--space-3);
|
|
2494
|
+
}
|
|
2495
|
+
.orch-pipeline-row {
|
|
2496
|
+
display: flex;
|
|
2497
|
+
align-items: center;
|
|
2498
|
+
gap: 10px;
|
|
2499
|
+
padding: 6px 8px;
|
|
2500
|
+
margin: 0 -8px;
|
|
2501
|
+
border-radius: var(--radius-2);
|
|
2502
|
+
cursor: pointer;
|
|
2503
|
+
}
|
|
2504
|
+
.orch-pipeline-row.active { background: var(--accent-bg); }
|
|
2505
|
+
.orch-pipeline-glyph {
|
|
2506
|
+
width: 20px;
|
|
2507
|
+
height: 20px;
|
|
2508
|
+
border-radius: 50%;
|
|
2509
|
+
display: grid;
|
|
2510
|
+
place-items: center;
|
|
2511
|
+
font-size: 11px;
|
|
2512
|
+
flex-shrink: 0;
|
|
2513
|
+
}
|
|
2514
|
+
.orch-pipeline-glyph.running,
|
|
2515
|
+
.orch-pipeline-glyph.stopped { background: var(--st-executing-wash); border: 1px solid var(--st-executing-border); color: var(--amber); }
|
|
2516
|
+
.orch-pipeline-glyph.blocked,
|
|
2517
|
+
.orch-pipeline-glyph.waiting,
|
|
2518
|
+
.orch-pipeline-glyph.exited,
|
|
2519
|
+
.orch-pipeline-glyph.error { background: var(--st-blocked-wash); border: 1px solid var(--st-blocked-border); color: var(--red); }
|
|
2520
|
+
.orch-pipeline-glyph.done { background: var(--st-complete-wash); border: 1px solid var(--st-complete-border); color: var(--green); }
|
|
2521
|
+
.orch-pipeline-label-text {
|
|
2522
|
+
flex: 1;
|
|
2523
|
+
font-size: var(--text-md);
|
|
2524
|
+
color: var(--text-secondary);
|
|
2525
|
+
overflow: hidden;
|
|
2526
|
+
text-overflow: ellipsis;
|
|
2527
|
+
white-space: nowrap;
|
|
2528
|
+
text-transform: capitalize;
|
|
2529
|
+
}
|
|
2530
|
+
.orch-pipeline-count {
|
|
2531
|
+
font-family: var(--font-mono);
|
|
2532
|
+
font-size: var(--text-xs);
|
|
2533
|
+
color: var(--text-tertiary);
|
|
2534
|
+
white-space: nowrap;
|
|
2535
|
+
}
|
|
2536
|
+
.orch-pipeline-actions { display: flex; gap: 4px; margin-left: 6px; }
|
|
2537
|
+
.orch-pipeline-action-btn {
|
|
2538
|
+
background: transparent;
|
|
2539
|
+
border: 1px solid var(--border-default);
|
|
2540
|
+
border-radius: var(--radius-1);
|
|
2541
|
+
color: var(--text-tertiary);
|
|
2542
|
+
font-size: 10px;
|
|
2543
|
+
line-height: 1;
|
|
2544
|
+
padding: 3px 6px;
|
|
2545
|
+
cursor: pointer;
|
|
2546
|
+
}
|
|
2547
|
+
.orch-pipeline-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
2548
|
+
.orch-pipeline-action-btn.danger { color: var(--red); border-color: rgba(236,106,94,0.4); }
|
|
2549
|
+
.orch-pipeline-action-btn.danger:hover { background: rgba(236,106,94,0.12); }
|
|
2550
|
+
|
|
2551
|
+
/* Right column — docked terminal + run history beneath it. */
|
|
2552
|
+
.orch-right-col {
|
|
2553
|
+
display: flex;
|
|
2554
|
+
flex-direction: column;
|
|
2555
|
+
gap: var(--space-4);
|
|
2556
|
+
height: 100%;
|
|
2557
|
+
min-height: 0;
|
|
2558
|
+
}
|
|
2559
|
+
.orch-term-dock {
|
|
2560
|
+
border: 1px solid var(--border-strong);
|
|
2561
|
+
border-radius: var(--radius-3);
|
|
2562
|
+
overflow: hidden;
|
|
2563
|
+
background: var(--bg-sunken);
|
|
2564
|
+
box-shadow: var(--shadow-lg);
|
|
2565
|
+
display: flex;
|
|
2566
|
+
flex-direction: column;
|
|
2567
|
+
min-height: 320px;
|
|
2568
|
+
flex: 1 1 auto;
|
|
2569
|
+
}
|
|
2570
|
+
.orch-term-dock-header {
|
|
2571
|
+
display: flex;
|
|
2572
|
+
align-items: center;
|
|
2573
|
+
gap: 8px;
|
|
2574
|
+
padding: 8px 12px;
|
|
2575
|
+
background: var(--bg-elev-2);
|
|
2576
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
2577
|
+
flex-shrink: 0;
|
|
2578
|
+
}
|
|
2579
|
+
.orch-term-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
|
|
2580
|
+
.orch-term-dot.red { background: var(--red); }
|
|
2581
|
+
.orch-term-dot.amber { background: var(--amber); }
|
|
2582
|
+
.orch-term-dot.green { background: var(--green); }
|
|
2583
|
+
.orch-term-dock-label {
|
|
2584
|
+
font-family: var(--font-mono);
|
|
2585
|
+
font-size: var(--text-xs);
|
|
2586
|
+
color: var(--text-tertiary);
|
|
2587
|
+
margin-left: 6px;
|
|
2588
|
+
overflow: hidden;
|
|
2589
|
+
text-overflow: ellipsis;
|
|
2590
|
+
white-space: nowrap;
|
|
2591
|
+
}
|
|
2592
|
+
.orch-term-dock-live {
|
|
2593
|
+
display: inline-flex;
|
|
2594
|
+
align-items: center;
|
|
2595
|
+
gap: 5px;
|
|
2596
|
+
margin-left: auto;
|
|
2597
|
+
font-size: var(--text-2xs);
|
|
2598
|
+
color: var(--green);
|
|
2599
|
+
font-family: var(--font-mono);
|
|
2600
|
+
white-space: nowrap;
|
|
2601
|
+
}
|
|
2602
|
+
.orch-term-dock-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
|
|
2603
|
+
.orch-term-dock-stop {
|
|
2604
|
+
height: 22px;
|
|
2605
|
+
padding: 0 10px;
|
|
2606
|
+
border-radius: var(--radius-1);
|
|
2607
|
+
font-size: var(--text-2xs);
|
|
2608
|
+
font-weight: 600;
|
|
2609
|
+
color: var(--red);
|
|
2610
|
+
background: var(--st-blocked-wash);
|
|
2611
|
+
border: 1px solid var(--st-blocked-border);
|
|
2612
|
+
cursor: pointer;
|
|
2613
|
+
font-family: var(--font-sans);
|
|
2614
|
+
margin-left: var(--space-2);
|
|
2615
|
+
}
|
|
2616
|
+
.orch-term-dock-stop:hover { opacity: 0.85; }
|
|
2617
|
+
.orch-term-dock-body {
|
|
2618
|
+
flex: 1;
|
|
2619
|
+
min-height: 0;
|
|
2620
|
+
display: flex;
|
|
2621
|
+
flex-direction: column;
|
|
2622
|
+
}
|
|
2623
|
+
.orch-term-dock-container {
|
|
2624
|
+
flex: 1;
|
|
2625
|
+
overflow: hidden;
|
|
2626
|
+
padding: 14px;
|
|
2627
|
+
}
|
|
2628
|
+
.orch-term-dock-empty {
|
|
2629
|
+
flex: 1;
|
|
2630
|
+
display: flex;
|
|
2631
|
+
align-items: center;
|
|
2632
|
+
justify-content: center;
|
|
2633
|
+
padding: var(--space-6);
|
|
2634
|
+
text-align: center;
|
|
2635
|
+
color: var(--text-tertiary);
|
|
2636
|
+
font-size: var(--text-sm);
|
|
2637
|
+
}
|
|
2638
|
+
.orch-hist-dock {
|
|
2639
|
+
flex: 0 0 auto;
|
|
2640
|
+
max-height: 240px;
|
|
2641
|
+
overflow-y: auto;
|
|
2642
|
+
}
|
|
2643
|
+
.orch-hist-dock .hist-panel { margin-top: 0; }
|
|
2644
|
+
|
|
2277
2645
|
/* ── Run history panel ── */
|
|
2278
2646
|
.hist-panel { margin-top: var(--space-6); }
|
|
2279
2647
|
.hist-panel-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); color: var(--text-primary); margin-bottom: var(--space-4); }
|
|
@@ -2281,6 +2649,9 @@ footer {
|
|
|
2281
2649
|
.hist-group-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-2); }
|
|
2282
2650
|
.hist-date { font-size: var(--text-2xs); color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }
|
|
2283
2651
|
.hist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-2); margin-bottom: var(--space-2); }
|
|
2652
|
+
.hist-row.clickable { cursor: pointer; }
|
|
2653
|
+
.hist-row.clickable:hover { background: var(--bg-hover); }
|
|
2654
|
+
.hist-row.active { border-color: var(--accent-primary); background: var(--accent-bg); }
|
|
2284
2655
|
.hist-row-id { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
|
|
2285
2656
|
.hist-row-cmd { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2286
2657
|
.hist-row-duration { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
|
|
@@ -2393,8 +2764,8 @@ footer {
|
|
|
2393
2764
|
.sb-logo-badge {
|
|
2394
2765
|
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
|
|
2395
2766
|
display: flex; align-items: center; justify-content: center;
|
|
2396
|
-
font-weight: 800; font-size: 16px; color:
|
|
2397
|
-
background: linear-gradient(135deg, var(--
|
|
2767
|
+
font-weight: 800; font-size: 16px; color: var(--dash-ink);
|
|
2768
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
2398
2769
|
}
|
|
2399
2770
|
.sb-logo-word { font-size: 16px; font-weight: 700; color: var(--dash-text); letter-spacing: -0.01em; }
|
|
2400
2771
|
|
|
@@ -2423,7 +2794,7 @@ footer {
|
|
|
2423
2794
|
transition: background 0.15s, color 0.15s;
|
|
2424
2795
|
}
|
|
2425
2796
|
.sb-nav-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--dash-text); }
|
|
2426
|
-
.sb-nav-link.active { background: rgba(
|
|
2797
|
+
.sb-nav-link.active { background: rgba(34, 182, 207, 0.12); color: var(--dash-text); font-weight: 600; }
|
|
2427
2798
|
.sb-nav-link.active .sb-nav-ic { color: var(--dash-teal); }
|
|
2428
2799
|
.sb-nav-ic { display: inline-flex; color: var(--dash-text-muted); }
|
|
2429
2800
|
.sb-nav-label { flex: 1; }
|
|
@@ -2442,16 +2813,16 @@ footer {
|
|
|
2442
2813
|
.phealth-pct { font-size: 26px; font-weight: 800; line-height: 1; color: var(--dash-text); }
|
|
2443
2814
|
.phealth-pct-sign { font-size: 14px; font-weight: 700; margin-left: 1px; color: var(--dash-text-muted); }
|
|
2444
2815
|
.phealth-label { font-size: 12px; font-weight: 600; }
|
|
2445
|
-
.phealth--good .phealth-label { color: var(--
|
|
2816
|
+
.phealth--good .phealth-label { color: var(--status-done); }
|
|
2446
2817
|
.phealth--warn .phealth-label { color: var(--dash-sev-medium); }
|
|
2447
2818
|
.phealth--risk .phealth-label { color: var(--dash-sev-high); }
|
|
2448
2819
|
.phealth-spark { width: 100%; height: 36px; display: block; }
|
|
2449
2820
|
.phealth-spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
|
|
2450
|
-
.phealth--good .phealth-spark-line { stroke: var(--
|
|
2821
|
+
.phealth--good .phealth-spark-line { stroke: var(--status-done); }
|
|
2451
2822
|
.phealth--warn .phealth-spark-line { stroke: var(--dash-sev-medium); }
|
|
2452
2823
|
.phealth--risk .phealth-spark-line { stroke: var(--dash-sev-high); }
|
|
2453
2824
|
.phealth-spark-area { stroke: none; opacity: 0.14; }
|
|
2454
|
-
.phealth--good .phealth-spark-area { fill: var(--
|
|
2825
|
+
.phealth--good .phealth-spark-area { fill: var(--status-done); }
|
|
2455
2826
|
.phealth--warn .phealth-spark-area { fill: var(--dash-sev-medium); }
|
|
2456
2827
|
.phealth--risk .phealth-spark-area { fill: var(--dash-sev-high); }
|
|
2457
2828
|
|
|
@@ -2463,8 +2834,8 @@ footer {
|
|
|
2463
2834
|
.sb-avatar {
|
|
2464
2835
|
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
|
|
2465
2836
|
display: flex; align-items: center; justify-content: center;
|
|
2466
|
-
font-size: 12px; font-weight: 700; color:
|
|
2467
|
-
background: linear-gradient(135deg, var(--
|
|
2837
|
+
font-size: 12px; font-weight: 700; color: var(--dash-ink);
|
|
2838
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
2468
2839
|
}
|
|
2469
2840
|
.sb-profile-meta { display: flex; flex-direction: column; min-width: 0; }
|
|
2470
2841
|
.sb-profile-name { font-size: 13px; font-weight: 600; color: var(--dash-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
@@ -2490,8 +2861,8 @@ footer {
|
|
|
2490
2861
|
font-size: 12px; color: var(--dash-text-muted);
|
|
2491
2862
|
}
|
|
2492
2863
|
.tb-synced:hover { color: var(--dash-text); }
|
|
2493
|
-
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--
|
|
2494
|
-
.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(
|
|
2864
|
+
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-done); box-shadow: 0 0 0 3px rgba(60, 185, 138, 0.18); flex-shrink: 0; }
|
|
2865
|
+
.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(224, 166, 58, 0.18); animation: tb-pulse 0.8s ease-in-out infinite; }
|
|
2495
2866
|
@keyframes tb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
|
|
2496
2867
|
.tb-btn {
|
|
2497
2868
|
display: inline-flex; align-items: center; gap: 7px;
|
|
@@ -2503,8 +2874,8 @@ footer {
|
|
|
2503
2874
|
}
|
|
2504
2875
|
.tb-btn:hover { border-color: var(--dash-teal); }
|
|
2505
2876
|
.tb-btn--primary {
|
|
2506
|
-
background: linear-gradient(135deg, var(--
|
|
2507
|
-
border-color: transparent; color:
|
|
2877
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
2878
|
+
border-color: transparent; color: var(--dash-ink);
|
|
2508
2879
|
}
|
|
2509
2880
|
.tb-btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
|
|
2510
2881
|
.tb-btn--icon { padding: 8px 11px; }
|
|
@@ -2759,7 +3130,7 @@ footer {
|
|
|
2759
3130
|
border-radius: 50%;
|
|
2760
3131
|
display: inline-block;
|
|
2761
3132
|
}
|
|
2762
|
-
.donut-dot--done { background: var(--
|
|
3133
|
+
.donut-dot--done { background: var(--status-done); }
|
|
2763
3134
|
.donut-dot--prog { background: var(--dash-blue); }
|
|
2764
3135
|
.donut-dot--idle { background: var(--dash-sev-low); }
|
|
2765
3136
|
.donut-legend-label {
|
|
@@ -2806,8 +3177,8 @@ footer {
|
|
|
2806
3177
|
justify-content: center;
|
|
2807
3178
|
font-size: 20px;
|
|
2808
3179
|
border-radius: 10px;
|
|
2809
|
-
background:
|
|
2810
|
-
border: 1px solid
|
|
3180
|
+
background: var(--accent-bg);
|
|
3181
|
+
border: 1px solid var(--accent-border);
|
|
2811
3182
|
}
|
|
2812
3183
|
.cp-headtext { min-width: 0; }
|
|
2813
3184
|
.cp-titlerow {
|
|
@@ -2830,8 +3201,8 @@ footer {
|
|
|
2830
3201
|
padding: 2px 9px;
|
|
2831
3202
|
border-radius: 999px;
|
|
2832
3203
|
color: var(--dash-purple);
|
|
2833
|
-
background: rgba(
|
|
2834
|
-
border: 1px solid rgba(
|
|
3204
|
+
background: rgba(34, 182, 207, 0.12);
|
|
3205
|
+
border: 1px solid rgba(34, 182, 207, 0.3);
|
|
2835
3206
|
white-space: nowrap;
|
|
2836
3207
|
}
|
|
2837
3208
|
.cp-sub {
|
|
@@ -2887,14 +3258,14 @@ footer {
|
|
|
2887
3258
|
z-index: 1;
|
|
2888
3259
|
}
|
|
2889
3260
|
.cp-done .cp-node {
|
|
2890
|
-
background: var(--
|
|
2891
|
-
border-color: var(--
|
|
3261
|
+
background: var(--status-done);
|
|
3262
|
+
border-color: var(--status-done);
|
|
2892
3263
|
color: var(--dash-bg);
|
|
2893
3264
|
}
|
|
2894
3265
|
.cp-active .cp-node {
|
|
2895
3266
|
background: var(--dash-card);
|
|
2896
3267
|
border-color: var(--dash-purple);
|
|
2897
|
-
box-shadow: 0 0 0 4px rgba(
|
|
3268
|
+
box-shadow: 0 0 0 4px rgba(34, 182, 207, 0.2);
|
|
2898
3269
|
}
|
|
2899
3270
|
.cp-label {
|
|
2900
3271
|
font-size: 10px;
|
|
@@ -3009,7 +3380,7 @@ footer {
|
|
|
3009
3380
|
padding: 4px 9px;
|
|
3010
3381
|
border-radius: 999px;
|
|
3011
3382
|
color: var(--dash-blue);
|
|
3012
|
-
background: rgba(
|
|
3383
|
+
background: rgba(224, 166, 58, 0.15);
|
|
3013
3384
|
}
|
|
3014
3385
|
|
|
3015
3386
|
/* ── Blockers — icon + title/desc + severity pill (Row 2, Card 3) ── */
|
|
@@ -3051,16 +3422,16 @@ footer {
|
|
|
3051
3422
|
.bk-sev-medium { color: var(--dash-sev-medium); }
|
|
3052
3423
|
.bk-sev-low { color: var(--dash-sev-low); }
|
|
3053
3424
|
.bk-pill.bk-sev-high {
|
|
3054
|
-
background: rgba(
|
|
3055
|
-
border-color: rgba(
|
|
3425
|
+
background: rgba(236, 106, 94, 0.12);
|
|
3426
|
+
border-color: rgba(236, 106, 94, 0.35);
|
|
3056
3427
|
}
|
|
3057
3428
|
.bk-pill.bk-sev-medium {
|
|
3058
|
-
background: rgba(
|
|
3059
|
-
border-color: rgba(
|
|
3429
|
+
background: rgba(224, 166, 58, 0.12);
|
|
3430
|
+
border-color: rgba(224, 166, 58, 0.35);
|
|
3060
3431
|
}
|
|
3061
3432
|
.bk-pill.bk-sev-low {
|
|
3062
|
-
background: rgba(
|
|
3063
|
-
border-color: rgba(
|
|
3433
|
+
background: rgba(113, 125, 136, 0.12);
|
|
3434
|
+
border-color: rgba(113, 125, 136, 0.35);
|
|
3064
3435
|
}
|
|
3065
3436
|
|
|
3066
3437
|
/* ── RecentDecisions — title + status badge + date (Row 3, Card 1) ── */
|
|
@@ -3087,16 +3458,16 @@ footer {
|
|
|
3087
3458
|
white-space: nowrap;
|
|
3088
3459
|
}
|
|
3089
3460
|
.rd-badge--approved {
|
|
3090
|
-
color: var(--
|
|
3091
|
-
background:
|
|
3461
|
+
color: var(--status-done);
|
|
3462
|
+
background: var(--st-complete-wash);
|
|
3092
3463
|
}
|
|
3093
3464
|
.rd-badge--rejected {
|
|
3094
3465
|
color: var(--dash-sev-high);
|
|
3095
|
-
background: rgba(
|
|
3466
|
+
background: rgba(236, 106, 94, 0.12);
|
|
3096
3467
|
}
|
|
3097
3468
|
.rd-badge--proposed {
|
|
3098
|
-
color: var(--
|
|
3099
|
-
background:
|
|
3469
|
+
color: var(--status-todo);
|
|
3470
|
+
background: var(--st-planned-wash);
|
|
3100
3471
|
}
|
|
3101
3472
|
.rd-date {
|
|
3102
3473
|
flex: none;
|
|
@@ -3130,7 +3501,7 @@ footer {
|
|
|
3130
3501
|
border-top: 3px solid var(--dash-sev-low);
|
|
3131
3502
|
background: rgba(255, 255, 255, 0.02);
|
|
3132
3503
|
}
|
|
3133
|
-
.pt-seg--done { border-top-color: var(--
|
|
3504
|
+
.pt-seg--done { border-top-color: var(--status-done); }
|
|
3134
3505
|
.pt-seg--active { border-top-color: var(--dash-purple); }
|
|
3135
3506
|
.pt-seg--todo { border-top-color: var(--dash-sev-low); }
|
|
3136
3507
|
.pt-seg-name {
|
|
@@ -3149,7 +3520,7 @@ footer {
|
|
|
3149
3520
|
padding: 4px 9px;
|
|
3150
3521
|
border-radius: 999px;
|
|
3151
3522
|
color: var(--dash-blue);
|
|
3152
|
-
background: rgba(
|
|
3523
|
+
background: rgba(224, 166, 58, 0.15);
|
|
3153
3524
|
}
|
|
3154
3525
|
.bk-desc {
|
|
3155
3526
|
margin: 2px 0 0;
|
|
@@ -3172,16 +3543,16 @@ footer {
|
|
|
3172
3543
|
.bk-sev-medium { color: var(--dash-sev-medium); }
|
|
3173
3544
|
.bk-sev-low { color: var(--dash-sev-low); }
|
|
3174
3545
|
.bk-pill.bk-sev-high {
|
|
3175
|
-
background: rgba(
|
|
3176
|
-
border-color: rgba(
|
|
3546
|
+
background: rgba(236, 106, 94, 0.12);
|
|
3547
|
+
border-color: rgba(236, 106, 94, 0.35);
|
|
3177
3548
|
}
|
|
3178
3549
|
.bk-pill.bk-sev-medium {
|
|
3179
|
-
background: rgba(
|
|
3180
|
-
border-color: rgba(
|
|
3550
|
+
background: rgba(224, 166, 58, 0.12);
|
|
3551
|
+
border-color: rgba(224, 166, 58, 0.35);
|
|
3181
3552
|
}
|
|
3182
3553
|
.bk-pill.bk-sev-low {
|
|
3183
|
-
background: rgba(
|
|
3184
|
-
border-color: rgba(
|
|
3554
|
+
background: rgba(113, 125, 136, 0.12);
|
|
3555
|
+
border-color: rgba(113, 125, 136, 0.35);
|
|
3185
3556
|
}
|
|
3186
3557
|
.pt-seg-range {
|
|
3187
3558
|
font-size: 11px;
|
|
@@ -3195,15 +3566,15 @@ footer {
|
|
|
3195
3566
|
border-radius: 999px;
|
|
3196
3567
|
align-self: flex-start;
|
|
3197
3568
|
color: var(--dash-sev-low);
|
|
3198
|
-
background: rgba(
|
|
3569
|
+
background: rgba(113, 125, 136, 0.14);
|
|
3199
3570
|
}
|
|
3200
3571
|
.pt-seg--done .pt-seg-badge {
|
|
3201
|
-
color: var(--
|
|
3202
|
-
background:
|
|
3572
|
+
color: var(--status-done);
|
|
3573
|
+
background: var(--st-complete-wash);
|
|
3203
3574
|
}
|
|
3204
3575
|
.pt-seg--active .pt-seg-badge {
|
|
3205
3576
|
color: var(--dash-purple);
|
|
3206
|
-
background: rgba(
|
|
3577
|
+
background: rgba(34, 182, 207, 0.12);
|
|
3207
3578
|
}
|
|
3208
3579
|
@media (max-width: 700px) {
|
|
3209
3580
|
.pt-track { flex-direction: column; }
|
|
@@ -3233,7 +3604,7 @@ footer {
|
|
|
3233
3604
|
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
|
|
3234
3605
|
display: flex; align-items: center; justify-content: center;
|
|
3235
3606
|
font-weight: 800; font-size: 16px; color: var(--dash-ink);
|
|
3236
|
-
background: linear-gradient(135deg, var(--
|
|
3607
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
3237
3608
|
}
|
|
3238
3609
|
.sb-logo-word { font-size: 16px; font-weight: 700; color: var(--dash-text); letter-spacing: -0.01em; }
|
|
3239
3610
|
|
|
@@ -3262,7 +3633,7 @@ footer {
|
|
|
3262
3633
|
transition: background 0.15s, color 0.15s;
|
|
3263
3634
|
}
|
|
3264
3635
|
.sb-nav-link:hover { background: var(--dash-hover); color: var(--dash-text); }
|
|
3265
|
-
.sb-nav-link.active { background: rgba(
|
|
3636
|
+
.sb-nav-link.active { background: rgba(34, 182, 207, 0.12); color: var(--dash-text); font-weight: 600; }
|
|
3266
3637
|
.sb-nav-link.active .sb-nav-ic { color: var(--dash-teal); }
|
|
3267
3638
|
.sb-nav-ic { display: inline-flex; color: var(--dash-text-muted); }
|
|
3268
3639
|
.sb-nav-label { flex: 1; }
|
|
@@ -3281,16 +3652,16 @@ footer {
|
|
|
3281
3652
|
.phealth-pct { font-size: 26px; font-weight: 800; line-height: 1; color: var(--dash-text); }
|
|
3282
3653
|
.phealth-pct-sign { font-size: 14px; font-weight: 700; margin-left: 1px; color: var(--dash-text-muted); }
|
|
3283
3654
|
.phealth-label { font-size: 12px; font-weight: 600; }
|
|
3284
|
-
.phealth--good .phealth-label { color: var(--
|
|
3655
|
+
.phealth--good .phealth-label { color: var(--status-done); }
|
|
3285
3656
|
.phealth--warn .phealth-label { color: var(--dash-sev-medium); }
|
|
3286
3657
|
.phealth--risk .phealth-label { color: var(--dash-sev-high); }
|
|
3287
3658
|
.phealth-spark { width: 100%; height: 36px; display: block; }
|
|
3288
3659
|
.phealth-spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
|
|
3289
|
-
.phealth--good .phealth-spark-line { stroke: var(--
|
|
3660
|
+
.phealth--good .phealth-spark-line { stroke: var(--status-done); }
|
|
3290
3661
|
.phealth--warn .phealth-spark-line { stroke: var(--dash-sev-medium); }
|
|
3291
3662
|
.phealth--risk .phealth-spark-line { stroke: var(--dash-sev-high); }
|
|
3292
3663
|
.phealth-spark-area { stroke: none; opacity: 0.14; }
|
|
3293
|
-
.phealth--good .phealth-spark-area { fill: var(--
|
|
3664
|
+
.phealth--good .phealth-spark-area { fill: var(--status-done); }
|
|
3294
3665
|
.phealth--warn .phealth-spark-area { fill: var(--dash-sev-medium); }
|
|
3295
3666
|
.phealth--risk .phealth-spark-area { fill: var(--dash-sev-high); }
|
|
3296
3667
|
|
|
@@ -3303,7 +3674,7 @@ footer {
|
|
|
3303
3674
|
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
|
|
3304
3675
|
display: flex; align-items: center; justify-content: center;
|
|
3305
3676
|
font-size: 12px; font-weight: 700; color: var(--dash-ink);
|
|
3306
|
-
background: linear-gradient(135deg, var(--
|
|
3677
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
3307
3678
|
}
|
|
3308
3679
|
.sb-profile-meta { display: flex; flex-direction: column; min-width: 0; }
|
|
3309
3680
|
.sb-profile-name { font-size: 13px; font-weight: 600; color: var(--dash-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
@@ -3329,8 +3700,8 @@ footer {
|
|
|
3329
3700
|
font-size: 12px; color: var(--dash-text-muted);
|
|
3330
3701
|
}
|
|
3331
3702
|
.tb-synced:hover { color: var(--dash-text); }
|
|
3332
|
-
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--
|
|
3333
|
-
.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(
|
|
3703
|
+
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-done); box-shadow: 0 0 0 3px rgba(60, 185, 138, 0.18); flex-shrink: 0; }
|
|
3704
|
+
.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(224, 166, 58, 0.18); animation: tb-pulse 0.8s ease-in-out infinite; }
|
|
3334
3705
|
@keyframes tb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
|
|
3335
3706
|
.tb-btn {
|
|
3336
3707
|
display: inline-flex; align-items: center; gap: 7px;
|
|
@@ -3342,7 +3713,7 @@ footer {
|
|
|
3342
3713
|
}
|
|
3343
3714
|
.tb-btn:hover { border-color: var(--dash-teal); }
|
|
3344
3715
|
.tb-btn--primary {
|
|
3345
|
-
background: linear-gradient(135deg, var(--
|
|
3716
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
3346
3717
|
border-color: transparent; color: var(--dash-ink);
|
|
3347
3718
|
}
|
|
3348
3719
|
.tb-btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
|
|
@@ -3361,44 +3732,41 @@ footer {
|
|
|
3361
3732
|
════════════════════════════════════════════════════════════════════ */
|
|
3362
3733
|
|
|
3363
3734
|
:root {
|
|
3364
|
-
/* Sidebar surface —
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
--dash-sidebar: #0E1626;
|
|
3735
|
+
/* Sidebar surface — same value as --dash-card; the Diwan design uses
|
|
3736
|
+
one surface-1 for sidebar, topbar, and cards alike. */
|
|
3737
|
+
--dash-sidebar: var(--bg-elev-1);
|
|
3368
3738
|
/* Ink on accent-filled surfaces (logo badge, avatar, primary button,
|
|
3369
|
-
offline banner) —
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
--dash-term-bg: #050507;
|
|
3739
|
+
offline banner) — aliases the design's accent-fg contrast color. */
|
|
3740
|
+
--dash-ink: var(--accent-fg);
|
|
3741
|
+
/* Subtle hover overlay for nav items. */
|
|
3742
|
+
--dash-hover: var(--bg-hover);
|
|
3743
|
+
/* Sunken surface for the plain-text log view (OrchPanel) + xterm panel
|
|
3744
|
+
surround. The xterm canvas itself keeps its own dark JS theme — these
|
|
3745
|
+
style the chrome only. */
|
|
3746
|
+
--dash-term-bg: var(--bg-sunken);
|
|
3378
3747
|
--dash-term-text: #C8D8C8;
|
|
3379
3748
|
--dash-term-line: #A0C4A0;
|
|
3380
3749
|
--dash-term-tool: #7CB8FF;
|
|
3381
3750
|
}
|
|
3382
3751
|
|
|
3383
|
-
/* Light theme — same
|
|
3384
|
-
|
|
3385
|
-
toggle; accents (teal/purple/blue/amber/severity) stay identical. */
|
|
3752
|
+
/* Light theme — same alias approach; flips automatically with the base
|
|
3753
|
+
tokens above. */
|
|
3386
3754
|
[data-theme="light"] {
|
|
3387
|
-
--dash-bg:
|
|
3388
|
-
--dash-card:
|
|
3389
|
-
--dash-border:
|
|
3390
|
-
--dash-text:
|
|
3391
|
-
--dash-text-muted:
|
|
3392
|
-
--dash-sidebar:
|
|
3393
|
-
--dash-hover:
|
|
3394
|
-
--dash-term-bg:
|
|
3755
|
+
--dash-bg: var(--bg-page);
|
|
3756
|
+
--dash-card: var(--bg-elev-1);
|
|
3757
|
+
--dash-border: var(--border-subtle);
|
|
3758
|
+
--dash-text: var(--text-primary);
|
|
3759
|
+
--dash-text-muted: var(--text-tertiary);
|
|
3760
|
+
--dash-sidebar: var(--bg-elev-1);
|
|
3761
|
+
--dash-hover: var(--bg-hover);
|
|
3762
|
+
--dash-term-bg: var(--bg-sunken);
|
|
3395
3763
|
--dash-term-text: #334155;
|
|
3396
3764
|
--dash-term-line: #166534;
|
|
3397
|
-
--dash-term-tool:
|
|
3765
|
+
--dash-term-tool: var(--blue);
|
|
3398
3766
|
}
|
|
3399
3767
|
|
|
3400
|
-
/* Frame:
|
|
3401
|
-
|
|
3768
|
+
/* Frame: Diwan canvas base behind chrome AND content so the palette is
|
|
3769
|
+
continuous across the app shell and scroll area. */
|
|
3402
3770
|
.app-shell,
|
|
3403
3771
|
.main-scroll { background: var(--dash-bg); }
|
|
3404
3772
|
|
|
@@ -3450,7 +3818,7 @@ header.topbar {
|
|
|
3450
3818
|
}
|
|
3451
3819
|
.statusbar-dot {
|
|
3452
3820
|
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
|
3453
|
-
background: var(--
|
|
3821
|
+
background: var(--status-done);
|
|
3454
3822
|
}
|
|
3455
3823
|
.statusbar-dot--offline { background: var(--dash-sev-high); }
|
|
3456
3824
|
.statusbar-dot--busy { animation: pulse-dot 1s ease-in-out infinite; }
|
|
@@ -3677,7 +4045,7 @@ header.topbar {
|
|
|
3677
4045
|
font-size: 24px;
|
|
3678
4046
|
font-weight: 800;
|
|
3679
4047
|
color: #fff;
|
|
3680
|
-
background: linear-gradient(135deg, var(--
|
|
4048
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
|
|
3681
4049
|
}
|
|
3682
4050
|
.firstrun-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--dash-text); }
|
|
3683
4051
|
.firstrun-sub { margin: 0; font-size: 13px; color: var(--dash-text-muted); max-width: 440px; line-height: 1.5; }
|
|
@@ -3725,7 +4093,7 @@ select:focus-visible,
|
|
|
3725
4093
|
input:focus-visible,
|
|
3726
4094
|
summary:focus-visible,
|
|
3727
4095
|
[role="button"]:focus-visible {
|
|
3728
|
-
outline: 2px solid var(--dash-teal, #
|
|
4096
|
+
outline: 2px solid var(--dash-teal, #22b6cf);
|
|
3729
4097
|
outline-offset: 2px;
|
|
3730
4098
|
border-radius: 4px;
|
|
3731
4099
|
}
|
|
@@ -3751,8 +4119,8 @@ summary:focus-visible,
|
|
|
3751
4119
|
gap: var(--space-3);
|
|
3752
4120
|
padding: var(--space-2) var(--space-4);
|
|
3753
4121
|
margin-bottom: var(--space-3);
|
|
3754
|
-
background: var(--accent-amber, #
|
|
3755
|
-
color: var(--dash-ink, #
|
|
4122
|
+
background: var(--accent-amber, #e0a63a);
|
|
4123
|
+
color: var(--dash-ink, #04222a);
|
|
3756
4124
|
font-size: var(--text-sm);
|
|
3757
4125
|
font-weight: 600;
|
|
3758
4126
|
border-radius: 8px;
|
|
@@ -3799,6 +4167,11 @@ summary:focus-visible,
|
|
|
3799
4167
|
/* Slide-in sidebar sits above the backdrop; backdrop above content. */
|
|
3800
4168
|
.sidebar { z-index: 30; }
|
|
3801
4169
|
#sidebar-backdrop { z-index: 25; }
|
|
4170
|
+
/* Orchestration's 300px/1fr grid has no room to breathe on narrow
|
|
4171
|
+
viewports — stack left rail above the terminal/history column. */
|
|
4172
|
+
.orch-layout { grid-template-columns: 1fr; height: auto; }
|
|
4173
|
+
.orch-left-rail { min-height: auto; }
|
|
4174
|
+
.orch-term-dock { min-height: 260px; }
|
|
3802
4175
|
}
|
|
3803
4176
|
|
|
3804
4177
|
/* ══════════════════════════════════════════════════════════════════
|
|
@@ -4379,11 +4752,11 @@ summary:focus-visible,
|
|
|
4379
4752
|
.runner-picker-btn--run {
|
|
4380
4753
|
background: var(--accent-primary);
|
|
4381
4754
|
border-color: var(--accent-primary);
|
|
4382
|
-
color:
|
|
4755
|
+
color: var(--accent-fg);
|
|
4383
4756
|
}
|
|
4384
4757
|
.runner-picker-btn--run:hover {
|
|
4385
4758
|
background: var(--accent-hover);
|
|
4386
|
-
color:
|
|
4759
|
+
color: var(--accent-fg);
|
|
4387
4760
|
}
|
|
4388
4761
|
.runner-picker-btn--run:disabled {
|
|
4389
4762
|
opacity: 0.5;
|
|
@@ -4477,9 +4850,9 @@ summary:focus-visible,
|
|
|
4477
4850
|
}
|
|
4478
4851
|
.filter-chip:hover { border-color: var(--accent-primary); }
|
|
4479
4852
|
.filter-chip.active {
|
|
4480
|
-
background: var(--accent-
|
|
4481
|
-
color:
|
|
4482
|
-
border-color: var(--accent-
|
|
4853
|
+
background: var(--accent-bg);
|
|
4854
|
+
color: var(--text-primary);
|
|
4855
|
+
border-color: var(--accent-border);
|
|
4483
4856
|
}
|
|
4484
4857
|
.filter-chip-clear {
|
|
4485
4858
|
font-size: var(--text-2xs);
|
|
@@ -4964,8 +5337,8 @@ summary:focus-visible,
|
|
|
4964
5337
|
Status colors are --pg-* tokens scoped to the panel so both themes flip
|
|
4965
5338
|
them without touching the global token block. */
|
|
4966
5339
|
.pg-panel {
|
|
4967
|
-
--pg-done:
|
|
4968
|
-
--pg-active:
|
|
5340
|
+
--pg-done: var(--status-done);
|
|
5341
|
+
--pg-active: var(--accent-primary);
|
|
4969
5342
|
--pg-todo: var(--text-muted);
|
|
4970
5343
|
--pg-blocked: var(--amber);
|
|
4971
5344
|
margin-bottom: var(--space-4);
|
|
@@ -4973,10 +5346,6 @@ summary:focus-visible,
|
|
|
4973
5346
|
border-radius: var(--radius-4);
|
|
4974
5347
|
background: var(--bg-elev-1);
|
|
4975
5348
|
}
|
|
4976
|
-
[data-theme="light"] .pg-panel {
|
|
4977
|
-
--pg-done: #0d9488;
|
|
4978
|
-
--pg-active: #7c3aed;
|
|
4979
|
-
}
|
|
4980
5349
|
.pg-panel summary {
|
|
4981
5350
|
padding: var(--space-3) var(--space-5);
|
|
4982
5351
|
font-size: var(--text-xs);
|