graph TB
    subgraph "Client Layer"
        A[Next.js App Router] --> B[Landing Page]
        A --> C[SkillShiftApp]
        C --> D[Prompt Input]
        C --> E[Conversation UI]
        C --> F[Generations Sidebar]
        C --> G[Clarifier Panel]
        C --> H[Markdown Editor]
    end

    subgraph "Authentication"
        I[Clerk Auth] --> A
        I --> J[User Identity]
    end

    subgraph "API Layer"
        K[Next.js API Routes]
        K --> L[/api/skills/generate]
        K --> M[/api/skills/session/start]
        K --> N[/api/skills/session/answer]
    end

    subgraph "Agent Orchestrator"
        O[Orchestrator] --> P[Planner Agent]
        O --> Q[Clarifier Agent]
        O --> R[Generator Agent]
        O --> S[Validator Agent]
        O --> T[Repair Agent]
        P --> U[Cerebras AI]
        Q --> U
        R --> U
        S --> U
        T --> U
    end

    subgraph "Data Layer"
        V[Convex Backend]
        V --> W[skillSessions Table]
        V --> X[skills Table]
        V --> Y[Queries]
        V --> Z[Mutations]
    end

    A --> I
    C --> K
    L --> O
    M --> V
    N --> V
    O --> V
    V --> J

    style A fill:#0070f3
    style O fill:#ff6b6b
    style V fill:#00d4aa
    style U fill:#9b59b6
    style I fill:#6366f1

sequenceDiagram
    participant User
    participant UI
    participant API
    participant Orchestrator
    participant Convex
    participant Cerebras

    User->>UI: Enter Intent
    UI->>API: POST /api/skills/session/start
    API->>Convex: Create Session
    Convex-->>API: Session ID
    API-->>UI: Session Created

    UI->>Orchestrator: Clarify Intent
    Orchestrator->>Cerebras: Clarifier Agent
    Cerebras-->>Orchestrator: Questions
    Orchestrator-->>UI: Display Questions

    User->>UI: Answer Questions
    UI->>API: POST /api/skills/session/answer
    API->>Convex: Append Q&A
    UI->>Orchestrator: Generate Skills

    Orchestrator->>Cerebras: Planner Agent
    Cerebras-->>Orchestrator: Skill Plan
    Orchestrator->>Cerebras: Generator Agent
    Cerebras-->>Orchestrator: Skill Markdown
    Orchestrator->>Cerebras: Validator Agent
    Cerebras-->>Orchestrator: Validation Result

    alt Validation Failed
        Orchestrator->>Cerebras: Repair Agent
        Cerebras-->>Orchestrator: Repaired Skill
    end

    Orchestrator-->>UI: Stream Results
    UI->>Convex: Save Skill
    Convex-->>UI: Skill Saved

graph LR
    A[SkillShiftApp] --> B[GenerationsSidebar]
    A --> C[Conversation]
    A --> D[PromptInput]
    A --> E[ClarifierPanel]
    
    C --> F[Message Components]
    C --> G[CodeBlock]
    C --> H[Loader]
    
    D --> I[Textarea]
    D --> J[Submit Button]
    
    E --> K[Question List]
    E --> L[Answer Input]
    
    B --> M[Skill List]
    B --> N[Session History]