@vale-dinap/lucidly 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/LICENSE +202 -0
- package/NOTICE +2 -0
- package/README.md +122 -2
- package/bin/lucidly.js +5 -0
- package/dist/adapters/claude-code.js +367 -0
- package/dist/adapters/claude-tools.js +123 -0
- package/dist/adapters/text.js +106 -0
- package/dist/cli.js +215 -0
- package/dist/core/engine.js +1034 -0
- package/dist/core/events.js +5 -0
- package/dist/core/model.js +1 -0
- package/dist/core/text.js +253 -0
- package/dist/outline.js +73 -0
- package/dist/server/server.js +286 -0
- package/dist/server/session.js +101 -0
- package/dist/sources/claude-sessions.js +329 -0
- package/dist/sources/source.js +1 -0
- package/dist/sources/stdin.js +74 -0
- package/dist/sources/tail.js +105 -0
- package/package.json +50 -4
- package/web/app.js +3411 -0
- package/web/favicon.svg +9 -0
- package/web/index.html +115 -0
- package/web/style.css +973 -0
package/web/style.css
ADDED
|
@@ -0,0 +1,973 @@
|
|
|
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)); }
|