Legionis: Interaction Patterns v2

Design Context

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."

The core interaction model (/ for skills, @ for agents, Cmd+K for palette) remains sound. The patterns need to scale and the copy needs to align with the new positioning.

Key Constraints

81 agents across 9 teams + 11 gateways -- flat lists are unusable at this scale

80+ skills across functional domains -- V2V phase grouping only works for Product Org skills

Non-product users -- a marketing director, finance lead, or ops manager must feel at home

"AI workforce platform" -- not "product org tool." Copy must be domain-neutral

Existing code -- skill-palette.tsx, agent-selector.tsx, chat-input.tsx, and chat-container.tsx are already built and shipping

1. Skill Palette v2 (Cmd+K)

Problem

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.

New Grouping Strategy

Replace V2V phase grouping with functional domain grouping. The V2V phase is still available as metadata but is no longer the primary organizer.

Category	Skills Included	Example Skills
Product	All Product Org skills (phases 1-6 + cross-phase)	`/prd`, `/decision-record`, `/strategic-bet`, `/roadmap-theme`
Marketing & GTM	GTM, positioning, campaign, sales enablement	`/gtm-strategy`, `/campaign-brief`, `/positioning-statement`, `/sales-enablement`
Finance & Business	Business case, pricing, financial modeling	`/business-case`, `/pricing-strategy`, `/pricing-model`
Strategy & Executive	Vision, strategic bets, portfolio, QBR	`/vision-statement`, `/strategic-intent`, `/qbr-deck`, `/portfolio-tradeoff`
Operations & Delivery	Launch, readiness, commitment, process	`/launch-plan`, `/launch-readiness`, `/commitment-check`
Learning & Context	Context recall, feedback, outcome review, retrospective	`/context-recall`, `/feedback-recall`, `/outcome-review`, `/retrospective`
Validators	Phase check, ownership map, scale check	`/phase-check`, `/ownership-map`, `/collaboration-check`

Note: Some skills appear in multiple categories when relevant (e.g., /positioning-statement appears in both Product and Marketing). The palette deduplicates in search results.

Favorites and Pinned Skills

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.

Pinned skills persist in the users.preferences JSON column (or localStorage as fallback).

"Suggested for You"

Below "Pinned" and above the category groups, a "Suggested" section shows 3-4 skills based on:

The user's selected role (from onboarding)

The user's active team(s)

Frequency of use (show skills they have not tried yet from their domain)

This section is suppressed after 20+ sessions (the user is past the discovery phase).

Search Behavior

Fuzzy search across skill ID, description, and category name
Results flatten into a single list when the user types a query (no category headers during active search)
Each result row shows: / skill-id + description (truncated) + category badge
Team filter: optional chip filters at the top of the palette (e.g., "Product" | "Marketing" | "All")
The filter chips only appear when the user has multiple teams active

Keyboard Navigation

Key	Action
`Cmd+K`	Open palette (global)
Type	Fuzzy search
`Arrow Up/Down`	Navigate results
`Enter`	Select and insert `/skill-name` into chat input
`Tab`	Autocomplete current selection (same as Enter)
`Esc`	Close palette
`Cmd+Shift+S`	Toggle star/pin on highlighted skill

Progressive Disclosure

Default view (no search query): 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
Expanded category: Click a category header to expand it, showing all skills in that category
Active search: Flat list of all matching results, no category grouping

ASCII Wireframe

+----------------------------------------------------------+

/ Search skills...                                   x


+----------------------------------------------------------+



PINNED                                          [Edit]
/prd              Create Product Requirements Doc
/decision-record  Document a key decision
/gtm-strategy     Plan your go-to-market approach

SUGGESTED FOR YOU
/campaign-brief   Plan a marketing campaign    [Mktg]
/sales-enablement Create sales materials       [Mktg]
/competitive-landscape  Map competitors        [Prod]

RECENTLY USED
/prd              Create Product Requirements Doc
/business-case    Build a business case

PRODUCT                                        [12/32]
> /strategic-intent  Define strategic direction
> /market-analysis   Analyze your market
> /prd               Create Product Requirements Doc
[Show all 32 Product skills]

MARKETING & GTM                                [4/12]
> /gtm-strategy      Plan go-to-market
> /positioning-statement  Define positioning
> /campaign-brief    Plan a campaign
[Show all 12 Marketing & GTM skills]

FINANCE & BUSINESS                             [3/8]
> /business-case     Build a business case
> /pricing-strategy  Define pricing approach
> /pricing-model     Design pricing model
[Show all 8 Finance & Business skills]

STRATEGY & EXECUTIVE OPERATIONS LEARNING MORE


+----------------------------------------------------------+

/ to invoke Arrow keys to navigate Esc to close


+----------------------------------------------------------+


PINNED [Edit]
/prd Create Product Requirements Doc
/decision-record Document a key decision
/gtm-strategy Plan your go-to-market approach

SUGGESTED FOR YOU
/campaign-brief Plan a marketing campaign [Mktg]
/sales-enablement Create sales materials [Mktg]
/competitive-landscape Map competitors [Prod]

RECENTLY USED
/prd Create Product Requirements Doc
/business-case Build a business case

PRODUCT [12/32]
> /strategic-intent Define strategic direction
> /market-analysis Analyze your market
> /prd Create Product Requirements Doc
[Show all 32 Product skills]

