Collaborative Code Editor — Detailed

flowchart TB
  subgraph Roles
    HOST[Host IDE / workspace]
    GUEST[Guest IDE]
  end

  subgraph Signaling[Signaling & session]
    SIG[Signaling Service]
    ROOM[Session / room registry]
    INV[Invite tokens]
    AUTH[AuthN]
  end

  subgraph Realtime[Realtime channel]
    P2P[WebRTC peer-to-peer if possible]
    RELAY([Relay server fallback])
    OT[Operational transform of edits]
    CURS[Cursor + selection]
    PRES[Presence]
  end

  subgraph FileSync[File sync]
    DIFF[Diff / patch]
    OPEN_FILES[Open files state]
    SHARED_TERM[Shared terminal]
    DEBUG[Shared debug session]
  end

  subgraph Lang
    LSP[Language server proxy on host]
    DEFS[Go-to-definition, refs]
    HOVER[Hover docs]
  end

  subgraph Security
    SANDBOX[Restricted FS visibility]
    PERM[Read-only / write tiers]
    AUDIT[Audit log]
  end

  Roles --> Signaling --> Realtime
  Realtime --> FileSync
  Realtime --> Lang
  Security --- Realtime

    classDef client fill:#dbeafe,stroke:#1e40af,stroke-width:1px,color:#0f172a;
    classDef edge fill:#cffafe,stroke:#0e7490,stroke-width:1px,color:#0f172a;
    classDef service fill:#fef3c7,stroke:#92400e,stroke-width:1px,color:#0f172a;
    classDef datastore fill:#fee2e2,stroke:#991b1b,stroke-width:1px,color:#0f172a;
    classDef cache fill:#fed7aa,stroke:#9a3412,stroke-width:1px,color:#0f172a;
    classDef queue fill:#ede9fe,stroke:#5b21b6,stroke-width:1px,color:#0f172a;
    classDef compute fill:#d1fae5,stroke:#065f46,stroke-width:1px,color:#0f172a;
    classDef storage fill:#e5e7eb,stroke:#374151,stroke-width:1px,color:#0f172a;
    classDef external fill:#fce7f3,stroke:#9d174d,stroke-width:1px,color:#0f172a;
    classDef obs fill:#f3e8ff,stroke:#6b21a8,stroke-width:1px,color:#0f172a;
    class HOST,GUEST,SIG,ROOM,INV,AUTH,P2P,OT,CURS,PRES,DIFF,OPEN_FILES,SHARED_TERM,DEBUG,LSP,DEFS,HOVER,SANDBOX,PERM service;
    class RELAY compute;
    class AUDIT obs;

Glossary & fundamentals

Concepts referenced in this design. Each row links to its canonical page; the tag column shows whether it is a high-level (HLD) or low-level (LLD) concept.

Tag	Concept	What it is	Page
LLD	Async models	futures / async-await / coroutines / actors	async-models
LLD	Structural patterns	Adapter, Decorator, Facade, Proxy, Composite	structural-patterns