-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinteraction-patterns-v2-20260217-184659.html
More file actions
1422 lines (1309 loc) · 75.8 KB
/
interaction-patterns-v2-20260217-184659.html
File metadata and controls
1422 lines (1309 loc) · 75.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Legionis: Interaction Patterns v2</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg-dark: #1a1a2e;
--bg-card: #16213e;
--accent: #4ecdc4;
--accent-light: #95e1d3;
--warning: #f39c12;
--error: #e74c3c;
--success: #27ae60;
--text: #eee;
--text-muted: #999;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-dark);
color: var(--text);
line-height: 1.6;
font-size: 16px;
padding-bottom: 2rem;
}
/* Mobile-first sections */
.section {
padding: 2rem 1.5rem;
border-bottom: 1px solid #333;
scroll-margin-top: 60px;
}
/* Tablet and up */
@media (min-width: 768px) {
.section {
padding: 3rem 3rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.section {
padding: 4rem 5rem;
max-width: 1200px;
margin: 0 auto;
}
}
h1 {
font-size: 1.8rem;
color: #fff;
margin-bottom: 1rem;
line-height: 1.2;
}
h2 {
font-size: 1.5rem;
color: var(--accent);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent);
}
h3 {
font-size: 1.2rem;
color: var(--accent-light);
margin: 1.5rem 0 0.75rem;
}
@media (min-width: 768px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }
}
p { margin-bottom: 1rem; }
/* Cards */
.card {
background: var(--bg-card);
border-radius: 12px;
padding: 1.25rem;
margin: 1rem 0;
border-left: 4px solid var(--accent);
}
/* Tables - scroll on mobile */
.table-container {
overflow-x: auto;
margin: 1rem 0;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 300px;
font-size: 0.9rem;
}
th, td {
border: 1px solid #444;
padding: 0.75rem;
text-align: left;
}
th {
background: var(--bg-card);
color: var(--accent);
font-weight: 600;
}
/* Code blocks */
pre {
background: #0d1117;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
font-size: 0.85rem;
margin: 1rem 0;
-webkit-overflow-scrolling: touch;
}
code {
background: #0d1117;
padding: 0.2em 0.4em;
border-radius: 4px;
font-family: 'SF Mono', 'Consolas', monospace;
font-size: 0.9em;
}
pre code {
padding: 0;
background: none;
}
/* Lists */
ul, ol {
margin: 1rem 0 1rem 1.5rem;
}
li {
margin-bottom: 0.5rem;
}
/* Progress bar - top */
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--accent);
z-index: 200;
transition: width 0.2s ease-out;
}
/* Floating nav pill - bottom right */
.nav-pill {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
align-items: center;
gap: 0;
background: var(--bg-card);
border: 1px solid #333;
border-radius: 999px;
z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
overflow: hidden;
}
.nav-pill button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 1.1rem;
font-weight: 700;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s;
}
.nav-pill button:hover {
background: rgba(78, 205, 196, 0.12);
}
.nav-pill button:active {
background: rgba(78, 205, 196, 0.25);
}
.nav-pill .nav-counter {
padding: 0 4px;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
min-width: 44px;
text-align: center;
user-select: none;
}
/* SVG diagrams - responsive */
svg {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
border-radius: 12px;
}
/* Strong/emphasis */
strong { color: var(--warning); }
em { color: #9b59b6; }
/* Status colors */
.status-ok { color: var(--success); }
.status-warn { color: var(--warning); }
.status-error { color: var(--error); }
</style>
</head>
<body>
<section class="section" id="section-1">
<h1>Legionis: Interaction Patterns v2</h1></p><p><strong>Document Version</strong>: 2.0
<strong>Date</strong>: 2026-02-17
<strong>Owner</strong>: Interaction Designer (Design Team)
<strong>Status</strong>: Draft
<strong>Product</strong>: Legionis (legionis.ai)
<strong>Supersedes</strong>: UX Concepts v1.0 (interaction sections), UX Guidelines v1.0 (flow sections)
<strong>Related</strong>: Onboarding User Journey v1.0, Brand Guide v2.0, Positioning Statement v2.1, Demo Design System</p><p><hr style="border-color: #333; margin: 2rem 0;">
</section>
<section class="section" id="section-2">
<h2>Design Context</h2></p><p>This document redesigns Legionis interaction patterns to support the expansion from 13 agents to 81 agents across 9 teams, from 61 skills to 80+ skills, and the repositioning from "Product Org OS" to "AI workforce platform."</p><p>The core interaction model (<code>/</code> for skills, <code>@</code> for agents, <code>Cmd+K</code> for palette) remains sound. The patterns need to <strong>scale</strong> and the copy needs to align with the <strong>new positioning</strong>.</p><p><h3>Key Constraints</h3></p><p><li><strong>81 agents across 9 teams + 11 gateways</strong> -- flat lists are unusable at this scale</li>
<li><strong>80+ skills across functional domains</strong> -- V2V phase grouping only works for Product Org skills</li>
<li><strong>Non-product users</strong> -- a marketing director, finance lead, or ops manager must feel at home</li>
<li><strong>"AI workforce platform"</strong> -- not "product org tool." Copy must be domain-neutral</li>
<li><strong>Existing code</strong> -- <code>skill-palette.tsx</code>, <code>agent-selector.tsx</code>, <code>chat-input.tsx</code>, and <code>chat-container.tsx</code> are already built and shipping</li></p><p><hr style="border-color: #333; margin: 2rem 0;">
</section>
<section class="section" id="section-3">
<h2>1. Skill Palette v2 (Cmd+K)</h2>
</section>
<section class="section" id="section-4">
<h3>Problem</h3></p><p>The v1 skill palette groups skills by V2V phase (Strategic Foundation, Strategic Decisions, etc.). This works for Product Org skills but fails for extension team skills. A marketing copywriter searching for "landing page copy" should not need to understand V2V phases. The palette also lacks favorites, personalization, and a way to filter by team.
</section>
<section class="section" id="section-5">
<h3>New Grouping Strategy</h3></p><p>Replace V2V phase grouping with <strong>functional domain grouping</strong>. The V2V phase is still available as metadata but is no longer the primary organizer.</p><p><div class="table-container"><table>
<thead><tr><th>Category</th><th>Skills Included</th><th>Example Skills</th></tr></thead>
<tbody>
<tr><td><strong>Product</strong></td><td>All Product Org skills (phases 1-6 + cross-phase)</td><td><code>/prd</code>, <code>/decision-record</code>, <code>/strategic-bet</code>, <code>/roadmap-theme</code></td></tr>
<tr><td><strong>Marketing & GTM</strong></td><td>GTM, positioning, campaign, sales enablement</td><td><code>/gtm-strategy</code>, <code>/campaign-brief</code>, <code>/positioning-statement</code>, <code>/sales-enablement</code></td></tr>
<tr><td><strong>Finance & Business</strong></td><td>Business case, pricing, financial modeling</td><td><code>/business-case</code>, <code>/pricing-strategy</code>, <code>/pricing-model</code></td></tr>
<tr><td><strong>Strategy & Executive</strong></td><td>Vision, strategic bets, portfolio, QBR</td><td><code>/vision-statement</code>, <code>/strategic-intent</code>, <code>/qbr-deck</code>, <code>/portfolio-tradeoff</code></td></tr>
<tr><td><strong>Operations & Delivery</strong></td><td>Launch, readiness, commitment, process</td><td><code>/launch-plan</code>, <code>/launch-readiness</code>, <code>/commitment-check</code></td></tr>
<tr><td><strong>Learning & Context</strong></td><td>Context recall, feedback, outcome review, retrospective</td><td><code>/context-recall</code>, <code>/feedback-recall</code>, <code>/outcome-review</code>, <code>/retrospective</code></td></tr>
<tr><td><strong>Validators</strong></td><td>Phase check, ownership map, scale check</td><td><code>/phase-check</code>, <code>/ownership-map</code>, <code>/collaboration-check</code></td></tr>
</tbody></table></div></p><p>Note: Some skills appear in multiple categories when relevant (e.g., <code>/positioning-statement</code> appears in both Product and Marketing). The palette deduplicates in search results.
</section>
<section class="section" id="section-6">
<h3>Favorites and Pinned Skills</h3></p><p>Users can pin up to 8 skills. Pinned skills appear at the very top under a "Pinned" section, above "Recently Used." Pin/unpin via a star icon on hover of any skill row.</p><p>Pinned skills persist in the <code>users.preferences</code> JSON column (or localStorage as fallback).
</section>
<section class="section" id="section-7">
<h3>"Suggested for You"</h3></p><p>Below "Pinned" and above the category groups, a "Suggested" section shows 3-4 skills based on:
<li>The user's selected role (from onboarding)</li>
<li>The user's active team(s)</li>
<li>Frequency of use (show skills they have not tried yet from their domain)</li></p><p>This section is suppressed after 20+ sessions (the user is past the discovery phase).
</section>
<section class="section" id="section-8">
<h3>Search Behavior</h3></p><p><ul><li>Fuzzy search across skill ID, description, and category name</li>
<li>Results flatten into a single list when the user types a query (no category headers during active search)</li>
<li>Each result row shows: <code>/ skill-id</code> + description (truncated) + category badge</li>
<li>Team filter: optional chip filters at the top of the palette (e.g., "Product" | "Marketing" | "All")</li>
<li>The filter chips only appear when the user has multiple teams active</li></ul>
</section>
<section class="section" id="section-9">
<h3>Keyboard Navigation</h3></p><p><div class="table-container"><table>
<thead><tr><th>Key</th><th>Action</th></tr></thead>
<tbody>
<tr><td><code>Cmd+K</code></td><td>Open palette (global)</td></tr>
<tr><td>Type</td><td>Fuzzy search</td></tr>
<tr><td><code>Arrow Up/Down</code></td><td>Navigate results</td></tr>
<tr><td><code>Enter</code></td><td>Select and insert <code>/skill-name </code> into chat input</td></tr>
<tr><td><code>Tab</code></td><td>Autocomplete current selection (same as Enter)</td></tr>
<tr><td><code>Esc</code></td><td>Close palette</td></tr>
<tr><td><code>Cmd+Shift+S</code></td><td>Toggle star/pin on highlighted skill</td></tr>
</tbody></table></div>
</section>
<section class="section" id="section-10">
<h3>Progressive Disclosure</h3></p><p><ul><li><strong>Default view (no search query)</strong>: Shows Pinned (if any), Suggested (if < 20 sessions), Recently Used (last 5), then the first 3 categories collapsed to 3 skills each with a "[Show all N]" expand link</li>
<li><strong>Expanded category</strong>: Click a category header to expand it, showing all skills in that category</li>
<li><strong>Active search</strong>: Flat list of all matching results, no category grouping</li></ul>
</section>
<section class="section" id="section-11">
<h3>ASCII Wireframe</h3></p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>/ Search skills... x</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>PINNED [Edit]</td></tr>
<tr><td>/prd Create Product Requirements Doc</td></tr>
<tr><td>/decision-record Document a key decision</td></tr>
<tr><td>/gtm-strategy Plan your go-to-market approach</td></tr>
<tr><td></td></tr>
<tr><td>SUGGESTED FOR YOU</td></tr>
<tr><td>/campaign-brief Plan a marketing campaign [Mktg]</td></tr>
<tr><td>/sales-enablement Create sales materials [Mktg]</td></tr>
<tr><td>/competitive-landscape Map competitors [Prod]</td></tr>
<tr><td></td></tr>
<tr><td>RECENTLY USED</td></tr>
<tr><td>/prd Create Product Requirements Doc</td></tr>
<tr><td>/business-case Build a business case</td></tr>
<tr><td></td></tr>
<tr><td>PRODUCT [12/32]</td></tr>
<tr><td>> /strategic-intent Define strategic direction</td></tr>
<tr><td>> /market-analysis Analyze your market</td></tr>
<tr><td>> /prd Create Product Requirements Doc</td></tr>
<tr><td>[Show all 32 Product skills]</td></tr>
<tr><td></td></tr>
<tr><td>MARKETING & GTM [4/12]</td></tr>
<tr><td>> /gtm-strategy Plan go-to-market</td></tr>
<tr><td>> /positioning-statement Define positioning</td></tr>
<tr><td>> /campaign-brief Plan a campaign</td></tr>
<tr><td>[Show all 12 Marketing & GTM skills]</td></tr>
<tr><td></td></tr>
<tr><td>FINANCE & BUSINESS [3/8]</td></tr>
<tr><td>> /business-case Build a business case</td></tr>
<tr><td>> /pricing-strategy Define pricing approach</td></tr>
<tr><td>> /pricing-model Design pricing model</td></tr>
<tr><td>[Show all 8 Finance & Business skills]</td></tr>
<tr><td></td></tr>
<tr><td>STRATEGY & EXECUTIVE</td><td>OPERATIONS</td><td>LEARNING</td><td>MORE</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>/ to invoke</th><th>Arrow keys to navigate</th><th>Esc to close</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre>
</section>
<section class="section" id="section-12">
<h3>Migration Notes</h3></p><p><strong>Existing code</strong> (<code>skill-palette.tsx</code>):
<ul><li><code>CATEGORY_LABELS</code> map needs replacement with new functional domain categories</li>
<li>The <code>grouped</code> Map logic can stay, but <code>skill.category</code> values from <code>/api/skills</code> need updating</li>
<li>Add a new <code>pinned</code> state (backed by user preferences API or localStorage)</li>
<li>Add <code>suggested</code> computation (new logic: role + team + frequency)</li>
<li>Minor: increase <code>max-h-64</code> to <code>max-h-[480px]</code> to accommodate the larger palette</li>
</ul>
<strong>API changes</strong> (<code>/api/skills</code>):
<ul><li>Each skill needs a <code>domains: string[]</code> field (replacing single <code>category</code>)</li>
<li>Add <code>v2vPhase</code> as secondary metadata (still useful for context, just not primary grouping)</li>
</ul>
<hr style="border-color: #333; margin: 2rem 0;">
</section>
<section class="section" id="section-13">
<h2>2. Agent Selector v2 (@)</h2>
</section>
<section class="section" id="section-14">
<h3>Problem</h3></p><p>The v1 agent selector shows all agents in a flat list grouped by team. With 81 agents + 11 gateways, the flat list is 92 items long. Scrolling through Marketing's 16 agents to find the Legal team is painful. The current <code>TEAM_ORDER</code> array in <code>agent-selector.tsx</code> already has the right team structure, but the presentation is a single scrollable list with sticky team headers. This does not scale.
</section>
<section class="section" id="section-15">
<h3>New Architecture: Two-Level Navigation</h3></p><p>The redesigned selector uses a <strong>team tab bar + agent list</strong> model:</p><p><li><strong>Top row</strong>: Horizontal team filter tabs (scrollable on mobile)</li>
<li><strong>Active team section</strong>: Shows all agents in the selected team</li>
<li><strong>"All" tab</strong>: Flat searchable list across all teams (default when opened via search)</li>
</section>
<section class="section" id="section-16">
<h3>Team Tab Bar</h3></p><p>Tabs are shown as compact pills at the top of the selector. Each pill shows the team emoji + short name. The user's primary team is pre-selected.</p><p><div class="table-container"><table>
<thead><tr><th>Tab</th><th>Emoji</th><th>Label</th><th>Count</th></tr></thead>
<tbody>
<tr><td>All</td><td>--</td><td>All</td><td>92</td></tr>
<tr><td>Product</td><td>--</td><td>Product</td><td>15</td></tr>
<tr><td>Design</td><td>--</td><td>Design</td><td>8</td></tr>
<tr><td>Architecture</td><td>--</td><td>Architecture</td><td>8</td></tr>
<tr><td>Marketing</td><td>--</td><td>Marketing</td><td>17</td></tr>
<tr><td>Finance</td><td>--</td><td>Finance</td><td>10</td></tr>
<tr><td>Legal</td><td>--</td><td>Legal</td><td>9</td></tr>
<tr><td>Operations</td><td>--</td><td>Operations</td><td>9</td></tr>
<tr><td>Executive</td><td>--</td><td>Executive</td><td>3</td></tr>
<tr><td>Corp Dev</td><td>--</td><td>Corp Dev</td><td>6</td></tr>
<tr><td>IT</td><td>--</td><td>IT</td><td>7</td></tr>
</tbody></table></div></p><p>Counts include gateways. When the user only has one team subscribed, other team tabs show a lock icon and a tooltip: "Add this team to your plan."
</section>
<section class="section" id="section-17">
<h3>Gateway vs. Individual Agent Distinction</h3></p><p>Within each team view, the <strong>gateway</strong> appears first, visually distinct from individual agents:</p><p><ul><li><strong>Gateway card</strong>: Larger, with a colored border and a "Team session" badge. Description explains that the gateway routes to specialists automatically.</li>
<li><strong>Individual agents</strong>: Standard cards below the gateway, organized into sub-groups (Leadership, Core, Specialists) where applicable.</li></ul>
</section>
<section class="section" id="section-18">
<h3>Recently Used Agents</h3></p><p>A "Recent" section appears above the team tabs when the selector opens (before the user filters). Shows the last 4 agents the user interacted with. Each shows emoji + name + team badge.
</section>
<section class="section" id="section-19">
<h3>Auto-Routing Preview ("Suggested")</h3></p><p>When the user has already typed text in the chat input BEFORE opening the agent selector, the selector shows a "Suggested" agent based on keyword matching against the domain routing table. For example, if the chat input contains "pricing", the selector highlights BizOps with a "Suggested for this message" badge.</p><p>This bridges the gap between explicit agent selection and the auto-routing that happens if they just send the message without selecting an agent.
</section>
<section class="section" id="section-20">
<h3>Agent Cards</h3></p><p>Each agent card shows:</p><p><pre><code>+-----------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>[Emoji] [Display Name] [Badge]</th></tr></thead>
<tbody>
<tr><td>[One-line description]</td></tr>
</tbody></table></div>
+-----------------------------------------------+
</code></pre></p><p><ul><li><strong>Emoji</strong>: 20px, left-aligned</li>
<li><strong>Display Name</strong>: Font-medium, primary text color</li>
<li><strong>Badge</strong>: Team name in a small pill (e.g., "Product", "Marketing"), using team color</li>
<li><strong>Description</strong>: Truncated to ~50 characters, secondary text color</li>
<li>On hover: slight background highlight + full description in tooltip</li></ul>
</section>
<section class="section" id="section-21">
<h3>Search Across All Teams</h3></p><p>When the user types in the search field:
<ul><li>Tab bar switches to "All" automatically</li>
<li>Results are a flat list sorted by relevance (fuzzy match on agent ID, display name, and description)</li>
<li>Each result shows the team badge so the user knows which team the agent belongs to</li>
<li>Gateways appear first in search results (they are the entry point for most users)</li></ul>
</section>
<section class="section" id="section-22">
<h3>Keyboard Navigation</h3></p><p><div class="table-container"><table>
<thead><tr><th>Key</th><th>Action</th></tr></thead>
<tbody>
<tr><td><code>@</code> (in chat)</td><td>Open selector</td></tr>
<tr><td><code>Cmd+Shift+A</code></td><td>Open selector (global)</td></tr>
<tr><td>Type</td><td>Search across all agents</td></tr>
<tr><td><code>Arrow Up/Down</code></td><td>Navigate agents in current view</td></tr>
<tr><td><code>Arrow Left/Right</code></td><td>Switch team tab (when focus is on tab bar)</td></tr>
<tr><td><code>Enter</code></td><td>Select agent, insert <code>@agent-id </code> into chat</td></tr>
<tr><td><code>Esc</code></td><td>Close selector</td></tr>
</tbody></table></div>
</section>
<section class="section" id="section-23">
<h3>ASCII Wireframe</h3></p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>@ Search agents and gateways... x</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>RECENT</td></tr>
<tr><td>[PM] [BizOps] [VP Product] [Dir Marketing]</td></tr>
<tr><td></td></tr>
<tr><td>SUGGESTED FOR THIS MESSAGE</td></tr>
<tr><td>BizOps -- "pricing" detected in your message [Prod]</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>[All] [Product] [Design] [Arch] [Mktg] [Fin] [>]</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>PRODUCT (selected)</td></tr>
<tr><td></td></tr>
<tr><td>GATEWAYS</td></tr>
<tr><td></td><td>Product Gateway [Prod]</td><td></td></tr>
<tr><td></td><td>Routes to the right specialist for your request</td><td></td></tr>
<tr><td></td><td>PLT (Leadership Team Session) [Prod]</td><td></td></tr>
<tr><td></td><td>Multi-agent strategic discussion</td><td></td></tr>
<tr><td></td></tr>
<tr><td>LEADERSHIP</td></tr>
<tr><td></td><td>CPO [Prod]</td><td></td></tr>
<tr><td></td><td>Chief Product Officer</td><td></td></tr>
<tr><td></td><td>VP Product [Prod]</td><td></td></tr>
<tr><td></td><td>Vision, portfolio, pricing strategy</td><td></td></tr>
<tr><td></td></tr>
<tr><td>CORE TEAM</td></tr>
<tr><td></td><td>PM</td><td>PMM</td><td>Dir PM</td><td>DirPMM</td><td>UX Lead</td><td>...</td><td></td></tr>
<tr><td></td></tr>
<tr><td>SPECIALISTS</td></tr>
<tr><td></td><td>BizOps</td><td>BizDev</td><td>CI</td><td>Prod Ops</td><td>VR</td><td></td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>@ to mention</th><th>Arrow keys</th><th>Tab to switch teams</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre>
</section>
<section class="section" id="section-24">
<h3>Migration Notes</h3></p><p><strong>Existing code</strong> (<code>agent-selector.tsx</code>):
<ul><li><code>TEAM_ORDER</code> array is already correct and can remain</li>
<li>The <code>getTeamKey()</code> function works as-is</li>
<li><strong>Major changes</strong>: Replace the flat scrollable list with a tab bar + filtered view</li>
<li>Add <code>recentAgents</code> state (tracked per user in localStorage or API)</li>
<li>Add <code>suggestedAgent</code> computation (parse chat input for domain keywords)</li>
<li>The <code>AgentInfo</code> interface needs a new <code>subgroup</code> field (<code>"gateway" | "leadership" | "core" | "specialist"</code>)</li>
<li>Increase <code>max-h-72</code> to <code>max-h-[520px]</code></li>
<li>Add horizontal scrollable tab bar component at the top</li>
</ul>
<strong>API changes</strong> (<code>/api/agents</code>):
<ul><li>Each agent needs <code>subgroup</code> and <code>teamColor</code> fields</li>
<li>Gateways should be flagged as <code>isGateway: true</code></li>
</ul>
<hr style="border-color: #333; margin: 2rem 0;">
</section>
<section class="section" id="section-25">
<h2>3. Meeting Mode v2 (Multi-Team)</h2>
</section>
<section class="section" id="section-26">
<h3>Problem</h3></p><p>v1 Meeting Mode is designed for Product Org agents only (3-4 agents from the same team). With 9 teams, a meeting might include agents from Marketing, Legal, and Finance reviewing a GTM plan together. The current design has no team attribution, no team color coding, and no pattern for assembling custom multi-team meetings.
</section>
<section class="section" id="section-27">
<h3>Cross-Team Meeting Pattern</h3></p><p>When agents from different teams participate in a meeting, each agent's response includes a <strong>team badge</strong> in their header. This makes it immediately clear which organizational perspective each voice represents.
</section>
<section class="section" id="section-28">
<h3>Team Color Coding</h3></p><p>Each team gets a subtle background tint applied to their agent section in Meeting Mode. This provides a quick visual scan of which teams are represented.</p><p><div class="table-container"><table>
<thead><tr><th>Team</th><th>Tint Color (light bg)</th><th>Border Color</th><th>Hex</th></tr></thead>
<tbody>
<tr><td>Product</td><td>Blue tint</td><td>Blue</td><td><code>#3b82f6</code> / <code>rgba(59,130,246,0.06)</code></td></tr>
<tr><td>Design</td><td>Pink tint</td><td>Pink</td><td><code>#ec4899</code> / <code>rgba(236,72,153,0.06)</code></td></tr>
<tr><td>Architecture</td><td>Slate tint</td><td>Slate</td><td><code>#64748b</code> / <code>rgba(100,116,139,0.06)</code></td></tr>
<tr><td>Marketing</td><td>Orange tint</td><td>Orange</td><td><code>#f97316</code> / <code>rgba(249,115,22,0.06)</code></td></tr>
<tr><td>Finance</td><td>Emerald tint</td><td>Emerald</td><td><code>#10b981</code> / <code>rgba(16,185,129,0.06)</code></td></tr>
<tr><td>Legal</td><td>Violet tint</td><td>Violet</td><td><code>#8b5cf6</code> / <code>rgba(139,92,246,0.06)</code></td></tr>
<tr><td>Operations</td><td>Amber tint</td><td>Amber</td><td><code>#f59e0b</code> / <code>rgba(245,158,11,0.06)</code></td></tr>
<tr><td>Executive</td><td>Indigo tint</td><td>Indigo</td><td><code>#6366f1</code> / <code>rgba(99,102,241,0.06)</code></td></tr>
<tr><td>Corp Dev</td><td>Teal tint</td><td>Teal</td><td><code>#14b8a6</code> / <code>rgba(20,184,166,0.06)</code></td></tr>
<tr><td>IT Governance</td><td>Cyan tint</td><td>Cyan</td><td><code>#06b6d4</code> / <code>rgba(6,182,212,0.06)</code></td></tr>
</tbody></table></div></p><p>The tint is applied as a background on the agent's collapsible section. The border-left color uses the team color at full opacity (4px solid).
</section>
<section class="section" id="section-29">
<h3>"Assemble Team" Interaction</h3></p><p>Users can explicitly assemble a custom meeting via a new interaction pattern:</p><p><strong>Trigger phrase</strong>: "Assemble [agent1], [agent2], [agent3] to discuss [topic]"</p><p><strong>Or via UI</strong>: A new "Assemble meeting" button appears in the chat input area (next to the voice input button). Clicking it opens a multi-select agent picker:</p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>Assemble a team meeting x</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>Topic: [Enter meeting topic]</th></tr></thead>
<tbody>
<tr><td></td></tr>
<tr><td>SELECTED (3)</td></tr>
<tr><td>[x] Dir Marketing [Mktg]</td></tr>
<tr><td>[x] Contracts Counsel [Legal]</td></tr>
<tr><td>[x] Revenue Analyst [Finance]</td></tr>
<tr><td></td></tr>
<tr><td>ADD PARTICIPANTS</td></tr>
<tr><td>[Search agents...]</td></tr>
<tr><td></td></tr>
<tr><td>SUGGESTED FOR THIS TOPIC</td></tr>
<tr><td>[ ] Privacy Counsel [Legal] -- "contracts" detected</td></tr>
<tr><td>[ ] BizOps [Prod] -- financial context</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>Max 6 participants</th><th>[Cancel] [Start Meeting]</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre>
</section>
<section class="section" id="section-30">
<h3>Handling 4+ Agents from 3+ Teams</h3></p><p>When a meeting has 4+ agents from 3+ different teams:</p><p><li><strong>Header</strong>: Show team representation count: "Present: 2 Product, 1 Legal, 1 Finance"</li>
<li><strong>Agent sections</strong>: Group by team within the meeting. Product agents appear together, then Legal, then Finance. Each group has a subtle team header.</li>
<li><strong>Alignment/Tension</strong>: Attribute points to teams, not just individuals: "Product and Finance align on pricing. Legal raises compliance concerns."</li>
<li><strong>Synthesis</strong>: The synthesizer attributes team perspectives explicitly.</li>
<li><strong>Max participants</strong>: Soft cap at 6 agents per meeting. The UI allows more but shows a warning: "Meetings with 7+ agents take longer and may produce less focused synthesis."</li>
</section>
<section class="section" id="section-31">
<h3>Meeting Mode v2 Wireframe</h3></p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>Team Meeting</th></tr></thead>
<tbody>
<tr><td>Topic: GTM compliance review for EU launch</td></tr>
<tr><td>Present: 2 Marketing, 1 Legal, 1 Finance</td></tr>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td></td></tr>
<tr><td>v Dir Marketing [Mktg]</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th><th>"From a go-to-market perspective, the EU launch</th></tr></thead>
<tbody>
<tr><td></td><td>timeline is aggressive but achievable. My concern</td></tr>
<tr><td></td><td>is the messaging localization..."</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>v Content Strategist [Mktg]</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th><th>"I have reviewed the content pipeline and we have</th></tr></thead>
<tbody>
<tr><td></td><td>a gap in DACH-specific case studies..."</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td></td></tr>
<tr><td>v Privacy Counsel [Legal]</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th><th>"The GDPR implications are significant. Before any</th></tr></thead>
<tbody>
<tr><td></td><td>email campaign launches, we need..."</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td></td></tr>
<tr><td>v Revenue Analyst [Finance]</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th><th>"The EU revenue model needs adjustment. VAT</th></tr></thead>
<tbody>
<tr><td></td><td>handling alone changes the unit economics..."</td></tr>
</tbody></table></div>
| +------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>ALIGNMENT</th></tr></thead>
<tbody>
<tr><td>- All teams agree the timeline needs 2-week buffer</td></tr>
<tr><td>- Marketing and Legal align on consent-first approach</td></tr>
<tr><td></td></tr>
<tr><td>TENSION</td></tr>
<tr><td>- Marketing wants to launch with existing content;</td></tr>
<tr><td>Legal requires DACH-specific disclosures first</td></tr>
<tr><td>- Finance flags VAT complexity that Marketing has not</td></tr>
<tr><td>accounted for in pricing</td></tr>
<tr><td></td></tr>
<tr><td>SYNTHESIS</td></tr>
<tr><td>Recommend: Delay EU launch by 2 weeks. Use the time</td></tr>
<tr><td>for GDPR compliance review (Legal), DACH content</td></tr>
<tr><td>creation (Marketing), and VAT model adjustment</td></tr>
<tr><td>(Finance). This eliminates the top 3 risks identified.</td></tr>
<tr><td></td></tr>
<tr><td>Time: ~8 hrs saved in 110s</td></tr>
<tr><td>Dir Marketing: ~2h</td><td>Content Strategist: ~1.5h</td></tr>
<tr><td>Privacy Counsel: ~2h</td><td>Revenue Analyst: ~2.5h</td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre>
</section>
<section class="section" id="section-32">
<h3>Migration Notes</h3></p><p><strong>Meeting Mode is not built yet as a component.</strong> This is a full specification for a new <code>MeetingMode.tsx</code> component.</p><p><strong>New components needed</strong>:
<ul><li><code>MeetingMode.tsx</code> -- Container for multi-agent discussion</li>
<li><code>MeetingAgentSection.tsx</code> -- Individual agent section with collapse/expand</li>
<li><code>MeetingSynthesis.tsx</code> -- Alignment + Tension + Synthesis block</li>
<li><code>AssembleTeamDialog.tsx</code> -- Multi-select agent picker for custom meetings</li>
</ul>
<strong>Integration with existing code</strong>:
<ul><li><code>chat-container.tsx</code> needs to detect meeting mode responses (when the API returns multi-agent format)</li>
<li>The <code>Message</code> component needs a new rendering path for meeting-type messages</li>
<li>Team colors should be centralized in a <code>teamColors.ts</code> constants file</li>
</ul>
<hr style="border-color: #333; margin: 2rem 0;">
</section>
<section class="section" id="section-33">
<h2>4. Onboarding Flow v2</h2>
</section>
<section class="section" id="section-34">
<h3>Design Philosophy</h3></p><p>The onboarding flow must:
<li>Never say "product org" unless the user chose a product role</li>
<li>Lead with the <strong>team concept</strong> ("assemble your workforce")</li>
<li>Make the API key step feel like connecting power, not configuration pain</li>
<li>Get to first value in under 3 minutes</li></p><p>The existing Onboarding User Journey v1.0 document (6 screens) is well-designed. This section refines the copy and interaction details to align with the "AI workforce platform" positioning.
</section>
<section class="section" id="section-35">
<h3>Step 1: Sign Up</h3></p><p><strong>Route</strong>: <code>/sign-up</code> (existing Clerk flow)</p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>[Legionis Logo]</td></tr>
<tr><td></td></tr>
<tr><td>Your AI workforce, on demand.</td></tr>
<tr><td></td></tr>
<tr><td></td><td>Continue with Google</td><td></td></tr>
<tr><td></td><td>Continue with Microsoft</td><td></td></tr>
<tr><td></td><td>Continue with LinkedIn</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>Sign up with email</td><td></td></tr>
<tr><td></td></tr>
<tr><td>Already have an account? Log in</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre></p><p><strong>Copy notes</strong>:
<ul><li>Tagline: "Your AI workforce, on demand." (not "The AI operating system for product organizations")</li>
<li>Social login options: Google, Microsoft, LinkedIn (not GitHub -- this is not a dev tool)</li>
<li>No mention of "product" anywhere on this screen</li></ul>
</section>
<section class="section" id="section-36">
<h3>Step 2: Tell Us About Yourself (Role Selection)</h3></p><p><strong>Route</strong>: <code>/onboarding</code></p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>Welcome to Legionis, [First Name].</td></tr>
<tr><td></td></tr>
<tr><td>What kind of work do you do?</td></tr>
<tr><td>We will assemble the right team for you.</td></tr>
<tr><td></td></tr>
<tr><td></td><td>Product</td><td></td><td>Design</td><td></td><td>Engineering</td><td></td></tr>
<tr><td></td><td>Management</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td>PM, PMM, VP</td><td></td><td>UX, UI,</td><td></td><td>Architect,</td><td></td></tr>
<tr><td></td><td>Product</td><td></td><td>Research</td><td></td><td>Developer</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>Marketing</td><td></td><td>Leadership</td><td></td><td>Operations</td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td>Content, SEO,</td><td></td><td>CEO, COO,</td><td></td><td>Finance,</td><td></td></tr>
<tr><td></td><td>Growth</td><td></td><td>VP, Director</td><td></td><td>Legal, IT</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>Other / Just exploring</td><td></td></tr>
<tr><td></td></tr>
<tr><td>[Continue ->]</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre></p><p><strong>Copy notes</strong>:
<ul><li>"What kind of work do you do?" (not "Tell us about your role" -- more natural)</li>
<li>"We will assemble the right team for you" -- uses "assemble" language from brand</li>
<li>Role cards are broad enough to cover anyone</li>
</ul>
<strong>Skip</strong>: "Other / Just exploring" is the skip path. Always available.
</section>
<section class="section" id="section-37">
<h3>Step 3: Meet Your Workforce (Team Showcase)</h3></p><p><strong>Route</strong>: <code>/onboarding/teams</code></p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>Your AI Workforce</td></tr>
<tr><td>81 specialists across 9 teams. Built to work together.</td></tr>
<tr><td></td></tr>
<tr><td></td><td>ASSEMBLED FOR YOU</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>Product Organization 13 agents, 61 skills</td><td></td></tr>
<tr><td></td><td>PM, VP Product, BizOps, PMM, CI, UX Lead...</td><td></td></tr>
<tr><td></td><td>"Write PRDs, build roadmaps, run strategy</td><td></td></tr>
<tr><td></td><td>sessions with multiple expert perspectives"</td><td></td></tr>
<tr><td></td><td>[->]</td><td></td></tr>
<tr><td></td></tr>
<tr><td>MORE TEAMS</td></tr>
<tr><td></td></tr>
<tr><td></td><td>Design</td><td></td><td>Arch</td><td></td><td>Marketing</td><td></td><td>Finance</td><td></td></tr>
<tr><td></td><td>7 agents</td><td></td><td>7 agents</td><td></td><td>16 agents</td><td></td><td>9 agents</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>Legal</td><td></td><td>Ops</td><td></td><td>Executive</td><td></td><td>Corp Dev</td><td></td></tr>
<tr><td></td><td>8 agents</td><td></td><td>8 agents</td><td></td><td>2 agents</td><td></td><td>5 agents</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>IT Gov</td><td>+ All teams: Full Org ($25/mo)</td></tr>
<tr><td></td><td>6 agents</td><td></td></tr>
<tr><td></td></tr>
<tr><td>[Continue ->]</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre></p><p><strong>Copy notes</strong>:
<ul><li>"Your AI Workforce" (not "Available Teams")</li>
<li>"81 specialists across 9 teams" -- specific, impressive, not hyperbolic</li>
<li>"ASSEMBLED FOR YOU" (not "RECOMMENDED") -- uses brand language</li>
<li>Clicking any team card expands to show agent roster + 3 example tasks</li>
</ul>
<strong>Interaction</strong>: Browse-only. No selection happens here. This is the "wow" moment where users see the scale of what they are getting.
</section>
<section class="section" id="section-38">
<h3>Step 4: Choose Your Starting Team</h3></p><p><strong>Route</strong>: <code>/onboarding/select</code></p><p>Unchanged from Onboarding User Journey v1.0. The wireframe, pricing display, multi-team selection logic, and "Full Org" upsell are well-specified there.</p><p><strong>Copy change only</strong>: Replace "Choose your starting team" with "Assemble your first team."
</section>
<section class="section" id="section-39">
<h3>Step 5: Connect Your AI</h3></p><p><strong>Route</strong>: <code>/onboarding/connect</code></p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>One last step: Power up your team</td></tr>
<tr><td></td></tr>
<tr><td>Your AI workforce runs on Claude or GPT.</td></tr>
<tr><td>Choose how you want to connect.</td></tr>
<tr><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td>Bring Your Own Key</td><td></td><td>Let Us Handle It</td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td>Best if you already</td><td></td><td>No API key needed.</td><td></td></tr>
<tr><td></td><td>have an Anthropic or</td><td></td><td>We handle everything.</td><td></td></tr>
<tr><td></td><td>OpenAI account.</td><td></td><td>Usage-based billing.</td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td><em> Full cost control</td><td></td><td></em> Start immediately</td><td></td></tr>
<tr><td></td><td><em> No markup</td><td></td><td></em> Pay as you go</td><td></td></tr>
<tr><td></td><td><em> Use your volume</td><td></td><td></em> No setup needed</td><td></td></tr>
<tr><td></td><td>discounts</td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td>[Choose This ->]</td><td></td><td>[Choose This ->]</td><td></td></tr>
<tr><td></td></tr>
<tr><td>Not sure? You can change anytime in Settings.</td></tr>
<tr><td></td></tr>
<tr><td>[Skip for now -- I will set this up later]</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre></p><p><strong>Copy notes</strong>:
<ul><li>"Power up your team" (not "Connect your AI" -- more action-oriented)</li>
<li>"Your AI workforce runs on Claude or GPT" -- direct, factual</li>
<li>BYOK card emphasizes cost control and transparency</li>
<li>Managed card emphasizes simplicity</li></ul>
</section>
<section class="section" id="section-40">
<h3>Step 6: First Interaction (Guided Dashboard)</h3></p><p><strong>Route</strong>: <code>/dashboard</code> (first visit)</p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>You are all set. Your team is ready.</td></tr>
<tr><td></td></tr>
<tr><td>Here are 3 things to try right now:</td></tr>
<tr><td></td></tr>
<tr><td></td><td>"Help me write a product requirements document"</td><td></td></tr>
<tr><td></td><td>Uses: Product Manager + /prd skill</td><td></td></tr>
<tr><td></td><td>Time: ~2 minutes [Try this ->]</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>"Review my pricing strategy"</td><td></td></tr>
<tr><td></td><td>Uses: BizOps + /pricing-strategy skill</td><td></td></tr>
<tr><td></td><td>Time: ~3 minutes [Try this ->]</td><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td>"Help me decide between two options"</td><td></td></tr>
<tr><td></td><td>Uses: @product gateway (Meeting Mode)</td><td></td></tr>
<tr><td></td><td>Time: ~5 minutes [Try this ->]</td><td></td></tr>
<tr><td></td></tr>
<tr><td>Or type anything below.</td></tr>
<tr><td></td></tr>
<tr><td>[Message your AI workforce... (/ for skills, @ for</td></tr>
<tr><td>agents)]</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre></p><p><strong>Copy notes</strong>:
<ul><li>"Your team is ready" -- not "Welcome to the dashboard"</li>
<li>Suggested prompts are personalized based on role and team (see Onboarding User Journey v1.0 for the full mapping table)</li>
<li>Clicking "Try this" pre-fills the chat input and auto-submits</li>
<li>After the first agent response, guided prompts collapse permanently</li></ul>
</section>
<section class="section" id="section-41">
<h3>Migration Notes</h3></p><p><strong>Existing</strong>: Clerk sign-up flow is built. Dashboard with EmptyState is built.</p><p><strong>New routes needed</strong>:
<ul><li><code>/onboarding</code> (role selection)</li>
<li><code>/onboarding/teams</code> (showcase)</li>
<li><code>/onboarding/select</code> (team selection + plan)</li>
<li><code>/onboarding/connect</code> (token fork)</li>
<li><code>/api/onboarding/role</code>, <code>/api/onboarding/team</code>, <code>/api/onboarding/validate-key</code></li>
</ul>
<strong>Existing EmptyState</strong> (<code>chat-container.tsx</code>):
<ul><li>The current EmptyState with 4 HintCards is the right structure for Step 6</li>
<li>Replace static text with personalized suggestions based on <code>users.role</code> and <code>users.selectedTeams</code></li>
<li>Add "Try this" click handler that pre-fills and auto-submits</li>
</ul>
<strong>Middleware</strong>: Redirect non-onboarded users to <code>/onboarding</code> (new logic in <code>middleware.ts</code>)</p><p><hr style="border-color: #333; margin: 2rem 0;">
</section>
<section class="section" id="section-42">
<h2>5. Context Panel Interactions</h2>
</section>
<section class="section" id="section-43">
<h3>When Does It Appear?</h3></p><p><div class="table-container"><table>
<thead><tr><th>Viewport</th><th>Behavior</th></tr></thead>
<tbody>
<tr><td>Desktop (1440px+)</td><td>Always visible in the right sidebar (320px)</td></tr>
<tr><td>Laptop (1024-1440px)</td><td>Collapsed by default; toggle with <code>Cmd+]</code> or click icon</td></tr>
<tr><td>Tablet (768-1024px)</td><td>Hidden; accessible as slide-over overlay</td></tr>
<tr><td>Mobile (<768px)</td><td>Hidden; accessible from bottom sheet</td></tr>
</tbody></table></div>
</section>
<section class="section" id="section-44">
<h3>What It Shows</h3></p><p>The context panel has 5 collapsible sections, each with a count badge:</p><p><pre><code>+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th>CONTEXT [Cmd+] Hide]</th></tr></thead>
<tbody>
</tbody></table></div>
+----------------------------------------------------------+
<div class="table-container"><table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>v RECENT DECISIONS (47)</td></tr>
<tr><td></td><td>DR-2026-015 API Pricing Model 2 hrs ago</td><td></td></tr>
<tr><td></td><td>DR-2026-014 Auth Provider Choice Yesterday</td><td></td></tr>
<tr><td></td><td>DR-2026-013 Mobile-First Strategy 3 days</td><td></td></tr>
<tr><td></td><td>[View all ->]</td><td></td></tr>
<tr><td></td></tr>
<tr><td>> ACTIVE BETS (5)</td></tr>
<tr><td>[collapsed -- click to expand]</td></tr>
<tr><td></td></tr>
<tr><td>> RECENT FEEDBACK (12)</td></tr>
<tr><td>[collapsed -- click to expand]</td></tr>
<tr><td></td></tr>
<tr><td>> LEARNINGS (8)</td></tr>
<tr><td>[collapsed -- click to expand]</td></tr>
<tr><td></td></tr>
<tr><td>> SESSION ROI</td></tr>
<tr><td>4.2 hrs saved this session</td></tr>
<tr><td>12 operations</td></tr>
<tr><td>[View full ROI dashboard ->]</td></tr>
<tr><td></td></tr>
</tbody></table></div>
+----------------------------------------------------------+
</code></pre>
</section>
<section class="section" id="section-45">
<h3>What Triggers Updates?</h3></p><p><div class="table-container"><table>
<thead><tr><th>Event</th><th>Panel Update</th></tr></thead>
<tbody>
<tr><td>New decision saved (<code>/decision-record</code> completes)</td><td>"Recent Decisions" section refreshes, new item pulses briefly</td></tr>
<tr><td>New bet created (<code>/strategic-bet</code> completes)</td><td>"Active Bets" section refreshes</td></tr>
<tr><td>Feedback captured (<code>/feedback-capture</code> completes)</td><td>"Recent Feedback" section refreshes, count badge increments</td></tr>
<tr><td>Agent completes a task</td><td>"Session ROI" updates in real-time</td></tr>
<tr><td>Context recall executed</td><td>Panel highlights the recalled items with a yellow flash</td></tr>
</tbody></table></div>
</section>
<section class="section" id="section-46">
<h3>Interactive Elements</h3></p><p><ul><li><strong>Click any item</strong>: Opens the full record in the main chat panel as a formatted preview</li>
<li><strong>Click "View all"</strong>: Opens the full context dashboard (<code>/context</code> route)</li>
<li><strong>Right-click item</strong>: Context menu with "Recall in chat" (inserts <code>@DR-2026-015</code> reference), "Open document", "Copy ID"</li>
<li><strong>Drag item to chat</strong>: Inserts a reference to the context item in the chat input</li></ul>
</section>
<section class="section" id="section-47">
<h3>Relationship to Chat</h3></p><p>Selecting a context item can pre-fill the chat input:
<ul><li>Clicking a decision while composing: Inserts <code>@DR-2026-015</code> reference</li>
<li>Clicking a bet: Inserts <code>@SB-2026-003</code> reference</li>
<li>This enables patterns like: "Review @SB-2026-003 assumptions" -- the user clicks the bet in the panel and types around it</li></ul>
</section>
<section class="section" id="section-48">
<h3>Collapsible Sections</h3></p><p><ul><li>Default: "Recent Decisions" expanded, all others collapsed</li>
<li>State persists across sessions (localStorage)</li>
<li>Each section header shows: section name + count badge + expand/collapse chevron</li>
<li>Sections animate open/closed (200ms ease-out)</li></ul>