MARKETING & GTM [4/12]
> /gtm-strategy Plan go-to-market
> /positioning-statement Define positioning
> /campaign-brief Plan a campaign
[Show all 12 Marketing & GTM skills]

FINANCE & BUSINESS [3/8]
> /business-case Build a business case
> /pricing-strategy Define pricing approach
> /pricing-model Design pricing model
[Show all 8 Finance & Business skills]

STRATEGY & EXECUTIVE	OPERATIONS	LEARNING	MORE

Migration Notes

Existing code (skill-palette.tsx):

CATEGORY_LABELS map needs replacement with new functional domain categories
The grouped Map logic can stay, but skill.category values from /api/skills need updating
Add a new pinned state (backed by user preferences API or localStorage)
Add suggested computation (new logic: role + team + frequency)
Minor: increase max-h-64 to max-h-[480px] to accommodate the larger palette

API changes (/api/skills):

Each skill needs a domains: string[] field (replacing single category)
Add v2vPhase as secondary metadata (still useful for context, just not primary grouping)

2. Agent Selector v2 (@)

Problem

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 TEAM_ORDER array in agent-selector.tsx already has the right team structure, but the presentation is a single scrollable list with sticky team headers. This does not scale.

New Architecture: Two-Level Navigation

The redesigned selector uses a team tab bar + agent list model:

Top row: Horizontal team filter tabs (scrollable on mobile)

Active team section: Shows all agents in the selected team

"All" tab: Flat searchable list across all teams (default when opened via search)

Team Tab Bar

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.

Tab	Emoji	Label	Count
All	--	All	92
Product	--	Product	15
Design	--	Design	8
Architecture	--	Architecture	8
Marketing	--	Marketing	17
Finance	--	Finance	10
Legal	--	Legal	9
Operations	--	Operations	9
Executive	--	Executive	3
Corp Dev	--	Corp Dev	6
IT	--	IT	7

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."

Gateway vs. Individual Agent Distinction

Within each team view, the gateway appears first, visually distinct from individual agents:

Gateway card: Larger, with a colored border and a "Team session" badge. Description explains that the gateway routes to specialists automatically.
Individual agents: Standard cards below the gateway, organized into sub-groups (Leadership, Core, Specialists) where applicable.

Recently Used Agents

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.

Auto-Routing Preview ("Suggested")

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.

This bridges the gap between explicit agent selection and the auto-routing that happens if they just send the message without selecting an agent.

Agent Cards

Each agent card shows:

+-----------------------------------------------+

[Emoji]  [Display Name]              [Badge]

[One-line description]

+-----------------------------------------------+

[Emoji] [Display Name] [Badge]
[One-line description]

Emoji: 20px, left-aligned
Display Name: Font-medium, primary text color
Badge: Team name in a small pill (e.g., "Product", "Marketing"), using team color
Description: Truncated to ~50 characters, secondary text color
On hover: slight background highlight + full description in tooltip

Search Across All Teams

When the user types in the search field:

Tab bar switches to "All" automatically
Results are a flat list sorted by relevance (fuzzy match on agent ID, display name, and description)
Each result shows the team badge so the user knows which team the agent belongs to
Gateways appear first in search results (they are the entry point for most users)

Keyboard Navigation

Key	Action
`@` (in chat)	Open selector
`Cmd+Shift+A`	Open selector (global)
Type	Search across all agents
`Arrow Up/Down`	Navigate agents in current view
`Arrow Left/Right`	Switch team tab (when focus is on tab bar)
`Enter`	Select agent, insert `@agent-id` into chat
`Esc`	Close selector

ASCII Wireframe

+----------------------------------------------------------+

@ Search agents and gateways...                      x


+----------------------------------------------------------+



RECENT
[PM] [BizOps] [VP Product] [Dir Marketing]

SUGGESTED FOR THIS MESSAGE
BizOps -- "pricing" detected in your message   [Prod]


+----------------------------------------------------------+

[All] [Product] [Design] [Arch] [Mktg] [Fin] [>]


+----------------------------------------------------------+



PRODUCT (selected)

GATEWAYS
Product Gateway                          [Prod] 
Routes to the right specialist for your request 
PLT (Leadership Team Session)            [Prod] 
Multi-agent strategic discussion 

LEADERSHIP
CPO                                      [Prod] 
Chief Product Officer 
VP Product                               [Prod] 
Vision, portfolio, pricing strategy 

CORE TEAM
PM PMM Dir PM DirPMM UX Lead ... 

SPECIALISTS
BizOps BizDev CI Prod Ops VR 


+----------------------------------------------------------+

@ to mention Arrow keys Tab to switch teams


+----------------------------------------------------------+


RECENT
[PM] [BizOps] [VP Product] [Dir Marketing]

SUGGESTED FOR THIS MESSAGE
BizOps -- "pricing" detected in your message [Prod]

Migration Notes

Existing code (agent-selector.tsx):

TEAM_ORDER array is already correct and can remain
The getTeamKey() function works as-is
Major changes: Replace the flat scrollable list with a tab bar + filtered view
Add recentAgents state (tracked per user in localStorage or API)
Add suggestedAgent computation (parse chat input for domain keywords)
The AgentInfo interface needs a new subgroup field ("gateway" | "leadership" | "core" | "specialist")
Increase max-h-72 to max-h-[520px]
Add horizontal scrollable tab bar component at the top

