<svg width="100%" viewBox="0 0 1000 200" role="img" xmlns="http://www.w3.org/2000/svg">
  <title>Provider config (LLM/STT/TTS/Twilio) — admin save propagates fleet-wide</title>
  <desc>An admin saves at /admin/settings; the change writes to public.global_settings; restart_all_runtimes recreates every per-user hermes container so the new env vars take effect.</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}
    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}
    .teal{fill:#085041;stroke:#5dcaa5}    .tt{fill:#9fe1cb} .ts{fill:#5dcaa5}
    .orange{fill:#712b13;stroke:#f0997b}  .ot{fill:#f5c4b3} .os{fill:#f0997b}
    .arrow{fill:none;stroke:#9c9a92;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="80" width="180" height="60" rx="8"/>
  <text class="t nt" x="110" y="104">admin saves</text>
  <text class="s ns" x="110" y="122">/admin/settings</text>

  <rect class="teal" x="230" y="50" width="240" height="120" rx="8"/>
  <text class="t tt" x="350" y="76">public.global_settings</text>
  <text class="s ts" x="350" y="100">llm_provider</text>
  <text class="s ts" x="350" y="118">stt_provider · tts_provider</text>
  <text class="s ts" x="350" y="136">twilio (JSONB)</text>
  <text class="s ts" x="350" y="156">voice_debug_transcripts</text>

  <rect class="blue" x="500" y="80" width="200" height="60" rx="8"/>
  <text class="t bt" x="600" y="104">restart_all_runtimes()</text>
  <text class="s bs" x="600" y="122">on save</text>

  <rect class="orange" x="730" y="40" width="240" height="44" rx="8"/>
  <text class="t ot" x="850" y="62">hermes (family A)</text>
  <rect class="orange" x="730" y="98" width="240" height="44" rx="8"/>
  <text class="t ot" x="850" y="120">hermes (family B)</text>
  <rect class="orange" x="730" y="156" width="240" height="44" rx="8"/>
  <text class="t ot" x="850" y="178">hermes (family C)</text>

  <path class="arrow" d="M 200 110 L 228 110" marker-end="url(#a)"/>
  <path class="arrow" d="M 470 110 L 498 110" marker-end="url(#a)"/>
  <path class="arrow" d="M 700 100 L 728  62" marker-end="url(#a)"/>
  <path class="arrow" d="M 700 110 L 728 120" marker-end="url(#a)"/>
  <path class="arrow" d="M 700 120 L 728 178" marker-end="url(#a)"/>
</svg>
