<svg width="100%" viewBox="0 0 840 340" role="img" xmlns="http://www.w3.org/2000/svg">
  <title>WhatsApp — one shared Twilio number, many family agents</title>
  <desc>sudo-api verifies the Twilio webhook signature, looks up the sender phone in public.family_members, and forwards the verified payload to the owning account's hermes plugin; replies go through Twilio REST.</desc>
  <style>
    text{font-family:"Anthropic Sans",-apple-system,system-ui,"Segoe UI",sans-serif}
    .t{font-size:14px;font-weight:500;text-anchor:middle;dominant-baseline:central}
    .s{font-size:12px;text-anchor:middle;dominant-baseline:central}
    .lbl{font-size:11px;fill:#9c9a92;text-anchor:middle}
    rect{stroke-width:.5}
    .neutral{fill:#444441;stroke:#b4b2a9} .nt{fill:#d3d1c7} .ns{fill:#b4b2a9}
    .blue{fill:#1f3b7a;stroke:#8aaef0}    .bt{fill:#cfdcf4} .bs{fill:#8aaef0}
    .orange{fill:#712b13;stroke:#f0997b}  .ot{fill:#f5c4b3} .os{fill:#f0997b}
    .purple{fill:#3c3489;stroke:#afa9ec}  .pt{fill:#ceccf6} .ps{fill:#afa9ec}
    .teal{fill:#085041;stroke:#5dcaa5}    .tt{fill:#9fe1cb} .ts{fill:#5dcaa5}
    .arrow{fill:none;stroke:#9c9a92;stroke-width:1.5}
    .arrow-ok{fill:none;stroke:#1d9e75;stroke-width:1.5}
  </style>
  <defs>
    <marker id="a" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <rect class="neutral" x="20"  y="60"  width="160" height="56" rx="8"/>
  <text class="t nt" x="100" y="82">Phone A</text>
  <text class="s ns" x="100" y="100">family A · member</text>

  <rect class="neutral" x="20"  y="140" width="160" height="56" rx="8"/>
  <text class="t nt" x="100" y="162">Phone B</text>
  <text class="s ns" x="100" y="180">family B · member</text>

  <rect class="neutral" x="20"  y="220" width="160" height="56" rx="8"/>
  <text class="t nt" x="100" y="242">Phone C</text>
  <text class="s ns" x="100" y="260">family A · another</text>

  <rect class="purple" x="220" y="120" width="180" height="80" rx="8"/>
  <text class="t pt" x="310" y="146">Twilio</text>
  <text class="s ps" x="310" y="168">one shared sender number</text>
  <text class="s ps" x="310" y="186">→ /whatsapp/inbound</text>

  <rect class="blue" x="430" y="80" width="200" height="160" rx="8"/>
  <text class="t bt" x="530" y="106">sudo-api</text>
  <text class="s bs" x="530" y="130">1. verify X-Twilio-Signature</text>
  <text class="s bs" x="530" y="150">2. look up sender phone</text>
  <text class="s bs" x="530" y="170">    in family_members</text>
  <text class="s bs" x="530" y="194">3. forward to owning account</text>
  <text class="s bs" x="530" y="214">    POST :8651/inbound</text>

  <rect class="teal" x="660" y="40" width="160" height="60" rx="8"/>
  <text class="t tt" x="740" y="64">family_members</text>
  <text class="s ts" x="740" y="84">phone → user_id</text>

  <rect class="orange" x="660" y="120" width="160" height="60" rx="8"/>
  <text class="t ot" x="740" y="144">hermes (family A)</text>
  <text class="s os" x="740" y="162">twilio_whatsapp :8651</text>

  <rect class="orange" x="660" y="200" width="160" height="60" rx="8"/>
  <text class="t ot" x="740" y="224">hermes (family B)</text>
  <text class="s os" x="740" y="242">twilio_whatsapp :8651</text>

  <path class="arrow" d="M 180  88 L 218 138" marker-end="url(#a)"/>
  <path class="arrow" d="M 180 168 L 218 168" marker-end="url(#a)"/>
  <path class="arrow" d="M 180 248 L 218 198" marker-end="url(#a)"/>
  <path class="arrow" d="M 400 160 L 428 160" marker-end="url(#a)"/>
  <path class="arrow" d="M 630 130 L 658  70" marker-end="url(#a)" stroke-dasharray="4 3"/>
  <text class="lbl"   x="640" y="108">lookup</text>
  <path class="arrow" d="M 630 150 L 658 150" marker-end="url(#a)"/>
  <path class="arrow" d="M 630 230 L 658 230" marker-end="url(#a)"/>

  <path class="arrow-ok" d="M 660 158 C 600 158, 540 280, 310 280 L 220 200" marker-end="url(#a)" stroke-dasharray="4 3"/>
  <text class="lbl" x="440" y="298">reply via Twilio Messages REST</text>
</svg>