API changes (/api/agents):

Each agent needs subgroup and teamColor fields
Gateways should be flagged as isGateway: true

3. Meeting Mode v2 (Multi-Team)

Problem

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.

Cross-Team Meeting Pattern

When agents from different teams participate in a meeting, each agent's response includes a team badge in their header. This makes it immediately clear which organizational perspective each voice represents.

Team Color Coding

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.

Team	Tint Color (light bg)	Border Color	Hex
Product	Blue tint	Blue	`#3b82f6` / `rgba(59,130,246,0.06)`
Design	Pink tint	Pink	`#ec4899` / `rgba(236,72,153,0.06)`
Architecture	Slate tint	Slate	`#64748b` / `rgba(100,116,139,0.06)`
Marketing	Orange tint	Orange	`#f97316` / `rgba(249,115,22,0.06)`
Finance	Emerald tint	Emerald	`#10b981` / `rgba(16,185,129,0.06)`
Legal	Violet tint	Violet	`#8b5cf6` / `rgba(139,92,246,0.06)`
Operations	Amber tint	Amber	`#f59e0b` / `rgba(245,158,11,0.06)`
Executive	Indigo tint	Indigo	`#6366f1` / `rgba(99,102,241,0.06)`
Corp Dev	Teal tint	Teal	`#14b8a6` / `rgba(20,184,166,0.06)`
IT Governance	Cyan tint	Cyan	`#06b6d4` / `rgba(6,182,212,0.06)`

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).

"Assemble Team" Interaction

Users can explicitly assemble a custom meeting via a new interaction pattern:

Trigger phrase: "Assemble [agent1], [agent2], [agent3] to discuss [topic]"

Or via UI: 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:

+----------------------------------------------------------+

Assemble a team meeting                              x


+----------------------------------------------------------+

Topic: [Enter meeting topic]


SELECTED (3)
[x] Dir Marketing     [Mktg]
[x] Contracts Counsel [Legal]
[x] Revenue Analyst   [Finance]

ADD PARTICIPANTS
[Search agents...]

SUGGESTED FOR THIS TOPIC
[ ] Privacy Counsel   [Legal]  -- "contracts" detected
[ ] BizOps            [Prod]   -- financial context


+----------------------------------------------------------+

Max 6 participants [Cancel]  [Start Meeting]


+----------------------------------------------------------+

Topic: [Enter meeting topic]

SELECTED (3)
[x] Dir Marketing [Mktg]
[x] Contracts Counsel [Legal]
[x] Revenue Analyst [Finance]

ADD PARTICIPANTS
[Search agents...]

SUGGESTED FOR THIS TOPIC
[ ] Privacy Counsel [Legal] -- "contracts" detected
[ ] BizOps [Prod] -- financial context

Handling 4+ Agents from 3+ Teams

When a meeting has 4+ agents from 3+ different teams:

Header: Show team representation count: "Present: 2 Product, 1 Legal, 1 Finance"

Agent sections: Group by team within the meeting. Product agents appear together, then Legal, then Finance. Each group has a subtle team header.

Alignment/Tension: Attribute points to teams, not just individuals: "Product and Finance align on pricing. Legal raises compliance concerns."

Synthesis: The synthesizer attributes team perspectives explicitly.

Max participants: 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."

Meeting Mode v2 Wireframe

+----------------------------------------------------------+

Team Meeting

Topic: GTM compliance review for EU launch
Present: 2 Marketing, 1 Legal, 1 Finance

+----------------------------------------------------------+




v Dir Marketing                               [Mktg]

|  +------------------------------------------------------+

"From a go-to-market perspective, the EU launch

timeline is aggressive but achievable. My concern
is the messaging localization..."

|  +------------------------------------------------------+



v Content Strategist                          [Mktg]

|  +------------------------------------------------------+

"I have reviewed the content pipeline and we have

a gap in DACH-specific case studies..."

|  +------------------------------------------------------+




v Privacy Counsel                             [Legal]

|  +------------------------------------------------------+

"The GDPR implications are significant. Before any

email campaign launches, we need..."

|  +------------------------------------------------------+




v Revenue Analyst                             [Finance]

|  +------------------------------------------------------+

"The EU revenue model needs adjustment. VAT

handling alone changes the unit economics..."

|  +------------------------------------------------------+




+----------------------------------------------------------+

ALIGNMENT

- All teams agree the timeline needs 2-week buffer
- Marketing and Legal align on consent-first approach

TENSION
- Marketing wants to launch with existing content;
Legal requires DACH-specific disclosures first
- Finance flags VAT complexity that Marketing has not
accounted for in pricing

SYNTHESIS
Recommend: Delay EU launch by 2 weeks. Use the time
for GDPR compliance review (Legal), DACH content
creation (Marketing), and VAT model adjustment
(Finance). This eliminates the top 3 risks identified.

Time: ~8 hrs saved in 110s
Dir Marketing: ~2h Content Strategist: ~1.5h
Privacy Counsel: ~2h Revenue Analyst: ~2.5h

+----------------------------------------------------------+

Team Meeting
Topic: GTM compliance review for EU launch
Present: 2 Marketing, 1 Legal, 1 Finance



v Dir Marketing [Mktg]

	"From a go-to-market perspective, the EU launch
	timeline is aggressive but achievable. My concern
	is the messaging localization..."


