@codemem/server 0.27.0 → 0.28.1
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 +91 -11
- package/dist/index.js.map +1 -1
- package/dist/routes/config.d.ts.map +1 -1
- package/dist/routes/sync.d.ts.map +1 -1
- package/package.json +7 -7
- package/static/app.js +15200 -12717
- package/static/favicon.svg +4 -14
- package/static/index.html +848 -378
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,26 +923,59 @@
|
|
|
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
|
|
|
844
969
|
.feed-controls {
|
|
845
970
|
display: flex;
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
gap: var(--sp-
|
|
849
|
-
flex-wrap: wrap;
|
|
971
|
+
flex-direction: column;
|
|
972
|
+
align-items: stretch;
|
|
973
|
+
gap: var(--sp-2);
|
|
850
974
|
margin-bottom: var(--sp-4);
|
|
851
975
|
}
|
|
976
|
+
.feed-controls > .section-meta {
|
|
977
|
+
margin-bottom: 0;
|
|
978
|
+
}
|
|
852
979
|
|
|
853
980
|
.feed-controls-right {
|
|
854
981
|
display: flex;
|
|
@@ -883,7 +1010,7 @@
|
|
|
883
1010
|
.feed-search {
|
|
884
1011
|
min-width: 200px;
|
|
885
1012
|
flex: 1;
|
|
886
|
-
max-width:
|
|
1013
|
+
max-width: 420px;
|
|
887
1014
|
padding: 8px var(--sp-3);
|
|
888
1015
|
border-radius: var(--radius-md);
|
|
889
1016
|
border: 1px solid var(--border);
|
|
@@ -892,7 +1019,7 @@
|
|
|
892
1019
|
font-family: var(--font-sans);
|
|
893
1020
|
font-size: 13px;
|
|
894
1021
|
outline: none;
|
|
895
|
-
transition: border-color
|
|
1022
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
896
1023
|
}
|
|
897
1024
|
.feed-search::placeholder { color: var(--text-tertiary); }
|
|
898
1025
|
.feed-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
|
|
@@ -911,7 +1038,7 @@
|
|
|
911
1038
|
line-height: 1.45;
|
|
912
1039
|
resize: vertical;
|
|
913
1040
|
outline: none;
|
|
914
|
-
transition: border-color
|
|
1041
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
915
1042
|
}
|
|
916
1043
|
.feed-inspector-files::placeholder { color: var(--text-tertiary); }
|
|
917
1044
|
.feed-inspector-files:focus {
|
|
@@ -925,7 +1052,7 @@
|
|
|
925
1052
|
padding: 3px;
|
|
926
1053
|
border-radius: var(--radius-pill);
|
|
927
1054
|
border: 1px solid var(--border);
|
|
928
|
-
background: var(--surface-
|
|
1055
|
+
background: color-mix(in srgb, var(--surface-0) 70%, transparent);
|
|
929
1056
|
}
|
|
930
1057
|
|
|
931
1058
|
.toggle-button {
|
|
@@ -934,16 +1061,28 @@
|
|
|
934
1061
|
color: var(--text-tertiary);
|
|
935
1062
|
font-family: var(--font-sans);
|
|
936
1063
|
font-size: 12px;
|
|
937
|
-
padding: 4px
|
|
1064
|
+
padding: 4px 12px;
|
|
938
1065
|
border-radius: var(--radius-pill);
|
|
939
1066
|
cursor: pointer;
|
|
940
1067
|
display: inline-flex;
|
|
941
1068
|
align-items: center;
|
|
942
1069
|
gap: 5px;
|
|
943
|
-
transition: background
|
|
1070
|
+
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
|
|
944
1071
|
}
|
|
945
1072
|
.toggle-button:hover { background: var(--toggle-hover-bg); color: var(--text-primary); }
|
|
946
|
-
.toggle-button.active {
|
|
1073
|
+
.toggle-button.active {
|
|
1074
|
+
background: var(--accent-subtle);
|
|
1075
|
+
color: var(--accent);
|
|
1076
|
+
box-shadow: inset 0 0 0 1px var(--accent-strong);
|
|
1077
|
+
}
|
|
1078
|
+
/* Intentionally no font-weight change on .active — weight-driven text
|
|
1079
|
+
width shifts would retime the toggle's outer width and could wrap
|
|
1080
|
+
the downstream controls (search + type toggle + Context Inspector)
|
|
1081
|
+
to a second line. Bg + color + inset ring is sufficient signal. */
|
|
1082
|
+
.toggle-button:focus-visible {
|
|
1083
|
+
outline: 2px solid var(--accent);
|
|
1084
|
+
outline-offset: 2px;
|
|
1085
|
+
}
|
|
947
1086
|
|
|
948
1087
|
.feed-list {
|
|
949
1088
|
display: flex;
|
|
@@ -951,35 +1090,106 @@
|
|
|
951
1090
|
gap: var(--sp-3);
|
|
952
1091
|
}
|
|
953
1092
|
|
|
1093
|
+
/* Feed loading skeleton — mirrors the banner / body / footer shape so
|
|
1094
|
+
the transition into real content doesn't shift layout. Reuses the
|
|
1095
|
+
sync-shimmer keyframe below. */
|
|
1096
|
+
.feed-skeleton {
|
|
1097
|
+
display: flex;
|
|
1098
|
+
flex-direction: column;
|
|
1099
|
+
gap: var(--sp-3);
|
|
1100
|
+
}
|
|
1101
|
+
.feed-skeleton-item {
|
|
1102
|
+
border: 1px solid var(--border);
|
|
1103
|
+
border-radius: var(--radius-md);
|
|
1104
|
+
background: var(--surface-1);
|
|
1105
|
+
overflow: hidden;
|
|
1106
|
+
box-shadow: var(--shadow-sm);
|
|
1107
|
+
}
|
|
1108
|
+
.feed-skeleton-banner {
|
|
1109
|
+
height: 28px;
|
|
1110
|
+
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
|
1111
|
+
background-size: 400px 100%;
|
|
1112
|
+
animation: sync-shimmer 1.5s ease-in-out infinite;
|
|
1113
|
+
border-bottom: 1px solid var(--border);
|
|
1114
|
+
}
|
|
1115
|
+
.feed-skeleton-body {
|
|
1116
|
+
padding: var(--sp-4) var(--sp-5);
|
|
1117
|
+
display: flex;
|
|
1118
|
+
flex-direction: column;
|
|
1119
|
+
gap: 10px;
|
|
1120
|
+
}
|
|
1121
|
+
.feed-skeleton-line {
|
|
1122
|
+
height: 12px;
|
|
1123
|
+
border-radius: 6px;
|
|
1124
|
+
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
|
1125
|
+
background-size: 400px 100%;
|
|
1126
|
+
animation: sync-shimmer 1.5s ease-in-out infinite;
|
|
1127
|
+
}
|
|
1128
|
+
.feed-skeleton-line.w-85 { width: 85%; }
|
|
1129
|
+
.feed-skeleton-line.w-65 { width: 65%; }
|
|
1130
|
+
.feed-skeleton-line.w-40 { width: 40%; }
|
|
1131
|
+
.feed-skeleton-footer {
|
|
1132
|
+
display: flex;
|
|
1133
|
+
gap: 8px;
|
|
1134
|
+
padding-top: 4px;
|
|
1135
|
+
}
|
|
1136
|
+
.feed-skeleton-chip {
|
|
1137
|
+
height: 18px;
|
|
1138
|
+
width: 72px;
|
|
1139
|
+
border-radius: var(--radius-pill);
|
|
1140
|
+
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
|
1141
|
+
background-size: 400px 100%;
|
|
1142
|
+
animation: sync-shimmer 1.5s ease-in-out infinite;
|
|
1143
|
+
}
|
|
1144
|
+
.feed-skeleton-chip.w-36 { width: 36px; }
|
|
1145
|
+
.feed-skeleton-chip.w-56 { width: 56px; }
|
|
1146
|
+
|
|
954
1147
|
/* ── Feed items ────────────────────────────────────────── */
|
|
1148
|
+
/* Design-handoff clarification (2026-04-19): feed items render with
|
|
1149
|
+
a full-width top banner in the kind's tint, not a 4px left rail.
|
|
1150
|
+
Banner ~28px tall, --accent-subtle bg per kind, 1px accent-strong
|
|
1151
|
+
bottom border; kind chip sits inset left inside the banner. */
|
|
955
1152
|
|
|
956
1153
|
.feed-item {
|
|
957
1154
|
border: 1px solid var(--border);
|
|
958
|
-
border-
|
|
959
|
-
border-radius: var(--radius-lg);
|
|
960
|
-
padding: var(--sp-4) var(--sp-5);
|
|
1155
|
+
border-radius: var(--radius-md);
|
|
961
1156
|
background: var(--surface-1);
|
|
1157
|
+
overflow: hidden;
|
|
962
1158
|
display: flex;
|
|
963
1159
|
flex-direction: column;
|
|
964
|
-
|
|
965
|
-
transition: transform
|
|
1160
|
+
box-shadow: var(--shadow-sm);
|
|
1161
|
+
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
966
1162
|
}
|
|
967
1163
|
.feed-item:hover {
|
|
968
1164
|
transform: translateY(-1px);
|
|
969
|
-
box-shadow: var(--shadow-
|
|
1165
|
+
box-shadow: var(--shadow-md);
|
|
970
1166
|
border-color: var(--border-hover);
|
|
971
1167
|
}
|
|
972
|
-
.feed-item.new-item { animation: newPulse 420ms ease-out 1; }
|
|
973
1168
|
|
|
974
|
-
/* Kind
|
|
975
|
-
.feed-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
.feed-item.
|
|
981
|
-
.feed-item.
|
|
982
|
-
.feed-item.
|
|
1169
|
+
/* Kind banner — defaults to mint (feature). Per-kind overrides below. */
|
|
1170
|
+
.feed-kind-banner {
|
|
1171
|
+
padding: 7px var(--sp-5);
|
|
1172
|
+
background: var(--accent-subtle);
|
|
1173
|
+
border-bottom: 1px solid var(--accent-strong);
|
|
1174
|
+
}
|
|
1175
|
+
.feed-item.change .feed-kind-banner { background: var(--accent-cool-subtle); border-bottom-color: color-mix(in srgb, var(--accent-cool) 30%, transparent); }
|
|
1176
|
+
.feed-item.bugfix .feed-kind-banner { background: var(--accent-warm-subtle); border-bottom-color: color-mix(in srgb, var(--accent-warm) 30%, transparent); }
|
|
1177
|
+
.feed-item.refactor .feed-kind-banner { background: var(--accent-violet-subtle); border-bottom-color: color-mix(in srgb, var(--accent-violet) 30%, transparent); }
|
|
1178
|
+
.feed-item.discovery .feed-kind-banner { background: var(--accent-steel-subtle); border-bottom-color: color-mix(in srgb, var(--accent-steel) 30%, transparent); }
|
|
1179
|
+
.feed-item.docs .feed-kind-banner { background: var(--accent-ochre-subtle); border-bottom-color: color-mix(in srgb, var(--accent-ochre) 30%, transparent); }
|
|
1180
|
+
.feed-item.test .feed-kind-banner { background: var(--accent-neutral-subtle); border-bottom-color: color-mix(in srgb, var(--accent-neutral) 30%, transparent); }
|
|
1181
|
+
/* Core emits 'decision' / 'exploration' / 'session_summary' too — preserve
|
|
1182
|
+
neutral treatments so those items aren't unstyled. */
|
|
1183
|
+
.feed-item.decision .feed-kind-banner { background: var(--accent-neutral-subtle); border-bottom-color: color-mix(in srgb, var(--accent-neutral) 30%, transparent); }
|
|
1184
|
+
.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); }
|
|
1185
|
+
.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); }
|
|
1186
|
+
|
|
1187
|
+
.feed-card-body {
|
|
1188
|
+
padding: var(--sp-4) var(--sp-5);
|
|
1189
|
+
display: flex;
|
|
1190
|
+
flex-direction: column;
|
|
1191
|
+
gap: var(--sp-2);
|
|
1192
|
+
}
|
|
983
1193
|
|
|
984
1194
|
.feed-card-header {
|
|
985
1195
|
display: flex;
|
|
@@ -1014,20 +1224,14 @@
|
|
|
1014
1224
|
z-index: 24;
|
|
1015
1225
|
}
|
|
1016
1226
|
.feed-menu-trigger {
|
|
1017
|
-
display: inline-flex;
|
|
1018
|
-
align-items: center;
|
|
1019
|
-
justify-content: center;
|
|
1020
1227
|
width: 30px;
|
|
1021
1228
|
height: 30px;
|
|
1022
1229
|
border: 1px solid var(--border);
|
|
1023
|
-
border-radius: var(--radius-pill);
|
|
1024
1230
|
background: transparent;
|
|
1025
1231
|
color: var(--text-tertiary);
|
|
1026
|
-
font-family: var(--font-sans);
|
|
1027
1232
|
font-size: 18px;
|
|
1028
1233
|
line-height: 1;
|
|
1029
|
-
|
|
1030
|
-
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
|
1234
|
+
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
|
|
1031
1235
|
}
|
|
1032
1236
|
.feed-menu-trigger:hover,
|
|
1033
1237
|
.feed-menu-trigger[data-state="open"] {
|
|
@@ -1038,6 +1242,7 @@
|
|
|
1038
1242
|
.feed-menu-trigger:focus-visible {
|
|
1039
1243
|
outline: 2px solid var(--accent);
|
|
1040
1244
|
outline-offset: 2px;
|
|
1245
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1041
1246
|
}
|
|
1042
1247
|
.feed-menu-item {
|
|
1043
1248
|
display: flex;
|
|
@@ -1078,11 +1283,50 @@
|
|
|
1078
1283
|
overflow-wrap: anywhere;
|
|
1079
1284
|
word-break: break-word;
|
|
1080
1285
|
}
|
|
1081
|
-
|
|
1286
|
+
.feed-card-subtitle {
|
|
1287
|
+
width: 100%;
|
|
1288
|
+
color: var(--text-tertiary);
|
|
1289
|
+
}
|
|
1082
1290
|
.feed-meta {
|
|
1083
1291
|
color: var(--text-tertiary);
|
|
1084
1292
|
font-size: 12px;
|
|
1085
1293
|
}
|
|
1294
|
+
/* Empty state renders as a terminal-output block — mono surface,
|
|
1295
|
+
blinking mint cursor — to match the codemem "warm local journal"
|
|
1296
|
+
voice and signal "this is a CLI-native tool." */
|
|
1297
|
+
.feed-empty-state {
|
|
1298
|
+
display: flex;
|
|
1299
|
+
flex-direction: column;
|
|
1300
|
+
gap: 6px;
|
|
1301
|
+
padding: var(--sp-4);
|
|
1302
|
+
border: 1px solid var(--border);
|
|
1303
|
+
border-radius: var(--radius-md);
|
|
1304
|
+
background: var(--surface-2);
|
|
1305
|
+
color: var(--text-secondary);
|
|
1306
|
+
font-family: var(--font-mono);
|
|
1307
|
+
font-size: 13px;
|
|
1308
|
+
}
|
|
1309
|
+
.feed-empty-state strong {
|
|
1310
|
+
color: var(--text-primary);
|
|
1311
|
+
font-weight: 600;
|
|
1312
|
+
}
|
|
1313
|
+
.feed-empty-state::before {
|
|
1314
|
+
content: "$ codemem feed";
|
|
1315
|
+
display: block;
|
|
1316
|
+
color: var(--accent);
|
|
1317
|
+
font-weight: 500;
|
|
1318
|
+
margin-bottom: 4px;
|
|
1319
|
+
}
|
|
1320
|
+
.feed-empty-state::after {
|
|
1321
|
+
content: "_";
|
|
1322
|
+
display: inline-block;
|
|
1323
|
+
color: var(--accent);
|
|
1324
|
+
animation: cursorBlink 1.1s steps(2, end) infinite;
|
|
1325
|
+
}
|
|
1326
|
+
@keyframes cursorBlink {
|
|
1327
|
+
0%, 100% { opacity: 1; }
|
|
1328
|
+
50% { opacity: 0; }
|
|
1329
|
+
}
|
|
1086
1330
|
|
|
1087
1331
|
.feed-provenance {
|
|
1088
1332
|
display: flex;
|
|
@@ -1090,18 +1334,34 @@
|
|
|
1090
1334
|
gap: 6px;
|
|
1091
1335
|
}
|
|
1092
1336
|
|
|
1093
|
-
|
|
1337
|
+
/* ── Chip base ─────────────────────────────────────────── */
|
|
1338
|
+
/* Shared layout for every pill-shaped label in the viewer. Per-variant
|
|
1339
|
+
rules below only override background / color / border / typography.
|
|
1340
|
+
Markup stays unchanged — each variant class continues to work
|
|
1341
|
+
standalone for backward compatibility. */
|
|
1342
|
+
.chip,
|
|
1343
|
+
.kind-chip,
|
|
1344
|
+
.provenance-chip,
|
|
1345
|
+
.tag-chip,
|
|
1346
|
+
.peer-scope-chip,
|
|
1347
|
+
.badge {
|
|
1094
1348
|
display: inline-flex;
|
|
1095
1349
|
align-items: center;
|
|
1350
|
+
gap: 6px;
|
|
1351
|
+
padding: 3px 10px;
|
|
1352
|
+
border-radius: var(--radius-pill);
|
|
1353
|
+
border: 1px solid transparent;
|
|
1354
|
+
line-height: 1.2;
|
|
1355
|
+
white-space: nowrap;
|
|
1356
|
+
font-size: 11px;
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.provenance-chip {
|
|
1096
1360
|
gap: 4px;
|
|
1097
1361
|
padding: 3px 8px;
|
|
1098
|
-
border-
|
|
1099
|
-
border: 1px solid var(--border);
|
|
1362
|
+
border-color: var(--border);
|
|
1100
1363
|
background: var(--surface-2);
|
|
1101
1364
|
color: var(--text-tertiary);
|
|
1102
|
-
font-size: 11px;
|
|
1103
|
-
line-height: 1.2;
|
|
1104
|
-
white-space: nowrap;
|
|
1105
1365
|
}
|
|
1106
1366
|
.provenance-chip.mine { background: var(--accent-subtle); color: var(--accent); border-color: rgba(43, 122, 176, 0.18); }
|
|
1107
1367
|
.provenance-chip.author { color: var(--text-secondary); }
|
|
@@ -1172,68 +1432,73 @@
|
|
|
1172
1432
|
border: 1px solid var(--border);
|
|
1173
1433
|
background: transparent;
|
|
1174
1434
|
color: var(--text-tertiary);
|
|
1175
|
-
border-radius: var(--radius-pill);
|
|
1176
1435
|
padding: 3px 10px;
|
|
1177
|
-
font-family: var(--font-sans);
|
|
1178
1436
|
font-size: 11px;
|
|
1179
|
-
|
|
1180
|
-
transition: background 0.15s ease, color 0.15s ease;
|
|
1437
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1181
1438
|
}
|
|
1182
1439
|
.feed-expand:hover { background: var(--accent-subtle); color: var(--accent); }
|
|
1440
|
+
.feed-expand:focus-visible {
|
|
1441
|
+
outline: 2px solid var(--accent);
|
|
1442
|
+
outline-offset: 2px;
|
|
1443
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1444
|
+
}
|
|
1183
1445
|
|
|
1184
1446
|
.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;
|
|
1447
|
+
/* File paths render as compact pill-tags in their own row — the actual
|
|
1448
|
+
filename is informative and earns its horizontal space. */
|
|
1449
|
+
.feed-files { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1450
|
+
.feed-file {
|
|
1194
1451
|
padding: 2px 8px;
|
|
1195
|
-
border-radius: var(--radius-
|
|
1452
|
+
border-radius: var(--radius-sm);
|
|
1453
|
+
background: var(--surface-2);
|
|
1454
|
+
border: 1px solid var(--border);
|
|
1455
|
+
font-family: var(--font-mono);
|
|
1196
1456
|
font-size: 11px;
|
|
1197
|
-
|
|
1198
|
-
letter-spacing: 0.2px;
|
|
1457
|
+
color: var(--text-tertiary);
|
|
1199
1458
|
white-space: nowrap;
|
|
1459
|
+
}
|
|
1460
|
+
.feed-age { white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; }
|
|
1461
|
+
|
|
1462
|
+
/* ── Pills & badges ────────────────────────────────────── */
|
|
1463
|
+
|
|
1464
|
+
/* Kind chip — lives inside .feed-kind-banner. Tint + colored border
|
|
1465
|
+
match the banner per kind so the chip reads as part of the strip. */
|
|
1466
|
+
.kind-chip {
|
|
1467
|
+
padding: 2px 10px;
|
|
1468
|
+
font-family: var(--font-mono);
|
|
1469
|
+
font-size: 10px;
|
|
1470
|
+
font-weight: 600;
|
|
1471
|
+
letter-spacing: 0.08em;
|
|
1472
|
+
text-transform: uppercase;
|
|
1200
1473
|
background: var(--accent-subtle);
|
|
1201
1474
|
color: var(--accent);
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
.kind-
|
|
1205
|
-
.kind-
|
|
1206
|
-
.kind-
|
|
1207
|
-
.kind-
|
|
1208
|
-
.kind-
|
|
1209
|
-
.kind-
|
|
1210
|
-
.kind-
|
|
1475
|
+
border-color: var(--accent-strong);
|
|
1476
|
+
}
|
|
1477
|
+
.kind-chip.change { background: var(--accent-cool-subtle); color: var(--accent-cool); border-color: color-mix(in srgb, var(--accent-cool) 32%, transparent); }
|
|
1478
|
+
.kind-chip.bugfix { background: var(--accent-warm-subtle); color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 32%, transparent); }
|
|
1479
|
+
.kind-chip.refactor { background: var(--accent-violet-subtle); color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 32%, transparent); }
|
|
1480
|
+
.kind-chip.discovery { background: var(--accent-steel-subtle); color: var(--accent-steel); border-color: color-mix(in srgb, var(--accent-steel) 32%, transparent); }
|
|
1481
|
+
.kind-chip.docs { background: var(--accent-ochre-subtle); color: var(--accent-ochre); border-color: color-mix(in srgb, var(--accent-ochre) 32%, transparent); }
|
|
1482
|
+
.kind-chip.test { background: var(--accent-neutral-subtle); color: var(--accent-neutral); border-color: color-mix(in srgb, var(--accent-neutral) 32%, transparent); }
|
|
1483
|
+
.kind-chip.decision { background: var(--accent-neutral-subtle); color: var(--accent-neutral); border-color: color-mix(in srgb, var(--accent-neutral) 32%, transparent); }
|
|
1484
|
+
.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); }
|
|
1485
|
+
.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
1486
|
|
|
1212
1487
|
.tag-chip {
|
|
1213
|
-
display: inline-flex;
|
|
1214
|
-
align-items: center;
|
|
1215
|
-
gap: 6px;
|
|
1216
1488
|
padding: 2px 10px;
|
|
1217
|
-
border-radius: var(--radius-pill);
|
|
1218
1489
|
background: var(--accent-cool-subtle);
|
|
1219
1490
|
color: var(--accent-cool);
|
|
1220
|
-
font-size: 11px;
|
|
1221
1491
|
font-weight: 500;
|
|
1222
1492
|
}
|
|
1223
1493
|
|
|
1224
1494
|
.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
1495
|
font-size: 12px;
|
|
1233
1496
|
font-weight: 600;
|
|
1497
|
+
background: var(--accent-cool-subtle);
|
|
1498
|
+
color: var(--accent-cool);
|
|
1234
1499
|
}
|
|
1235
|
-
.badge-online { background:
|
|
1236
|
-
.badge-offline { background:
|
|
1500
|
+
.badge-online { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-strong); }
|
|
1501
|
+
.badge-offline { background: var(--accent-warm-subtle); color: var(--accent-warm); border-color: rgba(255, 180, 84, 0.3); }
|
|
1237
1502
|
|
|
1238
1503
|
.pill {
|
|
1239
1504
|
display: inline-block;
|
|
@@ -1243,13 +1508,48 @@
|
|
|
1243
1508
|
color: var(--accent);
|
|
1244
1509
|
font-size: 12px;
|
|
1245
1510
|
font-weight: 600;
|
|
1246
|
-
transition: background
|
|
1511
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1247
1512
|
}
|
|
1248
1513
|
.pill.alt { background: var(--accent-warm-subtle); color: var(--accent-warm); }
|
|
1249
1514
|
.pill-success { background: var(--green-bg, #16a34a22); color: var(--green-text, #16a34a); }
|
|
1250
1515
|
.pill-warning { background: var(--yellow-bg, #ca8a0422); color: var(--yellow-text, #ca8a04); }
|
|
1251
1516
|
.pill-error { background: var(--red-bg, #dc262622); color: var(--red-text, #dc2626); }
|
|
1252
1517
|
|
|
1518
|
+
/* Sync tab top-of-card online badge.
|
|
1519
|
+
Subtle-wash treatment matches trust badges + kind chips + segmented
|
|
1520
|
+
toggle active state. Handoff README §E mentioned "filled-mint pill"
|
|
1521
|
+
but the reference ui_kit ships the subtle-wash variant — keeping it
|
|
1522
|
+
in-family here for visual consistency. */
|
|
1523
|
+
.sync-online-badge {
|
|
1524
|
+
display: inline-flex;
|
|
1525
|
+
align-items: center;
|
|
1526
|
+
gap: 6px;
|
|
1527
|
+
padding: 2px 10px;
|
|
1528
|
+
border-radius: var(--radius-pill);
|
|
1529
|
+
background: var(--accent-subtle);
|
|
1530
|
+
color: var(--accent);
|
|
1531
|
+
font-size: 12px;
|
|
1532
|
+
font-weight: 600;
|
|
1533
|
+
letter-spacing: 0.02em;
|
|
1534
|
+
transition: background 140ms ease, color 140ms ease;
|
|
1535
|
+
}
|
|
1536
|
+
.sync-online-badge::before {
|
|
1537
|
+
content: "";
|
|
1538
|
+
width: 6px;
|
|
1539
|
+
height: 6px;
|
|
1540
|
+
border-radius: 50%;
|
|
1541
|
+
background: currentColor;
|
|
1542
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 24%, transparent);
|
|
1543
|
+
}
|
|
1544
|
+
.sync-online-badge.sync-online-offline {
|
|
1545
|
+
background: var(--accent-warm-subtle);
|
|
1546
|
+
color: var(--accent-warm);
|
|
1547
|
+
}
|
|
1548
|
+
.sync-online-badge.sync-online-error {
|
|
1549
|
+
background: rgba(255, 122, 80, 0.16);
|
|
1550
|
+
color: var(--status-attention);
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1253
1553
|
.match {
|
|
1254
1554
|
padding: 0 2px;
|
|
1255
1555
|
border-radius: 3px;
|
|
@@ -1267,7 +1567,7 @@
|
|
|
1267
1567
|
|
|
1268
1568
|
.health-action, .sync-action {
|
|
1269
1569
|
display: flex;
|
|
1270
|
-
align-items:
|
|
1570
|
+
align-items: flex-start;
|
|
1271
1571
|
justify-content: space-between;
|
|
1272
1572
|
gap: var(--sp-3);
|
|
1273
1573
|
padding: var(--sp-3);
|
|
@@ -1297,36 +1597,73 @@
|
|
|
1297
1597
|
font-size: 11px;
|
|
1298
1598
|
padding: 2px 8px;
|
|
1299
1599
|
}
|
|
1600
|
+
.sync-section-note {
|
|
1601
|
+
margin-top: -2px;
|
|
1602
|
+
margin-bottom: var(--sp-1);
|
|
1603
|
+
max-width: 72ch;
|
|
1604
|
+
}
|
|
1300
1605
|
.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; }
|
|
1606
|
+
.health-action-buttons { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
|
|
1302
1607
|
|
|
1303
1608
|
/* ── Diagnostics ───────────────────────────────────────── */
|
|
1304
1609
|
|
|
1305
1610
|
.diag-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
|
|
1306
|
-
|
|
1611
|
+
/* Sync diagnostics row. Body wraps within its own column; timestamp
|
|
1612
|
+
stays flush-right on the first line and doesn't shove the wrapped
|
|
1613
|
+
body sideways. On narrow viewports the timestamp stacks under the
|
|
1614
|
+
body so neither column has to compete with the other. */
|
|
1615
|
+
.diag-line {
|
|
1616
|
+
border: 1px solid var(--border);
|
|
1617
|
+
border-radius: var(--radius-md);
|
|
1618
|
+
padding: var(--sp-3);
|
|
1619
|
+
background: var(--surface-2);
|
|
1620
|
+
display: grid;
|
|
1621
|
+
grid-template-columns: 1fr auto;
|
|
1622
|
+
align-items: baseline;
|
|
1623
|
+
gap: var(--sp-3);
|
|
1624
|
+
}
|
|
1307
1625
|
.diag-line .left { min-width: 0; }
|
|
1308
|
-
.diag-line .right {
|
|
1626
|
+
.diag-line .right { color: var(--text-tertiary); white-space: nowrap; }
|
|
1627
|
+
@media (max-width: 600px) {
|
|
1628
|
+
.diag-line { grid-template-columns: 1fr; }
|
|
1629
|
+
.diag-line .right { font-size: 11px; }
|
|
1630
|
+
}
|
|
1309
1631
|
|
|
1310
1632
|
.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
1633
|
.diag-group summary { cursor: pointer; color: var(--text-tertiary); font-size: 13px; }
|
|
1312
1634
|
|
|
1313
1635
|
/* ── Peers ─────────────────────────────────────────────── */
|
|
1314
1636
|
|
|
1315
|
-
.peer-list { display: grid; gap: var(--sp-3); }
|
|
1316
|
-
|
|
1637
|
+
.peer-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
|
|
1638
|
+
@media (min-width: 900px) {
|
|
1639
|
+
.peer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1640
|
+
}
|
|
1641
|
+
.peer-card { border-radius: var(--radius-lg); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
|
|
1317
1642
|
.peer-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1318
1643
|
.peer-title strong { font-size: 14px; font-weight: 600; }
|
|
1644
|
+
/* Direction glyph rendered when a peer is in mutual-trust state.
|
|
1645
|
+
Handoff §E asked for ↕/↓/↑ but the full 3-way split requires a
|
|
1646
|
+
peer-role field that doesn't exist in core yet — ship the
|
|
1647
|
+
bidirectional marker against the existing trust signal and
|
|
1648
|
+
defer the subscribed/publishing variants to a follow-up. */
|
|
1649
|
+
.peer-direction {
|
|
1650
|
+
margin-left: 6px;
|
|
1651
|
+
font-family: var(--font-mono);
|
|
1652
|
+
font-size: 13px;
|
|
1653
|
+
color: var(--text-tertiary);
|
|
1654
|
+
vertical-align: baseline;
|
|
1655
|
+
}
|
|
1319
1656
|
.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
|
|
1657
|
+
.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
1658
|
.actor-details { min-width: 0; display: grid; gap: 6px; }
|
|
1322
1659
|
.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; }
|
|
1660
|
+
.actor-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
|
|
1324
1661
|
.actor-name-input { min-width: 220px; }
|
|
1325
1662
|
.actor-merge-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1326
1663
|
.actor-merge-select { min-width: 200px; }
|
|
1327
1664
|
.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; }
|
|
1665
|
+
.actor-create-row { display: flex; align-items: flex-end; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
|
|
1666
|
+
.actor-create-row input { flex: 1 1 260px; max-height: 40px; }
|
|
1330
1667
|
.actor-badge.local { background: rgba(31, 111, 92, 0.12); color: var(--accent); }
|
|
1331
1668
|
.peer-scope { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
|
|
1332
1669
|
.peer-scope-summary, .peer-scope-effective { font-size: 12px; color: var(--text-secondary); }
|
|
@@ -1334,15 +1671,25 @@
|
|
|
1334
1671
|
.peer-scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
|
|
1335
1672
|
.peer-scope-editor { display: grid; gap: 8px; }
|
|
1336
1673
|
.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:
|
|
1674
|
+
.peer-scope-chip { padding: 4px 8px; background: rgba(43, 122, 176, 0.12); color: var(--accent); font-size: 12px; }
|
|
1675
|
+
.peer-scope-chip.empty { background: transparent; color: var(--text-tertiary); border-style: dashed; border-color: var(--border); }
|
|
1339
1676
|
.peer-scope-chip-remove { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0; font: inherit; opacity: 0.75; }
|
|
1340
1677
|
.peer-scope-chip-remove:hover { opacity: 1; }
|
|
1341
1678
|
.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
|
-
|
|
1679
|
+
.peer-scope-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
|
|
1680
|
+
.peer-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
|
|
1681
|
+
|
|
1682
|
+
/* Labeled input wrapper — keeps a small uppercase caption visible even
|
|
1683
|
+
when the input has a value. Replaces aria-label-only inputs that
|
|
1684
|
+
were glaring once the deep-ink palette raised contrast. */
|
|
1685
|
+
.sync-labeled-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1 1 220px; }
|
|
1686
|
+
.sync-labeled-field-caption {
|
|
1687
|
+
font-size: 11px;
|
|
1688
|
+
font-weight: 500;
|
|
1689
|
+
letter-spacing: 0.06em;
|
|
1690
|
+
text-transform: uppercase;
|
|
1691
|
+
color: var(--text-tertiary);
|
|
1692
|
+
}
|
|
1346
1693
|
.peer-actions button.danger { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 36%, var(--border)); }
|
|
1347
1694
|
.peer-actions button.danger:hover { background: var(--accent-warm-subtle); border-color: var(--accent-warm); }
|
|
1348
1695
|
.peer-card,
|
|
@@ -1453,7 +1800,7 @@
|
|
|
1453
1800
|
cursor: not-allowed;
|
|
1454
1801
|
}
|
|
1455
1802
|
.settings-button {
|
|
1456
|
-
transition: opacity
|
|
1803
|
+
transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
|
|
1457
1804
|
}
|
|
1458
1805
|
.sync-toggle-admin {
|
|
1459
1806
|
background: none;
|
|
@@ -1598,7 +1945,7 @@
|
|
|
1598
1945
|
font-family: var(--font-sans);
|
|
1599
1946
|
font-size: 13px;
|
|
1600
1947
|
cursor: pointer;
|
|
1601
|
-
transition: border-color
|
|
1948
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1602
1949
|
}
|
|
1603
1950
|
.sync-legacy-select:hover { border-color: var(--border-hover); }
|
|
1604
1951
|
.sync-legacy-select:focus {
|
|
@@ -1610,13 +1957,10 @@
|
|
|
1610
1957
|
border: 1px solid var(--control-border);
|
|
1611
1958
|
background: var(--control-bg);
|
|
1612
1959
|
color: var(--control-text);
|
|
1613
|
-
border-radius: var(--radius-pill);
|
|
1614
1960
|
padding: 8px 14px;
|
|
1615
|
-
font-family: var(--font-sans);
|
|
1616
1961
|
font-size: 13px;
|
|
1617
1962
|
font-weight: 600;
|
|
1618
|
-
|
|
1619
|
-
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
|
1963
|
+
transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
|
|
1620
1964
|
}
|
|
1621
1965
|
.sync-legacy-button:hover {
|
|
1622
1966
|
background: var(--control-hover-bg);
|
|
@@ -1640,7 +1984,7 @@
|
|
|
1640
1984
|
font-family: var(--font-sans);
|
|
1641
1985
|
font-size: 13px;
|
|
1642
1986
|
cursor: pointer;
|
|
1643
|
-
transition: border-color
|
|
1987
|
+
transition: border-color 140ms ease, box-shadow 140ms ease;
|
|
1644
1988
|
}
|
|
1645
1989
|
.sync-actor-select:hover { border-color: var(--border-hover); }
|
|
1646
1990
|
.sync-actor-select:focus {
|
|
@@ -1648,8 +1992,8 @@
|
|
|
1648
1992
|
border-color: var(--accent);
|
|
1649
1993
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
1650
1994
|
}
|
|
1651
|
-
.peer-meta { font-size: 13px; color: var(--text-tertiary); }
|
|
1652
|
-
.peer-addresses { font-family: var(--font-mono); font-size: 12px; color: var(--text-
|
|
1995
|
+
.peer-meta { font-size: 13px; color: var(--text-tertiary); font-feature-settings: 'tnum' 1; }
|
|
1996
|
+
.peer-addresses { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.02em; }
|
|
1653
1997
|
.attempts-list { margin-top: var(--sp-3); display: grid; gap: 6px; font-size: 13px; color: var(--text-tertiary); }
|
|
1654
1998
|
|
|
1655
1999
|
/* ── Pairing ───────────────────────────────────────────── */
|
|
@@ -1678,8 +2022,6 @@
|
|
|
1678
2022
|
|
|
1679
2023
|
.modal-card {
|
|
1680
2024
|
width: min(520px, 100%);
|
|
1681
|
-
background: var(--surface-1);
|
|
1682
|
-
border: 1px solid var(--border);
|
|
1683
2025
|
border-radius: var(--radius-xl);
|
|
1684
2026
|
box-shadow: var(--shadow-lg);
|
|
1685
2027
|
padding: var(--sp-5);
|
|
@@ -1689,6 +2031,34 @@
|
|
|
1689
2031
|
max-height: min(84vh, 720px);
|
|
1690
2032
|
overflow: hidden;
|
|
1691
2033
|
}
|
|
2034
|
+
|
|
2035
|
+
/* ── Tooltip ─────────────────────────────────────────── */
|
|
2036
|
+
/* Radix Tooltip content + arrow. Replaces native title="..." on
|
|
2037
|
+
hover hints where the cue is load-bearing (stat tiles, absolute
|
|
2038
|
+
timestamps, full file paths). Mono by default since most hints
|
|
2039
|
+
are paths / timestamps; callers can override per instance. */
|
|
2040
|
+
.tooltip-content {
|
|
2041
|
+
background: var(--surface-1);
|
|
2042
|
+
border: 1px solid var(--border);
|
|
2043
|
+
border-radius: var(--radius-sm);
|
|
2044
|
+
box-shadow: var(--shadow-md);
|
|
2045
|
+
color: var(--text-primary);
|
|
2046
|
+
padding: 6px 10px;
|
|
2047
|
+
font-family: var(--font-mono);
|
|
2048
|
+
font-size: 11px;
|
|
2049
|
+
line-height: 1.4;
|
|
2050
|
+
letter-spacing: 0.01em;
|
|
2051
|
+
max-width: 320px;
|
|
2052
|
+
z-index: 60;
|
|
2053
|
+
user-select: none;
|
|
2054
|
+
animation: tooltipFade 140ms ease;
|
|
2055
|
+
}
|
|
2056
|
+
.tooltip-content[data-state="closed"] { animation: none; }
|
|
2057
|
+
.tooltip-arrow { fill: var(--surface-1); filter: drop-shadow(0 1px 0 var(--border)); }
|
|
2058
|
+
@keyframes tooltipFade {
|
|
2059
|
+
from { opacity: 0; transform: translateY(2px); }
|
|
2060
|
+
to { opacity: 1; transform: translateY(0); }
|
|
2061
|
+
}
|
|
1692
2062
|
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
|
|
1693
2063
|
.modal-header h2 { margin: 0; font-size: 18px; }
|
|
1694
2064
|
.modal-close-button {
|
|
@@ -1704,7 +2074,7 @@
|
|
|
1704
2074
|
cursor: pointer;
|
|
1705
2075
|
font-family: var(--font-sans);
|
|
1706
2076
|
font-size: 12px;
|
|
1707
|
-
transition: border-color
|
|
2077
|
+
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
|
1708
2078
|
}
|
|
1709
2079
|
.modal-close-button:hover {
|
|
1710
2080
|
border-color: var(--border-hover);
|
|
@@ -1714,47 +2084,107 @@
|
|
|
1714
2084
|
.modal-close-button:focus-visible {
|
|
1715
2085
|
outline: 2px solid var(--accent);
|
|
1716
2086
|
outline-offset: 2px;
|
|
2087
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1717
2088
|
}
|
|
1718
2089
|
.modal-close-button-icon {
|
|
1719
|
-
|
|
2090
|
+
display: inline-flex;
|
|
2091
|
+
align-items: center;
|
|
2092
|
+
justify-content: center;
|
|
2093
|
+
width: 14px;
|
|
2094
|
+
height: 14px;
|
|
1720
2095
|
color: var(--text-tertiary);
|
|
1721
2096
|
}
|
|
2097
|
+
.modal-close-button-icon svg {
|
|
2098
|
+
width: 100%;
|
|
2099
|
+
height: 100%;
|
|
2100
|
+
}
|
|
1722
2101
|
.modal-close-button-label {
|
|
1723
2102
|
font-weight: 600;
|
|
1724
2103
|
letter-spacing: 0.01em;
|
|
1725
2104
|
}
|
|
1726
2105
|
.modal-body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
|
|
1727
2106
|
.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
|
-
|
|
2107
|
+
/* ── Toast (Radix Toast-backed) ───────────────────────── */
|
|
2108
|
+
/* Fixed viewport anchored bottom-right. Each toast is a surface-card
|
|
2109
|
+
with a severity-tinted left accent keyed to .toast-{variant}. */
|
|
2110
|
+
.toast-viewport {
|
|
2111
|
+
position: fixed;
|
|
2112
|
+
bottom: var(--sp-5);
|
|
2113
|
+
right: var(--sp-5);
|
|
2114
|
+
display: flex;
|
|
2115
|
+
flex-direction: column;
|
|
2116
|
+
gap: var(--sp-2);
|
|
2117
|
+
width: min(380px, calc(100vw - var(--sp-5) * 2));
|
|
2118
|
+
max-width: 100%;
|
|
2119
|
+
margin: 0;
|
|
2120
|
+
padding: 0;
|
|
2121
|
+
list-style: none;
|
|
2122
|
+
z-index: 80;
|
|
2123
|
+
outline: none;
|
|
1735
2124
|
}
|
|
1736
|
-
.
|
|
1737
|
-
|
|
1738
|
-
padding: var(--sp-3) var(--sp-4);
|
|
2125
|
+
.toast-root {
|
|
2126
|
+
background: var(--surface-1);
|
|
1739
2127
|
border: 1px solid var(--border);
|
|
2128
|
+
border-left: 3px solid var(--accent);
|
|
1740
2129
|
border-radius: var(--radius-md);
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
2130
|
+
box-shadow: var(--shadow-md);
|
|
2131
|
+
padding: var(--sp-3) var(--sp-4);
|
|
2132
|
+
display: grid;
|
|
2133
|
+
grid-template-columns: 1fr auto;
|
|
2134
|
+
gap: var(--sp-3);
|
|
2135
|
+
align-items: start;
|
|
2136
|
+
color: var(--text-primary);
|
|
2137
|
+
font-size: 13px;
|
|
2138
|
+
line-height: 1.5;
|
|
1745
2139
|
}
|
|
1746
|
-
.
|
|
1747
|
-
|
|
2140
|
+
.toast-root[data-state="open"] { animation: toastSlideIn 160ms ease; }
|
|
2141
|
+
.toast-root[data-state="closed"] { animation: toastFadeOut 140ms ease forwards; }
|
|
2142
|
+
.toast-root[data-swipe="move"] { transform: translateX(var(--radix-toast-swipe-move-x)); }
|
|
2143
|
+
.toast-root[data-swipe="cancel"] { transform: translateX(0); transition: transform 140ms ease; }
|
|
2144
|
+
.toast-root[data-swipe="end"] { animation: toastSwipeOut 140ms ease forwards; }
|
|
2145
|
+
|
|
2146
|
+
.toast-success { border-left-color: var(--accent); }
|
|
2147
|
+
.toast-info { border-left-color: var(--accent-cool); }
|
|
2148
|
+
.toast-warning { border-left-color: var(--accent-warm); }
|
|
2149
|
+
.toast-error { border-left-color: var(--status-attention); }
|
|
2150
|
+
|
|
2151
|
+
.toast-message { color: var(--text-primary); }
|
|
2152
|
+
|
|
2153
|
+
.toast-close {
|
|
2154
|
+
border: 1px solid var(--border);
|
|
2155
|
+
background: transparent;
|
|
2156
|
+
color: var(--text-tertiary);
|
|
2157
|
+
width: 24px;
|
|
2158
|
+
height: 24px;
|
|
2159
|
+
border-radius: var(--radius-pill);
|
|
2160
|
+
display: inline-flex;
|
|
2161
|
+
align-items: center;
|
|
2162
|
+
justify-content: center;
|
|
2163
|
+
font-size: 14px;
|
|
2164
|
+
line-height: 1;
|
|
2165
|
+
cursor: pointer;
|
|
2166
|
+
transition: background-color 140ms ease, color 140ms ease;
|
|
2167
|
+
padding: 0;
|
|
2168
|
+
flex-shrink: 0;
|
|
1748
2169
|
}
|
|
1749
|
-
.
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
2170
|
+
.toast-close:hover { background: var(--surface-2); color: var(--text-primary); }
|
|
2171
|
+
.toast-close:focus-visible {
|
|
2172
|
+
outline: 2px solid var(--accent);
|
|
2173
|
+
outline-offset: 2px;
|
|
2174
|
+
box-shadow: 0 0 0 4px var(--focus-ring);
|
|
1753
2175
|
}
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
2176
|
+
|
|
2177
|
+
@keyframes toastSlideIn {
|
|
2178
|
+
from { transform: translateX(calc(100% + var(--sp-5))); opacity: 0; }
|
|
2179
|
+
to { transform: translateX(0); opacity: 1; }
|
|
2180
|
+
}
|
|
2181
|
+
@keyframes toastFadeOut {
|
|
2182
|
+
from { opacity: 1; }
|
|
2183
|
+
to { opacity: 0; }
|
|
2184
|
+
}
|
|
2185
|
+
@keyframes toastSwipeOut {
|
|
2186
|
+
from { transform: translateX(var(--radix-toast-swipe-end-x)); }
|
|
2187
|
+
to { transform: translateX(calc(100% + var(--sp-5))); }
|
|
1758
2188
|
}
|
|
1759
2189
|
.viewer-reconnect-overlay {
|
|
1760
2190
|
position: fixed;
|
|
@@ -1836,6 +2266,24 @@
|
|
|
1836
2266
|
.settings-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
|
|
1837
2267
|
.settings-panel[data-state="inactive"] { display: none; }
|
|
1838
2268
|
.settings-panel[hidden] { display: none; }
|
|
2269
|
+
.settings-section-intro {
|
|
2270
|
+
display: flex;
|
|
2271
|
+
flex-direction: column;
|
|
2272
|
+
gap: 4px;
|
|
2273
|
+
padding: var(--sp-2) var(--sp-3);
|
|
2274
|
+
border: 1px solid var(--border);
|
|
2275
|
+
border-radius: var(--radius-sm);
|
|
2276
|
+
background: color-mix(in srgb, var(--surface-0) 78%, var(--accent-subtle));
|
|
2277
|
+
}
|
|
2278
|
+
.settings-section-intro-title {
|
|
2279
|
+
color: var(--text-primary);
|
|
2280
|
+
font-size: 13px;
|
|
2281
|
+
font-weight: 600;
|
|
2282
|
+
}
|
|
2283
|
+
.settings-section-intro-detail {
|
|
2284
|
+
margin: 0;
|
|
2285
|
+
color: var(--text-secondary);
|
|
2286
|
+
}
|
|
1839
2287
|
.observer-status-banner {
|
|
1840
2288
|
display: flex;
|
|
1841
2289
|
flex-direction: column;
|
|
@@ -1908,26 +2356,26 @@
|
|
|
1908
2356
|
}
|
|
1909
2357
|
|
|
1910
2358
|
.help-icon {
|
|
1911
|
-
width:
|
|
1912
|
-
height:
|
|
1913
|
-
border:
|
|
2359
|
+
width: 20px;
|
|
2360
|
+
height: 20px;
|
|
2361
|
+
border: none;
|
|
2362
|
+
background: transparent;
|
|
1914
2363
|
border-radius: 999px;
|
|
1915
2364
|
display: inline-flex;
|
|
1916
2365
|
align-items: center;
|
|
1917
2366
|
justify-content: center;
|
|
1918
|
-
|
|
1919
|
-
color: var(--text-secondary);
|
|
2367
|
+
color: var(--text-tertiary);
|
|
1920
2368
|
cursor: pointer;
|
|
1921
2369
|
user-select: none;
|
|
1922
|
-
background: var(--surface-0);
|
|
1923
2370
|
position: relative;
|
|
1924
2371
|
padding: 0;
|
|
1925
2372
|
}
|
|
1926
|
-
|
|
2373
|
+
.help-icon:hover { color: var(--accent); background: var(--accent-subtle); }
|
|
1927
2374
|
.help-icon:focus-visible {
|
|
1928
|
-
outline: 2px solid var(--
|
|
1929
|
-
outline-offset:
|
|
2375
|
+
outline: 2px solid var(--accent);
|
|
2376
|
+
outline-offset: 2px;
|
|
1930
2377
|
}
|
|
2378
|
+
.help-icon svg { width: 14px; height: 14px; stroke-width: 2; }
|
|
1931
2379
|
|
|
1932
2380
|
.help-tooltip {
|
|
1933
2381
|
position: fixed;
|
|
@@ -1953,14 +2401,15 @@
|
|
|
1953
2401
|
transform: translateY(0);
|
|
1954
2402
|
}
|
|
1955
2403
|
|
|
2404
|
+
/* Inline control row — not its own bordered surface. Lets the intro
|
|
2405
|
+
copy → toggle → tabs read as three stages of hierarchy (context,
|
|
2406
|
+
quick setting, primary nav) instead of three equal-weight cards. */
|
|
1956
2407
|
.settings-advanced-toolbar {
|
|
1957
2408
|
display: flex;
|
|
1958
2409
|
align-items: center;
|
|
1959
2410
|
gap: 10px;
|
|
1960
|
-
padding:
|
|
1961
|
-
|
|
1962
|
-
border-radius: var(--radius-sm);
|
|
1963
|
-
background: var(--surface-0);
|
|
2411
|
+
padding: 4px 0;
|
|
2412
|
+
color: var(--text-secondary);
|
|
1964
2413
|
}
|
|
1965
2414
|
|
|
1966
2415
|
.settings-advanced-toolbar input {
|
|
@@ -2049,7 +2498,7 @@
|
|
|
2049
2498
|
cursor: pointer;
|
|
2050
2499
|
flex-shrink: 0;
|
|
2051
2500
|
padding: 1px;
|
|
2052
|
-
transition: background
|
|
2501
|
+
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
2053
2502
|
}
|
|
2054
2503
|
.settings-switch:hover {
|
|
2055
2504
|
border-color: color-mix(in srgb, var(--accent) 38%, var(--control-hover-border));
|
|
@@ -2075,7 +2524,7 @@
|
|
|
2075
2524
|
background: color-mix(in srgb, var(--surface-0) 88%, white);
|
|
2076
2525
|
border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
|
|
2077
2526
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
2078
|
-
transition: transform
|
|
2527
|
+
transition: transform 140ms ease, background 140ms ease;
|
|
2079
2528
|
transform: translateX(0);
|
|
2080
2529
|
}
|
|
2081
2530
|
.settings-switch[data-state="checked"] .settings-switch-thumb {
|
|
@@ -2122,7 +2571,7 @@
|
|
|
2122
2571
|
font-family: var(--font-sans);
|
|
2123
2572
|
font-size: 12px;
|
|
2124
2573
|
cursor: pointer;
|
|
2125
|
-
transition: background
|
|
2574
|
+
transition: background 140ms ease;
|
|
2126
2575
|
}
|
|
2127
2576
|
.settings-save:hover { background: var(--control-hover-bg); }
|
|
2128
2577
|
.sync-dialog-card {
|
|
@@ -2178,7 +2627,7 @@
|
|
|
2178
2627
|
border-radius: var(--radius-md);
|
|
2179
2628
|
background: color-mix(in srgb, var(--surface-1) 86%, var(--surface-0));
|
|
2180
2629
|
cursor: pointer;
|
|
2181
|
-
transition: border-color
|
|
2630
|
+
transition: border-color 140ms ease, background 140ms ease;
|
|
2182
2631
|
}
|
|
2183
2632
|
.sync-dialog-radio-option:hover {
|
|
2184
2633
|
border-color: var(--border-hover);
|
|
@@ -2238,10 +2687,19 @@
|
|
|
2238
2687
|
50% { transform: scale(1.3); opacity: 0.5; }
|
|
2239
2688
|
}
|
|
2240
2689
|
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2690
|
+
/* newPulse: fresh feed items pulse their kind-banner bottom border
|
|
2691
|
+
from accent-strong to transparent once on mount. The class is
|
|
2692
|
+
applied by feed.ts only while state.newItemKeys holds the item's
|
|
2693
|
+
key (700ms useEffect then clears it). Skipped entirely under
|
|
2694
|
+
prefers-reduced-motion so the ambient accessibility pass still
|
|
2695
|
+
applies. */
|
|
2696
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2697
|
+
@keyframes newPulse {
|
|
2698
|
+
0% { box-shadow: 0 0 0 0 var(--accent-strong); }
|
|
2699
|
+
30% { box-shadow: 0 0 0 6px var(--accent-subtle); }
|
|
2700
|
+
100% { box-shadow: 0 0 0 0 transparent; }
|
|
2701
|
+
}
|
|
2702
|
+
.feed-item.new-item { animation: newPulse 420ms ease-out 1; }
|
|
2245
2703
|
}
|
|
2246
2704
|
|
|
2247
2705
|
/* ── Responsive ────────────────────────────────────────── */
|
|
@@ -2255,6 +2713,7 @@
|
|
|
2255
2713
|
.peer-scope-row { grid-template-columns: 1fr; }
|
|
2256
2714
|
.feed-visibility-controls { align-items: stretch; }
|
|
2257
2715
|
.feed-visibility-select { width: 100%; }
|
|
2716
|
+
.actor-actions { justify-content: flex-start; }
|
|
2258
2717
|
}
|
|
2259
2718
|
|
|
2260
2719
|
@media (max-width: 520px) {
|
|
@@ -2280,11 +2739,10 @@
|
|
|
2280
2739
|
<div class="header-left">
|
|
2281
2740
|
<div class="header-brand">
|
|
2282
2741
|
<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"/>
|
|
2742
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
|
2743
|
+
<rect x="2" y="2" width="13" height="13" rx="2.25" fill="none" stroke="currentColor" stroke-opacity="0.32" stroke-width="1.2"/>
|
|
2744
|
+
<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"/>
|
|
2745
|
+
<rect x="9" y="9" width="13" height="13" rx="2.25" fill="currentColor"/>
|
|
2288
2746
|
</svg>
|
|
2289
2747
|
</span>
|
|
2290
2748
|
<span class="header-title">codemem</span>
|
|
@@ -2299,9 +2757,12 @@
|
|
|
2299
2757
|
<select class="project-filter" id="projectFilter" aria-label="Project filter">
|
|
2300
2758
|
<option value="">All Projects</option>
|
|
2301
2759
|
</select>
|
|
2302
|
-
<
|
|
2303
|
-
|
|
2304
|
-
|
|
2760
|
+
<button class="icon-button" id="themeToggle" type="button" aria-label="Switch theme">
|
|
2761
|
+
<i data-lucide="sun" aria-hidden="true"></i>
|
|
2762
|
+
</button>
|
|
2763
|
+
<button class="icon-button" id="settingsButton" type="button" aria-label="Settings">
|
|
2764
|
+
<i data-lucide="settings" aria-hidden="true"></i>
|
|
2765
|
+
</button>
|
|
2305
2766
|
</div>
|
|
2306
2767
|
</div>
|
|
2307
2768
|
</header>
|
|
@@ -2313,7 +2774,7 @@
|
|
|
2313
2774
|
<button class="tab-btn" id="tabBtn-sync">Sync</button>
|
|
2314
2775
|
<button class="tab-btn" id="tabBtn-coordinator-admin">Coordinator Admin</button>
|
|
2315
2776
|
</nav>
|
|
2316
|
-
<div
|
|
2777
|
+
<div id="toastRoot"></div>
|
|
2317
2778
|
<div class="viewer-reconnect-overlay" id="viewerReconnectOverlay" hidden>
|
|
2318
2779
|
<div class="viewer-reconnect-card" role="status" aria-live="assertive">
|
|
2319
2780
|
<div class="viewer-reconnect-eyebrow">Viewer connection</div>
|
|
@@ -2338,7 +2799,7 @@
|
|
|
2338
2799
|
<div class="modal-header">
|
|
2339
2800
|
<h2 id="settingsTitle">Memory & model settings</h2>
|
|
2340
2801
|
<button class="modal-close-button" id="settingsClose" aria-label="Close settings">
|
|
2341
|
-
<
|
|
2802
|
+
<i class="modal-close-button-icon" aria-hidden="true" data-lucide="x"></i>
|
|
2342
2803
|
<span class="modal-close-button-label">Close</span>
|
|
2343
2804
|
</button>
|
|
2344
2805
|
</div>
|
|
@@ -2568,7 +3029,10 @@
|
|
|
2568
3029
|
<!-- 1. Needs attention + team setup/status -->
|
|
2569
3030
|
<div class="card" id="syncTeamCard">
|
|
2570
3031
|
<div class="section-header">
|
|
2571
|
-
<
|
|
3032
|
+
<div class="section-header-title">
|
|
3033
|
+
<h2>Team sync</h2>
|
|
3034
|
+
<span class="sync-online-badge" id="syncOnlineBadge" hidden role="status" aria-live="polite"></span>
|
|
3035
|
+
</div>
|
|
2572
3036
|
<div class="section-actions">
|
|
2573
3037
|
<button class="settings-button" id="syncNowButton">Sync now</button>
|
|
2574
3038
|
</div>
|
|
@@ -2611,8 +3075,10 @@
|
|
|
2611
3075
|
<h3 class="settings-group-title">People</h3>
|
|
2612
3076
|
<div class="section-meta" id="syncActorsMeta">Create and rename people here. Assign each device below.</div>
|
|
2613
3077
|
<div class="actor-create-row">
|
|
2614
|
-
<
|
|
2615
|
-
|
|
3078
|
+
<div class="sync-labeled-field">
|
|
3079
|
+
<label for="syncActorCreateInput" class="sync-labeled-field-caption">Person name</label>
|
|
3080
|
+
<input class="peer-scope-input" id="syncActorCreateInput" placeholder="e.g. Alex, backend team" />
|
|
3081
|
+
</div>
|
|
2616
3082
|
<button class="settings-button" id="syncActorCreateButton">Create person</button>
|
|
2617
3083
|
</div>
|
|
2618
3084
|
<div class="actor-list" id="syncActorsList"></div>
|
|
@@ -2628,6 +3094,13 @@
|
|
|
2628
3094
|
<div class="sync-skeleton-block"></div>
|
|
2629
3095
|
</div>
|
|
2630
3096
|
|
|
3097
|
+
<h3 class="settings-group-title" style="margin-top: 20px">Connect another device</h3>
|
|
3098
|
+
<div class="section-meta">Share this command on the new device to join it to the team.</div>
|
|
3099
|
+
<div class="actor-create-row">
|
|
3100
|
+
<div id="syncPairingDisclosureMount" style="display: contents"></div>
|
|
3101
|
+
</div>
|
|
3102
|
+
<div id="syncPairingPanelMount" style="display: contents"></div>
|
|
3103
|
+
|
|
2631
3104
|
<div id="syncSharingReview" hidden>
|
|
2632
3105
|
<h3 class="settings-group-title" style="margin-top: 20px">What teammates will receive</h3>
|
|
2633
3106
|
<div class="section-meta" id="syncSharingReviewMeta"></div>
|
|
@@ -2645,19 +3118,18 @@
|
|
|
2645
3118
|
</div>
|
|
2646
3119
|
</div>
|
|
2647
3120
|
|
|
2648
|
-
<!-- 3. Advanced diagnostics — status,
|
|
3121
|
+
<!-- 3. Advanced diagnostics — status, attempts -->
|
|
2649
3122
|
<div class="card" style="animation-delay: 0.06s">
|
|
2650
3123
|
<div class="section-header">
|
|
2651
3124
|
<h2>Advanced diagnostics</h2>
|
|
2652
3125
|
<div class="section-actions">
|
|
2653
|
-
<div id="syncPairingDisclosureMount" style="display: contents"></div>
|
|
2654
3126
|
<label class="small sync-redact-control">
|
|
2655
3127
|
<span id="syncRedactMount"></span>
|
|
2656
3128
|
<span id="syncRedactLabel">Redact</span>
|
|
2657
3129
|
</label>
|
|
2658
3130
|
</div>
|
|
2659
3131
|
</div>
|
|
2660
|
-
<div class="section-meta" id="syncMeta">Use this section for sync debugging
|
|
3132
|
+
<div class="section-meta" id="syncMeta">Use this section for sync debugging and recent attempt details.</div>
|
|
2661
3133
|
<div class="sync-skeleton" id="syncDiagSkeleton" role="status" aria-label="Loading diagnostics">
|
|
2662
3134
|
<div class="sync-skeleton-line long"></div>
|
|
2663
3135
|
<div class="sync-skeleton-line medium"></div>
|
|
@@ -2666,8 +3138,6 @@
|
|
|
2666
3138
|
<div class="sync-actions" id="syncActions"></div>
|
|
2667
3139
|
<div class="grid-2" id="syncStatusGrid"></div>
|
|
2668
3140
|
|
|
2669
|
-
<div id="syncPairingPanelMount" style="display: contents"></div>
|
|
2670
|
-
|
|
2671
3141
|
<h3 class="settings-group-title" style="margin-top: 20px">Recent sync attempts (advanced)</h3>
|
|
2672
3142
|
<div class="attempts-list" id="syncAttempts"></div>
|
|
2673
3143
|
</div>
|