create-pmos 0.8.0 → 0.9.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/README.md +24 -0
- package/package.json +1 -1
- package/payload/KIT-VERSION +1 -1
- package/payload/skills/pmos-router.skill +22 -0
- package/payload/skills-native/pmos-router/SKILL.md +22 -0
- package/workspace/README.md +28 -0
- package/workspace/lib/console-state.js +56 -1
- package/workspace/lib/git-info.js +197 -25
- package/workspace/lib/session-state.js +139 -0
- package/workspace/lib/transcript-read.js +28 -6
- package/workspace/public/app.js +314 -58
- package/workspace/public/index.html +24 -3
- package/workspace/public/styles.css +875 -572
- package/workspace/public/vendor/ibm-plex-mono-400.woff2 +0 -0
- package/workspace/public/vendor/ibm-plex-mono-700.woff2 +0 -0
- package/workspace/public/vendor/space-grotesk-var.woff2 +0 -0
- package/workspace/server.js +338 -39
|
@@ -1,51 +1,182 @@
|
|
|
1
|
-
/* PMOS Terminal Workspace — GUI client. D38 token layer
|
|
2
|
-
|
|
1
|
+
/* PMOS Terminal Workspace — GUI client. D38 token layer.
|
|
2
|
+
────────────────────────────────────────────────────────────────────────────────────────────
|
|
3
|
+
The palette is the shadcn `radix-sera` style on the `mist` base colour, ported VERBATIM from
|
|
4
|
+
the sibling product's design system (its components.json + react-src/styles/app.css) so the
|
|
5
|
+
two surfaces read as one house. The port is CSS-only: the workspace stays a no-build local
|
|
6
|
+
companion app, so what comes across is the token layer + the component vocabulary, not React,
|
|
7
|
+
Tailwind or Radix.
|
|
8
|
+
Three things to know before editing:
|
|
9
|
+
1. --radius is 0. That is the style's signature, not an oversight. Everything derives from
|
|
10
|
+
it through the scale below, so re-rounding the whole app is a ONE-token change. Never
|
|
11
|
+
hardcode a px radius — the exceptions are 50% (dots) and 999px (pills/meters), which are
|
|
12
|
+
shapes rather than radii.
|
|
13
|
+
2. shadcn's --accent is a MUTED HOVER SURFACE, not a brand hue. The brand blue lives in
|
|
14
|
+
--primary (fills) and --brand (text/borders). Reaching for --accent to mean "blue" is the
|
|
15
|
+
one mistake this palette invites.
|
|
16
|
+
3. The --xt-* block must stay concrete hex/rgba: those values are read by xtheme() in app.js
|
|
17
|
+
and handed to xterm.js, whose colour parser does NOT understand oklch().
|
|
18
|
+
──────────────────────────────────────────────────────────────────────────────────────────── */
|
|
19
|
+
|
|
20
|
+
/* Vendored, not CDN-linked: this app has to render correctly with no network at all. */
|
|
21
|
+
@font-face{
|
|
22
|
+
font-family:"Space Grotesk Variable";
|
|
23
|
+
src:url("/vendor/space-grotesk-var.woff2") format("woff2-variations");
|
|
24
|
+
font-weight:300 700; font-style:normal; font-display:swap;
|
|
25
|
+
}
|
|
26
|
+
/* Plex Mono is the terminal's face, so `swap` would be wrong here: swapping the grid out from
|
|
27
|
+
under a live xterm re-flows every row mid-session. `block` holds a short invisible period and
|
|
28
|
+
then keeps the fallback forever if the face never arrives — and app.js re-measures on
|
|
29
|
+
document.fonts.ready either way, so the grid is correct in both outcomes.
|
|
30
|
+
Both weights are real files: xterm renders bold text, and a synthesised bold on a monospace
|
|
31
|
+
face is wider than the regular one, which breaks cell alignment. */
|
|
32
|
+
@font-face{
|
|
33
|
+
font-family:"IBM Plex Mono";
|
|
34
|
+
src:url("/vendor/ibm-plex-mono-400.woff2") format("woff2");
|
|
35
|
+
font-weight:400; font-style:normal; font-display:block;
|
|
36
|
+
}
|
|
37
|
+
@font-face{
|
|
38
|
+
font-family:"IBM Plex Mono";
|
|
39
|
+
src:url("/vendor/ibm-plex-mono-700.woff2") format("woff2");
|
|
40
|
+
font-weight:700; font-style:normal; font-display:block;
|
|
41
|
+
}
|
|
42
|
+
|
|
3
43
|
:root{
|
|
4
|
-
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
44
|
+
/* ── shadcn radix-sera / mist — light ── */
|
|
45
|
+
--background:oklch(1 0 0);
|
|
46
|
+
--foreground:oklch(0.148 0.004 228.8);
|
|
47
|
+
--card:oklch(1 0 0);
|
|
48
|
+
--card-foreground:oklch(0.148 0.004 228.8);
|
|
49
|
+
--popover:oklch(1 0 0);
|
|
50
|
+
--popover-foreground:oklch(0.148 0.004 228.8);
|
|
51
|
+
--primary:oklch(0.488 0.243 264.376);
|
|
52
|
+
--primary-foreground:oklch(0.97 0.014 254.604);
|
|
53
|
+
--secondary:oklch(0.967 0.001 286.375);
|
|
54
|
+
--secondary-foreground:oklch(0.21 0.006 285.885);
|
|
55
|
+
--muted:oklch(0.963 0.002 197.1);
|
|
56
|
+
--muted-foreground:oklch(0.56 0.021 213.5);
|
|
57
|
+
--accent:oklch(0.963 0.002 197.1);
|
|
58
|
+
--accent-foreground:oklch(0.218 0.008 223.9);
|
|
59
|
+
--destructive:oklch(0.577 0.245 27.325);
|
|
60
|
+
--border:oklch(0.925 0.005 214.3);
|
|
61
|
+
--input:oklch(0.925 0.005 214.3);
|
|
62
|
+
--ring:oklch(0.723 0.014 214.4);
|
|
63
|
+
--sidebar:oklch(0.987 0.002 197.1);
|
|
64
|
+
--sidebar-foreground:oklch(0.148 0.004 228.8);
|
|
65
|
+
--sidebar-primary:oklch(0.546 0.245 262.881);
|
|
66
|
+
--sidebar-border:oklch(0.925 0.005 214.3);
|
|
67
|
+
|
|
68
|
+
/* --brand is the brand blue AS TEXT OR BORDER on the current surface. --primary is tuned to
|
|
69
|
+
be a filled background (it pairs with --primary-foreground), and in dark it is far too deep
|
|
70
|
+
to read as type — so the two are separate tokens rather than one reused in both roles. */
|
|
71
|
+
--brand:oklch(0.488 0.243 264.376);
|
|
72
|
+
--brand-wash:color-mix(in oklab, var(--brand) 7%, transparent);
|
|
73
|
+
|
|
74
|
+
/* Status hues. shadcn ships --destructive only; a workspace that reports agent state needs a
|
|
75
|
+
full set, so these are authored in the same oklch space to sit with the palette. Each is
|
|
76
|
+
picked to clear text contrast on THIS theme's surfaces — hence separate light/dark values
|
|
77
|
+
rather than one hue dimmed by opacity. */
|
|
78
|
+
--success:oklch(0.52 0.14 152);
|
|
79
|
+
--warning:oklch(0.55 0.12 72);
|
|
80
|
+
--info:oklch(0.52 0.09 195);
|
|
81
|
+
--purple:oklch(0.5 0.2 300);
|
|
82
|
+
--success-wash:color-mix(in oklab, var(--success) 10%, transparent);
|
|
83
|
+
--warning-wash:color-mix(in oklab, var(--warning) 10%, transparent);
|
|
84
|
+
--info-wash:color-mix(in oklab, var(--info) 10%, transparent);
|
|
85
|
+
|
|
86
|
+
--glass:color-mix(in oklab, var(--background) 80%, transparent);
|
|
87
|
+
--shadow:oklch(0.148 0.004 228.8 / 0.18);
|
|
88
|
+
--term-bg:oklch(0.148 0.004 228.8);
|
|
89
|
+
|
|
90
|
+
/* ── radius scale (shadcn) — derived, never hardcoded ── */
|
|
91
|
+
--radius:0rem;
|
|
92
|
+
--radius-sm:calc(var(--radius) * 0.6);
|
|
93
|
+
--radius-md:calc(var(--radius) * 0.8);
|
|
94
|
+
--radius-lg:var(--radius);
|
|
95
|
+
--radius-xl:calc(var(--radius) * 1.4);
|
|
96
|
+
|
|
97
|
+
/* ── motion vocabulary (shadcn): one house curve, three duration tiers ── */
|
|
98
|
+
--ease-emphasized:cubic-bezier(0.4, 0, 0.2, 1);
|
|
99
|
+
--duration-fast:150ms;
|
|
100
|
+
--duration-base:250ms;
|
|
101
|
+
--duration-slow:350ms;
|
|
102
|
+
|
|
103
|
+
/* ── type scale. The workspace used to label everything in 8.5–11px uppercase mono; that
|
|
104
|
+
density was the single loudest "dated terminal dashboard" signal. Chrome now speaks the
|
|
105
|
+
sans scale and mono is reserved for things that ARE code: the terminal, paths, branches,
|
|
106
|
+
diffs, code spans. ── */
|
|
107
|
+
--text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px;
|
|
108
|
+
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
|
|
109
|
+
--sans:"Space Grotesk Variable",ui-sans-serif,system-ui,-apple-system,sans-serif;
|
|
110
|
+
|
|
24
111
|
/* layout knobs the JS adjusts (rail width, library/document split) */
|
|
25
112
|
--rail-w:400px; --libsplit:44%;
|
|
113
|
+
|
|
114
|
+
/* xterm palette tokens — the single source for the JS terminal theme (xtheme()). Dark in BOTH
|
|
115
|
+
themes by design; the terminal is a terminal, not a themed surface. Concrete hex only (see
|
|
116
|
+
note 3 at the top of this file). */
|
|
117
|
+
--xt-bg:#090b0c; --xt-fg:#c4ccce; --xt-cursor:#47cf79; --xt-sel:rgba(43,127,255,.3);
|
|
118
|
+
--xt-black:#090b0c; --xt-red:#ff6467; --xt-green:#47cf79; --xt-yellow:#f4b93c;
|
|
119
|
+
--xt-blue:#2b7fff; --xt-magenta:#b48df4; --xt-cyan:#53d1d0; --xt-white:#d2d9db;
|
|
120
|
+
--xt-brblack:#6f7d81; --xt-brgreen:#81e8a0; --xt-accent-text:#2b7fff; --xt-brwhite:#f9fbfb;
|
|
26
121
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
122
|
+
|
|
123
|
+
/* ── shadcn radix-sera / mist — dark. This is the workspace's DEFAULT (index.html ships
|
|
124
|
+
data-theme="dark"); the light block above is the base the toggle falls back to. ── */
|
|
125
|
+
:root[data-theme="dark"]{
|
|
126
|
+
--background:oklch(0.148 0.004 228.8);
|
|
127
|
+
--foreground:oklch(0.987 0.002 197.1);
|
|
128
|
+
--card:oklch(0.218 0.008 223.9);
|
|
129
|
+
--card-foreground:oklch(0.987 0.002 197.1);
|
|
130
|
+
--popover:oklch(0.218 0.008 223.9);
|
|
131
|
+
--popover-foreground:oklch(0.987 0.002 197.1);
|
|
132
|
+
--primary:oklch(0.424 0.199 265.638);
|
|
133
|
+
--primary-foreground:oklch(0.97 0.014 254.604);
|
|
134
|
+
--secondary:oklch(0.274 0.006 286.033);
|
|
135
|
+
--secondary-foreground:oklch(0.985 0 0);
|
|
136
|
+
--muted:oklch(0.275 0.011 216.9);
|
|
137
|
+
--muted-foreground:oklch(0.723 0.014 214.4);
|
|
138
|
+
--accent:oklch(0.275 0.011 216.9);
|
|
139
|
+
--accent-foreground:oklch(0.987 0.002 197.1);
|
|
140
|
+
--destructive:oklch(0.704 0.191 22.216);
|
|
141
|
+
--border:oklch(1 0 0 / 10%);
|
|
142
|
+
--input:oklch(1 0 0 / 15%);
|
|
143
|
+
--ring:oklch(0.56 0.021 213.5);
|
|
144
|
+
--sidebar:oklch(0.218 0.008 223.9);
|
|
145
|
+
--sidebar-foreground:oklch(0.987 0.002 197.1);
|
|
146
|
+
--sidebar-primary:oklch(0.623 0.214 259.815);
|
|
147
|
+
--sidebar-border:oklch(1 0 0 / 10%);
|
|
148
|
+
|
|
149
|
+
--brand:oklch(0.623 0.214 259.815);
|
|
150
|
+
--brand-wash:color-mix(in oklab, var(--brand) 12%, transparent);
|
|
151
|
+
|
|
152
|
+
--success:oklch(0.76 0.17 152);
|
|
153
|
+
--warning:oklch(0.82 0.15 82);
|
|
154
|
+
--info:oklch(0.79 0.11 195);
|
|
155
|
+
--purple:oklch(0.72 0.15 300);
|
|
156
|
+
--success-wash:color-mix(in oklab, var(--success) 10%, transparent);
|
|
157
|
+
--warning-wash:color-mix(in oklab, var(--warning) 10%, transparent);
|
|
158
|
+
--info-wash:color-mix(in oklab, var(--info) 10%, transparent);
|
|
159
|
+
|
|
160
|
+
--glass:color-mix(in oklab, var(--background) 78%, transparent);
|
|
161
|
+
--shadow:oklch(0 0 0 / 0.6);
|
|
162
|
+
--term-bg:oklch(0.148 0.004 228.8);
|
|
40
163
|
}
|
|
164
|
+
|
|
41
165
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
42
166
|
html,body{height:100%}
|
|
43
|
-
body{background:var(--
|
|
44
|
-
-webkit-font-smoothing:antialiased; overflow:hidden}
|
|
167
|
+
body{background:var(--background); color:var(--foreground); font-family:var(--sans);
|
|
168
|
+
font-size:var(--text-sm); line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden}
|
|
45
169
|
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
|
|
46
|
-
|
|
170
|
+
/* shadcn's focus ring: a soft halo in --ring rather than a hard outline */
|
|
171
|
+
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-sm)}
|
|
47
172
|
.mono{font-family:var(--mono)}
|
|
48
173
|
|
|
174
|
+
/* Motion, ported from the sibling design system: gentle fades and small lifts, no bounce. Every
|
|
175
|
+
one of these is neutralised by the reduced-motion guard at the bottom of this file. */
|
|
176
|
+
@keyframes motion-fade{from{opacity:0}to{opacity:1}}
|
|
177
|
+
@keyframes motion-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
|
178
|
+
@keyframes motion-pop-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
|
|
179
|
+
|
|
49
180
|
/* The rows are fixed and the middle row is minmax(0,1fr): without the 0 minimum a tall column
|
|
50
181
|
(a long needs strip, a long document) grows the row past the viewport and body{overflow:hidden}
|
|
51
182
|
silently clips the BOTTOM OF THE TERMINAL. Every nested column repeats the min-height:0. */
|
|
@@ -56,22 +187,26 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
|
|
|
56
187
|
are grid siblings, and without this the later-in-DOM body wins the paint order and swallows
|
|
57
188
|
every click aimed at the menu. */
|
|
58
189
|
.bar{display:flex; align-items:center; gap:10px; padding:0 12px; min-width:0; position:relative; z-index:50;
|
|
59
|
-
border-bottom:1px solid var(--border
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
.bar
|
|
64
|
-
.bar .
|
|
65
|
-
.bar .conn
|
|
66
|
-
.bar .conn
|
|
67
|
-
.bar .conn.
|
|
190
|
+
border-bottom:1px solid var(--border); background:var(--glass); backdrop-filter:blur(8px)}
|
|
191
|
+
/* the product mark reads as a filled brand tile, the way a shadcn sidebar header does */
|
|
192
|
+
.mark{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-md);
|
|
193
|
+
background:var(--primary);color:var(--primary-foreground);font-size:var(--text-xs);font-weight:600}
|
|
194
|
+
.bar b{font-size:var(--text-base);font-weight:600;letter-spacing:-.01em}
|
|
195
|
+
.bar .sub{font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
196
|
+
.bar .conn{font-size:var(--text-xs);display:inline-flex;gap:6px;align-items:center;color:var(--muted-foreground)}
|
|
197
|
+
.bar .conn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-foreground)}
|
|
198
|
+
.bar .conn.live{color:var(--success)} .bar .conn.live::before{background:var(--success);animation:pulse 2.2s infinite}
|
|
199
|
+
.bar .conn.off{color:var(--warning)} .bar .conn.off::before{background:var(--warning)}
|
|
68
200
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
|
|
69
201
|
.bar .right{margin-left:auto;display:flex;gap:6px}
|
|
202
|
+
/* shadcn Button, `ghost` variant: no resting border or fill, the hover surface does the work */
|
|
70
203
|
.ibtn{min-height:32px;min-width:36px;padding:0 10px;display:grid;place-items:center;
|
|
71
|
-
border:1px solid
|
|
72
|
-
font-
|
|
73
|
-
|
|
74
|
-
|
|
204
|
+
border:1px solid transparent;background:transparent;border-radius:var(--radius-md);
|
|
205
|
+
color:var(--muted-foreground);font-size:var(--text-sm);font-weight:500;
|
|
206
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized),
|
|
207
|
+
color var(--duration-fast) var(--ease-emphasized)}
|
|
208
|
+
.ibtn:hover{background:var(--accent);color:var(--accent-foreground)}
|
|
209
|
+
.ibtn[aria-pressed="true"]{background:var(--accent);color:var(--brand)}
|
|
75
210
|
|
|
76
211
|
/* ── the arrangement (workspace-layout-system) ──────────────────────────────────────────────
|
|
77
212
|
The template is COMPUTED from the current layout by applyLayout() and written into these three
|
|
@@ -88,210 +223,255 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
|
|
|
88
223
|
.body[data-side="off"]>.side{display:none}
|
|
89
224
|
.body[data-reader="off"]>.rail{display:none}
|
|
90
225
|
/* docked bottom, the reader is a wide short pane under the terminal, not a column beside it */
|
|
91
|
-
.body[data-reader="bottom"]>.rail{border-left:0;border-top:1px solid var(--border
|
|
226
|
+
.body[data-reader="bottom"]>.rail{border-left:0;border-top:1px solid var(--border)}
|
|
92
227
|
.body[data-reader="bottom"] .railgrip{display:none}
|
|
93
|
-
.body[data-side="right"]>.side{border-right:0;border-left:1px solid var(--border
|
|
94
|
-
.body[data-reader="left"]>.rail{border-left:0;border-right:1px solid var(--border
|
|
228
|
+
.body[data-side="right"]>.side{border-right:0;border-left:1px solid var(--border)}
|
|
229
|
+
.body[data-reader="left"]>.rail{border-left:0;border-right:1px solid var(--border)}
|
|
95
230
|
.body[data-reader="left"] .railgrip{left:auto;right:-3px}
|
|
96
231
|
|
|
97
232
|
/* ── left column: the workspace — repos over running agents. Both panes fold and the column
|
|
98
233
|
resizes, which is the parity the rail always had and this one never did (R11). ── */
|
|
99
|
-
.side{border-right:1px solid var(--border
|
|
234
|
+
.side{border-right:1px solid var(--border);background:var(--sidebar);min-height:0;
|
|
100
235
|
display:flex;flex-direction:column;position:relative}
|
|
101
236
|
.side>.pane{flex:1 1 0}
|
|
102
237
|
.side>.pane[data-fold="off"]{flex:0 0 auto}
|
|
103
|
-
.side>.pane+.pane{border-top:1px solid var(--border
|
|
238
|
+
.side>.pane+.pane{border-top:1px solid var(--border)}
|
|
104
239
|
.pane{display:flex;flex-direction:column;min-height:0;min-width:0}
|
|
105
240
|
.pane-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:10px}
|
|
106
241
|
.pane[data-fold="off"]>.pane-body{display:none}
|
|
107
242
|
.pane[data-fold="off"]{flex:0 0 auto}
|
|
108
243
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
.cap .mini:
|
|
244
|
+
/* Pane header = shadcn's SidebarGroupLabel: 12px medium in muted-foreground, sentence case. The
|
|
245
|
+
uppercase-tracked-mono caption this replaced was the loudest dated signal in the whole app. */
|
|
246
|
+
.cap{font-size:var(--text-xs);font-weight:500;
|
|
247
|
+
color:var(--muted-foreground);padding:10px 10px 8px 12px;display:flex;gap:8px;align-items:center;
|
|
248
|
+
min-height:38px;flex:none;background:var(--sidebar);border-bottom:1px solid var(--border)}
|
|
249
|
+
.cap .ct{color:var(--warning);font-size:var(--text-xs);font-weight:500}
|
|
250
|
+
.cap .mini{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);
|
|
251
|
+
border:0;background:transparent;color:var(--muted-foreground);font-size:var(--text-base);
|
|
252
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized),
|
|
253
|
+
color var(--duration-fast) var(--ease-emphasized)}
|
|
254
|
+
.cap .mini:hover{background:var(--accent);color:var(--accent-foreground)}
|
|
116
255
|
/* a pane header that folds its body away */
|
|
117
|
-
.cap .fold{display:inline-flex;align-items:center;gap:
|
|
118
|
-
|
|
119
|
-
.cap .fold
|
|
120
|
-
.cap .fold .chev{font-size:9px;transition:transform .12s}
|
|
256
|
+
.cap .fold{display:inline-flex;align-items:center;gap:6px;font:inherit;color:var(--muted-foreground)}
|
|
257
|
+
.cap .fold:hover{color:var(--foreground)}
|
|
258
|
+
.cap .fold .chev{font-size:var(--text-2xs);transition:transform var(--duration-fast) var(--ease-emphasized)}
|
|
121
259
|
.pane[data-fold="off"] .cap .fold .chev{transform:rotate(-90deg)}
|
|
122
260
|
@media (prefers-reduced-motion:reduce){.cap .fold .chev{transition:none}}
|
|
123
261
|
/* the move affordance every relocatable pane carries. Keyboard reaches every position it
|
|
124
262
|
offers through the layout menu, so this is an accelerator and never the only path (R12). */
|
|
125
|
-
.cap .grip{width:22px;min-height:26px;display:grid;place-items:center;border-radius:
|
|
126
|
-
color:var(--
|
|
127
|
-
.cap .grip:hover{background:var(--
|
|
263
|
+
.cap .grip{width:22px;min-height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);flex:none;
|
|
264
|
+
color:var(--muted-foreground);cursor:grab;letter-spacing:-2px;margin-left:-4px;touch-action:none}
|
|
265
|
+
.cap .grip:hover{background:var(--accent);color:var(--brand)}
|
|
128
266
|
.cap .grip:active{cursor:grabbing}
|
|
129
267
|
|
|
130
268
|
/* a column's outer edge, dragged to resize. The rail's original .railgrip is one of these. */
|
|
131
269
|
.edge{position:absolute;top:0;bottom:0;width:7px;z-index:20;cursor:col-resize;touch-action:none}
|
|
132
|
-
.edge:hover,.edge.on{background:linear-gradient(90deg,transparent,var(--
|
|
270
|
+
.edge:hover,.edge.on{background:linear-gradient(90deg,transparent,var(--ring),transparent)}
|
|
133
271
|
.side>.edge{right:-3px}
|
|
134
272
|
.body[data-side="right"]>.side>.edge{right:auto;left:-3px}
|
|
135
273
|
|
|
136
274
|
/* drop targets — visible only while a grip is being dragged */
|
|
137
275
|
.drop{position:absolute;inset:0;z-index:40;display:none;grid-area:1/1/-1/-1}
|
|
138
276
|
.body.dragging>.drop{display:block}
|
|
139
|
-
.dz{position:absolute;border:1px dashed var(--
|
|
140
|
-
background:var(--
|
|
141
|
-
font-size:
|
|
142
|
-
.dz.hot{border-style:solid;border-color:var(--
|
|
143
|
-
background:var(--
|
|
277
|
+
.dz{position:absolute;border:1px dashed var(--input);border-radius:var(--radius-lg);
|
|
278
|
+
background:var(--brand-wash);display:grid;place-items:center;
|
|
279
|
+
font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground)}
|
|
280
|
+
.dz.hot{border-style:solid;border-color:var(--brand);color:var(--brand);
|
|
281
|
+
background:var(--accent);box-shadow:0 0 0 1px var(--ring)}
|
|
144
282
|
.dz[data-z="left"]{left:8px;top:8px;bottom:8px;width:22%}
|
|
145
283
|
.dz[data-z="right"]{right:8px;top:8px;bottom:8px;width:22%}
|
|
146
284
|
.dz[data-z="bottom"]{left:26%;right:26%;bottom:8px;height:30%}
|
|
147
285
|
.dz[data-z="off"]{left:26%;right:26%;top:8px;height:20%}
|
|
148
286
|
.dz.no{display:none}
|
|
149
|
-
.laghost{position:fixed;z-index:70;pointer-events:none;padding:5px 10px;border-radius:
|
|
150
|
-
background:var(--
|
|
151
|
-
font-
|
|
287
|
+
.laghost{position:fixed;z-index:70;pointer-events:none;padding:5px 10px;border-radius:var(--radius-md);
|
|
288
|
+
background:var(--popover);border:1px solid var(--border);color:var(--foreground);
|
|
289
|
+
font-size:var(--text-xs);box-shadow:0 8px 24px -8px var(--shadow)}
|
|
152
290
|
|
|
153
291
|
/* ── the layout control ── */
|
|
154
292
|
.ibtn.lay-chip{gap:7px;display:inline-flex;align-items:center;padding:0 11px}
|
|
155
|
-
.ibtn.lay-chip i{font-style:normal;color:var(--
|
|
156
|
-
.ibtn.lay-chip[aria-expanded="true"]{
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
293
|
+
.ibtn.lay-chip i{font-style:normal;color:var(--muted-foreground);font-size:var(--text-xs)}
|
|
294
|
+
.ibtn.lay-chip[aria-expanded="true"]{background:var(--accent);color:var(--accent-foreground)}
|
|
295
|
+
/* shadcn Popover: --popover surface, hairline border, one soft elevation shadow */
|
|
296
|
+
.lay-menu{position:absolute;top:40px;right:12px;z-index:60;width:272px;background:var(--popover);
|
|
297
|
+
color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px;
|
|
298
|
+
box-shadow:0 10px 38px -10px var(--shadow);animation:motion-pop-in var(--duration-fast) var(--ease-emphasized)}
|
|
299
|
+
.lay-cap{font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);margin:4px 8px 6px}
|
|
300
|
+
/* shadcn DropdownMenuItem */
|
|
301
|
+
.lay-row{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--radius-sm);
|
|
302
|
+
font-size:var(--text-sm);color:var(--popover-foreground);text-align:left;min-height:36px;
|
|
303
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized)}
|
|
304
|
+
.lay-row:hover{background:var(--accent);color:var(--accent-foreground)}
|
|
305
|
+
.lay-row[aria-current="true"]{background:var(--accent);color:var(--brand);font-weight:500}
|
|
167
306
|
.lay-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
168
|
-
|
|
169
|
-
|
|
307
|
+
/* a keyboard hint reads as a key — mono is right here, it IS a literal keystroke */
|
|
308
|
+
.lay-row .kbd{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
|
|
309
|
+
background:var(--muted);border-radius:var(--radius-sm);padding:1px 5px;flex:none}
|
|
170
310
|
/* a wireframe of the arrangement — the name alone does not say what you get */
|
|
171
|
-
.lay-mini{width:28px;height:18px;border:1px solid var(--
|
|
172
|
-
display:flex;gap:1px;padding:1px;flex:none;background:var(--
|
|
173
|
-
.lay-mini span{background:var(--
|
|
174
|
-
.lay-row[aria-current="true"] .lay-mini span{background:var(--
|
|
311
|
+
.lay-mini{width:28px;height:18px;border:1px solid var(--input);border-radius:var(--radius-sm);
|
|
312
|
+
display:flex;gap:1px;padding:1px;flex:none;background:var(--background)}
|
|
313
|
+
.lay-mini span{background:var(--input);border-radius:var(--radius-sm)}
|
|
314
|
+
.lay-row[aria-current="true"] .lay-mini span{background:var(--brand)}
|
|
175
315
|
.lay-act{display:flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;
|
|
176
|
-
border-radius:
|
|
177
|
-
.lay-act:hover{background:var(--
|
|
178
|
-
.lay-act.del:hover{color:var(--
|
|
179
|
-
.lay-add{display:block;width:100%;margin-top:4px;padding:9px;border:1px dashed var(--border
|
|
180
|
-
border-radius:
|
|
181
|
-
|
|
316
|
+
border-radius:var(--radius-sm);color:var(--muted-foreground);font-size:var(--text-xs);flex:none}
|
|
317
|
+
.lay-act:hover{background:var(--secondary);color:var(--brand)}
|
|
318
|
+
.lay-act.del:hover{color:var(--destructive)}
|
|
319
|
+
.lay-add{display:block;width:100%;margin-top:4px;padding:9px;border:1px dashed var(--border);
|
|
320
|
+
border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--muted-foreground);
|
|
321
|
+
transition:color var(--duration-fast) var(--ease-emphasized),
|
|
322
|
+
border-color var(--duration-fast) var(--ease-emphasized)}
|
|
323
|
+
.lay-add:hover{color:var(--foreground);border-color:var(--ring)}
|
|
182
324
|
.lay-new{padding:6px 5px 2px}
|
|
183
|
-
.lay-foot{font-
|
|
184
|
-
margin:9px
|
|
185
|
-
.lay-foot b{color:var(--
|
|
325
|
+
.lay-foot{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.55;
|
|
326
|
+
margin:9px 8px 4px;padding-top:8px;border-top:1px solid var(--border)}
|
|
327
|
+
.lay-foot b{color:var(--foreground);font-weight:500}
|
|
186
328
|
|
|
187
|
-
/* workspaces — one server, many repos; the row carries the switch + a forget affordance
|
|
329
|
+
/* workspaces — one server, many repos; the row carries the switch + a forget affordance.
|
|
330
|
+
The row is shadcn's SidebarMenuButton: no border, the --accent surface carries state. */
|
|
188
331
|
.wsrow{display:flex;align-items:stretch}
|
|
189
|
-
.ws{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;min-height:40px;padding:0 8px 0
|
|
190
|
-
font-
|
|
191
|
-
|
|
192
|
-
.ws
|
|
193
|
-
.ws
|
|
194
|
-
.ws .
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
.
|
|
332
|
+
.ws{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;min-height:40px;padding:0 8px 0 12px;
|
|
333
|
+
font-size:var(--text-sm);color:var(--sidebar-foreground);border-left:2px solid transparent;
|
|
334
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized)}
|
|
335
|
+
.ws:hover{background:var(--accent)}
|
|
336
|
+
.ws[aria-current="true"]{border-left-color:var(--brand);background:var(--accent);font-weight:500}
|
|
337
|
+
.ws .cue{color:var(--muted-foreground);font-size:var(--text-2xs);flex:none}
|
|
338
|
+
/* the repo NAME is a path fragment — mono earns its place here */
|
|
339
|
+
.ws .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:var(--text-xs)}
|
|
340
|
+
/* shadcn Badge, `outline` variant */
|
|
341
|
+
.ws .tag{font-size:var(--text-2xs);font-weight:500;color:var(--muted-foreground);
|
|
342
|
+
border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 6px;flex:none}
|
|
343
|
+
.ws small{margin-left:auto;font-size:var(--text-2xs);font-weight:500;color:var(--success);flex:none}
|
|
344
|
+
.wsrow .forget{width:30px;display:grid;place-items:center;color:var(--muted-foreground);font-size:var(--text-xs);opacity:0}
|
|
199
345
|
.wsrow:hover .forget,.wsrow .forget:focus-visible{opacity:1}
|
|
200
|
-
.wsrow .forget:hover{color:var(--
|
|
346
|
+
.wsrow .forget:hover{color:var(--destructive)}
|
|
201
347
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
348
|
+
/* one line, always: at 13px the full label wraps inside a 262px sidebar and the dashed box grows
|
|
349
|
+
into a two-line slab. It ellipsizes instead — the ＋ and the first words carry the meaning. */
|
|
350
|
+
.newsess{display:flex;gap:8px;align-items:center;margin:10px 12px 4px;min-height:38px;padding:0 12px;
|
|
351
|
+
border:1px dashed var(--border);border-radius:var(--radius-md);font-size:var(--text-xs);
|
|
352
|
+
color:var(--muted-foreground);width:calc(100% - 24px);
|
|
353
|
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
354
|
+
transition:color var(--duration-fast) var(--ease-emphasized),
|
|
355
|
+
border-color var(--duration-fast) var(--ease-emphasized)}
|
|
356
|
+
.newsess:hover{color:var(--foreground);border-color:var(--ring)}
|
|
357
|
+
.newsess i{font-style:normal}
|
|
207
358
|
|
|
208
|
-
/* inline forms: name a session before it starts · add a repo by picking a folder
|
|
209
|
-
|
|
359
|
+
/* ── inline forms: name a session before it starts · add a repo by picking a folder.
|
|
360
|
+
These are the shadcn Field/Label/Input/Button primitives: a 13px medium label above a
|
|
361
|
+
36px input with a hairline --input border, and a filled primary + ghost cancel below. ── */
|
|
362
|
+
.miniform{margin:8px 12px 6px;display:flex;flex-direction:column;gap:8px}
|
|
210
363
|
.miniform[hidden]{display:none}
|
|
211
|
-
.miniform .lbl{font-
|
|
212
|
-
.miniform input{min-height:
|
|
213
|
-
background:
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
.miniform
|
|
219
|
-
.miniform
|
|
220
|
-
/*
|
|
221
|
-
.miniform
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
.miniform
|
|
226
|
-
|
|
227
|
-
.
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
.
|
|
364
|
+
.miniform .lbl{font-size:var(--text-sm);font-weight:500;color:var(--foreground)}
|
|
365
|
+
.miniform input{min-height:36px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius-md);
|
|
366
|
+
background:transparent;color:var(--foreground);font-family:var(--sans);font-size:var(--text-sm);
|
|
367
|
+
outline:none;width:100%;
|
|
368
|
+
transition:border-color var(--duration-fast) var(--ease-emphasized),
|
|
369
|
+
box-shadow var(--duration-fast) var(--ease-emphasized)}
|
|
370
|
+
.miniform input::placeholder{color:var(--muted-foreground)}
|
|
371
|
+
.miniform input:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--brand-wash)}
|
|
372
|
+
.miniform .row{display:flex;gap:8px}
|
|
373
|
+
/* Button, `default` variant — a filled brand action, not an outlined one */
|
|
374
|
+
.miniform button{min-height:36px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-md);
|
|
375
|
+
background:var(--primary);font-size:var(--text-sm);font-weight:500;color:var(--primary-foreground);
|
|
376
|
+
transition:opacity var(--duration-fast) var(--ease-emphasized),
|
|
377
|
+
background-color var(--duration-fast) var(--ease-emphasized)}
|
|
378
|
+
.miniform button:hover{opacity:.9}
|
|
379
|
+
/* `ghost` variant — the dismissive half of a pair never competes with the primary */
|
|
380
|
+
.miniform button.quiet{background:transparent;color:var(--muted-foreground)}
|
|
381
|
+
.miniform button.quiet:hover{background:var(--accent);color:var(--accent-foreground);opacity:1}
|
|
382
|
+
/* the primary way to add a repo: the machine's own folder chooser, not a typed path. `outline`
|
|
383
|
+
variant so it reads as a distinct choice rather than a second submit. */
|
|
384
|
+
.miniform .pick{min-height:40px;background:transparent;border-color:var(--input);
|
|
385
|
+
color:var(--foreground);font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;gap:8px}
|
|
386
|
+
.miniform .pick:hover{background:var(--accent);opacity:1}
|
|
387
|
+
.miniform .hint{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
|
|
388
|
+
.miniform .hint code{font-family:var(--mono);font-size:var(--text-2xs);background:var(--muted);
|
|
389
|
+
padding:1px 5px;border-radius:var(--radius-sm);color:var(--foreground)}
|
|
390
|
+
/* shadcn ToggleGroup: one inset track, the selected item lifts onto the --background surface */
|
|
391
|
+
.seg{display:flex;gap:2px;border:1px solid var(--border);border-radius:var(--radius-md);
|
|
392
|
+
background:var(--muted);padding:2px}
|
|
393
|
+
.seg button{flex:1;min-height:30px;border:0;border-radius:var(--radius-sm);background:transparent;
|
|
394
|
+
color:var(--muted-foreground);font-size:var(--text-sm);font-weight:500;padding:0;
|
|
395
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized),
|
|
396
|
+
color var(--duration-fast) var(--ease-emphasized)}
|
|
397
|
+
.seg button:hover{color:var(--foreground)}
|
|
398
|
+
.seg button[aria-checked="true"]{background:var(--background);color:var(--foreground);
|
|
399
|
+
box-shadow:0 1px 2px var(--shadow)}
|
|
231
400
|
|
|
232
401
|
/* ── running agents ── */
|
|
233
402
|
.sessrow{display:flex;align-items:stretch;position:relative}
|
|
234
403
|
.sess{display:block;flex:1;min-width:0;text-align:left;padding:7px 4px 7px 11px;
|
|
235
404
|
border-left:3px solid transparent;min-height:44px}
|
|
236
|
-
.sess:hover,.sessrow:hover .sess{background:var(--
|
|
237
|
-
.sess[aria-current="true"]{background:var(--
|
|
238
|
-
.sessrow:has(.sess[aria-current="true"]){background:var(--
|
|
405
|
+
.sess:hover,.sessrow:hover .sess{background:var(--accent)}
|
|
406
|
+
.sess[aria-current="true"]{background:var(--accent);border-left-color:var(--brand)}
|
|
407
|
+
.sessrow:has(.sess[aria-current="true"]){background:var(--accent)}
|
|
239
408
|
.sess .r1{display:flex;align-items:center;gap:7px}
|
|
240
|
-
.sess .st{width:11px;text-align:center;font-size:
|
|
241
|
-
.sess[data-state="working"] .st{color:var(--
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
409
|
+
.sess .st{width:11px;text-align:center;font-size:var(--text-xs);flex:none}
|
|
410
|
+
.sess[data-state="working"] .st{color:var(--success);animation:pulse 2.2s infinite}
|
|
411
|
+
/* The five presented states take five distinct hues, because R8 requires hue to carry the state
|
|
412
|
+
on its own (as shape and word each do). green working · yellow quiet · blue NEEDS YOU ·
|
|
413
|
+
red MAYBE BLOCKED · grey exited. `needs` takes the BRAND hue rather than a danger one: a
|
|
414
|
+
finished turn is an invitation, not a failure, and red is reserved for the state that may be a
|
|
415
|
+
problem. (It read `--accent` before the shadcn port; under that palette --accent is the muted
|
|
416
|
+
hover SURFACE, so the brand hue is now --brand. Same intent, correct token.)
|
|
417
|
+
`blocked` was styled --warn while it was dead code; it is defined for real now, and must not
|
|
418
|
+
share `quiet`'s hue — a weak claim that looks exactly like no claim communicates nothing. */
|
|
419
|
+
.sess[data-state="needs"] .st{color:var(--brand)}
|
|
420
|
+
.sess[data-state="blocked"] .st{color:var(--destructive)}
|
|
421
|
+
.sess[data-state="done"] .st{color:var(--info)}
|
|
422
|
+
.sess[data-state="idle"] .st,.sess[data-state="exited"] .st{color:var(--muted-foreground)}
|
|
245
423
|
@media (prefers-reduced-motion:reduce){.sess .st,.bar .conn.live::before{animation:none!important}}
|
|
246
|
-
.sess .nm{font-
|
|
247
|
-
.sess .sub{font-size:
|
|
424
|
+
.sess .nm{font-size:var(--text-sm);font-weight:500;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
425
|
+
.sess .sub{font-size:var(--text-xs);color:var(--muted-foreground);margin:2px 0 0 18px;display:block;
|
|
248
426
|
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
249
|
-
.sess[data-state="
|
|
427
|
+
.sess[data-state="needs"] .sub{color:var(--brand)}
|
|
428
|
+
.sess[data-state="blocked"] .sub{color:var(--destructive)}
|
|
250
429
|
/* "opening focus" — the permanent lead label on the run-title sub-line. It states plainly that the
|
|
251
430
|
title is the run's FIRST prompt (frozen, no timestamp), never its current activity. */
|
|
252
|
-
.sess .sub .lead{font-
|
|
253
|
-
color:var(--text-dim);margin-right:5px}
|
|
431
|
+
.sess .sub .lead{font-size:var(--text-2xs);font-weight:500;color:var(--muted-foreground);margin-right:6px}
|
|
254
432
|
/* ── harness tower (workspace-harness-tower): the state chip, the agent's own last words,
|
|
255
433
|
and the per-session harness drill-in. State is carried by SHAPE (the glyph), HUE, and the
|
|
256
434
|
WORD in the chip — three channels, so nothing depends on colour alone. ── */
|
|
257
|
-
.sess[data-state="quiet"] .st{color:var(--
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
.sess[data-state="
|
|
435
|
+
.sess[data-state="quiet"] .st{color:var(--warning)}
|
|
436
|
+
/* shadcn Badge, `secondary` variant — the state WORD, one of the three channels state travels on */
|
|
437
|
+
.sess .chip{margin-left:auto;flex:none;font-size:var(--text-2xs);font-weight:500;
|
|
438
|
+
color:var(--muted-foreground);white-space:nowrap;background:var(--muted);
|
|
439
|
+
border-radius:var(--radius-sm);padding:2px 7px}
|
|
440
|
+
.sess[data-state="working"] .chip{color:var(--success)}
|
|
441
|
+
.sess[data-state="quiet"] .chip{color:var(--warning)}
|
|
442
|
+
.sess[data-state="needs"] .chip{color:var(--brand)}
|
|
443
|
+
.sess[data-state="blocked"] .chip{color:var(--destructive)}
|
|
444
|
+
.sess[data-state="exited"] .chip{color:var(--muted-foreground)}
|
|
263
445
|
/* the last words WRAP — bounded to two lines here, in full in the terminal. The shipped .sub
|
|
264
446
|
stays nowrap; this is a separate line, so nothing existing changes shape. */
|
|
265
447
|
.sess .says{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
|
|
266
|
-
margin:
|
|
267
|
-
.sess .says.na{color:var(--
|
|
268
|
-
.sess[aria-current="true"] .says{color:var(--
|
|
448
|
+
margin:4px 0 0 18px;font-size:var(--text-xs);line-height:1.5;color:var(--muted-foreground)}
|
|
449
|
+
.sess .says.na{color:var(--muted-foreground);font-style:italic}
|
|
450
|
+
.sess[aria-current="true"] .says{color:var(--foreground)}
|
|
269
451
|
|
|
270
452
|
details.hz{margin:0 8px 4px 14px}
|
|
271
453
|
details.hz>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
|
|
272
|
-
min-height:44px;font-
|
|
273
|
-
color:var(--text-dim)}
|
|
454
|
+
min-height:44px;font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
274
455
|
details.hz>summary::-webkit-details-marker{display:none}
|
|
275
|
-
details.hz>summary::before{content:"▸";font-size:
|
|
456
|
+
details.hz>summary::before{content:"▸";font-size:var(--text-2xs)}
|
|
276
457
|
details.hz[open]>summary::before{content:"▾"}
|
|
277
|
-
details.hz>summary:hover{color:var(--
|
|
458
|
+
details.hz>summary:hover{color:var(--foreground)}
|
|
278
459
|
details.hz .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
|
|
279
|
-
details.hz .kv{display:grid;grid-template-columns:
|
|
280
|
-
details.hz .kv dt{font-
|
|
281
|
-
|
|
282
|
-
details.hz .kv dd{
|
|
283
|
-
details.hz .kv dd b{color:var(--text-2);font-weight:500}
|
|
460
|
+
details.hz .kv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 10px;padding:0 0 10px 15px}
|
|
461
|
+
details.hz .kv dt{font-size:var(--text-xs);color:var(--muted-foreground);padding-top:1px}
|
|
462
|
+
details.hz .kv dd{font-size:var(--text-xs);line-height:1.5;color:var(--foreground);min-width:0;overflow-wrap:anywhere}
|
|
463
|
+
details.hz .kv dd b{color:var(--foreground);font-weight:500}
|
|
284
464
|
/* an unavailable fact is DRAWN as unavailable — never as a plausible constant */
|
|
285
|
-
details.hz .kv dd.na{color:var(--
|
|
465
|
+
details.hz .kv dd.na{color:var(--muted-foreground);font-style:italic}
|
|
286
466
|
details.hz .kv dd.na::before{content:"— ";font-style:normal}
|
|
287
|
-
details.hz .kv .src{font-family:var(--mono);font-size:
|
|
467
|
+
details.hz .kv .src{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground)}
|
|
288
468
|
|
|
289
469
|
/* rename affordance — the name is a guess at creation; it must stay editable (R11) */
|
|
290
|
-
.sessrow .ren{width:30px;flex:none;display:grid;place-items:center;color:var(--
|
|
470
|
+
.sessrow .ren{width:30px;flex:none;display:grid;place-items:center;color:var(--muted-foreground);font-size:var(--text-xs);opacity:0}
|
|
291
471
|
.sessrow:hover .ren,.sessrow .ren:focus-visible{opacity:1}
|
|
292
|
-
.sessrow .ren:hover{color:var(--
|
|
293
|
-
.renbox{width:100%;min-height:44px;padding:0 10px;border:1px solid var(--
|
|
294
|
-
background:var(--
|
|
472
|
+
.sessrow .ren:hover{color:var(--brand)}
|
|
473
|
+
.renbox{width:100%;min-height:44px;padding:0 10px;border:1px solid var(--brand);border-radius:var(--radius-md);
|
|
474
|
+
background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs);outline:none}
|
|
295
475
|
.sessrow .renbox{margin:0 8px}
|
|
296
476
|
|
|
297
477
|
/* ── terminal column ── */
|
|
@@ -301,26 +481,34 @@ details.hz .kv .src{font-family:var(--mono);font-size:8.5px;color:var(--text-dim
|
|
|
301
481
|
.groups{flex:1;min-height:0;min-width:0;display:flex;flex-direction:row}
|
|
302
482
|
.group{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--term-bg)}
|
|
303
483
|
.group[hidden]{display:none}
|
|
304
|
-
.group+.group{border-left:1px solid var(--border
|
|
305
|
-
.group[data-focus="true"] .stabs{box-shadow:inset 0 2px 0 var(--
|
|
484
|
+
.group+.group{border-left:1px solid var(--border)}
|
|
485
|
+
.group[data-focus="true"] .stabs{box-shadow:inset 0 2px 0 var(--brand)}
|
|
306
486
|
.groups[data-split="off"] .group[data-focus="true"] .stabs{box-shadow:none}
|
|
307
|
-
.stabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--
|
|
308
|
-
border-bottom:1px solid var(--border
|
|
487
|
+
.stabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--muted);flex:none;
|
|
488
|
+
border-bottom:1px solid var(--border);overflow-x:auto;min-height:44px;align-items:flex-end}
|
|
309
489
|
/* tab = wrap of two SIBLING buttons (select + close) — valid interactive structure */
|
|
310
490
|
.stab-wrap{flex:none;display:inline-flex;align-items:center;gap:0;
|
|
311
|
-
border:1px solid transparent;border-bottom:0;border-radius:
|
|
312
|
-
.stab-wrap[data-active="true"]{background:var(--term-bg);border-color:var(--border
|
|
491
|
+
border:1px solid transparent;border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0}
|
|
492
|
+
.stab-wrap[data-active="true"]{background:var(--term-bg);border-color:var(--border)}
|
|
313
493
|
.stab{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 6px 0 12px;
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
.
|
|
317
|
-
|
|
318
|
-
.
|
|
319
|
-
.stab-wrap[data-
|
|
320
|
-
.stab
|
|
321
|
-
.stab-wrap .
|
|
322
|
-
|
|
323
|
-
.stab-wrap .
|
|
494
|
+
font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
495
|
+
/* The ACTIVE tab is painted in --term-bg so it reads as continuous with the terminal below it —
|
|
496
|
+
and --term-bg is dark in BOTH themes (the terminal is a terminal). So its label has to come
|
|
497
|
+
from the terminal's own foreground, not the page's: --foreground here is near-black in light
|
|
498
|
+
mode, which rendered the active tab as black text on a black tab. */
|
|
499
|
+
.stab-wrap[data-active="true"] .stab{color:var(--xt-brwhite)}
|
|
500
|
+
.stab .g{font-size:var(--text-xs)}
|
|
501
|
+
.stab-wrap[data-state="needs"] .g{color:var(--brand)} .stab-wrap[data-state="blocked"] .g{color:var(--destructive)}
|
|
502
|
+
.stab-wrap[data-state="working"] .g{color:var(--success)}
|
|
503
|
+
.stab-wrap[data-state="done"] .g{color:var(--info)}
|
|
504
|
+
.stab-wrap[data-state="quiet"] .g{color:var(--warning)}
|
|
505
|
+
.stab-wrap[data-state="idle"] .g,.stab-wrap[data-state="exited"] .g{color:var(--muted-foreground)}
|
|
506
|
+
.stab-wrap .x{width:26px;min-height:38px;display:grid;place-items:center;border-radius:var(--radius-sm);
|
|
507
|
+
color:var(--muted-foreground);font-size:var(--text-sm);margin-right:4px}
|
|
508
|
+
.stab-wrap .x:hover{background:var(--accent);color:var(--accent-foreground)}
|
|
509
|
+
/* on the dark active tab the hover surface has to be light, or the ✕ vanishes into it */
|
|
510
|
+
.stab-wrap[data-active="true"] .x{color:var(--xt-brblack)}
|
|
511
|
+
.stab-wrap[data-active="true"] .x:hover{background:rgba(255,255,255,.12);color:var(--xt-brwhite)}
|
|
324
512
|
.stab-wrap .renbox{min-height:32px;width:150px;margin:0 6px 3px}
|
|
325
513
|
|
|
326
514
|
.termhost{flex:1;position:relative;min-height:0;overflow:hidden}
|
|
@@ -335,390 +523,410 @@ details.hz .kv .src{font-family:var(--mono);font-size:8.5px;color:var(--text-dim
|
|
|
335
523
|
/* scoped to termhost (its positioned ancestor) — sidebar/tabs/needs stay clickable */
|
|
336
524
|
.exited-overlay{position:absolute;inset:0;z-index:5;display:none;place-items:center;background:var(--glass)}
|
|
337
525
|
.exited-overlay.on{display:grid}
|
|
338
|
-
.exited-overlay .card{border:1px solid var(--
|
|
526
|
+
.exited-overlay .card{border:1px solid var(--input);border-radius:var(--radius-lg);background:var(--sidebar);
|
|
339
527
|
padding:16px 18px;text-align:center;max-width:340px}
|
|
340
|
-
.exited-overlay .card p{font-size:
|
|
341
|
-
.exited-overlay .card .reason{display:block;margin-top:6px;font-family:var(--mono);font-size:
|
|
342
|
-
color:var(--
|
|
528
|
+
.exited-overlay .card p{font-size:var(--text-sm);color:var(--foreground);margin-bottom:10px}
|
|
529
|
+
.exited-overlay .card .reason{display:block;margin-top:6px;font-family:var(--mono);font-size:var(--text-xs);
|
|
530
|
+
color:var(--warning);line-height:1.45;max-width:300px}
|
|
343
531
|
.exited-overlay .card .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
|
|
344
|
-
.exited-overlay .card button{min-height:44px;padding:0 16px;border:1px solid var(--
|
|
345
|
-
background:var(--
|
|
346
|
-
.exited-overlay .card button.quiet{border-color:var(--
|
|
347
|
-
.exited-overlay .card button.quiet:hover{border-color:var(--
|
|
532
|
+
.exited-overlay .card button{min-height:44px;padding:0 16px;border:1px solid var(--brand);border-radius:var(--radius-md);
|
|
533
|
+
background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--brand)}
|
|
534
|
+
.exited-overlay .card button.quiet{border-color:var(--input);color:var(--muted-foreground)}
|
|
535
|
+
.exited-overlay .card button.quiet:hover{border-color:var(--destructive);color:var(--foreground)}
|
|
348
536
|
/* a workspace with no sessions says so — it never shows another workspace's terminal */
|
|
349
537
|
.empty-overlay{position:absolute;inset:0;z-index:4;display:none;place-items:center;padding:20px}
|
|
350
538
|
.empty-overlay.on{display:grid}
|
|
351
|
-
.empty-overlay .card{border:1px dashed var(--
|
|
539
|
+
.empty-overlay .card{border:1px dashed var(--input);border-radius:var(--radius-lg);background:var(--sidebar);
|
|
352
540
|
padding:16px 18px;text-align:center;max-width:360px}
|
|
353
|
-
.empty-overlay .card p{font-size:
|
|
354
|
-
.empty-overlay .card .reason{margin-top:6px;font-family:var(--mono);font-size:
|
|
541
|
+
.empty-overlay .card p{font-size:var(--text-sm);color:var(--foreground)}
|
|
542
|
+
.empty-overlay .card .reason{margin-top:6px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.45}
|
|
355
543
|
|
|
356
544
|
/* needs-you strips */
|
|
357
|
-
.needs{border-top:1px solid var(--
|
|
545
|
+
.needs{border-top:1px solid var(--warning);background:var(--warning-wash);padding:10px 14px 12px;flex:none;
|
|
358
546
|
max-height:38vh;overflow-y:auto}
|
|
359
|
-
.needs.accept{border-top-color:var(--
|
|
360
|
-
.needs .k{font-
|
|
361
|
-
.needs.accept .k{color:var(--
|
|
362
|
-
.needs .q{font-size:
|
|
363
|
-
.needs .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:
|
|
364
|
-
.dlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--
|
|
365
|
-
.gbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--
|
|
366
|
-
border-radius:
|
|
367
|
-
.gbtn:hover{border-color:var(--
|
|
368
|
-
.needs.accept .gbtn:hover{border-color:var(--
|
|
369
|
-
.gbtn.primary{border-color:var(--
|
|
370
|
-
.wpath{width:100%;font-
|
|
547
|
+
.needs.accept{border-top-color:var(--info);background:var(--info-wash)}
|
|
548
|
+
.needs .k{font-size:var(--text-xs);color:var(--warning)}
|
|
549
|
+
.needs.accept .k{color:var(--info)}
|
|
550
|
+
.needs .q{font-size:var(--text-sm);color:var(--foreground);line-height:1.5;margin:4px 0 9px;max-width:90ch}
|
|
551
|
+
.needs .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
552
|
+
.dlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--brand);text-decoration:underline}
|
|
553
|
+
.gbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--input);
|
|
554
|
+
border-radius:var(--radius-lg);background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
555
|
+
.gbtn:hover{border-color:var(--warning);color:var(--foreground)}
|
|
556
|
+
.needs.accept .gbtn:hover{border-color:var(--info)}
|
|
557
|
+
.gbtn.primary{border-color:var(--warning)} .needs.accept .gbtn.primary{border-color:var(--info)}
|
|
558
|
+
.wpath{width:100%;font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px}
|
|
371
559
|
|
|
372
560
|
/* ── right rail: the library over the document reader ── */
|
|
373
|
-
.rail{border-left:1px solid var(--
|
|
561
|
+
.rail{border-left:1px solid var(--input);background:var(--sidebar);position:relative;
|
|
374
562
|
display:flex;flex-direction:column;min-height:0;min-width:0}
|
|
375
563
|
/* drag the rail's own edge — a document read at 340px is a column of ten words */
|
|
376
564
|
.railgrip{position:absolute;left:-4px;top:0;bottom:0;width:8px;z-index:5;cursor:col-resize}
|
|
377
|
-
.railgrip::after{content:"";position:absolute;inset:0 3px;border-radius:
|
|
378
|
-
.railgrip:hover::after,.railgrip:focus-visible::after{background:var(--
|
|
565
|
+
.railgrip::after{content:"";position:absolute;inset:0 3px;border-radius:var(--radius-sm);background:transparent}
|
|
566
|
+
.railgrip:hover::after,.railgrip:focus-visible::after{background:var(--brand)}
|
|
379
567
|
.rail .lib-pane{flex:1 1 var(--libsplit);min-height:34px}
|
|
380
568
|
.rail .doc-pane{flex:1 1 calc(100% - var(--libsplit));min-height:34px}
|
|
381
569
|
.rail .doc-pane[hidden]{display:none}
|
|
382
570
|
.rail .pane[data-fold="off"]{flex:0 0 auto}
|
|
383
|
-
.railsplit{flex:none;height:7px;cursor:row-resize;background:var(--
|
|
384
|
-
border-block:1px solid var(--border
|
|
571
|
+
.railsplit{flex:none;height:7px;cursor:row-resize;background:var(--muted);
|
|
572
|
+
border-block:1px solid var(--border);position:relative}
|
|
385
573
|
.railsplit[hidden]{display:none}
|
|
386
|
-
.railsplit::after{content:"";position:absolute;inset:2px 42% 2px 42%;border-radius:
|
|
387
|
-
.railsplit:hover::after,.railsplit:focus-visible::after{background:var(--
|
|
574
|
+
.railsplit::after{content:"";position:absolute;inset:2px 42% 2px 42%;border-radius:var(--radius-sm);background:var(--input)}
|
|
575
|
+
.railsplit:hover::after,.railsplit:focus-visible::after{background:var(--brand)}
|
|
388
576
|
|
|
389
577
|
/* library — two lenses over one file set: initiatives (how the PM thinks) / folders (how the
|
|
390
578
|
repo is laid out). The initiative lens joins a unit of work's scattered artifacts. */
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
.lens
|
|
395
|
-
|
|
396
|
-
.
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
579
|
+
/* shadcn Tabs: an inset --muted track, the selected lens lifted onto --background. Four lenses
|
|
580
|
+
have to survive a narrow rail, so the group is allowed to SHRINK and scroll rather than push
|
|
581
|
+
the refresh control off the end of the header — which is what a fixed-width group did. */
|
|
582
|
+
.lens{margin-left:auto;display:inline-flex;gap:2px;border-radius:var(--radius-md);
|
|
583
|
+
background:var(--muted);padding:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
|
|
584
|
+
.lens::-webkit-scrollbar{display:none}
|
|
585
|
+
.lens button{min-height:24px;padding:0 7px;font-size:var(--text-2xs);font-weight:500;flex:none;
|
|
586
|
+
border-radius:var(--radius-sm);color:var(--muted-foreground);background:transparent;
|
|
587
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized),
|
|
588
|
+
color var(--duration-fast) var(--ease-emphasized)}
|
|
589
|
+
.lens button:hover{color:var(--foreground)}
|
|
590
|
+
.lens button[aria-selected="true"]{background:var(--background);color:var(--foreground);
|
|
591
|
+
box-shadow:0 1px 2px var(--shadow)}
|
|
592
|
+
/* shadcn Input */
|
|
593
|
+
.libfind{margin:8px 12px 4px;min-height:34px;padding:0 12px;width:calc(100% - 24px);
|
|
594
|
+
border:1px solid var(--input);border-radius:var(--radius-md);background:transparent;color:var(--foreground);
|
|
595
|
+
font-family:var(--sans);font-size:var(--text-sm);outline:none;
|
|
596
|
+
transition:border-color var(--duration-fast) var(--ease-emphasized),
|
|
597
|
+
box-shadow var(--duration-fast) var(--ease-emphasized)}
|
|
598
|
+
.libfind::placeholder{color:var(--muted-foreground)}
|
|
599
|
+
.libfind:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--brand-wash)}
|
|
600
|
+
.grp{font-size:var(--text-2xs);
|
|
601
|
+
color:var(--muted-foreground);padding:8px 14px 4px}
|
|
402
602
|
details.init{margin:0}
|
|
403
603
|
details.init>summary{list-style:none;cursor:pointer;min-height:38px;display:flex;align-items:center;gap:7px;
|
|
404
|
-
padding:0 14px;font-family:var(--mono);font-size:
|
|
604
|
+
padding:0 14px;font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground)}
|
|
405
605
|
details.init>summary::-webkit-details-marker{display:none}
|
|
406
|
-
details.init>summary::before{content:"▸";font-size:
|
|
606
|
+
details.init>summary::before{content:"▸";font-size:var(--text-2xs);color:var(--muted-foreground);transition:transform .12s;flex:none}
|
|
407
607
|
details.init[open]>summary::before{transform:rotate(90deg)}
|
|
408
608
|
@media (prefers-reduced-motion:reduce){details.init>summary::before{transition:none}}
|
|
409
|
-
details.init>summary:hover{background:var(--
|
|
609
|
+
details.init>summary:hover{background:var(--accent)}
|
|
410
610
|
details.init .iid{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
411
|
-
details.init .n{font-size:
|
|
611
|
+
details.init .n{font-size:var(--text-2xs);color:var(--muted-foreground);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 4px;flex:none}
|
|
412
612
|
details.init .ititle{display:none}
|
|
413
613
|
.doc.art{display:flex;align-items:center;gap:8px;padding-left:28px}
|
|
414
|
-
.doc.art .role{flex:none;width:66px;font-size:
|
|
415
|
-
.doc.art .role[data-role="PRD"]{color:var(--
|
|
416
|
-
.doc.art .role[data-role="rubric"],.doc.art .role[data-role="eval"]{color:var(--
|
|
417
|
-
.doc.art .role[data-role="design brief"],.doc.art .role[data-role="design"]{color:var(--
|
|
614
|
+
.doc.art .role{flex:none;width:66px;font-size:var(--text-2xs);color:var(--muted-foreground)}
|
|
615
|
+
.doc.art .role[data-role="PRD"]{color:var(--brand)}
|
|
616
|
+
.doc.art .role[data-role="rubric"],.doc.art .role[data-role="eval"]{color:var(--info)}
|
|
617
|
+
.doc.art .role[data-role="design brief"],.doc.art .role[data-role="design"]{color:var(--warning)}
|
|
418
618
|
.doc.art .dn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
419
619
|
details.tree{margin:0}
|
|
420
620
|
details.tree>summary{list-style:none;cursor:pointer;min-height:38px;display:flex;align-items:center;gap:7px;
|
|
421
|
-
padding:0 14px;font-family:var(--mono);font-size:
|
|
621
|
+
padding:0 14px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
422
622
|
details.tree>summary::-webkit-details-marker{display:none}
|
|
423
|
-
details.tree>summary::before{content:"▸";font-size:
|
|
623
|
+
details.tree>summary::before{content:"▸";font-size:var(--text-2xs);color:var(--muted-foreground);transition:transform .12s;flex:none}
|
|
424
624
|
details.tree[open]>summary::before{transform:rotate(90deg)}
|
|
425
625
|
@media (prefers-reduced-motion:reduce){details.tree>summary::before{transition:none}}
|
|
426
|
-
details.tree>summary:hover{color:var(--
|
|
626
|
+
details.tree>summary:hover{color:var(--foreground)}
|
|
427
627
|
.tree .tree>summary{padding-left:28px}
|
|
428
628
|
.tree .tree .tree>summary{padding-left:42px}
|
|
429
|
-
.doc{display:block;width:100%;text-align:left;color:var(--
|
|
629
|
+
.doc{display:block;width:100%;text-align:left;color:var(--muted-foreground);font-size:var(--text-xs);
|
|
430
630
|
padding:5px 14px 5px 30px;min-height:36px;line-height:1.3;border-left:3px solid transparent;font-family:var(--mono)}
|
|
431
631
|
.tree .tree .doc{padding-left:44px}
|
|
432
632
|
.tree .tree .tree .doc{padding-left:58px}
|
|
433
|
-
.doc:hover{color:var(--
|
|
434
|
-
.doc.on{color:var(--
|
|
633
|
+
.doc:hover{color:var(--foreground);background:var(--accent)}
|
|
634
|
+
.doc.on{color:var(--brand);border-left-color:var(--brand);font-weight:600}
|
|
435
635
|
/* a non-markdown file: shown so the folder map is complete, but inert (the reader is .md-only) */
|
|
436
|
-
.file{display:block;width:100%;text-align:left;color:var(--
|
|
636
|
+
.file{display:block;width:100%;text-align:left;color:var(--muted-foreground);font-size:var(--text-xs);
|
|
437
637
|
padding:5px 14px 5px 30px;min-height:36px;line-height:1.3;border-left:3px solid transparent;
|
|
438
638
|
font-family:var(--mono);opacity:.62;cursor:default}
|
|
439
639
|
.tree .tree .file{padding-left:44px}
|
|
440
640
|
.tree .tree .tree .file{padding-left:58px}
|
|
441
641
|
/* the library refresh (↻): hugs the lens toggle, spins briefly on click */
|
|
442
|
-
.cap .librefresh{margin-left:6px;width:26px;height:26px}
|
|
642
|
+
.cap .librefresh{margin-left:6px;width:26px;height:26px;flex:none}
|
|
443
643
|
.librefresh.spin{animation:libspin .5s linear}
|
|
444
644
|
@keyframes libspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
|
|
445
645
|
@media (prefers-reduced-motion:reduce){.librefresh.spin{animation:none}}
|
|
446
|
-
.empty{padding:10px 16px;font-size:
|
|
447
|
-
.empty b{color:var(--
|
|
646
|
+
.empty{padding:10px 16px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
|
|
647
|
+
.empty b{color:var(--foreground)}
|
|
448
648
|
|
|
449
649
|
/* ── the document reader (bottom of the rail) ── */
|
|
450
|
-
.doc-pane .cap{padding-right:6px}
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
650
|
+
.doc-pane .cap{padding-right:6px;gap:6px}
|
|
651
|
+
/* the crumb is a FILE PATH — mono earns its place. It yields space to the controls beside it
|
|
652
|
+
rather than shouldering them off the end of the header. */
|
|
653
|
+
.doc-pane .crumb{margin-left:auto;font-family:var(--mono);font-size:var(--text-2xs);
|
|
654
|
+
color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
|
|
655
|
+
direction:rtl;text-align:right;max-width:50%;min-width:0;flex:0 1 auto}
|
|
656
|
+
/* `ghost` icon button, matching the other cap controls instead of being the one outlined box */
|
|
657
|
+
.doc-pane .x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);
|
|
658
|
+
border:0;background:transparent;color:var(--muted-foreground);font-size:var(--text-sm);
|
|
659
|
+
transition:background-color var(--duration-fast) var(--ease-emphasized),
|
|
660
|
+
color var(--duration-fast) var(--ease-emphasized)}
|
|
661
|
+
.doc-pane .x:hover{background:var(--destructive);color:var(--primary-foreground)}
|
|
457
662
|
.doc-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;
|
|
458
|
-
padding:18px 22px 64px;line-height:1.65;font-size:14px;color:var(--
|
|
663
|
+
padding:18px 22px 64px;line-height:1.65;font-size:14px;color:var(--foreground)}
|
|
459
664
|
.doc-body>*{max-width:72ch}
|
|
460
|
-
.doc-body h1{font-size:21px;font-weight:600;line-height:1.3;margin:4px 0 12px;color:var(--
|
|
461
|
-
.doc-body h2{font-size:16px;font-weight:600;line-height:1.35;margin:26px 0 8px;color:var(--
|
|
462
|
-
padding-bottom:5px;border-bottom:1px solid var(--border
|
|
463
|
-
.doc-body h3{font-size:14px;font-weight:600;margin:20px 0 6px;color:var(--
|
|
464
|
-
.doc-body h4,.doc-body h5,.doc-body h6{font-size:
|
|
465
|
-
letter-spacing:.04em;text-transform:uppercase}
|
|
665
|
+
.doc-body h1{font-size:21px;font-weight:600;line-height:1.3;margin:4px 0 12px;color:var(--foreground);text-wrap:balance}
|
|
666
|
+
.doc-body h2{font-size:16px;font-weight:600;line-height:1.35;margin:26px 0 8px;color:var(--foreground);
|
|
667
|
+
padding-bottom:5px;border-bottom:1px solid var(--border)}
|
|
668
|
+
.doc-body h3{font-size:14px;font-weight:600;margin:20px 0 6px;color:var(--foreground)}
|
|
669
|
+
.doc-body h4,.doc-body h5,.doc-body h6{font-size:var(--text-sm);font-weight:600;margin:16px 0 5px;color:var(--muted-foreground)}
|
|
466
670
|
.doc-body p{margin:0 0 12px}
|
|
467
671
|
.doc-body ul,.doc-body ol{margin:0 0 12px;padding-left:22px}
|
|
468
672
|
.doc-body li{margin:0 0 5px;padding-left:2px}
|
|
469
673
|
.doc-body li>ul,.doc-body li>ol{margin:5px 0 0}
|
|
470
|
-
.doc-body li::marker{color:var(--
|
|
674
|
+
.doc-body li::marker{color:var(--muted-foreground)}
|
|
471
675
|
.doc-body ul.task{list-style:none;padding-left:6px}
|
|
472
676
|
.doc-body ul.task li{display:flex;gap:8px;align-items:baseline}
|
|
473
|
-
.doc-body ul.task .box{flex:none;font-family:var(--mono);font-size:
|
|
474
|
-
.doc-body ul.task .box.done{color:var(--
|
|
475
|
-
.doc-body code{font-family:var(--mono);font-size:
|
|
476
|
-
padding:1.5px 5px;border-radius:
|
|
477
|
-
.doc-body pre{background:var(--
|
|
677
|
+
.doc-body ul.task .box{flex:none;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
678
|
+
.doc-body ul.task .box.done{color:var(--success)}
|
|
679
|
+
.doc-body code{font-family:var(--mono);font-size:var(--text-sm);color:var(--brand);background:var(--secondary);
|
|
680
|
+
padding:1.5px 5px;border-radius:var(--radius-sm);word-break:break-word}
|
|
681
|
+
.doc-body pre{background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-md);
|
|
478
682
|
padding:12px 14px;overflow-x:auto;margin:0 0 14px;max-width:100%}
|
|
479
|
-
.doc-body pre code{background:none;padding:0;color:var(--
|
|
480
|
-
.doc-body pre .lang{display:block;font-family:var(--mono);font-size:
|
|
481
|
-
|
|
482
|
-
.doc-body blockquote{border-left:3px solid var(--
|
|
483
|
-
padding:9px 14px;margin:0 0 14px;border-radius:0
|
|
683
|
+
.doc-body pre code{background:none;padding:0;color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.6;word-break:normal}
|
|
684
|
+
.doc-body pre .lang{display:block;font-family:var(--mono);font-size:var(--text-2xs);
|
|
685
|
+
color:var(--muted-foreground);margin-bottom:7px}
|
|
686
|
+
.doc-body blockquote{border-left:3px solid var(--input);background:var(--card);
|
|
687
|
+
padding:9px 14px;margin:0 0 14px;border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--muted-foreground)}
|
|
484
688
|
.doc-body blockquote p:last-child{margin-bottom:0}
|
|
485
689
|
.doc-body hr{border:0;border-top:1px solid var(--border);margin:22px 0}
|
|
486
|
-
.doc-body a{color:var(--
|
|
487
|
-
.doc-body a:hover{color:var(--
|
|
488
|
-
.doc-body strong{color:var(--
|
|
489
|
-
.doc-body del{color:var(--
|
|
690
|
+
.doc-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
|
|
691
|
+
.doc-body a:hover{color:var(--brand)}
|
|
692
|
+
.doc-body strong{color:var(--foreground);font-weight:600}
|
|
693
|
+
.doc-body del{color:var(--muted-foreground)}
|
|
490
694
|
/* tables (rubrics ARE tables) — scroll inside their own box, never the page */
|
|
491
|
-
.doc-body .tablewrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--border
|
|
492
|
-
.doc-body table{border-collapse:collapse;width:100%;font-size:
|
|
493
|
-
.doc-body th,.doc-body td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--border
|
|
494
|
-
.doc-body th{background:var(--
|
|
695
|
+
.doc-body .tablewrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--radius-md);max-width:100%}
|
|
696
|
+
.doc-body table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
|
|
697
|
+
.doc-body th,.doc-body td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--border);vertical-align:top}
|
|
698
|
+
.doc-body th{background:var(--muted);color:var(--foreground);font-weight:600;font-size:var(--text-sm);
|
|
495
699
|
letter-spacing:.03em;white-space:nowrap}
|
|
496
700
|
.doc-body tbody tr:nth-child(even){background:var(--card)}
|
|
497
701
|
.doc-body tbody tr:last-child td{border-bottom:0}
|
|
498
702
|
/* the identity block every PMOS artifact opens with, as a card instead of raw YAML */
|
|
499
|
-
.doc-body .fm{border:1px solid var(--border
|
|
703
|
+
.doc-body .fm{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-lg);
|
|
500
704
|
padding:10px 12px;margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
|
|
501
|
-
font-size:
|
|
502
|
-
.doc-body .fm dt{font-
|
|
503
|
-
color:var(--
|
|
504
|
-
.doc-body .fm dd{color:var(--
|
|
505
|
-
.doc-empty{padding:16px;color:var(--
|
|
705
|
+
font-size:var(--text-sm);max-width:72ch}
|
|
706
|
+
.doc-body .fm dt{font-size:var(--text-2xs);
|
|
707
|
+
color:var(--muted-foreground);padding-top:2px}
|
|
708
|
+
.doc-body .fm dd{color:var(--foreground);min-width:0;overflow-wrap:anywhere}
|
|
709
|
+
.doc-empty{padding:16px;color:var(--muted-foreground);font-size:var(--text-sm)}
|
|
506
710
|
|
|
507
711
|
/* ── ⌘K jump palette + the in-app folder browser ── */
|
|
508
712
|
.palette{position:fixed;inset:0;z-index:90;background:var(--glass);backdrop-filter:blur(3px);
|
|
509
713
|
display:grid;place-items:start center;padding-top:12vh}
|
|
510
|
-
.palette-box{width:min(560px,92vw);background:var(--
|
|
511
|
-
border-radius:
|
|
512
|
-
.palette-box input{width:100%;min-height:48px;padding:0 16px;background:var(--
|
|
513
|
-
border-bottom:1px solid var(--border
|
|
714
|
+
.palette-box{width:min(560px,92vw);background:var(--sidebar);border:1px solid var(--input);
|
|
715
|
+
border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 80px -24px var(--shadow)}
|
|
716
|
+
.palette-box input{width:100%;min-height:48px;padding:0 16px;background:var(--muted);border:0;
|
|
717
|
+
border-bottom:1px solid var(--border);color:var(--foreground);font-family:var(--mono);font-size:var(--text-base);outline:none}
|
|
514
718
|
.palette-list{max-height:52vh;overflow-y:auto;padding:6px}
|
|
515
719
|
.pitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;min-height:40px;padding:0 12px;
|
|
516
|
-
border-radius:
|
|
517
|
-
.pitem .kind{font-size:
|
|
518
|
-
.pitem.sel,.pitem:hover{background:var(--
|
|
519
|
-
.pitem .g{font-size:
|
|
520
|
-
.pitem .badge{font-size:
|
|
521
|
-
border:1px solid var(--border);border-radius:
|
|
522
|
-
.fs-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--
|
|
523
|
-
border-bottom:1px solid var(--border
|
|
720
|
+
border-radius:var(--radius-md);font-family:var(--mono);font-size:var(--text-sm);color:var(--muted-foreground)}
|
|
721
|
+
.pitem .kind{font-size:var(--text-2xs);color:var(--muted-foreground);margin-left:auto}
|
|
722
|
+
.pitem.sel,.pitem:hover{background:var(--accent);color:var(--foreground)}
|
|
723
|
+
.pitem .g{font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
724
|
+
.pitem .badge{font-size:var(--text-2xs);color:var(--success);
|
|
725
|
+
border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 4px;margin-left:auto}
|
|
726
|
+
.fs-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--muted);
|
|
727
|
+
border-bottom:1px solid var(--border)}
|
|
524
728
|
.fs-up{width:34px;min-height:34px;display:grid;place-items:center;border:1px solid var(--border);
|
|
525
|
-
border-radius:
|
|
526
|
-
.fs-up:hover{border-color:var(--
|
|
527
|
-
.fs-crumb{flex:1;min-width:0;font-family:var(--mono);font-size:
|
|
729
|
+
border-radius:var(--radius-md);background:var(--secondary);color:var(--muted-foreground)}
|
|
730
|
+
.fs-up:hover{border-color:var(--brand);color:var(--brand)}
|
|
731
|
+
.fs-crumb{flex:1;min-width:0;font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);
|
|
528
732
|
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
|
|
529
|
-
.fs-use{min-height:34px;padding:0 12px;border:1px solid var(--
|
|
530
|
-
background:var(--
|
|
733
|
+
.fs-use{min-height:34px;padding:0 12px;border:1px solid var(--brand);border-radius:var(--radius-md);
|
|
734
|
+
background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs)}
|
|
531
735
|
.fs-head .x{width:34px;min-height:34px;display:grid;place-items:center;border:1px solid var(--border);
|
|
532
|
-
border-radius:
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
.strip{display:flex;align-items:center;gap:14px;padding:0 12px;border-top:1px solid var(--border-3);
|
|
536
|
-
background:var(--panel-head);font-family:var(--mono);font-size:9.5px;color:var(--text-faint);min-width:0}
|
|
736
|
+
border-radius:var(--radius-md);background:var(--secondary);color:var(--muted-foreground);font-size:var(--text-sm)}/* ── status strip ── */
|
|
737
|
+
.strip{display:flex;align-items:center;gap:14px;padding:0 12px;border-top:1px solid var(--border);
|
|
738
|
+
background:var(--muted);font-size:var(--text-xs);color:var(--muted-foreground);min-width:0}
|
|
537
739
|
.strip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
538
|
-
|
|
740
|
+
/* `flex:none` here would pin the hint list at its full width and push the page into a horizontal
|
|
741
|
+
scroll once the type got bigger than the 9.5px it was originally set at. It ellipsizes instead:
|
|
742
|
+
the strip is the lowest-priority text on screen and must never widen the app. */
|
|
743
|
+
.strip .right{margin-left:auto;color:var(--muted-foreground);flex:0 1 auto;min-width:0}
|
|
539
744
|
|
|
540
745
|
/* ── on-demand surfaces (Plan · Deliver · Measure · Report), rendered in the reader ── */
|
|
541
746
|
/* phase accents — status is NEVER hue-alone: every surface pairs colour with a glyph + label */
|
|
542
|
-
.sf-wrap{--plan:var(--
|
|
747
|
+
.sf-wrap{--plan:var(--brand);--deliver:var(--success);--measure:var(--info);--report:var(--warning)}
|
|
543
748
|
.sf-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
|
|
544
|
-
padding:12px 22px;background:var(--
|
|
749
|
+
padding:12px 22px;background:var(--muted);border-bottom:1px solid var(--border);margin:0 0 4px}
|
|
545
750
|
.sf-views{display:inline-flex;gap:6px;flex-wrap:wrap}
|
|
546
|
-
.sf-views button{font-family:var(--mono);font-size:
|
|
547
|
-
border-radius:
|
|
548
|
-
.sf-views button:hover{border-color:var(--
|
|
549
|
-
.sf-views button.on{border-color:var(--
|
|
550
|
-
.sf-chip{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font-
|
|
551
|
-
letter-spacing:.05em;color:var(--
|
|
552
|
-
.sf-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--
|
|
751
|
+
.sf-views button{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);border:1px solid var(--border);
|
|
752
|
+
border-radius:var(--radius-md);padding:4px 10px;background:var(--secondary)}
|
|
753
|
+
.sf-views button:hover{border-color:var(--input);color:var(--foreground)}
|
|
754
|
+
.sf-views button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
|
|
755
|
+
.sf-chip{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font-size:var(--text-2xs);
|
|
756
|
+
letter-spacing:.05em;color:var(--success);border:1px solid var(--border);border-radius:99px;padding:3px 10px}
|
|
757
|
+
.sf-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
|
|
553
758
|
.sf-body{padding:14px 22px 40px;display:flex;flex-direction:column;gap:16px}
|
|
554
|
-
.sf-body .untr{color:var(--
|
|
555
|
-
.sf-note{font-family:var(--mono);font-size:
|
|
759
|
+
.sf-body .untr{color:var(--muted-foreground);font-style:italic;opacity:.75;font-size:var(--text-xs)}
|
|
760
|
+
.sf-note{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.6;border-top:1px solid var(--border);padding-top:11px}
|
|
556
761
|
|
|
557
762
|
/* focal band: what needs you (leads) */
|
|
558
|
-
.sf-needs{border:1px solid var(--
|
|
559
|
-
background:radial-gradient(120% 140% at 0 0,var(--
|
|
763
|
+
.sf-needs{border:1px solid var(--warning);border-radius:var(--radius-xl);overflow:hidden;
|
|
764
|
+
background:radial-gradient(120% 140% at 0 0,var(--warning-wash),transparent 60%),var(--card)}
|
|
560
765
|
.sf-needs .nh{display:flex;align-items:center;gap:9px;padding:12px 15px 9px}
|
|
561
|
-
.sf-needs .nh .dot{width:8px;height:8px;border-radius:50%;background:var(--
|
|
562
|
-
.sf-needs .nh b{font-size:
|
|
563
|
-
.sf-needs .nh .sub{font-family:var(--mono);font-size:
|
|
564
|
-
.sf-needs .need{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border
|
|
565
|
-
.sf-needs .need .ph{width:3px;align-self:stretch;border-radius:
|
|
766
|
+
.sf-needs .nh .dot{width:8px;height:8px;border-radius:50%;background:var(--warning);flex:none;box-shadow:0 0 0 4px var(--warning-wash)}
|
|
767
|
+
.sf-needs .nh b{font-size:var(--text-base);color:var(--foreground)}
|
|
768
|
+
.sf-needs .nh .sub{font-family:var(--mono);font-size:var(--text-xs);color:var(--warning);margin-left:auto}
|
|
769
|
+
.sf-needs .need{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border)}
|
|
770
|
+
.sf-needs .need .ph{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--warning);flex:none}
|
|
566
771
|
.sf-needs .need .txt{flex:1;min-width:0}
|
|
567
|
-
.sf-needs .need .t{font-size:
|
|
568
|
-
.sf-needs .need .m{font-family:var(--mono);font-size:
|
|
569
|
-
.sf-needs .need .go{flex:none;min-height:36px;padding:0 13px;border:1px solid var(--
|
|
570
|
-
background:var(--
|
|
571
|
-
.sf-needs .need .go:hover{background:var(--
|
|
572
|
-
.sf-needs.calm{border-color:var(--
|
|
573
|
-
.sf-needs.calm .nh .dot{background:var(--
|
|
574
|
-
.sf-needs.calm .nh .sub{color:var(--
|
|
575
|
-
.sf-needs.calm .calm-body{padding:2px 15px 13px;font-size:
|
|
772
|
+
.sf-needs .need .t{font-size:var(--text-sm);color:var(--foreground);line-height:1.45}
|
|
773
|
+
.sf-needs .need .m{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:3px}
|
|
774
|
+
.sf-needs .need .go{flex:none;min-height:36px;padding:0 13px;border:1px solid var(--warning);border-radius:var(--radius-md);
|
|
775
|
+
background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--warning)}
|
|
776
|
+
.sf-needs .need .go:hover{background:var(--warning-wash);color:var(--foreground)}
|
|
777
|
+
.sf-needs.calm{border-color:var(--info)}
|
|
778
|
+
.sf-needs.calm .nh .dot{background:var(--info);box-shadow:0 0 0 4px var(--info-wash)}
|
|
779
|
+
.sf-needs.calm .nh .sub{color:var(--info)}
|
|
780
|
+
.sf-needs.calm .calm-body{padding:2px 15px 13px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
|
|
576
781
|
|
|
577
782
|
/* one restrained instrument (not a chart wall) */
|
|
578
783
|
.sf-pulse{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
|
|
579
|
-
.sf-pulse .n{font-family:var(--mono);font-size:
|
|
580
|
-
.sf-pulse .n b{color:var(--
|
|
581
|
-
.sf-dist{flex:1;min-width:150px;height:8px;border-radius:99px;overflow:hidden;display:flex;background:var(--
|
|
784
|
+
.sf-pulse .n{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
785
|
+
.sf-pulse .n b{color:var(--foreground);font-size:15px;font-weight:600}
|
|
786
|
+
.sf-dist{flex:1;min-width:150px;height:8px;border-radius:99px;overflow:hidden;display:flex;background:var(--accent)}
|
|
582
787
|
.sf-dist i{height:100%}
|
|
583
788
|
.sf-dist i[data-phase="plan"]{background:var(--plan)} .sf-dist i[data-phase="deliver"]{background:var(--deliver)}
|
|
584
789
|
.sf-dist i[data-phase="measure"]{background:var(--measure)} .sf-dist i[data-phase="report"]{background:var(--report)}
|
|
585
|
-
.sf-legend{display:flex;gap:12px;flex-wrap:wrap;font-
|
|
790
|
+
.sf-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--text-2xs);color:var(--muted-foreground)}
|
|
586
791
|
|
|
587
|
-
/* the list: rows with a phase spine,
|
|
588
|
-
.sf-grp{font-
|
|
792
|
+
/* the list: rows with a phase spine,not a wall of identical cards */
|
|
793
|
+
.sf-grp{font-size:var(--text-2xs);color:var(--muted-foreground);padding:4px 2px 2px}
|
|
589
794
|
.sf-list{display:flex;flex-direction:column}
|
|
590
|
-
.sf-row{border-top:1px solid var(--border
|
|
795
|
+
.sf-row{border-top:1px solid var(--border)}
|
|
591
796
|
.sf-row:first-child{border-top:0}
|
|
592
797
|
.sf-row>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3px auto 1fr auto auto;gap:11px;
|
|
593
798
|
align-items:center;padding:11px 4px;min-height:54px}
|
|
594
799
|
.sf-row>summary::-webkit-details-marker{display:none}
|
|
595
|
-
.sf-row>summary:hover{background:var(--
|
|
596
|
-
.sf-spine{width:3px;align-self:stretch;border-radius:
|
|
800
|
+
.sf-row>summary:hover{background:var(--accent)}
|
|
801
|
+
.sf-spine{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--input)}
|
|
597
802
|
.sf-row[data-phase="plan"] .sf-spine,.sf-rcrow[data-phase="plan"] .sf-spine{background:var(--plan)}
|
|
598
803
|
.sf-row[data-phase="deliver"] .sf-spine,.sf-rcrow[data-phase="deliver"] .sf-spine{background:var(--deliver)}
|
|
599
804
|
.sf-row[data-phase="measure"] .sf-spine,.sf-rcrow[data-phase="measure"] .sf-spine{background:var(--measure)}
|
|
600
805
|
.sf-row[data-phase="report"] .sf-spine,.sf-rcrow[data-phase="report"] .sf-spine{background:var(--report)}
|
|
601
|
-
.sf-stat .g{font-
|
|
602
|
-
.sf-id{font-family:var(--mono);font-size:
|
|
603
|
-
.sf-id .ti{display:block;font-family:var(--sans);font-size:
|
|
806
|
+
.sf-stat .g{font-size:var(--text-xs);color:var(--muted-foreground);white-space:nowrap}
|
|
807
|
+
.sf-id{font-family:var(--mono);font-size:var(--text-sm);color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
|
|
808
|
+
.sf-id .ti{display:block;font-family:var(--sans);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px;
|
|
604
809
|
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
605
|
-
.sf-metrics{display:flex;align-items:center;gap:13px;flex:none;font-family:var(--mono);font-size:
|
|
810
|
+
.sf-metrics{display:flex;align-items:center;gap:13px;flex:none;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
606
811
|
.sf-metrics .m{display:flex;flex-direction:column;gap:2px}
|
|
607
|
-
.sf-metrics .k{font-size:
|
|
608
|
-
.sf-metrics b{color:var(--
|
|
609
|
-
.sf-prog{width:52px;height:5px;border-radius:99px;background:var(--
|
|
610
|
-
.sf-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--
|
|
611
|
-
.sf-chev{color:var(--
|
|
812
|
+
.sf-metrics .k{font-size:var(--text-2xs);color:var(--muted-foreground)}
|
|
813
|
+
.sf-metrics b{color:var(--brand);font-size:var(--text-base)}
|
|
814
|
+
.sf-prog{width:52px;height:5px;border-radius:99px;background:var(--accent);overflow:hidden;display:block}
|
|
815
|
+
.sf-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--info))}
|
|
816
|
+
.sf-chev{color:var(--muted-foreground);font-size:var(--text-xs);transition:transform .14s}
|
|
612
817
|
.sf-row[open] .sf-chev{transform:rotate(90deg)}
|
|
613
818
|
@media (prefers-reduced-motion:reduce){.sf-chev{transition:none}}
|
|
614
|
-
.sf-detail{padding:2px 12px 15px 18px;display:grid;gap:11px;background:var(--
|
|
615
|
-
.sf-detail h4{font-
|
|
616
|
-
.sf-detail p{font-size:
|
|
819
|
+
.sf-detail{padding:2px 12px 15px 18px;display:grid;gap:11px;background:var(--muted)}
|
|
820
|
+
.sf-detail h4{font-size:var(--text-2xs);color:var(--muted-foreground);margin-bottom:4px}
|
|
821
|
+
.sf-detail p{font-size:var(--text-sm);color:var(--foreground);line-height:1.5}
|
|
617
822
|
.sf-arts{display:flex;flex-wrap:wrap;gap:6px}
|
|
618
|
-
.sf-art{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:
|
|
619
|
-
border:1px solid var(--border);border-radius:
|
|
620
|
-
.sf-art:hover{border-color:var(--
|
|
621
|
-
.sf-art .role{font-size:
|
|
823
|
+
.sf-art{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);
|
|
824
|
+
border:1px solid var(--border);border-radius:var(--radius-md);padding:4px 9px;background:var(--secondary)}
|
|
825
|
+
.sf-art:hover{border-color:var(--brand);color:var(--brand)}
|
|
826
|
+
.sf-art .role{font-size:var(--text-2xs);color:var(--muted-foreground)}
|
|
622
827
|
|
|
623
828
|
/* roadmap (list-calendar) · okr · report */
|
|
624
|
-
.sf-rc h4{font-family:var(--mono);font-size:
|
|
625
|
-
margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border
|
|
829
|
+
.sf-rc h4{font-family:var(--mono);font-size:var(--text-2xs);color:var(--brand);
|
|
830
|
+
margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border)}
|
|
626
831
|
.sf-rcrow{display:grid;grid-template-columns:3px 1fr auto;gap:10px;align-items:center;padding:7px 2px}
|
|
627
|
-
.sf-rcrow .nm{font-family:var(--mono);font-size:
|
|
628
|
-
.sf-rcrow .st{font-family:var(--mono);font-size:
|
|
629
|
-
.sf-kr{border:1px solid var(--border
|
|
630
|
-
.sf-kr .obj{font-size:
|
|
631
|
-
.sf-kr .krrow{padding:8px 0;border-top:1px solid var(--border
|
|
832
|
+
.sf-rcrow .nm{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
833
|
+
.sf-rcrow .st{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
834
|
+
.sf-kr{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:13px;margin-bottom:2px}
|
|
835
|
+
.sf-kr .obj{font-size:var(--text-base);color:var(--foreground);font-weight:600;margin-bottom:9px}
|
|
836
|
+
.sf-kr .krrow{padding:8px 0;border-top:1px solid var(--border)}
|
|
632
837
|
.sf-kr .krh{display:flex;gap:9px;align-items:baseline}
|
|
633
|
-
.sf-kr .krh .lab{font-family:var(--mono);font-size:
|
|
634
|
-
.sf-kr .krh span:last-child{font-size:
|
|
838
|
+
.sf-kr .krh .lab{font-family:var(--mono);font-size:var(--text-xs);color:var(--info);flex:none}
|
|
839
|
+
.sf-kr .krh span:last-child{font-size:var(--text-sm);color:var(--foreground)}
|
|
635
840
|
.sf-kr .lev{margin-top:5px}
|
|
636
|
-
.sf-rep .lead{font-
|
|
637
|
-
.sf-rep h3{font-size:
|
|
841
|
+
.sf-rep .lead{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:6px}
|
|
842
|
+
.sf-rep h3{font-size:var(--text-base);color:var(--foreground);font-weight:600;margin:16px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--border)}
|
|
638
843
|
.sf-rep ul{margin:0;padding-left:20px}
|
|
639
|
-
.sf-rep li{margin-bottom:5px;font-size:
|
|
844
|
+
.sf-rep li{margin-bottom:5px;font-size:var(--text-sm);color:var(--foreground);line-height:1.5}
|
|
640
845
|
|
|
641
846
|
/* honest can't-produce + loading */
|
|
642
|
-
.sf-fail{border:1px dashed var(--
|
|
643
|
-
.sf-fail .mk{width:34px;height:34px;margin:0 auto 12px;display:grid;place-items:center;border-radius:
|
|
644
|
-
.sf-fail h3{font-size:14px;color:var(--
|
|
645
|
-
.sf-fail p{font-size:
|
|
646
|
-
.sf-fail .miss{font-
|
|
647
|
-
.sf-fail code{font-family:var(--mono);color:var(--
|
|
847
|
+
.sf-fail{border:1px dashed var(--input);border-radius:var(--radius-xl);background:var(--card);padding:24px;text-align:center}
|
|
848
|
+
.sf-fail .mk{width:34px;height:34px;margin:0 auto 12px;display:grid;place-items:center;border-radius:var(--radius-lg);border:1px solid var(--input);color:var(--muted-foreground);font-size:16px}
|
|
849
|
+
.sf-fail h3{font-size:14px;color:var(--foreground);margin-bottom:6px}
|
|
850
|
+
.sf-fail p{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6;max-width:48ch;margin:0 auto 5px}
|
|
851
|
+
.sf-fail .miss{font-size:var(--text-xs);color:var(--warning)}
|
|
852
|
+
.sf-fail code{font-family:var(--mono);color:var(--brand);background:var(--secondary);padding:1px 6px;border-radius:var(--radius-sm)}
|
|
648
853
|
.sf-skel{display:flex;flex-direction:column;gap:11px}
|
|
649
|
-
.sf-skel i{height:50px;border-radius:
|
|
854
|
+
.sf-skel i{height:50px;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--card),var(--accent),var(--card));background-size:200% 100%;animation:sfsh 1.3s infinite}
|
|
650
855
|
@keyframes sfsh{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
|
651
856
|
@media (prefers-reduced-motion:reduce){.sf-skel i{animation:none;opacity:.7}}
|
|
652
857
|
|
|
653
858
|
/* ── the scheduled lens (a persistent third library lens, in the library pane) ── */
|
|
654
|
-
.sc-load{padding:14px;color:var(--
|
|
655
|
-
.sc-wrap{--plan:var(--
|
|
656
|
-
.sc-sum{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:
|
|
657
|
-
.sc-sum .dot{width:7px;height:7px;border-radius:50%;background:var(--
|
|
658
|
-
.sc-sum.warn .dot{background:var(--
|
|
659
|
-
.sc-sum .t{font-size:
|
|
660
|
-
.sc-
|
|
859
|
+
.sc-load{padding:14px;color:var(--muted-foreground);font-size:var(--text-xs)}
|
|
860
|
+
.sc-wrap{--plan:var(--brand);padding:8px 10px 12px}
|
|
861
|
+
.sc-sum{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--border);margin-bottom:10px}
|
|
862
|
+
.sc-sum .dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none;box-shadow:0 0 0 4px var(--info-wash)}
|
|
863
|
+
.sc-sum.warn .dot{background:var(--warning);box-shadow:0 0 0 4px var(--warning-wash)}
|
|
864
|
+
.sc-sum .t{font-size:var(--text-sm);color:var(--foreground);min-width:0}
|
|
865
|
+
.sc-sum .t b{color:var(--foreground)}
|
|
866
|
+
.sc-new{margin-left:auto;min-height:30px;padding:0 11px;border:1px solid var(--brand);border-radius:var(--radius-md);background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs);flex:none}
|
|
661
867
|
.sc-list{display:flex;flex-direction:column;gap:7px}
|
|
662
|
-
.sc-row{border:1px solid var(--border
|
|
868
|
+
.sc-row{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}
|
|
663
869
|
.sc-main{display:grid;grid-template-columns:3px auto 1fr auto;gap:10px;align-items:center;padding:10px 11px}
|
|
664
|
-
.sc-rail{width:3px;align-self:stretch;border-radius:
|
|
665
|
-
.sc-row[data-health="armed"] .sc-rail{background:var(--
|
|
666
|
-
.sc-row[data-health="running"] .sc-rail{background:var(--
|
|
667
|
-
.sc-row[data-health="failed"] .sc-rail{background:var(--
|
|
870
|
+
.sc-rail{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--input)}
|
|
871
|
+
.sc-row[data-health="armed"] .sc-rail{background:var(--brand)}
|
|
872
|
+
.sc-row[data-health="running"] .sc-rail{background:var(--success);animation:pulse 1.6s infinite}
|
|
873
|
+
.sc-row[data-health="failed"] .sc-rail{background:var(--destructive)}
|
|
668
874
|
@media (prefers-reduced-motion:reduce){.sc-row[data-health="running"] .sc-rail{animation:none}}
|
|
669
|
-
.sc-tog{position:relative;width:34px;height:20px;border-radius:99px;background:var(--
|
|
670
|
-
.sc-tog[aria-checked="true"]{background:var(--
|
|
671
|
-
.sc-tog .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--
|
|
672
|
-
.sc-tog[aria-checked="true"] .knob{transform:translateX(14px);background:var(--
|
|
875
|
+
.sc-tog{position:relative;width:34px;height:20px;border-radius:99px;background:var(--accent);border:1px solid var(--input);flex:none;cursor:pointer;transition:background .15s}
|
|
876
|
+
.sc-tog[aria-checked="true"]{background:var(--brand-wash);border-color:var(--brand)}
|
|
877
|
+
.sc-tog .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted-foreground);transition:transform .15s,background .15s}
|
|
878
|
+
.sc-tog[aria-checked="true"] .knob{transform:translateX(14px);background:var(--brand)}
|
|
673
879
|
@media (prefers-reduced-motion:reduce){.sc-tog,.sc-tog .knob{transition:none}}
|
|
674
880
|
.sc-id{min-width:0}
|
|
675
|
-
.sc-id .nm{font-family:var(--mono);font-size:
|
|
676
|
-
.sc-id .nm .g{color:var(--
|
|
881
|
+
.sc-id .nm{font-family:var(--mono);font-size:var(--text-sm);color:var(--foreground);display:flex;align-items:center;gap:6px;overflow:hidden}
|
|
882
|
+
.sc-id .nm .g{color:var(--muted-foreground);font-size:var(--text-2xs);flex:none}
|
|
677
883
|
.sc-id .nm .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
678
|
-
.sc-id .nm .skill{font-size:
|
|
679
|
-
.sc-id .cad{font-family:var(--mono);font-size:
|
|
680
|
-
.sc-run{text-align:right;flex:none;font-
|
|
681
|
-
.sc-run .next{color:var(--
|
|
884
|
+
.sc-id .nm .skill{font-size:var(--text-2xs);color:var(--purple);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 5px;flex:none}
|
|
885
|
+
.sc-id .cad{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
886
|
+
.sc-run{text-align:right;flex:none;font-size:var(--text-xs)}
|
|
887
|
+
.sc-run .next{color:var(--brand)}
|
|
888
|
+
.sc-run .fail{color:var(--destructive)}
|
|
889
|
+
.sc-run .off{color:var(--muted-foreground)}
|
|
682
890
|
.sc-more{display:flex;gap:6px;padding:0 11px 10px 24px}
|
|
683
|
-
.sc-more button{min-height:30px;padding:0 9px;border:1px solid var(--border);border-radius:
|
|
684
|
-
.sc-more .rn{border-color:var(--
|
|
685
|
-
.sc-more button:hover{border-color:var(--
|
|
686
|
-
.sc-more .rn:hover{background:var(--
|
|
891
|
+
.sc-more button{min-height:30px;padding:0 9px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
892
|
+
.sc-more .rn{border-color:var(--brand);color:var(--brand)}
|
|
893
|
+
.sc-more button:hover{border-color:var(--input);color:var(--foreground)}
|
|
894
|
+
.sc-more .rn:hover{background:var(--brand-wash)}
|
|
687
895
|
.sc-empty{text-align:center;padding:22px 14px}
|
|
688
|
-
.sc-empty .mk{width:30px;height:30px;margin:0 auto 10px;display:grid;place-items:center;border-radius:
|
|
689
|
-
.sc-empty p{font-size:
|
|
690
|
-
.sc-note{font-family:var(--mono);font-size:
|
|
896
|
+
.sc-empty .mk{width:30px;height:30px;margin:0 auto 10px;display:grid;place-items:center;border-radius:var(--radius-md);border:1px dashed var(--input);color:var(--muted-foreground);font-size:14px}
|
|
897
|
+
.sc-empty p{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.55;max-width:32ch;margin:0 auto 11px}
|
|
898
|
+
.sc-note{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);line-height:1.6;border-top:1px solid var(--border);margin-top:11px;padding-top:10px}
|
|
691
899
|
.sc-note b{color:var(--purple)}
|
|
692
900
|
/* create form */
|
|
693
|
-
.sc-form{border:1px solid var(--
|
|
694
|
-
.sc-form label{font-
|
|
695
|
-
.sc-form input,.sc-form select{width:100%;min-height:34px;padding:0 9px;border:1px solid var(--
|
|
696
|
-
.sc-form input:focus,.sc-form select:focus{border-color:var(--
|
|
901
|
+
.sc-form{border:1px solid var(--brand);border-radius:var(--radius-lg);background:var(--muted);padding:12px;display:grid;gap:9px;margin:0 0 10px}
|
|
902
|
+
.sc-form label{font-size:var(--text-2xs);color:var(--muted-foreground);display:block;margin-bottom:4px}
|
|
903
|
+
.sc-form input,.sc-form select{width:100%;min-height:34px;padding:0 9px;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs);outline:none}
|
|
904
|
+
.sc-form input:focus,.sc-form select:focus{border-color:var(--brand)}
|
|
697
905
|
.sc-f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
|
698
|
-
.sc-seg{display:flex;border:1px solid var(--border);border-radius:
|
|
699
|
-
.sc-seg button{flex:1;min-height:32px;background:var(--
|
|
906
|
+
.sc-seg{display:flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
|
|
907
|
+
.sc-seg button{flex:1;min-height:32px;background:var(--secondary);color:var(--muted-foreground);font-family:var(--mono);font-size:var(--text-2xs)}
|
|
700
908
|
.sc-seg button+button{border-left:1px solid var(--border)}
|
|
701
|
-
.sc-seg button[aria-pressed="true"]{background:var(--
|
|
702
|
-
.sc-hint{font-
|
|
909
|
+
.sc-seg button[aria-pressed="true"]{background:var(--accent);color:var(--brand)}
|
|
910
|
+
.sc-hint{font-size:var(--text-2xs);color:var(--muted-foreground);line-height:1.5}
|
|
911
|
+
.sc-hint b{color:var(--success)}
|
|
703
912
|
.sc-frow{display:flex;gap:8px}
|
|
704
|
-
.sc-form .save{min-height:36px;padding:0 13px;border:1px solid var(--
|
|
705
|
-
.sc-form .cancel{min-height:36px;padding:0 11px;border:1px solid var(--border);border-radius:
|
|
913
|
+
.sc-form .save{min-height:36px;padding:0 13px;border:1px solid var(--brand);border-radius:var(--radius-md);background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs)}
|
|
914
|
+
.sc-form .cancel{min-height:36px;padding:0 11px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);color:var(--muted-foreground);font-family:var(--mono);font-size:var(--text-xs)}
|
|
706
915
|
/* New Skill flow — the GUI that replaces editing server code (workspace-skill-authoring) */
|
|
707
916
|
.sc-acts{margin-left:auto;display:flex;gap:6px;flex:none}
|
|
708
|
-
.sc-new.ghost{border-color:var(--
|
|
917
|
+
.sc-new.ghost{border-color:var(--input);background:var(--secondary);color:var(--muted-foreground)}
|
|
709
918
|
.sc-new.ghost:hover{border-color:var(--purple);color:var(--purple)}
|
|
710
|
-
.sc-form textarea{width:100%;min-height:34px;padding:7px 9px;border:1px solid var(--
|
|
711
|
-
.sc-form textarea:focus{border-color:var(--
|
|
919
|
+
.sc-form textarea{width:100%;min-height:34px;padding:7px 9px;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs);outline:none;resize:vertical;line-height:1.5}
|
|
920
|
+
.sc-form textarea:focus{border-color:var(--brand)}
|
|
712
921
|
.sk-form{border-color:var(--purple)}
|
|
713
|
-
.sk-head{font-family:var(--mono);font-size:
|
|
714
|
-
.sk-head .sk-sub{font-size:
|
|
715
|
-
.sc-ai{min-height:36px;padding:0 11px;border:1px solid var(--purple);border-radius:
|
|
716
|
-
.sc-ai:hover{background:var(--
|
|
717
|
-
.needs.report{border-top-color:var(--
|
|
718
|
-
.needs.report .k{color:var(--
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
border:1px solid var(--border);border-radius:4px;padding:0 4px;vertical-align:middle}
|
|
922
|
+
.sk-head{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
|
|
923
|
+
.sk-head .sk-sub{font-size:var(--text-2xs);letter-spacing:.04em;color:var(--muted-foreground);text-transform:none}
|
|
924
|
+
.sc-ai{min-height:36px;padding:0 11px;border:1px solid var(--purple);border-radius:var(--radius-md);background:var(--accent);color:var(--purple);font-family:var(--mono);font-size:var(--text-xs)}
|
|
925
|
+
.sc-ai:hover{background:var(--brand-wash)}
|
|
926
|
+
.needs.report{border-top-color:var(--info);background:var(--info-wash)}
|
|
927
|
+
.needs.report .k{color:var(--info)}/* a session that fired from a schedule carries a small badge */
|
|
928
|
+
.sess .schtag{margin-left:6px;font-size:var(--text-2xs);color:var(--purple);
|
|
929
|
+
border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 4px;vertical-align:middle}
|
|
722
930
|
|
|
723
931
|
/* Narrow: the rail floats over the terminal instead of squeezing it below a usable width. */
|
|
724
932
|
@media (max-width:1100px){
|
|
@@ -728,42 +936,41 @@ details.tree>summary:hover{color:var(--text-2)}
|
|
|
728
936
|
.body[data-float="on"]>.rail{position:absolute;top:0;right:0;bottom:0;left:auto;
|
|
729
937
|
width:min(420px,86vw);z-index:30;box-shadow:-18px 0 50px -30px var(--shadow)}
|
|
730
938
|
.body[data-float="on"][data-reader="left"]>.rail{right:auto;left:0;
|
|
731
|
-
box-shadow:18px 0 50px -30px var(--shadow)}
|
|
732
|
-
/* Split is forced OFF below this width by applyLayout() — two terminal groups inside what is
|
|
939
|
+
box-shadow:18px 0 50px -30px var(--shadow)}/* Split is forced OFF below this width by applyLayout() — two terminal groups inside what is
|
|
733
940
|
left of a narrow window is two unusable terminals. The layout menu says so rather than
|
|
734
941
|
silently ignoring the choice (R9). */
|
|
735
942
|
.lay-narrow{display:block}
|
|
736
943
|
}
|
|
737
|
-
.lay-narrow{display:none;font-
|
|
944
|
+
.lay-narrow{display:none;font-size:var(--text-xs);color:var(--warning);
|
|
738
945
|
line-height:1.5;margin:6px 5px 0}
|
|
739
946
|
|
|
740
947
|
/* history lens — episodic recall over this workspace's own session scrollback */
|
|
741
|
-
.hi-hint{padding:14px;color:var(--
|
|
948
|
+
.hi-hint{padding:14px;color:var(--muted-foreground);font-size:var(--text-xs);line-height:1.6}
|
|
742
949
|
.hi-list{display:flex;flex-direction:column;gap:7px;padding:8px 10px 12px}
|
|
743
|
-
.hi-row{border:1px solid var(--border
|
|
950
|
+
.hi-row{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:9px 11px}
|
|
744
951
|
.hi-head{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
|
|
745
|
-
.hi-head b{font-size:
|
|
746
|
-
.hi-meta{font-
|
|
747
|
-
.hi-ctx{font-family:var(--mono);font-size:
|
|
748
|
-
.hi-hit{font-family:var(--mono);font-size:
|
|
952
|
+
.hi-head b{font-size:var(--text-sm);color:var(--foreground)}
|
|
953
|
+
.hi-meta{font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
954
|
+
.hi-ctx{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);white-space:pre-wrap;word-break:break-word}
|
|
955
|
+
.hi-hit{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);white-space:pre-wrap;word-break:break-word;padding:2px 0}
|
|
749
956
|
|
|
750
957
|
/* ── reader: multi-format preview + local images (workspace-reader-preview) ── */
|
|
751
|
-
.doc-src{margin:0;padding:12px 14px;font-family:var(--mono);font-size:
|
|
752
|
-
color:var(--
|
|
753
|
-
border:1px solid var(--border
|
|
754
|
-
.doc-body img.doc-img{max-width:100%;height:auto;border:1px solid var(--border
|
|
958
|
+
.doc-src{margin:0;padding:12px 14px;font-family:var(--mono);font-size:var(--text-sm);line-height:1.6;
|
|
959
|
+
color:var(--foreground);white-space:pre-wrap;word-break:break-word;background:var(--card);
|
|
960
|
+
border:1px solid var(--border);border-radius:var(--radius-md);overflow-x:auto}
|
|
961
|
+
.doc-body img.doc-img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-md);
|
|
755
962
|
background:var(--card);display:block;margin:10px 0}
|
|
756
963
|
.img-view{padding:6px 2px}
|
|
757
964
|
.img-view img.doc-img{margin:0}
|
|
758
965
|
.html-view{display:flex;flex-direction:column;gap:8px}
|
|
759
966
|
.html-bar{display:flex;gap:6px;align-items:center}
|
|
760
|
-
.html-tab{font-family:var(--mono);font-size:
|
|
761
|
-
border:1px solid var(--border);background:var(--
|
|
762
|
-
.html-tab:hover{border-color:var(--
|
|
763
|
-
.html-tab.on{border-color:var(--
|
|
764
|
-
.html-tab .sbx{font-size:
|
|
967
|
+
.html-tab{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.02em;padding:3px 9px;
|
|
968
|
+
border:1px solid var(--border);background:var(--secondary);color:var(--muted-foreground);border-radius:var(--radius-md);cursor:pointer}
|
|
969
|
+
.html-tab:hover{border-color:var(--input);color:var(--foreground)}
|
|
970
|
+
.html-tab.on{border-color:var(--brand);color:var(--brand);background:var(--accent)}
|
|
971
|
+
.html-tab .sbx{font-size:var(--text-2xs);opacity:.7}
|
|
765
972
|
.html-pane{min-height:0}
|
|
766
|
-
.html-frame{width:100%;min-height:60vh;border:1px solid var(--border
|
|
973
|
+
.html-frame{width:100%;min-height:60vh;border:1px solid var(--border);border-radius:var(--radius-md);
|
|
767
974
|
background:white} /* a standalone HTML doc assumes a light page; keyword, not hex (token-hygiene) */
|
|
768
975
|
/* ── mobile (≤760px): one column at a time + a bottom switcher; the terminal is the priority pane.
|
|
769
976
|
The 3-column desktop layout above is untouched at wide widths — everything here is inside the
|
|
@@ -798,128 +1005,224 @@ details.tree>summary:hover{color:var(--text-2)}
|
|
|
798
1005
|
/* the mobile menu: a terminal control bar (terminal view only) over the pane switcher */
|
|
799
1006
|
/* min-width:0 lets this grid item shrink below its content min-size, so the control bar's
|
|
800
1007
|
fixed-width buttons scroll inside it instead of widening the whole page */
|
|
801
|
-
.mobmenu{display:block;min-width:0;background:var(--
|
|
1008
|
+
.mobmenu{display:block;min-width:0;background:var(--muted);border-top:1px solid var(--border);
|
|
802
1009
|
padding-bottom:env(safe-area-inset-bottom)}
|
|
803
1010
|
.ctrlbar{display:none;min-width:0;gap:5px;padding:6px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
|
|
804
|
-
border-bottom:1px solid var(--border
|
|
1011
|
+
border-bottom:1px solid var(--border)}
|
|
805
1012
|
.mobmenu[data-view="terminal"] .ctrlbar{display:flex}
|
|
806
1013
|
.ctrlbar button{flex:1 0 auto;min-width:44px;min-height:44px;display:grid;place-items:center;
|
|
807
|
-
border:1px solid var(--border);border-radius:
|
|
1014
|
+
border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);color:var(--foreground);
|
|
808
1015
|
font-family:var(--mono);font-size:14px}
|
|
809
|
-
.ctrlbar button:active{background:var(--
|
|
810
|
-
.ctrlbar button[aria-pressed="true"]{border-color:var(--
|
|
811
|
-
.ctrlbar .lbl{font-size:
|
|
1016
|
+
.ctrlbar button:active{background:var(--accent)}
|
|
1017
|
+
.ctrlbar button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
|
|
1018
|
+
.ctrlbar .lbl{font-size:var(--text-xs);letter-spacing:.04em}
|
|
812
1019
|
.mobtabs{display:flex}
|
|
813
1020
|
.mobtabs button{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
814
|
-
gap:2px;font-family:var(--mono);font-size:
|
|
815
|
-
border-top:2px solid transparent;background:var(--
|
|
816
|
-
.mobtabs button+button{border-left:1px solid var(--border
|
|
817
|
-
.mobtabs button[aria-selected="true"]{color:var(--
|
|
1021
|
+
gap:2px;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--muted-foreground);
|
|
1022
|
+
border-top:2px solid transparent;background:var(--muted)}
|
|
1023
|
+
.mobtabs button+button{border-left:1px solid var(--border)}
|
|
1024
|
+
.mobtabs button[aria-selected="true"]{color:var(--brand);border-top-color:var(--brand);background:var(--accent)}
|
|
818
1025
|
@media (prefers-reduced-motion:reduce){.mobtabs button,.ctrlbar button{transition:none}}
|
|
819
1026
|
|
|
820
1027
|
/* the header must fit a phone: drop the desktop "workspace" tag and let the status text ellipsize */
|
|
821
1028
|
.bar{gap:7px;padding:0 10px}
|
|
822
1029
|
.bar .sub{display:none}
|
|
823
1030
|
.bar .conn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
|
|
1031
|
+
/* the strip's right half is a list of KEYBOARD hints (⌘K, F2, Esc) — on a phone it advertises
|
|
1032
|
+
keys that are not there, so the connection state gets the whole strip instead */
|
|
1033
|
+
.strip .right{display:none}
|
|
824
1034
|
}
|
|
825
1035
|
|
|
826
1036
|
/* ── console surfaces (D64 Track B): needs-you · radar · metrics over file-mode state ────────── */
|
|
827
1037
|
/* Honesty by construction: error is unmistakably RED (--bad), empty is CALM (--teal), the loading
|
|
828
1038
|
skeleton (.sf-skel, reused) is neither. A broken read can only ever draw .cs-error. */
|
|
829
|
-
.cs-error{border:1px solid var(--
|
|
1039
|
+
.cs-error{border:1px solid var(--destructive);border-radius:var(--radius-xl);padding:16px 18px;
|
|
830
1040
|
background:radial-gradient(120% 140% at 0 0,rgba(242,101,95,.14),transparent 60%),var(--card)}
|
|
831
1041
|
.cs-err-head{display:flex;align-items:center;gap:9px}
|
|
832
|
-
.cs-err-head .mk{width:22px;height:22px;display:grid;place-items:center;border-radius:
|
|
833
|
-
background:var(--
|
|
834
|
-
.cs-err-head b{font-size:
|
|
835
|
-
.cs-err-why{margin-top:8px;font-size:
|
|
836
|
-
.cs-err-note{margin-top:7px;font-family:var(--mono);font-size:
|
|
837
|
-
.cs-empty{border:1px solid var(--
|
|
838
|
-
background:radial-gradient(120% 140% at 0 0,var(--
|
|
839
|
-
.cs-empty>.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--
|
|
840
|
-
box-shadow:0 0 0 4px var(--
|
|
841
|
-
.cs-empty b{font-size:
|
|
842
|
-
.cs-empty p{margin-top:6px;font-size:
|
|
843
|
-
.cs-empty-note{font-family:var(--mono);font-size:
|
|
844
|
-
.cs-src{font-
|
|
845
|
-
.sf-chip.src::before{background:var(--
|
|
1042
|
+
.cs-err-head .mk{width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-md);
|
|
1043
|
+
background:var(--destructive);color:white;font-size:var(--text-sm);flex:none}
|
|
1044
|
+
.cs-err-head b{font-size:var(--text-base);color:var(--destructive)}
|
|
1045
|
+
.cs-err-why{margin-top:8px;font-size:var(--text-sm);color:var(--foreground);line-height:1.5}
|
|
1046
|
+
.cs-err-note{margin-top:7px;font-family:var(--mono);font-size:var(--text-xs);color:var(--destructive);opacity:.9;line-height:1.5}
|
|
1047
|
+
.cs-empty{border:1px solid var(--info);border-radius:var(--radius-xl);padding:16px 18px;
|
|
1048
|
+
background:radial-gradient(120% 140% at 0 0,var(--info-wash),transparent 60%),var(--card)}
|
|
1049
|
+
.cs-empty>.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--info);
|
|
1050
|
+
box-shadow:0 0 0 4px var(--info-wash);margin-right:8px;vertical-align:middle}
|
|
1051
|
+
.cs-empty b{font-size:var(--text-base);color:var(--foreground)}
|
|
1052
|
+
.cs-empty p{margin-top:6px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
|
|
1053
|
+
.cs-empty-note{font-family:var(--mono);font-size:var(--text-xs);color:var(--info);opacity:.85}
|
|
1054
|
+
.cs-src{font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
1055
|
+
.sf-chip.src::before{background:var(--info)}
|
|
846
1056
|
/* needs-you */
|
|
847
|
-
.cs-needs{border:1px solid var(--
|
|
848
|
-
background:radial-gradient(120% 140% at 0 0,var(--
|
|
1057
|
+
.cs-needs{border:1px solid var(--warning);border-radius:var(--radius-xl);overflow:hidden;
|
|
1058
|
+
background:radial-gradient(120% 140% at 0 0,var(--warning-wash),transparent 60%),var(--card)}
|
|
849
1059
|
.cs-needs .cs-h,.cs-wm .cs-h,.cs-per .cs-h{display:flex;align-items:center;gap:9px;padding:12px 15px 9px}
|
|
850
|
-
.cs-needs .cs-h .dot{width:8px;height:8px;border-radius:50%;background:var(--
|
|
851
|
-
.cs-h b{font-size:
|
|
852
|
-
.cs-h .src{font-
|
|
853
|
-
.cs-need{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border
|
|
854
|
-
.cs-need .ph{width:3px;align-self:stretch;border-radius:
|
|
855
|
-
.cs-need[data-kind="accept"] .ph{background:var(--
|
|
1060
|
+
.cs-needs .cs-h .dot{width:8px;height:8px;border-radius:50%;background:var(--warning);flex:none;box-shadow:0 0 0 4px var(--warning-wash)}
|
|
1061
|
+
.cs-h b{font-size:var(--text-base);color:var(--foreground)}
|
|
1062
|
+
.cs-h .src{font-size:var(--text-xs);color:var(--muted-foreground);margin-left:auto}
|
|
1063
|
+
.cs-need{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border)}
|
|
1064
|
+
.cs-need .ph{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--warning);flex:none}
|
|
1065
|
+
.cs-need[data-kind="accept"] .ph{background:var(--brand)}
|
|
856
1066
|
.cs-need .txt{flex:1;min-width:0}
|
|
857
|
-
.cs-need .t{font-size:
|
|
858
|
-
.cs-need .m{font-family:var(--mono);font-size:
|
|
1067
|
+
.cs-need .t{font-size:var(--text-sm);color:var(--foreground);line-height:1.45}
|
|
1068
|
+
.cs-need .m{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:3px}
|
|
859
1069
|
/* radar + metrics cards */
|
|
860
1070
|
.cs-cards{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
|
|
861
|
-
.cs-card{flex:1;min-width:150px;border:1px solid var(--border);border-radius:
|
|
862
|
-
.cs-card.warnedge{border-color:var(--
|
|
863
|
-
.cs-card h4{font-size:
|
|
864
|
-
.cs-big{font-size:26px;font-weight:600;color:var(--
|
|
865
|
-
.cs-big .u{font-size:
|
|
866
|
-
.cs-sub{margin-top:7px;font-size:
|
|
867
|
-
.cs-caveat{margin-top:8px;font-size:
|
|
868
|
-
.cs-wm{margin-top:12px;border:1px solid var(--border);border-radius:
|
|
1071
|
+
.cs-card{flex:1;min-width:150px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:13px 15px}
|
|
1072
|
+
.cs-card.warnedge{border-color:var(--warning)}
|
|
1073
|
+
.cs-card h4{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:7px}
|
|
1074
|
+
.cs-big{font-size:26px;font-weight:600;color:var(--foreground);line-height:1;display:flex;align-items:baseline;gap:6px}
|
|
1075
|
+
.cs-big .u{font-size:var(--text-xs);font-weight:400;color:var(--muted-foreground);font-family:var(--mono)}
|
|
1076
|
+
.cs-sub{margin-top:7px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
|
|
1077
|
+
.cs-caveat{margin-top:8px;font-size:var(--text-xs);color:var(--warning);line-height:1.5;border-top:1px solid var(--border);padding-top:7px}
|
|
1078
|
+
.cs-wm{margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
|
|
869
1079
|
.cs-wm .cs-h .dot{width:8px;height:8px;border-radius:50%;flex:none}
|
|
870
|
-
.cs-wm .cs-h .dot.ok{background:var(--
|
|
871
|
-
.cs-wm .cs-h .dot.warn{background:var(--
|
|
872
|
-
.cs-wmrow{display:flex;align-items:center;gap:10px;padding:8px 15px;border-top:1px solid var(--border
|
|
873
|
-
.cs-wmrow .rag{width:9px;height:9px;border-radius:50%;flex:none;background:var(--
|
|
874
|
-
.cs-wmrow .rag.rag-green{background:var(--
|
|
875
|
-
.cs-wmrow .rag.rag-amber{background:var(--
|
|
876
|
-
.cs-wmrow .rag.rag-red{background:var(--
|
|
877
|
-
.cs-wmrow .nm{flex:1;min-width:0;font-size:
|
|
878
|
-
.cs-wmrow .nm .ti{color:var(--
|
|
879
|
-
.cs-wmrow .st{font-family:var(--mono);font-size:
|
|
880
|
-
.cs-none,.cs-per .cs-none{padding:10px 15px;font-size:
|
|
881
|
-
.cs-per{margin-top:12px;border:1px solid var(--border);border-radius:
|
|
882
|
-
.cs-perrow{display:flex;align-items:center;gap:10px;padding:6px 15px;border-top:1px solid var(--border
|
|
883
|
-
.cs-perrow .nm{width:40%;min-width:0;font-size:
|
|
884
|
-
.cs-perrow .bar{flex:1;height:6px;border-radius:
|
|
885
|
-
.cs-perrow .bar i{display:block;height:100%;background:var(--
|
|
886
|
-
.cs-perrow .v{font-family:var(--mono);font-size:
|
|
1080
|
+
.cs-wm .cs-h .dot.ok{background:var(--success);box-shadow:0 0 0 4px var(--info-wash)}
|
|
1081
|
+
.cs-wm .cs-h .dot.warn{background:var(--warning);box-shadow:0 0 0 4px var(--warning-wash)}
|
|
1082
|
+
.cs-wmrow{display:flex;align-items:center;gap:10px;padding:8px 15px;border-top:1px solid var(--border)}
|
|
1083
|
+
.cs-wmrow .rag{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted-foreground)}
|
|
1084
|
+
.cs-wmrow .rag.rag-green{background:var(--success)}
|
|
1085
|
+
.cs-wmrow .rag.rag-amber{background:var(--warning)}
|
|
1086
|
+
.cs-wmrow .rag.rag-red{background:var(--destructive)}
|
|
1087
|
+
.cs-wmrow .nm{flex:1;min-width:0;font-size:var(--text-sm);color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
1088
|
+
.cs-wmrow .nm .ti{color:var(--muted-foreground);margin-left:7px;font-size:var(--text-xs)}
|
|
1089
|
+
.cs-wmrow .st{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);flex:none}
|
|
1090
|
+
.cs-none,.cs-per .cs-none{padding:10px 15px;font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
1091
|
+
.cs-per{margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
|
|
1092
|
+
.cs-perrow{display:flex;align-items:center;gap:10px;padding:6px 15px;border-top:1px solid var(--border)}
|
|
1093
|
+
.cs-perrow .nm{width:40%;min-width:0;font-size:var(--text-sm);color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
1094
|
+
.cs-perrow .bar{flex:1;height:6px;border-radius:var(--radius-sm);background:var(--secondary);overflow:hidden}
|
|
1095
|
+
.cs-perrow .bar i{display:block;height:100%;background:var(--brand);border-radius:var(--radius-sm)}
|
|
1096
|
+
.cs-perrow .v{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);flex:none;width:28px;text-align:right}
|
|
1097
|
+
|
|
1098
|
+
/* ── workflow ladder (workflow-enforcement) ──────────────────────────────────────────────────
|
|
1099
|
+
Where each in-flight initiative is, what is next, and what is blocking. Status is carried by a
|
|
1100
|
+
glyph AND a colour, never by colour alone — the whole surface has to survive being read by
|
|
1101
|
+
someone who cannot separate the red from the green, and `blocked` is the state that must never
|
|
1102
|
+
be missed. `unknown` is styled as its own thing rather than a dim `done`, because collapsing the
|
|
1103
|
+
two is precisely the false green this surface exists to prevent. */
|
|
1104
|
+
.cs-workflow>.cs-h{display:flex;align-items:center;gap:9px;padding:0 0 10px}
|
|
1105
|
+
.cs-workflow>.cs-h .dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;box-shadow:0 0 0 4px var(--info-wash)}
|
|
1106
|
+
.cs-workflow>.cs-h .dot.warn{background:var(--warning);box-shadow:0 0 0 4px var(--warning-wash)}
|
|
1107
|
+
.wf-degraded{border:1px solid var(--warning);border-radius:var(--radius-lg);background:var(--warning-wash);
|
|
1108
|
+
padding:10px 14px;margin-bottom:12px;font-size:var(--text-sm);color:var(--foreground);line-height:1.55}
|
|
1109
|
+
.wf-degraded b{color:var(--warning)}
|
|
1110
|
+
.wf-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);
|
|
1111
|
+
overflow:hidden;margin-bottom:12px}
|
|
1112
|
+
.wf-card[data-blocked="1"]{border-color:var(--destructive)}
|
|
1113
|
+
.wf-top{display:flex;align-items:center;gap:9px;padding:12px 15px 9px}
|
|
1114
|
+
.wf-id{font-family:var(--mono);font-size:var(--text-sm);color:var(--foreground);background:none;border:0;
|
|
1115
|
+
padding:0;cursor:pointer;text-align:left}
|
|
1116
|
+
.wf-id:hover{color:var(--brand);text-decoration:underline}
|
|
1117
|
+
.wf-lane{font-family:var(--mono);font-size:var(--text-xs);
|
|
1118
|
+
color:var(--muted-foreground);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 7px;background:var(--secondary)}
|
|
1119
|
+
.wf-here{font-family:var(--mono);font-size:var(--text-2xs);
|
|
1120
|
+
color:var(--brand);border:1px solid var(--brand);border-radius:var(--radius-sm);padding:2px 7px;
|
|
1121
|
+
background:var(--brand-wash)}
|
|
1122
|
+
.wf-more{margin-top:2px;padding:10px 15px;border:1px dashed var(--input);border-radius:var(--radius-lg);
|
|
1123
|
+
font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
|
|
1124
|
+
.wf-anchor{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-left:auto;
|
|
1125
|
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
|
|
1126
|
+
.wf-rail{display:flex;align-items:center;gap:5px;padding:0 15px 11px;flex-wrap:wrap}
|
|
1127
|
+
.wf-st{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.05em;color:var(--muted-foreground)}
|
|
1128
|
+
.wf-st.past{color:var(--muted-foreground)}
|
|
1129
|
+
.wf-st.at{color:var(--foreground);border-bottom:2px solid var(--brand);padding-bottom:1px}
|
|
1130
|
+
.wf-sep{width:12px;height:1px;background:var(--input);flex:none}
|
|
1131
|
+
.wf-steps{border-top:1px solid var(--border)}
|
|
1132
|
+
.wf-step{display:flex;align-items:baseline;gap:9px;padding:5px 15px}
|
|
1133
|
+
.wf-g{font-family:var(--mono);font-size:var(--text-xs);width:11px;flex:none;text-align:center;color:var(--muted-foreground)}
|
|
1134
|
+
.wf-step[data-st="done"] .wf-g{color:var(--success)}
|
|
1135
|
+
.wf-step[data-st="blocked"] .wf-g{color:var(--destructive)}
|
|
1136
|
+
.wf-step[data-st="unknown"] .wf-g{color:var(--warning)}
|
|
1137
|
+
.wf-k{font-family:var(--mono);font-size:var(--text-xs);width:74px;flex:none;color:var(--muted-foreground)}
|
|
1138
|
+
.wf-step[data-st="na"] .wf-k,.wf-step[data-st="pending"] .wf-k{color:var(--muted-foreground)}
|
|
1139
|
+
.wf-step[data-st="blocked"] .wf-k{color:var(--destructive)}
|
|
1140
|
+
.wf-e{flex:1;min-width:0;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
|
|
1141
|
+
.wf-step[data-st="na"] .wf-e,.wf-step[data-st="pending"] .wf-e{color:var(--muted-foreground)}
|
|
1142
|
+
.wf-rule{font-family:var(--mono);font-size:var(--text-2xs);border:1px solid var(--destructive);border-radius:var(--radius-sm);
|
|
1143
|
+
padding:1px 5px;color:var(--destructive);margin-left:5px}
|
|
1144
|
+
.wf-next{padding:0 15px 6px 109px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
|
|
1145
|
+
.wf-next[data-st="blocked"]{color:var(--warning)}
|
|
1146
|
+
.wf-do{border-top:1px solid var(--border);padding:10px 15px;font-size:var(--text-sm);color:var(--foreground);
|
|
1147
|
+
line-height:1.5;background:var(--warning-wash)}
|
|
1148
|
+
.wf-do b{font-family:var(--mono);font-size:var(--text-xs);
|
|
1149
|
+
color:var(--warning);margin-right:8px}
|
|
1150
|
+
.wf-do.ok{background:var(--info-wash)}
|
|
1151
|
+
.wf-do.ok b{color:var(--success)}
|
|
887
1152
|
|
|
888
1153
|
/* ── branch awareness (workspace-session-controls) ── */
|
|
889
|
-
|
|
890
|
-
|
|
1154
|
+
/* the branch name IS a git ref — mono. shadcn Badge `secondary`: a filled --muted chip with no
|
|
1155
|
+
border, so a long branch name sits quietly beside the product mark instead of drawing a box
|
|
1156
|
+
around itself. */
|
|
1157
|
+
.bar .branch{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
|
|
1158
|
+
padding:3px 8px;border:0;border-radius:var(--radius-sm);background:var(--muted);
|
|
891
1159
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}
|
|
892
1160
|
.bar .branch[hidden]{display:none}
|
|
893
|
-
|
|
1161
|
+
/* a dirty tree is a real signal, but it is ambient — it tints the chip, it does not outline it */
|
|
1162
|
+
.bar .branch.dirty{color:var(--warning);background:var(--warning-wash)}
|
|
1163
|
+
|
|
1164
|
+
/* worktree housekeeping — folded away until a repo actually has extra working trees */
|
|
1165
|
+
.wtbox{margin-top:8px;font-size:var(--text-xs)}
|
|
1166
|
+
.wtbox[hidden]{display:none}
|
|
1167
|
+
.wtbox>summary{cursor:pointer;color:var(--muted-foreground);padding:3px 2px;list-style:none;
|
|
1168
|
+
display:flex;align-items:center;gap:5px}
|
|
1169
|
+
.wtbox>summary::-webkit-details-marker{display:none}
|
|
1170
|
+
.wtbox>summary:hover{color:var(--foreground)}
|
|
1171
|
+
.wtrow{display:flex;align-items:baseline;gap:6px;padding:4px 2px;border-top:1px solid var(--border)}
|
|
1172
|
+
/* a worktree row names a BRANCH and a PATH — mono earns its place */
|
|
1173
|
+
.wtrow .wtb{font-family:var(--mono);color:var(--foreground);flex:1;min-width:0;overflow-wrap:anywhere}
|
|
1174
|
+
.wtrow .wtwhy{color:var(--muted-foreground);font-size:var(--text-2xs);flex-basis:100%;line-height:1.35}
|
|
1175
|
+
/* shadcn Button, `outline` variant at the small size */
|
|
1176
|
+
.wtrow button{flex:none;border:1px solid var(--input);border-radius:var(--radius-sm);background:transparent;
|
|
1177
|
+
color:var(--foreground);font-size:var(--text-2xs);padding:2px 7px;cursor:pointer;
|
|
1178
|
+
transition:border-color var(--duration-fast) var(--ease-emphasized),
|
|
1179
|
+
color var(--duration-fast) var(--ease-emphasized)}
|
|
1180
|
+
/* removing a worktree deletes a folder — the hover states that intent in the warning hue */
|
|
1181
|
+
.wtrow button:hover:not(:disabled){border-color:var(--warning);color:var(--warning)}
|
|
1182
|
+
.wtrow button:disabled{opacity:.4;cursor:not-allowed}
|
|
894
1183
|
|
|
895
1184
|
/* new-session branch picker — matches the miniform vocabulary */
|
|
896
1185
|
.brwrap{display:flex;flex-direction:column;gap:6px}
|
|
897
1186
|
.brwrap[hidden]{display:none}
|
|
898
|
-
.brwrap select{min-height:38px;padding:0 8px;border:1px solid var(--
|
|
899
|
-
background:var(--
|
|
900
|
-
.brwrap select:focus{border-color:var(--
|
|
1187
|
+
.brwrap select{min-height:38px;padding:0 8px;border:1px solid var(--input);border-radius:var(--radius-md);
|
|
1188
|
+
background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs)}
|
|
1189
|
+
.brwrap select:focus{border-color:var(--brand)}
|
|
901
1190
|
.brwrap input[hidden]{display:none}
|
|
902
|
-
.miniform .hint.warn{color:var(--
|
|
1191
|
+
.miniform .hint.warn{color:var(--warning)}
|
|
1192
|
+
.miniform .hint[hidden]{display:none}
|
|
1193
|
+
.miniform .lbl .opt{color:var(--muted-foreground);font-weight:400}
|
|
1194
|
+
/* the isolate toggle: the difference between "this session gets a branch" and "the whole repo
|
|
1195
|
+
moves" is one line, so it reads as a sentence rather than a settings row */
|
|
1196
|
+
.brwrap .chk{display:flex;align-items:flex-start;gap:7px;font-size:var(--text-xs);color:var(--foreground);
|
|
1197
|
+
line-height:1.35;cursor:pointer}
|
|
1198
|
+
.brwrap .chk[hidden]{display:none}
|
|
1199
|
+
/* accent-color paints the native checkbox — that is a FILL, so it takes --primary (the brand
|
|
1200
|
+
fill) and not --accent, which under this palette is the muted hover surface. */
|
|
1201
|
+
.brwrap .chk input{flex:none;margin:1px 0 0;accent-color:var(--primary);cursor:pointer}
|
|
903
1202
|
|
|
904
1203
|
/* ── scratchpad drawer: bottom of the terminal column, collapsible, never overlays anything ── */
|
|
905
|
-
.scratch{flex:none;border-top:1px solid var(--border
|
|
1204
|
+
.scratch{flex:none;border-top:1px solid var(--border);background:var(--sidebar);display:flex;flex-direction:column;min-height:0}
|
|
906
1205
|
.scratch-head{display:flex;align-items:center;gap:8px;padding:5px 10px;min-height:34px;
|
|
907
|
-
background:var(--
|
|
908
|
-
.scratch[data-open="true"] .scratch-head{border-bottom-color:var(--border
|
|
1206
|
+
background:var(--muted);border-bottom:1px solid transparent}
|
|
1207
|
+
.scratch[data-open="true"] .scratch-head{border-bottom-color:var(--border)}
|
|
909
1208
|
.scratch-toggle{display:inline-flex;align-items:center;gap:7px;border:0;background:none;
|
|
910
|
-
font-
|
|
911
|
-
.scratch-toggle:hover{color:var(--
|
|
912
|
-
.scratch-toggle .chev{display:inline-block;transition:transform .15s;font-size:
|
|
1209
|
+
font-size:var(--text-2xs);color:var(--muted-foreground);cursor:pointer}
|
|
1210
|
+
.scratch-toggle:hover{color:var(--foreground)}
|
|
1211
|
+
.scratch-toggle .chev{display:inline-block;transition:transform .15s;font-size:var(--text-2xs)}
|
|
913
1212
|
.scratch[data-open="true"] .scratch-toggle .chev{transform:rotate(180deg)}
|
|
914
|
-
|
|
1213
|
+
/* whose pad this is — the pad is per TAB, so the drawer names the tab it is staging for */
|
|
1214
|
+
.scratch-who{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);letter-spacing:.04em;
|
|
1215
|
+
max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
1216
|
+
.scratch-who:not(:empty)::before{content:"· "}
|
|
1217
|
+
.scratch-status{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);letter-spacing:.04em}
|
|
915
1218
|
.scratch-actions{margin-left:auto;display:flex;gap:6px}
|
|
916
|
-
.scratch-actions .mini{min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:
|
|
917
|
-
background:var(--
|
|
918
|
-
.scratch-actions .mini:hover{border-color:var(--
|
|
919
|
-
.scratch-actions .mini:disabled{color:var(--
|
|
1219
|
+
.scratch-actions .mini{min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-md);
|
|
1220
|
+
background:var(--secondary);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs);letter-spacing:0;cursor:pointer}
|
|
1221
|
+
.scratch-actions .mini:hover{border-color:var(--brand)}
|
|
1222
|
+
.scratch-actions .mini:disabled{color:var(--muted-foreground);border-color:var(--border);cursor:not-allowed;opacity:.6}
|
|
920
1223
|
.scratch-text{display:none;width:100%;box-sizing:border-box;resize:vertical;height:22vh;min-height:90px;max-height:45vh;
|
|
921
|
-
border:0;padding:10px 12px;background:var(--term-bg);color:var(--
|
|
922
|
-
font-family:var(--mono);font-size:
|
|
1224
|
+
border:0;padding:10px 12px;background:var(--term-bg);color:var(--foreground);
|
|
1225
|
+
font-family:var(--mono);font-size:var(--text-sm);line-height:1.5;outline:none}
|
|
923
1226
|
.scratch[data-open="true"] .scratch-text{display:block}
|
|
924
1227
|
|
|
925
1228
|
/* The cap's controls carry TEXT labels, not icons, so they size to content. And `hidden` has to
|
|
@@ -927,7 +1230,7 @@ details.tree>summary:hover{color:var(--text-2)}
|
|
|
927
1230
|
attribute was being set correctly and doing nothing, so every control showed at once. Only the
|
|
928
1231
|
first control takes the margin-left:auto that pushes the group right. */
|
|
929
1232
|
.cap .mini[hidden],.cap .x[hidden]{display:none}
|
|
930
|
-
.cap .docrev{width:auto;min-width:0;padding:0 9px;font-size:
|
|
1233
|
+
.cap .docrev{width:auto;min-width:0;padding:0 9px;font-size:var(--text-xs)}
|
|
931
1234
|
.cap .mini ~ .mini{margin-left:0}
|
|
932
1235
|
|
|
933
1236
|
/* ── the document editor (workspace-doc-editor) ──────────────────────────────────────────────
|
|
@@ -939,40 +1242,40 @@ details.tree>summary:hover{color:var(--text-2)}
|
|
|
939
1242
|
.ed-split[data-diff="off"]{grid-template-columns:minmax(0,1fr)}
|
|
940
1243
|
.ed-split[data-diff="off"] .ed-diff{display:none}
|
|
941
1244
|
.ed-ta{width:100%;height:100%;box-sizing:border-box;resize:none;border:0;outline:none;
|
|
942
|
-
padding:14px 16px;background:var(--
|
|
943
|
-
font-family:var(--mono);font-size:
|
|
944
|
-
.ed-diff{border-left:1px solid var(--border
|
|
945
|
-
font-family:var(--mono);font-size:
|
|
1245
|
+
padding:14px 16px;background:var(--background);color:var(--foreground);
|
|
1246
|
+
font-family:var(--mono);font-size:var(--text-sm);line-height:1.8;tab-size:2}
|
|
1247
|
+
.ed-diff{border-left:1px solid var(--border);overflow-y:auto;background:var(--sidebar);
|
|
1248
|
+
font-family:var(--mono);font-size:var(--text-xs);line-height:1.75;padding:8px 0}
|
|
946
1249
|
.ed-l{display:grid;grid-template-columns:3px 1fr;align-items:start}
|
|
947
|
-
.ed-l .g{align-self:stretch;border-radius:
|
|
948
|
-
.ed-l .t{padding:0 10px;white-space:pre-wrap;word-break:break-word;color:var(--
|
|
949
|
-
.ed-l.del .g{background:var(--
|
|
950
|
-
.ed-l.del .t{color:var(--
|
|
951
|
-
.ed-l.add .g{background:var(--
|
|
952
|
-
.ed-l.add .t{color:var(--
|
|
953
|
-
.ed-l.ctx .t{color:var(--
|
|
954
|
-
.ed-none{padding:14px 16px;font-size:
|
|
955
|
-
.ed-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--border
|
|
956
|
-
background:var(--
|
|
1250
|
+
.ed-l .g{align-self:stretch;border-radius:var(--radius-sm);background:transparent}
|
|
1251
|
+
.ed-l .t{padding:0 10px;white-space:pre-wrap;word-break:break-word;color:var(--muted-foreground)}
|
|
1252
|
+
.ed-l.del .g{background:var(--destructive)}
|
|
1253
|
+
.ed-l.del .t{color:var(--muted-foreground);text-decoration:line-through;text-decoration-color:rgba(242,101,95,.5)}
|
|
1254
|
+
.ed-l.add .g{background:var(--success)}
|
|
1255
|
+
.ed-l.add .t{color:var(--foreground)}
|
|
1256
|
+
.ed-l.ctx .t{color:var(--muted-foreground)}
|
|
1257
|
+
.ed-none{padding:14px 16px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6}
|
|
1258
|
+
.ed-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--border);
|
|
1259
|
+
background:var(--muted);font-size:var(--text-sm);color:var(--muted-foreground)}
|
|
957
1260
|
.ed-bar .n{font-family:var(--mono)}
|
|
958
|
-
.ed-bar .n b{color:var(--
|
|
959
|
-
.ed-bar .n i{color:var(--
|
|
960
|
-
.ed-bar input{flex:1;min-width:80px;border:1px solid var(--border);border-radius:
|
|
961
|
-
padding:6px 10px;background:var(--
|
|
962
|
-
font-size:
|
|
963
|
-
.ed-bar input:focus{border-color:var(--
|
|
964
|
-
.ed-bar .dirty{color:var(--
|
|
965
|
-
.ed-err{margin:0 14px 8px;padding:8px 11px;border-radius:
|
|
966
|
-
background:rgba(242,101,95,.08);font-size:
|
|
1261
|
+
.ed-bar .n b{color:var(--success);font-weight:600}
|
|
1262
|
+
.ed-bar .n i{color:var(--destructive);font-style:normal;font-weight:600}
|
|
1263
|
+
.ed-bar input{flex:1;min-width:80px;border:1px solid var(--border);border-radius:var(--radius-md);
|
|
1264
|
+
padding:6px 10px;background:var(--secondary);color:var(--foreground);font-family:var(--sans);
|
|
1265
|
+
font-size:var(--text-sm);outline:none}
|
|
1266
|
+
.ed-bar input:focus{border-color:var(--brand)}
|
|
1267
|
+
.ed-bar .dirty{color:var(--warning)}
|
|
1268
|
+
.ed-err{margin:0 14px 8px;padding:8px 11px;border-radius:var(--radius-md);border:1px solid var(--destructive);
|
|
1269
|
+
background:rgba(242,101,95,.08);font-size:var(--text-sm);line-height:1.5;color:var(--foreground)}
|
|
967
1270
|
|
|
968
1271
|
/* the change log for one document — read, not managed */
|
|
969
1272
|
.hist{padding:16px 18px;max-width:640px}
|
|
970
1273
|
.hist h3{font-size:14px;font-weight:600;margin-bottom:3px}
|
|
971
|
-
.hist .sub{font-size:
|
|
972
|
-
.hist-row{padding:11px 0;border-top:1px solid var(--border
|
|
1274
|
+
.hist .sub{font-size:var(--text-sm);color:var(--muted-foreground);margin-bottom:18px;line-height:1.6}
|
|
1275
|
+
.hist-row{padding:11px 0;border-top:1px solid var(--border)}
|
|
973
1276
|
.hist-row:first-of-type{border-top:0}
|
|
974
|
-
.hist-when{font-
|
|
975
|
-
.hist-when b{color:var(--
|
|
976
|
-
.hist-when i{color:var(--
|
|
977
|
-
.hist-note{margin-top:4px;font-size:
|
|
978
|
-
.hist-none{font-size:
|
|
1277
|
+
.hist-when{font-size:var(--text-xs);color:var(--muted-foreground)}
|
|
1278
|
+
.hist-when b{color:var(--success);font-weight:600}
|
|
1279
|
+
.hist-when i{color:var(--destructive);font-style:normal;font-weight:600}
|
|
1280
|
+
.hist-note{margin-top:4px;font-size:var(--text-sm);color:var(--foreground);line-height:1.55}
|
|
1281
|
+
.hist-none{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6}
|