v Content Strategist [Mktg]

	"I have reviewed the content pipeline and we have
	a gap in DACH-specific case studies..."



v Privacy Counsel [Legal]

	"The GDPR implications are significant. Before any
	email campaign launches, we need..."



v Revenue Analyst [Finance]

	"The EU revenue model needs adjustment. VAT
	handling alone changes the unit economics..."

ALIGNMENT
- All teams agree the timeline needs 2-week buffer
- Marketing and Legal align on consent-first approach

TENSION
- Marketing wants to launch with existing content;
Legal requires DACH-specific disclosures first
- Finance flags VAT complexity that Marketing has not
accounted for in pricing

SYNTHESIS
Recommend: Delay EU launch by 2 weeks. Use the time
for GDPR compliance review (Legal), DACH content
creation (Marketing), and VAT model adjustment
(Finance). This eliminates the top 3 risks identified.

Time: ~8 hrs saved in 110s
Dir Marketing: ~2h	Content Strategist: ~1.5h
Privacy Counsel: ~2h	Revenue Analyst: ~2.5h

Migration Notes

Meeting Mode is not built yet as a component. This is a full specification for a new MeetingMode.tsx component.

New components needed:

MeetingMode.tsx -- Container for multi-agent discussion
MeetingAgentSection.tsx -- Individual agent section with collapse/expand
MeetingSynthesis.tsx -- Alignment + Tension + Synthesis block
AssembleTeamDialog.tsx -- Multi-select agent picker for custom meetings

Integration with existing code:

chat-container.tsx needs to detect meeting mode responses (when the API returns multi-agent format)
The Message component needs a new rendering path for meeting-type messages
Team colors should be centralized in a teamColors.ts constants file

4. Onboarding Flow v2

Design Philosophy

The onboarding flow must:

Never say "product org" unless the user chose a product role

Lead with the team concept ("assemble your workforce")

Make the API key step feel like connecting power, not configuration pain

Get to first value in under 3 minutes

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.

Step 1: Sign Up

Route: /sign-up (existing Clerk flow)

+----------------------------------------------------------+



[Legionis Logo]

Your AI workforce, on demand.

Continue with Google 
Continue with Microsoft 
Continue with LinkedIn 


Sign up with email 

Already have an account? Log in


+----------------------------------------------------------+

Copy notes:

Tagline: "Your AI workforce, on demand." (not "The AI operating system for product organizations")
Social login options: Google, Microsoft, LinkedIn (not GitHub -- this is not a dev tool)
No mention of "product" anywhere on this screen

Step 2: Tell Us About Yourself (Role Selection)

Route: /onboarding

+----------------------------------------------------------+



Welcome to Legionis, [First Name].

What kind of work do you do?
We will assemble the right team for you.

Product Design Engineering 
Management 
PM, PMM, VP UX, UI, Architect, 
Product Research Developer 

Marketing Leadership Operations 

Content, SEO, CEO, COO, Finance, 
Growth VP, Director Legal, IT 

Other / Just exploring 

[Continue ->]


+----------------------------------------------------------+

Copy notes:

"What kind of work do you do?" (not "Tell us about your role" -- more natural)
"We will assemble the right team for you" -- uses "assemble" language from brand
Role cards are broad enough to cover anyone

Skip: "Other / Just exploring" is the skip path. Always available.

Step 3: Meet Your Workforce (Team Showcase)

Route: /onboarding/teams

+----------------------------------------------------------+



Your AI Workforce
81 specialists across 9 teams. Built to work together.

ASSEMBLED FOR YOU 

Product Organization   13 agents, 61 skills 
PM, VP Product, BizOps, PMM, CI, UX Lead... 
"Write PRDs, build roadmaps, run strategy 
sessions with multiple expert perspectives" 
[->] 

MORE TEAMS

Design Arch Marketing Finance 
7 agents 7 agents 16 agents 9 agents 

Legal Ops Executive Corp Dev 
8 agents 8 agents 2 agents 5 agents 

IT Gov + All teams: Full Org ($25/mo)
6 agents 

[Continue ->]


+----------------------------------------------------------+

Copy notes:

"Your AI Workforce" (not "Available Teams")
"81 specialists across 9 teams" -- specific, impressive, not hyperbolic
"ASSEMBLED FOR YOU" (not "RECOMMENDED") -- uses brand language
Clicking any team card expands to show agent roster + 3 example tasks

Interaction: Browse-only. No selection happens here. This is the "wow" moment where users see the scale of what they are getting.

Step 4: Choose Your Starting Team

Route: /onboarding/select

Unchanged from Onboarding User Journey v1.0. The wireframe, pricing display, multi-team selection logic, and "Full Org" upsell are well-specified there.

Copy change only: Replace "Choose your starting team" with "Assemble your first team."

Step 5: Connect Your AI

Route: /onboarding/connect

+----------------------------------------------------------+



One last step: Power up your team

Your AI workforce runs on Claude or GPT.
Choose how you want to connect.


Bring Your Own Key Let Us Handle It 

Best if you already No API key needed. 
have an Anthropic or We handle everything. 
OpenAI account. Usage-based billing. 

 Full cost control  Start immediately 
 No markup  Pay as you go 
 Use your volume  No setup needed 
discounts 

[Choose This ->] [Choose This ->] 

Not sure? You can change anytime in Settings.

[Skip for now -- I will set this up later]


+----------------------------------------------------------+

Copy notes:

