PersonaEngine

As a user creating a persona

I want to audition without leaving the main Forge page

So that the workflow feels continuous and fast

Description:
Redesign the UX so Audition is not a separate page but integrated:

Option A: Modal Overlay

• Click "Create Persona" → Modal opens with audition
• Backdrop blur effect
• Full workflow in modal (configure → audition → save)
• Escape or X to close (save draft first?)

Option B: Tab/Step Flow on Main Page

• Main page has steps: Configure → Audition → Save
• Same page, different sections revealed
• Progress indicator at top

Option C: Slide-out Panel

• Right-side panel slides out for audition
• Main content shows persona roster
• Keeps roster visible while auditioning

Recommendation: Option B (Tab Flow) for best UX:

1. Persona Config panel (left/top)
2. Chat/Audition panel (right/bottom)
3. Step indicator: Config → Audition → Commit

Tech Notes:

• Refactor Audition.vue into component
• Use Inertia router for page flow OR Vue conditional rendering
• Preserve state when switching views

Story Points: 5

Acceptance Criteria:

• Audition accessible from main Forge page
• No separate /audition URL required
• State preserved between config and audition
• Smooth transitions between steps