04. Build a Cursor Clone

flowchart TD
    subgraph EDITOR["Editor (Electron + Web)"]
        MONACO["Monaco Editor\nCode editing"]
        UI["Custom UI\nChat, completions, menus"]
        FS["Virtual File System"]
        GIT["Git Integration"]
    end
    subgraph INDEX["Local Indexing Engine"]
        WATCHER["File Watcher\nChokidar"]
        PARSER["AST Parser\nTree-sitter"]
        EMBEDDING["Embedding Generator\nLocal"]
        INDEX_STORE["Vector Index\nLanceDB"]
        SYMBOLS["Symbol Table\nFunctions, classes, imports"]
    end
    subgraph AI["AI Services"]
        CHAT["AI Chat\nCode context builder"]
        COMPLETE["Completion Engine\nReal-time suggestions"]
        EDIT["AI Edit\nNatural language editing"]
        DOCS["Doc Generator"]
        COMMIT["Commit Message Gen"]
    end
    subgraph CLOUD["Cloud Services"]
        SYNC["Sync Service"]
        SHARE["Share / Publish"]
        AUTH["Auth Service"]
    end

    MONACO --> UI
    MONACO --> INDEX
    INDEX --> AI
    AI --> MONACO
    AI --> CLOUD

    style EDITOR fill:#3b82f6,color:#fff
    style INDEX fill:#22c55e,color:#fff
    style AI fill:#8b5cf6,color:#fff
    style CLOUD fill:#f59e0b,color:#fff

sequenceDiagram
    participant Editor as Editor
    participant Watcher as File Watcher
    participant Parser as AST Parser
    participant Index as Index Store
    participant AI as AI Service

    Editor->>Watcher: Open project (1000 files)
    Watcher->>Parser: Parse all files
    Parser->>Parser: Extract AST for each file
    Note over Parser: Functions, classes, imports, exports, types

    Parser->>Index: Store symbols + relations
    Parser->>Index: Generate file-level summaries

    Parser->>AI: Generate code embeddings
    AI->>Index: Store embeddings per function

    Index->>Index: Build search index
    Index-->>Editor: Indexing complete

    Note over Editor: Ready for AI queries

    Editor->>Index: "Find function that handles auth"
    Index->>Index: Semantic search
    Index-->>Editor: Top 5 relevant functions with file paths

flowchart TD
    QUERY["User Question\n'How does auth work?'"] --> CONTEXT["Build Context"]

    CONTEXT --> CURRENT["Current File\nFull content"]
    CONTEXT --> RELEVANT["Relevant Files\nSemantic search"]
    CONTEXT --> SYMBOLS["Symbol Definitions\nImport graph"]
    CONTEXT --> SELECTION["Selected Code\nIf any"]
    CONTEXT --> HISTORY["Chat History\nPrevious turns"]

    CONTEXT --> PROMPT["Build Prompt\nSystem + Context + Query"]
    PROMPT --> LLM["LLM Response\nStreaming"]
    LLM --> DISPLAY["Display in Chat Panel\nWith file links"]

    style CONTEXT fill:#3b82f6,color:#fff
    style PROMPT fill:#f59e0b,color:#fff
    style LLM fill:#22c55e,color:#fff

async function buildContext(question, state) {
  const context = {
    currentFile: {
      path: state.activeFile,
      content: fs.readFileSync(state.activeFile),
      language: detectLanguage(state.activeFile),
    },
    relevantFiles: await semanticSearch(question, 5),
    selectedCode: state.selection || null,
    chatHistory: state.messages.slice(-10),
  };

  return context;
}

sequenceDiagram
    participant Dev as Developer
    participant Editor as Editor
    participant Cache as Completion Cache
    participant Model as AI Model

    Dev->>Editor: Type "function getUser"
    Editor->>Editor: Detect completion trigger
    Editor->>Editor: Extract context (before, after, file type)
    Editor->>Cache: Check cache for similar context
    Cache-->>Editor: Cache miss

    Editor->>Model: Request completion
    Note over Model: Context: imports, function above, types
    Model-->>Editor: "ByEmail(email: string)"
    Editor-->>Dev: Show ghost text suggestion
    Dev->>Editor: Press Tab
    Editor->>Editor: Accept completion
    Editor->>Cache: Store completion

flowchart LR
    USER["User types\nCmd+K: 'Add error handling'"] --> ANALYSIS["Analyze Selection\nCurrent code context"]
    ANALYSIS --> PLAN["Plan Edit\nWhat needs to change"]
    PLAN --> DIFF["Generate Diff\nLLM produces patch"]
    DIFF --> REVIEW["Preview Diff\nUser reviews changes"]
    REVIEW -->|"Accept"| APPLY["Apply Changes\nTo file"]
    REVIEW -->|"Modify"| REFINE["Refine Prompt\nTry again"]
    REVIEW -->|"Reject"| DISCARD["Discard Changes"]

    style ANALYSIS fill:#3b82f6,color:#fff
    style DIFF fill:#8b5cf6,color:#fff
    style APPLY fill:#22c55e,color:#fff
    style DISCARD fill:#ef4444,color:#fff

flowchart TD
    subgraph DESKTOP["Desktop App (Electron)"]
        EDITOR["Monaco Editor"]
        LOCAL_INDEX["Local Index\nLanceDB + SQLite"]
        LOCAL_AI["Local AI\nSmall models (optional)"]
    end
    subgraph CLOUD["Cloud Backend"]
        API["API Server"]
        AUTH["Auth"]
        SYNC["Sync Service"]
        VECTOR["Vector DB\nQdrant"]
        AI_GW["AI Gateway\nOpenAI/Anthropic"]
    end

    DESKTOP -->|"API calls"| CLOUD
    DESKTOP -->|"Sync on save"| SYNC

    style DESKTOP fill:#3b82f6,color:#fff
    style CLOUD fill:#22c55e,color:#fff