"Power up your team" (not "Connect your AI" -- more action-oriented)
"Your AI workforce runs on Claude or GPT" -- direct, factual
BYOK card emphasizes cost control and transparency
Managed card emphasizes simplicity

Step 6: First Interaction (Guided Dashboard)

Route: /dashboard (first visit)

+----------------------------------------------------------+



You are all set. Your team is ready.

Here are 3 things to try right now:

"Help me write a product requirements document" 
Uses: Product Manager + /prd skill 
Time: ~2 minutes                  [Try this ->] 

"Review my pricing strategy" 
Uses: BizOps + /pricing-strategy skill 
Time: ~3 minutes                  [Try this ->] 

"Help me decide between two options" 
Uses: @product gateway (Meeting Mode) 
Time: ~5 minutes                  [Try this ->] 

Or type anything below.

[Message your AI workforce... (/ for skills, @ for
agents)]


+----------------------------------------------------------+

Copy notes:

"Your team is ready" -- not "Welcome to the dashboard"
Suggested prompts are personalized based on role and team (see Onboarding User Journey v1.0 for the full mapping table)
Clicking "Try this" pre-fills the chat input and auto-submits
After the first agent response, guided prompts collapse permanently

Migration Notes

Existing: Clerk sign-up flow is built. Dashboard with EmptyState is built.

New routes needed:

/onboarding (role selection)
/onboarding/teams (showcase)
/onboarding/select (team selection + plan)
/onboarding/connect (token fork)
/api/onboarding/role, /api/onboarding/team, /api/onboarding/validate-key

Existing EmptyState (chat-container.tsx):

The current EmptyState with 4 HintCards is the right structure for Step 6
Replace static text with personalized suggestions based on users.role and users.selectedTeams
Add "Try this" click handler that pre-fills and auto-submits

Middleware: Redirect non-onboarded users to /onboarding (new logic in middleware.ts)

5. Context Panel Interactions

When Does It Appear?

Viewport	Behavior
Desktop (1440px+)	Always visible in the right sidebar (320px)
Laptop (1024-1440px)	Collapsed by default; toggle with `Cmd+]` or click icon
Tablet (768-1024px)	Hidden; accessible as slide-over overlay
Mobile (<768px)	Hidden; accessible from bottom sheet

What It Shows

The context panel has 5 collapsible sections, each with a count badge:

+----------------------------------------------------------+

CONTEXT                                    [Cmd+] Hide]


+----------------------------------------------------------+



v RECENT DECISIONS                              (47)
DR-2026-015  API Pricing Model         2 hrs ago 
DR-2026-014  Auth Provider Choice      Yesterday 
DR-2026-013  Mobile-First Strategy     3 days 
[View all ->] 

> ACTIVE BETS                                   (5)
[collapsed -- click to expand]

> RECENT FEEDBACK                               (12)
[collapsed -- click to expand]

> LEARNINGS                                     (8)
[collapsed -- click to expand]

> SESSION ROI
4.2 hrs saved this session
12 operations
[View full ROI dashboard ->]


+----------------------------------------------------------+


v RECENT DECISIONS (47)
	DR-2026-015 API Pricing Model 2 hrs ago
	DR-2026-014 Auth Provider Choice Yesterday
	DR-2026-013 Mobile-First Strategy 3 days
	[View all ->]

> ACTIVE BETS (5)
[collapsed -- click to expand]

> RECENT FEEDBACK (12)
[collapsed -- click to expand]

> LEARNINGS (8)
[collapsed -- click to expand]

> SESSION ROI
4.2 hrs saved this session
12 operations
[View full ROI dashboard ->]

What Triggers Updates?

Event	Panel Update
New decision saved (`/decision-record` completes)	"Recent Decisions" section refreshes, new item pulses briefly
New bet created (`/strategic-bet` completes)	"Active Bets" section refreshes
Feedback captured (`/feedback-capture` completes)	"Recent Feedback" section refreshes, count badge increments
Agent completes a task	"Session ROI" updates in real-time
Context recall executed	Panel highlights the recalled items with a yellow flash

Interactive Elements

Click any item: Opens the full record in the main chat panel as a formatted preview
Click "View all": Opens the full context dashboard (/context route)
Right-click item: Context menu with "Recall in chat" (inserts @DR-2026-015 reference), "Open document", "Copy ID"
Drag item to chat: Inserts a reference to the context item in the chat input

Relationship to Chat

Selecting a context item can pre-fill the chat input:

Clicking a decision while composing: Inserts @DR-2026-015 reference
Clicking a bet: Inserts @SB-2026-003 reference
This enables patterns like: "Review @SB-2026-003 assumptions" -- the user clicks the bet in the panel and types around it

Collapsible Sections

Default: "Recent Decisions" expanded, all others collapsed
State persists across sessions (localStorage)
Each section header shows: section name + count badge + expand/collapse chevron
Sections animate open/closed (200ms ease-out)

Migration Notes

The context panel is not built yet. This is a new component specification.

New components:

ContextPanel.tsx -- Container with collapsible sections
ContextSection.tsx -- Reusable collapsible section with count badge
ContextItem.tsx -- Individual context entry (decision, bet, feedback, learning)
SessionRoi.tsx -- Running ROI total for the current session

Integration:

The right sidebar in the layout needs to render
The context panel fetches from /api/context/summary (new endpoint)
Real-time updates via the existing chat SSE connection (piggyback context updates on the streaming response)

