<svg width="100%" viewBox="0 0 1000 280" role="img" xmlns="http://www.w3.org/2000/svg">
  <title>Voice pipeline — mic to speaker, end to end</title>
  <desc>Mic → on-device wake → LiveKit client → livekit-server → voice-bridge (STT/hermes/TTS) → back to the Pi speaker.</desc>
  <style>
    text{font-family:"Anthropic Sans",-apple-system,system-ui,"Segoe UI",sans-serif}
    .t{font-size:13px;font-weight:500;text-anchor:middle;dominant-baseline:central}
    .s{font-size:11px;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}
    .green{fill:#27500a;stroke:#97c459}   .gt{fill:#c0dd97} .gs{fill:#97c459}
    .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>

  <rect class="neutral" x="20"  y="100" width="100" height="56" rx="8"/>
  <text class="t nt" x="70"  y="120">🎤  mic</text>
  <text class="s ns" x="70"  y="138">on the Pi</text>

  <rect class="green"   x="140" y="100" width="140" height="56" rx="8"/>
  <text class="t gt" x="210" y="120">wake detector</text>
  <text class="s gs" x="210" y="138">on-device ONNX</text>

  <rect class="green"   x="300" y="100" width="140" height="56" rx="8"/>
  <text class="t gt" x="370" y="120">LiveKit client</text>
  <text class="s gs" x="370" y="138">publishes mic frames</text>

  <rect class="blue"    x="460" y="100" width="140" height="56" rx="8"/>
  <text class="t bt" x="530" y="120">livekit-server</text>
  <text class="s bs" x="530" y="138">WebRTC SFU · room_&lt;uid&gt;</text>

  <rect class="blue"    x="620" y="40"  width="240" height="180" rx="8"/>
  <text class="t bt" x="740" y="64">voice-bridge</text>
  <text class="s bs" x="740" y="84">livekit-agents worker</text>
  <text class="s bs" x="740" y="112">STT (Deepgram / Sarvam)</text>
  <text class="s bs" x="740" y="138">→ hermes /v1/chat/completions</text>
  <text class="s bs" x="740" y="164">→ TTS (ElevenLabs / Sarvam)</text>
  <text class="s bs" x="740" y="190">→ publish back to room</text>

  <rect class="orange"  x="880" y="40"  width="100" height="56" rx="8"/>
  <text class="t ot" x="930" y="62">hermes</text>
  <text class="s os" x="930" y="80">per-user</text>

  <rect class="purple"  x="880" y="160" width="100" height="56" rx="8"/>
  <text class="t pt" x="930" y="180">Deepgram</text>
  <text class="s ps" x="930" y="198">+ TTS</text>

  <rect class="neutral" x="20"  y="200" width="100" height="50" rx="8"/>
  <text class="t nt" x="70"  y="225">🔊  speaker</text>

  <path class="arrow"    d="M 120 128 L 138 128" marker-end="url(#a)"/>
  <text class="lbl"      x="129" y="119">"hey sudo"</text>
  <path class="arrow"    d="M 280 128 L 298 128" marker-end="url(#a)"/>
  <path class="arrow"    d="M 440 128 L 458 128" marker-end="url(#a)"/>
  <path class="arrow"    d="M 600 128 L 618 128" marker-end="url(#a)"/>
  <path class="arrow"    d="M 860 76  L 878 76"  marker-end="url(#a)"/>
  <path class="arrow"    d="M 860 188 L 878 188" marker-end="url(#a)"/>

  <path class="arrow-ok" d="M 620 200 L 600 200 L 600 222 L 122 222" marker-end="url(#a)"/>
  <text class="lbl"      x="370" y="214">TTS frames flow back through LiveKit to the Pi</text>
</svg>
