<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480" width="100%" height="100%">
  <defs>
    <style>
      .bg { fill: #fbfbf9; }
      .card { fill: #ffffff; stroke: #e6e6df; stroke-width: 1.5; rx: 4px; }
      .card-accent { fill: #fef3c7; stroke: #b45309; stroke-width: 1.5; rx: 4px; }
      .card-teal { fill: #ccfbf1; stroke: #0f766e; stroke-width: 1.5; rx: 4px; }
      .title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800; font-size: 13px; fill: #111315; text-transform: uppercase; letter-spacing: 0.05em; }
      .label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11.5px; fill: #3b3e44; }
      .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 10.5px; fill: #6c727d; }
      .badge-text { font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 700; }
      .solid-line { stroke: #111315; stroke-width: 1.5; }
      .arrow { fill: #111315; }
    </style>
    <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 1 L 8 5 L 0 9 z" class="arrow" />
    </marker>
  </defs>

  <rect width="800" height="480" class="bg" />

  <!-- Header -->
  <text x="40" y="38" class="title" font-size="15">ENTERPRISE CRM MODEL CONTEXT PROTOCOL (MCP) RUNTIME</text>
  <text x="40" y="58" class="mono">Client-Host-Server JSON-RPC Exchange with OAuth 2.0 PKCE Scoping</text>

  <!-- Step 1: AI Agent Host (Claude / Cursor / Agent) -->
  <rect x="40" y="90" width="200" height="340" class="card" />
  <rect x="40" y="90" width="200" height="30" fill="#111315" />
  <text x="52" y="110" class="title" fill="#ffffff">1. AI CLIENT / HOST</text>

  <text x="55" y="145" class="title">LLM Agent Runtime</text>
  <text x="55" y="165" class="label">Claude / Custom Agent</text>

  <rect x="55" y="185" width="170" height="110" class="card-accent" />
  <text x="65" y="208" class="badge-text" fill="#b45309">TOOL SELECTION LOOP:</text>
  <text x="65" y="228" class="mono">1. User asks: "Find VP"</text>
  <text x="65" y="244" class="mono">2. Agent checks schema</text>
  <text x="65" y="260" class="mono">3. Generates JSON-RPC</text>
  <text x="65" y="276" class="mono">4. Evaluates response</text>

  <rect x="55" y="310" width="170" height="105" class="card" />
  <text x="65" y="332" class="title" font-size="11">Context Window</text>
  <text x="65" y="350" class="mono">Contact: ~450 tokens</text>
  <text x="65" y="366" class="mono">Company + Deals:</text>
  <text x="65" y="382" class="mono" fill="#b45309">~3,800-5,200 tokens</text>
  <text x="65" y="400" class="badge-text" fill="#0f766e">REQUIRES FIELD PROJECTION</text>

  <!-- Flow Arrows -->
  <line x1="240" y1="180" x2="295" y2="180" class="solid-line" marker-end="url(#arrow)" />
  <text x="245" y="170" class="mono">Tool Call (JSON-RPC)</text>

  <line x1="295" y1="220" x2="240" y2="220" class="solid-line" marker-end="url(#arrow)" />
  <text x="248" y="240" class="mono">Context Payload</text>

  <!-- Step 2: Remote CRM MCP Server (HubSpot / Salesforce) -->
  <rect x="300" y="90" width="240" height="340" class="card" />
  <rect x="300" y="90" width="240" height="30" fill="#0f766e" />
  <text x="312" y="110" class="title" fill="#ffffff">2. REMOTE MCP SERVER</text>

  <text x="315" y="145" class="title">mcp.hubspot.com</text>
  <text x="315" y="165" class="label">Hosted Gateway / Standard API</text>

  <rect x="315" y="185" width="210" height="110" class="card-teal" />
  <text x="325" y="208" class="badge-text" fill="#0f766e">OAUTH / PKCE BOUNDARY:</text>
  <text x="325" y="228" class="mono">✓ crm.objects.contacts.read</text>
  <text x="325" y="244" class="mono">✓ crm.objects.deals.read</text>
  <text x="325" y="260" class="mono">✕ crm.objects.deals.write</text>
  <text x="325" y="278" class="badge-text" fill="#b91c1c">(Human Approval Gate)</text>

  <rect x="315" y="310" width="210" height="105" class="card" />
  <text x="325" y="332" class="title" font-size="11">Execution Engine</text>
  <text x="325" y="352" class="label">Stateless JSON-RPC protocol.</text>
  <text x="325" y="370" class="label">Translates MCP primitives into</text>
  <text x="325" y="388" class="label">standard REST API calls.</text>

  <!-- Flow to Database -->
  <line x1="540" y1="200" x2="585" y2="200" class="solid-line" marker-end="url(#arrow)" />
  <line x1="585" y1="240" x2="540" y2="240" class="solid-line" marker-end="url(#arrow)" />

  <!-- Step 3: Enterprise Database & System of Record -->
  <rect x="590" y="90" width="170" height="340" class="card" />
  <rect x="590" y="90" width="170" height="30" fill="#111315" />
  <text x="602" y="110" class="title" fill="#ffffff">3. SYSTEM OF RECORD</text>

  <text x="605" y="145" class="title">Enterprise CRM</text>
  <text x="605" y="165" class="label">Database Tables &amp; Logs</text>

  <rect x="605" y="185" width="140" height="60" class="card" />
  <text x="615" y="210" class="title" font-size="11">Contacts</text>
  <text x="615" y="228" class="mono">150+ properties</text>

  <rect x="605" y="255" width="140" height="60" class="card" />
  <text x="615" y="280" class="title" font-size="11">Deals &amp; Quotes</text>
  <text x="615" y="298" class="mono">Pipeline state &amp; MRR</text>

  <rect x="605" y="325" width="140" height="90" class="card" />
  <text x="615" y="348" class="title" font-size="11">Audit Trails</text>
  <text x="615" y="368" class="mono">Activity Timeline</text>
  <text x="615" y="386" class="badge-text" fill="#0f766e">GOVERNED STATE</text>
</svg>