6. Status Bar Interactions

Layout

The status bar sits at the bottom of the viewport, always visible, 32px height.

+----------------------------------------------------------+

14.2k tokens / $0.04 Connected Pro ~2.5 hrs


+----------------------------------------------------------+

Elements

Element	Position	Display	Behavior
Token count + cost	Left	`14.2k tokens / $0.04`	Updates after each message. Resets per session. Click to open detailed usage.
Connection status	Center-left	Colored dot + text	Green "Connected" / Yellow "Reconnecting..." / Red "Disconnected"
Plan badge	Center-right	`Pro` / `Team` / `Full Org`	Static badge. Click to open billing settings.
Session ROI	Right	`~2.5 hrs saved`	Updates after each agent/skill completion. Click to expand session breakdown.

Token Count Display Format

Under 1,000: Show exact number: "847 tokens / $0.01"
1,000-999,999: Show with "k": "14.2k tokens / $0.04"
Over 1,000,000: Show with "M": "1.2M tokens / $3.40"

Cost Display

BYOK users: Show estimated cost based on model pricing (Claude Opus = $15/M input, $75/M output; Sonnet = $3/$15; Haiku = $0.25/$1.25)
Managed billing users: Show actual cost that will appear on invoice
Cost is per-session, resets when the user starts a new conversation

Connection Status States

State	Indicator	Action
Connected	Green dot	None needed
Reconnecting	Yellow dot, pulsing	"Reconnecting..." text. Auto-retry 3x.
Disconnected	Red dot	"Disconnected. [Retry]" -- click to manually reconnect
Streaming	Blue dot, animated	"Streaming..." -- indicates active response

Plan Badge

Shows current plan: "Individual" / "Team" / "Full Org"
For trial users: "Trial (23 days left)" with countdown
Click opens /settings/billing
When trial ends in < 7 days, badge turns amber

Session ROI Running Total

Updates in real-time after each skill/agent completion
Format: ~X.X hrs saved (or ~XX min saved if under 1 hour)
Click expands a small popover showing per-operation breakdown:

+----------------------------------+

Session ROI Breakdown


/prd authentication   ~4 hrs
@ci competitor review ~1.5 hrs
/decision-record      ~30 min

Total: ~6 hrs in 8 min actual

+----------------------------------+

Session ROI Breakdown

/prd authentication ~4 hrs
@ci competitor review ~1.5 hrs
/decision-record ~30 min

Total: ~6 hrs in 8 min actual

States Summary

Status Bar State	What Changes
Idle	Token count static, connection green, ROI static
Streaming	Token count incrementing, connection blue "Streaming...", ROI static
Error	Connection red, error message in place of token count
Rate limited	Token count shows "Limit reached", plan badge pulses

Migration Notes

Existing: The v1 UX concepts show a status bar in the layout but it is not built as a component.

New component: StatusBar.tsx with sub-components:

TokenCounter.tsx
ConnectionIndicator.tsx
PlanBadge.tsx
SessionRoi.tsx (shared with Context Panel)

7. Updated Keyboard Shortcuts

Full Shortcut Table

Shortcut	Action	Context	New/Existing
`Cmd+K`	Open skill palette	Global	Existing
`Cmd+Shift+A`	Open agent selector	Global	Existing
`Cmd+]`	Toggle context panel (right sidebar)	Global	NEW
`Cmd+[`	Toggle file explorer (left sidebar)	Global	Existing
`Cmd+Enter`	Submit message	Chat input focused	Existing
`Shift+Enter`	New line in chat input	Chat input focused	Existing
`Cmd+/`	Focus chat input	Global	Existing
`Esc`	Close modal/panel/palette	Any overlay open	Existing
`Arrow Up/Down`	Navigate list items	Palette/selector open	Existing
`Arrow Left/Right`	Switch team tab	Agent selector open	NEW
`Tab`	Autocomplete selection	Palette/selector open	Existing
`Cmd+Shift+M`	Assemble team meeting	Global	NEW
`Cmd+Shift+S`	Pin/unpin skill	Skill palette open	NEW
`Cmd+1` through `Cmd+5`	Switch nav sections (Chat, Files, Context, Dashboard, Settings)	Global	Existing
`Cmd+Shift+P`	Open skill browser (full catalog)	Global	Existing
`Cmd+.`	Stop generation	During streaming	NEW

Keyboard Shortcut Help

Cmd+/ (or ? when chat input is not focused) opens a keyboard shortcut overlay. The overlay groups shortcuts by category: Navigation, Chat, Skill Palette, Agent Selector, Context.

Platform Adaptation

On Windows/Linux, Cmd is replaced with Ctrl. The app detects the platform and displays the correct modifier.

8. Responsive Behavior Updates

Breakpoint Strategy

Breakpoint	Name	Layout
1440px+	Desktop (large)	Three-panel: sidebar (240px) + chat (flex) + context (320px)
1024-1440px	Desktop (standard)	Two-panel: sidebar collapsed (56px) + chat (flex). Context panel collapsible.
768-1024px	Tablet	Chat only. Sidebar and context as slide-over overlays.
<768px	Mobile	Chat only. Bottom navigation. Minimal chrome.

Desktop (1440px+)

+--------+--------------------------------+-----------+



SIDE- MAIN CHAT AREA CONTEXT
BAR PANEL
240px flex-1 320px

