@silicaclaw/cli 1.0.0-beta.25 → 1.0.0-beta.29
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/CHANGELOG.md +27 -0
- package/INSTALL.md +19 -16
- package/README.md +9 -8
- package/apps/local-console/public/index.html +1055 -261
- package/apps/local-console/src/server.ts +21 -0
- package/package.json +1 -1
- package/scripts/quickstart.sh +89 -45
- package/scripts/silicaclaw-cli.mjs +147 -88
- package/scripts/silicaclaw-gateway.mjs +134 -62
|
@@ -18,51 +18,103 @@
|
|
|
18
18
|
<style>
|
|
19
19
|
:root {
|
|
20
20
|
--bg: #0e1015;
|
|
21
|
+
--bg-accent: #13151b;
|
|
21
22
|
--bg-elevated: #191c24;
|
|
22
23
|
--bg-hover: #1f2330;
|
|
24
|
+
--bg-muted: #1f2330;
|
|
23
25
|
--panel: #0e1015;
|
|
26
|
+
--panel-strong: #191c24;
|
|
27
|
+
--panel-hover: #1f2330;
|
|
24
28
|
--card: #161920;
|
|
25
|
-
--
|
|
26
|
-
--
|
|
29
|
+
--card-foreground: #f0f0f2;
|
|
30
|
+
--card-highlight: rgba(255, 255, 255, 0.04);
|
|
31
|
+
--card-soft: rgba(22, 25, 32, 0.86);
|
|
32
|
+
--card-strong: rgba(25, 28, 36, 0.96);
|
|
33
|
+
--chrome: rgba(14, 16, 21, 0.96);
|
|
34
|
+
--chrome-strong: rgba(14, 16, 21, 0.98);
|
|
27
35
|
--text: #d4d4d8;
|
|
28
36
|
--text-strong: #f4f4f5;
|
|
29
|
-
--muted: #
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
37
|
+
--muted: #838387;
|
|
38
|
+
--muted-strong: #62626a;
|
|
39
|
+
--border: #1e2028;
|
|
40
|
+
--border-strong: #2e3040;
|
|
41
|
+
--border-hover: #3e4050;
|
|
42
|
+
--accent: #ff5c5c;
|
|
43
|
+
--accent-hover: #ff7070;
|
|
44
|
+
--accent-subtle: rgba(255, 92, 92, 0.1);
|
|
45
|
+
--accent-glow: rgba(255, 92, 92, 0.2);
|
|
33
46
|
--ok: #22c55e;
|
|
34
47
|
--warn: #f59e0b;
|
|
35
|
-
--
|
|
36
|
-
--
|
|
48
|
+
--danger: #ef4444;
|
|
49
|
+
--info: #3b82f6;
|
|
50
|
+
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent);
|
|
51
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
52
|
+
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
53
|
+
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
|
|
54
|
+
--radius-sm: 6px;
|
|
55
|
+
--radius-md: 10px;
|
|
56
|
+
--radius-lg: 14px;
|
|
57
|
+
--radius-xl: 20px;
|
|
58
|
+
--radius-full: 9999px;
|
|
59
|
+
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
60
|
+
--duration-fast: 100ms;
|
|
61
|
+
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
62
|
+
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
63
|
+
|
|
37
64
|
}
|
|
38
65
|
:root[data-theme-mode="light"] {
|
|
39
66
|
--bg: #f8f9fa;
|
|
40
|
-
--bg-
|
|
67
|
+
--bg-accent: #f1f3f5;
|
|
68
|
+
--bg-elevated: #ffffff;
|
|
41
69
|
--bg-hover: #eceef0;
|
|
70
|
+
--bg-muted: #eceef0;
|
|
42
71
|
--panel: #f8f9fa;
|
|
72
|
+
--panel-strong: #f1f3f5;
|
|
73
|
+
--panel-hover: #e6e8eb;
|
|
43
74
|
--card: #ffffff;
|
|
44
|
-
--
|
|
45
|
-
--
|
|
75
|
+
--card-foreground: #1a1a1e;
|
|
76
|
+
--card-highlight: rgba(0, 0, 0, 0.02);
|
|
77
|
+
--card-soft: rgba(255, 255, 255, 0.9);
|
|
78
|
+
--card-strong: rgba(255, 255, 255, 0.98);
|
|
79
|
+
--chrome: rgba(248, 249, 250, 0.96);
|
|
80
|
+
--chrome-strong: rgba(248, 249, 250, 0.98);
|
|
46
81
|
--text: #3c3c43;
|
|
47
82
|
--text-strong: #1a1a1e;
|
|
48
|
-
--muted: #
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
83
|
+
--muted: #6e6e73;
|
|
84
|
+
--muted-strong: #545458;
|
|
85
|
+
--border: #e5e5ea;
|
|
86
|
+
--border-strong: #d1d1d6;
|
|
87
|
+
--border-hover: #aeaeb2;
|
|
88
|
+
--accent: #dc2626;
|
|
89
|
+
--accent-hover: #ef4444;
|
|
90
|
+
--accent-subtle: rgba(220, 38, 38, 0.08);
|
|
91
|
+
--accent-glow: rgba(220, 38, 38, 0.1);
|
|
92
|
+
--ok: #15803d;
|
|
93
|
+
--warn: #b45309;
|
|
94
|
+
--danger: #dc2626;
|
|
95
|
+
--info: #2563eb;
|
|
96
|
+
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
|
|
97
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
98
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
|
|
99
|
+
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);
|
|
100
|
+
|
|
56
101
|
}
|
|
57
102
|
* { box-sizing: border-box; }
|
|
58
|
-
html, body {
|
|
103
|
+
html, body {
|
|
104
|
+
margin: 0;
|
|
105
|
+
height: 100%;
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
}
|
|
59
108
|
body {
|
|
60
|
-
font
|
|
109
|
+
font: 400 13.5px/1.55 var(--font-body);
|
|
110
|
+
letter-spacing: -0.01em;
|
|
61
111
|
color: var(--text);
|
|
62
112
|
background:
|
|
63
113
|
radial-gradient(900px 420px at 8% -12%, rgba(255, 92, 92, 0.18), transparent 60%),
|
|
64
114
|
linear-gradient(180deg, #0e1015 0%, #0e1015 62%, #0f1219 100%);
|
|
65
115
|
transition: background .2s ease, color .2s ease;
|
|
116
|
+
-webkit-font-smoothing: antialiased;
|
|
117
|
+
-moz-osx-font-smoothing: grayscale;
|
|
66
118
|
}
|
|
67
119
|
:root[data-theme-mode="light"] body {
|
|
68
120
|
background:
|
|
@@ -72,42 +124,121 @@
|
|
|
72
124
|
|
|
73
125
|
.app {
|
|
74
126
|
display: grid;
|
|
75
|
-
grid-template-columns:
|
|
76
|
-
|
|
127
|
+
grid-template-columns: 258px 1fr;
|
|
128
|
+
height: 100vh;
|
|
129
|
+
overflow: hidden;
|
|
77
130
|
transition: grid-template-columns .2s ease;
|
|
78
131
|
}
|
|
79
132
|
.app.nav-collapsed {
|
|
80
|
-
grid-template-columns:
|
|
133
|
+
grid-template-columns: 78px 1fr;
|
|
134
|
+
}
|
|
135
|
+
.app.focus-mode {
|
|
136
|
+
grid-template-columns: 1fr;
|
|
81
137
|
}
|
|
82
138
|
|
|
83
139
|
.sidebar {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
140
|
+
display: flex;
|
|
141
|
+
flex-direction: column;
|
|
142
|
+
min-height: 0;
|
|
143
|
+
border-right: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
|
|
144
|
+
background: var(--bg);
|
|
145
|
+
padding: 14px 10px 12px;
|
|
87
146
|
position: relative;
|
|
147
|
+
overflow: hidden;
|
|
88
148
|
transition: padding .2s ease;
|
|
89
149
|
}
|
|
90
|
-
|
|
150
|
+
:root[data-theme-mode="light"] .sidebar {
|
|
151
|
+
background: var(--panel);
|
|
152
|
+
}
|
|
153
|
+
.app.nav-collapsed .sidebar {
|
|
154
|
+
padding: 12px 8px 10px;
|
|
155
|
+
}
|
|
156
|
+
.sidebar-shell {
|
|
157
|
+
display: flex;
|
|
158
|
+
flex: 1 1 auto;
|
|
159
|
+
min-height: 0;
|
|
160
|
+
flex-direction: column;
|
|
161
|
+
}
|
|
162
|
+
.sidebar-shell__header {
|
|
163
|
+
flex: 0 0 auto;
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
justify-content: space-between;
|
|
167
|
+
gap: 12px;
|
|
168
|
+
min-height: 0;
|
|
169
|
+
padding: 0 8px 18px;
|
|
170
|
+
}
|
|
171
|
+
.nav-collapse-toggle {
|
|
172
|
+
width: 36px;
|
|
173
|
+
height: 36px;
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: center;
|
|
176
|
+
justify-content: center;
|
|
177
|
+
background: var(--bg-elevated);
|
|
178
|
+
border: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent);
|
|
179
|
+
border-radius: 999px;
|
|
180
|
+
cursor: pointer;
|
|
181
|
+
color: var(--muted);
|
|
182
|
+
flex: 0 0 auto;
|
|
183
|
+
transition:
|
|
184
|
+
background .16s ease,
|
|
185
|
+
border-color .16s ease,
|
|
186
|
+
color .16s ease,
|
|
187
|
+
transform .16s ease;
|
|
188
|
+
}
|
|
189
|
+
.nav-collapse-toggle:hover {
|
|
190
|
+
background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
|
|
191
|
+
border-color: color-mix(in srgb, var(--border-strong) 88%, transparent);
|
|
192
|
+
color: var(--text);
|
|
193
|
+
transform: translateY(-1px);
|
|
194
|
+
}
|
|
195
|
+
.nav-collapse-toggle__icon {
|
|
196
|
+
display: flex;
|
|
197
|
+
align-items: center;
|
|
198
|
+
justify-content: center;
|
|
199
|
+
width: 16px;
|
|
200
|
+
height: 16px;
|
|
201
|
+
color: inherit;
|
|
202
|
+
}
|
|
203
|
+
.nav-collapse-toggle__icon svg {
|
|
204
|
+
width: 16px;
|
|
205
|
+
height: 16px;
|
|
206
|
+
stroke: currentColor;
|
|
207
|
+
fill: none;
|
|
208
|
+
stroke-width: 1.5px;
|
|
209
|
+
stroke-linecap: round;
|
|
210
|
+
stroke-linejoin: round;
|
|
211
|
+
}
|
|
212
|
+
.sidebar-shell__body {
|
|
213
|
+
flex: 1 1 auto;
|
|
214
|
+
min-height: 0;
|
|
215
|
+
display: flex;
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
}
|
|
218
|
+
.sidebar-shell__footer {
|
|
219
|
+
flex: 0 0 auto;
|
|
220
|
+
padding: 12px 8px 0;
|
|
221
|
+
}
|
|
91
222
|
.brand {
|
|
92
223
|
display: flex;
|
|
93
224
|
align-items: center;
|
|
94
225
|
gap: 10px;
|
|
95
|
-
margin-bottom:
|
|
226
|
+
margin-bottom: 0;
|
|
96
227
|
}
|
|
97
228
|
.brand-logo {
|
|
98
|
-
width:
|
|
99
|
-
height:
|
|
229
|
+
width: 32px;
|
|
230
|
+
height: 32px;
|
|
100
231
|
border-radius: 10px;
|
|
101
232
|
object-fit: cover;
|
|
102
233
|
display: block;
|
|
103
|
-
box-shadow: 0
|
|
104
|
-
border: 1px solid color-mix(in srgb, var(--
|
|
234
|
+
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
|
|
235
|
+
border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
|
|
105
236
|
}
|
|
106
237
|
.brand-badge {
|
|
107
|
-
width:
|
|
108
|
-
height:
|
|
238
|
+
width: 32px;
|
|
239
|
+
height: 32px;
|
|
109
240
|
border-radius: 10px;
|
|
110
|
-
background: linear-gradient(135deg, var(--
|
|
241
|
+
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
|
111
242
|
color: #fff;
|
|
112
243
|
font-weight: 900;
|
|
113
244
|
display: grid;
|
|
@@ -116,140 +247,452 @@
|
|
|
116
247
|
.brand-badge.hidden { display: none; }
|
|
117
248
|
.brand h1 {
|
|
118
249
|
margin: 0;
|
|
119
|
-
font-size:
|
|
250
|
+
font-size: 15px;
|
|
251
|
+
line-height: 1.1;
|
|
252
|
+
letter-spacing: -0.03em;
|
|
120
253
|
}
|
|
121
254
|
.brand p {
|
|
122
255
|
margin: 2px 0 0;
|
|
123
256
|
color: var(--muted);
|
|
124
|
-
font-size:
|
|
257
|
+
font-size: 10px;
|
|
258
|
+
line-height: 1.15;
|
|
259
|
+
font-weight: 600;
|
|
260
|
+
letter-spacing: 0.08em;
|
|
261
|
+
text-transform: uppercase;
|
|
125
262
|
}
|
|
126
|
-
.
|
|
127
|
-
width:
|
|
128
|
-
|
|
129
|
-
border:
|
|
130
|
-
background: var(--
|
|
131
|
-
|
|
132
|
-
font-size: 12px;
|
|
133
|
-
text-align: left;
|
|
263
|
+
.version-dot {
|
|
264
|
+
width: 5px;
|
|
265
|
+
height: 5px;
|
|
266
|
+
border-radius: 999px;
|
|
267
|
+
background: var(--accent);
|
|
268
|
+
opacity: .85;
|
|
134
269
|
}
|
|
135
270
|
.app.nav-collapsed .brand h1,
|
|
136
271
|
.app.nav-collapsed .brand p,
|
|
137
|
-
.app.nav-collapsed .
|
|
138
|
-
.app.nav-collapsed .sidebar-
|
|
272
|
+
.app.nav-collapsed .sidebar-foot,
|
|
273
|
+
.app.nav-collapsed .sidebar-version__label,
|
|
274
|
+
.app.nav-collapsed .sidebar-nav__label {
|
|
139
275
|
display: none;
|
|
140
276
|
}
|
|
277
|
+
.app.focus-mode .sidebar {
|
|
278
|
+
display: none;
|
|
279
|
+
}
|
|
280
|
+
.app.focus-mode .integration-strip,
|
|
281
|
+
.app.focus-mode .page-hero,
|
|
282
|
+
.app.focus-mode .notice,
|
|
283
|
+
.app.focus-mode #onboardingActions,
|
|
284
|
+
.app.focus-mode #publicDiscoveryHint {
|
|
285
|
+
display: none !important;
|
|
286
|
+
}
|
|
141
287
|
.app.nav-collapsed .brand {
|
|
288
|
+
display: none;
|
|
289
|
+
}
|
|
290
|
+
.app.nav-collapsed .sidebar-shell__header {
|
|
142
291
|
justify-content: center;
|
|
292
|
+
align-items: center;
|
|
293
|
+
gap: 0;
|
|
294
|
+
padding: 0 2px 16px;
|
|
295
|
+
}
|
|
296
|
+
.app.nav-collapsed .nav button {
|
|
297
|
+
justify-content: center;
|
|
298
|
+
width: 44px;
|
|
299
|
+
min-height: 44px;
|
|
300
|
+
padding: 0;
|
|
301
|
+
margin: 0 auto;
|
|
302
|
+
border-radius: 16px;
|
|
303
|
+
border-color: transparent;
|
|
304
|
+
box-shadow: none;
|
|
305
|
+
background: transparent;
|
|
306
|
+
}
|
|
307
|
+
.app.nav-collapsed .nav button .tab-labels {
|
|
308
|
+
display: none;
|
|
309
|
+
}
|
|
310
|
+
.app.nav-collapsed .nav button .tab-icon {
|
|
311
|
+
width: 18px;
|
|
312
|
+
height: 18px;
|
|
313
|
+
}
|
|
314
|
+
.app.nav-collapsed .nav button .tab-icon svg {
|
|
315
|
+
width: 18px;
|
|
316
|
+
height: 18px;
|
|
317
|
+
}
|
|
318
|
+
.app.nav-collapsed .nav button.active::before {
|
|
319
|
+
left: 8px;
|
|
320
|
+
top: 10px;
|
|
321
|
+
bottom: 10px;
|
|
322
|
+
}
|
|
323
|
+
.app.nav-collapsed .sidebar-shell__footer {
|
|
324
|
+
padding: 8px 0 2px;
|
|
325
|
+
}
|
|
326
|
+
.app.nav-collapsed .sidebar-utility {
|
|
327
|
+
display: none;
|
|
328
|
+
}
|
|
329
|
+
.app.nav-collapsed .sidebar-version {
|
|
330
|
+
width: 44px;
|
|
331
|
+
min-height: 44px;
|
|
332
|
+
padding: 0;
|
|
333
|
+
justify-content: center;
|
|
334
|
+
border-radius: 16px;
|
|
335
|
+
}
|
|
336
|
+
.app.nav-collapsed .sidebar-version__text {
|
|
337
|
+
display: none;
|
|
143
338
|
}
|
|
144
339
|
|
|
145
340
|
.nav {
|
|
146
341
|
display: grid;
|
|
147
|
-
gap:
|
|
342
|
+
gap: 4px;
|
|
343
|
+
min-height: 0;
|
|
344
|
+
overflow: auto;
|
|
345
|
+
padding: 0;
|
|
346
|
+
scrollbar-width: none;
|
|
347
|
+
}
|
|
348
|
+
.nav::-webkit-scrollbar { display: none; }
|
|
349
|
+
.sidebar-nav__label {
|
|
350
|
+
padding: 0 10px 8px;
|
|
351
|
+
color: var(--muted);
|
|
352
|
+
font-size: 12px;
|
|
353
|
+
font-weight: 700;
|
|
354
|
+
letter-spacing: 0.06em;
|
|
355
|
+
text-transform: uppercase;
|
|
148
356
|
}
|
|
149
357
|
.nav button {
|
|
358
|
+
position: relative;
|
|
359
|
+
display: flex;
|
|
360
|
+
align-items: center;
|
|
361
|
+
justify-content: flex-start;
|
|
362
|
+
gap: 8px;
|
|
363
|
+
min-height: 40px;
|
|
150
364
|
text-align: left;
|
|
151
365
|
border: 1px solid transparent;
|
|
152
366
|
background: transparent;
|
|
153
367
|
color: var(--muted);
|
|
154
|
-
padding:
|
|
155
|
-
border-radius:
|
|
368
|
+
padding: 0 9px;
|
|
369
|
+
border-radius: 12px;
|
|
156
370
|
cursor: pointer;
|
|
157
371
|
font: inherit;
|
|
372
|
+
transition:
|
|
373
|
+
border-color .16s ease,
|
|
374
|
+
background .16s ease,
|
|
375
|
+
color .16s ease,
|
|
376
|
+
transform .16s ease;
|
|
377
|
+
}
|
|
378
|
+
.nav button .tab-icon {
|
|
379
|
+
width: 16px;
|
|
380
|
+
height: 16px;
|
|
381
|
+
display: inline-flex;
|
|
382
|
+
align-items: center;
|
|
383
|
+
justify-content: center;
|
|
384
|
+
flex-shrink: 0;
|
|
385
|
+
opacity: .72;
|
|
386
|
+
}
|
|
387
|
+
.nav button .tab-icon svg {
|
|
388
|
+
width: 16px;
|
|
389
|
+
height: 16px;
|
|
390
|
+
stroke: currentColor;
|
|
391
|
+
fill: none;
|
|
392
|
+
stroke-width: 1.5px;
|
|
393
|
+
stroke-linecap: round;
|
|
394
|
+
stroke-linejoin: round;
|
|
395
|
+
}
|
|
396
|
+
.nav button .tab-labels {
|
|
397
|
+
min-width: 0;
|
|
158
398
|
}
|
|
159
399
|
.nav button .tab-title {
|
|
160
400
|
display: block;
|
|
161
|
-
font-
|
|
162
|
-
|
|
401
|
+
font-size: 14px;
|
|
402
|
+
font-weight: 600;
|
|
403
|
+
color: inherit;
|
|
404
|
+
white-space: nowrap;
|
|
163
405
|
}
|
|
164
406
|
.nav button .tab-copy {
|
|
165
|
-
display:
|
|
166
|
-
margin-top: 3px;
|
|
167
|
-
font-size: 11px;
|
|
168
|
-
color: var(--muted);
|
|
169
|
-
line-height: 1.35;
|
|
407
|
+
display: none;
|
|
170
408
|
}
|
|
171
409
|
.nav button.active {
|
|
172
|
-
color:
|
|
173
|
-
border-color: color-mix(in srgb, var(--
|
|
174
|
-
background: var(--
|
|
410
|
+
color: var(--text-strong);
|
|
411
|
+
border-color: color-mix(in srgb, var(--accent) 18%, transparent);
|
|
412
|
+
background: color-mix(in srgb, var(--accent-subtle) 88%, var(--bg-elevated) 12%);
|
|
413
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
|
|
414
|
+
}
|
|
415
|
+
.nav button.active .tab-icon {
|
|
416
|
+
opacity: 1;
|
|
417
|
+
color: var(--accent);
|
|
418
|
+
}
|
|
419
|
+
.nav button:hover {
|
|
420
|
+
color: var(--text);
|
|
421
|
+
background: color-mix(in srgb, var(--bg-hover) 68%, transparent);
|
|
422
|
+
border-color: color-mix(in srgb, var(--border) 60%, transparent);
|
|
423
|
+
}
|
|
424
|
+
.nav button:hover .tab-icon {
|
|
425
|
+
opacity: 1;
|
|
175
426
|
}
|
|
176
|
-
.nav button:hover { color: #d2e7ff; }
|
|
177
427
|
|
|
178
428
|
.sidebar-foot {
|
|
179
|
-
margin-top:
|
|
180
|
-
|
|
181
|
-
|
|
429
|
+
margin-top: 12px;
|
|
430
|
+
flex: 0 0 auto;
|
|
431
|
+
border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
|
|
432
|
+
padding-top: 12px;
|
|
182
433
|
color: var(--muted);
|
|
183
434
|
font-size: 12px;
|
|
184
435
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
436
|
+
.sidebar-utility {
|
|
437
|
+
display: grid;
|
|
438
|
+
gap: 8px;
|
|
439
|
+
padding: 12px;
|
|
440
|
+
border-radius: 16px;
|
|
441
|
+
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
|
|
442
|
+
background: var(--bg-elevated);
|
|
443
|
+
box-shadow: none;
|
|
188
444
|
}
|
|
189
|
-
.
|
|
190
|
-
|
|
191
|
-
|
|
445
|
+
.sidebar-utility-row {
|
|
446
|
+
display: flex;
|
|
447
|
+
align-items: center;
|
|
448
|
+
justify-content: space-between;
|
|
449
|
+
gap: 10px;
|
|
192
450
|
}
|
|
193
|
-
.
|
|
194
|
-
|
|
451
|
+
.sidebar-utility__label {
|
|
452
|
+
font-size: 11px;
|
|
453
|
+
font-weight: 700;
|
|
454
|
+
color: var(--muted);
|
|
455
|
+
text-transform: uppercase;
|
|
456
|
+
letter-spacing: 0.06em;
|
|
195
457
|
}
|
|
196
|
-
.
|
|
458
|
+
.sidebar-utility__value {
|
|
459
|
+
color: var(--text);
|
|
460
|
+
font-size: 12px;
|
|
461
|
+
font-weight: 600;
|
|
462
|
+
}
|
|
463
|
+
.sidebar-version {
|
|
464
|
+
margin-top: 10px;
|
|
197
465
|
display: flex;
|
|
466
|
+
align-items: center;
|
|
198
467
|
justify-content: space-between;
|
|
199
468
|
gap: 10px;
|
|
469
|
+
min-height: 40px;
|
|
470
|
+
padding: 0 12px;
|
|
471
|
+
border-radius: 14px;
|
|
472
|
+
background: var(--bg-elevated);
|
|
473
|
+
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
|
|
474
|
+
box-shadow: none;
|
|
475
|
+
}
|
|
476
|
+
.sidebar-version__label {
|
|
477
|
+
display: inline-flex;
|
|
478
|
+
align-items: center;
|
|
479
|
+
gap: 6px;
|
|
480
|
+
font-size: 11px;
|
|
481
|
+
font-weight: 600;
|
|
482
|
+
color: var(--muted);
|
|
483
|
+
text-transform: uppercase;
|
|
484
|
+
letter-spacing: 0.06em;
|
|
485
|
+
}
|
|
486
|
+
.sidebar-version__text {
|
|
487
|
+
font-size: 12px;
|
|
488
|
+
color: var(--text);
|
|
489
|
+
font-weight: 600;
|
|
490
|
+
}
|
|
491
|
+
.sidebar-version__status {
|
|
492
|
+
width: 8px;
|
|
493
|
+
height: 8px;
|
|
494
|
+
border-radius: 999px;
|
|
495
|
+
flex-shrink: 0;
|
|
496
|
+
margin-left: auto;
|
|
497
|
+
background: var(--danger);
|
|
498
|
+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
|
|
499
|
+
}
|
|
500
|
+
.sidebar-version__status.online {
|
|
501
|
+
background: var(--ok);
|
|
502
|
+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent);
|
|
503
|
+
}
|
|
504
|
+
.app.nav-collapsed .sidebar-version {
|
|
505
|
+
justify-content: center;
|
|
506
|
+
padding: 0;
|
|
507
|
+
}
|
|
508
|
+
.app.nav-collapsed .sidebar-version__status {
|
|
509
|
+
margin-left: 0;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.main {
|
|
513
|
+
display: flex;
|
|
514
|
+
flex-direction: column;
|
|
515
|
+
min-width: 0;
|
|
516
|
+
min-height: 0;
|
|
517
|
+
height: 100vh;
|
|
518
|
+
overflow: hidden;
|
|
519
|
+
padding: 0;
|
|
520
|
+
}
|
|
521
|
+
.topbar {
|
|
522
|
+
flex: 0 0 auto;
|
|
523
|
+
display: flex;
|
|
524
|
+
justify-content: space-between;
|
|
525
|
+
gap: 12px;
|
|
200
526
|
align-items: center;
|
|
201
|
-
|
|
527
|
+
min-height: 52px;
|
|
528
|
+
padding: 0 24px;
|
|
529
|
+
border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
|
|
530
|
+
background: var(--chrome);
|
|
531
|
+
backdrop-filter: blur(12px) saturate(1.6);
|
|
532
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.6);
|
|
202
533
|
}
|
|
203
534
|
.topbar h2 {
|
|
535
|
+
display: none;
|
|
204
536
|
margin: 0;
|
|
205
|
-
font-size: 22px;
|
|
206
537
|
}
|
|
207
538
|
.topbar p {
|
|
208
|
-
|
|
539
|
+
display: none;
|
|
540
|
+
margin: 0;
|
|
209
541
|
color: var(--muted);
|
|
210
|
-
font-size:
|
|
542
|
+
font-size: 12px;
|
|
543
|
+
white-space: nowrap;
|
|
544
|
+
overflow: hidden;
|
|
545
|
+
text-overflow: ellipsis;
|
|
546
|
+
}
|
|
547
|
+
.dashboard-header__breadcrumb {
|
|
548
|
+
display: flex;
|
|
549
|
+
align-items: center;
|
|
550
|
+
gap: 8px;
|
|
551
|
+
min-width: 0;
|
|
552
|
+
overflow: hidden;
|
|
553
|
+
font-size: 12px;
|
|
554
|
+
margin-bottom: 2px;
|
|
555
|
+
letter-spacing: 0.01em;
|
|
556
|
+
}
|
|
557
|
+
.dashboard-header__breadcrumb-link,
|
|
558
|
+
.dashboard-header__breadcrumb-sep {
|
|
559
|
+
color: var(--muted);
|
|
560
|
+
}
|
|
561
|
+
.dashboard-header__breadcrumb-current {
|
|
562
|
+
color: var(--text-strong);
|
|
563
|
+
font-weight: 650;
|
|
564
|
+
white-space: nowrap;
|
|
565
|
+
overflow: hidden;
|
|
566
|
+
text-overflow: ellipsis;
|
|
211
567
|
}
|
|
212
568
|
|
|
569
|
+
.topnav-shell__content {
|
|
570
|
+
min-width: 0;
|
|
571
|
+
flex: 1;
|
|
572
|
+
overflow: hidden;
|
|
573
|
+
}
|
|
574
|
+
.main-scroll {
|
|
575
|
+
flex: 1 1 auto;
|
|
576
|
+
min-height: 0;
|
|
577
|
+
overflow: auto;
|
|
578
|
+
padding: 12px 18px 18px;
|
|
579
|
+
}
|
|
213
580
|
.status-row {
|
|
214
581
|
display: flex;
|
|
215
582
|
gap: 8px;
|
|
216
|
-
flex-wrap:
|
|
583
|
+
flex-wrap: nowrap;
|
|
217
584
|
align-items: center;
|
|
585
|
+
flex-shrink: 0;
|
|
586
|
+
min-width: max-content;
|
|
218
587
|
}
|
|
219
|
-
.
|
|
220
|
-
display: flex;
|
|
588
|
+
.topbar-actions {
|
|
589
|
+
display: inline-flex;
|
|
590
|
+
align-items: center;
|
|
221
591
|
gap: 8px;
|
|
222
|
-
margin-left: 6px;
|
|
223
592
|
}
|
|
224
|
-
.
|
|
593
|
+
.icon-btn {
|
|
594
|
+
width: 30px;
|
|
595
|
+
height: 30px;
|
|
225
596
|
display: inline-flex;
|
|
226
|
-
|
|
227
|
-
|
|
597
|
+
align-items: center;
|
|
598
|
+
justify-content: center;
|
|
228
599
|
border-radius: 999px;
|
|
229
|
-
border: 1px solid var(--
|
|
600
|
+
border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
|
|
230
601
|
background: var(--bg-elevated);
|
|
602
|
+
color: var(--muted);
|
|
603
|
+
padding: 0;
|
|
604
|
+
}
|
|
605
|
+
.icon-btn:hover {
|
|
606
|
+
color: var(--text-strong);
|
|
607
|
+
border-color: color-mix(in srgb, var(--accent) 28%, transparent);
|
|
608
|
+
background: color-mix(in srgb, var(--accent-subtle) 65%, var(--bg-elevated));
|
|
609
|
+
}
|
|
610
|
+
.icon-btn.active {
|
|
611
|
+
color: var(--text-strong);
|
|
612
|
+
border-color: color-mix(in srgb, var(--accent) 34%, transparent);
|
|
613
|
+
background: var(--accent-subtle);
|
|
614
|
+
}
|
|
615
|
+
.icon-btn svg {
|
|
616
|
+
width: 15px;
|
|
617
|
+
height: 15px;
|
|
618
|
+
stroke: currentColor;
|
|
619
|
+
}
|
|
620
|
+
.topbar-theme-mode {
|
|
621
|
+
display: inline-flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
gap: 2px;
|
|
624
|
+
padding: 3px;
|
|
625
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
626
|
+
border-radius: 999px;
|
|
627
|
+
background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
|
|
231
628
|
}
|
|
232
|
-
.theme-
|
|
629
|
+
.topbar-theme-mode__btn {
|
|
630
|
+
width: 30px;
|
|
631
|
+
height: 30px;
|
|
632
|
+
display: inline-flex;
|
|
633
|
+
align-items: center;
|
|
634
|
+
justify-content: center;
|
|
635
|
+
padding: 0;
|
|
233
636
|
border: 1px solid transparent;
|
|
637
|
+
border-radius: 999px;
|
|
234
638
|
background: transparent;
|
|
235
639
|
color: var(--muted);
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
640
|
+
cursor: pointer;
|
|
641
|
+
transition:
|
|
642
|
+
color var(--duration-fast) ease,
|
|
643
|
+
background var(--duration-fast) ease,
|
|
644
|
+
border-color var(--duration-fast) ease;
|
|
240
645
|
}
|
|
241
|
-
.theme-
|
|
242
|
-
color: var(--text
|
|
243
|
-
background: var(--
|
|
244
|
-
|
|
646
|
+
.topbar-theme-mode__btn:hover {
|
|
647
|
+
color: var(--text);
|
|
648
|
+
background: var(--bg-hover);
|
|
649
|
+
}
|
|
650
|
+
.topbar-theme-mode__btn:focus-visible {
|
|
651
|
+
outline: none;
|
|
652
|
+
box-shadow: var(--focus-ring);
|
|
653
|
+
}
|
|
654
|
+
.topbar-theme-mode__btn--active {
|
|
655
|
+
color: var(--accent);
|
|
656
|
+
background: var(--accent-subtle);
|
|
657
|
+
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
|
|
658
|
+
}
|
|
659
|
+
.topbar-theme-mode__btn svg {
|
|
660
|
+
width: 14px;
|
|
661
|
+
height: 14px;
|
|
662
|
+
stroke: currentColor;
|
|
663
|
+
fill: none;
|
|
664
|
+
stroke-width: 1.75px;
|
|
665
|
+
stroke-linecap: round;
|
|
666
|
+
stroke-linejoin: round;
|
|
667
|
+
}
|
|
668
|
+
.theme-icon {
|
|
669
|
+
width: 14px;
|
|
670
|
+
height: 14px;
|
|
671
|
+
display: inline-flex;
|
|
672
|
+
align-items: center;
|
|
673
|
+
justify-content: center;
|
|
674
|
+
}
|
|
675
|
+
.theme-icon svg {
|
|
676
|
+
width: 14px;
|
|
677
|
+
height: 14px;
|
|
678
|
+
stroke: currentColor;
|
|
679
|
+
fill: none;
|
|
680
|
+
stroke-width: 1.75px;
|
|
681
|
+
stroke-linecap: round;
|
|
682
|
+
stroke-linejoin: round;
|
|
245
683
|
}
|
|
246
684
|
.pill {
|
|
247
685
|
border-radius: 999px;
|
|
248
|
-
border: 1px solid var(--
|
|
249
|
-
background: var(--bg-elevated);
|
|
686
|
+
border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
|
|
687
|
+
background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
|
|
250
688
|
color: var(--muted);
|
|
251
|
-
padding:
|
|
689
|
+
padding: 6px 10px;
|
|
252
690
|
font-size: 12px;
|
|
691
|
+
font-weight: 500;
|
|
692
|
+
min-height: 32px;
|
|
693
|
+
display: inline-flex;
|
|
694
|
+
align-items: center;
|
|
695
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
253
696
|
}
|
|
254
697
|
.pill.ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); }
|
|
255
698
|
.pill.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
|
|
@@ -257,8 +700,8 @@
|
|
|
257
700
|
.notice {
|
|
258
701
|
display: none;
|
|
259
702
|
margin-bottom: 12px;
|
|
260
|
-
border: 1px solid color-mix(in srgb, var(--
|
|
261
|
-
background: var(--
|
|
703
|
+
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
|
|
704
|
+
background: var(--accent-subtle);
|
|
262
705
|
border-radius: 10px;
|
|
263
706
|
padding: 10px 12px;
|
|
264
707
|
font-size: 13px;
|
|
@@ -268,13 +711,16 @@
|
|
|
268
711
|
position: sticky;
|
|
269
712
|
top: 0;
|
|
270
713
|
z-index: 9;
|
|
271
|
-
margin-bottom:
|
|
272
|
-
border: 1px solid var(--
|
|
273
|
-
border-radius:
|
|
274
|
-
background:
|
|
275
|
-
|
|
276
|
-
|
|
714
|
+
margin-bottom: 8px;
|
|
715
|
+
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
|
|
716
|
+
border-radius: 14px;
|
|
717
|
+
background:
|
|
718
|
+
linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 94%, transparent));
|
|
719
|
+
padding: 8px 12px;
|
|
720
|
+
font-size: 12px;
|
|
721
|
+
line-height: 1.45;
|
|
277
722
|
color: var(--text);
|
|
723
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
278
724
|
}
|
|
279
725
|
.integration-strip.ok {
|
|
280
726
|
border-color: rgba(34, 197, 94, 0.35);
|
|
@@ -286,81 +732,153 @@
|
|
|
286
732
|
display: grid;
|
|
287
733
|
grid-template-columns: 1.2fr .8fr;
|
|
288
734
|
gap: 10px;
|
|
289
|
-
margin-bottom:
|
|
735
|
+
margin-bottom: 8px;
|
|
290
736
|
}
|
|
291
737
|
.hero-copy {
|
|
292
|
-
border: 1px solid var(--
|
|
293
|
-
border-radius:
|
|
294
|
-
background:
|
|
295
|
-
|
|
738
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
739
|
+
border-radius: 16px;
|
|
740
|
+
background:
|
|
741
|
+
linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 98%, transparent), color-mix(in srgb, var(--card-soft) 96%, transparent));
|
|
742
|
+
padding: 11px 14px;
|
|
743
|
+
box-shadow:
|
|
744
|
+
inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
|
|
745
|
+
0 10px 24px color-mix(in srgb, black 9%, transparent);
|
|
296
746
|
}
|
|
297
747
|
.hero-copy h3 {
|
|
298
748
|
margin: 0;
|
|
299
|
-
font-size:
|
|
749
|
+
font-size: 17px;
|
|
300
750
|
color: var(--text-strong);
|
|
751
|
+
letter-spacing: -0.02em;
|
|
301
752
|
}
|
|
302
753
|
.hero-copy p {
|
|
303
|
-
margin:
|
|
754
|
+
margin: 5px 0 0;
|
|
304
755
|
color: var(--muted);
|
|
305
|
-
font-size:
|
|
306
|
-
line-height: 1.
|
|
756
|
+
font-size: 12px;
|
|
757
|
+
line-height: 1.42;
|
|
307
758
|
}
|
|
308
759
|
.hero-meta {
|
|
309
|
-
border: 1px solid var(--
|
|
310
|
-
border-radius:
|
|
311
|
-
background:
|
|
312
|
-
|
|
760
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
761
|
+
border-radius: 16px;
|
|
762
|
+
background:
|
|
763
|
+
linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
|
|
764
|
+
padding: 11px;
|
|
765
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
313
766
|
}
|
|
314
767
|
.hero-meta-grid {
|
|
315
768
|
display: grid;
|
|
316
769
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
317
|
-
gap:
|
|
770
|
+
gap: 6px;
|
|
318
771
|
}
|
|
319
772
|
.hero-meta-item {
|
|
320
|
-
border: 1px solid var(--
|
|
321
|
-
border-radius:
|
|
322
|
-
background: color-mix(in srgb, var(--panel)
|
|
323
|
-
padding:
|
|
773
|
+
border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
|
|
774
|
+
border-radius: 12px;
|
|
775
|
+
background: color-mix(in srgb, var(--panel) 90%, transparent);
|
|
776
|
+
padding: 7px 9px;
|
|
324
777
|
}
|
|
325
778
|
|
|
326
779
|
.view { display: none; }
|
|
327
|
-
.view.active {
|
|
780
|
+
.view.active {
|
|
781
|
+
display: grid;
|
|
782
|
+
gap: 8px;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.section-header {
|
|
786
|
+
display: flex;
|
|
787
|
+
align-items: center;
|
|
788
|
+
justify-content: space-between;
|
|
789
|
+
gap: 12px;
|
|
790
|
+
min-width: 0;
|
|
791
|
+
}
|
|
792
|
+
.section-header__copy {
|
|
793
|
+
min-width: 0;
|
|
794
|
+
}
|
|
795
|
+
.section-header__eyebrow {
|
|
796
|
+
margin: 0 0 3px;
|
|
797
|
+
color: var(--muted);
|
|
798
|
+
font-size: 11px;
|
|
799
|
+
font-weight: 700;
|
|
800
|
+
letter-spacing: 0.08em;
|
|
801
|
+
text-transform: uppercase;
|
|
802
|
+
}
|
|
803
|
+
.section-header__title {
|
|
804
|
+
margin: 0;
|
|
805
|
+
color: var(--text-strong);
|
|
806
|
+
font-size: 16px;
|
|
807
|
+
letter-spacing: -0.02em;
|
|
808
|
+
}
|
|
809
|
+
.section-header__body {
|
|
810
|
+
margin: 4px 0 0;
|
|
811
|
+
color: var(--muted);
|
|
812
|
+
font-size: 12px;
|
|
813
|
+
line-height: 1.45;
|
|
814
|
+
}
|
|
815
|
+
.section-surface {
|
|
816
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
817
|
+
border-radius: 16px;
|
|
818
|
+
background:
|
|
819
|
+
linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 98%, transparent), color-mix(in srgb, var(--card-soft) 96%, transparent));
|
|
820
|
+
padding: 12px;
|
|
821
|
+
box-shadow:
|
|
822
|
+
inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
|
|
823
|
+
0 14px 30px color-mix(in srgb, black 10%, transparent);
|
|
824
|
+
}
|
|
825
|
+
.section-surface.compact {
|
|
826
|
+
padding: 10px 12px;
|
|
827
|
+
}
|
|
328
828
|
|
|
329
829
|
.grid {
|
|
330
830
|
display: grid;
|
|
331
|
-
gap:
|
|
831
|
+
gap: 8px;
|
|
332
832
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
333
833
|
}
|
|
834
|
+
#networkCards,
|
|
835
|
+
#socialPrimaryCards,
|
|
836
|
+
#socialIntegrationCards,
|
|
837
|
+
#socialAdvancedCards {
|
|
838
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
839
|
+
}
|
|
334
840
|
.card {
|
|
335
|
-
border: 1px solid var(--
|
|
336
|
-
border-radius:
|
|
337
|
-
background:
|
|
841
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
842
|
+
border-radius: 16px;
|
|
843
|
+
background:
|
|
844
|
+
linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 98%, transparent), color-mix(in srgb, var(--card-soft) 96%, transparent));
|
|
338
845
|
padding: 12px;
|
|
339
|
-
box-shadow:
|
|
846
|
+
box-shadow:
|
|
847
|
+
inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
|
|
848
|
+
0 14px 30px color-mix(in srgb, black 10%, transparent);
|
|
340
849
|
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
|
|
341
850
|
}
|
|
342
851
|
.card:hover {
|
|
343
|
-
border-color: color-mix(in srgb, var(--
|
|
344
|
-
box-shadow:
|
|
852
|
+
border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
|
|
853
|
+
box-shadow:
|
|
854
|
+
inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
|
|
855
|
+
0 18px 36px color-mix(in srgb, black 14%, transparent);
|
|
345
856
|
}
|
|
346
857
|
.label { font-size: 12px; color: var(--muted); }
|
|
347
|
-
.value { margin-top: 4px; font-size:
|
|
858
|
+
.value { margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
|
|
348
859
|
|
|
349
860
|
.split {
|
|
350
|
-
margin-top:
|
|
861
|
+
margin-top: 8px;
|
|
351
862
|
display: grid;
|
|
352
|
-
gap:
|
|
863
|
+
gap: 8px;
|
|
353
864
|
grid-template-columns: 1.2fr 1fr;
|
|
354
865
|
}
|
|
355
|
-
.title-sm { margin: 0 0 10px; font-size:
|
|
866
|
+
.title-sm { margin: 0 0 10px; font-size: 16px; letter-spacing: -0.02em; }
|
|
356
867
|
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
|
|
357
868
|
|
|
358
869
|
.table {
|
|
359
870
|
width: 100%;
|
|
360
871
|
border-collapse: collapse;
|
|
361
872
|
}
|
|
873
|
+
.table thead th {
|
|
874
|
+
color: var(--muted);
|
|
875
|
+
font-size: 11px;
|
|
876
|
+
font-weight: 700;
|
|
877
|
+
text-transform: uppercase;
|
|
878
|
+
letter-spacing: 0.07em;
|
|
879
|
+
}
|
|
362
880
|
.table th, .table td {
|
|
363
|
-
border-bottom: 1px solid var(--
|
|
881
|
+
border-bottom: 1px solid var(--border);
|
|
364
882
|
text-align: left;
|
|
365
883
|
padding: 8px 6px;
|
|
366
884
|
font-size: 13px;
|
|
@@ -375,22 +893,33 @@
|
|
|
375
893
|
input, textarea {
|
|
376
894
|
margin-top: 5px;
|
|
377
895
|
width: 100%;
|
|
378
|
-
border-radius:
|
|
379
|
-
border: 1px solid var(--
|
|
380
|
-
background: var(--bg-elevated);
|
|
381
|
-
color:
|
|
896
|
+
border-radius: 12px;
|
|
897
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
898
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
|
|
899
|
+
color: var(--text);
|
|
382
900
|
font: inherit;
|
|
383
901
|
padding: 10px;
|
|
902
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
|
|
384
903
|
}
|
|
385
904
|
select {
|
|
386
905
|
margin-top: 5px;
|
|
387
906
|
width: 100%;
|
|
388
|
-
border-radius:
|
|
389
|
-
border: 1px solid var(--
|
|
390
|
-
background: var(--bg-elevated);
|
|
907
|
+
border-radius: 12px;
|
|
908
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
909
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
|
|
391
910
|
color: var(--text);
|
|
392
911
|
font: inherit;
|
|
393
912
|
padding: 10px;
|
|
913
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
|
|
914
|
+
}
|
|
915
|
+
input:focus,
|
|
916
|
+
textarea:focus,
|
|
917
|
+
select:focus {
|
|
918
|
+
outline: none;
|
|
919
|
+
border-color: color-mix(in srgb, var(--accent) 34%, transparent);
|
|
920
|
+
box-shadow:
|
|
921
|
+
inset 0 1px 0 color-mix(in srgb, white 3%, transparent),
|
|
922
|
+
0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
|
|
394
923
|
}
|
|
395
924
|
textarea { min-height: 90px; resize: vertical; }
|
|
396
925
|
|
|
@@ -399,11 +928,17 @@
|
|
|
399
928
|
gap: 8px;
|
|
400
929
|
flex-wrap: wrap;
|
|
401
930
|
}
|
|
931
|
+
.actions button,
|
|
932
|
+
.action-bar button,
|
|
933
|
+
.toolbar button {
|
|
934
|
+
min-height: 38px;
|
|
935
|
+
}
|
|
402
936
|
.action-bar {
|
|
403
937
|
display: flex;
|
|
404
938
|
gap: 8px;
|
|
405
939
|
flex-wrap: wrap;
|
|
406
|
-
margin-bottom:
|
|
940
|
+
margin-bottom: 8px;
|
|
941
|
+
padding: 2px 0 0;
|
|
407
942
|
}
|
|
408
943
|
.summary-list {
|
|
409
944
|
display: grid;
|
|
@@ -413,39 +948,67 @@
|
|
|
413
948
|
display: grid;
|
|
414
949
|
gap: 3px;
|
|
415
950
|
padding: 10px;
|
|
416
|
-
border-radius:
|
|
417
|
-
border: 1px solid var(--
|
|
418
|
-
background: color-mix(in srgb, var(--bg-elevated)
|
|
951
|
+
border-radius: 12px;
|
|
952
|
+
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
|
|
953
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
|
|
954
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
419
955
|
}
|
|
420
956
|
.empty-state {
|
|
421
|
-
border: 1px dashed var(--
|
|
422
|
-
border-radius:
|
|
423
|
-
padding:
|
|
957
|
+
border: 1px dashed color-mix(in srgb, var(--border-strong) 88%, transparent);
|
|
958
|
+
border-radius: 14px;
|
|
959
|
+
padding: 18px;
|
|
424
960
|
color: var(--muted);
|
|
425
|
-
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
961
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--bg-elevated) 88%, transparent));
|
|
962
|
+
line-height: 1.55;
|
|
426
963
|
}
|
|
427
964
|
button {
|
|
428
965
|
border: 1px solid transparent;
|
|
429
|
-
border-radius:
|
|
430
|
-
background: var(--
|
|
966
|
+
border-radius: 12px;
|
|
967
|
+
background: var(--accent);
|
|
431
968
|
color: #ffffff;
|
|
432
969
|
font-weight: 700;
|
|
433
970
|
padding: 9px 13px;
|
|
434
971
|
cursor: pointer;
|
|
972
|
+
box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 16%, transparent);
|
|
973
|
+
}
|
|
974
|
+
button:hover {
|
|
975
|
+
transform: translateY(-1px);
|
|
976
|
+
filter: saturate(1.04);
|
|
977
|
+
}
|
|
978
|
+
.nav button,
|
|
979
|
+
.nav-collapse-toggle,
|
|
980
|
+
.icon-btn,
|
|
981
|
+
.topbar-theme-mode__btn {
|
|
982
|
+
box-shadow: none;
|
|
983
|
+
filter: none;
|
|
984
|
+
}
|
|
985
|
+
.nav button,
|
|
986
|
+
.nav-collapse-toggle,
|
|
987
|
+
.icon-btn {
|
|
988
|
+
background: transparent;
|
|
989
|
+
color: var(--muted);
|
|
990
|
+
}
|
|
991
|
+
.nav button:hover,
|
|
992
|
+
.nav-collapse-toggle:hover,
|
|
993
|
+
.icon-btn:hover,
|
|
994
|
+
.topbar-theme-mode__btn:hover {
|
|
995
|
+
filter: none;
|
|
435
996
|
}
|
|
436
997
|
button.secondary {
|
|
437
|
-
border-color: var(--
|
|
438
|
-
background: var(--bg-elevated);
|
|
998
|
+
border-color: var(--border-strong);
|
|
999
|
+
background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
|
|
439
1000
|
color: var(--text);
|
|
1001
|
+
box-shadow: none;
|
|
440
1002
|
}
|
|
441
1003
|
|
|
442
1004
|
.feedback {
|
|
443
|
-
border: 1px solid var(--
|
|
444
|
-
border-radius:
|
|
445
|
-
background: var(--bg-elevated);
|
|
446
|
-
padding:
|
|
1005
|
+
border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
|
|
1006
|
+
border-radius: 12px;
|
|
1007
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
|
|
1008
|
+
padding: 10px 11px;
|
|
447
1009
|
font-size: 13px;
|
|
448
1010
|
color: var(--muted);
|
|
1011
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
449
1012
|
}
|
|
450
1013
|
.profile-layout {
|
|
451
1014
|
display: grid;
|
|
@@ -453,10 +1016,11 @@
|
|
|
453
1016
|
grid-template-columns: 1.1fr .9fr;
|
|
454
1017
|
}
|
|
455
1018
|
.profile-meta {
|
|
456
|
-
border: 1px solid var(--
|
|
457
|
-
border-radius:
|
|
1019
|
+
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
|
|
1020
|
+
border-radius: 12px;
|
|
458
1021
|
padding: 10px;
|
|
459
|
-
background: color-mix(in srgb, var(--card)
|
|
1022
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
|
|
1023
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
460
1024
|
}
|
|
461
1025
|
.profile-meta h4 {
|
|
462
1026
|
margin: 0 0 8px;
|
|
@@ -481,9 +1045,9 @@
|
|
|
481
1045
|
flex-wrap: wrap;
|
|
482
1046
|
}
|
|
483
1047
|
.tag-chip {
|
|
484
|
-
border: 1px solid var(--
|
|
1048
|
+
border: 1px solid var(--border-strong);
|
|
485
1049
|
border-radius: 999px;
|
|
486
|
-
background: var(--
|
|
1050
|
+
background: var(--bg-hover);
|
|
487
1051
|
color: var(--text);
|
|
488
1052
|
padding: 3px 9px;
|
|
489
1053
|
font-size: 12px;
|
|
@@ -496,14 +1060,15 @@
|
|
|
496
1060
|
margin-top: 4px;
|
|
497
1061
|
color: var(--muted);
|
|
498
1062
|
font-size: 12px;
|
|
1063
|
+
line-height: 1.45;
|
|
499
1064
|
}
|
|
500
1065
|
.field-error {
|
|
501
1066
|
margin-top: 4px;
|
|
502
|
-
color: var(--
|
|
1067
|
+
color: var(--danger);
|
|
503
1068
|
font-size: 12px;
|
|
504
1069
|
}
|
|
505
1070
|
.input-invalid {
|
|
506
|
-
border-color: color-mix(in srgb, var(--
|
|
1071
|
+
border-color: color-mix(in srgb, var(--danger) 55%, transparent);
|
|
507
1072
|
}
|
|
508
1073
|
.save-busy {
|
|
509
1074
|
opacity: 0.7;
|
|
@@ -513,41 +1078,50 @@
|
|
|
513
1078
|
.logs {
|
|
514
1079
|
max-height: 420px;
|
|
515
1080
|
overflow: auto;
|
|
516
|
-
border: 1px solid var(--
|
|
517
|
-
border-radius:
|
|
518
|
-
background: var(--panel);
|
|
1081
|
+
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
|
|
1082
|
+
border-radius: 14px;
|
|
1083
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
|
|
519
1084
|
padding: 10px;
|
|
1085
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
|
|
520
1086
|
}
|
|
521
1087
|
.log-item {
|
|
522
|
-
border-bottom: 1px dashed var(--
|
|
1088
|
+
border-bottom: 1px dashed var(--border);
|
|
523
1089
|
padding: 7px 0;
|
|
524
1090
|
}
|
|
525
1091
|
.log-item:last-child { border-bottom: 0; }
|
|
526
1092
|
.log-info { color: #8dc6ff; }
|
|
527
1093
|
.log-warn { color: var(--warn); }
|
|
528
|
-
.log-error { color: var(--
|
|
1094
|
+
.log-error { color: var(--danger); }
|
|
529
1095
|
.toolbar {
|
|
530
1096
|
display: flex;
|
|
531
1097
|
gap: 10px;
|
|
532
1098
|
flex-wrap: wrap;
|
|
533
1099
|
align-items: end;
|
|
534
1100
|
margin-bottom: 10px;
|
|
1101
|
+
padding-bottom: 2px;
|
|
535
1102
|
}
|
|
536
1103
|
.toolbar .field {
|
|
537
1104
|
min-width: 180px;
|
|
538
1105
|
}
|
|
539
1106
|
.mono-block {
|
|
540
|
-
border: 1px solid var(--
|
|
541
|
-
border-radius:
|
|
542
|
-
background: color-mix(in srgb, var(--bg-elevated)
|
|
1107
|
+
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
|
|
1108
|
+
border-radius: 12px;
|
|
1109
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
|
|
543
1110
|
padding: 10px;
|
|
544
1111
|
max-height: 240px;
|
|
545
1112
|
overflow: auto;
|
|
546
1113
|
white-space: pre-wrap;
|
|
547
1114
|
word-break: break-word;
|
|
1115
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
|
|
548
1116
|
}
|
|
549
1117
|
.advanced-panel {
|
|
550
|
-
margin-top:
|
|
1118
|
+
margin-top: 8px;
|
|
1119
|
+
}
|
|
1120
|
+
.advanced-panel.card > summary,
|
|
1121
|
+
details.card > summary {
|
|
1122
|
+
display: flex;
|
|
1123
|
+
align-items: center;
|
|
1124
|
+
justify-content: space-between;
|
|
551
1125
|
}
|
|
552
1126
|
.advanced-panel summary {
|
|
553
1127
|
cursor: pointer;
|
|
@@ -568,7 +1142,7 @@
|
|
|
568
1142
|
right: 16px;
|
|
569
1143
|
bottom: 16px;
|
|
570
1144
|
background: var(--bg-elevated);
|
|
571
|
-
border: 1px solid color-mix(in srgb, var(--
|
|
1145
|
+
border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
|
|
572
1146
|
color: var(--text);
|
|
573
1147
|
border-radius: 10px;
|
|
574
1148
|
padding: 10px 12px;
|
|
@@ -584,89 +1158,230 @@
|
|
|
584
1158
|
transform: translateY(0);
|
|
585
1159
|
}
|
|
586
1160
|
|
|
1161
|
+
#view-overview .action-bar {
|
|
1162
|
+
margin-bottom: 0;
|
|
1163
|
+
}
|
|
1164
|
+
#view-overview .grid {
|
|
1165
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1166
|
+
}
|
|
1167
|
+
#view-overview .card .field-hint {
|
|
1168
|
+
font-size: 12px;
|
|
1169
|
+
}
|
|
1170
|
+
#view-overview #snapshot {
|
|
1171
|
+
line-height: 1.55;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
587
1174
|
@media (max-width: 980px) {
|
|
588
|
-
|
|
589
|
-
|
|
1175
|
+
html, body {
|
|
1176
|
+
height: auto;
|
|
1177
|
+
overflow: auto;
|
|
1178
|
+
}
|
|
1179
|
+
.app {
|
|
1180
|
+
grid-template-columns: 1fr;
|
|
1181
|
+
height: auto;
|
|
1182
|
+
overflow: visible;
|
|
1183
|
+
}
|
|
1184
|
+
.sidebar {
|
|
1185
|
+
border-right: 0;
|
|
1186
|
+
border-bottom: 1px solid var(--border);
|
|
1187
|
+
height: auto;
|
|
1188
|
+
overflow: visible;
|
|
1189
|
+
}
|
|
1190
|
+
.sidebar-shell {
|
|
1191
|
+
display: block;
|
|
1192
|
+
}
|
|
590
1193
|
.nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
|
591
1194
|
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
592
1195
|
.split, .row, .profile-layout, .page-hero { grid-template-columns: 1fr; }
|
|
1196
|
+
.main {
|
|
1197
|
+
height: auto;
|
|
1198
|
+
overflow: visible;
|
|
1199
|
+
padding-bottom: 18px;
|
|
1200
|
+
}
|
|
1201
|
+
.main-scroll {
|
|
1202
|
+
overflow: visible;
|
|
1203
|
+
padding-right: 0;
|
|
1204
|
+
}
|
|
593
1205
|
}
|
|
594
1206
|
</style>
|
|
595
1207
|
</head>
|
|
596
1208
|
<body>
|
|
597
1209
|
<div class="app" id="appShell">
|
|
598
1210
|
<aside class="sidebar">
|
|
599
|
-
<
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
1211
|
+
<div class="sidebar-shell">
|
|
1212
|
+
<div class="sidebar-shell__header">
|
|
1213
|
+
<div class="brand">
|
|
1214
|
+
<img id="brandLogo" class="brand-logo" src="/assets/silicaclaw-logo.png" alt="SilicaClaw logo" />
|
|
1215
|
+
<div id="brandFallback" class="brand-badge hidden">SC</div>
|
|
1216
|
+
<div>
|
|
1217
|
+
<h1>SilicaClaw</h1>
|
|
1218
|
+
<p>Control UI</p>
|
|
1219
|
+
</div>
|
|
1220
|
+
</div>
|
|
1221
|
+
<button class="nav-collapse-toggle" id="sidebarToggleBtn" type="button" title="Collapse sidebar" aria-label="Collapse sidebar">
|
|
1222
|
+
<span class="nav-collapse-toggle__icon" aria-hidden="true">
|
|
1223
|
+
<svg viewBox="0 0 24 24">
|
|
1224
|
+
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
1225
|
+
<path d="M9 3v18"></path>
|
|
1226
|
+
<path d="M16 10l-3 2 3 2"></path>
|
|
1227
|
+
</svg>
|
|
1228
|
+
</span>
|
|
1229
|
+
</button>
|
|
1230
|
+
</div>
|
|
1231
|
+
<div class="sidebar-shell__body">
|
|
1232
|
+
<div class="sidebar-nav__label">Control</div>
|
|
1233
|
+
<nav class="nav">
|
|
1234
|
+
<button class="tab active" data-tab="overview">
|
|
1235
|
+
<span class="tab-icon" aria-hidden="true">
|
|
1236
|
+
<svg viewBox="0 0 24 24">
|
|
1237
|
+
<line x1="12" x2="12" y1="20" y2="10"></line>
|
|
1238
|
+
<line x1="18" x2="18" y1="20" y2="4"></line>
|
|
1239
|
+
<line x1="6" x2="6" y1="20" y2="16"></line>
|
|
1240
|
+
</svg>
|
|
1241
|
+
</span>
|
|
1242
|
+
<span class="tab-labels"><span class="tab-title">Overview</span><span class="tab-copy">Agent summary and discovered peers</span></span>
|
|
1243
|
+
</button>
|
|
1244
|
+
<button class="tab" data-tab="profile">
|
|
1245
|
+
<span class="tab-icon" aria-hidden="true">
|
|
1246
|
+
<svg viewBox="0 0 24 24">
|
|
1247
|
+
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
|
|
1248
|
+
<polyline points="14 2 14 8 20 8"></polyline>
|
|
1249
|
+
<line x1="16" x2="8" y1="13" y2="13"></line>
|
|
1250
|
+
<line x1="16" x2="8" y1="17" y2="17"></line>
|
|
1251
|
+
<line x1="10" x2="8" y1="9" y2="9"></line>
|
|
1252
|
+
</svg>
|
|
1253
|
+
</span>
|
|
1254
|
+
<span class="tab-labels"><span class="tab-title">Profile</span><span class="tab-copy">Public identity and saved profile</span></span>
|
|
1255
|
+
</button>
|
|
1256
|
+
<button class="tab" data-tab="network">
|
|
1257
|
+
<span class="tab-icon" aria-hidden="true">
|
|
1258
|
+
<svg viewBox="0 0 24 24">
|
|
1259
|
+
<circle cx="12" cy="12" r="2"></circle>
|
|
1260
|
+
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
|
|
1261
|
+
</svg>
|
|
1262
|
+
</span>
|
|
1263
|
+
<span class="tab-labels"><span class="tab-title">Network</span><span class="tab-copy">Relay health, broadcast, diagnostics</span></span>
|
|
1264
|
+
</button>
|
|
1265
|
+
<button class="tab" data-tab="social">
|
|
1266
|
+
<span class="tab-icon" aria-hidden="true">
|
|
1267
|
+
<svg viewBox="0 0 24 24">
|
|
1268
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
1269
|
+
</svg>
|
|
1270
|
+
</span>
|
|
1271
|
+
<span class="tab-labels"><span class="tab-title">Social</span><span class="tab-copy">social.md config and runtime state</span></span>
|
|
1272
|
+
</button>
|
|
1273
|
+
</nav>
|
|
1274
|
+
</div>
|
|
1275
|
+
<div class="sidebar-shell__footer">
|
|
1276
|
+
<div class="sidebar-foot sidebar-utility" id="sideMeta">
|
|
1277
|
+
<div class="sidebar-utility-row"><span class="sidebar-utility__label">Adapter</span><span class="sidebar-utility__value">-</span></div>
|
|
1278
|
+
<div class="sidebar-utility-row"><span class="sidebar-utility__label">Namespace</span><span class="sidebar-utility__value">-</span></div>
|
|
1279
|
+
<div class="sidebar-utility-row"><span class="sidebar-utility__label">Port</span><span class="sidebar-utility__value">-</span></div>
|
|
1280
|
+
</div>
|
|
1281
|
+
<div class="sidebar-version" title="Current version">
|
|
1282
|
+
<span class="sidebar-version__label"><span class="version-dot"></span>Version</span>
|
|
1283
|
+
<span class="sidebar-version__text" id="brandVersion">-</span>
|
|
1284
|
+
<span class="sidebar-version__status" id="brandStatusDot" aria-hidden="true"></span>
|
|
1285
|
+
</div>
|
|
606
1286
|
</div>
|
|
607
1287
|
</div>
|
|
608
|
-
|
|
609
|
-
<nav class="nav">
|
|
610
|
-
<button class="tab active" data-tab="overview"><span class="tab-title">Overview</span><span class="tab-copy">Agent summary and discovered peers</span></button>
|
|
611
|
-
<button class="tab" data-tab="profile"><span class="tab-title">Profile</span><span class="tab-copy">Public identity and saved profile</span></button>
|
|
612
|
-
<button class="tab" data-tab="network"><span class="tab-title">Network</span><span class="tab-copy">Relay health, broadcast, diagnostics</span></button>
|
|
613
|
-
<button class="tab" data-tab="social"><span class="tab-title">Social</span><span class="tab-copy">social.md config and runtime state</span></button>
|
|
614
|
-
</nav>
|
|
615
|
-
|
|
616
|
-
<div class="sidebar-foot" id="sideMeta">adapter: -<br/>namespace: -</div>
|
|
617
1288
|
</aside>
|
|
618
1289
|
|
|
619
1290
|
<main class="main">
|
|
620
1291
|
<div class="topbar">
|
|
621
|
-
<div>
|
|
1292
|
+
<div class="topnav-shell__content">
|
|
1293
|
+
<div class="dashboard-header__breadcrumb">
|
|
1294
|
+
<span class="dashboard-header__breadcrumb-link">SilicaClaw</span>
|
|
1295
|
+
<span class="dashboard-header__breadcrumb-sep">/</span>
|
|
1296
|
+
<span class="dashboard-header__breadcrumb-current" id="pageBreadcrumb">Overview</span>
|
|
1297
|
+
</div>
|
|
622
1298
|
<h2>Local Console</h2>
|
|
623
1299
|
<p>OpenClaw-inspired local-first agent control surface</p>
|
|
624
1300
|
</div>
|
|
625
1301
|
<div class="status-row">
|
|
626
1302
|
<div class="pill" id="pillAdapter">adapter: -</div>
|
|
627
1303
|
<div class="pill" id="pillBroadcast">broadcast: -</div>
|
|
628
|
-
<div class="
|
|
629
|
-
<button id="
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
1304
|
+
<div class="topbar-actions">
|
|
1305
|
+
<button class="icon-btn" id="focusModeBtn" type="button" title="Toggle focus mode" aria-label="Toggle focus mode">
|
|
1306
|
+
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
1307
|
+
<path d="M4 7V4h3"></path>
|
|
1308
|
+
<path d="M20 7V4h-3"></path>
|
|
1309
|
+
<path d="M4 17v3h3"></path>
|
|
1310
|
+
<path d="M20 17v3h-3"></path>
|
|
1311
|
+
<circle cx="12" cy="12" r="3"></circle>
|
|
1312
|
+
</svg>
|
|
1313
|
+
</button>
|
|
1314
|
+
<div class="topbar-theme-mode" id="themeModeGroup" role="group" aria-label="Color mode">
|
|
1315
|
+
<button class="topbar-theme-mode__btn" data-theme-choice="dark" type="button" title="Dark" aria-label="Color mode: Dark">
|
|
1316
|
+
<span class="theme-icon" aria-hidden="true">
|
|
1317
|
+
<svg viewBox="0 0 24 24">
|
|
1318
|
+
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"></path>
|
|
1319
|
+
</svg>
|
|
1320
|
+
</span>
|
|
1321
|
+
</button>
|
|
1322
|
+
<button class="topbar-theme-mode__btn" data-theme-choice="light" type="button" title="Light" aria-label="Color mode: Light">
|
|
1323
|
+
<span class="theme-icon" aria-hidden="true">
|
|
1324
|
+
<svg viewBox="0 0 24 24">
|
|
1325
|
+
<circle cx="12" cy="12" r="4"></circle>
|
|
1326
|
+
<path d="M12 2v2"></path>
|
|
1327
|
+
<path d="M12 20v2"></path>
|
|
1328
|
+
<path d="M4.93 4.93l1.41 1.41"></path>
|
|
1329
|
+
<path d="M17.66 17.66l1.41 1.41"></path>
|
|
1330
|
+
<path d="M2 12h2"></path>
|
|
1331
|
+
<path d="M20 12h2"></path>
|
|
1332
|
+
<path d="M4.93 19.07l1.41-1.41"></path>
|
|
1333
|
+
<path d="M17.66 6.34l1.41-1.41"></path>
|
|
1334
|
+
</svg>
|
|
1335
|
+
</span>
|
|
1336
|
+
</button>
|
|
1337
|
+
<button class="topbar-theme-mode__btn" data-theme-choice="system" type="button" title="System" aria-label="Color mode: System">
|
|
1338
|
+
<span class="theme-icon" aria-hidden="true">
|
|
1339
|
+
<svg viewBox="0 0 24 24">
|
|
1340
|
+
<rect x="3" y="4" width="18" height="12" rx="2"></rect>
|
|
1341
|
+
<path d="M8 20h8"></path>
|
|
1342
|
+
<path d="M12 16v4"></path>
|
|
1343
|
+
</svg>
|
|
1344
|
+
</span>
|
|
1345
|
+
</button>
|
|
1346
|
+
</div>
|
|
635
1347
|
</div>
|
|
636
1348
|
</div>
|
|
637
1349
|
</div>
|
|
638
|
-
<div class="
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
<section class="page-hero">
|
|
642
|
-
<div class="hero-copy">
|
|
643
|
-
<h3 id="pageHeroTitle">Overview</h3>
|
|
644
|
-
<p id="pageHeroBody">See the live state of this node, whether discovery is working, and whether other public agents are visible.</p>
|
|
1350
|
+
<div class="main-scroll">
|
|
1351
|
+
<div class="integration-strip warn" id="integrationStatusBar">
|
|
1352
|
+
Connected to SilicaClaw: - · Network mode: - · Public discovery: -
|
|
645
1353
|
</div>
|
|
646
|
-
<
|
|
647
|
-
<div class="hero-
|
|
648
|
-
<
|
|
649
|
-
<
|
|
650
|
-
<div class="hero-meta-item"><div class="label">Relay</div><div class="mono" id="heroRelay">-</div></div>
|
|
651
|
-
<div class="hero-meta-item"><div class="label">Room</div><div class="mono" id="heroRoom">-</div></div>
|
|
1354
|
+
<section class="page-hero">
|
|
1355
|
+
<div class="hero-copy">
|
|
1356
|
+
<h3 id="pageHeroTitle">Overview</h3>
|
|
1357
|
+
<p id="pageHeroBody">See the live state of this node, whether discovery is working, and whether other public agents are visible.</p>
|
|
652
1358
|
</div>
|
|
653
|
-
|
|
654
|
-
|
|
1359
|
+
<div class="hero-meta">
|
|
1360
|
+
<div class="hero-meta-grid">
|
|
1361
|
+
<div class="hero-meta-item"><div class="label">Mode</div><div class="mono" id="heroMode">-</div></div>
|
|
1362
|
+
<div class="hero-meta-item"><div class="label">Adapter</div><div class="mono" id="heroAdapter">-</div></div>
|
|
1363
|
+
<div class="hero-meta-item"><div class="label">Relay</div><div class="mono" id="heroRelay">-</div></div>
|
|
1364
|
+
<div class="hero-meta-item"><div class="label">Room</div><div class="mono" id="heroRoom">-</div></div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
</section>
|
|
655
1368
|
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
1369
|
+
<div class="notice" id="initNotice"></div>
|
|
1370
|
+
<div class="actions" id="onboardingActions" style="display:none; margin:8px 0 12px;">
|
|
1371
|
+
<button id="enablePublicDiscoveryBtn">Enable Public Discovery</button>
|
|
1372
|
+
<button class="secondary" id="disablePublicDiscoveryBtn">Disable Public Discovery</button>
|
|
1373
|
+
</div>
|
|
1374
|
+
<div class="field-hint" id="publicDiscoveryHint" style="margin-bottom:12px; display:none;">
|
|
1375
|
+
Public discovery only shares signed profile/presence records. It does not share private files and does not enable chat or remote control.
|
|
1376
|
+
</div>
|
|
664
1377
|
|
|
665
|
-
|
|
666
|
-
<div class="
|
|
667
|
-
<
|
|
668
|
-
|
|
669
|
-
|
|
1378
|
+
<section id="view-overview" class="view active">
|
|
1379
|
+
<div class="section-surface compact">
|
|
1380
|
+
<div class="action-bar">
|
|
1381
|
+
<button id="overviewBroadcastNowBtn" type="button">Broadcast Now</button>
|
|
1382
|
+
<button class="secondary" id="overviewGoProfileBtn" type="button">Edit Profile</button>
|
|
1383
|
+
<button class="secondary" id="overviewGoNetworkBtn" type="button">Open Network Diagnostics</button>
|
|
1384
|
+
</div>
|
|
670
1385
|
</div>
|
|
671
1386
|
<div class="grid" id="overviewCards"></div>
|
|
672
1387
|
<div class="split">
|
|
@@ -684,9 +1399,16 @@
|
|
|
684
1399
|
<div class="mono" id="snapshot"></div>
|
|
685
1400
|
</div>
|
|
686
1401
|
</div>
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
1402
|
+
</section>
|
|
1403
|
+
|
|
1404
|
+
<section id="view-profile" class="view">
|
|
1405
|
+
<div class="section-header">
|
|
1406
|
+
<div class="section-header__copy">
|
|
1407
|
+
<div class="section-header__eyebrow">Profile</div>
|
|
1408
|
+
<h3 class="section-header__title">Signed public identity</h3>
|
|
1409
|
+
<p class="section-header__body">Edit the public card other nodes discover, then verify that the saved runtime profile and preview stay aligned after restart.</p>
|
|
1410
|
+
</div>
|
|
1411
|
+
</div>
|
|
690
1412
|
<div class="profile-layout">
|
|
691
1413
|
<div class="card stack">
|
|
692
1414
|
<h3 class="title-sm">Public Profile Editor</h3>
|
|
@@ -748,9 +1470,16 @@
|
|
|
748
1470
|
</div>
|
|
749
1471
|
</div>
|
|
750
1472
|
</div>
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
1473
|
+
</section>
|
|
1474
|
+
|
|
1475
|
+
<section id="view-network" class="view">
|
|
1476
|
+
<div class="section-header">
|
|
1477
|
+
<div class="section-header__copy">
|
|
1478
|
+
<div class="section-header__eyebrow">Network</div>
|
|
1479
|
+
<h3 class="section-header__title">Relay and discovery summary</h3>
|
|
1480
|
+
<p class="section-header__body">Use the summary first. Open diagnostics only when relay joins, polls, or peer visibility look unhealthy.</p>
|
|
1481
|
+
</div>
|
|
1482
|
+
</div>
|
|
754
1483
|
<div class="grid" id="networkCards"></div>
|
|
755
1484
|
<div class="split">
|
|
756
1485
|
<div class="card">
|
|
@@ -768,10 +1497,10 @@
|
|
|
768
1497
|
<details class="advanced-panel">
|
|
769
1498
|
<summary class="title-sm">Advanced Actions</summary>
|
|
770
1499
|
<div class="actions" style="margin-top:10px;">
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
1500
|
+
<button class="secondary" id="refreshCacheBtn">Refresh Cache</button>
|
|
1501
|
+
<button class="secondary" id="clearCacheBtn">Clear Discovered Cache</button>
|
|
1502
|
+
<button class="secondary" id="quickGlobalPreviewBtn">Enable Cross-network Preview</button>
|
|
1503
|
+
</div>
|
|
775
1504
|
</details>
|
|
776
1505
|
<div id="networkFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
|
|
777
1506
|
</div>
|
|
@@ -831,9 +1560,16 @@
|
|
|
831
1560
|
</div>
|
|
832
1561
|
</div>
|
|
833
1562
|
</details>
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
1563
|
+
</section>
|
|
1564
|
+
|
|
1565
|
+
<section id="view-social" class="view">
|
|
1566
|
+
<div class="section-header">
|
|
1567
|
+
<div class="section-header__copy">
|
|
1568
|
+
<div class="section-header__eyebrow">Social</div>
|
|
1569
|
+
<h3 class="section-header__title">Public identity and runtime state</h3>
|
|
1570
|
+
<p class="section-header__body">Keep the signed identity, public visibility, and social.md runtime view aligned so discovery survives restart and update.</p>
|
|
1571
|
+
</div>
|
|
1572
|
+
</div>
|
|
837
1573
|
<div class="card">
|
|
838
1574
|
<h3 class="title-sm">Integration Status</h3>
|
|
839
1575
|
<div class="feedback" id="socialStatusLine">Checking integration status...</div>
|
|
@@ -898,7 +1634,8 @@
|
|
|
898
1634
|
</div>
|
|
899
1635
|
<div id="socialFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
|
|
900
1636
|
</div>
|
|
901
|
-
|
|
1637
|
+
</section>
|
|
1638
|
+
</div>
|
|
902
1639
|
</main>
|
|
903
1640
|
</div>
|
|
904
1641
|
|
|
@@ -956,6 +1693,12 @@
|
|
|
956
1693
|
t.classList.add('show');
|
|
957
1694
|
setTimeout(() => t.classList.remove('show'), 2000);
|
|
958
1695
|
}
|
|
1696
|
+
function resolveThemeMode(mode) {
|
|
1697
|
+
if (mode === 'system') {
|
|
1698
|
+
return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
|
1699
|
+
}
|
|
1700
|
+
return mode === 'light' ? 'light' : 'dark';
|
|
1701
|
+
}
|
|
959
1702
|
function flashButton(btn, doneText = 'Done') {
|
|
960
1703
|
if (!btn) return;
|
|
961
1704
|
const oldText = btn.textContent || '';
|
|
@@ -972,11 +1715,16 @@
|
|
|
972
1715
|
el.style.color = level === 'error' ? '#ff6b81' : level === 'warn' ? '#ffb454' : '#9aa7c3';
|
|
973
1716
|
}
|
|
974
1717
|
function applyTheme(mode) {
|
|
975
|
-
const
|
|
1718
|
+
const raw = mode === 'system' ? 'system' : (mode === 'light' ? 'light' : 'dark');
|
|
1719
|
+
const next = resolveThemeMode(raw);
|
|
976
1720
|
document.documentElement.setAttribute('data-theme-mode', next);
|
|
977
|
-
localStorage.setItem('silicaclaw_theme_mode',
|
|
978
|
-
document.
|
|
979
|
-
|
|
1721
|
+
localStorage.setItem('silicaclaw_theme_mode', raw);
|
|
1722
|
+
document.querySelectorAll('[data-theme-choice]').forEach((btn) => {
|
|
1723
|
+
btn.classList.toggle('active', btn.dataset.themeChoice === raw);
|
|
1724
|
+
btn.classList.toggle('topbar-theme-mode__btn--active', btn.dataset.themeChoice === raw);
|
|
1725
|
+
btn.setAttribute('aria-checked', btn.dataset.themeChoice === raw ? 'true' : 'false');
|
|
1726
|
+
btn.setAttribute('aria-pressed', btn.dataset.themeChoice === raw ? 'true' : 'false');
|
|
1727
|
+
});
|
|
980
1728
|
}
|
|
981
1729
|
function parseTags(raw) {
|
|
982
1730
|
return String(raw || '')
|
|
@@ -1112,6 +1860,7 @@
|
|
|
1112
1860
|
document.getElementById(`view-${k}`).classList.toggle('active', k === tab);
|
|
1113
1861
|
});
|
|
1114
1862
|
const meta = pageMeta[tab] || pageMeta.overview;
|
|
1863
|
+
document.getElementById('pageBreadcrumb').textContent = meta.title;
|
|
1115
1864
|
document.getElementById('pageHeroTitle').textContent = meta.title;
|
|
1116
1865
|
document.getElementById('pageHeroBody').textContent = meta.body;
|
|
1117
1866
|
if (tab === 'profile' && !profileDirty && !profileSaving) {
|
|
@@ -1132,7 +1881,10 @@
|
|
|
1132
1881
|
['Presence TTL', `${Math.floor(o.presence_ttl_ms / 1000)}s`],
|
|
1133
1882
|
].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value">${v}</div></div>`).join('');
|
|
1134
1883
|
|
|
1884
|
+
document.getElementById('brandVersion').textContent = o.app_version ? `v${o.app_version}` : '-';
|
|
1885
|
+
|
|
1135
1886
|
document.getElementById('snapshot').textContent = [
|
|
1887
|
+
`app_version: ${o.app_version || '-'}`,
|
|
1136
1888
|
`agent_id: ${o.agent_id || '-'}`,
|
|
1137
1889
|
`public_enabled: ${o.public_enabled}`,
|
|
1138
1890
|
`broadcast_enabled: ${o.broadcast_enabled}`,
|
|
@@ -1243,7 +1995,11 @@
|
|
|
1243
1995
|
document.getElementById('heroRoom').textContent = dx.room || '-';
|
|
1244
1996
|
|
|
1245
1997
|
document.getElementById('pillAdapter').textContent = `adapter: ${c.adapter}`;
|
|
1246
|
-
document.getElementById('sideMeta').innerHTML =
|
|
1998
|
+
document.getElementById('sideMeta').innerHTML = [
|
|
1999
|
+
['Adapter', c.adapter || '-'],
|
|
2000
|
+
['Namespace', c.namespace || '-'],
|
|
2001
|
+
['Port', c.port ?? '-'],
|
|
2002
|
+
].map(([k, v]) => `<div class="sidebar-utility-row"><span class="sidebar-utility__label">${k}</span><span class="sidebar-utility__value">${v}</span></div>`).join('');
|
|
1247
2003
|
|
|
1248
2004
|
document.getElementById('networkCards').innerHTML = [
|
|
1249
2005
|
['Adapter', c.adapter],
|
|
@@ -1443,6 +2199,7 @@
|
|
|
1443
2199
|
const bar = document.getElementById('integrationStatusBar');
|
|
1444
2200
|
bar.className = `integration-strip ${status.connected_to_silicaclaw && status.public_enabled ? 'ok' : 'warn'}`;
|
|
1445
2201
|
bar.textContent = `Connected to SilicaClaw: ${status.connected_to_silicaclaw ? 'yes' : 'no'} · Network mode: ${mode} · Public discovery: ${status.public_enabled ? 'enabled' : 'disabled'}`;
|
|
2202
|
+
document.getElementById('brandStatusDot').classList.toggle('online', !!status.connected_to_silicaclaw);
|
|
1446
2203
|
const reasons = [];
|
|
1447
2204
|
if (!status.configured && status.configured_reason) reasons.push(`Configured: ${status.configured_reason}`);
|
|
1448
2205
|
if (!status.running && status.running_reason) reasons.push(`Running: ${status.running_reason}`);
|
|
@@ -1551,23 +2308,46 @@
|
|
|
1551
2308
|
document.querySelectorAll('.tab').forEach((btn) => {
|
|
1552
2309
|
btn.addEventListener('click', () => switchTab(btn.dataset.tab));
|
|
1553
2310
|
});
|
|
1554
|
-
document.getElementById('
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
2311
|
+
document.getElementById('sidebarToggleBtn').addEventListener('click', () => {
|
|
2312
|
+
const shell = document.getElementById('appShell');
|
|
2313
|
+
const next = !shell.classList.contains('nav-collapsed');
|
|
2314
|
+
shell.classList.toggle('nav-collapsed', next);
|
|
2315
|
+
const btn = document.getElementById('sidebarToggleBtn');
|
|
2316
|
+
const icon = btn.querySelector('.nav-collapse-toggle__icon');
|
|
2317
|
+
btn.classList.toggle('active', next);
|
|
2318
|
+
btn.title = next ? 'Expand sidebar' : 'Collapse sidebar';
|
|
2319
|
+
btn.setAttribute('aria-label', btn.title);
|
|
2320
|
+
if (icon) {
|
|
2321
|
+
icon.innerHTML = next
|
|
2322
|
+
? `
|
|
2323
|
+
<svg viewBox="0 0 24 24">
|
|
2324
|
+
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
2325
|
+
<path d="M9 3v18"></path>
|
|
2326
|
+
<path d="M14 10l3 2-3 2"></path>
|
|
2327
|
+
</svg>
|
|
2328
|
+
`
|
|
2329
|
+
: `
|
|
2330
|
+
<svg viewBox="0 0 24 24">
|
|
2331
|
+
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
2332
|
+
<path d="M9 3v18"></path>
|
|
2333
|
+
<path d="M16 10l-3 2 3 2"></path>
|
|
2334
|
+
</svg>
|
|
2335
|
+
`;
|
|
2336
|
+
}
|
|
1559
2337
|
});
|
|
1560
2338
|
document.getElementById('focusModeBtn').addEventListener('click', () => {
|
|
1561
2339
|
const shell = document.getElementById('appShell');
|
|
1562
2340
|
const next = !shell.classList.contains('focus-mode');
|
|
1563
2341
|
shell.classList.toggle('focus-mode', next);
|
|
1564
|
-
document.getElementById('focusModeBtn')
|
|
2342
|
+
const btn = document.getElementById('focusModeBtn');
|
|
2343
|
+
btn.classList.toggle('active', next);
|
|
2344
|
+
btn.title = next ? 'Exit focus mode' : 'Toggle focus mode';
|
|
2345
|
+
btn.setAttribute('aria-label', btn.title);
|
|
1565
2346
|
});
|
|
1566
|
-
document.
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
document.getElementById('sidebarToggleBtn').textContent = next ? 'Expand sidebar' : 'Collapse sidebar';
|
|
2347
|
+
document.querySelectorAll('[data-theme-choice]').forEach((btn) => {
|
|
2348
|
+
btn.addEventListener('click', () => {
|
|
2349
|
+
applyTheme(btn.dataset.themeChoice || 'dark');
|
|
2350
|
+
});
|
|
1571
2351
|
});
|
|
1572
2352
|
document.getElementById('overviewBroadcastNowBtn').addEventListener('click', () => {
|
|
1573
2353
|
document.getElementById('broadcastNowBtn').click();
|
|
@@ -1831,6 +2611,20 @@
|
|
|
1831
2611
|
});
|
|
1832
2612
|
})();
|
|
1833
2613
|
|
|
2614
|
+
if (window.matchMedia) {
|
|
2615
|
+
const media = window.matchMedia('(prefers-color-scheme: light)');
|
|
2616
|
+
const handleThemeMedia = () => {
|
|
2617
|
+
if ((localStorage.getItem('silicaclaw_theme_mode') || 'dark') === 'system') {
|
|
2618
|
+
applyTheme('system');
|
|
2619
|
+
}
|
|
2620
|
+
};
|
|
2621
|
+
if (typeof media.addEventListener === 'function') {
|
|
2622
|
+
media.addEventListener('change', handleThemeMedia);
|
|
2623
|
+
} else if (typeof media.addListener === 'function') {
|
|
2624
|
+
media.addListener(handleThemeMedia);
|
|
2625
|
+
}
|
|
2626
|
+
}
|
|
2627
|
+
|
|
1834
2628
|
applyTheme(localStorage.getItem('silicaclaw_theme_mode') || 'dark');
|
|
1835
2629
|
refreshAll();
|
|
1836
2630
|
exportSocialTemplate().catch(() => {});
|