05. Build a GitHub Copilot Clone

flowchart TD
    subgraph IDE["Editor Side (Extension)"]
        MONACO["Monaco / VS Code Editor"]
        EXT["Extension\nContext collector\nCache manager"]
        CONTEXT["Context Builder\nBefore + After cursor\nTypes + Imports"]
        LOCAL_MODEL["Local Model\nSmall, fast\nOffline completions"]
    end
    subgraph CLOUD["Cloud API"]
        COMPLETE["Completion Service"]
        CACHE["Completion Cache\nRedis"]
        ANALYTICS["Analytics\nAcceptance tracking"]
        LLM["LLM API\nGPT-4 / Claude"]
    end

    EXT --> CONTEXT
    CONTEXT --> LOCAL_MODEL
    CONTEXT --> COMPLETE
    COMPLETE --> CACHE
    COMPLETE --> LLM
    COMPLETE --> ANALYTICS

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

sequenceDiagram
    participant Dev as Developer
    participant Editor as VS Code
    participant Ext as Extension
    participant Cloud as Cloud API
    participant Model as AI Model

    Dev->>Editor: Type "def calculate_"
    Editor->>Ext: Text change event
    Ext->>Ext: Build context (200 tokens before, 50 after)
    Ext->>Ext: Check completion cache

    alt Cache hit
        Ext-->>Editor: Return cached completion
    else Cache miss
        Ext->>Cloud: Request completion + context
        Cloud->>Model: Generate completion
        Model-->>Cloud: "total_price(items, tax_rate):\n    return sum(item.price for item in items) * (1 + tax_rate)"
        Cloud-->>Ext: Return completion
        Cloud->>Cloud: Log to analytics
    end

    Ext-->>Editor: Show ghost text
    Editor-->>Dev: Display suggestion
    Dev->>Editor: Press Tab

    Editor->>Ext: Suggestion accepted
    Ext->>Cloud: Log acceptance

flowchart LR
    subgraph FULL["Full Context (1000+ tokens)"]
        SIGNATURE["Function signature\nAbove cursor"]
        IMPORTS["Recent imports\nLast 20 lines"]
        TYPES["Type definitions\nUsed in scope"]
        LOCAL["Local variables\nIn current scope"]
        DOCS["Docstrings\nFor used APIs"]
        AFTER["Code after cursor\nNext 50 tokens"]
    end

    subgraph OPTIMIZED["Optimized Context (200 tokens)"]
        SIG_SHORT["Function name only"]
        IMP_SHORT["Key imports"]
        TYPE_SHORT["Variables used\nin last 5 lines"]
        AFTER_SHORT["Code after cursor"]
    end

    FULL -->|"Extract most relevant"| OPTIMIZED

    style FULL fill:#3b82f6,color:#fff
    style OPTIMIZED fill:#22c55e,color:#fff

flowchart LR
    SUGGEST["Suggestion shown"] -->
    DECIDE{"Developer\naction"}
    DECIDE -->|"Accept (Tab)"| ACCEPT["✅ Log: Accepted\n+ Model, latency, position"]
    DECIDE -->|"Ignore (keep typing)"| IGNORE["❌ Log: Ignored\n+ Character count typed"]
    DECIDE -->|"Reject (Esc)"| REJECT["⛔ Log: Rejected\n+ Manual collection"]

    ACCEPT --> ANALYTICS["Analytics Pipeline\nClickHouse"]
    IGNORE --> ANALYTICS
    REJECT --> ANALYTICS

    ANALYTICS --> REPORT["Report\nAcceptance rate\nPer language\nPer model"]

    style ACCEPT fill:#22c55e,color:#fff
    style IGNORE fill:#f59e0b,color:#fff
    style REJECT fill:#ef4444,color:#fff
    style ANALYTICS fill:#3b82f6,color:#fff

flowchart TD
    subgraph EXTENSION["VS Code Extension"]
        PUBLISH["VS Code Marketplace\nAuto-publish CI/CD"]
    end
    subgraph CLOUD_SVC["Cloud Service"]
        LB["Load Balancer"]
        API_PODS["API Pods\nAutoscaling (5-50)"]
        CACHE["Redis Cluster\nCompletion cache"]
        DB["PostgreSQL\nAnalytics"]
        QUEUE["Queue\nAsync processing"]
    end

    EXTENSION -->|"HTTP/2 requests"| CLOUD_SVC
    API_PODS --> CACHE
    API_PODS --> DB
    API_PODS --> QUEUE

    style EXTENSION fill:#3b82f6,color:#fff
    style CLOUD_SVC fill:#22c55e,color:#fff