# 🧭 Navigation Structure - Product-Centric Workflow

**Last Updated:** November 19, 2025

## Overview

The navigation is structured around a **phased workflow** that guides solo founders and small teams from idea to launch.

---

## 📱 Main Navigation (Left Rail)

### **Always Visible**
```
💬 AI Chat         - AI interview assistant
🏠 Home            - Project dashboard & overview
📖 Knowledge       - Context (docs, repos, chats)
```

### **Phase 1: DEFINE** ✨
```
🎯 Vision          - Product strategy & vision
🎨 Design          - UI/UX screens & flows
📣 Marketing       - Messaging & launch strategy
```

### **Phase 2: BUILD** 🔨
```
📋 Build Plan      - MVP scope, backlog, milestones
💻 Development     - Codebase, architecture, deployment
```

---

## 📄 Page Structures

### 1. **Vision** (`/vision`)
**Purpose:** Define what you're building and why

**Sidebar Navigation:**
- Product Overview
- Problems We Solve
- Target Users
- Success Metrics
- Competitive Landscape

**Content:**
- Product name, one-liner, vision statement
- Problem cards with descriptions
- User persona cards
- Key metrics with targets
- Competitor analysis

**Key Actions:**
- Edit Vision
- Add Problem
- Add User Type
- Add Competitor

---

### 2. **Design** (`/design`)
**Purpose:** Create and manage UI/UX

**Sidebar Navigation:**
- Core Screens (tree view)
- User Flows (auth, onboarding)
- Style Guide
- Brand Assets

**Content:**
- Tree view of product screens
- AI-suggested screens
- v0 integration for screen generation
- Version history
- Comments & feedback

**Key Actions:**
- Generate Screen
- Connect GitHub
- Sync Repository
- Create Flow

**Individual Screen View:** `/design/[pageSlug]`
- Live preview
- v0-style chat interface
- Design Mode (click to target elements)
- Version history
- Push to Cursor

---

### 3. **Marketing** (`/marketing`)
**Purpose:** Define messaging and launch strategy

**Sidebar Navigation:**
- Value Proposition
- Messaging Framework
- Website Copy
- Launch Strategy
- Target Channels

**Content:**
- Headline & subheadline
- Key benefits
- Primary messaging
- Positioning statements
- Website copy sections (hero, features, social proof)
- Launch timeline
- Target channel cards

**Key Actions:**
- Generate with AI
- Edit Content
- Add Channel

---

### 4. **Build Plan** (`/build-plan`)
**Purpose:** Track what needs to be built

**Sidebar Navigation:**
- MVP Scope
- Backlog
- Milestones
- Progress

**Content:**
- Progress overview (completed, in progress, to do)
- MVP feature list with status
- Backlog items with priority
- Milestone cards (alpha, beta, public launch)

**Key Actions:**
- Generate Tasks (AI)
- Add Feature
- Add to Backlog
- Move to MVP

**Features:**
- Status tracking (completed, in progress, todo)
- Priority levels (high, medium, low)
- Progress percentage
- Milestone dates

---

### 5. **Development** (`/code`)
**Purpose:** Browse and manage codebase

**Current Implementation:**
- GitHub integration
- File tree browser
- File content viewer with syntax highlighting
- Search functionality

**Future Sidebar Navigation:**
- Browse Code
- Architecture
- API Documentation
- Deployment

---

### 6. **Home/Overview** (`/overview`)
**Purpose:** Project dashboard

**Content:**
- Project header (name, vision, workspace)
- Session linking (if unassociated sessions found)
- Stats cards (sessions, time, cost, tokens)
- Quick action cards
- Getting started guide

---

### 7. **Knowledge** (`/context`)
**Purpose:** Manage all project context

**Content:**
- Upload documents
- Connect GitHub repos
- Import AI chat transcripts
- View summaries
- Knowledge items list

---

## 🎨 Design System

All pages use the **PageTemplate** system for consistency:

### PageTemplate Props
```typescript
{
  sidebar?: {
    title: string;
    description?: string;
    items: NavItem[];
    footer?: ReactNode;
  };
  hero?: {
    icon?: LucideIcon;
    title: string;
    description?: string;
    actions?: ActionButton[];
  };
  containerWidth?: "default" | "wide" | "full";
}
```

### Utility Components
- **PageSection** - Organized content sections
- **PageCard** - Styled cards with hover effects
- **PageGrid** - Responsive grids (1-4 columns)
- **PageEmptyState** - Empty state displays

---

## 🔄 User Flow

### Solo Founder Journey
1. **Start:** AI Chat → Define vision through conversation
2. **Vision Phase:** Review and refine extracted insights
3. **Design Phase:** Generate core screens with v0
4. **Marketing Phase:** Craft messaging and launch plan
5. **Build Phase:** Create MVP scope and track progress
6. **Development Phase:** Browse code, manage architecture

### Collaboration Flow
- **Founder:** Manages Vision, Marketing, Build Plan
- **Designer:** Works in Design section
- **Developer:** Works in Development section
- **All:** Access Knowledge Base and Home dashboard

---

## 🎯 Key Features

### Phase Separation
- Clear visual distinction between DEFINE and BUILD phases
- Separators and labels in navigation
- Guided workflow from strategy to execution

### Consistency
- All pages use PageTemplate
- Uniform sidebar structure
- Consistent action buttons
- Standard icon usage (Lucide)

### Scalability
- Easy to add new pages
- Reusable components
- Type-safe navigation
- Responsive design

---

## 🚀 Next Steps

### Immediate
- [ ] Wire Vision page to extraction data
- [ ] Wire Marketing page to AI generation
- [ ] Connect Build Plan to actual task management
- [ ] Add Architecture subsection to Development

### Future
- [ ] Real-time collaboration indicators
- [ ] Phase completion badges
- [ ] Animated transitions between phases
- [ ] Progress tracking across all phases
- [ ] Team member assignments
- [ ] Comments & feedback system

---

## 📊 Navigation Stats

- **Total Top-Level Items:** 7 (Chat, Home, Knowledge + 2 phases)
- **Phase 1 (Define):** 3 items (Vision, Design, Marketing)
- **Phase 2 (Build):** 2 items (Build Plan, Development)
- **Total Pages Created:** 5 new pages + 2 existing

---

## 🎨 Visual Hierarchy

```
Left Rail (60px wide)
├── Logo
├── AI Chat (always visible)
├── Home (when project selected)
├── Knowledge (when project selected)
├── ───────────────── [DEFINE]
├── Vision
├── Design
├── Marketing
├── ───────────────── [BUILD]
├── Build Plan
├── Development
└── Settings (bottom)
```

---

## 💡 Design Principles

1. **Product-First:** Strategy before execution
2. **Phase-Based:** Clear workflow progression
3. **Collaborative:** Each role has their space
4. **AI-Enhanced:** AI assistance throughout
5. **Consistent:** Unified design language
6. **Scalable:** Easy to extend

---

**For implementation details, see:**
- `components/layout/page-template.tsx` - Reusable page layout
- `components/layout/PAGE_TEMPLATE_GUIDE.md` - Usage guide
- `components/layout/left-rail.tsx` - Main navigation