@codemem/server 0.26.2 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +92 -8
- package/dist/index.js.map +1 -1
- package/dist/routes/sync.d.ts.map +1 -1
- package/package.json +2 -2
- package/static/app.js +13942 -11319
- package/static/favicon.svg +4 -14
- package/static/index.html +931 -367
package/static/index.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
|
|
8
8
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
10
|
-
<link href="https://fonts.googleapis.com/css2?family=
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
11
11
|
<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
|
|
12
12
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
13
13
|
<script>
|
|
@@ -23,70 +23,77 @@
|
|
|
23
23
|
</script>
|
|
24
24
|
<style>
|
|
25
25
|
/* ── Design Tokens ─────────────────────────────────────── */
|
|
26
|
+
/* Dark-first: :root carries the dark palette. [data-theme="light"]
|
|
27
|
+
overrides for the light variant. Values come from the codemem
|
|
28
|
+
design handoff (tokens/colors_and_type.css). */
|
|
26
29
|
|
|
27
30
|
:root {
|
|
28
|
-
/* Surface */
|
|
29
|
-
--surface-0: #
|
|
30
|
-
--surface-1: #
|
|
31
|
-
--surface-2: #
|
|
32
|
-
--surface-3: #
|
|
33
|
-
|
|
34
|
-
/* Text —
|
|
35
|
-
--text-primary:
|
|
36
|
-
--text-secondary: #
|
|
37
|
-
--text-tertiary:
|
|
38
|
-
--text-inverse:
|
|
39
|
-
|
|
40
|
-
/*
|
|
41
|
-
--accent:
|
|
42
|
-
--accent-hover:
|
|
43
|
-
--accent-subtle:
|
|
44
|
-
--accent-
|
|
45
|
-
--accent-warm
|
|
46
|
-
--accent-
|
|
47
|
-
--accent-cool
|
|
31
|
+
/* Surface — deep ink */
|
|
32
|
+
--surface-0: #0b1016;
|
|
33
|
+
--surface-1: #0f1720;
|
|
34
|
+
--surface-2: #111c27;
|
|
35
|
+
--surface-3: #172332;
|
|
36
|
+
|
|
37
|
+
/* Text — cool blue-white, never pure */
|
|
38
|
+
--text-primary: #e7f0f7;
|
|
39
|
+
--text-secondary: #b7c5d3;
|
|
40
|
+
--text-tertiary: #8493a3;
|
|
41
|
+
--text-inverse: #0b1016;
|
|
42
|
+
|
|
43
|
+
/* Accents */
|
|
44
|
+
--accent: #7ef0c2;
|
|
45
|
+
--accent-hover: #9eff87;
|
|
46
|
+
--accent-subtle: rgba(126, 240, 194, 0.10);
|
|
47
|
+
--accent-strong: rgba(126, 240, 194, 0.28);
|
|
48
|
+
--accent-warm: #ffb454;
|
|
49
|
+
--accent-warm-subtle: rgba(255, 180, 84, 0.14);
|
|
50
|
+
--accent-cool: #86a9ff;
|
|
51
|
+
--accent-cool-subtle: rgba(134, 169, 255, 0.14);
|
|
52
|
+
--accent-violet: #c79bff;
|
|
53
|
+
--accent-violet-subtle: rgba(199, 155, 255, 0.14);
|
|
54
|
+
--accent-steel: #4dd4b4;
|
|
55
|
+
--accent-steel-subtle: rgba(77, 212, 180, 0.14);
|
|
56
|
+
--accent-ochre: #e2c07e;
|
|
57
|
+
--accent-ochre-subtle: rgba(226, 192, 126, 0.14);
|
|
58
|
+
--accent-neutral: #9ea7b7;
|
|
59
|
+
--accent-neutral-subtle: rgba(158, 167, 183, 0.14);
|
|
48
60
|
|
|
49
61
|
/* Status */
|
|
50
|
-
--status-healthy:
|
|
51
|
-
--status-degraded:
|
|
52
|
-
--status-attention: #
|
|
53
|
-
|
|
54
|
-
/*
|
|
55
|
-
--border:
|
|
56
|
-
--border-
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
--shadow-
|
|
60
|
-
--shadow-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
62
|
+
--status-healthy: #7ef0c2;
|
|
63
|
+
--status-degraded: #ffb454;
|
|
64
|
+
--status-attention: #ff7a50;
|
|
65
|
+
|
|
66
|
+
/* Chrome */
|
|
67
|
+
--border: rgba(126, 240, 194, 0.12);
|
|
68
|
+
--border-strong: rgba(126, 240, 194, 0.28);
|
|
69
|
+
--border-hover: rgba(126, 240, 194, 0.22);
|
|
70
|
+
--focus-ring: rgba(126, 240, 194, 0.35);
|
|
71
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
72
|
+
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
|
|
73
|
+
--shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.45);
|
|
74
|
+
|
|
75
|
+
/* Body background */
|
|
76
|
+
--grad-1: rgba(126, 240, 194, 0.08);
|
|
77
|
+
--grad-2: rgba(86, 145, 255, 0.08);
|
|
78
|
+
--grad-3: rgba(126, 240, 194, 0.04);
|
|
79
|
+
--body-start: #0b1016;
|
|
80
|
+
--body-mid: #0d131c;
|
|
81
|
+
--body-end: #091018;
|
|
82
|
+
--dot-color: rgba(126, 240, 194, 0.045);
|
|
83
|
+
--grid-color: rgba(126, 240, 194, 0.045);
|
|
84
|
+
|
|
85
|
+
/* Inputs & controls */
|
|
86
|
+
--input-bg: rgba(9, 15, 22, 0.55);
|
|
87
|
+
--control-bg: rgba(126, 240, 194, 0.06);
|
|
88
|
+
--control-border: rgba(126, 240, 194, 0.22);
|
|
89
|
+
--control-hover-bg: rgba(126, 240, 194, 0.12);
|
|
90
|
+
--control-hover-border: rgba(126, 240, 194, 0.4);
|
|
91
|
+
--control-text: var(--accent);
|
|
68
92
|
|
|
69
93
|
/* Toggles */
|
|
70
|
-
--toggle-active-bg:
|
|
94
|
+
--toggle-active-bg: var(--accent-subtle);
|
|
71
95
|
--toggle-active-text: var(--accent);
|
|
72
|
-
--toggle-hover-bg:
|
|
73
|
-
|
|
74
|
-
/* Input */
|
|
75
|
-
--input-bg: rgba(255, 255, 255, 0.7);
|
|
76
|
-
|
|
77
|
-
/* Feed */
|
|
78
|
-
--item-bg: rgba(255, 255, 255, 0.6);
|
|
79
|
-
--item-hover-bg: rgba(255, 255, 255, 0.85);
|
|
80
|
-
--feed-hover-border: var(--accent);
|
|
81
|
-
|
|
82
|
-
/* Background gradients */
|
|
83
|
-
--grad-1: rgba(26, 107, 86, 0.12);
|
|
84
|
-
--grad-2: rgba(212, 100, 46, 0.14);
|
|
85
|
-
--grad-3: rgba(45, 74, 122, 0.10);
|
|
86
|
-
--body-start: #faf6ee;
|
|
87
|
-
--body-mid: #f3eadc;
|
|
88
|
-
--body-end: #efe3d2;
|
|
89
|
-
--dot-color: rgba(0, 0, 0, 0.025);
|
|
96
|
+
--toggle-hover-bg: rgba(255, 255, 255, 0.04);
|
|
90
97
|
|
|
91
98
|
/* Spacing scale (4px base) */
|
|
92
99
|
--sp-1: 4px;
|
|
@@ -100,125 +107,165 @@
|
|
|
100
107
|
--sp-12: 48px;
|
|
101
108
|
|
|
102
109
|
/* Radii */
|
|
103
|
-
--radius-sm:
|
|
104
|
-
--radius-md:
|
|
105
|
-
--radius-lg:
|
|
106
|
-
--radius-xl:
|
|
110
|
+
--radius-sm: 10px;
|
|
111
|
+
--radius-md: 12px;
|
|
112
|
+
--radius-lg: 16px;
|
|
113
|
+
--radius-xl: 20px;
|
|
114
|
+
--radius-2xl: 24px;
|
|
107
115
|
--radius-pill: 999px;
|
|
108
116
|
|
|
109
117
|
/* Typography */
|
|
110
|
-
--font-sans: "
|
|
118
|
+
--font-sans: "Geist", system-ui, -apple-system, sans-serif;
|
|
111
119
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
112
120
|
}
|
|
113
121
|
|
|
114
|
-
/* ──
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
--grad-1: rgba(77, 212, 180, 0.08);
|
|
162
|
-
--grad-2: rgba(255, 158, 106, 0.08);
|
|
163
|
-
--grad-3: rgba(126, 170, 235, 0.06);
|
|
164
|
-
--body-start: #161514;
|
|
165
|
-
--body-mid: #1b1a19;
|
|
166
|
-
--body-end: #201f1d;
|
|
167
|
-
--dot-color: rgba(255, 255, 255, 0.03);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
[data-theme="dark"] {
|
|
172
|
-
--surface-0: #161514;
|
|
173
|
-
--surface-1: #201f1d;
|
|
174
|
-
--surface-2: #2a2826;
|
|
175
|
-
--surface-3: #343230;
|
|
176
|
-
|
|
177
|
-
--text-primary: #ede8e2;
|
|
178
|
-
--text-secondary: #b5aea5;
|
|
179
|
-
--text-tertiary: #7d756b;
|
|
180
|
-
--text-inverse: #161514;
|
|
181
|
-
|
|
182
|
-
--accent: #4dd4b4;
|
|
183
|
-
--accent-hover: #3cc4a4;
|
|
184
|
-
--accent-subtle: rgba(77, 212, 180, 0.14);
|
|
185
|
-
--accent-warm: #ff9e6a;
|
|
186
|
-
--accent-warm-subtle: rgba(255, 158, 106, 0.16);
|
|
187
|
-
--accent-cool: #7eaaeb;
|
|
188
|
-
--accent-cool-subtle: rgba(126, 170, 235, 0.14);
|
|
189
|
-
|
|
190
|
-
--status-healthy: #4dd4b4;
|
|
191
|
-
--status-degraded: #ff9e6a;
|
|
192
|
-
--status-attention: #ff7a50;
|
|
193
|
-
|
|
194
|
-
--border: #3a3735;
|
|
195
|
-
--border-hover: #4a4745;
|
|
196
|
-
--focus-ring: rgba(77, 212, 180, 0.18);
|
|
197
|
-
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
198
|
-
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
199
|
-
--shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5);
|
|
122
|
+
/* ── Light variant ─────────────────────────────────────── */
|
|
123
|
+
/* Applied two ways:
|
|
124
|
+
1. Explicit [data-theme="light"] (set by the theme switcher or
|
|
125
|
+
the inline boot script when localStorage says "light").
|
|
126
|
+
2. @media (prefers-color-scheme: light) whenever the user has not
|
|
127
|
+
explicitly chosen dark — this gives us live OS-theme-switch
|
|
128
|
+
behavior and is resilient to JS failures.
|
|
129
|
+
Keep the two rule bodies identical. */
|
|
130
|
+
|
|
131
|
+
/* The light palette applies two ways — they stay in lockstep:
|
|
132
|
+
1. Explicitly: [data-theme="light"], set by the theme switcher or
|
|
133
|
+
the inline boot script from localStorage.
|
|
134
|
+
2. Automatically: @media (prefers-color-scheme: light) whenever
|
|
135
|
+
the user has not opted into dark. This keeps live OS-theme
|
|
136
|
+
switching working and gives us a CSS-only fallback if the
|
|
137
|
+
inline script is blocked. */
|
|
138
|
+
|
|
139
|
+
[data-theme="light"] {
|
|
140
|
+
/* Surface */
|
|
141
|
+
--surface-0: #f7faf8;
|
|
142
|
+
--surface-1: #ffffff;
|
|
143
|
+
--surface-2: #eef5f1;
|
|
144
|
+
--surface-3: #e3ede7;
|
|
145
|
+
|
|
146
|
+
/* Text — warm-tinted near-black, never pure */
|
|
147
|
+
--text-primary: #0b1016;
|
|
148
|
+
--text-secondary: #3f4d5c;
|
|
149
|
+
--text-tertiary: #6b7985;
|
|
150
|
+
--text-inverse: #ffffff;
|
|
151
|
+
|
|
152
|
+
/* Accents — AA-safe evergreen on white */
|
|
153
|
+
--accent: #0f8a68;
|
|
154
|
+
--accent-hover: #0a6f53;
|
|
155
|
+
--accent-subtle: rgba(15, 138, 104, 0.10);
|
|
156
|
+
--accent-strong: rgba(15, 138, 104, 0.28);
|
|
157
|
+
--accent-warm: #c97a1f;
|
|
158
|
+
--accent-warm-subtle: rgba(201, 122, 31, 0.12);
|
|
159
|
+
--accent-cool: #3e5fa8;
|
|
160
|
+
--accent-cool-subtle: rgba(62, 95, 168, 0.10);
|
|
161
|
+
--accent-violet: #7f52c2;
|
|
162
|
+
--accent-violet-subtle: rgba(127, 82, 194, 0.12);
|
|
163
|
+
--accent-steel: #1a8a70;
|
|
164
|
+
--accent-steel-subtle: rgba(26, 138, 112, 0.12);
|
|
165
|
+
--accent-ochre: #b5832a;
|
|
166
|
+
--accent-ochre-subtle: rgba(181, 131, 42, 0.12);
|
|
167
|
+
--accent-neutral: #5d6a7c;
|
|
168
|
+
--accent-neutral-subtle: rgba(93, 106, 124, 0.10);
|
|
200
169
|
|
|
201
|
-
|
|
202
|
-
--
|
|
203
|
-
--
|
|
204
|
-
--
|
|
205
|
-
|
|
170
|
+
/* Status */
|
|
171
|
+
--status-healthy: #0f8a68;
|
|
172
|
+
--status-degraded: #c97a1f;
|
|
173
|
+
--status-attention: #b4411e;
|
|
174
|
+
|
|
175
|
+
/* Chrome */
|
|
176
|
+
--border: rgba(15, 138, 104, 0.16);
|
|
177
|
+
--border-strong: rgba(15, 138, 104, 0.30);
|
|
178
|
+
--border-hover: rgba(15, 138, 104, 0.24);
|
|
179
|
+
--focus-ring: rgba(15, 138, 104, 0.20);
|
|
180
|
+
--shadow-sm: 0 1px 3px rgba(11, 16, 22, 0.05);
|
|
181
|
+
--shadow-md: 0 8px 24px rgba(11, 16, 22, 0.08);
|
|
182
|
+
--shadow-lg: 0 18px 40px rgba(11, 16, 22, 0.12);
|
|
183
|
+
|
|
184
|
+
/* Body background */
|
|
185
|
+
--grad-1: rgba(15, 138, 104, 0.08);
|
|
186
|
+
--grad-2: rgba(62, 95, 168, 0.06);
|
|
187
|
+
--grad-3: rgba(15, 138, 104, 0.04);
|
|
188
|
+
--body-start: #f7faf8;
|
|
189
|
+
--body-mid: #eef5f1;
|
|
190
|
+
--body-end: #e6efe9;
|
|
191
|
+
--dot-color: rgba(11, 16, 22, 0.035);
|
|
192
|
+
--grid-color: rgba(11, 16, 22, 0.035);
|
|
193
|
+
|
|
194
|
+
/* Inputs & controls */
|
|
195
|
+
--input-bg: rgba(255, 255, 255, 0.9);
|
|
196
|
+
--control-bg: rgba(15, 138, 104, 0.08);
|
|
197
|
+
--control-border: rgba(15, 138, 104, 0.22);
|
|
198
|
+
--control-hover-bg: rgba(15, 138, 104, 0.14);
|
|
199
|
+
--control-hover-border: rgba(15, 138, 104, 0.4);
|
|
200
|
+
--control-text: var(--accent);
|
|
206
201
|
|
|
207
|
-
|
|
202
|
+
/* Toggles */
|
|
203
|
+
--toggle-active-bg: var(--accent-subtle);
|
|
208
204
|
--toggle-active-text: var(--accent);
|
|
209
|
-
--toggle-hover-bg:
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
205
|
+
--toggle-hover-bg: rgba(11, 16, 22, 0.04);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
@media (prefers-color-scheme: light) {
|
|
209
|
+
:root:not([data-theme="dark"]) {
|
|
210
|
+
--surface-0: #f7faf8;
|
|
211
|
+
--surface-1: #ffffff;
|
|
212
|
+
--surface-2: #eef5f1;
|
|
213
|
+
--surface-3: #e3ede7;
|
|
214
|
+
|
|
215
|
+
--text-primary: #0b1016;
|
|
216
|
+
--text-secondary: #3f4d5c;
|
|
217
|
+
--text-tertiary: #6b7985;
|
|
218
|
+
--text-inverse: #ffffff;
|
|
219
|
+
|
|
220
|
+
--accent: #0f8a68;
|
|
221
|
+
--accent-hover: #0a6f53;
|
|
222
|
+
--accent-subtle: rgba(15, 138, 104, 0.10);
|
|
223
|
+
--accent-strong: rgba(15, 138, 104, 0.28);
|
|
224
|
+
--accent-warm: #c97a1f;
|
|
225
|
+
--accent-warm-subtle: rgba(201, 122, 31, 0.12);
|
|
226
|
+
--accent-cool: #3e5fa8;
|
|
227
|
+
--accent-cool-subtle: rgba(62, 95, 168, 0.10);
|
|
228
|
+
--accent-violet: #7f52c2;
|
|
229
|
+
--accent-violet-subtle: rgba(127, 82, 194, 0.12);
|
|
230
|
+
--accent-steel: #1a8a70;
|
|
231
|
+
--accent-steel-subtle: rgba(26, 138, 112, 0.12);
|
|
232
|
+
--accent-ochre: #b5832a;
|
|
233
|
+
--accent-ochre-subtle: rgba(181, 131, 42, 0.12);
|
|
234
|
+
--accent-neutral: #5d6a7c;
|
|
235
|
+
--accent-neutral-subtle: rgba(93, 106, 124, 0.10);
|
|
236
|
+
|
|
237
|
+
--status-healthy: #0f8a68;
|
|
238
|
+
--status-degraded: #c97a1f;
|
|
239
|
+
--status-attention: #b4411e;
|
|
240
|
+
|
|
241
|
+
--border: rgba(15, 138, 104, 0.16);
|
|
242
|
+
--border-strong: rgba(15, 138, 104, 0.30);
|
|
243
|
+
--border-hover: rgba(15, 138, 104, 0.24);
|
|
244
|
+
--focus-ring: rgba(15, 138, 104, 0.20);
|
|
245
|
+
--shadow-sm: 0 1px 3px rgba(11, 16, 22, 0.05);
|
|
246
|
+
--shadow-md: 0 8px 24px rgba(11, 16, 22, 0.08);
|
|
247
|
+
--shadow-lg: 0 18px 40px rgba(11, 16, 22, 0.12);
|
|
248
|
+
|
|
249
|
+
--grad-1: rgba(15, 138, 104, 0.08);
|
|
250
|
+
--grad-2: rgba(62, 95, 168, 0.06);
|
|
251
|
+
--grad-3: rgba(15, 138, 104, 0.04);
|
|
252
|
+
--body-start: #f7faf8;
|
|
253
|
+
--body-mid: #eef5f1;
|
|
254
|
+
--body-end: #e6efe9;
|
|
255
|
+
--dot-color: rgba(11, 16, 22, 0.035);
|
|
256
|
+
--grid-color: rgba(11, 16, 22, 0.035);
|
|
257
|
+
|
|
258
|
+
--input-bg: rgba(255, 255, 255, 0.9);
|
|
259
|
+
--control-bg: rgba(15, 138, 104, 0.08);
|
|
260
|
+
--control-border: rgba(15, 138, 104, 0.22);
|
|
261
|
+
--control-hover-bg: rgba(15, 138, 104, 0.14);
|
|
262
|
+
--control-hover-border: rgba(15, 138, 104, 0.4);
|
|
263
|
+
--control-text: var(--accent);
|
|
264
|
+
|
|
265
|
+
--toggle-active-bg: var(--accent-subtle);
|
|
266
|
+
--toggle-active-text: var(--accent);
|
|
267
|
+
--toggle-hover-bg: rgba(11, 16, 22, 0.04);
|
|
268
|
+
}
|
|
222
269
|
}
|
|
223
270
|
|
|
224
271
|
/* ── Reset & base ──────────────────────────────────────── */
|
|
@@ -268,8 +315,8 @@
|
|
|
268
315
|
padding: var(--sp-4) var(--sp-6);
|
|
269
316
|
border-bottom: 1px solid var(--border);
|
|
270
317
|
background: color-mix(in srgb, var(--surface-1) 86%, transparent);
|
|
271
|
-
backdrop-filter: blur(
|
|
272
|
-
-webkit-backdrop-filter: blur(
|
|
318
|
+
backdrop-filter: blur(14px) saturate(1.2);
|
|
319
|
+
-webkit-backdrop-filter: blur(14px) saturate(1.2);
|
|
273
320
|
}
|
|
274
321
|
|
|
275
322
|
.header-row {
|
|
@@ -319,9 +366,9 @@
|
|
|
319
366
|
border-radius: 50%;
|
|
320
367
|
flex-shrink: 0;
|
|
321
368
|
}
|
|
322
|
-
.health-dot.status-healthy { background: var(--status-healthy); box-shadow: 0 0 0 3px
|
|
323
|
-
.health-dot.status-degraded { background: var(--status-degraded); box-shadow: 0 0 0 3px
|
|
324
|
-
.health-dot.status-attention { background: var(--status-attention); box-shadow: 0 0 0 3px rgba(
|
|
369
|
+
.health-dot.status-healthy { background: var(--status-healthy); box-shadow: 0 0 0 3px var(--accent-subtle); }
|
|
370
|
+
.health-dot.status-degraded { background: var(--status-degraded); box-shadow: 0 0 0 3px var(--accent-warm-subtle); }
|
|
371
|
+
.health-dot.status-attention { background: var(--status-attention); box-shadow: 0 0 0 3px rgba(255, 122, 80, 0.18); animation: pulse 2.4s ease infinite; }
|
|
325
372
|
|
|
326
373
|
.header-right {
|
|
327
374
|
display: flex;
|
|
@@ -338,12 +385,14 @@
|
|
|
338
385
|
}
|
|
339
386
|
|
|
340
387
|
.meta-line {
|
|
388
|
+
font-family: var(--font-mono);
|
|
341
389
|
font-size: 12px;
|
|
390
|
+
letter-spacing: 0.02em;
|
|
342
391
|
color: var(--text-tertiary);
|
|
343
392
|
white-space: nowrap;
|
|
344
393
|
overflow: hidden;
|
|
345
394
|
text-overflow: ellipsis;
|
|
346
|
-
max-width:
|
|
395
|
+
max-width: 360px;
|
|
347
396
|
}
|
|
348
397
|
|
|
349
398
|
.runtime-label {
|
|
@@ -359,8 +408,9 @@
|
|
|
359
408
|
display: flex;
|
|
360
409
|
gap: 2px;
|
|
361
410
|
padding: 0 var(--sp-6);
|
|
362
|
-
background: color-mix(in srgb, var(--surface-
|
|
363
|
-
backdrop-filter: blur(
|
|
411
|
+
background: color-mix(in srgb, var(--surface-1) 55%, transparent);
|
|
412
|
+
backdrop-filter: blur(10px) saturate(1.2);
|
|
413
|
+
-webkit-backdrop-filter: blur(10px) saturate(1.2);
|
|
364
414
|
border-bottom: 1px solid var(--border);
|
|
365
415
|
position: sticky;
|
|
366
416
|
top: 73px; /* header height */
|
|
@@ -377,7 +427,7 @@
|
|
|
377
427
|
font-size: 13px;
|
|
378
428
|
font-weight: 500;
|
|
379
429
|
cursor: pointer;
|
|
380
|
-
transition: color
|
|
430
|
+
transition: color 140ms ease;
|
|
381
431
|
}
|
|
382
432
|
|
|
383
433
|
.tab-btn:hover {
|
|
@@ -398,6 +448,13 @@
|
|
|
398
448
|
height: 2px;
|
|
399
449
|
background: var(--accent);
|
|
400
450
|
border-radius: 2px 2px 0 0;
|
|
451
|
+
box-shadow: 0 0 14px var(--accent-strong), 0 0 4px var(--accent-strong);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.tab-btn:focus-visible {
|
|
455
|
+
outline: 2px solid var(--accent);
|
|
456
|
+
outline-offset: -4px;
|
|
457
|
+
border-radius: var(--radius-sm);
|
|
401
458
|
}
|
|
402
459
|
|
|
403
460
|
/* ── Tab panels ────────────────────────────────────────── */
|
|
@@ -415,9 +472,22 @@
|
|
|
415
472
|
|
|
416
473
|
/* ── Cards / sections ──────────────────────────────────── */
|
|
417
474
|
|
|
418
|
-
|
|
475
|
+
/* Every bordered-surface component (card, stat tile, peer card,
|
|
476
|
+
actor row, modal card) shares the same tinted-inset background
|
|
477
|
+
+ 1px translucent border. Pull it into one selector group so
|
|
478
|
+
each variant only declares radius, padding, shadow, and layout.
|
|
479
|
+
Markup unchanged — each class works standalone. */
|
|
480
|
+
.surface,
|
|
481
|
+
.card,
|
|
482
|
+
.stat,
|
|
483
|
+
.peer-card,
|
|
484
|
+
.actor-row,
|
|
485
|
+
.modal-card {
|
|
419
486
|
background: var(--surface-1);
|
|
420
487
|
border: 1px solid var(--border);
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.card {
|
|
421
491
|
border-radius: var(--radius-xl);
|
|
422
492
|
padding: var(--sp-5);
|
|
423
493
|
box-shadow: var(--shadow-md);
|
|
@@ -598,7 +668,7 @@
|
|
|
598
668
|
cursor: pointer;
|
|
599
669
|
flex-shrink: 0;
|
|
600
670
|
padding: 1px;
|
|
601
|
-
transition: background
|
|
671
|
+
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
602
672
|
}
|
|
603
673
|
|
|
604
674
|
.coordinator-admin-switch:hover {
|
|
@@ -629,7 +699,7 @@
|
|
|
629
699
|
background: color-mix(in srgb, var(--surface-0) 88%, white);
|
|
630
700
|
border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
|
|
631
701
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
632
|
-
transition: transform
|
|
702
|
+
transition: transform 140ms ease, background 140ms ease;
|
|
633
703
|
transform: translateX(0);
|
|
634
704
|
}
|
|
635
705
|
|
|
@@ -660,6 +730,13 @@
|
|
|
660
730
|
gap: var(--sp-3);
|
|
661
731
|
margin-bottom: var(--sp-3);
|
|
662
732
|
}
|
|
733
|
+
.section-header-title {
|
|
734
|
+
display: flex;
|
|
735
|
+
align-items: center;
|
|
736
|
+
gap: var(--sp-2);
|
|
737
|
+
flex-wrap: wrap;
|
|
738
|
+
min-width: 0;
|
|
739
|
+
}
|
|
663
740
|
|
|
664
741
|
.section-header h2 { margin-bottom: 0; }
|
|
665
742
|
|
|
@@ -679,7 +756,7 @@
|
|
|
679
756
|
|
|
680
757
|
.grid-2 {
|
|
681
758
|
display: grid;
|
|
682
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
759
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
683
760
|
gap: var(--sp-3);
|
|
684
761
|
}
|
|
685
762
|
|
|
@@ -692,13 +769,12 @@
|
|
|
692
769
|
/* ── Stat cards ────────────────────────────────────────── */
|
|
693
770
|
|
|
694
771
|
.stat {
|
|
695
|
-
border:
|
|
696
|
-
|
|
697
|
-
padding: var(--sp-3);
|
|
698
|
-
background: var(--surface-2);
|
|
772
|
+
border-radius: var(--radius-lg);
|
|
773
|
+
padding: var(--sp-4);
|
|
699
774
|
display: flex;
|
|
700
775
|
align-items: center;
|
|
701
776
|
gap: var(--sp-3);
|
|
777
|
+
box-shadow: var(--shadow-sm);
|
|
702
778
|
}
|
|
703
779
|
|
|
704
780
|
.stat-icon {
|
|
@@ -713,20 +789,26 @@
|
|
|
713
789
|
display: flex;
|
|
714
790
|
flex-direction: column;
|
|
715
791
|
min-width: 0;
|
|
792
|
+
gap: 4px;
|
|
716
793
|
}
|
|
717
794
|
|
|
718
795
|
.stat .value {
|
|
796
|
+
font-family: var(--font-sans);
|
|
719
797
|
font-weight: 600;
|
|
720
|
-
font-size:
|
|
721
|
-
color: var(--
|
|
722
|
-
line-height: 1.
|
|
798
|
+
font-size: 20px;
|
|
799
|
+
color: var(--text-primary);
|
|
800
|
+
line-height: 1.15;
|
|
801
|
+
letter-spacing: -0.01em;
|
|
723
802
|
font-feature-settings: 'tnum' 1;
|
|
724
803
|
}
|
|
725
804
|
|
|
726
805
|
.stat .label {
|
|
727
806
|
color: var(--text-tertiary);
|
|
728
|
-
font-size:
|
|
807
|
+
font-size: 12px;
|
|
808
|
+
font-weight: 500;
|
|
729
809
|
line-height: 1.3;
|
|
810
|
+
letter-spacing: 0.08em;
|
|
811
|
+
text-transform: uppercase;
|
|
730
812
|
}
|
|
731
813
|
|
|
732
814
|
.health-primary {
|
|
@@ -739,6 +821,25 @@
|
|
|
739
821
|
|
|
740
822
|
/* ── Buttons ───────────────────────────────────────────── */
|
|
741
823
|
|
|
824
|
+
/* ── Button base ─────────────────────────────────────── */
|
|
825
|
+
/* Shared layout for pill-shaped button classes. Per-variant rules
|
|
826
|
+
below only override padding / sizing / colors / typography.
|
|
827
|
+
Markup stays unchanged; each variant class continues to work
|
|
828
|
+
standalone. */
|
|
829
|
+
.btn,
|
|
830
|
+
.settings-button,
|
|
831
|
+
.sync-legacy-button,
|
|
832
|
+
.feed-menu-trigger,
|
|
833
|
+
.feed-expand {
|
|
834
|
+
display: inline-flex;
|
|
835
|
+
align-items: center;
|
|
836
|
+
justify-content: center;
|
|
837
|
+
font-family: var(--font-sans);
|
|
838
|
+
border-radius: var(--radius-pill);
|
|
839
|
+
cursor: pointer;
|
|
840
|
+
white-space: nowrap;
|
|
841
|
+
}
|
|
842
|
+
|
|
742
843
|
.settings-button {
|
|
743
844
|
border: 1px solid var(--control-border);
|
|
744
845
|
background: var(--control-bg);
|
|
@@ -746,15 +847,8 @@
|
|
|
746
847
|
padding: 5px 12px;
|
|
747
848
|
min-width: 28px;
|
|
748
849
|
min-height: 28px;
|
|
749
|
-
border-radius: var(--radius-pill);
|
|
750
850
|
font-size: 12px;
|
|
751
|
-
|
|
752
|
-
cursor: pointer;
|
|
753
|
-
display: inline-flex;
|
|
754
|
-
align-items: center;
|
|
755
|
-
justify-content: center;
|
|
756
|
-
transition: background 0.15s ease, border-color 0.15s ease;
|
|
757
|
-
white-space: nowrap;
|
|
851
|
+
transition: background 140ms ease, border-color 140ms ease;
|
|
758
852
|
}
|
|
759
853
|
.settings-button:hover {
|
|
760
854
|
background: var(--control-hover-bg);
|
|
@@ -763,6 +857,7 @@
|
|
|
763
857
|
.settings-button:focus-visible {
|
|
764
858
|
outline: 2px solid var(--accent);
|
|
765
859
|
outline-offset: 2px;
|
|
860
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
766
861
|
}
|
|
767
862
|
|
|
768
863
|
.sync-redact-control {
|
|
@@ -781,7 +876,7 @@
|
|
|
781
876
|
cursor: pointer;
|
|
782
877
|
flex-shrink: 0;
|
|
783
878
|
padding: 1px;
|
|
784
|
-
transition: background
|
|
879
|
+
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
785
880
|
}
|
|
786
881
|
|
|
787
882
|
.sync-redact-switch:hover {
|
|
@@ -807,7 +902,7 @@
|
|
|
807
902
|
background: color-mix(in srgb, var(--surface-0) 88%, white);
|
|
808
903
|
border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
|
|
809
904
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
810
|
-
transition: transform
|
|
905
|
+
transition: transform 140ms ease, background 140ms ease;
|
|
811
906
|
transform: translateX(0);
|
|
812
907
|
}
|
|
813
908
|
|
|
@@ -819,8 +914,7 @@
|
|
|
819
914
|
|
|
820
915
|
/* ── Selects / inputs ──────────────────────────────────── */
|
|
821
916
|
|
|
822
|
-
.project-filter
|
|
823
|
-
.theme-select {
|
|
917
|
+
.project-filter {
|
|
824
918
|
padding: 5px 10px;
|
|
825
919
|
border-radius: var(--radius-sm);
|
|
826
920
|
border: 1px solid var(--border);
|
|
@@ -829,15 +923,46 @@
|
|
|
829
923
|
font-family: var(--font-sans);
|
|
830
924
|
font-size: 12px;
|
|
831
925
|
cursor: pointer;
|
|
832
|
-
transition: border-color
|
|
926
|
+
transition: border-color 140ms ease;
|
|
833
927
|
}
|
|
834
|
-
.project-filter:hover
|
|
835
|
-
.project-filter:focus
|
|
928
|
+
.project-filter:hover { border-color: var(--border-hover); }
|
|
929
|
+
.project-filter:focus {
|
|
836
930
|
outline: none;
|
|
837
931
|
border-color: var(--accent);
|
|
838
932
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
839
933
|
}
|
|
840
|
-
|
|
934
|
+
|
|
935
|
+
/* 36×36 square icon buttons — theme toggle, settings gear. */
|
|
936
|
+
.icon-button {
|
|
937
|
+
width: 36px;
|
|
938
|
+
height: 36px;
|
|
939
|
+
padding: 0;
|
|
940
|
+
display: inline-flex;
|
|
941
|
+
align-items: center;
|
|
942
|
+
justify-content: center;
|
|
943
|
+
border-radius: var(--radius-sm);
|
|
944
|
+
border: 1px solid var(--control-border);
|
|
945
|
+
background: var(--control-bg);
|
|
946
|
+
color: var(--control-text);
|
|
947
|
+
cursor: pointer;
|
|
948
|
+
flex-shrink: 0;
|
|
949
|
+
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
|
|
950
|
+
}
|
|
951
|
+
.icon-button:hover {
|
|
952
|
+
background: var(--control-hover-bg);
|
|
953
|
+
border-color: var(--control-hover-border);
|
|
954
|
+
transform: translateY(-1px);
|
|
955
|
+
}
|
|
956
|
+
.icon-button:focus-visible {
|
|
957
|
+
outline: 2px solid var(--accent);
|
|
958
|
+
outline-offset: 2px;
|
|
959
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
960
|
+
}
|
|
961
|
+
.icon-button svg {
|
|
962
|
+
width: 18px;
|
|
963
|
+
height: 18px;
|
|
964
|
+
stroke-width: 2;
|
|
965
|
+
}
|
|
841
966
|
|
|
842
967
|
/* ── Feed section ──────────────────────────────────────── */
|
|
843
968
|
|
|
@@ -858,10 +983,32 @@
|
|
|
858
983
|
justify-content: flex-end;
|
|
859
984
|
}
|
|
860
985
|
|
|
986
|
+
.feed-inspector {
|
|
987
|
+
display: flex;
|
|
988
|
+
flex-direction: column;
|
|
989
|
+
align-items: flex-start;
|
|
990
|
+
gap: 12px;
|
|
991
|
+
margin-bottom: var(--sp-4);
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
.feed-inspector-button {
|
|
995
|
+
min-height: 30px;
|
|
996
|
+
padding: 4px 10px;
|
|
997
|
+
border-color: var(--border);
|
|
998
|
+
background: transparent;
|
|
999
|
+
color: var(--text-secondary);
|
|
1000
|
+
white-space: nowrap;
|
|
1001
|
+
}
|
|
1002
|
+
.feed-inspector-button:hover {
|
|
1003
|
+
background: var(--surface-2);
|
|
1004
|
+
border-color: var(--border-hover);
|
|
1005
|
+
color: var(--text-primary);
|
|
1006
|
+
}
|
|
1007
|
+
|
|
861
1008
|
.feed-search {
|
|
862
1009
|
min-width: 200px;
|
|
863
1010
|
flex: 1;
|
|
864
|
-
max-width:
|
|
1011
|
+
max-width: 420px;
|
|
865
1012
|
padding: 8px var(--sp-3);
|
|
866
1013
|
border-radius: var(--radius-md);
|
|
867
1014
|
border: 1px solid var(--border);
|
|
@@ -870,18 +1017,40 @@
|
|
|
870
1017
|
font-family: var(--font-sans);
|
|
871
1018
|
font-size: 13px;
|
|
872
1019
|
outline: none;
|
|
873
|
-
transition: border-color
|
|
1020
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
874
1021
|
}
|
|
875
1022
|
.feed-search::placeholder { color: var(--text-tertiary); }
|
|
876
1023
|
.feed-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
|
|
877
1024
|
|
|
1025
|
+
.feed-inspector-files {
|
|
1026
|
+
width: 100%;
|
|
1027
|
+
margin-top: 8px;
|
|
1028
|
+
min-height: 84px;
|
|
1029
|
+
padding: 10px var(--sp-3);
|
|
1030
|
+
border-radius: var(--radius-md);
|
|
1031
|
+
border: 1px solid var(--border);
|
|
1032
|
+
background: var(--input-bg);
|
|
1033
|
+
color: var(--text-primary);
|
|
1034
|
+
font-family: var(--font-mono);
|
|
1035
|
+
font-size: 12px;
|
|
1036
|
+
line-height: 1.45;
|
|
1037
|
+
resize: vertical;
|
|
1038
|
+
outline: none;
|
|
1039
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1040
|
+
}
|
|
1041
|
+
.feed-inspector-files::placeholder { color: var(--text-tertiary); }
|
|
1042
|
+
.feed-inspector-files:focus {
|
|
1043
|
+
border-color: var(--accent);
|
|
1044
|
+
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
878
1047
|
.feed-toggle {
|
|
879
1048
|
display: inline-flex;
|
|
880
1049
|
gap: 2px;
|
|
881
1050
|
padding: 3px;
|
|
882
1051
|
border-radius: var(--radius-pill);
|
|
883
1052
|
border: 1px solid var(--border);
|
|
884
|
-
background: var(--surface-
|
|
1053
|
+
background: color-mix(in srgb, var(--surface-0) 70%, transparent);
|
|
885
1054
|
}
|
|
886
1055
|
|
|
887
1056
|
.toggle-button {
|
|
@@ -890,16 +1059,28 @@
|
|
|
890
1059
|
color: var(--text-tertiary);
|
|
891
1060
|
font-family: var(--font-sans);
|
|
892
1061
|
font-size: 12px;
|
|
893
|
-
padding: 4px
|
|
1062
|
+
padding: 4px 12px;
|
|
894
1063
|
border-radius: var(--radius-pill);
|
|
895
1064
|
cursor: pointer;
|
|
896
1065
|
display: inline-flex;
|
|
897
1066
|
align-items: center;
|
|
898
1067
|
gap: 5px;
|
|
899
|
-
transition: background
|
|
1068
|
+
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
|
|
900
1069
|
}
|
|
901
1070
|
.toggle-button:hover { background: var(--toggle-hover-bg); color: var(--text-primary); }
|
|
902
|
-
.toggle-button.active {
|
|
1071
|
+
.toggle-button.active {
|
|
1072
|
+
background: var(--accent-subtle);
|
|
1073
|
+
color: var(--accent);
|
|
1074
|
+
box-shadow: inset 0 0 0 1px var(--accent-strong);
|
|
1075
|
+
}
|
|
1076
|
+
/* Intentionally no font-weight change on .active — weight-driven text
|
|
1077
|
+
width shifts would retime the toggle's outer width and could wrap
|
|
1078
|
+
the downstream controls (search + type toggle + Context Inspector)
|
|
1079
|
+
to a second line. Bg + color + inset ring is sufficient signal. */
|
|
1080
|
+
.toggle-button:focus-visible {
|
|
1081
|
+
outline: 2px solid var(--accent);
|
|
1082
|
+
outline-offset: 2px;
|
|
1083
|
+
}
|
|
903
1084
|
|
|
904
1085
|
.feed-list {
|
|
905
1086
|
display: flex;
|
|
@@ -907,35 +1088,106 @@
|
|
|
907
1088
|
gap: var(--sp-3);
|
|
908
1089
|
}
|
|
909
1090
|
|
|
1091
|
+
/* Feed loading skeleton — mirrors the banner / body / footer shape so
|
|
1092
|
+
the transition into real content doesn't shift layout. Reuses the
|
|
1093
|
+
sync-shimmer keyframe below. */
|
|
1094
|
+
.feed-skeleton {
|
|
1095
|
+
display: flex;
|
|
1096
|
+
flex-direction: column;
|
|
1097
|
+
gap: var(--sp-3);
|
|
1098
|
+
}
|
|
1099
|
+
.feed-skeleton-item {
|
|
1100
|
+
border: 1px solid var(--border);
|
|
1101
|
+
border-radius: var(--radius-md);
|
|
1102
|
+
background: var(--surface-1);
|
|
1103
|
+
overflow: hidden;
|
|
1104
|
+
box-shadow: var(--shadow-sm);
|
|
1105
|
+
}
|
|
1106
|
+
.feed-skeleton-banner {
|
|
1107
|
+
height: 28px;
|
|
1108
|
+
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
|
1109
|
+
background-size: 400px 100%;
|
|
1110
|
+
animation: sync-shimmer 1.5s ease-in-out infinite;
|
|
1111
|
+
border-bottom: 1px solid var(--border);
|
|
1112
|
+
}
|
|
1113
|
+
.feed-skeleton-body {
|
|
1114
|
+
padding: var(--sp-4) var(--sp-5);
|
|
1115
|
+
display: flex;
|
|
1116
|
+
flex-direction: column;
|
|
1117
|
+
gap: 10px;
|
|
1118
|
+
}
|
|
1119
|
+
.feed-skeleton-line {
|
|
1120
|
+
height: 12px;
|
|
1121
|
+
border-radius: 6px;
|
|
1122
|
+
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
|
1123
|
+
background-size: 400px 100%;
|
|
1124
|
+
animation: sync-shimmer 1.5s ease-in-out infinite;
|
|
1125
|
+
}
|
|
1126
|
+
.feed-skeleton-line.w-85 { width: 85%; }
|
|
1127
|
+
.feed-skeleton-line.w-65 { width: 65%; }
|
|
1128
|
+
.feed-skeleton-line.w-40 { width: 40%; }
|
|
1129
|
+
.feed-skeleton-footer {
|
|
1130
|
+
display: flex;
|
|
1131
|
+
gap: 8px;
|
|
1132
|
+
padding-top: 4px;
|
|
1133
|
+
}
|
|
1134
|
+
.feed-skeleton-chip {
|
|
1135
|
+
height: 18px;
|
|
1136
|
+
width: 72px;
|
|
1137
|
+
border-radius: var(--radius-pill);
|
|
1138
|
+
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
|
1139
|
+
background-size: 400px 100%;
|
|
1140
|
+
animation: sync-shimmer 1.5s ease-in-out infinite;
|
|
1141
|
+
}
|
|
1142
|
+
.feed-skeleton-chip.w-36 { width: 36px; }
|
|
1143
|
+
.feed-skeleton-chip.w-56 { width: 56px; }
|
|
1144
|
+
|
|
910
1145
|
/* ── Feed items ────────────────────────────────────────── */
|
|
1146
|
+
/* Design-handoff clarification (2026-04-19): feed items render with
|
|
1147
|
+
a full-width top banner in the kind's tint, not a 4px left rail.
|
|
1148
|
+
Banner ~28px tall, --accent-subtle bg per kind, 1px accent-strong
|
|
1149
|
+
bottom border; kind chip sits inset left inside the banner. */
|
|
911
1150
|
|
|
912
1151
|
.feed-item {
|
|
913
1152
|
border: 1px solid var(--border);
|
|
914
|
-
border-
|
|
915
|
-
border-radius: var(--radius-lg);
|
|
916
|
-
padding: var(--sp-4) var(--sp-5);
|
|
1153
|
+
border-radius: var(--radius-md);
|
|
917
1154
|
background: var(--surface-1);
|
|
1155
|
+
overflow: hidden;
|
|
918
1156
|
display: flex;
|
|
919
1157
|
flex-direction: column;
|
|
920
|
-
|
|
921
|
-
transition: transform
|
|
1158
|
+
box-shadow: var(--shadow-sm);
|
|
1159
|
+
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
922
1160
|
}
|
|
923
1161
|
.feed-item:hover {
|
|
924
1162
|
transform: translateY(-1px);
|
|
925
|
-
box-shadow: var(--shadow-
|
|
1163
|
+
box-shadow: var(--shadow-md);
|
|
926
1164
|
border-color: var(--border-hover);
|
|
927
1165
|
}
|
|
928
|
-
.feed-item.new-item { animation: newPulse 420ms ease-out 1; }
|
|
929
1166
|
|
|
930
|
-
/* Kind
|
|
931
|
-
.feed-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
.feed-item.
|
|
937
|
-
.feed-item.
|
|
938
|
-
.feed-item.
|
|
1167
|
+
/* Kind banner — defaults to mint (feature). Per-kind overrides below. */
|
|
1168
|
+
.feed-kind-banner {
|
|
1169
|
+
padding: 7px var(--sp-5);
|
|
1170
|
+
background: var(--accent-subtle);
|
|
1171
|
+
border-bottom: 1px solid var(--accent-strong);
|
|
1172
|
+
}
|
|
1173
|
+
.feed-item.change .feed-kind-banner { background: var(--accent-cool-subtle); border-bottom-color: color-mix(in srgb, var(--accent-cool) 30%, transparent); }
|
|
1174
|
+
.feed-item.bugfix .feed-kind-banner { background: var(--accent-warm-subtle); border-bottom-color: color-mix(in srgb, var(--accent-warm) 30%, transparent); }
|
|
1175
|
+
.feed-item.refactor .feed-kind-banner { background: var(--accent-violet-subtle); border-bottom-color: color-mix(in srgb, var(--accent-violet) 30%, transparent); }
|
|
1176
|
+
.feed-item.discovery .feed-kind-banner { background: var(--accent-steel-subtle); border-bottom-color: color-mix(in srgb, var(--accent-steel) 30%, transparent); }
|
|
1177
|
+
.feed-item.docs .feed-kind-banner { background: var(--accent-ochre-subtle); border-bottom-color: color-mix(in srgb, var(--accent-ochre) 30%, transparent); }
|
|
1178
|
+
.feed-item.test .feed-kind-banner { background: var(--accent-neutral-subtle); border-bottom-color: color-mix(in srgb, var(--accent-neutral) 30%, transparent); }
|
|
1179
|
+
/* Core emits 'decision' / 'exploration' / 'session_summary' too — preserve
|
|
1180
|
+
neutral treatments so those items aren't unstyled. */
|
|
1181
|
+
.feed-item.decision .feed-kind-banner { background: var(--accent-neutral-subtle); border-bottom-color: color-mix(in srgb, var(--accent-neutral) 30%, transparent); }
|
|
1182
|
+
.feed-item.exploration .feed-kind-banner { background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--text-tertiary) 24%, transparent); }
|
|
1183
|
+
.feed-item.session_summary .feed-kind-banner { background: color-mix(in srgb, var(--accent-cool) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--accent-cool) 22%, transparent); }
|
|
1184
|
+
|
|
1185
|
+
.feed-card-body {
|
|
1186
|
+
padding: var(--sp-4) var(--sp-5);
|
|
1187
|
+
display: flex;
|
|
1188
|
+
flex-direction: column;
|
|
1189
|
+
gap: var(--sp-2);
|
|
1190
|
+
}
|
|
939
1191
|
|
|
940
1192
|
.feed-card-header {
|
|
941
1193
|
display: flex;
|
|
@@ -970,20 +1222,14 @@
|
|
|
970
1222
|
z-index: 24;
|
|
971
1223
|
}
|
|
972
1224
|
.feed-menu-trigger {
|
|
973
|
-
display: inline-flex;
|
|
974
|
-
align-items: center;
|
|
975
|
-
justify-content: center;
|
|
976
1225
|
width: 30px;
|
|
977
1226
|
height: 30px;
|
|
978
1227
|
border: 1px solid var(--border);
|
|
979
|
-
border-radius: var(--radius-pill);
|
|
980
1228
|
background: transparent;
|
|
981
1229
|
color: var(--text-tertiary);
|
|
982
|
-
font-family: var(--font-sans);
|
|
983
1230
|
font-size: 18px;
|
|
984
1231
|
line-height: 1;
|
|
985
|
-
|
|
986
|
-
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
|
1232
|
+
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
|
|
987
1233
|
}
|
|
988
1234
|
.feed-menu-trigger:hover,
|
|
989
1235
|
.feed-menu-trigger[data-state="open"] {
|
|
@@ -994,6 +1240,7 @@
|
|
|
994
1240
|
.feed-menu-trigger:focus-visible {
|
|
995
1241
|
outline: 2px solid var(--accent);
|
|
996
1242
|
outline-offset: 2px;
|
|
1243
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
997
1244
|
}
|
|
998
1245
|
.feed-menu-item {
|
|
999
1246
|
display: flex;
|
|
@@ -1034,11 +1281,50 @@
|
|
|
1034
1281
|
overflow-wrap: anywhere;
|
|
1035
1282
|
word-break: break-word;
|
|
1036
1283
|
}
|
|
1037
|
-
|
|
1284
|
+
.feed-card-subtitle {
|
|
1285
|
+
width: 100%;
|
|
1286
|
+
color: var(--text-tertiary);
|
|
1287
|
+
}
|
|
1038
1288
|
.feed-meta {
|
|
1039
1289
|
color: var(--text-tertiary);
|
|
1040
1290
|
font-size: 12px;
|
|
1041
1291
|
}
|
|
1292
|
+
/* Empty state renders as a terminal-output block — mono surface,
|
|
1293
|
+
blinking mint cursor — to match the codemem "warm local journal"
|
|
1294
|
+
voice and signal "this is a CLI-native tool." */
|
|
1295
|
+
.feed-empty-state {
|
|
1296
|
+
display: flex;
|
|
1297
|
+
flex-direction: column;
|
|
1298
|
+
gap: 6px;
|
|
1299
|
+
padding: var(--sp-4);
|
|
1300
|
+
border: 1px solid var(--border);
|
|
1301
|
+
border-radius: var(--radius-md);
|
|
1302
|
+
background: var(--surface-2);
|
|
1303
|
+
color: var(--text-secondary);
|
|
1304
|
+
font-family: var(--font-mono);
|
|
1305
|
+
font-size: 13px;
|
|
1306
|
+
}
|
|
1307
|
+
.feed-empty-state strong {
|
|
1308
|
+
color: var(--text-primary);
|
|
1309
|
+
font-weight: 600;
|
|
1310
|
+
}
|
|
1311
|
+
.feed-empty-state::before {
|
|
1312
|
+
content: "$ codemem feed";
|
|
1313
|
+
display: block;
|
|
1314
|
+
color: var(--accent);
|
|
1315
|
+
font-weight: 500;
|
|
1316
|
+
margin-bottom: 4px;
|
|
1317
|
+
}
|
|
1318
|
+
.feed-empty-state::after {
|
|
1319
|
+
content: "_";
|
|
1320
|
+
display: inline-block;
|
|
1321
|
+
color: var(--accent);
|
|
1322
|
+
animation: cursorBlink 1.1s steps(2, end) infinite;
|
|
1323
|
+
}
|
|
1324
|
+
@keyframes cursorBlink {
|
|
1325
|
+
0%, 100% { opacity: 1; }
|
|
1326
|
+
50% { opacity: 0; }
|
|
1327
|
+
}
|
|
1042
1328
|
|
|
1043
1329
|
.feed-provenance {
|
|
1044
1330
|
display: flex;
|
|
@@ -1046,18 +1332,34 @@
|
|
|
1046
1332
|
gap: 6px;
|
|
1047
1333
|
}
|
|
1048
1334
|
|
|
1049
|
-
|
|
1335
|
+
/* ── Chip base ─────────────────────────────────────────── */
|
|
1336
|
+
/* Shared layout for every pill-shaped label in the viewer. Per-variant
|
|
1337
|
+
rules below only override background / color / border / typography.
|
|
1338
|
+
Markup stays unchanged — each variant class continues to work
|
|
1339
|
+
standalone for backward compatibility. */
|
|
1340
|
+
.chip,
|
|
1341
|
+
.kind-chip,
|
|
1342
|
+
.provenance-chip,
|
|
1343
|
+
.tag-chip,
|
|
1344
|
+
.peer-scope-chip,
|
|
1345
|
+
.badge {
|
|
1050
1346
|
display: inline-flex;
|
|
1051
1347
|
align-items: center;
|
|
1348
|
+
gap: 6px;
|
|
1349
|
+
padding: 3px 10px;
|
|
1350
|
+
border-radius: var(--radius-pill);
|
|
1351
|
+
border: 1px solid transparent;
|
|
1352
|
+
line-height: 1.2;
|
|
1353
|
+
white-space: nowrap;
|
|
1354
|
+
font-size: 11px;
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.provenance-chip {
|
|
1052
1358
|
gap: 4px;
|
|
1053
1359
|
padding: 3px 8px;
|
|
1054
|
-
border-
|
|
1055
|
-
border: 1px solid var(--border);
|
|
1360
|
+
border-color: var(--border);
|
|
1056
1361
|
background: var(--surface-2);
|
|
1057
1362
|
color: var(--text-tertiary);
|
|
1058
|
-
font-size: 11px;
|
|
1059
|
-
line-height: 1.2;
|
|
1060
|
-
white-space: nowrap;
|
|
1061
1363
|
}
|
|
1062
1364
|
.provenance-chip.mine { background: var(--accent-subtle); color: var(--accent); border-color: rgba(43, 122, 176, 0.18); }
|
|
1063
1365
|
.provenance-chip.author { color: var(--text-secondary); }
|
|
@@ -1128,68 +1430,73 @@
|
|
|
1128
1430
|
border: 1px solid var(--border);
|
|
1129
1431
|
background: transparent;
|
|
1130
1432
|
color: var(--text-tertiary);
|
|
1131
|
-
border-radius: var(--radius-pill);
|
|
1132
1433
|
padding: 3px 10px;
|
|
1133
|
-
font-family: var(--font-sans);
|
|
1134
1434
|
font-size: 11px;
|
|
1135
|
-
|
|
1136
|
-
transition: background 0.15s ease, color 0.15s ease;
|
|
1435
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1137
1436
|
}
|
|
1138
1437
|
.feed-expand:hover { background: var(--accent-subtle); color: var(--accent); }
|
|
1438
|
+
.feed-expand:focus-visible {
|
|
1439
|
+
outline: 2px solid var(--accent);
|
|
1440
|
+
outline-offset: 2px;
|
|
1441
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1442
|
+
}
|
|
1139
1443
|
|
|
1140
1444
|
.feed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
.feed-
|
|
1144
|
-
|
|
1145
|
-
/* ── Pills & badges ────────────────────────────────────── */
|
|
1146
|
-
|
|
1147
|
-
.kind-pill {
|
|
1148
|
-
display: inline-flex;
|
|
1149
|
-
align-items: center;
|
|
1445
|
+
/* File paths render as compact pill-tags in their own row — the actual
|
|
1446
|
+
filename is informative and earns its horizontal space. */
|
|
1447
|
+
.feed-files { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1448
|
+
.feed-file {
|
|
1150
1449
|
padding: 2px 8px;
|
|
1151
|
-
border-radius: var(--radius-
|
|
1450
|
+
border-radius: var(--radius-sm);
|
|
1451
|
+
background: var(--surface-2);
|
|
1452
|
+
border: 1px solid var(--border);
|
|
1453
|
+
font-family: var(--font-mono);
|
|
1152
1454
|
font-size: 11px;
|
|
1153
|
-
|
|
1154
|
-
letter-spacing: 0.2px;
|
|
1455
|
+
color: var(--text-tertiary);
|
|
1155
1456
|
white-space: nowrap;
|
|
1457
|
+
}
|
|
1458
|
+
.feed-age { white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; }
|
|
1459
|
+
|
|
1460
|
+
/* ── Pills & badges ────────────────────────────────────── */
|
|
1461
|
+
|
|
1462
|
+
/* Kind chip — lives inside .feed-kind-banner. Tint + colored border
|
|
1463
|
+
match the banner per kind so the chip reads as part of the strip. */
|
|
1464
|
+
.kind-chip {
|
|
1465
|
+
padding: 2px 10px;
|
|
1466
|
+
font-family: var(--font-mono);
|
|
1467
|
+
font-size: 10px;
|
|
1468
|
+
font-weight: 600;
|
|
1469
|
+
letter-spacing: 0.08em;
|
|
1470
|
+
text-transform: uppercase;
|
|
1156
1471
|
background: var(--accent-subtle);
|
|
1157
1472
|
color: var(--accent);
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
.kind-
|
|
1161
|
-
.kind-
|
|
1162
|
-
.kind-
|
|
1163
|
-
.kind-
|
|
1164
|
-
.kind-
|
|
1165
|
-
.kind-
|
|
1166
|
-
.kind-
|
|
1473
|
+
border-color: var(--accent-strong);
|
|
1474
|
+
}
|
|
1475
|
+
.kind-chip.change { background: var(--accent-cool-subtle); color: var(--accent-cool); border-color: color-mix(in srgb, var(--accent-cool) 32%, transparent); }
|
|
1476
|
+
.kind-chip.bugfix { background: var(--accent-warm-subtle); color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 32%, transparent); }
|
|
1477
|
+
.kind-chip.refactor { background: var(--accent-violet-subtle); color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 32%, transparent); }
|
|
1478
|
+
.kind-chip.discovery { background: var(--accent-steel-subtle); color: var(--accent-steel); border-color: color-mix(in srgb, var(--accent-steel) 32%, transparent); }
|
|
1479
|
+
.kind-chip.docs { background: var(--accent-ochre-subtle); color: var(--accent-ochre); border-color: color-mix(in srgb, var(--accent-ochre) 32%, transparent); }
|
|
1480
|
+
.kind-chip.test { background: var(--accent-neutral-subtle); color: var(--accent-neutral); border-color: color-mix(in srgb, var(--accent-neutral) 32%, transparent); }
|
|
1481
|
+
.kind-chip.decision { background: var(--accent-neutral-subtle); color: var(--accent-neutral); border-color: color-mix(in srgb, var(--accent-neutral) 32%, transparent); }
|
|
1482
|
+
.kind-chip.exploration { background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); color: var(--text-tertiary); border-color: color-mix(in srgb, var(--text-tertiary) 28%, transparent); }
|
|
1483
|
+
.kind-chip.session_summary { background: color-mix(in srgb, var(--accent-cool) 10%, transparent); color: var(--accent-cool); border-color: color-mix(in srgb, var(--accent-cool) 24%, transparent); }
|
|
1167
1484
|
|
|
1168
1485
|
.tag-chip {
|
|
1169
|
-
display: inline-flex;
|
|
1170
|
-
align-items: center;
|
|
1171
|
-
gap: 6px;
|
|
1172
1486
|
padding: 2px 10px;
|
|
1173
|
-
border-radius: var(--radius-pill);
|
|
1174
1487
|
background: var(--accent-cool-subtle);
|
|
1175
1488
|
color: var(--accent-cool);
|
|
1176
|
-
font-size: 11px;
|
|
1177
1489
|
font-weight: 500;
|
|
1178
1490
|
}
|
|
1179
1491
|
|
|
1180
1492
|
.badge {
|
|
1181
|
-
display: inline-flex;
|
|
1182
|
-
align-items: center;
|
|
1183
|
-
gap: 6px;
|
|
1184
|
-
padding: 3px 10px;
|
|
1185
|
-
border-radius: var(--radius-pill);
|
|
1186
|
-
background: var(--accent-cool-subtle);
|
|
1187
|
-
color: var(--accent-cool);
|
|
1188
1493
|
font-size: 12px;
|
|
1189
1494
|
font-weight: 600;
|
|
1495
|
+
background: var(--accent-cool-subtle);
|
|
1496
|
+
color: var(--accent-cool);
|
|
1190
1497
|
}
|
|
1191
|
-
.badge-online { background:
|
|
1192
|
-
.badge-offline { background:
|
|
1498
|
+
.badge-online { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-strong); }
|
|
1499
|
+
.badge-offline { background: var(--accent-warm-subtle); color: var(--accent-warm); border-color: rgba(255, 180, 84, 0.3); }
|
|
1193
1500
|
|
|
1194
1501
|
.pill {
|
|
1195
1502
|
display: inline-block;
|
|
@@ -1199,13 +1506,48 @@
|
|
|
1199
1506
|
color: var(--accent);
|
|
1200
1507
|
font-size: 12px;
|
|
1201
1508
|
font-weight: 600;
|
|
1202
|
-
transition: background
|
|
1509
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1203
1510
|
}
|
|
1204
1511
|
.pill.alt { background: var(--accent-warm-subtle); color: var(--accent-warm); }
|
|
1205
1512
|
.pill-success { background: var(--green-bg, #16a34a22); color: var(--green-text, #16a34a); }
|
|
1206
1513
|
.pill-warning { background: var(--yellow-bg, #ca8a0422); color: var(--yellow-text, #ca8a04); }
|
|
1207
1514
|
.pill-error { background: var(--red-bg, #dc262622); color: var(--red-text, #dc2626); }
|
|
1208
1515
|
|
|
1516
|
+
/* Sync tab top-of-card online badge.
|
|
1517
|
+
Subtle-wash treatment matches trust badges + kind chips + segmented
|
|
1518
|
+
toggle active state. Handoff README §E mentioned "filled-mint pill"
|
|
1519
|
+
but the reference ui_kit ships the subtle-wash variant — keeping it
|
|
1520
|
+
in-family here for visual consistency. */
|
|
1521
|
+
.sync-online-badge {
|
|
1522
|
+
display: inline-flex;
|
|
1523
|
+
align-items: center;
|
|
1524
|
+
gap: 6px;
|
|
1525
|
+
padding: 2px 10px;
|
|
1526
|
+
border-radius: var(--radius-pill);
|
|
1527
|
+
background: var(--accent-subtle);
|
|
1528
|
+
color: var(--accent);
|
|
1529
|
+
font-size: 12px;
|
|
1530
|
+
font-weight: 600;
|
|
1531
|
+
letter-spacing: 0.02em;
|
|
1532
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1533
|
+
}
|
|
1534
|
+
.sync-online-badge::before {
|
|
1535
|
+
content: "";
|
|
1536
|
+
width: 6px;
|
|
1537
|
+
height: 6px;
|
|
1538
|
+
border-radius: 50%;
|
|
1539
|
+
background: currentColor;
|
|
1540
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 24%, transparent);
|
|
1541
|
+
}
|
|
1542
|
+
.sync-online-badge.sync-online-offline {
|
|
1543
|
+
background: var(--accent-warm-subtle);
|
|
1544
|
+
color: var(--accent-warm);
|
|
1545
|
+
}
|
|
1546
|
+
.sync-online-badge.sync-online-error {
|
|
1547
|
+
background: rgba(255, 122, 80, 0.16);
|
|
1548
|
+
color: var(--status-attention);
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1209
1551
|
.match {
|
|
1210
1552
|
padding: 0 2px;
|
|
1211
1553
|
border-radius: 3px;
|
|
@@ -1223,7 +1565,7 @@
|
|
|
1223
1565
|
|
|
1224
1566
|
.health-action, .sync-action {
|
|
1225
1567
|
display: flex;
|
|
1226
|
-
align-items:
|
|
1568
|
+
align-items: flex-start;
|
|
1227
1569
|
justify-content: space-between;
|
|
1228
1570
|
gap: var(--sp-3);
|
|
1229
1571
|
padding: var(--sp-3);
|
|
@@ -1253,36 +1595,73 @@
|
|
|
1253
1595
|
font-size: 11px;
|
|
1254
1596
|
padding: 2px 8px;
|
|
1255
1597
|
}
|
|
1598
|
+
.sync-section-note {
|
|
1599
|
+
margin-top: -2px;
|
|
1600
|
+
margin-bottom: var(--sp-1);
|
|
1601
|
+
max-width: 72ch;
|
|
1602
|
+
}
|
|
1256
1603
|
.health-action-command, .sync-action-command { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
|
|
1257
|
-
.health-action-buttons { display: flex; gap: 6px; flex-shrink: 0; }
|
|
1604
|
+
.health-action-buttons { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
|
|
1258
1605
|
|
|
1259
1606
|
/* ── Diagnostics ───────────────────────────────────────── */
|
|
1260
1607
|
|
|
1261
1608
|
.diag-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
|
|
1262
|
-
|
|
1609
|
+
/* Sync diagnostics row. Body wraps within its own column; timestamp
|
|
1610
|
+
stays flush-right on the first line and doesn't shove the wrapped
|
|
1611
|
+
body sideways. On narrow viewports the timestamp stacks under the
|
|
1612
|
+
body so neither column has to compete with the other. */
|
|
1613
|
+
.diag-line {
|
|
1614
|
+
border: 1px solid var(--border);
|
|
1615
|
+
border-radius: var(--radius-md);
|
|
1616
|
+
padding: var(--sp-3);
|
|
1617
|
+
background: var(--surface-2);
|
|
1618
|
+
display: grid;
|
|
1619
|
+
grid-template-columns: 1fr auto;
|
|
1620
|
+
align-items: baseline;
|
|
1621
|
+
gap: var(--sp-3);
|
|
1622
|
+
}
|
|
1263
1623
|
.diag-line .left { min-width: 0; }
|
|
1264
|
-
.diag-line .right {
|
|
1624
|
+
.diag-line .right { color: var(--text-tertiary); white-space: nowrap; }
|
|
1625
|
+
@media (max-width: 600px) {
|
|
1626
|
+
.diag-line { grid-template-columns: 1fr; }
|
|
1627
|
+
.diag-line .right { font-size: 11px; }
|
|
1628
|
+
}
|
|
1265
1629
|
|
|
1266
1630
|
.diag-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); background: var(--surface-2); }
|
|
1267
1631
|
.diag-group summary { cursor: pointer; color: var(--text-tertiary); font-size: 13px; }
|
|
1268
1632
|
|
|
1269
1633
|
/* ── Peers ─────────────────────────────────────────────── */
|
|
1270
1634
|
|
|
1271
|
-
.peer-list { display: grid; gap: var(--sp-3); }
|
|
1272
|
-
|
|
1635
|
+
.peer-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
|
|
1636
|
+
@media (min-width: 900px) {
|
|
1637
|
+
.peer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1638
|
+
}
|
|
1639
|
+
.peer-card { border-radius: var(--radius-lg); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
|
|
1273
1640
|
.peer-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1274
1641
|
.peer-title strong { font-size: 14px; font-weight: 600; }
|
|
1642
|
+
/* Direction glyph rendered when a peer is in mutual-trust state.
|
|
1643
|
+
Handoff §E asked for ↕/↓/↑ but the full 3-way split requires a
|
|
1644
|
+
peer-role field that doesn't exist in core yet — ship the
|
|
1645
|
+
bidirectional marker against the existing trust signal and
|
|
1646
|
+
defer the subscribed/publishing variants to a follow-up. */
|
|
1647
|
+
.peer-direction {
|
|
1648
|
+
margin-left: 6px;
|
|
1649
|
+
font-family: var(--font-mono);
|
|
1650
|
+
font-size: 13px;
|
|
1651
|
+
color: var(--text-tertiary);
|
|
1652
|
+
vertical-align: baseline;
|
|
1653
|
+
}
|
|
1275
1654
|
.actor-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
|
|
1276
|
-
.actor-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border
|
|
1655
|
+
.actor-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border-radius: var(--radius-lg); padding: var(--sp-3); }
|
|
1277
1656
|
.actor-details { min-width: 0; display: grid; gap: 6px; }
|
|
1278
1657
|
.actor-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
1279
|
-
.actor-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1658
|
+
.actor-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
|
|
1280
1659
|
.actor-name-input { min-width: 220px; }
|
|
1281
1660
|
.actor-merge-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1282
1661
|
.actor-merge-select { min-width: 200px; }
|
|
1283
1662
|
.actor-merge-note { width: 100%; }
|
|
1284
|
-
.actor-create-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
|
|
1285
|
-
.actor-create-row input { flex: 1 1 260px; }
|
|
1663
|
+
.actor-create-row { display: flex; align-items: flex-end; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
|
|
1664
|
+
.actor-create-row input { flex: 1 1 260px; max-height: 40px; }
|
|
1286
1665
|
.actor-badge.local { background: rgba(31, 111, 92, 0.12); color: var(--accent); }
|
|
1287
1666
|
.peer-scope { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
|
|
1288
1667
|
.peer-scope-summary, .peer-scope-effective { font-size: 12px; color: var(--text-secondary); }
|
|
@@ -1290,15 +1669,25 @@
|
|
|
1290
1669
|
.peer-scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
|
|
1291
1670
|
.peer-scope-editor { display: grid; gap: 8px; }
|
|
1292
1671
|
.peer-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
|
|
1293
|
-
.peer-scope-chip {
|
|
1294
|
-
.peer-scope-chip.empty { background: transparent; color: var(--text-tertiary); border:
|
|
1672
|
+
.peer-scope-chip { padding: 4px 8px; background: rgba(43, 122, 176, 0.12); color: var(--accent); font-size: 12px; }
|
|
1673
|
+
.peer-scope-chip.empty { background: transparent; color: var(--text-tertiary); border-style: dashed; border-color: var(--border); }
|
|
1295
1674
|
.peer-scope-chip-remove { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0; font: inherit; opacity: 0.75; }
|
|
1296
1675
|
.peer-scope-chip-remove:hover { opacity: 1; }
|
|
1297
1676
|
.peer-scope-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-primary); padding: 8px 10px; font: inherit; }
|
|
1298
|
-
.peer-scope-actions { display: flex; gap: var(--sp-2); }
|
|
1299
|
-
.peer-actions { display: flex; gap: 6px; }
|
|
1300
|
-
|
|
1301
|
-
|
|
1677
|
+
.peer-scope-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1678
|
+
.peer-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
|
|
1679
|
+
|
|
1680
|
+
/* Labeled input wrapper — keeps a small uppercase caption visible even
|
|
1681
|
+
when the input has a value. Replaces aria-label-only inputs that
|
|
1682
|
+
were glaring once the deep-ink palette raised contrast. */
|
|
1683
|
+
.sync-labeled-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1 1 220px; }
|
|
1684
|
+
.sync-labeled-field-caption {
|
|
1685
|
+
font-size: 11px;
|
|
1686
|
+
font-weight: 500;
|
|
1687
|
+
letter-spacing: 0.06em;
|
|
1688
|
+
text-transform: uppercase;
|
|
1689
|
+
color: var(--text-tertiary);
|
|
1690
|
+
}
|
|
1302
1691
|
.peer-actions button.danger { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 36%, var(--border)); }
|
|
1303
1692
|
.peer-actions button.danger:hover { background: var(--accent-warm-subtle); border-color: var(--accent-warm); }
|
|
1304
1693
|
.peer-card,
|
|
@@ -1409,7 +1798,7 @@
|
|
|
1409
1798
|
cursor: not-allowed;
|
|
1410
1799
|
}
|
|
1411
1800
|
.settings-button {
|
|
1412
|
-
transition: opacity
|
|
1801
|
+
transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
|
|
1413
1802
|
}
|
|
1414
1803
|
.sync-toggle-admin {
|
|
1415
1804
|
background: none;
|
|
@@ -1554,7 +1943,7 @@
|
|
|
1554
1943
|
font-family: var(--font-sans);
|
|
1555
1944
|
font-size: 13px;
|
|
1556
1945
|
cursor: pointer;
|
|
1557
|
-
transition: border-color
|
|
1946
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1558
1947
|
}
|
|
1559
1948
|
.sync-legacy-select:hover { border-color: var(--border-hover); }
|
|
1560
1949
|
.sync-legacy-select:focus {
|
|
@@ -1566,13 +1955,10 @@
|
|
|
1566
1955
|
border: 1px solid var(--control-border);
|
|
1567
1956
|
background: var(--control-bg);
|
|
1568
1957
|
color: var(--control-text);
|
|
1569
|
-
border-radius: var(--radius-pill);
|
|
1570
1958
|
padding: 8px 14px;
|
|
1571
|
-
font-family: var(--font-sans);
|
|
1572
1959
|
font-size: 13px;
|
|
1573
1960
|
font-weight: 600;
|
|
1574
|
-
|
|
1575
|
-
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
|
1961
|
+
transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
|
|
1576
1962
|
}
|
|
1577
1963
|
.sync-legacy-button:hover {
|
|
1578
1964
|
background: var(--control-hover-bg);
|
|
@@ -1596,7 +1982,7 @@
|
|
|
1596
1982
|
font-family: var(--font-sans);
|
|
1597
1983
|
font-size: 13px;
|
|
1598
1984
|
cursor: pointer;
|
|
1599
|
-
transition: border-color
|
|
1985
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1600
1986
|
}
|
|
1601
1987
|
.sync-actor-select:hover { border-color: var(--border-hover); }
|
|
1602
1988
|
.sync-actor-select:focus {
|
|
@@ -1604,8 +1990,8 @@
|
|
|
1604
1990
|
border-color: var(--accent);
|
|
1605
1991
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
1606
1992
|
}
|
|
1607
|
-
.peer-meta { font-size: 13px; color: var(--text-tertiary); }
|
|
1608
|
-
.peer-addresses { font-family: var(--font-mono); font-size: 12px; color: var(--text-
|
|
1993
|
+
.peer-meta { font-size: 13px; color: var(--text-tertiary); font-feature-settings: 'tnum' 1; }
|
|
1994
|
+
.peer-addresses { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.02em; }
|
|
1609
1995
|
.attempts-list { margin-top: var(--sp-3); display: grid; gap: 6px; font-size: 13px; color: var(--text-tertiary); }
|
|
1610
1996
|
|
|
1611
1997
|
/* ── Pairing ───────────────────────────────────────────── */
|
|
@@ -1634,8 +2020,6 @@
|
|
|
1634
2020
|
|
|
1635
2021
|
.modal-card {
|
|
1636
2022
|
width: min(520px, 100%);
|
|
1637
|
-
background: var(--surface-1);
|
|
1638
|
-
border: 1px solid var(--border);
|
|
1639
2023
|
border-radius: var(--radius-xl);
|
|
1640
2024
|
box-shadow: var(--shadow-lg);
|
|
1641
2025
|
padding: var(--sp-5);
|
|
@@ -1645,6 +2029,34 @@
|
|
|
1645
2029
|
max-height: min(84vh, 720px);
|
|
1646
2030
|
overflow: hidden;
|
|
1647
2031
|
}
|
|
2032
|
+
|
|
2033
|
+
/* ── Tooltip ─────────────────────────────────────────── */
|
|
2034
|
+
/* Radix Tooltip content + arrow. Replaces native title="..." on
|
|
2035
|
+
hover hints where the cue is load-bearing (stat tiles, absolute
|
|
2036
|
+
timestamps, full file paths). Mono by default since most hints
|
|
2037
|
+
are paths / timestamps; callers can override per instance. */
|
|
2038
|
+
.tooltip-content {
|
|
2039
|
+
background: var(--surface-1);
|
|
2040
|
+
border: 1px solid var(--border);
|
|
2041
|
+
border-radius: var(--radius-sm);
|
|
2042
|
+
box-shadow: var(--shadow-md);
|
|
2043
|
+
color: var(--text-primary);
|
|
2044
|
+
padding: 6px 10px;
|
|
2045
|
+
font-family: var(--font-mono);
|
|
2046
|
+
font-size: 11px;
|
|
2047
|
+
line-height: 1.4;
|
|
2048
|
+
letter-spacing: 0.01em;
|
|
2049
|
+
max-width: 320px;
|
|
2050
|
+
z-index: 60;
|
|
2051
|
+
user-select: none;
|
|
2052
|
+
animation: tooltipFade 140ms ease;
|
|
2053
|
+
}
|
|
2054
|
+
.tooltip-content[data-state="closed"] { animation: none; }
|
|
2055
|
+
.tooltip-arrow { fill: var(--surface-1); filter: drop-shadow(0 1px 0 var(--border)); }
|
|
2056
|
+
@keyframes tooltipFade {
|
|
2057
|
+
from { opacity: 0; transform: translateY(2px); }
|
|
2058
|
+
to { opacity: 1; transform: translateY(0); }
|
|
2059
|
+
}
|
|
1648
2060
|
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
|
|
1649
2061
|
.modal-header h2 { margin: 0; font-size: 18px; }
|
|
1650
2062
|
.modal-close-button {
|
|
@@ -1660,7 +2072,7 @@
|
|
|
1660
2072
|
cursor: pointer;
|
|
1661
2073
|
font-family: var(--font-sans);
|
|
1662
2074
|
font-size: 12px;
|
|
1663
|
-
transition: border-color
|
|
2075
|
+
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
|
1664
2076
|
}
|
|
1665
2077
|
.modal-close-button:hover {
|
|
1666
2078
|
border-color: var(--border-hover);
|
|
@@ -1670,47 +2082,107 @@
|
|
|
1670
2082
|
.modal-close-button:focus-visible {
|
|
1671
2083
|
outline: 2px solid var(--accent);
|
|
1672
2084
|
outline-offset: 2px;
|
|
2085
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1673
2086
|
}
|
|
1674
2087
|
.modal-close-button-icon {
|
|
1675
|
-
|
|
2088
|
+
display: inline-flex;
|
|
2089
|
+
align-items: center;
|
|
2090
|
+
justify-content: center;
|
|
2091
|
+
width: 14px;
|
|
2092
|
+
height: 14px;
|
|
1676
2093
|
color: var(--text-tertiary);
|
|
1677
2094
|
}
|
|
2095
|
+
.modal-close-button-icon svg {
|
|
2096
|
+
width: 100%;
|
|
2097
|
+
height: 100%;
|
|
2098
|
+
}
|
|
1678
2099
|
.modal-close-button-label {
|
|
1679
2100
|
font-weight: 600;
|
|
1680
2101
|
letter-spacing: 0.01em;
|
|
1681
2102
|
}
|
|
1682
2103
|
.modal-body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
|
|
1683
2104
|
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-shrink: 0; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
2105
|
+
/* ── Toast (Radix Toast-backed) ───────────────────────── */
|
|
2106
|
+
/* Fixed viewport anchored bottom-right. Each toast is a surface-card
|
|
2107
|
+
with a severity-tinted left accent keyed to .toast-{variant}. */
|
|
2108
|
+
.toast-viewport {
|
|
2109
|
+
position: fixed;
|
|
2110
|
+
bottom: var(--sp-5);
|
|
2111
|
+
right: var(--sp-5);
|
|
2112
|
+
display: flex;
|
|
2113
|
+
flex-direction: column;
|
|
2114
|
+
gap: var(--sp-2);
|
|
2115
|
+
width: min(380px, calc(100vw - var(--sp-5) * 2));
|
|
2116
|
+
max-width: 100%;
|
|
2117
|
+
margin: 0;
|
|
2118
|
+
padding: 0;
|
|
2119
|
+
list-style: none;
|
|
2120
|
+
z-index: 80;
|
|
2121
|
+
outline: none;
|
|
1691
2122
|
}
|
|
1692
|
-
.
|
|
1693
|
-
|
|
1694
|
-
padding: var(--sp-3) var(--sp-4);
|
|
2123
|
+
.toast-root {
|
|
2124
|
+
background: var(--surface-1);
|
|
1695
2125
|
border: 1px solid var(--border);
|
|
2126
|
+
border-left: 3px solid var(--accent);
|
|
1696
2127
|
border-radius: var(--radius-md);
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
2128
|
+
box-shadow: var(--shadow-md);
|
|
2129
|
+
padding: var(--sp-3) var(--sp-4);
|
|
2130
|
+
display: grid;
|
|
2131
|
+
grid-template-columns: 1fr auto;
|
|
2132
|
+
gap: var(--sp-3);
|
|
2133
|
+
align-items: start;
|
|
2134
|
+
color: var(--text-primary);
|
|
2135
|
+
font-size: 13px;
|
|
2136
|
+
line-height: 1.5;
|
|
1701
2137
|
}
|
|
1702
|
-
.
|
|
1703
|
-
|
|
2138
|
+
.toast-root[data-state="open"] { animation: toastSlideIn 160ms ease; }
|
|
2139
|
+
.toast-root[data-state="closed"] { animation: toastFadeOut 140ms ease forwards; }
|
|
2140
|
+
.toast-root[data-swipe="move"] { transform: translateX(var(--radix-toast-swipe-move-x)); }
|
|
2141
|
+
.toast-root[data-swipe="cancel"] { transform: translateX(0); transition: transform 140ms ease; }
|
|
2142
|
+
.toast-root[data-swipe="end"] { animation: toastSwipeOut 140ms ease forwards; }
|
|
2143
|
+
|
|
2144
|
+
.toast-success { border-left-color: var(--accent); }
|
|
2145
|
+
.toast-info { border-left-color: var(--accent-cool); }
|
|
2146
|
+
.toast-warning { border-left-color: var(--accent-warm); }
|
|
2147
|
+
.toast-error { border-left-color: var(--status-attention); }
|
|
2148
|
+
|
|
2149
|
+
.toast-message { color: var(--text-primary); }
|
|
2150
|
+
|
|
2151
|
+
.toast-close {
|
|
2152
|
+
border: 1px solid var(--border);
|
|
2153
|
+
background: transparent;
|
|
2154
|
+
color: var(--text-tertiary);
|
|
2155
|
+
width: 24px;
|
|
2156
|
+
height: 24px;
|
|
2157
|
+
border-radius: var(--radius-pill);
|
|
2158
|
+
display: inline-flex;
|
|
2159
|
+
align-items: center;
|
|
2160
|
+
justify-content: center;
|
|
2161
|
+
font-size: 14px;
|
|
2162
|
+
line-height: 1;
|
|
2163
|
+
cursor: pointer;
|
|
2164
|
+
transition: background-color 140ms ease, color 140ms ease;
|
|
2165
|
+
padding: 0;
|
|
2166
|
+
flex-shrink: 0;
|
|
1704
2167
|
}
|
|
1705
|
-
.
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
2168
|
+
.toast-close:hover { background: var(--surface-2); color: var(--text-primary); }
|
|
2169
|
+
.toast-close:focus-visible {
|
|
2170
|
+
outline: 2px solid var(--accent);
|
|
2171
|
+
outline-offset: 2px;
|
|
2172
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1709
2173
|
}
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
2174
|
+
|
|
2175
|
+
@keyframes toastSlideIn {
|
|
2176
|
+
from { transform: translateX(calc(100% + var(--sp-5))); opacity: 0; }
|
|
2177
|
+
to { transform: translateX(0); opacity: 1; }
|
|
2178
|
+
}
|
|
2179
|
+
@keyframes toastFadeOut {
|
|
2180
|
+
from { opacity: 1; }
|
|
2181
|
+
to { opacity: 0; }
|
|
2182
|
+
}
|
|
2183
|
+
@keyframes toastSwipeOut {
|
|
2184
|
+
from { transform: translateX(var(--radix-toast-swipe-end-x)); }
|
|
2185
|
+
to { transform: translateX(calc(100% + var(--sp-5))); }
|
|
1714
2186
|
}
|
|
1715
2187
|
.viewer-reconnect-overlay {
|
|
1716
2188
|
position: fixed;
|
|
@@ -1792,6 +2264,24 @@
|
|
|
1792
2264
|
.settings-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
|
|
1793
2265
|
.settings-panel[data-state="inactive"] { display: none; }
|
|
1794
2266
|
.settings-panel[hidden] { display: none; }
|
|
2267
|
+
.settings-section-intro {
|
|
2268
|
+
display: flex;
|
|
2269
|
+
flex-direction: column;
|
|
2270
|
+
gap: 4px;
|
|
2271
|
+
padding: var(--sp-2) var(--sp-3);
|
|
2272
|
+
border: 1px solid var(--border);
|
|
2273
|
+
border-radius: var(--radius-sm);
|
|
2274
|
+
background: color-mix(in srgb, var(--surface-0) 78%, var(--accent-subtle));
|
|
2275
|
+
}
|
|
2276
|
+
.settings-section-intro-title {
|
|
2277
|
+
color: var(--text-primary);
|
|
2278
|
+
font-size: 13px;
|
|
2279
|
+
font-weight: 600;
|
|
2280
|
+
}
|
|
2281
|
+
.settings-section-intro-detail {
|
|
2282
|
+
margin: 0;
|
|
2283
|
+
color: var(--text-secondary);
|
|
2284
|
+
}
|
|
1795
2285
|
.observer-status-banner {
|
|
1796
2286
|
display: flex;
|
|
1797
2287
|
flex-direction: column;
|
|
@@ -1864,26 +2354,26 @@
|
|
|
1864
2354
|
}
|
|
1865
2355
|
|
|
1866
2356
|
.help-icon {
|
|
1867
|
-
width:
|
|
1868
|
-
height:
|
|
1869
|
-
border:
|
|
2357
|
+
width: 20px;
|
|
2358
|
+
height: 20px;
|
|
2359
|
+
border: none;
|
|
2360
|
+
background: transparent;
|
|
1870
2361
|
border-radius: 999px;
|
|
1871
2362
|
display: inline-flex;
|
|
1872
2363
|
align-items: center;
|
|
1873
2364
|
justify-content: center;
|
|
1874
|
-
|
|
1875
|
-
color: var(--text-secondary);
|
|
2365
|
+
color: var(--text-tertiary);
|
|
1876
2366
|
cursor: pointer;
|
|
1877
2367
|
user-select: none;
|
|
1878
|
-
background: var(--surface-0);
|
|
1879
2368
|
position: relative;
|
|
1880
2369
|
padding: 0;
|
|
1881
2370
|
}
|
|
1882
|
-
|
|
2371
|
+
.help-icon:hover { color: var(--accent); background: var(--accent-subtle); }
|
|
1883
2372
|
.help-icon:focus-visible {
|
|
1884
|
-
outline: 2px solid var(--
|
|
1885
|
-
outline-offset:
|
|
2373
|
+
outline: 2px solid var(--accent);
|
|
2374
|
+
outline-offset: 2px;
|
|
1886
2375
|
}
|
|
2376
|
+
.help-icon svg { width: 14px; height: 14px; stroke-width: 2; }
|
|
1887
2377
|
|
|
1888
2378
|
.help-tooltip {
|
|
1889
2379
|
position: fixed;
|
|
@@ -1909,14 +2399,15 @@
|
|
|
1909
2399
|
transform: translateY(0);
|
|
1910
2400
|
}
|
|
1911
2401
|
|
|
2402
|
+
/* Inline control row — not its own bordered surface. Lets the intro
|
|
2403
|
+
copy → toggle → tabs read as three stages of hierarchy (context,
|
|
2404
|
+
quick setting, primary nav) instead of three equal-weight cards. */
|
|
1912
2405
|
.settings-advanced-toolbar {
|
|
1913
2406
|
display: flex;
|
|
1914
2407
|
align-items: center;
|
|
1915
|
-
gap:
|
|
1916
|
-
padding:
|
|
1917
|
-
|
|
1918
|
-
border-radius: var(--radius-sm);
|
|
1919
|
-
background: var(--surface-0);
|
|
2408
|
+
gap: 10px;
|
|
2409
|
+
padding: 4px 0;
|
|
2410
|
+
color: var(--text-secondary);
|
|
1920
2411
|
}
|
|
1921
2412
|
|
|
1922
2413
|
.settings-advanced-toolbar input {
|
|
@@ -1983,6 +2474,62 @@
|
|
|
1983
2474
|
.field-checkbox { flex-direction: row; align-items: center; gap: 8px; }
|
|
1984
2475
|
.field-checkbox input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
|
|
1985
2476
|
.field-checkbox label { margin: 0; }
|
|
2477
|
+
.settings-switch-row {
|
|
2478
|
+
display: inline-flex;
|
|
2479
|
+
align-items: center;
|
|
2480
|
+
justify-content: flex-start;
|
|
2481
|
+
gap: 10px;
|
|
2482
|
+
flex: 0 1 auto;
|
|
2483
|
+
}
|
|
2484
|
+
.settings-switch-copy {
|
|
2485
|
+
color: var(--text-primary);
|
|
2486
|
+
line-height: 1.35;
|
|
2487
|
+
cursor: pointer;
|
|
2488
|
+
}
|
|
2489
|
+
.settings-switch {
|
|
2490
|
+
width: 34px;
|
|
2491
|
+
height: 20px;
|
|
2492
|
+
border: 1px solid color-mix(in srgb, var(--text-tertiary) 42%, var(--control-border));
|
|
2493
|
+
border-radius: var(--radius-pill);
|
|
2494
|
+
background: color-mix(in srgb, var(--surface-1) 82%, var(--surface-0));
|
|
2495
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-tertiary) 8%, transparent);
|
|
2496
|
+
cursor: pointer;
|
|
2497
|
+
flex-shrink: 0;
|
|
2498
|
+
padding: 1px;
|
|
2499
|
+
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
2500
|
+
}
|
|
2501
|
+
.settings-switch:hover {
|
|
2502
|
+
border-color: color-mix(in srgb, var(--accent) 38%, var(--control-hover-border));
|
|
2503
|
+
}
|
|
2504
|
+
.settings-switch:focus-visible {
|
|
2505
|
+
outline: 2px solid var(--accent);
|
|
2506
|
+
outline-offset: 2px;
|
|
2507
|
+
}
|
|
2508
|
+
.settings-switch[data-state="checked"] {
|
|
2509
|
+
background: color-mix(in srgb, var(--accent) 18%, var(--surface-1));
|
|
2510
|
+
border-color: color-mix(in srgb, var(--accent) 54%, var(--control-hover-border));
|
|
2511
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
2512
|
+
}
|
|
2513
|
+
.settings-switch:disabled {
|
|
2514
|
+
opacity: 0.55;
|
|
2515
|
+
cursor: not-allowed;
|
|
2516
|
+
}
|
|
2517
|
+
.settings-switch-thumb {
|
|
2518
|
+
display: block;
|
|
2519
|
+
width: 16px;
|
|
2520
|
+
height: 16px;
|
|
2521
|
+
border-radius: 50%;
|
|
2522
|
+
background: color-mix(in srgb, var(--surface-0) 88%, white);
|
|
2523
|
+
border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
|
|
2524
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
2525
|
+
transition: transform 140ms ease, background 140ms ease;
|
|
2526
|
+
transform: translateX(0);
|
|
2527
|
+
}
|
|
2528
|
+
.settings-switch[data-state="checked"] .settings-switch-thumb {
|
|
2529
|
+
transform: translateX(14px);
|
|
2530
|
+
background: color-mix(in srgb, var(--accent) 88%, white);
|
|
2531
|
+
border-color: color-mix(in srgb, var(--accent) 42%, transparent);
|
|
2532
|
+
}
|
|
1986
2533
|
.cm-checkbox {
|
|
1987
2534
|
appearance: none;
|
|
1988
2535
|
width: 16px;
|
|
@@ -2022,7 +2569,7 @@
|
|
|
2022
2569
|
font-family: var(--font-sans);
|
|
2023
2570
|
font-size: 12px;
|
|
2024
2571
|
cursor: pointer;
|
|
2025
|
-
transition: background
|
|
2572
|
+
transition: background 140ms ease;
|
|
2026
2573
|
}
|
|
2027
2574
|
.settings-save:hover { background: var(--control-hover-bg); }
|
|
2028
2575
|
.sync-dialog-card {
|
|
@@ -2078,7 +2625,7 @@
|
|
|
2078
2625
|
border-radius: var(--radius-md);
|
|
2079
2626
|
background: color-mix(in srgb, var(--surface-1) 86%, var(--surface-0));
|
|
2080
2627
|
cursor: pointer;
|
|
2081
|
-
transition: border-color
|
|
2628
|
+
transition: border-color 140ms ease, background 140ms ease;
|
|
2082
2629
|
}
|
|
2083
2630
|
.sync-dialog-radio-option:hover {
|
|
2084
2631
|
border-color: var(--border-hover);
|
|
@@ -2138,10 +2685,19 @@
|
|
|
2138
2685
|
50% { transform: scale(1.3); opacity: 0.5; }
|
|
2139
2686
|
}
|
|
2140
2687
|
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2688
|
+
/* newPulse: fresh feed items pulse their kind-banner bottom border
|
|
2689
|
+
from accent-strong to transparent once on mount. The class is
|
|
2690
|
+
applied by feed.ts only while state.newItemKeys holds the item's
|
|
2691
|
+
key (700ms useEffect then clears it). Skipped entirely under
|
|
2692
|
+
prefers-reduced-motion so the ambient accessibility pass still
|
|
2693
|
+
applies. */
|
|
2694
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2695
|
+
@keyframes newPulse {
|
|
2696
|
+
0% { box-shadow: 0 0 0 0 var(--accent-strong); }
|
|
2697
|
+
30% { box-shadow: 0 0 0 6px var(--accent-subtle); }
|
|
2698
|
+
100% { box-shadow: 0 0 0 0 transparent; }
|
|
2699
|
+
}
|
|
2700
|
+
.feed-item.new-item { animation: newPulse 420ms ease-out 1; }
|
|
2145
2701
|
}
|
|
2146
2702
|
|
|
2147
2703
|
/* ── Responsive ────────────────────────────────────────── */
|
|
@@ -2155,6 +2711,7 @@
|
|
|
2155
2711
|
.peer-scope-row { grid-template-columns: 1fr; }
|
|
2156
2712
|
.feed-visibility-controls { align-items: stretch; }
|
|
2157
2713
|
.feed-visibility-select { width: 100%; }
|
|
2714
|
+
.actor-actions { justify-content: flex-start; }
|
|
2158
2715
|
}
|
|
2159
2716
|
|
|
2160
2717
|
@media (max-width: 520px) {
|
|
@@ -2180,11 +2737,10 @@
|
|
|
2180
2737
|
<div class="header-left">
|
|
2181
2738
|
<div class="header-brand">
|
|
2182
2739
|
<span class="logo" aria-hidden="true">
|
|
2183
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
|
|
2184
|
-
<
|
|
2185
|
-
<
|
|
2186
|
-
<
|
|
2187
|
-
<path d="M7.5 3.5h13v13h-13z" fill="none" stroke="currentColor" stroke-width="2.8" opacity="0.82"/>
|
|
2740
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
|
2741
|
+
<rect x="2" y="2" width="13" height="13" rx="2.25" fill="none" stroke="currentColor" stroke-opacity="0.32" stroke-width="1.2"/>
|
|
2742
|
+
<rect x="5.5" y="5.5" width="13" height="13" rx="2.25" fill="currentColor" fill-opacity="0.14" stroke="currentColor" stroke-opacity="0.55" stroke-width="1.2"/>
|
|
2743
|
+
<rect x="9" y="9" width="13" height="13" rx="2.25" fill="currentColor"/>
|
|
2188
2744
|
</svg>
|
|
2189
2745
|
</span>
|
|
2190
2746
|
<span class="header-title">codemem</span>
|
|
@@ -2199,9 +2755,12 @@
|
|
|
2199
2755
|
<select class="project-filter" id="projectFilter" aria-label="Project filter">
|
|
2200
2756
|
<option value="">All Projects</option>
|
|
2201
2757
|
</select>
|
|
2202
|
-
<
|
|
2203
|
-
|
|
2204
|
-
|
|
2758
|
+
<button class="icon-button" id="themeToggle" type="button" aria-label="Switch theme">
|
|
2759
|
+
<i data-lucide="sun" aria-hidden="true"></i>
|
|
2760
|
+
</button>
|
|
2761
|
+
<button class="icon-button" id="settingsButton" type="button" aria-label="Settings">
|
|
2762
|
+
<i data-lucide="settings" aria-hidden="true"></i>
|
|
2763
|
+
</button>
|
|
2205
2764
|
</div>
|
|
2206
2765
|
</div>
|
|
2207
2766
|
</header>
|
|
@@ -2213,7 +2772,7 @@
|
|
|
2213
2772
|
<button class="tab-btn" id="tabBtn-sync">Sync</button>
|
|
2214
2773
|
<button class="tab-btn" id="tabBtn-coordinator-admin">Coordinator Admin</button>
|
|
2215
2774
|
</nav>
|
|
2216
|
-
<div
|
|
2775
|
+
<div id="toastRoot"></div>
|
|
2217
2776
|
<div class="viewer-reconnect-overlay" id="viewerReconnectOverlay" hidden>
|
|
2218
2777
|
<div class="viewer-reconnect-card" role="status" aria-live="assertive">
|
|
2219
2778
|
<div class="viewer-reconnect-eyebrow">Viewer connection</div>
|
|
@@ -2238,7 +2797,7 @@
|
|
|
2238
2797
|
<div class="modal-header">
|
|
2239
2798
|
<h2 id="settingsTitle">Memory & model settings</h2>
|
|
2240
2799
|
<button class="modal-close-button" id="settingsClose" aria-label="Close settings">
|
|
2241
|
-
<
|
|
2800
|
+
<i class="modal-close-button-icon" aria-hidden="true" data-lucide="x"></i>
|
|
2242
2801
|
<span class="modal-close-button-label">Close</span>
|
|
2243
2802
|
</button>
|
|
2244
2803
|
</div>
|
|
@@ -2468,7 +3027,10 @@
|
|
|
2468
3027
|
<!-- 1. Needs attention + team setup/status -->
|
|
2469
3028
|
<div class="card" id="syncTeamCard">
|
|
2470
3029
|
<div class="section-header">
|
|
2471
|
-
<
|
|
3030
|
+
<div class="section-header-title">
|
|
3031
|
+
<h2>Team sync</h2>
|
|
3032
|
+
<span class="sync-online-badge" id="syncOnlineBadge" hidden role="status" aria-live="polite"></span>
|
|
3033
|
+
</div>
|
|
2472
3034
|
<div class="section-actions">
|
|
2473
3035
|
<button class="settings-button" id="syncNowButton">Sync now</button>
|
|
2474
3036
|
</div>
|
|
@@ -2511,8 +3073,10 @@
|
|
|
2511
3073
|
<h3 class="settings-group-title">People</h3>
|
|
2512
3074
|
<div class="section-meta" id="syncActorsMeta">Create and rename people here. Assign each device below.</div>
|
|
2513
3075
|
<div class="actor-create-row">
|
|
2514
|
-
<
|
|
2515
|
-
|
|
3076
|
+
<div class="sync-labeled-field">
|
|
3077
|
+
<label for="syncActorCreateInput" class="sync-labeled-field-caption">Person name</label>
|
|
3078
|
+
<input class="peer-scope-input" id="syncActorCreateInput" placeholder="e.g. Alex, backend team" />
|
|
3079
|
+
</div>
|
|
2516
3080
|
<button class="settings-button" id="syncActorCreateButton">Create person</button>
|
|
2517
3081
|
</div>
|
|
2518
3082
|
<div class="actor-list" id="syncActorsList"></div>
|