Improve final onboarding CLI connector hint
Tighten the final onboarding discovery cards so the setup suggestions take less vertical space. Add a compact CLI Connector card with macOS/Linux and Windows install commands plus a small A0 terminal preview asset.
Alessandro committed
May 9, 2026 at 16:47 UTC
ef98275c8c6d836f60851c5423e07895addf4cbd
2 files changed
+201
-29
plugins/_discovery/extensions/webui/onboarding-success-end/discovery-cards.html
+201
-29
@@ -9,7 +9,7 @@
9
x-create="$store.discoveryStore.refreshCards()"
10
x-show="$store.discoveryStore.cards.length > 0 || $store.discoveryStore.hasDismissedCards">
11
12
- <div class="discovery-section" style="margin-top: 2rem;">
12
+ <div class="discovery-section">
13
14
<div class="discovery-features" x-show="$store.discoveryStore.featureCards.length > 0" style="text-align: left;">
15
<template x-for="card in $store.discoveryStore.featureCards" :key="card.id">
@@ -91,6 +91,33 @@
91
</article>
92
</template>
93
94
+ <article class="discovery-cli-card" aria-labelledby="discovery-cli-title">
95
+ <div class="discovery-cli-content">
96
+ <span class="discovery-cli-kicker">CLI Connector</span>
97
+ <h3 class="discovery-cli-title" id="discovery-cli-title">Connect Agent Zero to your desktop</h3>
98
+ <p class="discovery-cli-desc">
99
+ Install the CLI Connector when you want A0 to use your host terminal,
100
+ local files, and a browser from your computer.
101
+ </p>
102
+ <div class="discovery-cli-commands" aria-label="CLI Connector install commands">
103
+ <div class="discovery-cli-command">
104
+ <span class="discovery-cli-label">macOS / Linux</span>
105
+ <code>curl -LsSf https://cli.agent-zero.ai/install.sh | sh</code>
106
+ </div>
107
+ <div class="discovery-cli-command">
108
+ <span class="discovery-cli-label">Windows PowerShell</span>
109
+ <code>irm https://cli.agent-zero.ai/install.ps1 | iex</code>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <figure class="discovery-cli-preview" aria-label="Agent Zero CLI Connector preview">
115
+ <img src="/plugins/_discovery/webui/assets/cli-connector-preview.png"
116
+ alt="Agent Zero CLI Connector terminal preview"
117
+ loading="lazy">
118
+ </figure>
119
+ </article>
120
+
121
<div class="discovery-undismiss" x-show="$store.discoveryStore.hasDismissedCards">
122
<button type="button"
123
class="discovery-undismiss-btn"
@@ -112,16 +139,17 @@
139
.discovery-section {
140
display: flex;
141
flex-direction: column;
115
- gap: 1rem;
142
+ gap: 0.75rem;
143
width: 100%;
117
- margin-top: 0.1rem;
144
+ margin-top: 0.85rem;
145
}
146
147
.discovery-hero,
121
- .discovery-feature-card {
148
+ .discovery-feature-card,
149
+ .discovery-cli-card {
150
position: relative;
151
border: 1px solid var(--color-border);
124
- border-radius: 12px;
152
+ border-radius: 10px;
153
background: var(--color-panel);
154
text-align: left;
155
transition:
@@ -133,8 +161,10 @@
161
162
.discovery-hero:hover,
163
.discovery-feature-card:hover,
164
+ .discovery-cli-card:hover,
165
.discovery-hero:focus-visible,
137
- .discovery-feature-card:focus-visible {
166
+ .discovery-feature-card:focus-visible,
167
+ .discovery-cli-card:focus-visible {
168
border-color: color-mix(in srgb, var(--color-primary) 72%, white 6%);
169
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
170
outline: none;
@@ -144,9 +174,9 @@
174
display: flex;
175
align-items: center;
176
gap: 1rem;
147
- min-height: 152px;
177
+ min-height: 126px;
178
overflow: hidden;
149
- padding: 1.25rem 1.25rem 1.25rem 1.5rem;
179
+ padding: 1rem 1.15rem 1rem 1.25rem;
180
background:
181
linear-gradient(
182
135deg,
@@ -173,18 +203,18 @@
203
}
204
205
.discovery-hero-title {
176
- margin: 0 0 0.4rem;
206
+ margin: 0 0 0.35rem;
207
color: var(--color-text);
178
- font-size: 1.08rem;
208
+ font-size: 1.02rem;
209
font-weight: 600;
180
- letter-spacing: 0.01em;
210
+ letter-spacing: 0;
211
}
212
213
.discovery-hero-desc {
184
- margin: 0 0 1rem;
214
+ margin: 0 0 0.75rem;
215
color: var(--color-text);
216
font-size: 0.86rem;
187
- line-height: 1.5;
217
+ line-height: 1.42;
218
max-width: 38ch;
219
}
220
@@ -203,9 +233,9 @@
233
}
234
235
.discovery-hero-thumb {
206
- flex: 0 0 132px;
207
- width: 132px;
208
- height: 108px;
236
+ flex: 0 0 112px;
237
+ width: 112px;
238
+ height: 86px;
239
display: flex;
240
align-items: center;
241
justify-content: center;
@@ -225,16 +255,16 @@
255
256
.discovery-features {
257
display: grid;
228
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
229
- gap: 1rem;
258
+ grid-template-columns: repeat(3, minmax(0, 1fr));
259
+ gap: 0.75rem;
260
}
261
262
.discovery-feature-card {
263
display: flex;
264
flex-direction: column;
265
align-items: flex-start;
236
- min-height: 188px;
237
- padding: 1rem;
266
+ min-height: 142px;
267
+ padding: 0.82rem 0.9rem;
268
background:
269
linear-gradient(
270
180deg,
@@ -248,19 +278,19 @@
278
display: flex;
279
flex-direction: row;
280
align-items: center;
251
- gap: 0.75rem;
281
+ gap: 0.62rem;
282
width: 100%;
283
min-width: 0;
284
}
285
286
.discovery-feature-thumb {
287
flex: 0 0 auto;
258
- width: 52px;
259
- height: 52px;
288
+ width: 44px;
289
+ height: 44px;
290
display: flex;
291
align-items: center;
292
justify-content: center;
263
- border-radius: 14px;
293
+ border-radius: 12px;
294
overflow: hidden;
295
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
296
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
@@ -282,21 +312,136 @@
312
flex: 1 1 auto;
313
min-width: 0;
314
color: var(--color-text);
285
- font-size: 0.92rem;
315
+ font-size: 0.88rem;
316
font-weight: 600;
317
line-height: 1.25;
318
}
319
320
.discovery-feature-desc {
291
- margin: 0.55rem 0 0;
292
- padding-bottom: var(--spacing-md);
321
+ margin: 0.42rem 0 0;
322
+ padding-bottom: 0.6rem;
323
color: var(--color-text);
294
- font-size: 0.8rem;
295
- line-height: 1.45;
324
+ font-size: 0.77rem;
325
+ line-height: 1.34;
326
}
327
328
.discovery-feature-card > .btn {
329
margin-top: auto;
330
+ min-height: 36px;
331
+ padding: 0.44rem 0.78rem;
332
+ }
333
+
334
+ .discovery-feature-card > .btn .material-symbols-outlined {
335
+ font-size: 1.15rem;
336
+ }
337
+
338
+ .discovery-cli-card {
339
+ display: flex;
340
+ align-items: center;
341
+ gap: 1.1rem;
342
+ min-height: 134px;
343
+ overflow: hidden;
344
+ padding: 1rem 1.15rem 1rem 1.25rem;
345
+ background:
346
+ linear-gradient(
347
+ 135deg,
348
+ color-mix(in srgb, var(--color-primary) 12%, transparent),
349
+ transparent 52%
350
+ ),
351
+ radial-gradient(
352
+ circle at 86% 18%,
353
+ color-mix(in srgb, #00b7ff 14%, transparent),
354
+ transparent 34%
355
+ ),
356
+ var(--color-panel);
357
+ }
358
+
359
+ .discovery-cli-content {
360
+ flex: 1 1 auto;
361
+ min-width: 0;
362
+ }
363
+
364
+ .discovery-cli-kicker {
365
+ display: inline-flex;
366
+ width: max-content;
367
+ margin-bottom: 0.3rem;
368
+ border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
369
+ border-radius: 999px;
370
+ padding: 0.16rem 0.48rem;
371
+ color: color-mix(in srgb, var(--color-primary) 72%, white 20%);
372
+ font-size: 0.68rem;
373
+ font-weight: 700;
374
+ line-height: 1;
375
+ text-transform: uppercase;
376
+ }
377
+
378
+ .discovery-cli-title {
379
+ margin: 0 0 0.28rem;
380
+ color: var(--color-text);
381
+ font-size: 1.02rem;
382
+ font-weight: 700;
383
+ line-height: 1.2;
384
+ }
385
+
386
+ .discovery-cli-desc {
387
+ max-width: 62ch;
388
+ margin: 0 0 0.65rem;
389
+ color: var(--color-secondary);
390
+ font-size: 0.8rem;
391
+ line-height: 1.38;
392
+ }
393
+
394
+ .discovery-cli-commands {
395
+ display: grid;
396
+ grid-template-columns: repeat(2, minmax(0, 1fr));
397
+ gap: 0.55rem;
398
+ max-width: 790px;
399
+ }
400
+
401
+ .discovery-cli-command {
402
+ min-width: 0;
403
+ border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
404
+ border-radius: 8px;
405
+ background: color-mix(in srgb, #05080c 86%, var(--color-panel));
406
+ padding: 0.48rem 0.55rem;
407
+ }
408
+
409
+ .discovery-cli-label {
410
+ display: block;
411
+ margin-bottom: 0.22rem;
412
+ color: var(--color-secondary);
413
+ font-size: 0.68rem;
414
+ font-weight: 700;
415
+ line-height: 1.1;
416
+ }
417
+
418
+ .discovery-cli-command code {
419
+ display: block;
420
+ overflow-x: auto;
421
+ color: #72d8ff;
422
+ font-family: var(--font-family-monospace, ui-monospace, SFMono-Regular, Consolas, monospace);
423
+ font-size: 0.72rem;
424
+ line-height: 1.35;
425
+ white-space: nowrap;
426
+ }
427
+
428
+ .discovery-cli-preview {
429
+ flex: 0 0 218px;
430
+ width: 218px;
431
+ margin: 0;
432
+ border: 1px solid color-mix(in srgb, #00b7ff 24%, var(--color-border));
433
+ border-radius: 8px;
434
+ background: #070b10;
435
+ box-shadow:
436
+ 0 12px 28px rgba(0, 0, 0, 0.2),
437
+ 0 0 28px color-mix(in srgb, var(--color-primary) 12%, transparent);
438
+ overflow: hidden;
439
+ }
440
+
441
+ .discovery-cli-preview img {
442
+ display: block;
443
+ width: 100%;
444
+ height: auto;
445
}
446
447
.discovery-cta-link {
@@ -451,6 +596,25 @@
596
.discovery-cta-link {
597
margin-top: 0;
598
}
599
+
600
+ .discovery-cli-card {
601
+ flex-direction: column;
602
+ align-items: flex-start;
603
+ gap: 0.75rem;
604
+ min-height: 0;
605
+ padding: 0.95rem;
606
+ }
607
+
608
+ .discovery-cli-commands {
609
+ grid-template-columns: 1fr;
610
+ width: 100%;
611
+ max-width: none;
612
+ }
613
+
614
+ .discovery-cli-preview {
615
+ flex: 0 0 auto;
616
+ width: min(100%, 280px);
617
+ }
618
}
619
620
@media (max-width: 520px) {
@@ -478,6 +642,14 @@
642
.discovery-feature-card > .btn {
643
justify-self: end;
644
}
645
+
646
+ .discovery-cli-title {
647
+ font-size: 0.98rem;
648
+ }
649
+
650
+ .discovery-cli-preview {
651
+ width: 100%;
652
+ }
653
}
654
</style>
655
</div>
plugins/_discovery/webui/assets/cli-connector-preview.png
Binary files /dev/null and b/plugins/_discovery/webui/assets/cli-connector-preview.png differ