editor variations
Editor Layout Variations
Based on design decision: Split-pane on same page
Option A: Equal Split (50/50)
┌──────────────────────────────────────────────────────────────────────────────┐│ Discovery Agent [Cancel] [Save] │├─────────────────────────────────┬────────────────────────────────────────────┤│ MARKDOWN EDITOR │ LIVE PREVIEW ││ │ ││ --- │ ┌─────────────────────────────────────────┐││ name: discovery-agent │ │ name: discovery-agent │││ description: "Explores..." │ │ description: Explores codebases │││ tools: Write, Read, Bash │ │ tools: Write, Read, Bash │││ --- │ └─────────────────────────────────────────┘││ │ ││ # Discovery Agent │ Discovery Agent ││ │ ═══════════════ ││ This agent explores codebases │ ││ to find patterns and... │ This agent explores codebases to find ││ │ patterns and... ││ ## Features │ ││ │ Features ││ - Fast file search │ ──────── ││ - Pattern matching │ • Fast file search ││ - Code analysis │ • Pattern matching ││ │ • Code analysis │├─────────────────────────────────┴────────────────────────────────────────────┤│ ✓ Saved 30s ago [▼ Metadata] │└──────────────────────────────────────────────────────────────────────────────┘Pros: Equal space for editing and preview, balanced view Cons: Less editing space for long lines
Option B: Editor-Heavy (60/40)
┌──────────────────────────────────────────────────────────────────────────────┐│ Discovery Agent [Cancel] [Save] │├───────────────────────────────────────┬──────────────────────────────────────┤│ MARKDOWN EDITOR │ PREVIEW ││ │ ││ --- │ Discovery Agent ││ name: discovery-agent │ ═══════════════ ││ description: "Explores codebases..." │ ││ tools: Write, Read, Bash │ This agent explores ││ model: claude-haiku-4-5-20251001 │ codebases to find ││ --- │ patterns and... ││ │ ││ # Discovery Agent │ Features ││ │ ──────── ││ This agent explores codebases to find │ • Fast file search ││ patterns and understand architecture. │ • Pattern matching ││ │ • Code analysis ││ ## Features │ ││ │ ││ - Fast file search │ ││ - Pattern matching │ ││ - Code analysis │ │├───────────────────────────────────────┴──────────────────────────────────────┤│ ✓ Saved 30s ago [▼ Metadata] │└──────────────────────────────────────────────────────────────────────────────┘Pros: More room for editing, accommodates longer lines Cons: Preview gets cramped
Option C: Resizable Divider
┌──────────────────────────────────────────────────────────────────────────────┐│ Discovery Agent [Cancel] [Save] │├─────────────────────────────────┬┬───────────────────────────────────────────┤│ MARKDOWN EDITOR ││ LIVE PREVIEW ││ ││ ││ --- ││ Discovery Agent ││ name: discovery-agent ││ ═══════════════ ││ description: "Explores..." ││ ││ --- ││ This agent explores codebases ││ ││ to find patterns... ││ # Discovery Agent ││ ││ │◄► ││ This agent explores codebases ││ Features ││ to find patterns and... ││ ──────── ││ ││ • Fast file search ││ ││ • Pattern matching │├─────────────────────────────────┴┴───────────────────────────────────────────┤│ ✓ Saved 30s ago ◄► Drag to resize [▼ Metadata] │└──────────────────────────────────────────────────────────────────────────────┘Pros: User can adjust to preference, flexible Cons: More complex to implement, state to persist
Option D: Tabbed Preview (Mobile-Friendly Fallback)
┌──────────────────────────────────────────────────────────────────────────────┐│ Discovery Agent [Cancel] [Save] │├──────────────────────────────────────────────────────────────────────────────┤│ [Edit ✎] [Preview 👁] │├──────────────────────────────────────────────────────────────────────────────┤│ ││ --- ││ name: discovery-agent ││ description: "Explores codebases to find patterns..." ││ tools: Write, Read, Bash ││ model: claude-haiku-4-5-20251001 ││ --- ││ ││ # Discovery Agent ││ ││ This agent explores codebases to find patterns and understand architecture. ││ ││ ## Features ││ ││ - Fast file search ││ - Pattern matching ││ - Code analysis ││ │├──────────────────────────────────────────────────────────────────────────────┤│ ✓ Saved 30s ago [▼ Metadata] │└──────────────────────────────────────────────────────────────────────────────┘Pros: Full width for editing, clean UI, works on tablet Cons: No simultaneous preview, requires tab switching
Option E: Floating Preview Panel
┌──────────────────────────────────────────────────────────────────────────────┐│ Discovery Agent [Preview ◐] [Cancel] [Save] │├──────────────────────────────────────────────────────────────────────────────┤│ ││ --- ││ name: discovery-agent ││ description: "Explores codebases to find patterns..." ││ tools: Write, Read, Bash ┌──────────────────────────────┐ ││ model: claude-haiku-4-5-20251001 │ PREVIEW [×] │ ││ --- ├──────────────────────────────┤ ││ │ Discovery Agent │ ││ # Discovery Agent │ ═══════════════ │ ││ │ │ ││ This agent explores codebases to │ This agent explores │ ││ find patterns and understand │ codebases to find... │ ││ architecture. │ │ ││ │ Features │ ││ ## Features │ • Fast file search │ ││ │ • Pattern matching │ ││ - Fast file search └──────────────────────────────┘ ││ - Pattern matching │├──────────────────────────────────────────────────────────────────────────────┤│ ✓ Saved 30s ago [▼ Metadata] │└──────────────────────────────────────────────────────────────────────────────┘Pros: Full-width editor, preview on-demand, draggable panel Cons: Overlaps content, more complex interaction
Recommendation
Option C: Resizable Divider starting at 50/50
- Gives users control over their workspace
- Satisfies both content-heavy editors and preview-focused reviewers
- Can remember preference in localStorage
- Falls back to tabbed view on tablet/narrow screens
If resizable is too complex for v1, go with Option A (50/50) as the simplest approach.