<svg width="100%" viewBox="0 0 720 580" role="img" xmlns="http://www.w3.org/2000/svg">
  <title>A reactive turn — the same shape across all three surfaces</title>
  <desc>User → surface entry → sudo-api or voice-bridge → hermes → OpenRouter, then the reply flows back out the same path.</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}
    .stp{font-size:12px;fill:#c2c0b6}
    .lbl{font-size:11px;fill:#9c9a92}
    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}
    .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>

  <text class="stp" x="30" y="74">1</text>
  <text class="stp" x="30" y="174">2</text>
  <text class="stp" x="30" y="274">3</text>
  <text class="stp" x="30" y="374">4</text>
  <text class="stp" x="30" y="474">5</text>
  <text class="stp" x="30" y="554">6</text>

  <rect class="neutral" x="220" y="50" width="280" height="60" rx="8"/>
  <text class="t nt" x="360" y="74">User</text>
  <text class="s ns" x="360" y="94">speaks · types · messages</text>

  <rect class="neutral" x="220" y="150" width="280" height="60" rx="8"/>
  <text class="t nt" x="360" y="174">Surface entry</text>
  <text class="s ns" x="360" y="194">LiveKit room · /chat/turn · twilio webhook</text>

  <rect class="blue" x="220" y="250" width="280" height="60" rx="8"/>
  <text class="t bt" x="360" y="274">sudo-api  /  voice-bridge</text>
  <text class="s bs" x="360" y="294">forward with per-user bearer</text>

  <rect class="orange" x="220" y="350" width="280" height="60" rx="8"/>
  <text class="t ot" x="360" y="374">hermes (your agent)</text>
  <text class="s os" x="360" y="394">thinks · streams reply</text>

  <rect class="purple" x="220" y="450" width="280" height="44" rx="8"/>
  <text class="t pt" x="360" y="472">OpenRouter (LLM)</text>

  <rect class="neutral" x="220" y="530" width="280" height="44" rx="8"/>
  <text class="t nt" x="360" y="552">User receives speech · SSE · whatsapp</text>

  <path class="arrow"    d="M 360 110 L 360 148" marker-end="url(#a)"/>
  <path class="arrow"    d="M 360 210 L 360 248" marker-end="url(#a)"/>
  <path class="arrow"    d="M 360 310 L 360 348" marker-end="url(#a)"/>
  <path class="arrow"    d="M 360 410 L 360 448" marker-end="url(#a)"/>
  <path class="arrow-ok" d="M 360 494 L 360 528" marker-end="url(#a)"/>

  <path class="arrow-ok" d="M 500 555 C 600 555, 620 80, 502 80" marker-end="url(#a)" stroke-dasharray="4 3"/>
  <text class="lbl" x="610" y="320" text-anchor="middle" transform="rotate(90 610 320)">reply streams back out the same path</text>
</svg>