Files [Conversation thread] Decisions
Agents Bets
[Chat input with /@ triggers] Feedback
ROI

+--------+--------------------------------+-----------+

Status bar: tokens connection plan ROI total


+------------------------------------------------------+


SIDE-	MAIN CHAT AREA	CONTEXT
BAR		PANEL
240px	flex-1	320px

Files	[Conversation thread]	Decisions
Agents		Bets
	[Chat input with /@ triggers]	Feedback
		ROI

All three panels visible simultaneously
Sidebar shows file explorer + team agent roster (with sub-groups)
Context panel auto-updates during conversations
Skill palette and agent selector appear as floating overlays above the chat input

Desktop Standard (1024-1440px)

+----+------------------------------------------+



RAIL MAIN CHAT AREA
56px 
flex-1

[Conversation thread]

[Chat input]


+----+------------------------------------------+

Status bar


+-----------------------------------------------+

Sidebar collapsed to icon rail (56px). Click icon to expand as overlay.
Context panel hidden by default. Toggle with Cmd+] or click icon in status bar.
When context panel opens, it overlays the chat area (does not shrink it).

Tablet (768-1024px)

+----------------------------------------------+

[Menu] Legionis   [Search] [Context] [Profile]


+----------------------------------------------+



MAIN CHAT AREA
full width

[Conversation thread]

[Chat input]


+----------------------------------------------+

Status bar (simplified)


+----------------------------------------------+


MAIN CHAT AREA
full width

[Conversation thread]

[Chat input]

Top bar with hamburger menu (opens sidebar as slide-over from left)
Context button (opens context panel as slide-over from right)
Skill palette: Opens as centered overlay modal
Agent selector: Opens as bottom sheet (swipe up for full height)
Meeting Mode: Agent sections stack vertically, each collapsible

Mobile (<768px)

+----------------------------------------------+

[<] Legionis          [Context] [Profile]


+----------------------------------------------+



CHAT AREA
full width
full height

[Conversation thread]


+----------------------------------------------+

[Chat input -- sticky]


+----------------------------------------------+

[Chat] [Files] [Context] [Settings]


+----------------------------------------------+

Bottom tab navigation replaces sidebar
Chat input is sticky above bottom navigation
Skill palette: Full-screen modal
Agent selector: Full-screen modal with team tabs as horizontal scroll
Meeting Mode: Accordion-style (one agent expanded at a time)
Context panel: Full-screen view via bottom nav "Context" tab
Status bar: Simplified to just connection indicator and plan badge (token count in settings)

Responsive Behavior for Key Components

Component	Desktop	Tablet	Mobile
Skill palette	Floating overlay (480px wide)	Centered overlay (90% width)	Full-screen modal
Agent selector	Floating overlay (520px wide)	Bottom sheet (80% height)	Full-screen modal
Context panel	Fixed right sidebar (320px)	Slide-over from right	Full-screen tab
Meeting Mode	Full-width within chat, all agents expanded	Full-width, all expanded	Accordion (one at a time)
Assemble dialog	Centered modal (600px)	Centered modal (90% width)	Full-screen modal
Onboarding	Centered card (640px max)	Centered card (90% width)	Full-width

9. Migration Notes Summary

Component-by-Component Impact Assessment

Component	File	Status	Changes Required
Skill Palette	`src/components/chat/skill-palette.tsx`	Exists	New category grouping, pinned skills, suggested section, larger max-height
Agent Selector	`src/components/chat/agent-selector.tsx`	Exists	Major rearchitecture: tab bar, sub-groups, gateway distinction, recent agents
Chat Input	`src/components/chat/chat-input.tsx`	Exists	Minor: update placeholder copy, add "Assemble meeting" button
Chat Container	`src/components/chat/chat-container.tsx`	Exists	Minor: personalized EmptyState based on user role/team
Meeting Mode	--	Not built	Full new component: MeetingMode.tsx + sub-components
Context Panel	--	Not built	Full new component: ContextPanel.tsx + sub-components
Status Bar	--	Not built	Full new component: StatusBar.tsx + sub-components
Onboarding Flow	`/sign-up` only	Partially built	4 new routes + middleware update + schema changes
Assemble Dialog	--	Not built	Full new component: AssembleTeamDialog.tsx

Priority Order for Implementation

Agent Selector v2 (P0) -- The current flat list becomes unusable at 81 agents. This blocks all multi-team work.

Skill Palette v2 (P0) -- New grouping is needed before adding extension team skills. Current V2V phase grouping confuses non-product users.

Onboarding Flow v2 (P0) -- First impression for every new user. Must reflect "AI workforce" positioning.

Meeting Mode (P1) -- Needed for cross-team meetings. Not blocking single-agent interactions.

Context Panel (P1) -- Important for power users. Desktop-only initially.

Status Bar (P2) -- Nice to have. Can launch without it.

Assemble Dialog (P2) -- Power user feature. Can use text-based assembly first ("Assemble @agent1, @agent2...").

API Changes Required

Endpoint	Change
`/api/skills`	Add `domains: string[]` field; add `v2vPhase` as secondary metadata
`/api/agents`	Add `subgroup`, `teamColor`, `isGateway` fields
`/api/context/summary`	New endpoint: Returns counts + recent items for context panel
`/api/onboarding/role`	New endpoint: POST to save role selection
`/api/onboarding/team`	New endpoint: POST to save team + create Stripe trial
`/api/onboarding/validate-key`	New endpoint: POST to validate API key
`/api/user/preferences`	New endpoint: GET/PUT for pinned skills, collapsed sections, etc.

