@ra3orblade/swarm 0.12.0 → 0.13.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/dist/swarm-hook.js +2 -1
- package/dist/swarm.js +2 -1
- package/dist/swarmd.js +145 -15
- package/package.json +1 -1
- package/web/dashboard.css +1 -0
- package/web/dashboard.js +23 -0
- package/web/favicon.ico +0 -0
- package/web/favicon.svg +1 -0
- package/web/icons.js +1 -0
- package/web/index.html +7 -730
- package/web/release-notes.js +1 -1
- package/web/table.js +4 -1
- package/web/viz.js +4 -1
- package/web/app.js +0 -3422
package/web/index.html
CHANGED
|
@@ -5,740 +5,17 @@
|
|
|
5
5
|
<title>Swarm</title>
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
7
|
<link rel="stylesheet" href="/fm.css">
|
|
8
|
-
<link rel="icon" href="
|
|
9
|
-
<
|
|
10
|
-
:root{
|
|
11
|
-
--bg:#f6f7f9; --panel:#ffffff; --panel-2:#f0f2f5; --line:#e4e7ec; --line-2:#eef0f3;
|
|
12
|
-
--fg:#1a1d21; --fg-2:#3d4650; --dim:#8b929c; --faint:#aab1bb;
|
|
13
|
-
/* Darkening a yellow-green in sRGB drains its chroma and leaves khaki, which is what the
|
|
14
|
-
old #4d7c0f was. These are darkened in OKLCH instead, which holds the hue: --acc clears
|
|
15
|
-
AA on both white panels (4.86:1) and the page ground (4.54:1) for text and buttons, while
|
|
16
|
-
--acc-fill is the brighter one for chart marks, where WCAG asks 3:1 rather than 4.5 and
|
|
17
|
-
the extra light is what stops the charts looking muddy. Dark mode needs no such split —
|
|
18
|
-
the accent is already bright there. */
|
|
19
|
-
--acc:#388114; --acc-fill:#559b1b; --acc-soft:rgba(85,155,27,.15);
|
|
20
|
-
--ok:#1f9d55; --ok-soft:rgba(31,157,85,.12);
|
|
21
|
-
--warn:#c77800; --warn-soft:rgba(199,120,0,.12);
|
|
22
|
-
--bad:#d1352b; --bad-soft:rgba(209,53,43,.12);
|
|
23
|
-
--violet:#7857c9;
|
|
24
|
-
/* categorical (fixed agent slots; validated adjacent-pair CVD-safe) + one-hue steps for part-to-whole */
|
|
25
|
-
--c0:#8b929c; --c1:#4d9e2a; --c2:#1b9e77; --c3:#9ab828; --c4:#2f7d4f; --c5:#7fb069; --c6:#0f5c3a; --c7:#c3d84a;
|
|
26
|
-
--acc-1:#e2f6d8; --acc-2:#b8e4a1; --acc-3:#8bc866; --acc-4:#5aa12e; --acc-5:#35741f;
|
|
27
|
-
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
|
|
28
|
-
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
|
|
29
|
-
/* type scale (px) — use these, never literals */
|
|
30
|
-
--fs-2xs:11px; --fs-xs:11.5px; --fs-sm:12px; --fs-mono:12.5px; --fs-md:13px;
|
|
31
|
-
--fs-menu:13.5px; --fs-lg:14px; --fs-xl:15px; --fs-2xl:24px;
|
|
32
|
-
/* elevation */
|
|
33
|
-
--shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
|
|
34
|
-
--shadow-pop:0 8px 24px rgba(16,24,40,.14),0 1px 3px rgba(16,24,40,.08);
|
|
35
|
-
--overlay:rgba(0,0,0,.45);
|
|
36
|
-
/* radii */
|
|
37
|
-
--r:9px; --r-sm:6px; --r-xs:4px; --r-pill:20px;
|
|
38
|
-
/* motion */
|
|
39
|
-
--t-fast:.12s; --t-med:.2s; --t-in:.32s; --t-pulse:2s;
|
|
40
|
-
/* layout constants */
|
|
41
|
-
--hdr-h:48px; --sb-w:240px; --inset-tl:96px;
|
|
42
|
-
/* text on an accent-filled surface */
|
|
43
|
-
--acc-contrast:#ffffff;
|
|
44
|
-
/* recurring spacing */
|
|
45
|
-
--pad-cell:9px 12px; --pad-page:20px 22px; --pad-ctl:7px 11px; --pad-row:7px 10px;
|
|
46
|
-
--gap-sec:18px;
|
|
47
|
-
}
|
|
48
|
-
:root:not([data-theme="light"]){
|
|
49
|
-
@media (prefers-color-scheme: dark){
|
|
50
|
-
--bg:#0c0e12; --panel:#14171d; --panel-2:#1a1e26; --line:#242932; --line-2:#1e222a;
|
|
51
|
-
--fg:#e6e9ee; --fg-2:#c2c8d0; --dim:#7c8592; --faint:#5a626e;
|
|
52
|
-
--acc:#a3e635; --acc-fill:#a3e635; --acc-soft:rgba(163,230,53,.14);
|
|
53
|
-
--ok:#3fb571; --ok-soft:rgba(63,181,113,.14);
|
|
54
|
-
--warn:#d9a441; --warn-soft:rgba(217,164,65,.14);
|
|
55
|
-
--bad:#f0655a; --bad-soft:rgba(240,101,90,.14);
|
|
56
|
-
--violet:#a68bec;
|
|
57
|
-
--c0:#7c8592; --c1:#6bbf3a; --c2:#2bb78f; --c3:#b0cf3a; --c4:#3f9d63; --c5:#93c47d; --c6:#2f8f5a; --c7:#d3e88a;
|
|
58
|
-
--acc-1:#1c3311; --acc-2:#2f5a18; --acc-3:#4d8a24; --acc-4:#7cc02f; --acc-5:#bfef7a;
|
|
59
|
-
--shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.25);
|
|
60
|
-
--shadow-pop:0 8px 24px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
|
|
61
|
-
--acc-contrast:#0e1013;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
:root[data-theme="dark"]{
|
|
65
|
-
--bg:#0c0e12; --panel:#14171d; --panel-2:#1a1e26; --line:#242932; --line-2:#1e222a;
|
|
66
|
-
--fg:#e6e9ee; --fg-2:#c2c8d0; --dim:#7c8592; --faint:#5a626e;
|
|
67
|
-
--acc:#a3e635; --acc-fill:#a3e635; --acc-soft:rgba(163,230,53,.14);
|
|
68
|
-
--ok:#3fb571; --ok-soft:rgba(63,181,113,.14);
|
|
69
|
-
--warn:#d9a441; --warn-soft:rgba(217,164,65,.14);
|
|
70
|
-
--bad:#f0655a; --bad-soft:rgba(240,101,90,.14);
|
|
71
|
-
--violet:#a68bec;
|
|
72
|
-
--c0:#7c8592; --c1:#6bbf3a; --c2:#2bb78f; --c3:#b0cf3a; --c4:#3f9d63; --c5:#93c47d; --c6:#2f8f5a; --c7:#d3e88a;
|
|
73
|
-
--acc-1:#1c3311; --acc-2:#2f5a18; --acc-3:#4d8a24; --acc-4:#7cc02f; --acc-5:#bfef7a;
|
|
74
|
-
--shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.25);
|
|
75
|
-
--shadow-pop:0 8px 24px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
|
|
76
|
-
--acc-contrast:#0e1013;
|
|
77
|
-
}
|
|
8
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
9
|
+
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
|
78
10
|
|
|
79
|
-
|
|
80
|
-
html,body{height:100%}
|
|
81
|
-
/* UI zoom (desktop app: ⌘/Ctrl +, −, 0) — scales the whole page, persisted by app.js */
|
|
82
|
-
html{zoom:var(--ui-zoom,1)}
|
|
83
|
-
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-lg)/1.5 var(--sans);
|
|
84
|
-
-webkit-font-smoothing:antialiased;display:grid;grid-template-rows:var(--hdr-h) 1fr;grid-template-columns:var(--sb-w) 1fr;overflow:hidden;
|
|
85
|
-
animation:appin var(--t-in) ease both;user-select:none;-webkit-user-select:none}
|
|
86
|
-
@keyframes appin{from{opacity:0}to{opacity:1}}
|
|
87
|
-
/* Chrome (header, sidebar, controls) isn't selectable; real data stays selectable/copyable. */
|
|
88
|
-
input,textarea,tbody td,.mono,code,kbd{user-select:text;-webkit-user-select:text}
|
|
89
|
-
::selection{background:var(--acc-soft)}
|
|
90
|
-
a{color:var(--acc);text-decoration:none}
|
|
91
|
-
.dim{color:var(--dim)}.faint{color:var(--faint)}
|
|
92
|
-
.mono{font-family:var(--mono);font-size:var(--fs-mono)}
|
|
93
|
-
.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
|
|
94
|
-
kbd{font:var(--fs-mono) var(--mono);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px;color:var(--fg-2)}
|
|
95
|
-
code{font:var(--fs-md) var(--mono);color:var(--fg-2)}
|
|
96
|
-
|
|
97
|
-
/* collapsed sidebar = icon rail (M9.1): views stay one click away; projects via ⌘K */
|
|
98
|
-
body.nosb{grid-template-columns:46px 1fr}
|
|
99
|
-
body.nosb>aside{padding:12px 5px;overflow:hidden}
|
|
100
|
-
body.nosb #projects{display:none}
|
|
101
|
-
body>aside{grid-column:1;grid-row:2}
|
|
102
|
-
body>main{grid-column:2;grid-row:2}
|
|
103
|
-
#projects h4{display:flex;align-items:center;gap:5px}
|
|
104
|
-
.h4-act{margin-left:auto;cursor:pointer;color:var(--faint);display:inline-flex;padding:2px;border-radius:var(--r-xs)}
|
|
105
|
-
.h4-act:hover{color:var(--acc)}
|
|
106
|
-
.pk-h input{flex:1;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
|
|
107
|
-
padding:5px 9px;border-radius:var(--r-sm);font:var(--fs-mono) var(--mono);outline:none;min-width:0}
|
|
108
|
-
.pk-h input:focus{border-color:var(--acc)}
|
|
109
|
-
|
|
110
|
-
/* header */
|
|
111
|
-
header{grid-column:1/3;display:flex;align-items:center;gap:6px;padding:0 16px;
|
|
112
|
-
border-bottom:1px solid var(--line);background:var(--panel);z-index:5}
|
|
113
|
-
/* macOS desktop app: overlay title bar — pad the header clear of the traffic lights,
|
|
114
|
-
but reclaim the space in fullscreen where the lights are hidden. */
|
|
115
|
-
html.chrome-inset header{padding-left:var(--inset-tl)}
|
|
116
|
-
html.chrome-inset.fs header{padding-left:16px}
|
|
117
|
-
/* Overlay title bar hides the native drag region; app.js wires header mousedown to
|
|
118
|
-
the Tauri window drag. Interactive controls keep the default cursor. */
|
|
119
|
-
html.chrome-inset header{cursor:default}
|
|
120
|
-
header .logo{font-weight:700;letter-spacing:.02em;font-size:var(--fs-xl);margin-right:14px;display:flex;align-items:center;gap:8px}
|
|
121
|
-
header .logo svg{width:22px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
|
|
122
|
-
header .nav{color:var(--dim);padding:6px 11px;border-radius:var(--r-sm);font-weight:500;transition:color var(--t-fast),background var(--t-fast)}
|
|
123
|
-
header .nav:hover{color:var(--fg-2)}
|
|
124
|
-
header .nav.on{color:var(--fg);background:var(--panel-2)}
|
|
125
|
-
header .sp{flex:1}
|
|
126
|
-
header #today{margin-right:18px;color:var(--dim);font-variant-numeric:tabular-nums}
|
|
127
|
-
header #today b{color:var(--fg-2);font-weight:600}
|
|
128
|
-
#daemon{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:var(--fs-md)}
|
|
129
|
-
#daemon .dot{width:7px;height:7px;border-radius:50%;background:var(--bad);transition:background var(--t-med)}
|
|
130
|
-
#daemon .dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
|
|
131
|
-
|
|
132
|
-
/* sidebar */
|
|
133
|
-
body>aside{border-right:1px solid var(--line);background:var(--panel);padding:12px 10px;overflow:auto;display:flex;flex-direction:column}
|
|
134
|
-
/* view nav (M9.1): grouped views in the sidebar, generated from VIEW_DEFS; header holds only chrome */
|
|
135
|
-
/* View nav lives in the header: one button per group, click opens a fancy-menus dropdown. */
|
|
136
|
-
#viewnav{display:flex;align-items:center;gap:2px}
|
|
137
|
-
#viewnav .navgrp{display:flex;align-items:center;gap:6px;color:var(--dim);padding:6px 10px;border:0;background:none;
|
|
138
|
-
border-radius:var(--r-sm);font:inherit;font-size:var(--fs-md);font-weight:500;cursor:pointer;
|
|
139
|
-
transition:color var(--t-fast),background var(--t-fast)}
|
|
140
|
-
#viewnav .navgrp:hover{color:var(--fg-2);background:var(--panel-2)}
|
|
141
|
-
#viewnav .navgrp.on{color:var(--fg);background:var(--panel-2)}
|
|
142
|
-
/* the active view's own name, so the header answers "where am I" without opening a menu */
|
|
143
|
-
#viewnav .navview{color:var(--acc);font-weight:600}
|
|
144
|
-
#viewnav .navview::before{content:"";display:inline-block;width:1px;height:11px;margin:0 7px -1px;background:var(--line)}
|
|
145
|
-
/* while this button's menu is open: held-down state, so the trigger reads as the open one */
|
|
146
|
-
#viewnav .navgrp.open{color:var(--fg);background:var(--line)}
|
|
147
|
-
#viewnav .navgrp.open .chev{opacity:.9;transform:rotate(180deg)}
|
|
148
|
-
#viewnav .navgrp .chev{opacity:.5;flex:none}
|
|
149
|
-
#viewnav .navcount{background:var(--bad-soft);color:var(--bad);border-radius:99px;padding:0 5px;font-size:var(--fs-2xs);font-weight:600}
|
|
150
|
-
body>aside h4{margin:14px 8px 6px;color:var(--faint);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.09em}
|
|
151
|
-
body>aside h4:first-child{margin-top:2px}
|
|
152
|
-
.proj{position:relative;padding:var(--pad-row);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:9px;
|
|
153
|
-
color:var(--fg-2);transition:background var(--t-fast);user-select:none}
|
|
154
|
-
.proj:hover{background:var(--panel-2)}
|
|
155
|
-
.proj.sel{background:var(--acc-soft);color:var(--fg)}
|
|
156
|
-
.proj.sel .nm{font-weight:600}
|
|
157
|
-
.proj .st{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;transition:background var(--t-med)}
|
|
158
|
-
.proj .st.live{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
|
|
159
|
-
.proj .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
|
|
160
|
-
.proj small{color:var(--dim);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);flex:none;min-width:15px;text-align:right}
|
|
161
|
-
/* The ⋯ still takes no space in the row, but it is lifted out of flow rather than display:none'd:
|
|
162
|
-
toggling a flex item on hover reflowed everything before it, so the sparkline visibly jumped.
|
|
163
|
-
`small` only loses visibility, keeping its box. `.menu-open` holds the ⋯ while its menu is
|
|
164
|
-
open — the pointer is over the menu by then, so :hover alone made the trigger vanish. */
|
|
165
|
-
.proj .act{position:absolute;right:var(--pad-row-x,7px);top:50%;transform:translateY(-50%);
|
|
166
|
-
display:inline-flex;opacity:0;pointer-events:none;color:var(--faint);font-size:var(--fs-lg);line-height:1;
|
|
167
|
-
padding:2px;border-radius:var(--r-xs);transition:color var(--t-fast),background var(--t-fast),opacity var(--t-fast)}
|
|
168
|
-
.proj:hover .act,.proj.menu-open .act,.proj .act:focus-visible{opacity:1;pointer-events:auto}
|
|
169
|
-
.proj:hover small,.proj.menu-open small{visibility:hidden}
|
|
170
|
-
.proj .act:hover{color:var(--fg);background:var(--line)}
|
|
171
|
-
.proj .act.rm:hover{color:var(--bad)}
|
|
172
|
-
.srch{display:flex;gap:8px;margin-bottom:14px}
|
|
173
|
-
.srch input{flex:1;max-width:640px;background:var(--panel);border:1px solid var(--line);color:var(--fg);border-radius:var(--r-sm);padding:8px 12px;font:var(--fs-md) var(--sans)}
|
|
174
|
-
.srch input:focus{border-color:var(--acc);outline:none}
|
|
175
|
-
.hit{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);margin-bottom:8px}
|
|
176
|
-
.hit .ht{display:flex;gap:8px;align-items:center;margin-bottom:4px}
|
|
177
|
-
.hit .hs{font-size:var(--fs-sm);color:var(--fg-2);white-space:pre-wrap}
|
|
178
|
-
.hit mark{background:var(--warn-soft);color:var(--fg);border-radius:2px;padding:0 1px}
|
|
179
|
-
.dr-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin:10px 0}
|
|
180
|
-
.dr-rule{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
|
|
181
|
-
.dr-rule select{background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 4px}
|
|
182
|
-
.dr-flaky{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);margin:6px 0;background:var(--panel-2)}
|
|
183
|
-
table.plain{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} table.plain td{padding:3px 6px;border-top:1px solid var(--line);vertical-align:top}
|
|
184
|
-
/* ⌘K palette (M9.1): top-anchored .pk variant; rows reuse .pk-row */
|
|
185
|
-
.pk.pal{align-self:start;margin-top:9vh}
|
|
186
|
-
.pal .pk-list{min-height:120px;max-height:min(440px,62vh)}
|
|
187
|
-
.pal .pk-row.on{background:var(--acc-soft);color:var(--fg)}
|
|
188
|
-
.pal .pk-row .grp{margin-left:auto;color:var(--faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em}
|
|
189
|
-
#picker:empty{display:none}
|
|
190
|
-
#picker{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:50}
|
|
191
|
-
.pk{width:min(560px,92vw);max-height:78vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);overflow:hidden}
|
|
192
|
-
.pk-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
|
|
193
|
-
.pk-list{overflow:auto;padding:6px}
|
|
194
|
-
.pk-row{display:flex;align-items:center;gap:9px;padding:var(--pad-row);border-radius:var(--r-sm);cursor:pointer;color:var(--fg-2)}
|
|
195
|
-
.pk-row:hover{background:var(--panel-2)}.pk-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
196
|
-
.pk-row.up{color:var(--dim)}.pk-row .badge{margin:0}
|
|
197
|
-
.pk-b{padding:12px 14px;display:grid;gap:10px}
|
|
198
|
-
.pk-b label{display:grid;gap:4px;font:500 var(--fs-sm) var(--sans);color:var(--dim)}
|
|
199
|
-
.pk-b input,.pk-b textarea,.pk-b select{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
|
|
200
|
-
border-radius:var(--r-sm);padding:7px 9px;font:var(--fs-md) var(--sans);outline:none}
|
|
201
|
-
.pk-b textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.5}
|
|
202
|
-
.pk-b input:focus,.pk-b textarea:focus,.pk-b select:focus{border-color:var(--acc)}
|
|
203
|
-
.pk-b .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
|
|
204
|
-
/* Worktree diff drawer (M7.3) */
|
|
205
|
-
.pk.wide{width:min(960px,96vw)}
|
|
206
|
-
.df-files{display:grid;gap:1px;max-height:22vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
|
|
207
|
-
.df-files a{display:flex;gap:10px;padding:4px 8px;color:var(--fg-2);text-decoration:none;font:var(--fs-sm) var(--mono)}
|
|
208
|
-
.df-files a:hover,.df-files a.on{background:var(--panel-2);color:var(--fg)}
|
|
209
|
-
.df-files .st{width:12px;color:var(--dim)}.df-files .pl{color:var(--ok)}.df-files .mi{color:var(--warn)}.df-files .pa{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
210
|
-
.df-patch{max-height:44vh;overflow:auto;margin:0;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);font:var(--fs-sm) var(--mono);line-height:1.45;white-space:pre}
|
|
211
|
-
.df-patch .a{color:var(--ok)}.df-patch .d{color:var(--warn)}.df-patch .h{color:var(--acc)}.df-patch .m{color:var(--dim)}
|
|
212
|
-
/* What's New (release notes) */
|
|
213
|
-
.wn .pk-b{max-height:64vh;overflow:auto;gap:2px}
|
|
214
|
-
.wn h3{margin:0 0 2px;font:600 var(--fs-lg) var(--sans);color:var(--fg)}
|
|
215
|
-
.wn .date{color:var(--dim);font-size:var(--fs-sm);margin-bottom:12px}
|
|
216
|
-
.wn h4{margin:14px 0 4px;font:600 var(--fs-md) var(--sans);color:var(--acc);text-transform:none;letter-spacing:0}
|
|
217
|
-
.wn ul{margin:0 0 6px;padding-left:18px}
|
|
218
|
-
.wn li{margin:5px 0;line-height:1.55;color:var(--fg-2)}
|
|
219
|
-
.wn p{margin:0 0 10px;color:var(--fg-2);line-height:1.6}
|
|
220
|
-
.wn code{font-family:var(--mono);font-size:var(--fs-sm);background:var(--panel-2);border-radius:var(--r-xs);padding:1px 5px}
|
|
221
|
-
.wn a{color:var(--acc)}
|
|
222
|
-
.wn b{color:var(--fg)}
|
|
223
|
-
.wn .snip{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.5;white-space:pre-wrap;word-break:break-word;margin:2px 0 12px;color:var(--fg-2)}
|
|
224
|
-
.wn .cbtn{font-weight:500;font-size:var(--fs-sm);color:var(--acc);margin-left:8px}
|
|
225
|
-
/* Replay steps through calls whose payloads differ wildly in size. With the dialog free to grow
|
|
226
|
-
to `.pk`'s max-height, every step resized it — and because it is centred, Prev/Next moved
|
|
227
|
-
vertically under the cursor mid-click. The dialog is a fixed height and the body scrolls
|
|
228
|
-
inside it, so only the content changes as you step. One scroll region, not nested ones. */
|
|
229
|
-
.rp{height:78vh}
|
|
230
|
-
.rp .pk-b{max-height:none;flex:1;min-height:0;overflow:auto;gap:2px}
|
|
231
|
-
.rp .snip{max-height:none;overflow:visible}
|
|
232
|
-
.rp .pk-f input[type=range]{accent-color:var(--acc)}
|
|
233
|
-
/* pending permission prompts (M3.2) */
|
|
234
|
-
.perm{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r-sm);padding:10px 12px;margin-top:10px}
|
|
235
|
-
.perm-t{font:500 var(--fs-md) var(--sans);color:var(--fg)}
|
|
236
|
-
.perm-c{font-family:var(--mono);font-size:var(--fs-sm);color:var(--fg-2);margin:6px 0 8px;word-break:break-all;background:var(--panel-2);border-radius:var(--r-xs);padding:6px 8px}
|
|
237
|
-
.perm-b{display:flex;gap:8px}
|
|
238
|
-
.perm-b .ok{color:var(--acc);border-color:var(--acc-soft)}
|
|
239
|
-
.perm-b .danger{color:var(--warn);border-color:var(--warn-soft)}
|
|
240
|
-
/* stdin box for spawned sessions (M3.3) */
|
|
241
|
-
.stdin{display:flex;gap:8px;margin-top:10px;align-items:center}
|
|
242
|
-
.stdin input{flex:1;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);border-radius:var(--r-sm);padding:8px 10px;font:var(--fs-md) var(--sans);outline:none}
|
|
243
|
-
.stdin input:focus{border-color:var(--acc)}
|
|
244
|
-
.stdin button.danger{color:var(--warn);border-color:var(--warn-soft)}
|
|
245
|
-
.stdin .hint{color:var(--dim);font-size:var(--fs-sm)}
|
|
246
|
-
.pk-f{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
|
|
247
|
-
.pk-f button{flex:none}
|
|
248
|
-
/* a flex spacer, anywhere (the picker header relied on this being global and it wasn't) */
|
|
249
|
-
.grow{flex:1}
|
|
250
|
-
.pk-f .primary{background:var(--acc);border-color:var(--acc);color:var(--acc-contrast)}
|
|
251
|
-
.pk-f .primary:hover{filter:brightness(1.06);color:var(--acc-contrast)}
|
|
252
|
-
.proj .nm .pdir{opacity:.5;font-weight:400}
|
|
253
|
-
/* drag-to-reorder (pinned rows only) */
|
|
254
|
-
.proj[draggable]{cursor:grab}
|
|
255
|
-
.proj.dragging{opacity:.35;background:var(--panel-2);outline:1px dashed var(--acc)}
|
|
256
|
-
button{background:var(--panel);border:1px solid var(--line);color:var(--fg-2);padding:var(--pad-ctl);
|
|
257
|
-
border-radius:var(--r-sm);font:600 var(--fs-md) var(--sans);cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast);
|
|
258
|
-
display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}
|
|
259
|
-
/* icon-only buttons (the picker's ×): square, the glyph dead-centre */
|
|
260
|
-
.pk-h button{padding:6px;line-height:0}
|
|
261
|
-
button:hover{border-color:var(--acc);color:var(--fg)}
|
|
262
|
-
|
|
263
|
-
/* main */
|
|
264
|
-
main{overflow:auto;padding:var(--pad-page)}
|
|
265
|
-
h2.hrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
|
|
266
|
-
h2.hrow .s{margin:0}
|
|
267
|
-
h2{font-size:var(--fs-md);margin:0 0 12px;color:var(--dim);font-weight:600;text-transform:uppercase;
|
|
268
|
-
letter-spacing:.07em;display:flex;gap:10px;align-items:baseline}
|
|
269
|
-
h2 span{font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint);font-size:var(--fs-md)}
|
|
270
|
-
/* section-header actions (New worktree, Collect stale, Dispatch clear, timeline ranges):
|
|
271
|
-
small buttons, not shouting header text — normal case, centered icon, hover chip */
|
|
272
|
-
h2 .nav{display:inline-flex;align-items:center;gap:5px;font:500 var(--fs-md) var(--sans);text-transform:none;letter-spacing:0;color:var(--acc);text-decoration:none;padding:2px 8px;border-radius:var(--r-sm);transition:background var(--t-fast)}
|
|
273
|
-
h2 .nav:hover{background:var(--acc-soft)}
|
|
274
|
-
h2 .nav.on{background:var(--acc-soft)}
|
|
275
|
-
h2 .nav .ph{display:block}
|
|
276
|
-
h2 .back{color:var(--fg-2);text-transform:none;letter-spacing:0;font-weight:600;font-size:var(--fs-md);display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);transition:border-color var(--t-fast),color var(--t-fast)}
|
|
277
|
-
|
|
278
|
-
/* tables */
|
|
279
|
-
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow-x:auto}
|
|
280
|
-
table{width:100%;border-collapse:collapse;table-layout:fixed}
|
|
281
|
-
.card table{background:var(--panel)}
|
|
282
|
-
thead th{text-align:left;padding:var(--pad-cell);color:var(--dim);font-weight:500;font-size:var(--fs-sm);
|
|
283
|
-
border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
|
|
284
|
-
tbody td{padding:var(--pad-cell);border-bottom:1px solid var(--line-2);white-space:nowrap;
|
|
285
|
-
overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
|
|
286
|
-
tbody tr:last-child td{border-bottom:0}
|
|
287
|
-
/* edge tool cell: never ellipsize (the browser's "…" showed as a stray dot on every row) */
|
|
288
|
-
tbody td.td-tools{text-overflow:clip;padding-left:0;padding-right:0;text-align:center}
|
|
289
|
-
/* badge-only cells: the pill has its own margin, so the cell never needs an ellipsis */
|
|
290
|
-
tbody td.td-badge{text-overflow:clip}tbody td.td-badge .badge{margin-right:0}
|
|
291
|
-
/* Only rows that actually open something get the pointer — a right-click menu (data-ctx alone)
|
|
292
|
-
is not a click affordance, and promising one on nine grids that ignore left-clicks reads as
|
|
293
|
-
a dead row. */
|
|
294
|
-
tbody tr{transition:background var(--t-fast)}
|
|
295
|
-
tbody tr[data-s]{cursor:pointer}
|
|
296
|
-
tbody tr:hover{background:var(--panel-2)}
|
|
297
|
-
/* The status-dot cell alone opts out of clipping: `.s.active` paints a pulsing box-shadow
|
|
298
|
-
that a 24px `overflow:hidden` cell would shear off. Scoped to that cell on purpose --
|
|
299
|
-
as `td:first-child` it also un-clipped the first *content* column of every grid, so long
|
|
300
|
-
values (branch names on Outcomes) painted straight over the next column. */
|
|
301
|
-
tbody td.td-lead{overflow:visible}
|
|
302
|
-
/* data-grid (table.js): sortable/resizable/reorderable headers + filter row */
|
|
303
|
-
.dt thead th{position:relative;user-select:none;-webkit-user-select:none}
|
|
304
|
-
/* visible column dividers in the header: the "these columns are adjustable" cue */
|
|
305
|
-
.dt thead tr:first-child th[data-col]:not(:last-child)::after{content:"";position:absolute;right:0;top:25%;height:50%;
|
|
306
|
-
border-right:1px solid var(--line)}
|
|
307
|
-
.dt thead th[data-sort]{cursor:pointer}
|
|
308
|
-
.dt thead th[data-sort]:hover{color:var(--fg-2)}
|
|
309
|
-
.dt thead th.dragging{opacity:.4}
|
|
310
|
-
.dt .th-l{display:inline-flex;align-items:center;gap:5px}
|
|
311
|
-
.dt th.num .th-l{justify-content:flex-end;width:100%}
|
|
312
|
-
.dt .sort{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;display:inline-block}
|
|
313
|
-
.dt .sort.asc{border-bottom:5px solid var(--acc)}
|
|
314
|
-
.dt .sort.desc{border-top:5px solid var(--acc)}
|
|
315
|
-
.dt .th-grip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:2}
|
|
316
|
-
.dt .th-grip:hover{background:linear-gradient(to right,transparent 3px,var(--acc) 3px,var(--acc) 5px,transparent 5px)}
|
|
317
|
-
body.col-resizing{cursor:col-resize}
|
|
318
|
-
body.col-resizing .dt thead th{cursor:col-resize}
|
|
319
|
-
.dt .th-tools{text-align:right}
|
|
320
|
-
/* Pin the edge column. When the grid is wider than its card the card scrolls, and whatever sits
|
|
321
|
-
at the right edge is what gets cut — which made the whole table read as broken rather than as
|
|
322
|
-
scrollable. The tools column stays put and stays clickable instead. */
|
|
323
|
-
.dt .th-tools,.dt .td-tools{position:sticky;right:0;z-index:1}
|
|
324
|
-
.dt .th-tools{background:var(--panel-2)}
|
|
325
|
-
.dt .td-tools{background:var(--panel)}
|
|
326
|
-
tbody tr:hover .td-tools{background:var(--panel-2)}
|
|
327
|
-
.dt .th-cols{cursor:pointer;color:var(--faint);display:inline-flex}
|
|
328
|
-
.dt .th-cols:hover{color:var(--fg-2)}
|
|
329
|
-
.dt tr.filters th{padding:4px 8px;background:var(--panel)}
|
|
330
|
-
.dt tr.filters input{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
|
|
331
|
-
padding:3px 7px;border-radius:var(--r-sm);font:var(--fs-sm) var(--mono);outline:none}
|
|
332
|
-
.dt tr.filters input:focus{border-color:var(--acc)}
|
|
333
|
-
.dt .tbl-empty td{color:var(--dim);text-align:center;padding:18px;cursor:default}
|
|
334
|
-
td b{font-weight:600;color:var(--fg)}
|
|
335
|
-
td.now,td.br{font-family:var(--mono);font-size:var(--fs-mono);color:var(--fg-2)}
|
|
336
|
-
td.now{color:var(--dim)}
|
|
337
|
-
td a{color:var(--acc)}
|
|
338
|
-
.num{text-align:right}
|
|
339
|
-
th.num{text-align:right}
|
|
340
|
-
|
|
341
|
-
/* status dots */
|
|
342
|
-
.s{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
|
|
343
|
-
.s.active{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);animation:pulse var(--t-pulse) ease-in-out infinite}
|
|
344
|
-
.s.waiting{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
|
|
345
|
-
.s.idle{background:var(--faint)}
|
|
346
|
-
.s.ended{background:var(--line);border:1px solid var(--faint);box-shadow:none}
|
|
347
|
-
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--ok-soft)}50%{box-shadow:0 0 0 5px transparent}}
|
|
348
|
-
|
|
349
|
-
/* badges */
|
|
350
|
-
.badge{display:inline-block;font:500 var(--fs-xs) var(--sans);padding:4px 8px;border-radius:var(--r-pill);
|
|
351
|
-
background:var(--panel-2);color:var(--dim);margin-right:4px;vertical-align:middle}
|
|
352
|
-
.badge.warn{color:var(--warn);background:var(--warn-soft)}
|
|
353
|
-
.badge.acc{color:var(--acc);background:var(--acc-soft)}
|
|
354
|
-
.badge.ok{color:var(--ok);background:var(--ok-soft)}
|
|
355
|
-
.badge.bad{color:var(--bad);background:var(--bad-soft)}
|
|
356
|
-
.badge.agent{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent);font-weight:600}
|
|
357
|
-
|
|
358
|
-
/* error state: red enough to be unmistakable, not so red the stack is hard to read */
|
|
359
|
-
/* h2 is a flex row aligned on the baseline, and an SVG has no baseline to align to — which is
|
|
360
|
-
what left the icon sitting above the text. Centre this one instead. */
|
|
361
|
-
.err-h{color:var(--bad);align-items:center}
|
|
362
|
-
.err-h .err-ic{color:var(--bad);flex:none}
|
|
363
|
-
.err-card{padding:18px;max-width:760px;border:1px solid var(--bad)}
|
|
364
|
-
/* One border, on the outside. Nothing inside the card is outlined — a second rule within a
|
|
365
|
-
bordered card reads as two problems rather than one. */
|
|
366
|
-
.err-detail{margin:0;padding:10px 12px;background:var(--panel-2);border:0;
|
|
367
|
-
border-radius:var(--r-sm);font:var(--fs-mono)/1.5 var(--mono);color:var(--fg-2);
|
|
368
|
-
white-space:pre-wrap;overflow-x:auto;max-height:220px}
|
|
369
|
-
|
|
370
|
-
/* A short list of two or three facts per row. A table stretches three columns across the whole
|
|
371
|
-
card and reads as mostly gap; this keeps the words next to each other. */
|
|
372
|
-
.plainlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
|
|
373
|
-
.plainlist li{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--fg-2);
|
|
374
|
-
padding:5px 0;border-bottom:1px solid var(--line-2)}
|
|
375
|
-
.plainlist li:last-child{border-bottom:0}
|
|
376
|
-
.plainlist li b{font-family:var(--mono);font-size:var(--fs-mono);font-weight:600;color:var(--fg)}
|
|
377
|
-
/* filename first and legible, its directory after it and free to be cut */
|
|
378
|
-
td.path,span.path{font-family:var(--mono);font-size:var(--fs-mono)}
|
|
379
|
-
td.path b,span.path b{color:var(--fg);font-weight:600}
|
|
380
|
-
td.path .dim,span.path .dim{font-size:var(--fs-xs)}
|
|
381
|
-
|
|
382
|
-
/* Ranked rows with the magnitude behind the text — a four-column table for this stretches the
|
|
383
|
-
directory across the page and floats the numbers a screen away from what they describe. */
|
|
384
|
-
.heatlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
|
|
385
|
-
.heatlist li{position:relative;display:flex;align-items:center;gap:10px;padding:6px 10px;
|
|
386
|
-
font-size:var(--fs-md);color:var(--fg-2);border-radius:var(--r-sm);overflow:hidden}
|
|
387
|
-
.heatlist li .bar{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--acc-soft);border-radius:var(--r-sm)}
|
|
388
|
-
.heatlist li > span.clip{position:relative;flex:1;min-width:0;font-family:var(--mono);font-size:var(--fs-mono);
|
|
389
|
-
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
390
|
-
.heatlist li b{position:relative;font-variant-numeric:tabular-nums;color:var(--fg)}
|
|
391
|
-
.heatlist li .dim{position:relative;font-size:var(--fs-sm);white-space:nowrap}
|
|
392
|
-
|
|
393
|
-
/* empty */
|
|
394
|
-
.empty{color:var(--dim);padding:44px 24px;text-align:center;border:1px dashed var(--line);
|
|
395
|
-
border-radius:var(--r);background:var(--panel);line-height:1.7}
|
|
396
|
-
|
|
397
|
-
/* session detail */
|
|
398
|
-
.sess{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
|
|
399
|
-
.sess>*{height:calc(100vh - 140px);min-height:320px}
|
|
400
|
-
.sess.has-stdin>*{height:calc(100vh - 196px)}
|
|
401
|
-
@media (max-width:980px){.sess{grid-template-columns:1fr}.sess>*{height:auto;max-height:calc(100vh - 140px)}}
|
|
402
|
-
#log{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
|
|
403
|
-
padding:6px 0;overflow:auto}
|
|
404
|
-
/* 68 + 112 + two 12px gaps was 204px of chrome before a single character of transcript. The
|
|
405
|
-
kind labels are short now (see EV_LABEL), so the columns fit what they hold and the text
|
|
406
|
-
gets the width back. */
|
|
407
|
-
.ev{display:grid;grid-template-columns:56px 54px 1fr;gap:10px;padding:5px 14px;align-items:baseline}
|
|
408
|
-
.ev:hover{background:var(--panel-2)}
|
|
409
|
-
.ev .t{color:var(--faint);font:var(--fs-sm) var(--mono)}
|
|
410
|
-
.ev .k{color:var(--dim);font:500 var(--fs-sm) var(--mono);text-transform:lowercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
411
|
-
.ev .m{white-space:pre-wrap;word-break:break-word;color:var(--fg-2);font-size:var(--fs-menu)}
|
|
412
|
-
.ev.assistant .k{color:var(--violet)}
|
|
413
|
-
.ev.assistant .m{color:var(--fg)}
|
|
414
|
-
.ev.tool\.requested .k{color:var(--acc)}
|
|
415
|
-
.ev.tool\.requested .m{color:var(--dim);font-family:var(--mono);font-size:var(--fs-mono)}
|
|
416
|
-
.ev.incident\.opened .k,.ev.incident\.opened .m{color:var(--warn)}
|
|
417
|
-
.ev.session\.ended .k{color:var(--bad)}
|
|
418
|
-
.ev.prompt\.submitted .k{color:var(--ok)}
|
|
419
|
-
.ev.prompt\.submitted .m{color:var(--fg);font-weight:500}
|
|
420
|
-
|
|
421
|
-
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
|
|
422
|
-
padding:14px 18px;overflow:auto}
|
|
423
|
-
.side .stats{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
|
|
424
|
-
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line-2)}
|
|
425
|
-
.stat:last-of-type{border-bottom:0}
|
|
426
|
-
.stat span{color:var(--dim)}
|
|
427
|
-
.stat b{font-weight:600;font-variant-numeric:tabular-nums}
|
|
428
|
-
.stat small{color:var(--faint);font-weight:400}
|
|
429
|
-
.side h4{margin:16px 0 6px;color:var(--faint);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
|
|
430
|
-
table.mini{border:0;table-layout:fixed;width:100%}
|
|
431
|
-
table.mini td{padding:3px 0;border:0;font-size:var(--fs-md)}
|
|
432
|
-
/* Columns need a gutter of their own: a right-aligned number sits flush against whatever
|
|
433
|
-
follows it, which put "4%" and "app.js" hard up against each other. */
|
|
434
|
-
table.mini th + th,table.mini td + td{padding-left:14px}
|
|
435
|
-
table.mini td:first-child{color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
436
|
-
table.mini td.num{color:var(--dim);width:34px}
|
|
437
|
-
table.mini td.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
438
|
-
|
|
439
|
-
/* spend */
|
|
440
|
-
.bars{display:flex;gap:5px;align-items:flex-end;height:110px;background:var(--panel);
|
|
441
|
-
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px 26px;margin-bottom:var(--gap-sec)}
|
|
442
|
-
.bar{flex:1;height:100%;position:relative;display:flex;align-items:flex-end;min-width:0}
|
|
443
|
-
.bar>div{width:100%;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 70%,transparent));
|
|
444
|
-
border-radius:var(--r-xs) var(--r-xs) 0 0;min-height:2px;transition:opacity var(--t-fast)}
|
|
445
|
-
.bar:hover>div{opacity:.75}
|
|
446
|
-
.bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font:var(--fs-2xs) var(--mono);color:var(--faint)}
|
|
447
|
-
/* align-items:start — a short card (the heatmap) must not stretch to the taller column beside it */
|
|
448
|
-
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sec);align-items:start}
|
|
449
|
-
|
|
450
|
-
/* charts */
|
|
451
|
-
.chart{display:block;width:100%;overflow:visible}
|
|
452
|
-
.chart .grid{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
|
|
453
|
-
.chart .base{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
|
|
454
|
-
.chart .ax{fill:var(--faint);font:var(--fs-2xs) var(--mono);text-anchor:start}
|
|
455
|
-
.chart .ax.mid{text-anchor:middle}
|
|
456
|
-
.chart .col:hover path{filter:brightness(1.12)}
|
|
457
|
-
.chart-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px 10px;margin-bottom:var(--gap-sec)}
|
|
458
|
-
.chart-card h3{margin:0 0 10px;font-size:var(--fs-md);font-weight:600;color:var(--fg-2);display:flex;gap:10px;align-items:baseline}
|
|
459
|
-
.chart-card h3 span{color:var(--faint);font-weight:400}
|
|
460
|
-
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-size:var(--fs-mono);color:var(--fg-2)}
|
|
461
|
-
.legend span{display:inline-flex;align-items:center;gap:6px}
|
|
462
|
-
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
|
|
463
|
-
.legend em{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
|
|
464
|
-
.legend.small{font-size:var(--fs-sm);margin-top:6px}
|
|
465
|
-
#tip{position:fixed;left:0;top:0;display:none;z-index:50;pointer-events:none;background:var(--fg);color:var(--bg);
|
|
466
|
-
padding:7px 10px;border-radius:var(--r-sm);font:var(--fs-mono)/1.5 var(--sans);box-shadow:var(--shadow-pop);max-width:280px;font-variant-numeric:tabular-nums}
|
|
467
|
-
#tip b{font-weight:600}#tip span{opacity:.7}#tip i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px}
|
|
468
|
-
.spark{width:88px;height:20px;display:block;overflow:visible}
|
|
469
|
-
.spark path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
|
|
470
|
-
.comp{display:flex;gap:2px;height:12px;border-radius:var(--r-xs);overflow:hidden;margin-top:4px}
|
|
471
|
-
.comp i{display:block;min-width:2px;transition:filter var(--t-fast)}.comp i:hover{filter:brightness(1.15)}
|
|
472
|
-
.hbars{display:flex;flex-direction:column;gap:4px}
|
|
473
|
-
/* The value column was a fixed 30px with no nowrap, so anything wider than "999" wrapped onto
|
|
474
|
-
three lines and tripled the row height. It sizes to its content now and never wraps; the
|
|
475
|
-
label gets a little more room before it has to ellipsize. */
|
|
476
|
-
.hb{display:grid;grid-template-columns:minmax(0,120px) 1fr auto;gap:8px;align-items:center;font-size:var(--fs-md)}
|
|
477
|
-
.hb .k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2)}
|
|
478
|
-
.hb .t{height:8px;background:var(--panel-2);border-radius:3px;overflow:hidden}
|
|
479
|
-
.hb .t i{display:block;height:100%;border-radius:3px;min-width:2px}
|
|
480
|
-
.hb .n{text-align:right;white-space:nowrap;color:var(--dim);font-variant-numeric:tabular-nums;font-size:var(--fs-mono)}
|
|
481
|
-
.cal{position:relative;padding-top:16px}
|
|
482
|
-
.cal-months{position:absolute;top:0;left:0;right:0;height:14px}
|
|
483
|
-
.cal-months span{position:absolute;font:var(--fs-2xs) var(--mono);color:var(--faint)}
|
|
484
|
-
.cal-grid{display:grid;gap:2px}
|
|
485
|
-
.cal-col{display:grid;grid-template-rows:repeat(7,1fr);gap:2px;aspect-ratio:1/7}
|
|
486
|
-
.cal-col i{display:block;border-radius:2px;background:var(--acc);outline:1px solid var(--line-2);outline-offset:-1px}
|
|
487
|
-
.cal-col i:hover{outline-color:var(--fg)}
|
|
488
|
-
.chart.line .pt circle{opacity:0}.chart.line .pt:hover circle{opacity:1}
|
|
489
|
-
.records{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
490
|
-
.rec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 14px;display:flex;flex-direction:column;gap:2px}
|
|
491
|
-
.rec .l{font-size:var(--fs-sm);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
|
|
492
|
-
.rec .v{font-size:var(--fs-lg);font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
|
|
493
|
-
.rec .d{font-size:var(--fs-mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
494
|
-
.hm{display:grid;grid-template-columns:34px 1fr;gap:3px 8px;align-items:center}
|
|
495
|
-
.hm-lbl{font:var(--fs-xs) var(--mono);color:var(--faint)}
|
|
496
|
-
.hm-row{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:16px}
|
|
497
|
-
.hm-row i{display:block;border-radius:2px;background:var(--acc);outline:1px solid var(--line-2);outline-offset:-1px}
|
|
498
|
-
.hm-row i:hover{outline-color:var(--fg)}
|
|
499
|
-
.hm-hours{position:relative;height:14px;font:var(--fs-2xs) var(--mono);color:var(--faint)}
|
|
500
|
-
.hm-hours span{position:absolute;top:0}
|
|
501
|
-
/* timeline */
|
|
502
|
-
.tl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px 16px 12px}
|
|
503
|
-
.tl-row{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;height:24px;cursor:pointer;border-radius:var(--r-xs)}
|
|
504
|
-
.tl-row.claimlane{cursor:default} /* the claims lane opens nothing — don't promise a click */
|
|
505
|
-
.tl-row:hover{background:var(--panel-2)}
|
|
506
|
-
.tl-row.head{height:22px;cursor:default;margin-bottom:4px;position:sticky;top:-20px;background:var(--panel);z-index:2}
|
|
507
|
-
.tl-row.head:hover{background:var(--panel)}
|
|
508
|
-
.tl-name{font-size:var(--fs-md);color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px}
|
|
509
|
-
.tl-track{position:relative;height:100%}
|
|
510
|
-
.tl-track>i{position:absolute;top:6px;height:12px;border-radius:3px;min-width:3px;opacity:.9}
|
|
511
|
-
.tl-track>i.live{box-shadow:0 0 0 2px var(--panel),0 0 0 3px currentColor;animation:none}
|
|
512
|
-
.tl-track>i:hover{opacity:1;filter:brightness(1.1)}
|
|
513
|
-
.tl-track>i:not([data-tip]){top:0;height:100%;width:1px;background:var(--line-2);border-radius:0;opacity:1;min-width:0;pointer-events:none}
|
|
514
|
-
.tl-axis{position:absolute;inset:0;font:var(--fs-2xs) var(--mono);color:var(--faint)}
|
|
515
|
-
.tl-axis span{position:absolute;top:3px;transform:translateX(-50%)}
|
|
516
|
-
.tl-now{position:absolute;top:0;bottom:-2000px;width:1px;background:var(--bad);z-index:1;pointer-events:none}
|
|
517
|
-
.tl-group{position:relative;margin-top:6px;padding-top:4px;border-top:1px solid var(--line-2)}
|
|
518
|
-
.tl-proj{font-size:var(--fs-sm);font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;padding:4px 10px 2px}
|
|
519
|
-
.tl-proj small{margin-left:8px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint)}
|
|
520
|
-
.tl{overflow:hidden}
|
|
521
|
-
.tl-group{overflow:hidden}
|
|
522
|
-
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:baseline}
|
|
523
|
-
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:var(--gap-sec)}
|
|
524
|
-
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px}
|
|
525
|
-
.kpi .l{font-size:var(--fs-sm);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
|
|
526
|
-
.kpi .v{font-size:var(--fs-2xl);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;color:var(--fg)}
|
|
527
|
-
.kpi .d{font-size:var(--fs-mono);color:var(--faint)}
|
|
528
|
-
|
|
529
|
-
/* icons (Phosphor regular, inline) */
|
|
530
|
-
.ph{display:inline-block;vertical-align:middle;flex:none}
|
|
531
|
-
header .nav{display:inline-flex;align-items:center;gap:6px}
|
|
532
|
-
.navcount{font:600 var(--fs-xs) var(--mono);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-pill);padding:1px 6px;line-height:1.4}
|
|
533
|
-
header .nav .ph{opacity:.75}
|
|
534
|
-
header .nav.on .ph{opacity:1;color:var(--acc)}
|
|
535
|
-
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:var(--r-sm);
|
|
536
|
-
background:transparent;border:1px solid transparent;color:var(--dim)}
|
|
537
|
-
.icon-btn:hover{background:var(--panel-2);color:var(--fg);border-color:transparent}
|
|
538
|
-
.icon-btn.on{background:var(--panel-2);color:var(--fg)}
|
|
539
|
-
header #settings{margin-left:10px}
|
|
540
|
-
.proj .ph{color:var(--faint)}
|
|
541
|
-
.proj.sel .ph{color:var(--acc)}
|
|
542
|
-
.kind{color:var(--faint);margin-right:6px;vertical-align:middle}
|
|
543
|
-
td .more{opacity:0;color:var(--faint);padding:2px;border-radius:var(--r-xs);transition:opacity var(--t-fast),background var(--t-fast);line-height:0;display:inline-flex;vertical-align:middle}
|
|
544
|
-
tr:hover td .more,.proj:hover .more,tr.menu-open td .more,.menu-open>.more,.more.menu-open{opacity:1}
|
|
545
|
-
td .more:hover{background:var(--line);color:var(--fg)}
|
|
546
|
-
/* the one action a hygiene row offers, inline in its grid cell */
|
|
547
|
-
.mini-act{display:inline-flex;align-items:center;color:var(--fg-2);border:1px solid var(--line);border-radius:var(--r-sm);
|
|
548
|
-
padding:2px 9px;font-size:var(--fs-sm);font-weight:500;text-decoration:none;transition:color var(--t-fast),border-color var(--t-fast)}
|
|
549
|
-
.mini-act:hover{color:var(--acc);border-color:var(--acc)}
|
|
550
|
-
.mini-act.bad:hover{color:var(--bad);border-color:var(--bad)}
|
|
551
|
-
/* provenance link track: six dots, filled to where the trail goes cold */
|
|
552
|
-
.track{display:inline-flex;gap:3px;align-items:center}
|
|
553
|
-
.track i{width:7px;height:7px;border-radius:50%;background:var(--line);border:1px solid var(--line-2)}
|
|
554
|
-
.track i.on{background:var(--acc);border-color:var(--acc)}
|
|
555
|
-
/* a paging chip with nowhere to go: visible, so the range stays readable, but plainly inert */
|
|
556
|
-
.chip.off{opacity:.4;pointer-events:none}
|
|
557
|
-
.stat .ph{color:var(--faint);margin-right:7px}
|
|
558
|
-
.empty .ph{display:block;margin:0 auto 10px;color:var(--faint)}
|
|
559
|
-
.empty .px{display:block;margin:0 auto 14px;image-rendering:pixelated}
|
|
560
|
-
h2 .back:hover{border-color:var(--acc);color:var(--fg)}
|
|
561
|
-
/* fancy-menus theme → Swarm tokens */
|
|
562
|
-
:root{--fm-surface-bg:var(--panel);--fm-surface-fg:var(--fg);--fm-surface-border:var(--line);--fm-surface-radius:var(--r);
|
|
563
|
-
--fm-surface-shadow:var(--shadow-pop);
|
|
564
|
-
--fm-accent:var(--acc);--fm-accent-fg:var(--acc-contrast);--fm-destructive:var(--bad);--fm-muted-fg:var(--dim);--fm-divider-color:var(--line-2);
|
|
565
|
-
/* The row under the cursor must not look like the row you are already on: the highlight is a
|
|
566
|
-
neutral raised background, and the accent is reserved for the pressed/current item below. */
|
|
567
|
-
--fm-row-hover-bg:var(--panel-2);--fm-row-active-bg:var(--panel-2);--fm-row-active-fg:var(--fg);
|
|
568
|
-
--fm-font-size-row:var(--fs-menu);--fm-font-size-caption:var(--fs-sm);--fm-font-size-section:var(--fs-xs);--fm-row-min-h:30px;--fm-row-radius:var(--r-sm)}
|
|
569
|
-
|
|
570
|
-
.fm-row--danger{color:var(--bad)}
|
|
571
|
-
/* fm.css gives .fm-row__icon its own `color: var(--fm-muted-fg)`, which beats the row colour it
|
|
572
|
-
would otherwise inherit — so a destructive row's glyph stayed grey next to red text. */
|
|
573
|
-
.fm-row--danger .fm-row__icon{color:var(--bad)}
|
|
574
|
-
.fm-row--danger:hover{background:var(--bad-soft)}
|
|
575
|
-
/* pressed/active rows: soft accent tint, not the solid accent block */
|
|
576
|
-
.fm-row[data-pressed="true"]{background:var(--acc-soft);color:var(--acc);font-weight:600;position:relative}
|
|
577
|
-
/* the marker is what still says "current" while the highlight is sitting on top of it */
|
|
578
|
-
.fm-row[data-pressed="true"]::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
|
|
579
|
-
width:3px;height:58%;border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--acc)}
|
|
580
|
-
.fm-row[data-pressed="true"] .fm-ico{color:var(--acc)}
|
|
581
|
-
/* Pixel icons in menu rows: flex-center them and drop the global .ph baseline nudge. */
|
|
582
|
-
.fm-row__icon,.fm-ico{display:inline-flex;align-items:center;justify-content:center}
|
|
583
|
-
/* labels are the point of a menu: never ellipsize them — the caption yields instead */
|
|
584
|
-
.fm-row__name{flex:1 1 auto;min-width:0}
|
|
585
|
-
.fm-row__caption{flex:0 1 auto;min-width:0;max-width:45%;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
586
|
-
.fm-ico .ph{vertical-align:0}
|
|
587
|
-
main>h2:not(:first-child){margin-top:var(--gap-sec)}
|
|
588
|
-
.mt-sec{margin-top:var(--gap-sec)}
|
|
589
|
-
/* project glyphs (icon/color settings) */
|
|
590
|
-
/* No margin nudge and no vertical-align: the row is a centred flex line, so a negative margin
|
|
591
|
-
only drags the icon off centre and vertical-align does nothing at all in flex. */
|
|
592
|
-
.pg{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;font-size:var(--fs-md);line-height:1;color:var(--dim);overflow:visible}
|
|
593
|
-
.pg-c1{color:var(--c1)} .pg-c2{color:var(--c2)} .pg-c3{color:var(--c3)} .pg-c4{color:var(--c4)} .pg-c5{color:var(--c5)} .pg-c6{color:var(--c6)} .pg-c7{color:var(--c7)}
|
|
594
|
-
.pg-img{width:16px;height:16px;object-fit:cover;border-radius:var(--r-xs);display:block}
|
|
595
|
-
.pg-lg{width:34px;height:34px;font-size:var(--fs-2xl);line-height:1;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);overflow:hidden} .pg-lg .pg-img{width:34px;height:34px;border-radius:0}
|
|
596
|
-
.icon-row{display:flex;align-items:center;gap:8px} .icon-row input{flex:1}
|
|
597
|
-
.icon-row .btn{display:inline-flex;align-items:center;gap:5px;padding:var(--pad-ctl);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);color:var(--fg-2);cursor:pointer;font:500 var(--fs-sm) var(--sans);white-space:nowrap}
|
|
598
|
-
.icon-row .btn:hover{border-color:var(--acc)}
|
|
599
|
-
.emoji-row{display:flex;flex-wrap:wrap;gap:4px}
|
|
600
|
-
.emoji-all{max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;display:grid;gap:6px}
|
|
601
|
-
.emoji-sec{font-size:var(--fs-2xs);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:4px}
|
|
602
|
-
.more-emoji{color:var(--fg-2);font-weight:700}
|
|
603
|
-
.emoji{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-xl);line-height:1;background:var(--panel-2);color:var(--dim);overflow:hidden}
|
|
604
|
-
.emoji .ph{width:14px;height:14px}
|
|
605
|
-
.emoji:hover{border-color:var(--acc)} .emoji.on{border-color:var(--acc);background:var(--acc-soft)}
|
|
606
|
-
.swatches{display:flex;gap:6px}
|
|
607
|
-
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;background:currentColor;box-shadow:inset 0 0 0 2px var(--panel)}
|
|
608
|
-
.swatch.none{background:var(--panel-2);color:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
|
|
609
|
-
.swatch:hover{border-color:var(--fg-2)} .swatch.on{border-color:var(--fg)}
|
|
610
|
-
.pk-b label.chk{display:flex;align-items:center;gap:8px;flex-direction:row}
|
|
611
|
-
.pk-b label.chk input{width:auto}
|
|
612
|
-
/* board: kpi accents, kanban, worktree map */
|
|
613
|
-
.kpis-5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
|
|
614
|
-
.kpi.hot .v{color:var(--warn)} .kpi.warm .v{color:var(--acc)}
|
|
615
|
-
.grow{flex:1}
|
|
616
|
-
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;margin-bottom:var(--gap-sec)}
|
|
617
|
-
.lane{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px}
|
|
618
|
-
.lane-h{font-size:var(--fs-sm);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:2px 4px}
|
|
619
|
-
.lane-h span{color:var(--faint);font-weight:500}
|
|
620
|
-
.lane-empty{color:var(--faint);text-align:center;padding:10px 0}
|
|
621
|
-
.lane-more{font-size:var(--fs-xs);padding:2px 4px}
|
|
622
|
-
.tcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:8px 10px;cursor:pointer;transition:border-color var(--t-fast)}
|
|
623
|
-
.tcard:hover,.tcard:focus-visible,.wt:focus-visible,.more:focus-visible{border-color:var(--acc);outline:none}
|
|
624
|
-
.more:focus-visible{opacity:1}
|
|
625
|
-
.tcard.ready{border-left-color:var(--ok)} .tcard.held{border-left-color:var(--acc)} .tcard.blocked{border-left-color:var(--line)} .tcard.done{opacity:.7}
|
|
626
|
-
.tc-h{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);margin-bottom:3px}
|
|
627
|
-
.tc-h .dim{font-family:var(--mono);font-size:var(--fs-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
628
|
-
.tc-t{font-size:var(--fs-md);color:var(--fg);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
|
629
|
-
.tc-m{font-size:var(--fs-xs);color:var(--faint);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
630
|
-
.tc-g{margin-top:6px}
|
|
631
|
-
.wtmap{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--gap-sec)}
|
|
632
|
-
.wt-proj{font-size:var(--fs-sm);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:6px}
|
|
633
|
-
.wt-proj span{color:var(--faint);font-weight:500}
|
|
634
|
-
.wt-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
|
|
635
|
-
.wt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:8px 10px;cursor:pointer;min-width:0;transition:border-color var(--t-fast)}
|
|
636
|
-
.wt:hover{border-color:var(--acc)}
|
|
637
|
-
.wt.main{background:var(--panel-2)}
|
|
638
|
-
.wt.live{border-color:var(--ok)} .wt.dirty{border-color:var(--warn)} .wt.merged{opacity:.6}
|
|
639
|
-
.wt-b{display:flex;align-items:center;gap:6px;min-width:0}
|
|
640
|
-
.wt-b .s{margin:0;flex:none} .wt-b .br{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
641
|
-
.wt-m{font-size:var(--fs-xs);color:var(--faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
642
|
-
.wt-m i{font-style:normal} .wt-m i.warn{color:var(--warn)} .wt-m i.acc{color:var(--acc)}
|
|
643
|
-
.chips{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
|
|
644
|
-
.chip{display:inline-flex;align-items:center;gap:5px;font:500 var(--fs-md) var(--sans);padding:4px 11px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);color:var(--dim);cursor:pointer;user-select:none}
|
|
645
|
-
.chip:hover{border-color:var(--acc);color:var(--fg-2)}
|
|
646
|
-
.chip.on{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
|
|
647
|
-
.seg{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
|
|
648
|
-
.seg a{padding:3px 10px;border-radius:var(--r-sm);font:600 var(--fs-md) var(--sans);color:var(--dim);text-decoration:none;transition:color var(--t-fast),background var(--t-fast);letter-spacing:0;text-transform:none}
|
|
649
|
-
.seg a:hover{color:var(--fg-2)}
|
|
650
|
-
.seg a.on{background:var(--acc-soft);color:var(--acc)}
|
|
651
|
-
.chip b{font-weight:700}
|
|
652
|
-
/* workflow step chips (M7.8) */
|
|
653
|
-
.wf-steps{display:inline-flex;gap:6px;flex-wrap:wrap}
|
|
654
|
-
.wfs{font:500 var(--fs-sm) var(--sans);color:var(--dim);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap}
|
|
655
|
-
.wfs.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
|
|
656
|
-
.wfs.run{color:var(--acc);background:var(--acc-soft);border-color:transparent}
|
|
657
|
-
.wfs.bad{color:var(--warn);background:var(--warn-soft);border-color:transparent}
|
|
658
|
-
/* M5.7: timeline ticks, idle-gap thin bars, claim lane; sidebar spend sparks; gate history */
|
|
659
|
-
.tl-track u{position:absolute;top:4px;bottom:4px;width:2px;border-radius:1px;opacity:.95}
|
|
660
|
-
.tl-track i.thin{opacity:.25}
|
|
661
|
-
.tl-row.claimlane .tl-name{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em}
|
|
662
|
-
.tl-track i.claim{top:7px;height:4px;border-radius:2px;background:var(--violet);opacity:.6}
|
|
663
|
-
.tl-track i.claim.orphaned{background:var(--warn);opacity:.9}
|
|
664
|
-
.tl-track i.claim.expired{background:var(--faint)}
|
|
665
|
-
.proj-spark{flex:none;width:44px;display:inline-flex;opacity:.7}
|
|
666
|
-
.proj-spark .spark{width:44px;height:14px}
|
|
667
|
-
.gh-strip{display:inline-flex;gap:12px;font-weight:400}
|
|
668
|
-
.gh{font-size:var(--fs-sm);color:var(--dim);display:inline-flex;align-items:center;gap:3px}
|
|
669
|
-
.gh i{width:7px;height:7px;border-radius:2px;display:inline-block}
|
|
670
|
-
.gh i.ok{background:var(--ok)} .gh i.bad{background:var(--warn)}
|
|
671
|
-
/* session message thread (M7.6) */
|
|
672
|
-
.msgs{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;margin-bottom:8px}
|
|
673
|
-
.msg{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;font-size:var(--fs-md);color:var(--fg-2);word-break:break-word}
|
|
674
|
-
.msg.out{background:var(--acc-soft);border-color:transparent}
|
|
675
|
-
.msg-f{display:block;font-size:var(--fs-2xs);color:var(--dim);margin-bottom:2px}
|
|
676
|
-
.msg-compose{display:flex;gap:6px}
|
|
677
|
-
.msg-compose input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);border-radius:var(--r-sm);padding:7px 10px;font:400 var(--fs-md) var(--sans)}
|
|
678
|
-
.msg-compose input:focus{border-color:var(--acc);outline:none}
|
|
679
|
-
.msg-compose button{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--line);
|
|
680
|
-
color:var(--fg-2);border-radius:var(--r-sm);padding:7px 11px;cursor:pointer;font:500 var(--fs-sm) var(--sans)}
|
|
681
|
-
.msg-compose button:hover{color:var(--acc);border-color:var(--acc)}
|
|
682
|
-
.msg-compose input:disabled,.msg-compose button:disabled{opacity:.45;cursor:not-allowed}
|
|
683
|
-
.msg-compose button:disabled:hover{color:var(--fg-2);border-color:var(--line)}
|
|
684
|
-
/* how a message actually reaches the agent — the block is useless without this line */
|
|
685
|
-
.msg-hint{display:flex;align-items:center;gap:5px;margin:7px 0 0;color:var(--dim);font-size:var(--fs-sm);line-height:1.4}
|
|
686
|
-
.msg-hint .ph{flex:none;color:var(--faint)}
|
|
687
|
-
.msg-hint b{color:var(--fg-2);font-weight:600}
|
|
688
|
-
/* a file path as one copyable row: directory truncates, file name stays */
|
|
689
|
-
.pathrow{display:flex;align-items:center;gap:6px;width:100%;text-align:left;cursor:pointer;
|
|
690
|
-
background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;
|
|
691
|
-
color:var(--fg-2);font:400 var(--fs-sm) var(--mono)}
|
|
692
|
-
.pathrow:hover{border-color:var(--acc);color:var(--fg)}
|
|
693
|
-
.pathrow .dir{flex:0 9999 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
|
|
694
|
-
.pathrow b{flex:0 1 auto;min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
695
|
-
.pathrow .cp{flex:none;margin-left:auto;color:var(--faint)}
|
|
696
|
-
.pathrow:hover .cp{color:var(--acc)}
|
|
697
|
-
.pathrow.copied{border-color:var(--ok);color:var(--ok)}
|
|
698
|
-
.pathrow.copied .dir,.pathrow.copied .cp{color:var(--ok)}
|
|
699
|
-
/* first-run onboarding card */
|
|
700
|
-
.onboard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:28px 30px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:640px;margin:40px auto}
|
|
701
|
-
.onboard h3{font-size:var(--fs-xl);color:var(--fg)}
|
|
702
|
-
.onboard .px{margin:0 auto}
|
|
703
|
-
.ob-steps{display:flex;flex-direction:column;gap:12px}
|
|
704
|
-
.ob-step{display:flex;gap:12px;align-items:flex-start;color:var(--fg-2);line-height:1.5}
|
|
705
|
-
.ob-step.done{color:var(--dim)}
|
|
706
|
-
.ob-n{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font:600 var(--fs-sm) var(--sans);color:var(--dim);margin-top:1px}
|
|
707
|
-
.ob-step.done .ob-n{background:var(--ok-soft);color:var(--ok);border-color:transparent}
|
|
708
|
-
/* star nudge (once a month, dismissable) */
|
|
709
|
-
.nudge{position:fixed;right:18px;bottom:18px;z-index:40;max-width:400px;background:var(--panel);border:1px solid var(--line);
|
|
710
|
-
border-radius:var(--r);box-shadow:var(--shadow-pop);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
|
|
711
|
-
font:var(--fs-md) var(--sans);color:var(--fg-2);line-height:1.5}
|
|
712
|
-
.nudge .ic{color:var(--acc);flex:none;margin-top:1px}
|
|
713
|
-
.nudge b{color:var(--fg);display:block;margin-bottom:2px}
|
|
714
|
-
.nudge .row{display:flex;gap:8px;margin-top:10px;align-items:center;white-space:nowrap}
|
|
715
|
-
.nudge button.pri{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
|
|
716
|
-
.nudge a.dim{color:var(--dim);font-size:var(--fs-sm);margin-left:auto}
|
|
717
|
-
body.nosb .nudge{right:18px}
|
|
718
|
-
</style>
|
|
11
|
+
<link rel="stylesheet" href="/dashboard.css">
|
|
719
12
|
</head>
|
|
720
13
|
<body>
|
|
721
|
-
<
|
|
722
|
-
<button class="icon-btn" id="sbToggle" title="Toggle sidebar" aria-label="Toggle sidebar"><i data-icon="arrow-bar-left"></i></button>
|
|
723
|
-
<span class="logo"><svg viewBox="0 0 12 12" shape-rendering="crispEdges" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="3" y="0" width="1" height="1" fill="color-mix(in srgb, var(--acc) 52%, white)"/><rect x="8" y="0" width="1" height="1" fill="color-mix(in srgb, var(--acc) 52%, white)"/><rect x="3" y="1" width="1" height="1" fill="var(--acc)"/><rect x="8" y="1" width="1" height="1" fill="var(--acc)"/><rect x="1" y="2" width="10" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="1" y="3" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="3" width="8" height="1" fill="var(--acc)"/><rect x="10" y="3" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="1" y="4" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="4" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="3" y="4" width="6" height="1" fill="color-mix(in srgb, var(--acc) 52%, white)"/><rect x="9" y="4" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="10" y="4" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="1" y="5" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="5" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="3" y="5" width="6" height="1" fill="var(--acc)"/><rect x="9" y="5" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="10" y="5" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="0" y="6" width="1" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="1" y="6" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="6" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="3" y="6" width="2" height="1" fill="color-mix(in srgb, var(--acc) 71%, black)"/><rect x="5" y="6" width="2" height="1" fill="var(--acc)"/><rect x="7" y="6" width="2" height="1" fill="color-mix(in srgb, var(--acc) 71%, black)"/><rect x="9" y="6" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="10" y="6" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="11" y="6" width="1" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="0" y="7" width="1" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="1" y="7" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="7" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="3" y="7" width="2" height="1" fill="color-mix(in srgb, var(--acc) 71%, black)"/><rect x="5" y="7" width="2" height="1" fill="var(--acc)"/><rect x="7" y="7" width="2" height="1" fill="color-mix(in srgb, var(--acc) 71%, black)"/><rect x="9" y="7" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="10" y="7" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="11" y="7" width="1" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="0" y="8" width="1" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="1" y="8" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="8" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="3" y="8" width="6" height="1" fill="var(--acc)"/><rect x="9" y="8" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="10" y="8" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="11" y="8" width="1" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="1" y="9" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="9" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="3" y="9" width="1" height="1" fill="var(--acc)"/><rect x="4" y="9" width="4" height="1" fill="color-mix(in srgb, var(--acc) 71%, black)"/><rect x="8" y="9" width="1" height="1" fill="var(--acc)"/><rect x="9" y="9" width="1" height="1" fill="color-mix(in srgb, var(--acc) 84%, black)"/><rect x="10" y="9" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="1" y="10" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="2" y="10" width="8" height="1" fill="color-mix(in srgb, var(--acc) 58%, black)"/><rect x="10" y="10" width="1" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/><rect x="1" y="11" width="10" height="1" fill="color-mix(in srgb, var(--acc) 40%, black)"/></svg>Swarm</span>
|
|
724
|
-
<nav id="viewnav"></nav>
|
|
725
|
-
<span class="sp"></span>
|
|
726
|
-
<span id="today"></span>
|
|
727
|
-
<span id="daemon"><span class="dot"></span><span class="lbl">Daemon</span></span>
|
|
728
|
-
<button class="icon-btn" id="palBtn" title="Jump to view, project or session (⌘K)" aria-label="Open command palette"><i data-icon="magnifying-glass"></i></button>
|
|
729
|
-
<button class="icon-btn" id="feedback" title="Send feedback (opens a GitHub issue)" aria-label="Send feedback"><i data-icon="comment-text"></i></button>
|
|
730
|
-
<button class="icon-btn" id="settings" title="Settings" aria-label="Settings"><i data-icon="sliders"></i></button>
|
|
731
|
-
</header>
|
|
732
|
-
<aside>
|
|
733
|
-
<div id="projects"></div>
|
|
734
|
-
</aside>
|
|
735
|
-
<main id="main"></main>
|
|
14
|
+
<div id="root"></div>
|
|
736
15
|
<div id="picker"></div>
|
|
737
|
-
<script src="/icons.js"></script>
|
|
738
16
|
<script src="/release-notes.js"></script>
|
|
739
|
-
<script src="/
|
|
740
|
-
<script src="/
|
|
741
|
-
<script src="/
|
|
742
|
-
<script src="/menus.js" defer></script>
|
|
17
|
+
<script src="/icons.js"></script>
|
|
18
|
+
<script src="/menus.js"></script>
|
|
19
|
+
<script src="/dashboard.js" defer></script>
|
|
743
20
|
</body>
|
|
744
21
|
</html>
|