@codemem/server 0.27.0 → 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 +82 -6
- 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 +14918 -12421
- package/static/favicon.svg +4 -14
- package/static/index.html +833 -369
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
|
|
|
@@ -883,7 +1008,7 @@
|
|
|
883
1008
|
.feed-search {
|
|
884
1009
|
min-width: 200px;
|
|
885
1010
|
flex: 1;
|
|
886
|
-
max-width:
|
|
1011
|
+
max-width: 420px;
|
|
887
1012
|
padding: 8px var(--sp-3);
|
|
888
1013
|
border-radius: var(--radius-md);
|
|
889
1014
|
border: 1px solid var(--border);
|
|
@@ -892,7 +1017,7 @@
|
|
|
892
1017
|
font-family: var(--font-sans);
|
|
893
1018
|
font-size: 13px;
|
|
894
1019
|
outline: none;
|
|
895
|
-
transition: border-color
|
|
1020
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
896
1021
|
}
|
|
897
1022
|
.feed-search::placeholder { color: var(--text-tertiary); }
|
|
898
1023
|
.feed-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
|
|
@@ -911,7 +1036,7 @@
|
|
|
911
1036
|
line-height: 1.45;
|
|
912
1037
|
resize: vertical;
|
|
913
1038
|
outline: none;
|
|
914
|
-
transition: border-color
|
|
1039
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
915
1040
|
}
|
|
916
1041
|
.feed-inspector-files::placeholder { color: var(--text-tertiary); }
|
|
917
1042
|
.feed-inspector-files:focus {
|
|
@@ -925,7 +1050,7 @@
|
|
|
925
1050
|
padding: 3px;
|
|
926
1051
|
border-radius: var(--radius-pill);
|
|
927
1052
|
border: 1px solid var(--border);
|
|
928
|
-
background: var(--surface-
|
|
1053
|
+
background: color-mix(in srgb, var(--surface-0) 70%, transparent);
|
|
929
1054
|
}
|
|
930
1055
|
|
|
931
1056
|
.toggle-button {
|
|
@@ -934,16 +1059,28 @@
|
|
|
934
1059
|
color: var(--text-tertiary);
|
|
935
1060
|
font-family: var(--font-sans);
|
|
936
1061
|
font-size: 12px;
|
|
937
|
-
padding: 4px
|
|
1062
|
+
padding: 4px 12px;
|
|
938
1063
|
border-radius: var(--radius-pill);
|
|
939
1064
|
cursor: pointer;
|
|
940
1065
|
display: inline-flex;
|
|
941
1066
|
align-items: center;
|
|
942
1067
|
gap: 5px;
|
|
943
|
-
transition: background
|
|
1068
|
+
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
|
|
944
1069
|
}
|
|
945
1070
|
.toggle-button:hover { background: var(--toggle-hover-bg); color: var(--text-primary); }
|
|
946
|
-
.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
|
+
}
|
|
947
1084
|
|
|
948
1085
|
.feed-list {
|
|
949
1086
|
display: flex;
|
|
@@ -951,35 +1088,106 @@
|
|
|
951
1088
|
gap: var(--sp-3);
|
|
952
1089
|
}
|
|
953
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
|
+
|
|
954
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. */
|
|
955
1150
|
|
|
956
1151
|
.feed-item {
|
|
957
1152
|
border: 1px solid var(--border);
|
|
958
|
-
border-
|
|
959
|
-
border-radius: var(--radius-lg);
|
|
960
|
-
padding: var(--sp-4) var(--sp-5);
|
|
1153
|
+
border-radius: var(--radius-md);
|
|
961
1154
|
background: var(--surface-1);
|
|
1155
|
+
overflow: hidden;
|
|
962
1156
|
display: flex;
|
|
963
1157
|
flex-direction: column;
|
|
964
|
-
|
|
965
|
-
transition: transform
|
|
1158
|
+
box-shadow: var(--shadow-sm);
|
|
1159
|
+
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
966
1160
|
}
|
|
967
1161
|
.feed-item:hover {
|
|
968
1162
|
transform: translateY(-1px);
|
|
969
|
-
box-shadow: var(--shadow-
|
|
1163
|
+
box-shadow: var(--shadow-md);
|
|
970
1164
|
border-color: var(--border-hover);
|
|
971
1165
|
}
|
|
972
|
-
.feed-item.new-item { animation: newPulse 420ms ease-out 1; }
|
|
973
1166
|
|
|
974
|
-
/* Kind
|
|
975
|
-
.feed-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
.feed-item.
|
|
981
|
-
.feed-item.
|
|
982
|
-
.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
|
+
}
|
|
983
1191
|
|
|
984
1192
|
.feed-card-header {
|
|
985
1193
|
display: flex;
|
|
@@ -1014,20 +1222,14 @@
|
|
|
1014
1222
|
z-index: 24;
|
|
1015
1223
|
}
|
|
1016
1224
|
.feed-menu-trigger {
|
|
1017
|
-
display: inline-flex;
|
|
1018
|
-
align-items: center;
|
|
1019
|
-
justify-content: center;
|
|
1020
1225
|
width: 30px;
|
|
1021
1226
|
height: 30px;
|
|
1022
1227
|
border: 1px solid var(--border);
|
|
1023
|
-
border-radius: var(--radius-pill);
|
|
1024
1228
|
background: transparent;
|
|
1025
1229
|
color: var(--text-tertiary);
|
|
1026
|
-
font-family: var(--font-sans);
|
|
1027
1230
|
font-size: 18px;
|
|
1028
1231
|
line-height: 1;
|
|
1029
|
-
|
|
1030
|
-
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;
|
|
1031
1233
|
}
|
|
1032
1234
|
.feed-menu-trigger:hover,
|
|
1033
1235
|
.feed-menu-trigger[data-state="open"] {
|
|
@@ -1038,6 +1240,7 @@
|
|
|
1038
1240
|
.feed-menu-trigger:focus-visible {
|
|
1039
1241
|
outline: 2px solid var(--accent);
|
|
1040
1242
|
outline-offset: 2px;
|
|
1243
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1041
1244
|
}
|
|
1042
1245
|
.feed-menu-item {
|
|
1043
1246
|
display: flex;
|
|
@@ -1078,11 +1281,50 @@
|
|
|
1078
1281
|
overflow-wrap: anywhere;
|
|
1079
1282
|
word-break: break-word;
|
|
1080
1283
|
}
|
|
1081
|
-
|
|
1284
|
+
.feed-card-subtitle {
|
|
1285
|
+
width: 100%;
|
|
1286
|
+
color: var(--text-tertiary);
|
|
1287
|
+
}
|
|
1082
1288
|
.feed-meta {
|
|
1083
1289
|
color: var(--text-tertiary);
|
|
1084
1290
|
font-size: 12px;
|
|
1085
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
|
+
}
|
|
1086
1328
|
|
|
1087
1329
|
.feed-provenance {
|
|
1088
1330
|
display: flex;
|
|
@@ -1090,18 +1332,34 @@
|
|
|
1090
1332
|
gap: 6px;
|
|
1091
1333
|
}
|
|
1092
1334
|
|
|
1093
|
-
|
|
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 {
|
|
1094
1346
|
display: inline-flex;
|
|
1095
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 {
|
|
1096
1358
|
gap: 4px;
|
|
1097
1359
|
padding: 3px 8px;
|
|
1098
|
-
border-
|
|
1099
|
-
border: 1px solid var(--border);
|
|
1360
|
+
border-color: var(--border);
|
|
1100
1361
|
background: var(--surface-2);
|
|
1101
1362
|
color: var(--text-tertiary);
|
|
1102
|
-
font-size: 11px;
|
|
1103
|
-
line-height: 1.2;
|
|
1104
|
-
white-space: nowrap;
|
|
1105
1363
|
}
|
|
1106
1364
|
.provenance-chip.mine { background: var(--accent-subtle); color: var(--accent); border-color: rgba(43, 122, 176, 0.18); }
|
|
1107
1365
|
.provenance-chip.author { color: var(--text-secondary); }
|
|
@@ -1172,68 +1430,73 @@
|
|
|
1172
1430
|
border: 1px solid var(--border);
|
|
1173
1431
|
background: transparent;
|
|
1174
1432
|
color: var(--text-tertiary);
|
|
1175
|
-
border-radius: var(--radius-pill);
|
|
1176
1433
|
padding: 3px 10px;
|
|
1177
|
-
font-family: var(--font-sans);
|
|
1178
1434
|
font-size: 11px;
|
|
1179
|
-
|
|
1180
|
-
transition: background 0.15s ease, color 0.15s ease;
|
|
1435
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1181
1436
|
}
|
|
1182
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
|
+
}
|
|
1183
1443
|
|
|
1184
1444
|
.feed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
.feed-
|
|
1188
|
-
|
|
1189
|
-
/* ── Pills & badges ────────────────────────────────────── */
|
|
1190
|
-
|
|
1191
|
-
.kind-pill {
|
|
1192
|
-
display: inline-flex;
|
|
1193
|
-
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 {
|
|
1194
1449
|
padding: 2px 8px;
|
|
1195
|
-
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);
|
|
1196
1454
|
font-size: 11px;
|
|
1197
|
-
|
|
1198
|
-
letter-spacing: 0.2px;
|
|
1455
|
+
color: var(--text-tertiary);
|
|
1199
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;
|
|
1200
1471
|
background: var(--accent-subtle);
|
|
1201
1472
|
color: var(--accent);
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
.kind-
|
|
1205
|
-
.kind-
|
|
1206
|
-
.kind-
|
|
1207
|
-
.kind-
|
|
1208
|
-
.kind-
|
|
1209
|
-
.kind-
|
|
1210
|
-
.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); }
|
|
1211
1484
|
|
|
1212
1485
|
.tag-chip {
|
|
1213
|
-
display: inline-flex;
|
|
1214
|
-
align-items: center;
|
|
1215
|
-
gap: 6px;
|
|
1216
1486
|
padding: 2px 10px;
|
|
1217
|
-
border-radius: var(--radius-pill);
|
|
1218
1487
|
background: var(--accent-cool-subtle);
|
|
1219
1488
|
color: var(--accent-cool);
|
|
1220
|
-
font-size: 11px;
|
|
1221
1489
|
font-weight: 500;
|
|
1222
1490
|
}
|
|
1223
1491
|
|
|
1224
1492
|
.badge {
|
|
1225
|
-
display: inline-flex;
|
|
1226
|
-
align-items: center;
|
|
1227
|
-
gap: 6px;
|
|
1228
|
-
padding: 3px 10px;
|
|
1229
|
-
border-radius: var(--radius-pill);
|
|
1230
|
-
background: var(--accent-cool-subtle);
|
|
1231
|
-
color: var(--accent-cool);
|
|
1232
1493
|
font-size: 12px;
|
|
1233
1494
|
font-weight: 600;
|
|
1495
|
+
background: var(--accent-cool-subtle);
|
|
1496
|
+
color: var(--accent-cool);
|
|
1234
1497
|
}
|
|
1235
|
-
.badge-online { background:
|
|
1236
|
-
.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); }
|
|
1237
1500
|
|
|
1238
1501
|
.pill {
|
|
1239
1502
|
display: inline-block;
|
|
@@ -1243,13 +1506,48 @@
|
|
|
1243
1506
|
color: var(--accent);
|
|
1244
1507
|
font-size: 12px;
|
|
1245
1508
|
font-weight: 600;
|
|
1246
|
-
transition: background
|
|
1509
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1247
1510
|
}
|
|
1248
1511
|
.pill.alt { background: var(--accent-warm-subtle); color: var(--accent-warm); }
|
|
1249
1512
|
.pill-success { background: var(--green-bg, #16a34a22); color: var(--green-text, #16a34a); }
|
|
1250
1513
|
.pill-warning { background: var(--yellow-bg, #ca8a0422); color: var(--yellow-text, #ca8a04); }
|
|
1251
1514
|
.pill-error { background: var(--red-bg, #dc262622); color: var(--red-text, #dc2626); }
|
|
1252
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
|
+
|
|
1253
1551
|
.match {
|
|
1254
1552
|
padding: 0 2px;
|
|
1255
1553
|
border-radius: 3px;
|
|
@@ -1267,7 +1565,7 @@
|
|
|
1267
1565
|
|
|
1268
1566
|
.health-action, .sync-action {
|
|
1269
1567
|
display: flex;
|
|
1270
|
-
align-items:
|
|
1568
|
+
align-items: flex-start;
|
|
1271
1569
|
justify-content: space-between;
|
|
1272
1570
|
gap: var(--sp-3);
|
|
1273
1571
|
padding: var(--sp-3);
|
|
@@ -1297,36 +1595,73 @@
|
|
|
1297
1595
|
font-size: 11px;
|
|
1298
1596
|
padding: 2px 8px;
|
|
1299
1597
|
}
|
|
1598
|
+
.sync-section-note {
|
|
1599
|
+
margin-top: -2px;
|
|
1600
|
+
margin-bottom: var(--sp-1);
|
|
1601
|
+
max-width: 72ch;
|
|
1602
|
+
}
|
|
1300
1603
|
.health-action-command, .sync-action-command { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
|
|
1301
|
-
.health-action-buttons { display: flex; gap: 6px; flex-shrink: 0; }
|
|
1604
|
+
.health-action-buttons { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
|
|
1302
1605
|
|
|
1303
1606
|
/* ── Diagnostics ───────────────────────────────────────── */
|
|
1304
1607
|
|
|
1305
1608
|
.diag-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
|
|
1306
|
-
|
|
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
|
+
}
|
|
1307
1623
|
.diag-line .left { min-width: 0; }
|
|
1308
|
-
.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
|
+
}
|
|
1309
1629
|
|
|
1310
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); }
|
|
1311
1631
|
.diag-group summary { cursor: pointer; color: var(--text-tertiary); font-size: 13px; }
|
|
1312
1632
|
|
|
1313
1633
|
/* ── Peers ─────────────────────────────────────────────── */
|
|
1314
1634
|
|
|
1315
|
-
.peer-list { display: grid; gap: var(--sp-3); }
|
|
1316
|
-
|
|
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); }
|
|
1317
1640
|
.peer-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1318
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
|
+
}
|
|
1319
1654
|
.actor-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
|
|
1320
|
-
.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); }
|
|
1321
1656
|
.actor-details { min-width: 0; display: grid; gap: 6px; }
|
|
1322
1657
|
.actor-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
1323
|
-
.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; }
|
|
1324
1659
|
.actor-name-input { min-width: 220px; }
|
|
1325
1660
|
.actor-merge-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1326
1661
|
.actor-merge-select { min-width: 200px; }
|
|
1327
1662
|
.actor-merge-note { width: 100%; }
|
|
1328
|
-
.actor-create-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
|
|
1329
|
-
.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; }
|
|
1330
1665
|
.actor-badge.local { background: rgba(31, 111, 92, 0.12); color: var(--accent); }
|
|
1331
1666
|
.peer-scope { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
|
|
1332
1667
|
.peer-scope-summary, .peer-scope-effective { font-size: 12px; color: var(--text-secondary); }
|
|
@@ -1334,15 +1669,25 @@
|
|
|
1334
1669
|
.peer-scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
|
|
1335
1670
|
.peer-scope-editor { display: grid; gap: 8px; }
|
|
1336
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); }
|
|
1337
|
-
.peer-scope-chip {
|
|
1338
|
-
.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); }
|
|
1339
1674
|
.peer-scope-chip-remove { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0; font: inherit; opacity: 0.75; }
|
|
1340
1675
|
.peer-scope-chip-remove:hover { opacity: 1; }
|
|
1341
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; }
|
|
1342
|
-
.peer-scope-actions { display: flex; gap: var(--sp-2); }
|
|
1343
|
-
.peer-actions { display: flex; gap: 6px; }
|
|
1344
|
-
|
|
1345
|
-
|
|
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
|
+
}
|
|
1346
1691
|
.peer-actions button.danger { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 36%, var(--border)); }
|
|
1347
1692
|
.peer-actions button.danger:hover { background: var(--accent-warm-subtle); border-color: var(--accent-warm); }
|
|
1348
1693
|
.peer-card,
|
|
@@ -1453,7 +1798,7 @@
|
|
|
1453
1798
|
cursor: not-allowed;
|
|
1454
1799
|
}
|
|
1455
1800
|
.settings-button {
|
|
1456
|
-
transition: opacity
|
|
1801
|
+
transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
|
|
1457
1802
|
}
|
|
1458
1803
|
.sync-toggle-admin {
|
|
1459
1804
|
background: none;
|
|
@@ -1598,7 +1943,7 @@
|
|
|
1598
1943
|
font-family: var(--font-sans);
|
|
1599
1944
|
font-size: 13px;
|
|
1600
1945
|
cursor: pointer;
|
|
1601
|
-
transition: border-color
|
|
1946
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1602
1947
|
}
|
|
1603
1948
|
.sync-legacy-select:hover { border-color: var(--border-hover); }
|
|
1604
1949
|
.sync-legacy-select:focus {
|
|
@@ -1610,13 +1955,10 @@
|
|
|
1610
1955
|
border: 1px solid var(--control-border);
|
|
1611
1956
|
background: var(--control-bg);
|
|
1612
1957
|
color: var(--control-text);
|
|
1613
|
-
border-radius: var(--radius-pill);
|
|
1614
1958
|
padding: 8px 14px;
|
|
1615
|
-
font-family: var(--font-sans);
|
|
1616
1959
|
font-size: 13px;
|
|
1617
1960
|
font-weight: 600;
|
|
1618
|
-
|
|
1619
|
-
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;
|
|
1620
1962
|
}
|
|
1621
1963
|
.sync-legacy-button:hover {
|
|
1622
1964
|
background: var(--control-hover-bg);
|
|
@@ -1640,7 +1982,7 @@
|
|
|
1640
1982
|
font-family: var(--font-sans);
|
|
1641
1983
|
font-size: 13px;
|
|
1642
1984
|
cursor: pointer;
|
|
1643
|
-
transition: border-color
|
|
1985
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1644
1986
|
}
|
|
1645
1987
|
.sync-actor-select:hover { border-color: var(--border-hover); }
|
|
1646
1988
|
.sync-actor-select:focus {
|
|
@@ -1648,8 +1990,8 @@
|
|
|
1648
1990
|
border-color: var(--accent);
|
|
1649
1991
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
1650
1992
|
}
|
|
1651
|
-
.peer-meta { font-size: 13px; color: var(--text-tertiary); }
|
|
1652
|
-
.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; }
|
|
1653
1995
|
.attempts-list { margin-top: var(--sp-3); display: grid; gap: 6px; font-size: 13px; color: var(--text-tertiary); }
|
|
1654
1996
|
|
|
1655
1997
|
/* ── Pairing ───────────────────────────────────────────── */
|
|
@@ -1678,8 +2020,6 @@
|
|
|
1678
2020
|
|
|
1679
2021
|
.modal-card {
|
|
1680
2022
|
width: min(520px, 100%);
|
|
1681
|
-
background: var(--surface-1);
|
|
1682
|
-
border: 1px solid var(--border);
|
|
1683
2023
|
border-radius: var(--radius-xl);
|
|
1684
2024
|
box-shadow: var(--shadow-lg);
|
|
1685
2025
|
padding: var(--sp-5);
|
|
@@ -1689,6 +2029,34 @@
|
|
|
1689
2029
|
max-height: min(84vh, 720px);
|
|
1690
2030
|
overflow: hidden;
|
|
1691
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
|
+
}
|
|
1692
2060
|
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
|
|
1693
2061
|
.modal-header h2 { margin: 0; font-size: 18px; }
|
|
1694
2062
|
.modal-close-button {
|
|
@@ -1704,7 +2072,7 @@
|
|
|
1704
2072
|
cursor: pointer;
|
|
1705
2073
|
font-family: var(--font-sans);
|
|
1706
2074
|
font-size: 12px;
|
|
1707
|
-
transition: border-color
|
|
2075
|
+
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
|
1708
2076
|
}
|
|
1709
2077
|
.modal-close-button:hover {
|
|
1710
2078
|
border-color: var(--border-hover);
|
|
@@ -1714,47 +2082,107 @@
|
|
|
1714
2082
|
.modal-close-button:focus-visible {
|
|
1715
2083
|
outline: 2px solid var(--accent);
|
|
1716
2084
|
outline-offset: 2px;
|
|
2085
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1717
2086
|
}
|
|
1718
2087
|
.modal-close-button-icon {
|
|
1719
|
-
|
|
2088
|
+
display: inline-flex;
|
|
2089
|
+
align-items: center;
|
|
2090
|
+
justify-content: center;
|
|
2091
|
+
width: 14px;
|
|
2092
|
+
height: 14px;
|
|
1720
2093
|
color: var(--text-tertiary);
|
|
1721
2094
|
}
|
|
2095
|
+
.modal-close-button-icon svg {
|
|
2096
|
+
width: 100%;
|
|
2097
|
+
height: 100%;
|
|
2098
|
+
}
|
|
1722
2099
|
.modal-close-button-label {
|
|
1723
2100
|
font-weight: 600;
|
|
1724
2101
|
letter-spacing: 0.01em;
|
|
1725
2102
|
}
|
|
1726
2103
|
.modal-body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
|
|
1727
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); }
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
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;
|
|
1735
2122
|
}
|
|
1736
|
-
.
|
|
1737
|
-
|
|
1738
|
-
padding: var(--sp-3) var(--sp-4);
|
|
2123
|
+
.toast-root {
|
|
2124
|
+
background: var(--surface-1);
|
|
1739
2125
|
border: 1px solid var(--border);
|
|
2126
|
+
border-left: 3px solid var(--accent);
|
|
1740
2127
|
border-radius: var(--radius-md);
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
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;
|
|
2137
|
+
}
|
|
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;
|
|
1745
2167
|
}
|
|
1746
|
-
.
|
|
1747
|
-
|
|
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);
|
|
1748
2173
|
}
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
2174
|
+
|
|
2175
|
+
@keyframes toastSlideIn {
|
|
2176
|
+
from { transform: translateX(calc(100% + var(--sp-5))); opacity: 0; }
|
|
2177
|
+
to { transform: translateX(0); opacity: 1; }
|
|
1753
2178
|
}
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
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))); }
|
|
1758
2186
|
}
|
|
1759
2187
|
.viewer-reconnect-overlay {
|
|
1760
2188
|
position: fixed;
|
|
@@ -1836,6 +2264,24 @@
|
|
|
1836
2264
|
.settings-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
|
|
1837
2265
|
.settings-panel[data-state="inactive"] { display: none; }
|
|
1838
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
|
+
}
|
|
1839
2285
|
.observer-status-banner {
|
|
1840
2286
|
display: flex;
|
|
1841
2287
|
flex-direction: column;
|
|
@@ -1908,26 +2354,26 @@
|
|
|
1908
2354
|
}
|
|
1909
2355
|
|
|
1910
2356
|
.help-icon {
|
|
1911
|
-
width:
|
|
1912
|
-
height:
|
|
1913
|
-
border:
|
|
2357
|
+
width: 20px;
|
|
2358
|
+
height: 20px;
|
|
2359
|
+
border: none;
|
|
2360
|
+
background: transparent;
|
|
1914
2361
|
border-radius: 999px;
|
|
1915
2362
|
display: inline-flex;
|
|
1916
2363
|
align-items: center;
|
|
1917
2364
|
justify-content: center;
|
|
1918
|
-
|
|
1919
|
-
color: var(--text-secondary);
|
|
2365
|
+
color: var(--text-tertiary);
|
|
1920
2366
|
cursor: pointer;
|
|
1921
2367
|
user-select: none;
|
|
1922
|
-
background: var(--surface-0);
|
|
1923
2368
|
position: relative;
|
|
1924
2369
|
padding: 0;
|
|
1925
2370
|
}
|
|
1926
|
-
|
|
2371
|
+
.help-icon:hover { color: var(--accent); background: var(--accent-subtle); }
|
|
1927
2372
|
.help-icon:focus-visible {
|
|
1928
|
-
outline: 2px solid var(--
|
|
1929
|
-
outline-offset:
|
|
2373
|
+
outline: 2px solid var(--accent);
|
|
2374
|
+
outline-offset: 2px;
|
|
1930
2375
|
}
|
|
2376
|
+
.help-icon svg { width: 14px; height: 14px; stroke-width: 2; }
|
|
1931
2377
|
|
|
1932
2378
|
.help-tooltip {
|
|
1933
2379
|
position: fixed;
|
|
@@ -1953,14 +2399,15 @@
|
|
|
1953
2399
|
transform: translateY(0);
|
|
1954
2400
|
}
|
|
1955
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. */
|
|
1956
2405
|
.settings-advanced-toolbar {
|
|
1957
2406
|
display: flex;
|
|
1958
2407
|
align-items: center;
|
|
1959
2408
|
gap: 10px;
|
|
1960
|
-
padding:
|
|
1961
|
-
|
|
1962
|
-
border-radius: var(--radius-sm);
|
|
1963
|
-
background: var(--surface-0);
|
|
2409
|
+
padding: 4px 0;
|
|
2410
|
+
color: var(--text-secondary);
|
|
1964
2411
|
}
|
|
1965
2412
|
|
|
1966
2413
|
.settings-advanced-toolbar input {
|
|
@@ -2049,7 +2496,7 @@
|
|
|
2049
2496
|
cursor: pointer;
|
|
2050
2497
|
flex-shrink: 0;
|
|
2051
2498
|
padding: 1px;
|
|
2052
|
-
transition: background
|
|
2499
|
+
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
2053
2500
|
}
|
|
2054
2501
|
.settings-switch:hover {
|
|
2055
2502
|
border-color: color-mix(in srgb, var(--accent) 38%, var(--control-hover-border));
|
|
@@ -2075,7 +2522,7 @@
|
|
|
2075
2522
|
background: color-mix(in srgb, var(--surface-0) 88%, white);
|
|
2076
2523
|
border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
|
|
2077
2524
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
2078
|
-
transition: transform
|
|
2525
|
+
transition: transform 140ms ease, background 140ms ease;
|
|
2079
2526
|
transform: translateX(0);
|
|
2080
2527
|
}
|
|
2081
2528
|
.settings-switch[data-state="checked"] .settings-switch-thumb {
|
|
@@ -2122,7 +2569,7 @@
|
|
|
2122
2569
|
font-family: var(--font-sans);
|
|
2123
2570
|
font-size: 12px;
|
|
2124
2571
|
cursor: pointer;
|
|
2125
|
-
transition: background
|
|
2572
|
+
transition: background 140ms ease;
|
|
2126
2573
|
}
|
|
2127
2574
|
.settings-save:hover { background: var(--control-hover-bg); }
|
|
2128
2575
|
.sync-dialog-card {
|
|
@@ -2178,7 +2625,7 @@
|
|
|
2178
2625
|
border-radius: var(--radius-md);
|
|
2179
2626
|
background: color-mix(in srgb, var(--surface-1) 86%, var(--surface-0));
|
|
2180
2627
|
cursor: pointer;
|
|
2181
|
-
transition: border-color
|
|
2628
|
+
transition: border-color 140ms ease, background 140ms ease;
|
|
2182
2629
|
}
|
|
2183
2630
|
.sync-dialog-radio-option:hover {
|
|
2184
2631
|
border-color: var(--border-hover);
|
|
@@ -2238,10 +2685,19 @@
|
|
|
2238
2685
|
50% { transform: scale(1.3); opacity: 0.5; }
|
|
2239
2686
|
}
|
|
2240
2687
|
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
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; }
|
|
2245
2701
|
}
|
|
2246
2702
|
|
|
2247
2703
|
/* ── Responsive ────────────────────────────────────────── */
|
|
@@ -2255,6 +2711,7 @@
|
|
|
2255
2711
|
.peer-scope-row { grid-template-columns: 1fr; }
|
|
2256
2712
|
.feed-visibility-controls { align-items: stretch; }
|
|
2257
2713
|
.feed-visibility-select { width: 100%; }
|
|
2714
|
+
.actor-actions { justify-content: flex-start; }
|
|
2258
2715
|
}
|
|
2259
2716
|
|
|
2260
2717
|
@media (max-width: 520px) {
|
|
@@ -2280,11 +2737,10 @@
|
|
|
2280
2737
|
<div class="header-left">
|
|
2281
2738
|
<div class="header-brand">
|
|
2282
2739
|
<span class="logo" aria-hidden="true">
|
|
2283
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
|
|
2284
|
-
<
|
|
2285
|
-
<
|
|
2286
|
-
<
|
|
2287
|
-
<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"/>
|
|
2288
2744
|
</svg>
|
|
2289
2745
|
</span>
|
|
2290
2746
|
<span class="header-title">codemem</span>
|
|
@@ -2299,9 +2755,12 @@
|
|
|
2299
2755
|
<select class="project-filter" id="projectFilter" aria-label="Project filter">
|
|
2300
2756
|
<option value="">All Projects</option>
|
|
2301
2757
|
</select>
|
|
2302
|
-
<
|
|
2303
|
-
|
|
2304
|
-
|
|
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>
|
|
2305
2764
|
</div>
|
|
2306
2765
|
</div>
|
|
2307
2766
|
</header>
|
|
@@ -2313,7 +2772,7 @@
|
|
|
2313
2772
|
<button class="tab-btn" id="tabBtn-sync">Sync</button>
|
|
2314
2773
|
<button class="tab-btn" id="tabBtn-coordinator-admin">Coordinator Admin</button>
|
|
2315
2774
|
</nav>
|
|
2316
|
-
<div
|
|
2775
|
+
<div id="toastRoot"></div>
|
|
2317
2776
|
<div class="viewer-reconnect-overlay" id="viewerReconnectOverlay" hidden>
|
|
2318
2777
|
<div class="viewer-reconnect-card" role="status" aria-live="assertive">
|
|
2319
2778
|
<div class="viewer-reconnect-eyebrow">Viewer connection</div>
|
|
@@ -2338,7 +2797,7 @@
|
|
|
2338
2797
|
<div class="modal-header">
|
|
2339
2798
|
<h2 id="settingsTitle">Memory & model settings</h2>
|
|
2340
2799
|
<button class="modal-close-button" id="settingsClose" aria-label="Close settings">
|
|
2341
|
-
<
|
|
2800
|
+
<i class="modal-close-button-icon" aria-hidden="true" data-lucide="x"></i>
|
|
2342
2801
|
<span class="modal-close-button-label">Close</span>
|
|
2343
2802
|
</button>
|
|
2344
2803
|
</div>
|
|
@@ -2568,7 +3027,10 @@
|
|
|
2568
3027
|
<!-- 1. Needs attention + team setup/status -->
|
|
2569
3028
|
<div class="card" id="syncTeamCard">
|
|
2570
3029
|
<div class="section-header">
|
|
2571
|
-
<
|
|
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>
|
|
2572
3034
|
<div class="section-actions">
|
|
2573
3035
|
<button class="settings-button" id="syncNowButton">Sync now</button>
|
|
2574
3036
|
</div>
|
|
@@ -2611,8 +3073,10 @@
|
|
|
2611
3073
|
<h3 class="settings-group-title">People</h3>
|
|
2612
3074
|
<div class="section-meta" id="syncActorsMeta">Create and rename people here. Assign each device below.</div>
|
|
2613
3075
|
<div class="actor-create-row">
|
|
2614
|
-
<
|
|
2615
|
-
|
|
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>
|
|
2616
3080
|
<button class="settings-button" id="syncActorCreateButton">Create person</button>
|
|
2617
3081
|
</div>
|
|
2618
3082
|
<div class="actor-list" id="syncActorsList"></div>
|