Schema Changes

Add to users table:

role: text (from onboarding step 2)
selected_teams: text (JSON array of team keys)
onboarding_step: text (enum: signed_up, role_selected, teams_viewed, team_selected, token_connected, onboarded)
preferences: text (JSON: pinned skills, collapsed sections, theme)

Shared Constants (New File)

Create src/lib/constants/teams.ts:

export const TEAM_COLORS = {
  product: { border: '#3b82f6', tint: 'rgba(59,130,246,0.06)' },
  design: { border: '#ec4899', tint: 'rgba(236,72,153,0.06)' },
  architecture: { border: '#64748b', tint: 'rgba(100,116,139,0.06)' },
  marketing: { border: '#f97316', tint: 'rgba(249,115,22,0.06)' },
  finance: { border: '#10b981', tint: 'rgba(16,185,129,0.06)' },
  legal: { border: '#8b5cf6', tint: 'rgba(139,92,246,0.06)' },
  operations: { border: '#f59e0b', tint: 'rgba(245,158,11,0.06)' },
  executive: { border: '#6366f1', tint: 'rgba(99,102,241,0.06)' },
  corpdev: { border: '#14b8a6', tint: 'rgba(20,184,166,0.06)' },
  it: { border: '#06b6d4', tint: 'rgba(6,182,212,0.06)' },
} as const;

Appendix: Copy Alignment Checklist

Before implementing any user-facing text, verify against the positioning statement:

Old Copy (avoid)	New Copy (use)
"Product Org OS"	"Legionis" or "your AI workforce"
"14 agents"	"81 specialists" or "9 teams"
"Product organization" (as the only value prop)	"AI workforce" / "expert teams"
"Deploy your AI product org"	"Assemble your AI workforce"
"CLI power. Browser freedom."	"Expert teams. On demand."
"61 skills"	"80+ skills"
"Built for product leaders"	"Built for knowledge workers"
"Product Manager, VP Product..." (as the full roster)	Reference the team concept, not just Product agents

Document Owner: Interaction Designer (Design Team) Review: UX Lead + Dir PM before implementation Next Step: Component-level design specs for P0 items (Agent Selector v2, Skill Palette v2, Onboarding Flow v2)


PRODUCT (selected)

GATEWAYS
	Product Gateway [Prod]
	Routes to the right specialist for your request
	PLT (Leadership Team Session) [Prod]
	Multi-agent strategic discussion

LEADERSHIP
	CPO [Prod]
	Chief Product Officer
	VP Product [Prod]
	Vision, portfolio, pricing strategy

CORE TEAM
	PM	PMM	Dir PM	DirPMM	UX Lead	...

SPECIALISTS
	BizOps	BizDev	CI	Prod Ops	VR


[Legionis Logo]

Your AI workforce, on demand.

	Continue with Google
	Continue with Microsoft
	Continue with LinkedIn


	Sign up with email

Already have an account? Log in


Welcome to Legionis, [First Name].

What kind of work do you do?
We will assemble the right team for you.

	Product	Design	Engineering
	Management
	PM, PMM, VP	UX, UI,	Architect,
	Product	Research	Developer

	Marketing	Leadership	Operations

	Content, SEO,	CEO, COO,	Finance,
	Growth	VP, Director	Legal, IT

	Other / Just exploring

[Continue ->]


Your AI Workforce
81 specialists across 9 teams. Built to work together.

	ASSEMBLED FOR YOU

	Product Organization 13 agents, 61 skills
	PM, VP Product, BizOps, PMM, CI, UX Lead...
	"Write PRDs, build roadmaps, run strategy
	sessions with multiple expert perspectives"
	[->]

MORE TEAMS

	Design		Arch	Marketing	Finance
	7 agents		7 agents	16 agents	9 agents

	Legal		Ops	Executive	Corp Dev
	8 agents		8 agents	2 agents	5 agents

	IT Gov	+ All teams: Full Org ($25/mo)
	6 agents

[Continue ->]


One last step: Power up your team

Your AI workforce runs on Claude or GPT.
Choose how you want to connect.


	Bring Your Own Key	Let Us Handle It

	Best if you already	No API key needed.
	have an Anthropic or	We handle everything.
	OpenAI account.	Usage-based billing.

	Full cost control	Start immediately
	No markup	Pay as you go
	Use your volume	No setup needed
	discounts

	[Choose This ->]	[Choose This ->]

Not sure? You can change anytime in Settings.

[Skip for now -- I will set this up later]


You are all set. Your team is ready.

Here are 3 things to try right now:

	"Help me write a product requirements document"
	Uses: Product Manager + /prd skill
	Time: ~2 minutes [Try this ->]

	"Review my pricing strategy"
	Uses: BizOps + /pricing-strategy skill
	Time: ~3 minutes [Try this ->]

	"Help me decide between two options"
	Uses: @product gateway (Meeting Mode)
	Time: ~5 minutes [Try this ->]

Or type anything below.

[Message your AI workforce... (/ for skills, @ for
agents)]


RAIL	MAIN CHAT AREA
56px
	flex-1

	[Conversation thread]

	[Chat input]