@vale-dinap/lucidly 0.2.0 → 0.3.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.
Files changed (15) hide show
  1. package/CHANGELOG.md +59 -26
  2. package/README.md +49 -13
  3. package/dist/adapters/claude-code.js +38 -5
  4. package/dist/adapters/claude-tools.js +73 -0
  5. package/dist/adapters/shell-writes.js +506 -0
  6. package/dist/cli.js +19 -8
  7. package/dist/core/engine.js +93 -6
  8. package/dist/core/text.js +13 -0
  9. package/dist/server/server.js +1 -2
  10. package/dist/sources/claude-sessions.js +13 -0
  11. package/package.json +1 -1
  12. package/web/app.js +4406 -3411
  13. package/web/index.html +11 -3
  14. package/web/style.css +1185 -973
  15. package/web/theme.js +9 -0
package/web/style.css CHANGED
@@ -1,973 +1,1185 @@
1
- /* Lucidly — quiet surfaces, color only for meaning. */
2
- :root {
3
- --bg: #f7f7f8;
4
- --surface: #ffffff;
5
- --sunken: #f2f2f4;
6
- --hover: #f4f4f6;
7
- --border: #e8e8ec;
8
- --border-strong: #d9d9df;
9
- --text: #17171c;
10
- --muted: #6b6b76;
11
- --faint: #a3a3ad;
12
-
13
- --accent: #3d6df2;
14
- --accent-bg: #edf2fe;
15
- --done: #1a9e6a;
16
- --done-bg: #e8f6ef;
17
- --bad: #e0464e;
18
- --bad-bg: #fdeeee;
19
- --warn: #c0811a;
20
- --warn-bg: #fdf4e3;
21
- --agent: #8562e8;
22
- --edit: #d08a12;
23
- --other: #4fb3c4;
24
- --agent-bg: #f2eefd;
25
-
26
- --code: #f6f6f8;
27
- --r-lg: 12px;
28
- --r: 8px;
29
- --r-sm: 6px;
30
- --shadow: 0 1px 2px rgba(16, 16, 24, 0.04), 0 2px 8px rgba(16, 16, 24, 0.04);
31
- --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
32
- color-scheme: light;
33
- }
34
- @media (prefers-color-scheme: dark) {
35
- :root {
36
- --bg: #0e0f12;
37
- --surface: #15161a;
38
- --sunken: #1b1c21;
39
- --hover: #1d1e24;
40
- --border: #25262d;
41
- --border-strong: #31323a;
42
- --text: #ececf1;
43
- --muted: #9b9ba6;
44
- --faint: #62626d;
45
- --accent: #7096ff;
46
- --accent-bg: #1a2340;
47
- --done: #3fcf8e;
48
- --done-bg: #12291f;
49
- --bad: #ff6b6f;
50
- --bad-bg: #331a1c;
51
- --warn: #e9b04a;
52
- --warn-bg: #30260f;
53
- --agent: #a98cff;
54
- --edit: #e3a43c;
55
- --other: #3d98a8;
56
- --agent-bg: #251f3d;
57
- --code: #111216;
58
- --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
59
- color-scheme: dark;
60
- }
61
- }
62
-
63
- * { box-sizing: border-box; }
64
- html, body { height: 100%; margin: 0; }
65
- body {
66
- background: var(--bg); color: var(--text);
67
- font: 13.5px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
68
- font-feature-settings: 'tnum' 1;
69
- display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
70
- }
71
- button, input, select { font: inherit; color: inherit; }
72
- code, pre { font-family: var(--mono); font-size: 12px; }
73
- svg { flex: none; }
74
- .grow { flex: 1; }
75
- [hidden] { display: none !important; }
76
-
77
- /* ───────── top bar */
78
- .top {
79
- display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px;
80
- background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 6;
81
- }
82
- .brand { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -0.01em; padding-right: 14px; border-right: 1px solid var(--border); height: 24px; }
83
- .run { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
84
- .run-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; line-height: 1.25; }
85
- .run-sub { color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
86
- .pill {
87
- display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 99px;
88
- font-size: 12px; font-weight: 550; color: var(--muted); background: var(--sunken); white-space: nowrap;
89
- }
90
- .pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
91
- .pill[data-status='working'] { color: var(--accent); background: var(--accent-bg); }
92
- .pill[data-status='working'] i { background: var(--accent); animation: beat 1.5s ease-out infinite; }
93
- .pill[data-status='waiting'] { color: var(--warn); background: var(--warn-bg); }
94
- .pill[data-status='waiting'] i { background: var(--warn); }
95
- .pill[data-status='blocked'] { color: var(--bad); background: var(--bad-bg); }
96
- .pill[data-status='blocked'] i { background: var(--bad); }
97
-
98
- .seg { display: inline-flex; padding: 2px; background: var(--sunken); border-radius: 9px; gap: 2px; }
99
- .seg button { border: 0; background: none; padding: 4px 12px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 520; }
100
- .seg button:hover { color: var(--text); }
101
- .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
102
- .ibtns { display: flex; gap: 2px; }
103
- .ibtn {
104
- width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--r); border: 0; background: none;
105
- color: var(--muted); cursor: pointer;
106
- }
107
- .ibtn:hover { background: var(--hover); color: var(--text); }
108
- .ibtn svg, .search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
109
- .ibtn[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }
110
- .link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 550; padding: 4px 8px; border-radius: var(--r-sm); }
111
- .link-btn:hover { background: var(--accent-bg); }
112
- .btn { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); padding: 6px 14px; cursor: pointer; }
113
- .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; }
114
-
115
- /* ───────── layout */
116
- .main { flex: 1; display: flex; min-height: 0; }
117
- .pane { flex: 1 1 58%; min-width: 0; overflow-anchor: none; overflow-y: auto; overflow-x: hidden; scroll-padding-top: 64px; container-type: inline-size; }
118
- .detail { flex: 0 0 42%; max-width: 720px; overflow-y: auto; overflow-x: hidden; background: var(--surface); border-left: 1px solid var(--border); }
119
- #pathView, #actionsView, #overview { max-width: 940px; margin: 0 auto; }
120
- #pathView { padding: 4px 20px 120px; }
121
- .empty { text-align: center; color: var(--muted); margin: 14vh auto; max-width: 420px; }
122
- .empty h2 { color: var(--text); font-size: 17px; font-weight: 600; margin: 14px 0 4px; }
123
-
124
- /* ───────── overview */
125
- #overview { padding: 18px 20px 4px; }
126
- .ov { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 10px; }
127
- .ov-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; }
128
- .stat b { font-size: 18px; font-weight: 620; letter-spacing: -0.02em; margin-right: 5px; }
129
- .stat span { color: var(--muted); font-size: 12.5px; }
130
- .stat.bad b { color: var(--bad); }
131
- .stat.span { margin-left: auto; color: var(--faint); font-size: 12px; }
132
- .strip { margin-top: 12px; height: 26px; display: block; width: 100%; cursor: pointer; }
133
- .strip rect, .strip polygon { fill: var(--border-strong); }
134
- .strip .k-ok { fill: var(--done); opacity: 0.7; }
135
- .strip .k-ed { fill: var(--edit); }
136
- .strip .k-rd { fill: var(--other); }
137
- .strip rect.k-pend { fill: var(--border-strong); }
138
- .strip .k-sa { fill: var(--agent); }
139
- .strip .k-bad { fill: var(--bad); }
140
- .strip .k-live { fill: var(--accent); }
141
- .strip .k-sel { fill: var(--text); }
142
- .strip rect:hover, .strip polygon:hover { opacity: 0.55; }
143
- .strip line { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
144
- .strip-axis { display: flex; justify-content: space-between; gap: 12px; color: var(--faint); font-size: 11px; margin-top: 4px; }
145
- .strip-axis .lg { display: flex; gap: 12px; }
146
- .strip-axis .lg i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
147
-
148
- /* ───────── toolbar */
149
- .toolbar {
150
- position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
151
- max-width: 940px; margin: 0 auto; padding: 12px 20px 10px;
152
- background: var(--bg);
153
- box-shadow: 0 6px 8px -6px var(--bg);
154
- }
155
- .chips { display: flex; flex-wrap: wrap; gap: 4px; }
156
- .chip-f {
157
- display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px;
158
- border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 520;
159
- }
160
- .chip-f:hover { background: var(--hover); color: var(--text); }
161
- .chip-f.on { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow); }
162
- .chip-f .n { color: var(--faint); font-size: 11.5px; font-weight: 500; }
163
- .chip-f.bad .n { color: var(--bad); }
164
- .chip-f svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
165
- .switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
166
- .switch input { display: none; }
167
- .switch span { width: 26px; height: 16px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background 0.15s; }
168
- .switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
169
- .switch input:checked + span { background: var(--accent); }
170
- .switch input:checked + span::after { transform: translateX(10px); }
171
- .switch b { color: var(--bad); font-weight: 600; }
172
- .search { position: relative; display: flex; align-items: center; }
173
- .search svg { position: absolute; left: 9px; color: var(--faint); width: 14px; height: 14px; }
174
- .search input {
175
- width: 210px; height: 30px; padding: 0 10px 0 28px; border-radius: var(--r); border: 1px solid var(--border);
176
- background: var(--surface); outline: none; font-size: 12.5px;
177
- }
178
- .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
179
- .toolbar .vseg { margin-right: 6px; flex: none; }
180
- .pane.pin-ov { scroll-padding-top: calc(var(--ov-h, 0px) + 64px); }
181
- .pane.pin-ov #overview { position: sticky; top: 0; z-index: 5; background: var(--bg); }
182
- .pane.pin-ov .toolbar { top: var(--ov-h, 0px); }
183
- .ov { position: relative; }
184
- .ov-stats { padding-right: 34px; }
185
- .ov .pin { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; color: var(--faint); }
186
- .ov .pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
187
- .ov .pin:hover { color: var(--text); }
188
- .ov .pin.on { color: var(--accent); }
189
- .ov .pin.on svg { fill: var(--accent-bg); }
190
- /* pinned and scrolled: the same card, tighter (one line of stats, one row of subagents) */
191
- #overview, .ov, .ov-stats, .stat b, .stat span, .stat small, .stat.span, .strip, .layers, .layer-box, .layer-more, .nav, .ov .pin {
192
- transition: padding 0.18s ease-out, gap 0.18s ease-out, font-size 0.18s ease-out, height 0.18s ease-out, margin 0.18s ease-out, opacity 0.18s ease-out, transform 0.18s ease-out, top 0.18s ease-out;
193
- }
194
- .layers { height: var(--lh, 15px); }
195
- .layer-more.c1 { top: 0; opacity: 0; pointer-events: none; }
196
- #overview.compact { padding-top: 8px; }
197
- #overview.compact .ov { padding: 7px 14px 6px; }
198
- #overview.compact .ov-stats { gap: 1px 11px; padding-right: 30px; white-space: nowrap; }
199
- #overview.compact .stat b { font-size: 13.5px; margin-right: 3px; }
200
- #overview.compact .stat span { font-size: 11.5px; }
201
- #overview.compact .stat small { display: inline; margin: 0 0 0 4px; font-size: 10.5px; }
202
- #overview.compact .stat.span { font-size: 11px; }
203
- #overview.compact .strip { height: 16px; margin-top: 6px; }
204
- #overview.compact .layers { height: 15px; margin-top: 3px; }
205
- #overview.compact .layer-box.rx { opacity: 0; transform: translateY(-6px); pointer-events: none; }
206
- #overview.compact .layer-more:not(.c1) { opacity: 0; pointer-events: none; }
207
- #overview.compact .layer-more.c1 { opacity: 1; pointer-events: auto; }
208
- #overview.compact .nav { height: 10px; margin-top: 5px; }
209
- #overview.compact .nav-mini { top: 3px; }
210
- #overview.compact .strip-axis { margin-top: 2px; }
211
- #overview.compact .pin { top: 2px; right: 4px; transform: scale(0.82); }
212
- .toolbar select { height: 30px; max-width: 210px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); padding: 0 8px; font-size: 12.5px; }
213
- .tbtn { height: 30px; padding: 0 11px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
214
- .tbtn:hover { color: var(--text); border-color: var(--border-strong); }
215
-
216
- /* ───────── tasks */
217
- .task { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 8px; }
218
- .task.current { border-color: var(--border-strong); box-shadow: var(--shadow); }
219
- .task-h { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; user-select: none; border-radius: var(--r-lg); }
220
- .task-h:hover { background: var(--hover); }
221
- .task.open > .task-h { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
222
- .task.sel > .task-h { background: var(--accent-bg); }
223
- .tstat { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.6px solid var(--border-strong); }
224
- .tstat.s-done { background: var(--done); border-color: var(--done); }
225
- .tstat.s-done::after { content: ''; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.8px 1.8px; transform: translate(0, -1px) rotate(-45deg); }
226
- .tstat.s-active { border-color: var(--accent); }
227
- .tstat.s-active::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
228
- .working .tstat.s-active::after { animation: beat 1.5s ease-out infinite; }
229
- .tstat.s-waiting { border-color: var(--warn); }
230
- .tstat.s-waiting::after { content: ''; width: 6px; height: 7px; border: solid var(--warn); border-width: 0 2px; }
231
- .tstat.qa { border-style: dashed; background: none; }
232
- .tstat.qa::after { display: none; }
233
- .task-main { flex: 1; min-width: 0; }
234
- .task-title { font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
235
- .task.open .task-title { white-space: normal; }
236
- .task-meta { color: var(--faint); font-size: 12px; margin-top: 1px; display: flex; gap: 10px; flex-wrap: wrap; }
237
- .task-meta .bad { color: var(--bad); }
238
- .task-answer { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
239
- .segbar { display: flex; gap: 2px; width: 132px; height: 6px; flex: none; }
240
- .segbar i { min-width: 3px; border-radius: 2px; background: var(--border); }
241
- .segbar i.s-done { background: var(--done); opacity: 0.75; }
242
- .segbar i.s-active { background: var(--accent); }
243
- .working .segbar i.s-active { animation: glow 1.6s ease-in-out infinite; }
244
- .segbar i.blk { background: var(--bad); opacity: 1; }
245
- .chev { width: 16px; height: 16px; color: var(--faint); transition: transform 0.15s; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
246
- .task.open > .task-h .chev, .step.open > .step-h .chev { transform: rotate(90deg); }
247
-
248
- .task-b { padding: 2px 14px 12px; }
249
- .intent { color: var(--muted); font-size: 12.5px; margin: 0 0 6px 30px; }
250
- .intent b { color: var(--text); font-weight: 550; }
251
-
252
- /* steps on a rail */
253
- .steps { list-style: none; margin: 0; padding: 0; position: relative; }
254
- .steps::before { content: ''; position: absolute; left: 8.5px; top: 12px; bottom: 12px; width: 1.5px; background: var(--border); }
255
- .step { position: relative; }
256
- .step-h { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 6px 4px 0; border-radius: var(--r); cursor: pointer; }
257
- .step-h:hover { background: var(--hover); }
258
- .step.sel > .step-h { background: var(--accent-bg); }
259
- .mk { position: relative; z-index: 1; width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
260
- .mk::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--border-strong); background: var(--surface); box-sizing: border-box; }
261
- .step.s-done > .step-h .mk::before { background: var(--done); border-color: var(--done); }
262
- .step.s-active > .step-h .mk::before { width: 11px; height: 11px; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
263
- .working .step.s-active > .step-h .mk::before { animation: ring 1.8s ease-out infinite; }
264
- .step.s-failed > .step-h .mk::before { background: var(--bad); border-color: var(--bad); }
265
- .step.tentative > .step-h .mk::before { border-style: dashed; }
266
- .st-title { flex: 1; min-width: 0; font-weight: 520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
267
- .step.open > .step-h .st-title { white-space: normal; }
268
- .step.s-pending > .step-h .st-title { color: var(--muted); font-weight: 450; }
269
- .step.tentative .st-title::after { content: 'proposed'; margin-left: 8px; font-size: 11px; color: var(--faint); font-weight: 450; }
270
- .flags { display: flex; gap: 4px; }
271
- .flag { font-size: 11px; font-weight: 600; height: 18px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
272
- .flag.bad { background: var(--bad-bg); color: var(--bad); }
273
- .flag.sub { background: var(--warn-bg); color: var(--warn); }
274
- .flag.sa { background: var(--agent-bg); color: var(--agent); }
275
- .flag.ok { background: var(--done-bg); color: var(--done); }
276
- .st-count { color: var(--faint); font-size: 12px; min-width: 22px; text-align: right; }
277
- .exp { border: 0; background: none; padding: 2px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; }
278
- .exp:hover { background: var(--border); }
279
- .now { display: flex; align-items: center; gap: 7px; margin: -3px 0 4px 28px; font-size: 12px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
280
- .now.idle { color: var(--muted); }
281
- .spin { width: 10px; height: 10px; border: 1.6px solid var(--accent-bg); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; display: inline-block; }
282
-
283
- .step-b { margin: 2px 0 10px 28px; display: flex; flex-direction: column; gap: 8px; }
284
- .ctx { display: flex; flex-wrap: wrap; gap: 4px; }
285
- .tag {
286
- display: inline-flex; align-items: center; gap: 4px; max-width: 280px; height: 22px; padding: 0 7px; border-radius: 5px;
287
- background: var(--sunken); color: var(--muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
288
- }
289
- .tag.more { font-family: inherit; }
290
-
291
- .branch {
292
- display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r); cursor: pointer;
293
- border: 1px solid var(--border); font-size: 12.5px;
294
- }
295
- .branch:hover { border-color: var(--border-strong); }
296
- .branch.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
297
- .branch .bk { font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
298
- .branch .bt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
299
- .branch .bs { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
300
- .branch.unplanned { border-left: 2.5px solid var(--warn); }
301
- .branch.unplanned .bk { color: var(--warn); }
302
- .branch.subagent { border-left: 2.5px solid var(--agent); }
303
- .branch.subagent .bk { color: var(--agent); }
304
- .branch.blocker { border-color: transparent; background: var(--bad-bg); border-left: 2.5px solid var(--bad); }
305
- .branch.blocker .bk { color: var(--bad); }
306
- .branch.blocker.s-resolved { background: none; border-color: var(--border); border-left-color: var(--done); }
307
- .branch.blocker.s-resolved .bk { color: var(--done); }
308
- .branch.blocker.s-resolved .bt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
309
- .branch.note { border-style: dashed; color: var(--muted); }
310
- .branch.note.l-error { color: var(--bad); }
311
- .branch.note.you { border-style: solid; border-color: transparent; background: var(--sunken); }
312
- .nested { margin-left: 14px; display: flex; flex-direction: column; gap: 6px; }
313
-
314
- .mini { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
315
- .mini-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12.5px; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--muted); }
316
- .mini-row:hover { background: var(--hover); color: var(--text); }
317
- .mini-row.sel { background: var(--accent-bg); color: var(--text); }
318
- .mini-row .ml { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
319
- .mini-row .ms { width: 14px; text-align: center; font-size: 11px; }
320
- .mini-row.s-done .ms { color: var(--done); }
321
- .mini-row.s-failed, .mini-row.s-failed .ms { color: var(--bad); }
322
- .mini-more { font-size: 12px; color: var(--accent); background: none; border: 0; padding: 5px 6px; text-align: left; cursor: pointer; }
323
- .k { color: var(--faint); display: inline-flex; }
324
- .k svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
325
-
326
- .finish { display: flex; align-items: flex-start; gap: 10px; padding: 4px 6px 2px 0; cursor: pointer; border-radius: var(--r); }
327
- .finish:hover { background: var(--hover); }
328
- .finish .mk { margin-top: 4px; }
329
- .finish .mk::before { border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; }
330
- .finish.reached .mk::before { background: var(--done); border-color: var(--done); }
331
- .finish .ft { padding: 4px 0; color: var(--faint); font-size: 12.5px; }
332
- .finish.reached .ft { color: var(--text); font-size: 13px; }
333
- .finish .ft small { display: block; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 650; color: var(--faint); }
334
- mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
335
- .no-match { color: var(--faint); text-align: center; padding: 40px 0; }
336
-
337
- /* ───────── actions view */
338
- #actionsView { padding: 0 20px 120px; }
339
- .ag { margin-bottom: 14px; }
340
- .ag-h { display: flex; gap: 10px; align-items: baseline; padding: 8px 4px 6px; font-weight: 580; font-size: 12.5px; }
341
- .ag-h .agt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
342
- .ag-h .agm { color: var(--faint); font-weight: 450; font-size: 12px; white-space: nowrap; }
343
- .ag-h .agm .bad { color: var(--bad); }
344
- .ag-b { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
345
- .ar { display: grid; grid-template-columns: 58px 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
346
- .ar:last-child { border-bottom: 0; }
347
- .ar:hover { background: var(--hover); }
348
- .ar.sel { background: var(--accent-bg); }
349
- .ar .t { color: var(--faint); font-family: var(--mono); font-size: 11px; padding-top: 2px; }
350
- .ar .ic { padding-top: 2px; }
351
- .ar.s-failed .ic, .ar.s-failed .lbl { color: var(--bad); }
352
- .ar .lbl { font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
353
- .ar .cmd { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
354
- .ar .iss { font-size: 12px; color: var(--bad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
355
- .ar .wh { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
356
- .ar .wh .sa { color: var(--agent); }
357
- .ar .rt { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 11.5px; white-space: nowrap; padding-top: 1px; }
358
- .ar .rt .ok { color: var(--done); }
359
- .ar .rt .no { color: var(--bad); }
360
- .retry { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn); margin-left: 6px; }
361
- .a-more { display: block; margin: 6px auto 14px; }
362
-
363
- /* ───────── detail */
364
- .d-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
365
- .d-top { display: flex; align-items: center; gap: 8px; }
366
- .d-type { font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
367
- .badge { font-size: 11px; font-weight: 600; height: 20px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center; background: var(--sunken); color: var(--muted); }
368
- .badge.s-active { background: var(--accent-bg); color: var(--accent); }
369
- .badge.s-done, .badge.s-resolved { background: var(--done-bg); color: var(--done); }
370
- .badge.s-failed, .badge.s-open { background: var(--bad-bg); color: var(--bad); }
371
- .badge.s-waiting { background: var(--warn-bg); color: var(--warn); }
372
- .d-head h2 { margin: 6px 0 4px; font-size: 16px; font-weight: 620; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
373
- .d-meta { color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
374
- .crumb { color: var(--faint); font-size: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
375
- .crumb span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
376
- .crumb a { color: var(--accent); cursor: pointer; font-weight: 550; }
377
- .d-sec { border-bottom: 1px solid var(--border); }
378
- .d-sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px; cursor: pointer; font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); user-select: none; }
379
- .d-sec > summary::-webkit-details-marker { display: none; }
380
- .d-sec > summary .chev { width: 13px; height: 13px; }
381
- .d-sec[open] > summary .chev { transform: rotate(90deg); }
382
- .d-sec > summary .ctl { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; display: flex; gap: 12px; }
383
- .d-sec > summary .ctl a { color: var(--muted); cursor: pointer; }
384
- .d-sec > summary .ctl a:hover { color: var(--accent); }
385
- .d-body { padding: 0 20px 16px; }
386
- .d-body .loading { color: var(--faint); padding: 10px 0; }
387
-
388
- .ev { margin: 10px 0; overflow-wrap: anywhere; }
389
- .ev-text p { margin: 0 0 8px; }
390
- .ev-text ul, .ev-text ol { margin: 0 0 8px; padding-left: 20px; }
391
-
392
- .ev-text code { background: var(--sunken); padding: 1px 4px; border-radius: 4px; }
393
- .ev-text pre { background: var(--code); padding: 8px 10px; border-radius: var(--r-sm); overflow-x: auto; }
394
- .ev-prompt { background: var(--sunken); border-radius: var(--r); padding: 9px 12px; white-space: pre-wrap; }
395
- .who { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
396
- .ev-outcome { border-left: 2px solid var(--done); padding-left: 12px; }
397
- .ev-outcome .who { color: var(--done); }
398
- .ev-plan { border-left: 2px solid var(--accent); padding-left: 12px; }
399
- .ev-notice { color: var(--muted); font-size: 12px; font-style: italic; }
400
- .ev-notice.err { color: var(--bad); font-style: normal; }
401
- details.ev-think > summary { list-style: none; color: var(--faint); font-size: 12px; cursor: pointer; }
402
- details.ev-think > summary::-webkit-details-marker { display: none; }
403
- details.ev-think > div { color: var(--muted); white-space: pre-wrap; font-size: 12.5px; border-left: 2px solid var(--border); padding: 2px 10px; margin-top: 4px; }
404
- .scope { font-size: 11.5px; font-weight: 600; margin: 16px 0 4px; color: var(--warn); }
405
- .scope.subagent { color: var(--agent); }
406
- .scope.blocker { color: var(--bad); }
407
- .scope.back { color: var(--faint); font-weight: 500; }
408
-
409
- .act { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
410
- .act > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; list-style: none; font-size: 12.5px; }
411
- .act > summary::-webkit-details-marker { display: none; }
412
- .act > summary:hover { background: var(--hover); }
413
- .act .al { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
414
- .act .ad { color: var(--faint); font-family: var(--mono); font-size: 11px; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
415
- .act .as { width: 14px; text-align: center; font-size: 11px; }
416
- .act.s-done .as { color: var(--done); }
417
- .act.s-failed { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
418
- .act.s-failed .as, .act.s-failed .al { color: var(--bad); }
419
- .act .iss { color: var(--bad); font-size: 12px; padding: 0 10px 7px 31px; margin-top: -3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
420
- .pl { font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 7px 12px 0; background: var(--code); border-top: 1px solid var(--border); }
421
- .act pre { margin: 0; padding: 6px 12px 9px; background: var(--code); white-space: pre-wrap; word-break: break-word; max-height: 440px; overflow: auto; }
422
- .act pre.failed { color: var(--bad); }
423
- .show-all { display: block; width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--code); color: var(--accent); cursor: pointer; font-size: 12px; padding: 5px; }
424
-
425
- /* ───────── picker */
426
- .picker { width: min(680px, 92vw); max-height: 78vh; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); }
427
- .picker::backdrop { background: rgba(10, 12, 18, 0.32); backdrop-filter: blur(2px); }
428
- .picker-h { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); margin: 0; }
429
- .picker-h h3 { margin: 0; font-size: 14px; font-weight: 620; flex: 1; }
430
- .plist { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: calc(78vh - 110px); }
431
- .plist li { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--r); cursor: pointer; }
432
- .plist li:hover { background: var(--hover); }
433
- .plist .pm { flex: 1; min-width: 0; }
434
- .plist .pt { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
435
- .plist .ps { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
436
- .plist .pw { color: var(--faint); font-size: 12px; white-space: nowrap; }
437
- .plist .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
438
- .plist .dot.live { background: var(--done); box-shadow: 0 0 0 3px var(--done-bg); }
439
- .plist .mute { color: var(--faint); cursor: default; }
440
- .psec { font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 10px 18px 0; }
441
- #pickerOpen:not(:empty) { border-bottom: 1px solid var(--border); }
442
-
443
- .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); padding: 8px 14px; border-radius: var(--r); font-size: 12.5px; z-index: 30; box-shadow: var(--shadow); }
444
-
445
- @keyframes beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
446
- @keyframes ring { 0% { box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 11px transparent; } }
447
- @keyframes glow { 50% { opacity: 0.45; } }
448
- @keyframes spin { to { transform: rotate(360deg); } }
449
- @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
450
-
451
- @media (max-width: 960px) {
452
- .main { flex-direction: column; }
453
- .detail { flex: none; max-width: none; border-left: 0; border-top: 1px solid var(--border); max-height: 52vh; }
454
- .run-sub, .brand span { display: none; }
455
- .segbar { display: none; }
456
- }
457
-
458
- /* ───────── small cross-element rules */
459
- .nested { margin-top: 6px; }
460
- .nested .now { margin: 0; }
461
- .ar.s-failed .k, .mini-row.s-failed .k, .act.s-failed .k { color: var(--bad); }
462
- .mini-row.s-active .k, .ar.s-active .k { color: var(--accent); }
463
- .branch .k { margin-right: -2px; }
464
- .step-h .chev, .task-h .chev { flex: none; }
465
- .finish.reached .ft small { color: var(--done); }
466
- .ev.act > .pl:first-child { border-top: 0; }
467
- .task-meta span + span::before { content: '·'; margin-right: 10px; color: var(--border-strong); }
468
- .task-meta { gap: 0 10px; }
469
- #tbActions .chips { order: 2; flex-basis: 100%; }
470
- #tbActions .grow { display: none; }
471
-
472
- /* ───────── token meter */
473
- .meter-wrap { position: relative; }
474
- .meter {
475
- display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: var(--r);
476
- border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap;
477
- }
478
- .meter:hover, .meter.on { border-color: var(--border-strong); color: var(--text); }
479
- .meter svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
480
- .meter b { color: var(--text); font-weight: 620; }
481
- .meter .ctxn { padding-left: 10px; border-left: 1px solid var(--border); }
482
- .meter .live { color: var(--accent); font-weight: 550; }
483
- .pop {
484
- position: absolute; right: 0; top: 36px; width: 440px; z-index: 20; background: var(--surface); border: 1px solid var(--border);
485
- border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); padding: 14px 16px 12px;
486
- }
487
- .pop-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 620; margin-bottom: 10px; }
488
- .pop-h span { color: var(--faint); font-weight: 450; font-size: 12px; }
489
- .pop-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
490
- .pop-tot b { font-size: 17px; font-weight: 620; letter-spacing: -0.02em; margin-right: 5px; }
491
- .pop-tot span { color: var(--muted); font-size: 12.5px; }
492
- .pop-tot small { display: block; color: var(--faint); font-size: 11px; }
493
- .pop-t { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 12px; }
494
- .pop-t th { text-align: right; color: var(--faint); font-weight: 550; font-size: 11px; padding: 3px 4px; }
495
- .pop-t td { text-align: right; padding: 4px; border-top: 1px solid var(--border); }
496
- .pop-t th:first-child, .pop-t td:first-child { text-align: left; font-weight: 550; }
497
- .pop-t td.sh { width: 70px; }
498
- .pop-t td.sh i { display: block; height: 5px; border-radius: 3px; background: var(--accent); margin-left: auto; }
499
- .pop-sec { font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin: 12px 0 6px; }
500
- .pop-sec small { text-transform: none; letter-spacing: 0; font-weight: 450; }
501
- .rate { width: 100%; height: 44px; display: block; }
502
- .rate rect { fill: var(--accent); opacity: 0.8; }
503
- .rate line { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
504
- .rate-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; margin-top: 3px; }
505
- .pop-note { color: var(--faint); font-size: 11px; margin-top: 10px; }
506
- .uinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--faint); font-size: 12px; }
507
- .model { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--agent-bg); color: var(--agent); font-size: 11.5px; font-weight: 600; }
508
- .finish:not(.reached) .ft { color: var(--muted); }
509
- @media (max-width: 960px) { .meter .ctxn, .meter .live { display: none; } .pop { right: -80px; width: 360px; } }
510
-
511
- /* ───────── diffs */
512
- pre .add, pre .del, pre .hunk { display: inline-block; min-width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px; }
513
- pre .add { background: var(--done-bg); color: var(--done); }
514
- pre .del { background: var(--bad-bg); color: var(--bad); }
515
- pre .hunk { color: var(--accent); }
516
- pre .dh { color: var(--faint); font-weight: 600; }
517
- .dstat { font-family: var(--mono); font-size: 11px; display: inline-flex; gap: 5px; }
518
- .dstat .a { color: var(--done); }
519
- .dstat .d { color: var(--bad); }
520
-
521
- /* ───────── GitHub-style diff table */
522
- .dfile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; text-transform: none; letter-spacing: 0; font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--muted); padding-bottom: 6px; }
523
- .dfile > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
524
- .diff { background: var(--surface); border-top: 1px solid var(--border); overflow-x: auto; max-height: 520px; overflow-y: auto; }
525
- .diff table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12px; line-height: 1.6; }
526
- .diff td { padding: 0; vertical-align: top; }
527
- .diff .ln { width: 1%; min-width: 40px; padding: 0 8px; text-align: right; color: var(--faint); user-select: none; white-space: nowrap; background: var(--code); }
528
- .diff .sg { width: 18px; text-align: center; user-select: none; color: var(--faint); }
529
- .diff .cd { white-space: pre-wrap; word-break: break-word; padding-right: 12px; color: var(--text); }
530
- .diff .dl-add { background: color-mix(in srgb, var(--done) 11%, transparent); }
531
- .diff .dl-add .ln { background: color-mix(in srgb, var(--done) 18%, transparent); color: var(--done); }
532
- .diff .dl-add .sg { color: var(--done); }
533
- .diff .dl-del { background: color-mix(in srgb, var(--bad) 10%, transparent); }
534
- .diff .dl-del .ln { background: color-mix(in srgb, var(--bad) 17%, transparent); color: var(--bad); }
535
- .diff .dl-del .sg { color: var(--bad); }
536
- .diff .dl-add .wd { background: color-mix(in srgb, var(--done) 32%, transparent); border-radius: 2px; }
537
- .diff .dl-del .wd { background: color-mix(in srgb, var(--bad) 30%, transparent); border-radius: 2px; }
538
- .diff .dl-h td { background: var(--accent-bg); color: var(--accent); padding: 2px 10px; font-size: 11.5px; }
539
- .diff .dl-ctx .cd { color: var(--muted); }
540
-
541
- /* ───────── syntax colours (GitHub-like) */
542
- :root { --tk-k: #cf222e; --tk-s: #0a3069; --tk-c: #6e7781; --tk-n: #0550ae; --tk-f: #8250df; --tk-v: #953800; --tk-b: #0550ae; --tk-fl: #116329; --tk-o: #cf222e; }
543
- @media (prefers-color-scheme: dark) {
544
- :root { --tk-k: #ff7b72; --tk-s: #a5d6ff; --tk-c: #8b949e; --tk-n: #79c0ff; --tk-f: #d2a8ff; --tk-v: #ffa657; --tk-b: #79c0ff; --tk-fl: #7ee787; --tk-o: #ff7b72; }
545
- }
546
- .tk-k { color: var(--tk-k); }
547
- .tk-s { color: var(--tk-s); }
548
- .tk-c { color: var(--tk-c); font-style: italic; }
549
- .tk-n { color: var(--tk-n); }
550
- .tk-f { color: var(--tk-f); }
551
- .tk-v { color: var(--tk-v); }
552
- .tk-b { color: var(--tk-b); }
553
- .tk-fl { color: var(--tk-fl); }
554
- .tk-o { color: var(--tk-o); }
555
- .ar .cmd .tk-c { font-style: normal; }
556
-
557
- /* ───────── strip zoom navigator */
558
- .nav { position: relative; height: 14px; margin-top: 8px; border-radius: 4px; background: var(--sunken); cursor: pointer; touch-action: none; user-select: none; }
559
- .nav-mini { position: absolute; left: 0; right: 0; top: 5px; height: 4px; width: 100%; }
560
- .nav-mini rect { fill: var(--border-strong); }
561
- .nav-mini rect.k-bad { fill: var(--bad); }
562
- .nav-win { position: absolute; top: 0; bottom: 0; min-width: 10px; border: 1.5px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); cursor: grab; }
563
- .zooming, .zooming * { cursor: grabbing !important; }
564
- .nav-h { position: absolute; top: -2px; bottom: -2px; width: 10px; cursor: ew-resize; }
565
- .nav-h[data-h='a'] { left: -6px; }
566
- .nav-h[data-h='b'] { right: -6px; }
567
- .nav-h::after { content: ''; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--accent); }
568
- .zctl { display: inline-flex; gap: 2px; margin-left: 6px; }
569
- .zctl button { height: 18px; min-width: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; }
570
- .zctl button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
571
- .zctl button:disabled { opacity: 0.4; cursor: default; }
572
- .zrange { color: var(--muted); }
573
- .strip-axis .lg { align-items: center; flex-wrap: wrap; justify-content: center; }
574
-
575
- /* ───────── recovered vs unresolved */
576
- .strip .k-rec { fill: var(--bad); opacity: 0.35; }
577
- .lg-rec { background: var(--bad); opacity: 0.35; }
578
- .flag.rec { background: var(--sunken); color: var(--muted); font-weight: 550; }
579
- .stat small { display: block; color: var(--faint); font-size: 11px; margin-top: -2px; }
580
- .stat.calm b { color: var(--done); }
581
- .fb { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 7px; padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
582
- .fb.rec { color: var(--muted); background: var(--sunken); }
583
- .fb.open { color: var(--bad); background: var(--bad-bg); }
584
- .ar.s-failed:has(.fb.rec) .lbl { color: var(--text); }
585
- .ar.s-failed:has(.fb.rec) .iss { color: color-mix(in srgb, var(--bad) 65%, var(--muted)); }
586
- .act.s-failed:has(.fb.rec) { border-color: var(--border); }
587
- .act.s-failed:has(.fb.rec) .al { color: var(--text); }
588
- .err-seg button { font-size: 12px; padding: 3px 10px; }
589
- .err-seg button b { font-weight: 600; color: var(--muted); margin-left: 2px; }
590
- .err-seg button b.bad { color: var(--bad); }
591
- .err-seg button:disabled { opacity: 0.45; cursor: default; }
592
-
593
- /* ───────── subagent lane */
594
- .strip rect.k-span { fill: var(--agent); }
595
- .lane { margin-top: 12px; padding: 10px 12px 8px; border: 1px solid color-mix(in srgb, var(--agent) 35%, var(--border)); border-left: 3px solid var(--agent); border-radius: 8px; background: color-mix(in srgb, var(--agent) 5%, var(--surface)); }
596
- @keyframes lane-in { from { opacity: 0; transform: translateY(-4px); } }
597
- .lane-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
598
- .lane-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--agent); }
599
- .lane-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
600
- .lane-t:hover { text-decoration: underline; }
601
- .lane-st { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
602
- .lane-st.s-failed { color: var(--bad); }
603
- .lane-st.s-done { color: var(--done); }
604
- .lane-h .ibtn { width: 24px; height: 24px; }
605
- .lane-m { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
606
- .lane-m i { font-style: normal; color: var(--faint); }
607
- .lane-m .bad { color: var(--bad); }
608
- .lane-strip { height: 26px; }
609
- .lane-strip rect.k-sa { fill: var(--agent); }
610
- .lane-empty { font-size: 12px; color: var(--faint); padding: 4px 0; }
611
- .now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
612
- @keyframes pulse { 50% { opacity: 0.35; } }
613
-
614
- /* ───────── token stat in the overview */
615
- .stat.tokstat { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
616
- .stat.tokstat:hover b { color: var(--accent); }
617
-
618
- /* ───────── file edits view */
619
- .fsum { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; font-size: 13px; color: var(--muted); position: sticky; top: var(--tb-h, 52px); z-index: 3; background: var(--bg); box-shadow: 0 6px 8px -6px var(--bg); }
620
- .pane.pin-ov .fsum { top: calc(var(--ov-h, 0px) + var(--tb-h, 52px)); }
621
- .fsum b { color: var(--text); font-weight: 620; }
622
- .fsum-l { font-size: 12px; color: var(--faint); }
623
- .fsort button { font-size: 12px; padding: 3px 10px; }
624
- .fcard { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 6px; overflow: hidden; }
625
- .fcard.open { border-color: var(--border-strong); }
626
- .fh { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; min-width: 0; font-size: 13px; }
627
- .fh:hover { background: var(--hover); }
628
- .fh .chev { transition: transform 0.12s; flex: none; }
629
- .fh.open .chev { transform: rotate(90deg); }
630
- .fpath { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
631
- .fdir { color: var(--faint); }
632
- .fpath b { font-weight: 600; color: var(--text); }
633
- .ftag { flex: none; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; background: var(--sunken); color: var(--muted); }
634
- .ftag.bad { background: var(--bad-bg); color: var(--bad); }
635
- .fspark { flex: none; width: 120px; height: 14px; }
636
- .fspark .k-base { fill: var(--border); }
637
- .fspark .k-ok { fill: var(--done); }
638
- .fspark .k-w { fill: var(--accent); }
639
- .fspark .k-bad { fill: var(--bad); }
640
- .fcount { flex: none; width: 58px; text-align: right; color: var(--muted); font-size: 12px; }
641
- .fdiff { flex: none; width: 78px; text-align: right; }
642
- .fago { flex: none; width: 62px; text-align: right; color: var(--faint); font-size: 12px; }
643
- .fbody { border-top: 1px solid var(--border); padding: 4px 0 6px; }
644
- .fbar { display: flex; align-items: center; padding: 4px 14px 6px 36px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 600; }
645
- .linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 550; cursor: pointer; }
646
- .fe { display: grid; grid-template-columns: 62px 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; padding: 6px 14px 6px 36px; cursor: pointer; font-size: 13px; }
647
- .fe:hover { background: var(--hover); }
648
- .fe.sel { background: var(--accent-bg); }
649
- .fe-t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
650
- .fe-k { font-size: 11px; color: var(--muted); }
651
- .fe-m { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; }
652
- .fe-title { overflow: hidden; text-overflow: ellipsis; color: var(--text); flex: 0 1 auto; }
653
- .fe-where { overflow: hidden; text-overflow: ellipsis; color: var(--faint); font-size: 12px; flex: 1 1 0; min-width: 40px; }
654
- .fe.s-failed .fe-title { color: var(--bad); }
655
- .fe-diff { padding: 2px 14px 10px 36px; }
656
- .fe-diff .dfile { display: none; }
657
- @media (max-width: 960px) { .fspark, .fago { display: none; } }
658
-
659
- .pill.warn { background: var(--warn-bg); color: var(--warn); margin-right: 8px; white-space: nowrap; cursor: help; }
660
- .ftag:not(.bad) { text-transform: none; letter-spacing: 0; font-weight: 550; }
661
- .fgroup { display: flex; align-items: center; gap: 8px; width: 100%; margin: 14px 0 6px; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: left; }
662
- .fgroup:hover { color: var(--text); }
663
- .fgroup .chev { transition: transform 0.12s; }
664
- .fgroup .chev.open { transform: rotate(90deg); }
665
- .fgroup .n { font-weight: 500; color: var(--faint); }
666
- .fgroup-h { margin-left: auto; font-weight: 400; color: var(--faint); font-size: 12px; }
667
-
668
- /* ───────── kinds on the strip, and "the agent is working" */
669
- .lg-ed { background: var(--edit); clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%); height: 9px !important; }
670
- .lg-rd { background: var(--other); height: 4px !important; vertical-align: 1px !important; }
671
- .strip .k-now { fill: var(--accent); animation: now-pulse 1.1s ease-in-out infinite; }
672
- @keyframes now-pulse { 50% { opacity: 0.25; } }
673
- .ov.working, .task.current.working { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); animation: work-glow 2.4s ease-in-out infinite; }
674
- @keyframes work-glow {
675
- 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 10px -2px color-mix(in srgb, var(--accent) 25%, transparent); }
676
- 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 18px 0 color-mix(in srgb, var(--accent) 38%, transparent); }
677
- }
678
- @media (prefers-reduced-motion: reduce) { .ov.working, .task.current.working { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); } }
679
- .lane.enter { animation: lane-in 0.16s ease-out; }
680
- .lane.working { animation: lane-glow 2.4s ease-in-out infinite; }
681
- .lane.enter.working { animation: lane-in 0.16s ease-out, lane-glow 2.4s ease-in-out infinite; }
682
- @keyframes lane-glow { 50% { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--agent) 45%, transparent); } }
683
- .switch.off { opacity: 0.45; cursor: default; }
684
-
685
- /* ───────── subagent layers under the main track */
686
- .layers { position: relative; margin-top: 4px; min-height: 15px; }
687
- .layer-box { position: absolute; height: 15px; min-width: 12px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--agent) 70%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--agent) 22%, var(--surface)); color: var(--text); font: inherit; font-size: 10.5px; line-height: 13px; text-align: left; cursor: pointer; overflow: hidden; }
688
- .layer-box span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
689
- .layer-box:hover { background: color-mix(in srgb, var(--agent) 34%, var(--surface)); }
690
- .layer-box.sel { background: var(--agent); color: #fff; border-color: var(--agent); }
691
- .layer-box.bad { border-color: var(--bad); }
692
- .layer-box.running { border-style: dashed; animation: now-pulse-box 1.4s ease-in-out infinite; }
693
- @keyframes now-pulse-box { 50% { background: color-mix(in srgb, var(--agent) 40%, var(--surface)); } }
694
- .lg-sa { background: color-mix(in srgb, var(--agent) 22%, var(--surface)); border: 1px solid var(--agent); width: 12px !important; box-sizing: border-box; }
695
-
696
- /* ───────── file edits: history layout */
697
- .flayout button { font-size: 12px; padding: 3px 10px; }
698
- .fhist { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; padding-bottom: 4px; }
699
- .fh-goal { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px 4px; font-size: 12px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); }
700
- .fh-goal:first-child { border-top: 0; }
701
- .fh-goal span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
702
- .fe.fe-hist { padding-left: 14px; }
703
- .fe-hist .fpath { flex: 0 1 auto; font-size: 12px; }
704
- .fhist .fe-diff { padding-left: 14px; }
705
-
706
- /* ───────── open session, on the left */
707
- .open-btn { margin-left: 6px; }
708
- .open-btn svg { fill: none; }
709
- #runBox { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-left: -2px; }
710
- #runBox:hover { background: var(--hover); }
711
- .picker-f { display: flex; align-items: center; gap: 8px; margin: 6px 14px 12px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
712
- .picker-f:hover { color: var(--text); border-color: var(--accent); }
713
- .picker-f svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
714
-
715
- /* ───────── jump to the end */
716
- .fab-wrap { position: sticky; bottom: 18px; height: 0; max-width: 940px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: flex-end; pointer-events: none; z-index: 5; }
717
- .fab { pointer-events: auto; position: absolute; bottom: 0; left: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); display: grid; place-items: center; cursor: pointer; animation: fab-in 0.14s ease-out; }
718
- .fab:hover { border-color: var(--accent); color: var(--accent); }
719
- .fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
720
- .fab-n { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 650; line-height: 18px; text-align: center; }
721
- @keyframes fab-in { from { opacity: 0; transform: translateY(6px); } }
722
- .layer-more { position: absolute; height: 15px; padding: 0 5px; border-radius: 4px; background: var(--agent); color: #fff; font-size: 10px; font-weight: 650; line-height: 15px; cursor: help; z-index: 1; }
723
- .save-btn { margin-left: -4px; }
724
- .save-btn svg { fill: none; }
725
- .flag.untr { color: var(--faint); background: transparent; border: 1px dashed var(--border-strong); }
726
- .step-h.untracked .mk { opacity: 0.55; }
727
-
728
- /* ───────── simple view: tasks on a spine, steps as a chain of nodes */
729
- .flow { padding-top: 4px; }
730
- .fg { position: relative; }
731
- .fg::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border-strong); }
732
- .fg:first-child::before { top: 22px; }
733
- .fg:last-child::before { bottom: auto; height: 22px; }
734
- .fg:only-child::before { display: none; }
735
- .fg-h { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 6px 8px 6px 0; cursor: pointer; user-select: none; }
736
- .fg-n { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-strong); color: var(--muted); transition: background 0.45s, border-color 0.45s, color 0.45s; }
737
- .fg-n .gl { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
738
- .fg-n.st-done { border-color: var(--done); background: var(--done-bg); color: var(--done); }
739
- .fg-n.st-live, .fg-n.st-idle { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent); }
740
- .fg-n.st-idle { border-color: var(--accent); }
741
- .fg-n.st-live::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); }
742
- .fg-n.st-live::after { animation: spin 1.1s linear infinite; }
743
- .fg-n.st-live { animation: fg-beat 2s ease-out infinite; }
744
- @keyframes fg-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
745
- .fg-n.st-wait { background: var(--sunken); }
746
- .fg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
747
- .fg-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
748
- .fg-h:hover .fg-title { color: var(--accent); }
749
- .fg.qa .fg-title { font-size: 13px; font-weight: 500; }
750
- .fg-meta { display: flex; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
751
- .fg-meta i { font-style: normal; color: var(--faint); }
752
- .fg-meta .bad { color: var(--bad); }
753
- .fg-ans { overflow: hidden; text-overflow: ellipsis; }
754
- .fg-h .chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2; transition: transform 0.3s; }
755
- .fg.open .fg-h .chev { transform: rotate(90deg); }
756
- .fg.dim { opacity: 0.38; }
757
- .fg-b { display: grid; grid-template-rows: 0fr; margin-left: 46px; transition: grid-template-rows 0.38s cubic-bezier(0.3, 0.7, 0.2, 1); }
758
- .fg.open .fg-b { grid-template-rows: 1fr; }
759
- .fg-bi { position: relative; min-height: 0; overflow: hidden; }
760
- .chain-in { display: flex; width: max-content; min-width: 100%; }
761
- .chain { position: relative; overflow-x: auto; overflow-y: hidden; padding: 14px 6px 12px; margin: 2px 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; scroll-padding-left: 104px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; opacity: 0; transition: opacity 0.2s; }
762
- .fg.open .chain { opacity: 1; transition: opacity 0.3s 0.05s; }
763
- .fg-bi.more-r::after { content: ''; position: absolute; right: 1px; top: 3px; bottom: 15px; width: 56px; border-radius: 0 14px 14px 0; background: linear-gradient(to right, transparent, var(--surface)); pointer-events: none; }
764
-
765
- .fn { position: relative; flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
766
- .fn.start { position: sticky; left: 0; z-index: 2; background: linear-gradient(to right, var(--surface) 80%, transparent); box-shadow: -8px 0 0 var(--surface); }
767
- .fn-s { position: relative; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: transform 0.18s; }
768
- .fn-s:hover { transform: translateY(-1px) scale(1.07); }
769
- .fn .shp { position: absolute; inset: 0; width: 36px; height: 36px; overflow: visible; }
770
- .fn .sh { fill: var(--fill, var(--surface)); stroke: var(--stroke, var(--border-strong)); stroke-width: 1.8; stroke-linejoin: round; transition: fill 0.45s, stroke 0.45s; }
771
- .fn .gl { position: relative; width: 15px; height: 15px; fill: none; stroke: var(--ink, var(--faint)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.45s; }
772
- .fn.k-edit { --c: var(--edit); }
773
- .fn.k-command { --c: var(--done); }
774
- .fn.k-read { --c: var(--other); }
775
- .fn.k-agent { --c: var(--agent); }
776
- .fn.k-ask, .fn.k-start { --c: var(--muted); }
777
- .fn.k-end { --c: var(--done); }
778
- .fn.k-todo { --c: var(--faint); }
779
- .fn.st-done { --fill: color-mix(in srgb, var(--c) 16%, var(--surface)); --stroke: var(--c); --ink: var(--c); }
780
- .fn.st-done.untr { --fill: color-mix(in srgb, var(--c) 7%, var(--surface)); }
781
- .fn.st-live, .fn.st-idle { --fill: var(--accent-bg); --stroke: var(--accent); --ink: var(--accent); }
782
- .fn.st-bad { --fill: var(--bad-bg); --stroke: var(--bad); --ink: var(--bad); }
783
- .fn.st-pend { --fill: var(--surface); --stroke: var(--border-strong); --ink: var(--faint); }
784
- .fn.st-pend .sh { stroke-dasharray: 3.2 3; }
785
- .fn.st-start { --fill: var(--sunken); --stroke: var(--border-strong); --ink: var(--muted); }
786
- .fn.st-wait { --fill: var(--sunken); --stroke: var(--faint); --ink: var(--muted); }
787
- .fn.st-live .fn-s::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; animation: fn-halo 1.8s ease-out infinite; }
788
- @keyframes fn-halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 75%, 100% { box-shadow: 0 0 0 12px transparent; } }
789
- .fn.sel .fn-s::after { content: ''; position: absolute; inset: -6px; border-radius: 12px; border: 2px solid var(--accent); }
790
- .fn-l { width: 88px; font-size: 11.5px; line-height: 1.3; color: var(--muted); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color 0.3s; }
791
- .fn.st-live .fn-l, .fn.st-idle .fn-l, .fn.sel .fn-l { color: var(--text); }
792
- .fn.st-pend .fn-l { color: var(--faint); }
793
- .fn.dim { opacity: 0.32; }
794
- .fn-n { position: absolute; right: -10px; bottom: -6px; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted); font-size: 9.5px; font-weight: 600; line-height: 13px; text-align: center; }
795
- .fn-b { position: absolute; top: -4px; right: -5px; width: 14px; height: 14px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center; }
796
- .fn-b.bad { background: var(--bad); }
797
- .fn-b.rec { top: -2px; right: -2px; width: 9px; height: 9px; background: color-mix(in srgb, var(--bad) 45%, var(--surface)); border: 1.5px solid var(--surface); }
798
- /* connector from the previous node: solid where the work went, dashed ahead, marching into the live node */
799
- .fl { position: absolute; top: 17px; left: -26px; width: 52px; height: 2px; border-radius: 1px; background: var(--border-strong); transform-origin: left center; }
800
- .fn.start .fl { display: none; }
801
- .fn.st-pend .fl, .fn.st-wait .fl { background: repeating-linear-gradient(to right, var(--border-strong) 0 4px, transparent 4px 8px); }
802
- .fn.st-live .fl { background: repeating-linear-gradient(to right, var(--accent) 0 5px, transparent 5px 10px); background-size: 10px 2px; animation: fl-march 0.7s linear infinite; }
803
- @keyframes fl-march { to { background-position: 10px 0; } }
804
- /* entrances and changes */
805
- .fn.enter .fn-s { animation: fn-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
806
- .fn.enter .fl { animation: fl-draw 0.32s ease-out both; }
807
- .fn.enter .fn-l { animation: fn-fade 0.35s 0.14s ease-out both; }
808
- @keyframes fn-pop { from { opacity: 0; transform: scale(0.3); } }
809
- @keyframes fl-draw { from { transform: scaleX(0); } }
810
- @keyframes fn-fade { from { opacity: 0; transform: translateY(3px); } }
811
- .fn.just-done .fn-s { animation: fn-done 0.55s ease-out; }
812
- .fn.just-done .fn-s::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; animation: fn-flash 0.7s ease-out; }
813
- @keyframes fn-done { 30% { transform: scale(1.18); } }
814
- @keyframes fn-flash { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
815
- .fg.opening .fn { animation: fn-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
816
- @keyframes fn-in { from { opacity: 0; transform: translateX(-12px); } }
817
- .fg.enter { animation: fg-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
818
- .fg.enter .fg-n { animation: fn-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
819
- @keyframes fg-in { from { opacity: 0; transform: translateY(10px); } }
820
- #overview.compact .strip { margin-top: 6px; }
821
-
822
- /* ───────── keep awake */
823
- .wake-wrap { position: relative; margin-left: 4px; }
824
- .wake { color: var(--faint); }
825
- .wake svg { width: 20px; height: 20px; stroke-width: 1.7; }
826
- .wake .steam { opacity: 0; transition: opacity 0.3s; }
827
- .wake[data-wake='awake'] { color: var(--accent); }
828
- .wake[data-wake='awake'] .steam { opacity: 1; animation: steam 2.4s ease-in-out infinite; }
829
- .wake[data-wake='wait'] { color: var(--muted); }
830
- .wake[data-wake='err'] { color: var(--bad); }
831
- @keyframes steam { 50% { opacity: 0.35; transform: translateY(-0.6px); } }
832
- .wake-pop { left: 0; right: auto; width: 330px; }
833
- .wk-row { display: flex; color: var(--text); font-size: 13px; margin: 2px 0 10px; }
834
- .wk-opt { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px 2px; cursor: pointer; font-size: 12.5px; }
835
- .wk-opt input { margin: 2px 0 0; accent-color: var(--accent); }
836
- .wk-opt b { font-weight: 560; }
837
- .wk-opt small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
838
- .wk-st { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: var(--r); background: var(--sunken); font-size: 12px; color: var(--muted); }
839
- .wk-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
840
- .wk-st.st-awake { color: var(--text); }
841
- .wk-st.st-awake i { background: var(--accent); animation: now-pulse 1.8s ease-in-out infinite; }
842
- .wk-st.st-err i { background: var(--bad); }
843
- .wk-note { margin: 8px 0 0; color: var(--faint); font-size: 11px; line-height: 1.4; }
844
-
845
- /* ───────── markdown in the details panel */
846
- .ev-text h3, .ev-text h4, .ev-text h5, .ev-text h6 { margin: 14px 0 6px; line-height: 1.3; font-weight: 640; }
847
- .ev-text h3 { font-size: 15.5px; }
848
- .ev-text h4 { font-size: 14px; }
849
- .ev-text h5 { font-size: 13px; }
850
- .ev-text h6 { font-size: 12.5px; color: var(--muted); }
851
- .ev-text > :first-child, .ev-text .who + * { margin-top: 0; }
852
- .ev-text li { margin: 2px 0; }
853
- .ev-text li > ul, .ev-text li > ol { margin: 2px 0 0; }
854
- .ev-text ul.tasks { list-style: none; padding-left: 4px; }
855
- .ev-text li.task { display: block; }
856
- .ev-text .tick { display: inline-block; width: 13px; height: 13px; margin: 0 7px -2px 0; border: 1.5px solid var(--border-strong); border-radius: 3.5px; }
857
- .ev-text .tick.on { background: var(--done); border-color: var(--done); box-shadow: inset 0 0 0 2px var(--surface); }
858
- .ev-text a { color: var(--accent); text-decoration: none; }
859
- .ev-text a:hover { text-decoration: underline; }
860
- .ev-text blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong); color: var(--muted); }
861
- .ev-text blockquote p:last-child { margin-bottom: 0; }
862
- .ev-text hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
863
- .ev-text s { color: var(--muted); }
864
- .ev-text pre { margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
865
- .ev-text pre code, .ev-text td code, .ev-text th code { font-size: 0.95em; }
866
- .md-table { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); }
867
- .md-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
868
- .md-table th, .md-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: normal; }
869
- .md-table th + th, .md-table td + td { border-left: 1px solid var(--border); }
870
- .md-table th { background: var(--sunken); font-weight: 600; white-space: nowrap; }
871
- .md-table tbody tr:last-child td { border-bottom: 0; }
872
- .md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
873
-
874
- /* ───────── toolbar: filter chips, folding into a menu when the row is too narrow */
875
- .chips { flex-wrap: nowrap; align-items: center; }
876
- .chips-row { display: flex; gap: 4px; }
877
- .fsel { position: relative; display: none; }
878
- .toolbar.tight .chips-row { display: none; }
879
- .toolbar.tight .fsel { display: block; }
880
- .fsel-b {
881
- display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px; border-radius: 99px;
882
- border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow);
883
- cursor: pointer; font-size: 12.5px; font-weight: 520; white-space: nowrap;
884
- }
885
- .fsel-b:hover, .fsel-b.open { border-color: var(--border-strong); }
886
- .fsel-b .n { color: var(--faint); font-size: 11.5px; font-weight: 500; }
887
- .fsel-b .dd { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
888
- .fsel-b.open .dd { transform: rotate(180deg); }
889
- .fsel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
890
- .fsel-menu {
891
- position: absolute; left: 0; top: 34px; z-index: 20; min-width: 190px; padding: 5px; border-radius: var(--r-lg);
892
- background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
893
- animation: fsel-in 0.14s ease-out;
894
- }
895
- @keyframes fsel-in { from { opacity: 0; transform: translateY(-4px); } }
896
- .fsel-menu button {
897
- display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 30px; padding: 0 10px;
898
- border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 12.5px; text-align: left; cursor: pointer;
899
- }
900
- .fsel-menu button:hover:not(:disabled) { background: var(--hover); }
901
- .fsel-menu button.on { background: var(--accent-bg); color: var(--accent); font-weight: 560; }
902
- .fsel-menu button:disabled { color: var(--faint); cursor: default; }
903
- .fsel-menu .n { color: var(--faint); font-size: 11.5px; }
904
- .fsel-menu button.bad .n { color: var(--bad); font-weight: 600; }
905
- /* search: a magnifier until you use it */
906
- .toolbar .search { flex: none; max-width: none; }
907
- .toolbar .search input { width: 210px; transition: width 0.2s ease-out, padding 0.2s ease-out; }
908
- .toolbar .search:not(:focus-within):has(input:placeholder-shown) input { width: 30px; padding-right: 0; cursor: pointer; color: transparent; }
909
- .toolbar .search:not(:focus-within):has(input:placeholder-shown) input::placeholder { color: transparent; }
910
- .toolbar .search svg { pointer-events: none; }
911
-
912
- /* ───────── instant tooltips (timeline) */
913
- .tip { position: fixed; left: 0; top: 0; z-index: 60; max-width: 360px; padding: 6px 9px; border-radius: 7px; background: var(--text); color: var(--bg); font-size: 11.5px; line-height: 1.4; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
914
-
915
- /* ───────── token heat: a glow around tasks and steps, green (few tokens) to red (most) */
916
- .heat-btn { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); color: var(--faint); }
917
- .heat-btn.on { color: #f5772e; border-color: color-mix(in srgb, #f5772e 55%, var(--border)); background: color-mix(in srgb, #f5772e 12%, var(--surface)); }
918
- .heat-btn.on svg { fill: color-mix(in srgb, #f5772e 35%, transparent); }
919
- .heat-on [style*='--heat'] { --glow: color-mix(in srgb, var(--heat) calc(var(--heat-a) * 100%), transparent); }
920
- /* task nodes and dots: blur only (no solid ring), so it reads as a glow rather than an outline */
921
- .heat-on .fg-n[style*='--heat'], .heat-on .tstat[style*='--heat'] { box-shadow: 0 0 7px -1px var(--glow), 0 0 16px 2px color-mix(in srgb, var(--glow) 60%, transparent); }
922
- /* step dots: the dot is the ::before; a running step keeps its own pulsing ring */
923
- .heat-on .step:not(.s-active) > .step-h .mk[style*='--heat']::before { box-shadow: 0 0 0 2px var(--glow), 0 0 8px 2px var(--glow); }
924
- .heat-on .fn-s[style*='--heat'] .shp { filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 7px var(--glow)); }
925
- .heat-on .fg-n, .heat-on .tstat, .heat-on .mk::before, .heat-on .fn-s .shp { transition: box-shadow 0.35s, filter 0.35s; }
926
-
927
- /* ───────── simple view: the selected step opened into a capsule of its actions */
928
- .fcap { position: relative; z-index: 1; flex: none; box-sizing: border-box; margin-left: -20px; padding: 4px 0 0 10px; align-self: flex-start; }
929
- .fcap::before { content: ''; position: absolute; top: 17px; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--border-strong); }
930
- .fcap.enter { animation: fcap-in 0.28s cubic-bezier(.2,.7,.3,1) both; }
931
- @keyframes fcap-in { from { max-width: 0; padding-left: 0; padding-right: 0; margin-left: 0; opacity: 0; overflow: hidden; } 99% { max-width: 400px; overflow: hidden; } to { max-width: 400px; } }
932
- .fcap-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 4px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--border); transition: box-shadow 0.35s; }
933
- .heat-on .fcap-in[style*='--heat'] { box-shadow: 0 0 0 1.5px var(--glow), 0 0 10px 1px var(--glow); }
934
- .fm { --c: var(--other); position: relative; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--c); background: color-mix(in srgb, var(--c) 24%, var(--surface)); transition: transform 0.15s; }
935
- .fm.m-ed { --c: var(--edit); }
936
- .fm.m-cmd { --c: var(--done); }
937
- .fm.m-sa { --c: var(--agent); }
938
- .fm.s-bad { --c: var(--bad); }
939
- .fm.s-rec { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bad) 60%, transparent); }
940
- .fm.s-live { --c: var(--accent); animation: fm-live 1.6s ease-in-out infinite; }
941
- @keyframes fm-live { 50% { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); } }
942
- .fm:hover { transform: scale(1.18); }
943
- .fm.sel { box-shadow: 0 0 0 2px var(--accent); }
944
- .fm .k { display: grid; place-items: center; }
945
- .fm svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
946
- .fcap.enter .fm { animation: fm-in 0.22s calc(0.06s + var(--j) * 16ms) ease-out both; }
947
- @keyframes fm-in { from { opacity: 0; transform: scale(0.4); } }
948
- .fm-more { height: 18px; padding: 0 5px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; cursor: pointer; }
949
- .fm-more:hover { background: var(--hover); color: var(--text); }
950
- .fcap.dim { opacity: 0.32; }
951
- .perr { line-height: 1.6; } .perr .tbtn { margin-left: 6px; }
952
-
953
- /* ───────── simple view zoom (CSS zoom on #pathView: --fz is its factor) */
954
- .zoomer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 2px 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
955
- .zoomer .zv { min-width: 42px; height: 24px; padding: 0 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
956
- .zoomer .zv:hover { background: var(--hover); color: var(--text); }
957
- /* a mini stepped slider: 84px wide, so its 7 stops (12px thumb) fall every 12px, with a tick at each */
958
- #flowZoomRange { -webkit-appearance: none; appearance: none; width: 84px; height: 14px; margin: 0; background: none; cursor: pointer; }
959
- #flowZoomRange::-webkit-slider-runnable-track { height: 14px; background: radial-gradient(circle, var(--border-strong) 1.6px, transparent 2px) 0 50% / 12px 100% repeat-x, linear-gradient(var(--border-strong), var(--border-strong)) 6px 50% / 72px 2px no-repeat; }
960
- #flowZoomRange::-moz-range-track { height: 14px; background: radial-gradient(circle, var(--border-strong) 1.6px, transparent 2px) 0 50% / 12px 100% repeat-x, linear-gradient(var(--border-strong), var(--border-strong)) 6px 50% / 72px 2px no-repeat; }
961
- #flowZoomRange::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: 1px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); transition: transform 0.12s; }
962
- #flowZoomRange::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
963
- #flowZoomRange:hover::-webkit-slider-thumb, #flowZoomRange:active::-webkit-slider-thumb { transform: scale(1.2); }
964
- #flowZoomRange:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
965
- /* zoomed out, text keeps a readable floor on screen (about 11px titles, 10px facts) */
966
- #pathView .fg-title { font-size: max(14px, calc(11px / var(--fz, 1))); }
967
- #pathView .fg.qa .fg-title { font-size: max(13px, calc(10.5px / var(--fz, 1))); }
968
- #pathView .fg-meta { font-size: max(12px, calc(10px / var(--fz, 1))); }
969
- /* and step labels go: below 75% they would be too small to read (hover shows them) */
970
- #pathView.fz-small .fn-l { display: none; }
971
- #pathView.fz-small .fn { gap: 0; }
972
- /* the column keeps its width on screen at any zoom (zoom multiplies CSS pixels, so divide them) */
973
- #pathView { max-width: calc(940px / var(--fz, 1)); padding: calc(4px / var(--fz, 1)) calc(20px / var(--fz, 1)) calc(120px / var(--fz, 1)); }
1
+ /* Lucidly — quiet surfaces, color only for meaning. */
2
+ :root {
3
+ --bg: #f3f3f5;
4
+ --surface: #ffffff;
5
+ --sunken: #f2f2f4;
6
+ --hover: #f4f4f6;
7
+ --border: #e8e8ec;
8
+ --border-strong: #d9d9df;
9
+ --text: #17171c;
10
+ --muted: #6b6b76;
11
+ --faint: #a3a3ad;
12
+
13
+ --accent: #3d6df2;
14
+ --accent-bg: #edf2fe;
15
+ --done: #1a9e6a;
16
+ --done-bg: #e8f6ef;
17
+ --bad: #e0464e;
18
+ --bad-bg: #fdeeee;
19
+ --warn: #c0811a;
20
+ --warn-bg: #fdf4e3;
21
+ --agent: #8562e8;
22
+ --edit: #d08a12;
23
+ --other: #4fb3c4;
24
+ --agent-bg: #f2eefd;
25
+
26
+ --code: #f6f6f8;
27
+ --r-lg: 12px;
28
+ --r: 8px;
29
+ --r-sm: 6px;
30
+ --shadow: 0 1px 2px rgba(16, 16, 24, 0.04), 0 2px 8px rgba(16, 16, 24, 0.04);
31
+ --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
32
+ color-scheme: light;
33
+ }
34
+ /* Dark: <html data-theme="dark">, set before the first paint from the setting or the system's. */
35
+ :root[data-theme='dark'] {
36
+ --bg: #0e0f12;
37
+ --surface: #15161a;
38
+ --sunken: #1b1c21;
39
+ --hover: #1d1e24;
40
+ --border: #25262d;
41
+ --border-strong: #31323a;
42
+ --text: #ececf1;
43
+ --muted: #9b9ba6;
44
+ --faint: #62626d;
45
+ --accent: #7096ff;
46
+ --accent-bg: #1a2340;
47
+ --done: #3fcf8e;
48
+ --done-bg: #12291f;
49
+ --bad: #ff6b6f;
50
+ --bad-bg: #331a1c;
51
+ --warn: #e9b04a;
52
+ --warn-bg: #30260f;
53
+ --agent: #a98cff;
54
+ --edit: #e3a43c;
55
+ --other: #3d98a8;
56
+ --agent-bg: #251f3d;
57
+ --code: #111216;
58
+ --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
59
+ color-scheme: dark;
60
+ }
61
+
62
+ * { box-sizing: border-box; }
63
+ html, body { height: 100%; margin: 0; }
64
+ body {
65
+ background: var(--bg); color: var(--text);
66
+ font: 13.5px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
67
+ font-feature-settings: 'tnum' 1;
68
+ display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
69
+ }
70
+ button, input, select { font: inherit; color: inherit; }
71
+ code, pre { font-family: var(--mono); font-size: 12px; }
72
+ svg { flex: none; }
73
+ .grow { flex: 1; }
74
+ [hidden] { display: none !important; }
75
+
76
+ /* ───────── top bar */
77
+ .top {
78
+ display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px;
79
+ background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 6;
80
+ }
81
+ .brand { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -0.01em; padding-right: 14px; border-right: 1px solid var(--border); height: 24px; }
82
+ .run { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
83
+ .run-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; line-height: 1.25; }
84
+ .run-sub { color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
85
+ .pill {
86
+ display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 99px;
87
+ font-size: 12px; font-weight: 550; color: var(--muted); background: var(--sunken); white-space: nowrap;
88
+ }
89
+ .pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
90
+ .pill[data-status='working'] { color: var(--accent); background: var(--accent-bg); }
91
+ .pill[data-status='working'] i { background: var(--accent); animation: beat 1.5s ease-out infinite; }
92
+ .pill[data-status='waiting'] { color: var(--warn); background: var(--warn-bg); }
93
+ .pill[data-status='waiting'] i { background: var(--warn); }
94
+ .pill[data-status='blocked'] { color: var(--bad); background: var(--bad-bg); }
95
+ .pill[data-status='blocked'] i { background: var(--bad); }
96
+ .pill[data-status='down'] { color: var(--bad); background: var(--bad-bg); }
97
+ .pill[data-status='down'] i { background: var(--bad); }
98
+
99
+ .seg { display: inline-flex; padding: 2px; background: var(--sunken); border-radius: 9px; gap: 2px; }
100
+ .seg button { border: 0; background: none; padding: 4px 12px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 520; }
101
+ .seg button:hover { color: var(--text); }
102
+ .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
103
+ .ibtns { display: flex; gap: 2px; }
104
+ .ibtn {
105
+ width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--r); border: 0; background: none;
106
+ color: var(--muted); cursor: pointer;
107
+ }
108
+ .ibtn:hover { background: var(--hover); color: var(--text); }
109
+ .ibtn svg, .search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
110
+ .ibtn[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }
111
+ .link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 550; padding: 4px 8px; border-radius: var(--r-sm); }
112
+ .link-btn:hover { background: var(--accent-bg); }
113
+ .btn { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); padding: 6px 14px; cursor: pointer; }
114
+ .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; }
115
+
116
+ /* ───────── layout */
117
+ .main { flex: 1; display: flex; min-height: 0; }
118
+ .pane { flex: 1 1 58%; min-width: 0; overflow-anchor: none; overflow-y: auto; overflow-x: hidden; scroll-padding-top: 64px; container-type: inline-size; }
119
+ .detail { flex: 0 0 42%; max-width: 720px; overflow-y: auto; overflow-x: hidden; background: var(--surface); border-left: 1px solid var(--border); }
120
+ #pathView, #actionsView, #overview { max-width: 940px; margin: 0 auto; }
121
+ #pathView { padding: 4px 20px 120px; }
122
+ .empty { text-align: center; color: var(--muted); margin: 14vh auto; max-width: 420px; }
123
+ .empty h2 { color: var(--text); font-size: 17px; font-weight: 600; margin: 14px 0 4px; }
124
+
125
+ /* ───────── overview */
126
+ #overview { padding: 18px 20px 4px; }
127
+ .ov { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 10px; }
128
+ .ov-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; }
129
+ .stat b { font-size: 18px; font-weight: 620; letter-spacing: -0.02em; margin-right: 5px; }
130
+ .stat span { color: var(--muted); font-size: 12.5px; }
131
+ .stat.bad b { color: var(--bad); }
132
+ .stat.span { margin-left: auto; color: var(--faint); font-size: 12px; }
133
+ .strip { margin-top: 12px; height: 26px; display: block; width: 100%; cursor: pointer; }
134
+ .strip rect, .strip polygon { fill: var(--border-strong); }
135
+ .strip .k-ok { fill: var(--done); opacity: 0.7; }
136
+ .strip .k-ed { fill: var(--edit); }
137
+ .strip .k-rd { fill: var(--other); }
138
+ .strip rect.k-pend { fill: var(--border-strong); }
139
+ .strip .k-sa { fill: var(--agent); }
140
+ .strip .k-bad { fill: var(--bad); }
141
+ .strip .k-live { fill: var(--accent); }
142
+ .strip .k-sel { fill: var(--text); }
143
+ .strip rect:hover, .strip polygon:hover { opacity: 0.55; }
144
+ .strip line { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
145
+ .strip-axis { display: flex; justify-content: space-between; gap: 12px; color: var(--faint); font-size: 11px; margin-top: 4px; }
146
+ .strip-axis .lg { display: flex; gap: 12px; }
147
+ .strip-axis .lg i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
148
+
149
+ /* ───────── toolbar */
150
+ .toolbar {
151
+ position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
152
+ max-width: 940px; margin: 0 auto; padding: 12px 20px 10px;
153
+ background: var(--bg);
154
+ box-shadow: 0 6px 8px -6px var(--bg);
155
+ }
156
+ .chips { display: flex; flex-wrap: wrap; gap: 4px; }
157
+ .chip-f {
158
+ display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px;
159
+ border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 520;
160
+ }
161
+ .chip-f:hover { background: var(--hover); color: var(--text); }
162
+ .chip-f.on { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow); }
163
+ .chip-f .n { color: var(--faint); font-size: 11.5px; font-weight: 500; }
164
+ .chip-f.bad .n { color: var(--bad); }
165
+ .chip-f svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
166
+ .switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
167
+ .switch input { display: none; }
168
+ .switch span { width: 26px; height: 16px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background 0.15s; }
169
+ .switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
170
+ .switch input:checked + span { background: var(--accent); }
171
+ .switch input:checked + span::after { transform: translateX(10px); }
172
+ .switch b { color: var(--bad); font-weight: 600; }
173
+ .search { position: relative; display: flex; align-items: center; }
174
+ .search svg { position: absolute; left: 9px; color: var(--faint); width: 14px; height: 14px; }
175
+ .search input {
176
+ width: 210px; height: 30px; padding: 0 10px 0 28px; border-radius: var(--r); border: 1px solid var(--border);
177
+ background: var(--surface); outline: none; font-size: 12.5px;
178
+ }
179
+ .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
180
+ .toolbar .vseg { margin-right: 6px; flex: none; }
181
+ .pane.pin-ov { scroll-padding-top: calc(var(--ov-h, 0px) + 64px); }
182
+ .pane.pin-ov #overview { position: sticky; top: 0; z-index: 5; background: var(--bg); }
183
+ .pane.pin-ov .toolbar { top: var(--ov-h, 0px); }
184
+ .ov { position: relative; }
185
+ .ov-stats { padding-right: 34px; }
186
+ .ov .pin { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; color: var(--faint); }
187
+ .ov .pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
188
+ .ov .pin:hover { color: var(--text); }
189
+ .ov .pin.on { color: var(--accent); }
190
+ .ov .pin.on svg { fill: var(--accent-bg); }
191
+ /* pinned and scrolled: the same card, tighter (one line of stats, one row of subagents) */
192
+ #overview, .ov, .ov-stats, .stat b, .stat span, .stat small, .stat.span, .strip, .layers, .layer-box, .layer-more, .nav, .ov .pin {
193
+ transition: padding 0.18s ease-out, gap 0.18s ease-out, font-size 0.18s ease-out, height 0.18s ease-out, margin 0.18s ease-out, opacity 0.18s ease-out, transform 0.18s ease-out, top 0.18s ease-out;
194
+ }
195
+ .layers { height: var(--lh, 15px); }
196
+ .layer-more.c1 { top: 0; opacity: 0; pointer-events: none; }
197
+ #overview.compact { padding-top: 8px; }
198
+ #overview.compact .ov { padding: 7px 14px 6px; }
199
+ #overview.compact .ov-stats { gap: 1px 11px; padding-right: 30px; white-space: nowrap; }
200
+ #overview.compact .stat b { font-size: 13.5px; margin-right: 3px; }
201
+ #overview.compact .stat span { font-size: 11.5px; }
202
+ #overview.compact .stat small { display: inline; margin: 0 0 0 4px; font-size: 10.5px; }
203
+ #overview.compact .stat.span { font-size: 11px; }
204
+ #overview.compact .strip { height: 16px; margin-top: 6px; }
205
+ #overview.compact .layers { height: 15px; margin-top: 3px; }
206
+ #overview.compact .layer-box.rx { opacity: 0; transform: translateY(-6px); pointer-events: none; }
207
+ #overview.compact .layer-more:not(.c1) { opacity: 0; pointer-events: none; }
208
+ #overview.compact .layer-more.c1 { opacity: 1; pointer-events: auto; }
209
+ #overview.compact .nav { height: 10px; margin-top: 5px; }
210
+ #overview.compact .nav-mini { top: 3px; }
211
+ #overview.compact .strip-axis { margin-top: 2px; }
212
+ #overview.compact .pin { top: 2px; right: 4px; transform: scale(0.82); }
213
+ .toolbar select { height: 30px; max-width: 210px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); padding: 0 8px; font-size: 12.5px; }
214
+ .tbtn { height: 30px; padding: 0 11px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
215
+ .tbtn:hover { color: var(--text); border-color: var(--border-strong); }
216
+
217
+ /* ───────── tasks */
218
+ .task { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 8px; }
219
+ .task.current { border-color: var(--border-strong); box-shadow: var(--shadow); }
220
+ .task-h { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; user-select: none; border-radius: var(--r-lg); }
221
+ .task-h:hover { background: var(--hover); }
222
+ .task.open > .task-h { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
223
+ .task.sel > .task-h { background: var(--accent-bg); }
224
+ .tstat { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.6px solid var(--border-strong); }
225
+ .tstat.s-done { background: var(--done); border-color: var(--done); }
226
+ .tstat.s-done::after { content: ''; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.8px 1.8px; transform: translate(0, -1px) rotate(-45deg); }
227
+ .tstat.s-active { border-color: var(--accent); }
228
+ .tstat.s-active::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
229
+ .working .tstat.s-active::after { animation: beat 1.5s ease-out infinite; }
230
+ .tstat.s-waiting { border-color: var(--warn); }
231
+ .tstat.s-waiting::after { content: ''; width: 6px; height: 7px; border: solid var(--warn); border-width: 0 2px; }
232
+ .tstat.qa { border-style: dashed; background: none; }
233
+ .tstat.qa::after { display: none; }
234
+ .task-main { flex: 1; min-width: 0; }
235
+ .task-title { font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
236
+ .task.open .task-title { white-space: normal; }
237
+ .task-meta { color: var(--faint); font-size: 12px; margin-top: 1px; display: flex; gap: 10px; flex-wrap: wrap; }
238
+ .task-meta .bad { color: var(--bad); }
239
+ .task-answer { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
240
+ .segbar { display: flex; gap: 2px; width: 132px; height: 6px; flex: none; }
241
+ .segbar i { min-width: 3px; border-radius: 2px; background: var(--border); }
242
+ .segbar i.s-done { background: var(--done); opacity: 0.75; }
243
+ .segbar i.s-active { background: var(--accent); }
244
+ .working .segbar i.s-active { animation: glow 1.6s ease-in-out infinite; }
245
+ .segbar i.blk { background: var(--bad); opacity: 1; }
246
+ .chev { width: 16px; height: 16px; color: var(--faint); transition: transform 0.15s; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
247
+ .task.open > .task-h .chev, .step.open > .step-h .chev { transform: rotate(90deg); }
248
+
249
+ .task-b { padding: 2px 14px 12px; }
250
+ .intent { color: var(--muted); font-size: 12.5px; margin: 0 0 6px 30px; }
251
+ .intent b { color: var(--text); font-weight: 550; }
252
+
253
+ /* steps on a rail */
254
+ .steps { list-style: none; margin: 0; padding: 0; position: relative; }
255
+ .steps::before { content: ''; position: absolute; left: 8.5px; top: 12px; bottom: 12px; width: 1.5px; background: var(--border); }
256
+ .step { position: relative; }
257
+ .step-h { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 6px 4px 0; border-radius: var(--r); cursor: pointer; }
258
+ .step-h:hover { background: var(--hover); }
259
+ .step.sel > .step-h { background: var(--accent-bg); }
260
+ .mk { position: relative; z-index: 1; width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
261
+ .mk::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--border-strong); background: var(--surface); box-sizing: border-box; }
262
+ .step.s-done > .step-h .mk::before { background: var(--done); border-color: var(--done); }
263
+ .step.s-active > .step-h .mk::before { width: 11px; height: 11px; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
264
+ .working .step.s-active > .step-h .mk::before { animation: ring 1.8s ease-out infinite; }
265
+ .step.s-failed > .step-h .mk::before { background: var(--bad); border-color: var(--bad); }
266
+ .step.tentative > .step-h .mk::before { border-style: dashed; }
267
+ .st-title { flex: 1; min-width: 0; font-weight: 520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
268
+ .step.open > .step-h .st-title { white-space: normal; }
269
+ .step.s-pending > .step-h .st-title { color: var(--muted); font-weight: 450; }
270
+ .step.tentative .st-title::after { content: 'proposed'; margin-left: 8px; font-size: 11px; color: var(--faint); font-weight: 450; }
271
+ .flags { display: flex; gap: 4px; }
272
+ .flag { font-size: 11px; font-weight: 600; height: 18px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
273
+ .flag.bad { background: var(--bad-bg); color: var(--bad); }
274
+ .flag.sub { background: var(--warn-bg); color: var(--warn); }
275
+ .flag.sa { background: var(--agent-bg); color: var(--agent); }
276
+ .flag.ok { background: var(--done-bg); color: var(--done); }
277
+ .st-count { color: var(--faint); font-size: 12px; min-width: 22px; text-align: right; }
278
+ .exp { border: 0; background: none; padding: 2px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; }
279
+ .exp:hover { background: var(--border); }
280
+ .now { display: flex; align-items: center; gap: 7px; margin: -3px 0 4px 28px; font-size: 12px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
281
+ .now.idle { color: var(--muted); }
282
+ .spin { width: 10px; height: 10px; border: 1.6px solid var(--accent-bg); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; display: inline-block; }
283
+
284
+ .step-b { margin: 2px 0 10px 28px; display: flex; flex-direction: column; gap: 8px; }
285
+ .ctx { display: flex; flex-wrap: wrap; gap: 4px; }
286
+ .tag {
287
+ display: inline-flex; align-items: center; gap: 4px; max-width: 280px; height: 22px; padding: 0 7px; border-radius: 5px;
288
+ background: var(--sunken); color: var(--muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
289
+ }
290
+ .tag.more { font-family: inherit; }
291
+
292
+ .branch {
293
+ display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r); cursor: pointer;
294
+ border: 1px solid var(--border); font-size: 12.5px;
295
+ }
296
+ .branch:hover { border-color: var(--border-strong); }
297
+ .branch.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
298
+ .branch .bk { font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
299
+ .branch .bt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
300
+ .branch .bs { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
301
+ .branch.unplanned { border-left: 2.5px solid var(--warn); }
302
+ .branch.unplanned .bk { color: var(--warn); }
303
+ .branch.subagent { border-left: 2.5px solid var(--agent); }
304
+ .branch.subagent .bk { color: var(--agent); }
305
+ .branch.blocker { border-color: transparent; background: var(--bad-bg); border-left: 2.5px solid var(--bad); }
306
+ .branch.blocker .bk { color: var(--bad); }
307
+ .branch.blocker.s-resolved { background: none; border-color: var(--border); border-left-color: var(--done); }
308
+ .branch.blocker.s-resolved .bk { color: var(--done); }
309
+ .branch.blocker.s-resolved .bt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
310
+ .branch.note { border-style: dashed; color: var(--muted); }
311
+ .branch.note.l-error { color: var(--bad); }
312
+ .branch.note.you { border-style: solid; border-color: transparent; background: var(--sunken); }
313
+ .nested { margin-left: 14px; display: flex; flex-direction: column; gap: 6px; }
314
+
315
+ .mini { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
316
+ .mini-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12.5px; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--muted); }
317
+ .mini-row:hover { background: var(--hover); color: var(--text); }
318
+ .mini-row.sel { background: var(--accent-bg); color: var(--text); }
319
+ .mini-row .ml { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
320
+ .mini-row .ms { width: 14px; text-align: center; font-size: 11px; }
321
+ .mini-row.s-done .ms { color: var(--done); }
322
+ .mini-row.s-failed, .mini-row.s-failed .ms { color: var(--bad); }
323
+ .mini-more { font-size: 12px; color: var(--accent); background: none; border: 0; padding: 5px 6px; text-align: left; cursor: pointer; }
324
+ .k { color: var(--faint); display: inline-flex; }
325
+ .k svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
326
+
327
+ .finish { display: flex; align-items: flex-start; gap: 10px; padding: 4px 6px 2px 0; cursor: pointer; border-radius: var(--r); }
328
+ .finish:hover { background: var(--hover); }
329
+ .finish .mk { margin-top: 4px; }
330
+ .finish .mk::before { border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; }
331
+ .finish.reached .mk::before { background: var(--done); border-color: var(--done); }
332
+ .finish .ft { padding: 4px 0; color: var(--faint); font-size: 12.5px; }
333
+ .finish.reached .ft { color: var(--text); font-size: 13px; }
334
+ /* A task over several rounds: where a round ended, and the reply that continued it. */
335
+ .finish.round { margin: 2px 0; }
336
+ .finish.round .ft { font-size: 12.5px; }
337
+ .round-reply { display: flex; align-items: flex-start; gap: 10px; padding: 4px 6px 4px 0; margin: 2px 0 6px; border-radius: var(--r); cursor: pointer; }
338
+ .round-reply:hover { background: var(--hover); }
339
+ .round-reply.sel { background: var(--accent-bg); }
340
+ .round-reply .mk { margin-top: 3px; }
341
+ .round-reply .mk::before { display: none; }
342
+ .round-reply .mk svg { width: 14px; height: 14px; color: var(--muted); background: var(--surface); }
343
+ .round-reply .rr-t { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 9px; background: var(--sunken); color: var(--text); font-size: 13px; }
344
+ .round-reply .rr-t small { display: block; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 650; color: var(--faint); }
345
+ .finish .ft small { display: block; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 650; color: var(--faint); }
346
+ mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
347
+ .no-match { color: var(--faint); text-align: center; padding: 40px 0; }
348
+
349
+ /* ───────── actions view */
350
+ #actionsView { padding: 0 20px 120px; }
351
+ .ag { margin-bottom: 14px; }
352
+ .ag-h { display: flex; gap: 10px; align-items: baseline; padding: 8px 4px 6px; font-weight: 580; font-size: 12.5px; }
353
+ .ag-h .agt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
354
+ .ag-h .agm { color: var(--faint); font-weight: 450; font-size: 12px; white-space: nowrap; }
355
+ .ag-h .agm .bad { color: var(--bad); }
356
+ .ag-b { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
357
+ .ar { display: grid; grid-template-columns: 58px 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
358
+ .ar:last-child { border-bottom: 0; }
359
+ .ar:hover { background: var(--hover); }
360
+ .ar.sel { background: var(--accent-bg); }
361
+ .ar .t { color: var(--faint); font-family: var(--mono); font-size: 11px; padding-top: 2px; }
362
+ .ar .ic { padding-top: 2px; }
363
+ .ar.s-failed .ic, .ar.s-failed .lbl { color: var(--bad); }
364
+ .ar .lbl { font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
365
+ .ar .cmd { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
366
+ .ar .iss { font-size: 12px; color: var(--bad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
367
+ .ar .wh { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
368
+ .ar .wh .sa { color: var(--agent); }
369
+ .ar .rt { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 11.5px; white-space: nowrap; padding-top: 1px; }
370
+ .ar .rt .ok { color: var(--done); }
371
+ .ar .rt .no { color: var(--bad); }
372
+ .retry { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn); margin-left: 6px; }
373
+ .a-more { display: block; margin: 6px auto 14px; }
374
+
375
+ /* ───────── detail */
376
+ .d-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
377
+ .d-top { display: flex; align-items: center; gap: 8px; }
378
+ .d-type { font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
379
+ .badge { font-size: 11px; font-weight: 600; height: 20px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center; background: var(--sunken); color: var(--muted); }
380
+ .badge.s-active { background: var(--accent-bg); color: var(--accent); }
381
+ .badge.s-done, .badge.s-resolved { background: var(--done-bg); color: var(--done); }
382
+ .badge.s-failed, .badge.s-open { background: var(--bad-bg); color: var(--bad); }
383
+ .badge.s-waiting { background: var(--warn-bg); color: var(--warn); }
384
+ .d-head h2 { margin: 6px 0 4px; font-size: 16px; font-weight: 620; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
385
+ .d-meta { color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
386
+ .crumb { color: var(--faint); font-size: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
387
+ .crumb span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
388
+ .crumb a { color: var(--accent); cursor: pointer; font-weight: 550; }
389
+ .d-sec { border-bottom: 1px solid var(--border); }
390
+ .d-sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px; cursor: pointer; font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); user-select: none; }
391
+ .d-sec > summary::-webkit-details-marker { display: none; }
392
+ .d-sec > summary .chev { width: 13px; height: 13px; }
393
+ .d-sec[open] > summary .chev { transform: rotate(90deg); }
394
+ .d-sec > summary .ctl { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; display: flex; gap: 12px; }
395
+ .d-sec > summary .ctl a { color: var(--muted); cursor: pointer; }
396
+ .d-sec > summary .ctl a:hover { color: var(--accent); }
397
+ .d-body { padding: 0 20px 16px; }
398
+ .d-body .loading { color: var(--faint); padding: 10px 0; }
399
+
400
+ .ev { margin: 10px 0; overflow-wrap: anywhere; }
401
+ .ev-text p { margin: 0 0 8px; }
402
+ .ev-text ul, .ev-text ol { margin: 0 0 8px; padding-left: 20px; }
403
+
404
+ .ev-text code { background: var(--sunken); padding: 1px 4px; border-radius: 4px; }
405
+ .ev-text pre { background: var(--code); padding: 8px 10px; border-radius: var(--r-sm); overflow-x: auto; }
406
+ .ev-prompt { background: var(--sunken); border-radius: var(--r); padding: 9px 12px; white-space: pre-wrap; }
407
+ /* Your own messages stand out from everything the agent did: tinted, outlined, with an accent bar. */
408
+ .ev-prompt.you { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-left: 3px solid var(--accent); }
409
+ .ev-prompt.you .who { color: var(--accent); }
410
+ /* The point of the conversation a selected node stands for: a soft yellow glow. */
411
+ .ev.focus { --glow: #e0a400; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--glow) 75%, transparent), 0 0 18px 2px color-mix(in srgb, var(--glow) 32%, transparent); border-radius: var(--r); }
412
+ .ev.focus.flash { animation: ev-glow 1.2s ease-out; }
413
+ .ev-outcome.focus { padding: 8px 12px 8px 14px; }
414
+ :root[data-theme='dark'] .ev.focus { --glow: #f5c84b; }
415
+ @keyframes ev-glow { 0% { box-shadow: 0 0 0 1.5px var(--glow), 0 0 28px 8px color-mix(in srgb, var(--glow) 55%, transparent); } }
416
+ .who { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
417
+ .ev-outcome { border-left: 2px solid var(--done); padding-left: 12px; }
418
+ .ev-outcome .who { color: var(--done); }
419
+ .ev-plan { border-left: 2px solid var(--accent); padding-left: 12px; }
420
+ .ev-notice { color: var(--muted); font-size: 12px; font-style: italic; }
421
+ .ev-notice.err { color: var(--bad); font-style: normal; }
422
+ details.ev-think > summary { list-style: none; color: var(--faint); font-size: 12px; cursor: pointer; }
423
+ details.ev-think > summary::-webkit-details-marker { display: none; }
424
+ details.ev-think > div { color: var(--muted); white-space: pre-wrap; font-size: 12.5px; border-left: 2px solid var(--border); padding: 2px 10px; margin-top: 4px; }
425
+ .scope { font-size: 11.5px; font-weight: 600; margin: 16px 0 4px; color: var(--warn); }
426
+ .scope.subagent { color: var(--agent); }
427
+ .scope.blocker { color: var(--bad); }
428
+ .scope.back { color: var(--faint); font-weight: 500; }
429
+
430
+ .act { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
431
+ .act > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; list-style: none; font-size: 12.5px; }
432
+ .act > summary::-webkit-details-marker { display: none; }
433
+ .act > summary:hover { background: var(--hover); }
434
+ .act .al { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
435
+ .act .ad { color: var(--faint); font-family: var(--mono); font-size: 11px; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
436
+ .act .as { width: 14px; text-align: center; font-size: 11px; }
437
+ .act.s-done .as { color: var(--done); }
438
+ .act.s-failed { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
439
+ .act.s-failed .as, .act.s-failed .al { color: var(--bad); }
440
+ .act .iss { color: var(--bad); font-size: 12px; padding: 0 10px 7px 31px; margin-top: -3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
441
+ .pl { font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 7px 12px 0; background: var(--code); border-top: 1px solid var(--border); }
442
+ .act pre { margin: 0; padding: 6px 12px 9px; background: var(--code); white-space: pre-wrap; word-break: break-word; max-height: 440px; overflow: auto; }
443
+ /* Hanging indent: a long line that wraps continues indented, so each real line starts at the margin. */
444
+ pre.hang .ln { display: block; padding-left: 4ch; text-indent: -4ch; }
445
+ .act pre.failed { color: var(--bad); }
446
+ .show-all { display: block; width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--code); color: var(--accent); cursor: pointer; font-size: 12px; padding: 5px; }
447
+
448
+ /* ───────── picker */
449
+ .picker { width: min(680px, 92vw); max-height: 78vh; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); }
450
+ /* A column: the session list takes the room left between the header and the footer, so only it scrolls. */
451
+ .picker[open] { display: flex; flex-direction: column; overflow: hidden; }
452
+ #pickerList { flex: 1 1 auto; min-height: 0; max-height: none; }
453
+ #pickerOpen, .picker-h, .picker-f { flex: none; }
454
+ .picker::backdrop { background: rgba(10, 12, 18, 0.32); backdrop-filter: blur(2px); }
455
+ .picker-h { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); margin: 0; }
456
+ .picker-h h3 { margin: 0; font-size: 14px; font-weight: 620; flex: 1; }
457
+ .plist { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: calc(78vh - 110px); }
458
+ .plist li { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--r); cursor: pointer; }
459
+ .plist li:hover { background: var(--hover); }
460
+ .plist .pm { flex: 1; min-width: 0; }
461
+ .plist .pt { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
462
+ .plist .ps { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
463
+ .plist .pw { color: var(--faint); font-size: 12px; white-space: nowrap; }
464
+ .plist .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
465
+ .plist .dot.live { background: var(--done); box-shadow: 0 0 0 3px var(--done-bg); }
466
+ .plist .mute { color: var(--faint); cursor: default; }
467
+ /* All projects: sessions grouped by project directory, each group a light rounded box that folds. */
468
+ .plist li.pbar { display: flex; justify-content: flex-end; padding: 2px 8px 6px; cursor: default; }
469
+ .plist li.pbar:hover, .plist li.pg:hover { background: none; }
470
+ .plist li.pg { display: block; padding: 0; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 10px; cursor: default; overflow: hidden; }
471
+ .plist li.pg > ul { list-style: none; margin: 0; padding: 0 4px 4px; }
472
+ .pg-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
473
+ .pg-h:hover { background: var(--hover); }
474
+ .pg.open > .pg-h { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
475
+ .pg-h .dot:not(.live) { display: none; }
476
+ .pg-n { font-weight: 650; white-space: nowrap; }
477
+ .pg-here { font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
478
+ .pg-d { flex: 1; min-width: 0; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
479
+ .pg-c { color: var(--faint); font-size: 12px; white-space: nowrap; }
480
+ .pg-h .chev { width: 14px; height: 14px; flex: none; color: var(--faint); transition: transform 0.2s; }
481
+ .pg.open > .pg-h .chev { transform: rotate(90deg); }
482
+ .psec { font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 10px 18px 0; }
483
+ #pickerOpen:not(:empty) { border-bottom: 1px solid var(--border); }
484
+
485
+ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); padding: 8px 14px; border-radius: var(--r); font-size: 12.5px; z-index: 30; box-shadow: var(--shadow); }
486
+
487
+ @keyframes beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
488
+ @keyframes ring { 0% { box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 11px transparent; } }
489
+ @keyframes glow { 50% { opacity: 0.45; } }
490
+ @keyframes spin { to { transform: rotate(360deg); } }
491
+ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
492
+
493
+ @media (max-width: 960px) {
494
+ .main { flex-direction: column; }
495
+ .detail { flex: none; max-width: none; border-left: 0; border-top: 1px solid var(--border); max-height: 52vh; }
496
+ .run-sub, .brand span { display: none; }
497
+ .segbar { display: none; }
498
+ }
499
+
500
+ /* ───────── small cross-element rules */
501
+ .nested { margin-top: 6px; }
502
+ .nested .now { margin: 0; }
503
+ .ar.s-failed .k, .mini-row.s-failed .k, .act.s-failed .k { color: var(--bad); }
504
+ .mini-row.s-active .k, .ar.s-active .k { color: var(--accent); }
505
+ .branch .k { margin-right: -2px; }
506
+ .step-h .chev, .task-h .chev { flex: none; }
507
+ .finish.reached .ft small { color: var(--done); }
508
+ .ev.act > .pl:first-child { border-top: 0; }
509
+ .task-meta span + span::before { content: '·'; margin-right: 10px; color: var(--border-strong); }
510
+ .task-meta { gap: 0 10px; }
511
+ #tbActions .chips { order: 2; flex-basis: 100%; }
512
+ #tbActions .grow { display: none; }
513
+
514
+ /* ───────── token meter */
515
+ .meter-wrap { position: relative; }
516
+ .meter {
517
+ display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: var(--r);
518
+ border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap;
519
+ }
520
+ .meter:hover, .meter.on { border-color: var(--border-strong); color: var(--text); }
521
+ .meter svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
522
+ .meter b { color: var(--text); font-weight: 620; }
523
+ .meter .ctxn { padding-left: 10px; border-left: 1px solid var(--border); }
524
+ .meter .live { color: var(--accent); font-weight: 550; }
525
+ .pop {
526
+ position: absolute; right: 0; top: 36px; width: 440px; z-index: 20; background: var(--surface); border: 1px solid var(--border);
527
+ border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); padding: 14px 16px 12px;
528
+ }
529
+ .pop-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 620; margin-bottom: 10px; }
530
+ .pop-h span { color: var(--faint); font-weight: 450; font-size: 12px; }
531
+ .pop-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
532
+ .pop-tot b { font-size: 17px; font-weight: 620; letter-spacing: -0.02em; margin-right: 5px; }
533
+ .pop-tot span { color: var(--muted); font-size: 12.5px; }
534
+ .pop-tot small { display: block; color: var(--faint); font-size: 11px; }
535
+ .pop-t { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 12px; }
536
+ .pop-t th { text-align: right; color: var(--faint); font-weight: 550; font-size: 11px; padding: 3px 4px; }
537
+ .pop-t td { text-align: right; padding: 4px; border-top: 1px solid var(--border); }
538
+ .pop-t th:first-child, .pop-t td:first-child { text-align: left; font-weight: 550; }
539
+ .pop-t td.sh { width: 70px; }
540
+ .pop-t td.sh i { display: block; height: 5px; border-radius: 3px; background: var(--accent); margin-left: auto; }
541
+ .pop-sec { font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin: 12px 0 6px; }
542
+ .pop-sec small { text-transform: none; letter-spacing: 0; font-weight: 450; }
543
+ .rate { width: 100%; height: 44px; display: block; }
544
+ .rate rect { fill: var(--accent); opacity: 0.8; }
545
+ .rate line { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
546
+ .rate-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; margin-top: 3px; }
547
+ .pop-note { color: var(--faint); font-size: 11px; margin-top: 10px; }
548
+ .uinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--faint); font-size: 12px; }
549
+ .model { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--agent-bg); color: var(--agent); font-size: 11.5px; font-weight: 600; }
550
+ .finish:not(.reached) .ft { color: var(--muted); }
551
+ @media (max-width: 960px) { .meter .ctxn, .meter .live { display: none; } .pop { right: -80px; width: 360px; } }
552
+
553
+ /* ───────── diffs */
554
+ pre .add, pre .del, pre .hunk { display: inline-block; min-width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px; }
555
+ pre .add { background: var(--done-bg); color: var(--done); }
556
+ pre .del { background: var(--bad-bg); color: var(--bad); }
557
+ pre .hunk { color: var(--accent); }
558
+ pre .dh { color: var(--faint); font-weight: 600; }
559
+ .dstat { font-family: var(--mono); font-size: 11px; display: inline-flex; gap: 5px; }
560
+ .dstat .a { color: var(--done); }
561
+ .dstat .d { color: var(--bad); }
562
+
563
+ /* ───────── GitHub-style diff table */
564
+ .dfile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; text-transform: none; letter-spacing: 0; font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--muted); padding-bottom: 6px; }
565
+ .dstat { align-items: center; }
566
+ .dfile > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
567
+ .diff { background: var(--surface); border-top: 1px solid var(--border); overflow-x: auto; max-height: 520px; overflow-y: auto; }
568
+ .diff table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12px; line-height: 1.6; }
569
+ .diff td { padding: 0; vertical-align: top; }
570
+ .diff .ln { width: 1%; min-width: 40px; padding: 0 8px; text-align: right; color: var(--faint); user-select: none; white-space: nowrap; background: var(--code); }
571
+ .diff .sg { width: 18px; text-align: center; user-select: none; color: var(--faint); }
572
+ .diff .cd { white-space: pre-wrap; word-break: break-word; padding-right: 12px; color: var(--text); }
573
+ .diff .dl-add { background: color-mix(in srgb, var(--done) 11%, transparent); }
574
+ .diff .dl-add .ln { background: color-mix(in srgb, var(--done) 18%, transparent); color: var(--done); }
575
+ .diff .dl-add .sg { color: var(--done); }
576
+ .diff .dl-del { background: color-mix(in srgb, var(--bad) 10%, transparent); }
577
+ .diff .dl-del .ln { background: color-mix(in srgb, var(--bad) 17%, transparent); color: var(--bad); }
578
+ .diff .dl-del .sg { color: var(--bad); }
579
+ .diff .dl-add .wd { background: color-mix(in srgb, var(--done) 32%, transparent); border-radius: 2px; }
580
+ .diff .dl-del .wd { background: color-mix(in srgb, var(--bad) 30%, transparent); border-radius: 2px; }
581
+ .diff .dl-h td { background: var(--accent-bg); color: var(--accent); padding: 2px 10px; font-size: 11.5px; }
582
+ .diff .dl-ctx .cd { color: var(--muted); }
583
+
584
+ /* ───────── syntax colours (GitHub-like) */
585
+ :root { --tk-k: #cf222e; --tk-s: #0a3069; --tk-c: #6e7781; --tk-n: #0550ae; --tk-f: #8250df; --tk-v: #953800; --tk-b: #0550ae; --tk-fl: #116329; --tk-o: #cf222e; }
586
+ :root[data-theme='dark'] { --tk-k: #ff7b72; --tk-s: #a5d6ff; --tk-c: #8b949e; --tk-n: #79c0ff; --tk-f: #d2a8ff; --tk-v: #ffa657; --tk-b: #79c0ff; --tk-fl: #7ee787; --tk-o: #ff7b72; }
587
+ .tk-k { color: var(--tk-k); }
588
+ .tk-s { color: var(--tk-s); }
589
+ .tk-c { color: var(--tk-c); font-style: italic; }
590
+ .tk-n { color: var(--tk-n); }
591
+ .tk-f { color: var(--tk-f); }
592
+ .tk-v { color: var(--tk-v); }
593
+ .tk-b { color: var(--tk-b); }
594
+ .tk-fl { color: var(--tk-fl); }
595
+ .tk-o { color: var(--tk-o); }
596
+ .ar .cmd .tk-c { font-style: normal; }
597
+
598
+ /* ───────── strip zoom navigator */
599
+ .nav { position: relative; height: 14px; margin-top: 8px; border-radius: 4px; background: var(--sunken); cursor: pointer; touch-action: none; user-select: none; }
600
+ .nav-mini { position: absolute; left: 0; right: 0; top: 5px; height: 4px; width: 100%; }
601
+ .nav-mini rect { fill: var(--border-strong); }
602
+ .nav-mini rect.k-bad { fill: var(--bad); }
603
+ .nav-win { position: absolute; top: 0; bottom: 0; min-width: 10px; border: 1.5px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); cursor: grab; }
604
+ .zooming, .zooming * { cursor: grabbing !important; }
605
+ .nav-h { position: absolute; top: -2px; bottom: -2px; width: 10px; cursor: ew-resize; }
606
+ .nav-h[data-h='a'] { left: -6px; }
607
+ .nav-h[data-h='b'] { right: -6px; }
608
+ .nav-h::after { content: ''; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--accent); }
609
+ .zctl { display: inline-flex; gap: 2px; margin-left: 6px; }
610
+ .zctl button { height: 18px; min-width: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; }
611
+ .zctl button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
612
+ .zctl button:disabled { opacity: 0.4; cursor: default; }
613
+ .zrange { color: var(--muted); }
614
+ .strip-axis .lg { align-items: center; flex-wrap: wrap; justify-content: center; }
615
+
616
+ /* ───────── recovered vs unresolved */
617
+ .strip .k-rec { fill: var(--bad); opacity: 0.35; }
618
+ .lg-rec { background: var(--bad); opacity: 0.35; }
619
+ .flag.rec { background: var(--sunken); color: var(--muted); font-weight: 550; }
620
+ .stat small { display: block; color: var(--faint); font-size: 11px; margin-top: -2px; }
621
+ .stat.calm b { color: var(--done); }
622
+ .fb { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 7px; padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
623
+ .fb.rec { color: var(--muted); background: var(--sunken); }
624
+ .fb.open { color: var(--bad); background: var(--bad-bg); }
625
+ .ar.s-failed:has(.fb.rec) .lbl { color: var(--text); }
626
+ .ar.s-failed:has(.fb.rec) .iss { color: color-mix(in srgb, var(--bad) 65%, var(--muted)); }
627
+ .act.s-failed:has(.fb.rec) { border-color: var(--border); }
628
+ .act.s-failed:has(.fb.rec) .al { color: var(--text); }
629
+ .err-seg button { font-size: 12px; padding: 3px 10px; }
630
+ .err-seg button b { font-weight: 600; color: var(--muted); margin-left: 2px; }
631
+ .err-seg button b.bad { color: var(--bad); }
632
+ .err-seg button:disabled { opacity: 0.45; cursor: default; }
633
+
634
+ /* ───────── subagent lane */
635
+ .strip rect.k-span { fill: var(--agent); }
636
+ .lane { margin-top: 12px; padding: 10px 12px 8px; border: 1px solid color-mix(in srgb, var(--agent) 35%, var(--border)); border-left: 3px solid var(--agent); border-radius: 8px; background: color-mix(in srgb, var(--agent) 5%, var(--surface)); }
637
+ @keyframes lane-in { from { opacity: 0; transform: translateY(-4px); } }
638
+ .lane-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
639
+ .lane-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--agent); }
640
+ .lane-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
641
+ .lane-t:hover { text-decoration: underline; }
642
+ .lane-st { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
643
+ .lane-st.s-failed { color: var(--bad); }
644
+ .lane-st.s-done { color: var(--done); }
645
+ .lane-h .ibtn { width: 24px; height: 24px; }
646
+ .lane-m { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
647
+ .lane-m i { font-style: normal; color: var(--faint); }
648
+ .lane-m .bad { color: var(--bad); }
649
+ .lane-strip { height: 26px; }
650
+ .lane-strip rect.k-sa { fill: var(--agent); }
651
+ .lane-empty { font-size: 12px; color: var(--faint); padding: 4px 0; }
652
+ .now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
653
+ @keyframes pulse { 50% { opacity: 0.35; } }
654
+
655
+ /* ───────── token stat in the overview */
656
+ .stat.tokstat { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
657
+ .stat.tokstat:hover b { color: var(--accent); }
658
+
659
+ /* ───────── file edits view */
660
+ .fsum { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; font-size: 13px; color: var(--muted); position: sticky; top: var(--tb-h, 52px); z-index: 3; background: var(--bg); box-shadow: 0 6px 8px -6px var(--bg); }
661
+ .pane.pin-ov .fsum { top: calc(var(--ov-h, 0px) + var(--tb-h, 52px)); }
662
+ .fsum b { color: var(--text); font-weight: 620; }
663
+ .fsum-l { font-size: 12px; color: var(--faint); }
664
+ .fsort button { font-size: 12px; padding: 3px 10px; }
665
+ .fcard { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 6px; overflow: hidden; }
666
+ .fcard.open { border-color: var(--border-strong); }
667
+ .fh { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; min-width: 0; font-size: 13px; }
668
+ .fh:hover { background: var(--hover); }
669
+ .fh .chev { transition: transform 0.12s; flex: none; }
670
+ .fh.open .chev { transform: rotate(90deg); }
671
+ .fpath { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
672
+ .fdir { color: var(--faint); }
673
+ .fpath b { font-weight: 600; color: var(--text); }
674
+ .ftag { flex: none; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; background: var(--sunken); color: var(--muted); }
675
+ .ftag.bad { background: var(--bad-bg); color: var(--bad); }
676
+ .fspark { flex: none; width: 120px; height: 14px; }
677
+ .fspark .k-base { fill: var(--border); }
678
+ .fspark .k-ok { fill: var(--done); }
679
+ .fspark .k-w { fill: var(--accent); }
680
+ .fspark .k-bad { fill: var(--bad); }
681
+ .fcount { flex: none; width: 58px; text-align: right; color: var(--muted); font-size: 12px; }
682
+ .fdiff { flex: none; width: 78px; text-align: right; }
683
+ .fago { flex: none; width: 62px; text-align: right; color: var(--faint); font-size: 12px; }
684
+ .fbody { border-top: 1px solid var(--border); padding: 4px 0 6px; }
685
+ .fbar { display: flex; align-items: center; padding: 4px 14px 6px 36px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 600; }
686
+ .linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 550; cursor: pointer; }
687
+ .fe { display: grid; grid-template-columns: 62px 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; padding: 6px 14px 6px 36px; cursor: pointer; font-size: 13px; }
688
+ .fe:hover { background: var(--hover); }
689
+ .fe.sel { background: var(--accent-bg); }
690
+ .fe-t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
691
+ .fe-k { font-size: 11px; color: var(--muted); }
692
+ .fe-m { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; }
693
+ .fe-title { overflow: hidden; text-overflow: ellipsis; color: var(--text); flex: 0 1 auto; }
694
+ .fe-where { overflow: hidden; text-overflow: ellipsis; color: var(--faint); font-size: 12px; flex: 1 1 0; min-width: 40px; }
695
+ .fe.s-failed .fe-title { color: var(--bad); }
696
+ .fe.s-failed:has(.fb.rec) .fe-title { color: var(--text); }
697
+ .fe-diff { padding: 2px 14px 10px 36px; }
698
+ .fe-diff .dfile { display: none; }
699
+ @media (max-width: 960px) { .fspark, .fago { display: none; } }
700
+
701
+ .pill.warn { background: var(--warn-bg); color: var(--warn); margin-right: 8px; white-space: nowrap; cursor: help; }
702
+ .ftag:not(.bad) { text-transform: none; letter-spacing: 0; font-weight: 550; }
703
+ .fgroup { display: flex; align-items: center; gap: 8px; width: 100%; margin: 14px 0 6px; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: left; }
704
+ .fgroup:hover { color: var(--text); }
705
+ .fgroup .chev { transition: transform 0.12s; }
706
+ .fgroup .chev.open { transform: rotate(90deg); }
707
+ .fgroup .n { font-weight: 500; color: var(--faint); }
708
+ .fgroup-h { margin-left: auto; font-weight: 400; color: var(--faint); font-size: 12px; }
709
+
710
+ /* ───────── kinds on the strip, and "the agent is working" */
711
+ .lg-ed { background: var(--edit); clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%); height: 9px !important; }
712
+ .lg-rd { background: var(--other); height: 4px !important; vertical-align: 1px !important; }
713
+ .strip .k-now { fill: var(--accent); animation: now-pulse 1.1s ease-in-out infinite; }
714
+ @keyframes now-pulse { 50% { opacity: 0.25; } }
715
+ .ov.working, .task.current.working { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); animation: work-glow 2.4s ease-in-out infinite; }
716
+ @keyframes work-glow {
717
+ 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 10px -2px color-mix(in srgb, var(--accent) 25%, transparent); }
718
+ 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 18px 0 color-mix(in srgb, var(--accent) 38%, transparent); }
719
+ }
720
+ @media (prefers-reduced-motion: reduce) { .ov.working, .task.current.working { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); } }
721
+ .lane.enter { animation: lane-in 0.16s ease-out; }
722
+ .lane.working { animation: lane-glow 2.4s ease-in-out infinite; }
723
+ .lane.enter.working { animation: lane-in 0.16s ease-out, lane-glow 2.4s ease-in-out infinite; }
724
+ @keyframes lane-glow { 50% { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--agent) 45%, transparent); } }
725
+ .switch.off { opacity: 0.45; cursor: default; }
726
+
727
+ /* ───────── subagent layers under the main track */
728
+ .layers { position: relative; margin-top: 4px; min-height: 15px; }
729
+ .layer-box { position: absolute; height: 15px; min-width: 12px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--agent) 70%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--agent) 22%, var(--surface)); color: var(--text); font: inherit; font-size: 10.5px; line-height: 13px; text-align: left; cursor: pointer; overflow: hidden; }
730
+ .layer-box span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
731
+ .layer-box:hover { background: color-mix(in srgb, var(--agent) 34%, var(--surface)); }
732
+ .layer-box.sel { background: var(--agent); color: #fff; border-color: var(--agent); }
733
+ .layer-box.bad { border-color: var(--bad); }
734
+ .layer-box.running { border-style: dashed; animation: now-pulse-box 1.4s ease-in-out infinite; }
735
+ @keyframes now-pulse-box { 50% { background: color-mix(in srgb, var(--agent) 40%, var(--surface)); } }
736
+ .lg-sa { background: color-mix(in srgb, var(--agent) 22%, var(--surface)); border: 1px solid var(--agent); width: 12px !important; box-sizing: border-box; }
737
+
738
+ /* ───────── file edits: history layout */
739
+ .flayout button { font-size: 12px; padding: 3px 10px; }
740
+ .fhist { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; padding-bottom: 4px; }
741
+ .fh-goal { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px 4px; font-size: 12px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); }
742
+ .fh-goal:first-child { border-top: 0; }
743
+ .fh-goal span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
744
+ .fe.fe-hist { padding-left: 14px; }
745
+ .fe-hist .fpath { flex: 0 1 auto; font-size: 12px; }
746
+ .fhist .fe-diff { padding-left: 14px; }
747
+
748
+ /* ───────── open session, on the left */
749
+ .open-btn { margin-left: 6px; }
750
+ .open-btn svg { fill: none; }
751
+ #runBox { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-left: -2px; }
752
+ #runBox:hover { background: var(--hover); }
753
+ .picker-f { display: flex; align-items: center; gap: 8px; margin: 6px 14px 12px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
754
+ .picker-f:hover { color: var(--text); border-color: var(--accent); }
755
+ .picker-f svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
756
+
757
+ /* ───────── jump to the end */
758
+ .fab-wrap { position: sticky; bottom: 18px; height: 0; max-width: 940px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: flex-end; pointer-events: none; z-index: 5; }
759
+ .fab { pointer-events: auto; position: absolute; bottom: 0; left: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); display: grid; place-items: center; cursor: pointer; animation: fab-in 0.14s ease-out; }
760
+ .fab:hover { border-color: var(--accent); color: var(--accent); }
761
+ .fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
762
+ .fab-n { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 650; line-height: 18px; text-align: center; }
763
+ @keyframes fab-in { from { opacity: 0; transform: translateY(6px); } }
764
+ .layer-more { position: absolute; height: 15px; padding: 0 5px; border-radius: 4px; background: var(--agent); color: #fff; font-size: 10px; font-weight: 650; line-height: 15px; cursor: help; z-index: 1; }
765
+ .save-btn { margin-left: -4px; }
766
+ .save-btn svg { fill: none; }
767
+ .flag.untr { color: var(--faint); background: transparent; border: 1px dashed var(--border-strong); }
768
+ .step-h.untracked .mk { opacity: 0.55; }
769
+
770
+ /* ───────── simple view: tasks on a spine, steps as a chain of nodes */
771
+ .flow { padding-top: 4px; }
772
+ .fg { position: relative; }
773
+ .fg::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border-strong); }
774
+ .fg:first-child::before { top: 22px; }
775
+ .fg:last-child::before { bottom: auto; height: 22px; }
776
+ .fg:only-child::before { display: none; }
777
+ .fg-h { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 6px 8px 6px 0; cursor: pointer; user-select: none; }
778
+ .fg-n { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-strong); color: var(--muted); transition: background 0.45s, border-color 0.45s, color 0.45s; }
779
+ .fg-n .gl { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
780
+ .fg-n.st-done { border-color: var(--done); background: var(--done-bg); color: var(--done); }
781
+ .fg-n.st-live, .fg-n.st-idle { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent); }
782
+ .fg-n.st-idle { border-color: var(--accent); }
783
+ .fg-n.st-live::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); }
784
+ .fg-n.st-live::after { animation: spin 1.1s linear infinite; }
785
+ .fg-n.st-live { animation: fg-beat 2s ease-out infinite; }
786
+ @keyframes fg-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
787
+ .fg-n.st-wait { background: var(--sunken); }
788
+ .fg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
789
+ .fg-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
790
+ .fg-h:hover .fg-title { color: var(--accent); }
791
+ .fg.qa .fg-title { font-size: 13px; font-weight: 500; }
792
+ .fg-meta { display: flex; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
793
+ .fg-meta i { font-style: normal; color: var(--faint); }
794
+ .fg-meta .bad { color: var(--bad); }
795
+ .fg-ans { overflow: hidden; text-overflow: ellipsis; }
796
+ .fg-h .chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2; transition: transform 0.3s; }
797
+ .fg.open .fg-h .chev { transform: rotate(90deg); }
798
+ .fg.dim { opacity: 0.38; }
799
+ .fg-b { display: grid; grid-template-rows: 0fr; margin-left: 46px; transition: grid-template-rows 0.38s cubic-bezier(0.3, 0.7, 0.2, 1); }
800
+ .fg.open .fg-b { grid-template-rows: 1fr; }
801
+ .fg-bi { position: relative; min-height: 0; overflow: hidden; }
802
+ .chain-in { display: flex; width: max-content; min-width: 100%; }
803
+ .chain { position: relative; overflow-x: auto; overflow-y: hidden; padding: 14px 6px 12px; margin: 2px 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; scroll-padding-left: 104px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; opacity: 0; transition: opacity 0.2s; }
804
+ .fg.open .chain { opacity: 1; transition: opacity 0.3s 0.05s; }
805
+ .fg-bi.more-r::after { content: ''; position: absolute; right: 1px; top: 3px; bottom: 15px; width: 56px; border-radius: 0 14px 14px 0; background: linear-gradient(to right, transparent, var(--surface)); pointer-events: none; }
806
+
807
+ .fn { position: relative; flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
808
+ .fn.start { position: sticky; left: 0; z-index: 2; background: linear-gradient(to right, var(--surface) 80%, transparent); box-shadow: -8px 0 0 var(--surface); }
809
+ .fn-s { position: relative; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: transform 0.18s; }
810
+ .fn-s:hover { transform: translateY(-1px) scale(1.07); }
811
+ .fn .shp { position: absolute; inset: 0; width: 36px; height: 36px; overflow: visible; }
812
+ .fn .sh { fill: var(--fill, var(--surface)); stroke: var(--stroke, var(--border-strong)); stroke-width: 1.8; stroke-linejoin: round; transition: fill 0.45s, stroke 0.45s; }
813
+ .fn .gl { position: relative; width: 15px; height: 15px; fill: none; stroke: var(--ink, var(--faint)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.45s; }
814
+ .fn.k-edit { --c: var(--edit); }
815
+ .fn.k-command { --c: var(--done); }
816
+ .fn.k-read { --c: var(--other); }
817
+ .fn.k-agent { --c: var(--agent); }
818
+ .fn.k-ask, .fn.k-start { --c: var(--muted); }
819
+ .fn.k-end, .fn.k-mid { --c: var(--done); }
820
+ .fn.k-mid-ask, .fn.k-mid-wait { --c: var(--muted); }
821
+ .fn.mid .gl { width: 12px; height: 12px; }
822
+ .fn.k-todo { --c: var(--faint); }
823
+ .fn.st-done { --fill: color-mix(in srgb, var(--c) 16%, var(--surface)); --stroke: var(--c); --ink: var(--c); }
824
+ .fn.st-done.untr { --fill: color-mix(in srgb, var(--c) 7%, var(--surface)); }
825
+ .fn.st-live, .fn.st-idle { --fill: var(--accent-bg); --stroke: var(--accent); --ink: var(--accent); }
826
+ .fn.st-bad { --fill: var(--bad-bg); --stroke: var(--bad); --ink: var(--bad); }
827
+ .fn.st-pend { --fill: var(--surface); --stroke: var(--border-strong); --ink: var(--faint); }
828
+ .fn.st-pend .sh { stroke-dasharray: 3.2 3; }
829
+ .fn.st-start { --fill: var(--sunken); --stroke: var(--border-strong); --ink: var(--muted); }
830
+ .fn.st-wait { --fill: var(--sunken); --stroke: var(--faint); --ink: var(--muted); }
831
+ .fn.st-live .fn-s::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; animation: fn-halo 1.8s ease-out infinite; }
832
+ @keyframes fn-halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 75%, 100% { box-shadow: 0 0 0 12px transparent; } }
833
+ .fn.sel .fn-s::after { content: ''; position: absolute; inset: -6px; border-radius: 12px; border: 2px solid var(--accent); }
834
+ .fn-l { width: 88px; font-size: 11.5px; line-height: 1.3; color: var(--muted); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color 0.3s; }
835
+ .fn.st-live .fn-l, .fn.st-idle .fn-l, .fn.sel .fn-l { color: var(--text); }
836
+ .fn.st-pend .fn-l { color: var(--faint); }
837
+ .fn.dim { opacity: 0.32; }
838
+ .fn-n { position: absolute; right: -10px; bottom: -6px; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted); font-size: 9.5px; font-weight: 600; line-height: 13px; text-align: center; }
839
+ .fn-b { position: absolute; top: -4px; right: -5px; width: 14px; height: 14px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center; }
840
+ .fn-b.bad { background: var(--bad); }
841
+ .fn-b.rec { top: -2px; right: -2px; width: 9px; height: 9px; background: color-mix(in srgb, var(--bad) 45%, var(--surface)); border: 1.5px solid var(--surface); }
842
+ /* connector from the previous node: solid where the work went, dashed ahead, marching into the live node */
843
+ .fl { position: absolute; top: 17px; left: -26px; width: 52px; height: 2px; border-radius: 1px; background: var(--border-strong); transform-origin: left center; }
844
+ .fn.start .fl { display: none; }
845
+ .fn.st-pend .fl, .fn.st-wait .fl { background: repeating-linear-gradient(to right, var(--border-strong) 0 4px, transparent 4px 8px); }
846
+ .fn.st-live .fl { background: repeating-linear-gradient(to right, var(--accent) 0 5px, transparent 5px 10px); background-size: 10px 2px; animation: fl-march 0.7s linear infinite; }
847
+ @keyframes fl-march { to { background-position: 10px 0; } }
848
+ /* entrances and changes */
849
+ .fn.enter .fn-s { animation: fn-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
850
+ .fn.enter .fl { animation: fl-draw 0.32s ease-out both; }
851
+ .fn.enter .fn-l { animation: fn-fade 0.35s 0.14s ease-out both; }
852
+ @keyframes fn-pop { from { opacity: 0; transform: scale(0.3); } }
853
+ @keyframes fl-draw { from { transform: scaleX(0); } }
854
+ @keyframes fn-fade { from { opacity: 0; transform: translateY(3px); } }
855
+ .fn.just-done .fn-s { animation: fn-done 0.55s ease-out; }
856
+ .fn.just-done .fn-s::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; animation: fn-flash 0.7s ease-out; }
857
+ @keyframes fn-done { 30% { transform: scale(1.18); } }
858
+ @keyframes fn-flash { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
859
+ .fg.opening .fn { animation: fn-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
860
+ @keyframes fn-in { from { opacity: 0; transform: translateX(-12px); } }
861
+ .fg.enter { animation: fg-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
862
+ .fg.enter .fg-n { animation: fn-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
863
+ @keyframes fg-in { from { opacity: 0; transform: translateY(10px); } }
864
+ #overview.compact .strip { margin-top: 6px; }
865
+
866
+ /* ───────── keep awake */
867
+ .wake-wrap { position: relative; margin-left: 4px; }
868
+ .wake { color: var(--faint); }
869
+ .wake svg { width: 20px; height: 20px; stroke-width: 1.7; }
870
+ .wake .steam { opacity: 0; transition: opacity 0.3s; }
871
+ .wake[data-wake='awake'] { color: var(--accent); }
872
+ .wake[data-wake='awake'] .steam { opacity: 1; animation: steam 2.4s ease-in-out infinite; }
873
+ .wake[data-wake='wait'] { color: var(--muted); }
874
+ .wake[data-wake='err'] { color: var(--bad); }
875
+ @keyframes steam { 50% { opacity: 0.35; transform: translateY(-0.6px); } }
876
+ .wake-pop { left: 0; right: auto; width: 330px; }
877
+ .wk-row { display: flex; color: var(--text); font-size: 13px; margin: 2px 0 10px; }
878
+ .wk-opt { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px 2px; cursor: pointer; font-size: 12.5px; }
879
+ .wk-opt input { margin: 2px 0 0; accent-color: var(--accent); }
880
+ .wk-opt b { font-weight: 560; }
881
+ .wk-opt small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
882
+ .wk-st { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: var(--r); background: var(--sunken); font-size: 12px; color: var(--muted); }
883
+ .wk-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
884
+ .wk-st.st-awake { color: var(--text); }
885
+ .wk-st.st-awake i { background: var(--accent); animation: now-pulse 1.8s ease-in-out infinite; }
886
+ .wk-st.st-err i { background: var(--bad); }
887
+ .wk-note { margin: 8px 0 0; color: var(--faint); font-size: 11px; line-height: 1.4; }
888
+
889
+ /* ───────── markdown in the details panel */
890
+ .ev-text h3, .ev-text h4, .ev-text h5, .ev-text h6 { margin: 14px 0 6px; line-height: 1.3; font-weight: 640; }
891
+ .ev-text h3 { font-size: 15.5px; }
892
+ .ev-text h4 { font-size: 14px; }
893
+ .ev-text h5 { font-size: 13px; }
894
+ .ev-text h6 { font-size: 12.5px; color: var(--muted); }
895
+ .ev-text > :first-child, .ev-text .who + * { margin-top: 0; }
896
+ .ev-text li { margin: 2px 0; }
897
+ .ev-text li > ul, .ev-text li > ol { margin: 2px 0 0; }
898
+ .ev-text ul.tasks { list-style: none; padding-left: 4px; }
899
+ .ev-text li.task { display: block; }
900
+ .ev-text .tick { display: inline-block; width: 13px; height: 13px; margin: 0 7px -2px 0; border: 1.5px solid var(--border-strong); border-radius: 3.5px; }
901
+ .ev-text .tick.on { background: var(--done); border-color: var(--done); box-shadow: inset 0 0 0 2px var(--surface); }
902
+ .ev-text a { color: var(--accent); text-decoration: none; }
903
+ .ev-text a:hover { text-decoration: underline; }
904
+ .ev-text blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong); color: var(--muted); }
905
+ .ev-text blockquote p:last-child { margin-bottom: 0; }
906
+ .ev-text hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
907
+ .ev-text s { color: var(--muted); }
908
+ .ev-text pre { margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
909
+ .ev-text pre code, .ev-text td code, .ev-text th code { font-size: 0.95em; }
910
+ .md-table { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); }
911
+ .md-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
912
+ .md-table th, .md-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: normal; }
913
+ .md-table th + th, .md-table td + td { border-left: 1px solid var(--border); }
914
+ .md-table th { background: var(--sunken); font-weight: 600; white-space: nowrap; }
915
+ .md-table tbody tr:last-child td { border-bottom: 0; }
916
+ .md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
917
+
918
+ /* ───────── toolbar: filter chips, folding into a menu when the row is too narrow */
919
+ .chips { flex-wrap: nowrap; align-items: center; }
920
+ .chips-row { display: flex; gap: 4px; }
921
+ .fsel { position: relative; display: none; }
922
+ .toolbar.tight .chips-row { display: none; }
923
+ .toolbar.tight .fsel { display: block; }
924
+ .fsel-b {
925
+ display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px; border-radius: 99px;
926
+ border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow);
927
+ cursor: pointer; font-size: 12.5px; font-weight: 520; white-space: nowrap;
928
+ }
929
+ .fsel-b:hover, .fsel-b.open { border-color: var(--border-strong); }
930
+ .fsel-b .n { color: var(--faint); font-size: 11.5px; font-weight: 500; }
931
+ .fsel-b .dd { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
932
+ .fsel-b.open .dd { transform: rotate(180deg); }
933
+ .fsel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
934
+ .fsel-menu {
935
+ position: absolute; left: 0; top: 34px; z-index: 20; min-width: 190px; padding: 5px; border-radius: var(--r-lg);
936
+ background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
937
+ animation: fsel-in 0.14s ease-out;
938
+ }
939
+ @keyframes fsel-in { from { opacity: 0; transform: translateY(-4px); } }
940
+ .fsel-menu button {
941
+ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 30px; padding: 0 10px;
942
+ border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 12.5px; text-align: left; cursor: pointer;
943
+ }
944
+ .fsel-menu button:hover:not(:disabled) { background: var(--hover); }
945
+ .fsel-menu button.on { background: var(--accent-bg); color: var(--accent); font-weight: 560; }
946
+ .fsel-menu button:disabled { color: var(--faint); cursor: default; }
947
+ .fsel-menu .n { color: var(--faint); font-size: 11.5px; }
948
+ .fsel-menu button.bad .n { color: var(--bad); font-weight: 600; }
949
+ /* search: a magnifier until you use it */
950
+ .toolbar .search { flex: none; max-width: none; }
951
+ .toolbar .search input { width: 210px; transition: width 0.2s ease-out, padding 0.2s ease-out; }
952
+ .toolbar .search:not(:focus-within):has(input:placeholder-shown) input { width: 30px; padding-right: 0; cursor: pointer; color: transparent; }
953
+ .toolbar .search:not(:focus-within):has(input:placeholder-shown) input::placeholder { color: transparent; }
954
+ .toolbar .search svg { pointer-events: none; }
955
+
956
+ /* ───────── instant tooltips (timeline) */
957
+ .tip { position: fixed; left: 0; top: 0; z-index: 60; max-width: 360px; padding: 6px 9px; border-radius: 7px; background: var(--text); color: var(--bg); font-size: 11.5px; line-height: 1.4; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
958
+
959
+ /* ───────── token heat: a glow around tasks and steps, green (few tokens) to red (most) */
960
+ .heat-btn { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); color: var(--faint); }
961
+ .heat-btn.on { color: #f5772e; border-color: color-mix(in srgb, #f5772e 55%, var(--border)); background: color-mix(in srgb, #f5772e 12%, var(--surface)); }
962
+ .heat-btn.on svg { fill: color-mix(in srgb, #f5772e 35%, transparent); }
963
+ /* The colour from the hue the page sets (--heat-h): on the light theme darker and stronger, so
964
+ green and yellow still show on white; glows are light, and pale ones wash out there. */
965
+ [style*='--heat-h'] { --heat: hsl(var(--heat-h) 95% 41%); --heat-k: 1.2; }
966
+ :root[data-theme='dark'] [style*='--heat-h'] { --heat: hsl(var(--heat-h) 100% 50%); --heat-k: 1; }
967
+ .heat-on [style*='--heat'] { --glow: color-mix(in srgb, var(--heat) calc(min(1, var(--heat-a) * var(--heat-k)) * 100%), transparent); }
968
+ /* task nodes and dots: blur only (no solid ring), so it reads as a glow rather than an outline */
969
+ .heat-on .fg-n[style*='--heat'], .heat-on .tstat[style*='--heat'] { box-shadow: 0 0 7px -1px var(--glow), 0 0 16px 2px color-mix(in srgb, var(--glow) 60%, transparent); }
970
+ /* step dots: the dot is the ::before; a running step keeps its own pulsing ring */
971
+ .heat-on .step:not(.s-active) > .step-h .mk[style*='--heat']::before { box-shadow: 0 0 0 2px var(--glow), 0 0 8px 2px var(--glow); }
972
+ .heat-on .fn-s[style*='--heat'] .shp { filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 7px var(--glow)); }
973
+ .heat-on .fg-n, .heat-on .tstat, .heat-on .mk::before, .heat-on .fn-s .shp { transition: box-shadow 0.35s, filter 0.35s; }
974
+
975
+ /* ───────── simple view: the selected step opened into a capsule of its actions */
976
+ .fcap { position: relative; z-index: 1; flex: none; box-sizing: border-box; margin-left: -20px; padding: 4px 0 0 10px; align-self: flex-start; }
977
+ .fcap::before { content: ''; position: absolute; top: 17px; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--border-strong); }
978
+ .fcap.enter { animation: fcap-in 0.28s cubic-bezier(.2,.7,.3,1) both; }
979
+ @keyframes fcap-in { from { max-width: 0; padding-left: 0; padding-right: 0; margin-left: 0; opacity: 0; overflow: hidden; } 99% { max-width: 400px; overflow: hidden; } to { max-width: 400px; } }
980
+ .fcap-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 4px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--border); transition: box-shadow 0.35s; }
981
+ .heat-on .fcap-in[style*='--heat'] { box-shadow: 0 0 0 1.5px var(--glow), 0 0 10px 1px var(--glow); }
982
+ .fm { --c: var(--other); position: relative; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--c); background: color-mix(in srgb, var(--c) 24%, var(--surface)); transition: transform 0.15s; }
983
+ .fm.m-ed { --c: var(--edit); }
984
+ .fm.m-cmd { --c: var(--done); }
985
+ .fm.m-sa { --c: var(--agent); }
986
+ .fm.s-bad { --c: var(--bad); }
987
+ .fm.s-rec { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bad) 60%, transparent); }
988
+ .fm.s-live { --c: var(--accent); animation: fm-live 1.6s ease-in-out infinite; }
989
+ @keyframes fm-live { 50% { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); } }
990
+ .fm:hover { transform: scale(1.18); }
991
+ .fm.sel { box-shadow: 0 0 0 2px var(--accent); }
992
+ .fm .k { display: grid; place-items: center; }
993
+ .fm svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
994
+ .fcap.enter .fm { animation: fm-in 0.22s calc(0.06s + var(--j) * 16ms) ease-out both; }
995
+ @keyframes fm-in { from { opacity: 0; transform: scale(0.4); } }
996
+ .fm-more { height: 18px; padding: 0 5px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; cursor: pointer; }
997
+ .fm-more:hover { background: var(--hover); color: var(--text); }
998
+ .fcap.dim { opacity: 0.32; }
999
+ .perr { line-height: 1.6; } .perr .tbtn { margin-left: 6px; }
1000
+
1001
+ /* ───────── simple view zoom (CSS zoom on #pathView: --fz is its factor) */
1002
+ .zoomer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 2px 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
1003
+ .zoomer .zv { min-width: 42px; height: 24px; padding: 0 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
1004
+ .zoomer .zv:hover { background: var(--hover); color: var(--text); }
1005
+ /* a mini stepped slider: 84px wide, so its 7 stops (12px thumb) fall every 12px, with a tick at each */
1006
+ #flowZoomRange { -webkit-appearance: none; appearance: none; width: 84px; height: 14px; margin: 0; background: none; cursor: pointer; }
1007
+ #flowZoomRange::-webkit-slider-runnable-track { height: 14px; background: radial-gradient(circle, var(--border-strong) 1.6px, transparent 2px) 0 50% / 12px 100% repeat-x, linear-gradient(var(--border-strong), var(--border-strong)) 6px 50% / 72px 2px no-repeat; }
1008
+ #flowZoomRange::-moz-range-track { height: 14px; background: radial-gradient(circle, var(--border-strong) 1.6px, transparent 2px) 0 50% / 12px 100% repeat-x, linear-gradient(var(--border-strong), var(--border-strong)) 6px 50% / 72px 2px no-repeat; }
1009
+ #flowZoomRange::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: 1px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); transition: transform 0.12s; }
1010
+ #flowZoomRange::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
1011
+ #flowZoomRange:hover::-webkit-slider-thumb, #flowZoomRange:active::-webkit-slider-thumb { transform: scale(1.2); }
1012
+ #flowZoomRange:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
1013
+ /* zoomed out, text keeps a readable floor on screen (about 11px titles, 10px facts) */
1014
+ #pathView .fg-title { font-size: max(14px, calc(11px / var(--fz, 1))); }
1015
+ #pathView .fg.qa .fg-title { font-size: max(13px, calc(10.5px / var(--fz, 1))); }
1016
+ #pathView .fg-meta { font-size: max(12px, calc(10px / var(--fz, 1))); }
1017
+ /* and step labels go: below 75% they would be too small to read (hover shows them) */
1018
+ #pathView.fz-small .fn-l { display: none; }
1019
+ #pathView.fz-small .fn { gap: 0; }
1020
+ /* the column keeps its width on screen at any zoom (zoom multiplies CSS pixels, so divide them) */
1021
+ #pathView { max-width: calc(940px / var(--fz, 1)); padding: calc(4px / var(--fz, 1)) calc(20px / var(--fz, 1)) calc(120px / var(--fz, 1)); }
1022
+
1023
+ /* ───────── server stopped: a bar under the top bar */
1024
+ .down-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 12.5px; color: var(--text); background: var(--bad-bg); border-bottom: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); position: relative; z-index: 5; animation: down-in 0.25s ease-out; }
1025
+ .down-bar b { color: var(--bad); font-weight: 650; }
1026
+ .down-bar code { padding: 1px 5px; border-radius: 4px; background: var(--surface); font-size: 11.5px; }
1027
+ .down-bar svg { width: 16px; height: 16px; fill: none; stroke: var(--bad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
1028
+ @keyframes down-in { from { opacity: 0; transform: translateY(-4px); } }
1029
+
1030
+ /* Copy buttons on the details panel's cards: faint until the card is hovered, a tick once copied. */
1031
+ .cpy { flex: none; width: 22px; height: 22px; padding: 3px; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; opacity: 0.65; transition: opacity 0.15s, background 0.15s, color 0.15s; }
1032
+ .cpy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
1033
+ .cpy:hover { opacity: 1; color: var(--text); background: var(--hover); }
1034
+ .cpy:focus-visible { opacity: 1; outline: 2px solid var(--accent); }
1035
+ .cpy.ok { opacity: 1; color: var(--done); }
1036
+ .cpy.ok svg path { d: path('M5 12.5l4.5 4.5L19 7'); }
1037
+ .pl { display: flex; align-items: center; gap: 8px; }
1038
+ .pl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1039
+ .pl .cpy { margin: -4px -6px -4px 0; }
1040
+ .dfile .cpy { margin: -4px -6px -4px 2px; }
1041
+ /* Cards of the conversation: the button sits in the top right corner. */
1042
+ .ev-prompt, .ev-text, details.ev-think > div { position: relative; }
1043
+ .ev-prompt > .cpy, .ev-text > .cpy, details.ev-think > div > .cpy { position: absolute; top: 4px; right: 4px; opacity: 0.5; }
1044
+ .ev-prompt, details.ev-think > div { padding-right: 34px; }
1045
+ .ev-text { padding-right: 28px; }
1046
+ .ev-text > .cpy { top: -2px; right: -2px; }
1047
+ .ev-prompt:hover > .cpy, .ev-text:hover > .cpy, details.ev-think > div:hover > .cpy, .ev > .cpy:focus-visible, .ev > .cpy.ok { opacity: 1; }
1048
+
1049
+ /* ───────────── Glance: the run at a glance, with (nearly) no text ───────────── */
1050
+ /* Only the views switch stays in the toolbar, and the overview gives way to the orb. */
1051
+ /* Switching into or out of Glance (see setView): the timeline collapses upwards and fades (or
1052
+ comes back), the view switch, the heat button and the toolbar move to their new places, and the
1053
+ rest cross-fades. The names are only set during the transition. */
1054
+ .vt-glance #overview { view-transition-name: lc-overview; }
1055
+ .vt-glance .toolbar:not([hidden]) { view-transition-name: lc-toolbar; }
1056
+ .vt-glance .toolbar:not([hidden]) .vseg { view-transition-name: lc-views; }
1057
+ .vt-glance #heatBtn { view-transition-name: lc-heat; }
1058
+ ::view-transition-group(*) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
1059
+ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
1060
+ /* The bar that moves stays above the timeline, and the app bar above both: the timeline slides
1061
+ away under it. */
1062
+ .vt-glance header.top { view-transition-name: lc-top; }
1063
+ ::view-transition-group(lc-top) { z-index: 4; }
1064
+
1065
+ ::view-transition-group(lc-overview) { z-index: 1; }
1066
+ ::view-transition-group(lc-toolbar) { z-index: 2; }
1067
+ ::view-transition-group(lc-views), ::view-transition-group(lc-heat) { z-index: 3; }
1068
+ /* The timeline slides with the view switch (same distance, time and easing, see setView), so the
1069
+ gap between them holds, and fades out on the way (or in, coming back). */
1070
+ ::view-transition-old(lc-overview) { animation: lc-slide 0.34s cubic-bezier(0.3, 0, 0.2, 1) both; }
1071
+ ::view-transition-new(lc-overview) { animation: lc-slide-in 0.34s cubic-bezier(0.3, 0, 0.2, 1) both; }
1072
+ @keyframes lc-slide { to { opacity: 0; transform: translateY(var(--vt-dy, -40px)); } }
1073
+ @keyframes lc-slide-in { from { opacity: 0; transform: translateY(var(--vt-dy, -40px)); } }
1074
+ /* Glance keeps only the view switch and the token heat button. */
1075
+ #tbPath.tb-glance > :not(.vseg):not(#heatBtn) { display: none !important; }
1076
+ #tbPath.tb-glance { justify-content: center; }
1077
+ .pane.glance-on #overview, .pane.glance-on .fab-wrap { display: none; }
1078
+ .pane.glance-on .toolbar { top: 0; }
1079
+ /* Glance fits the pane: rows sliding or unfolding must not make it scroll. */
1080
+ .pane.glance-on { overflow-y: hidden; }
1081
+ .gx-wheel { overflow: hidden; }
1082
+ .gh-rest { font-size: 18px; line-height: 1; letter-spacing: 2px; color: var(--faint); padding: 0 6px 6px; cursor: default; }
1083
+ .glance { --amber: #d99a00; max-width: 1180px; margin: 0 auto; padding: 44px 24px 72px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
1084
+ :root[data-theme='dark'] .glance { --amber: #f2c14e; }
1085
+
1086
+ /* The orb: what the agent is doing, and whether it needs you. */
1087
+ .gx-state { --oc: var(--faint); position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
1088
+ /* A question waiting on you: a speech balloon out of the orb, quoting it. Beside the orb, so
1089
+ nothing else moves when it comes or goes. */
1090
+ .gx-ask { position: absolute; left: calc(50% + 84px); top: 14px; width: max-content; max-width: min(360px, calc(50vw - 130px)); padding: 10px 14px 11px;
1091
+ border: 2px solid var(--amber); border-radius: 18px; background: color-mix(in srgb, var(--amber) 10%, var(--surface)); color: var(--text);
1092
+ font-size: 14px; line-height: 1.4; text-align: left; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--amber) 70%, transparent);
1093
+ transform-origin: left center; animation: gx-ask-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
1094
+ .gx-ask[hidden] { display: none; }
1095
+ .gx-ask small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); }
1096
+ .gx-ask span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
1097
+ /* The tail, pointing at the orb: an amber triangle, and a filled one inside it. */
1098
+ .gx-ask::before, .gx-ask::after { content: ''; position: absolute; top: 30px; border-style: solid; border-color: transparent; }
1099
+ .gx-ask::before { left: -15px; border-width: 8px 15px 8px 0; border-right-color: var(--amber); }
1100
+ .gx-ask::after { left: -10px; top: 32px; border-width: 6px 11px 6px 0; border-right-color: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
1101
+ @keyframes gx-ask-in { from { opacity: 0; transform: scale(0.6) translateX(-12px); } }
1102
+ .gx-state.work { --oc: var(--accent); }
1103
+ .gx-state.you { --oc: var(--amber); }
1104
+ .gx-state.bad { --oc: var(--bad); }
1105
+ .gx-state.done, .gx-state.rest { --oc: var(--done); }
1106
+ .gx-orb { position: relative; width: 120px; height: 120px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--oc);
1107
+ background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--oc) 20%, var(--surface)), color-mix(in srgb, var(--oc) 7%, var(--surface)) 72%);
1108
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc) 60%, transparent), 0 14px 44px -14px color-mix(in srgb, var(--oc) 60%, transparent);
1109
+ transition: color 0.8s, background 0.8s, box-shadow 0.8s, transform 0.25s; }
1110
+ .gx-orb:hover { transform: scale(1.03); }
1111
+ .gx-orb svg { position: relative; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
1112
+ .gx-orb.swap svg { animation: gx-swap 0.5s ease-out; }
1113
+ @keyframes gx-swap { from { opacity: 0; transform: scale(0.7); } }
1114
+ /* Halo: breathing while it works, a slower, warmer pulse when it's your turn; still otherwise. */
1115
+ .gx-orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
1116
+ .gx-state.work .gx-orb::before { animation: gx-breathe 3.2s ease-in-out infinite; }
1117
+ .gx-state.you .gx-orb::before, .gx-state.done .gx-orb::before { animation: gx-breathe 2.4s ease-in-out infinite; }
1118
+ @keyframes gx-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oc) 32%, transparent); } 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--oc) 0%, transparent); } }
1119
+ .gx-state.off .gx-orb { box-shadow: 0 0 0 2px var(--border-strong); }
1120
+ .gx-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; }
1121
+ .gx-title { max-width: min(70ch, 92%); font-size: 13.5px; color: var(--faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.3em; }
1122
+
1123
+ /* The current task: its chain, larger, every node sized so the whole task fits the width. */
1124
+ /* The spotlight's chain: one row, one node in the middle, start and end always in view;
1125
+ placeChain() sets each node's place and opacity. */
1126
+ .gx-track { --slot: 88px; --sz: 52px; position: relative; width: 100%; height: var(--sz); }
1127
+ .gx-track > .fn { position: absolute; left: 0; top: 0; width: var(--slot); gap: 0; transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.3, 1), opacity 0.45s; }
1128
+ .gx-track > .fn.gx-off { pointer-events: none; }
1129
+ /* A step that just appeared pops in on its spot (see placeChain). */
1130
+ .gx-track > .fn.gx-new .fn-s { animation: fn-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
1131
+ .gx-track > .fn.gx-new .fn-l { animation: gx-fade-in 0.45s ease-out both; }
1132
+ @keyframes gx-fade-in { from { opacity: 0; } }
1133
+ .glance .fn.start { position: absolute; z-index: auto; background: none; box-shadow: none; }
1134
+ .glance .fn-s, .glance .fn .shp { width: var(--sz); height: var(--sz); }
1135
+ .glance .fn .gl { width: calc(var(--sz) * 0.4); height: calc(var(--sz) * 0.4); stroke-width: 1.8; }
1136
+ .glance .fn.mid .gl { width: calc(var(--sz) * 0.3); height: calc(var(--sz) * 0.3); }
1137
+ .glance .fn .sh { stroke-width: 1.5; }
1138
+ .glance .fl, .glance .fn-l, .glance .fn-n { display: none; }
1139
+ .glance .fn-b { top: -3px; right: -3px; }
1140
+ .glance .fn.st-live .fn-s::before { inset: 4px; }
1141
+ /* The node in the middle sits a little larger. */
1142
+ .gx-track > .fn.gx-mid .fn-s { transform: scale(1.1); }
1143
+ /* Steps that don't fit: a dotted gap. */
1144
+ .gx-gaps { position: absolute; left: 0; right: 0; top: 18px; height: 52px; pointer-events: none; }
1145
+ .gx-gap { position: absolute; top: 50%; transform: translate(-50%, -50%); padding: 0 6px; color: var(--faint); font-size: 16px; letter-spacing: 3px; line-height: 1; pointer-events: auto; cursor: default; }
1146
+ .gx-gap::before { content: '···'; }
1147
+ .gw-row:not(.spot) .gx-gaps { display: none; }
1148
+
1149
+ /* The wheel: the spotlighted task unfolded, two compressed tasks above and below, fading out. */
1150
+ .gx-wheel { width: 100%; display: flex; flex-direction: column; align-items: center; }
1151
+ .gw-row { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; transition: opacity 0.45s; }
1152
+ .gw-row.pad, .gw-row:not(.spot) { height: 58px; justify-content: center; }
1153
+ .gw-row.d1 { opacity: 0.55; }
1154
+ .gw-row.d2 { opacity: 0.2; }
1155
+ .gw-row:not(.spot):hover { opacity: 0.9; }
1156
+ .gw-row.spot .gw-c, .gw-row:not(.spot) .gx-track { display: none; }
1157
+ /* The spotlight task's own heat, kept where its node was before it unfolded: a soft disc on the
1158
+ spine, behind the step in the middle (which glows on its own on top). */
1159
+ .gx-halo { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
1160
+ .heat-on .gw-row.spot .gx-halo[style*='--heat'] { opacity: 1; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--heat) calc(var(--heat-a) * var(--heat-k) * 26%), transparent) 35%, transparent); }
1161
+ .gw-row > .gx-track, .gw-row > .gw-c { position: relative; }
1162
+ /* The spotlight row keeps its unfolded height while the wheel turns, so nothing below it moves. */
1163
+ .gw-row.d0 { height: 88px; justify-content: center; }
1164
+ .gw-n { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform 0.2s; }
1165
+ .gw-n:hover { transform: scale(1.12); }
1166
+ .gw-n .fg-n { width: 30px; height: 30px; }
1167
+ /* The wheel magnifies towards the spotlight: the outer tasks at their size, the next ones 30%
1168
+ larger, the one in the spotlight 70% (while the wheel turns, before it unfolds). */
1169
+ .gw-c { transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1); }
1170
+ .gw-row.d1 .gw-c { transform: scale(1.3); }
1171
+ .gw-row.d0 .gw-c { transform: scale(1.7); }
1172
+ .gw-n .fg-n .gl { width: 14px; height: 14px; }
1173
+ /* The spotlighted chain unfolds sideways out of the middle. */
1174
+ /* Away from the live task: the orb's ring dims a little, inviting a click to go back. */
1175
+ .gx-hint { margin-top: 6px; font-size: 11.5px; color: var(--faint); opacity: 0.7; transition: opacity 0.3s; text-align: center; }
1176
+ .gx-hint kbd { font: inherit; font-size: 10.5px; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; }
1177
+ .glance:hover .gx-hint { opacity: 1; }
1178
+ .gx-state.away .gx-orb { opacity: 0.8; }
1179
+ .gx-state.away .gx-orb:hover { opacity: 1; }
1180
+ @media (prefers-reduced-motion: reduce) {
1181
+ .gx-orb::before, .gx-orb.swap svg, .gx-ask { animation: none !important; }
1182
+ .gx-track > .fn { transition: none; }
1183
+ .gx-track > .fn.gx-new .fn-s, .gx-track > .fn.gx-new .fn-l { animation: none; }
1184
+ }
1185
+