@empir3/empir3-bridge 0.3.21

package/assets/browser-privacy.svg

@@ -0,0 +1,151 @@
+<svg width="1180" height="600" viewBox="0 0 1180 600" fill="none" xmlns="http://www.w3.org/2000/svg" font-family="'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1180" y2="600" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0b1020"/>
+      <stop offset="1" stop-color="#0a0e1c"/>
+    </linearGradient>
+    <linearGradient id="win" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#161d33"/>
+      <stop offset="1" stop-color="#111729"/>
+    </linearGradient>
+    <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#2b3354"/>
+      <stop offset="1" stop-color="#1a2038"/>
+    </linearGradient>
+    <linearGradient id="violetEdge" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#8b6ff8"/>
+      <stop offset="1" stop-color="#6f53e8"/>
+    </linearGradient>
+    <radialGradient id="vglow" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="#8b6ff8" stop-opacity="0.30"/>
+      <stop offset="1" stop-color="#8b6ff8" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="soft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="7"/></filter>
+  </defs>
+
+  <rect x="6" y="6" width="1168" height="588" rx="24" fill="url(#bg)" stroke="#232a42" stroke-width="1.5"/>
+
+  <!-- header -->
+  <text x="56" y="56" font-size="26" font-weight="700" fill="#f4f6ff" letter-spacing="0.2">empir<tspan fill="#8b6ff8">3</tspan><tspan fill="#aeb6d6" font-weight="500"> &#160;Bridge</tspan></text>
+  <text x="1124" y="52" text-anchor="end" font-size="14" fill="#7e88ac" letter-spacing="0.3">a real browser &#8212; walled off from your personal one</text>
+  <line x1="56" y1="86" x2="1124" y2="86" stroke="#1d2438" stroke-width="1"/>
+
+  <!-- ============ LEFT: your personal Chrome ============ -->
+  <rect x="82" y="126" width="460" height="410" rx="14" fill="url(#win)" stroke="#2c3556" stroke-width="1.5"/>
+  <!-- title bar -->
+  <path d="M82 140 a14 14 0 0 1 14 -14 h432 a14 14 0 0 1 14 14 v28 h-460 z" fill="#1b2236"/>
+  <circle cx="110" cy="147" r="5" fill="#566089"/>
+  <circle cx="128" cy="147" r="5" fill="#566089"/>
+  <circle cx="146" cy="147" r="5" fill="#566089"/>
+  <rect x="176" y="136" width="342" height="23" rx="11.5" fill="#0e1322" stroke="#2c3556" stroke-width="1"/>
+  <path d="M192 142 v-2 a3 3 0 0 1 6 0 v2 M190 142 h10 v8 h-10 z" fill="none" stroke="#6f7aa3" stroke-width="1.3"/>
+  <text x="208" y="152" font-size="12" fill="#8a93b8">mail.google.com</text>
+  <!-- off-limits badge -->
+  <rect x="384" y="184" width="138" height="26" rx="13" fill="#2a1418" stroke="#7f2630"/>
+  <path d="M402 191 l11 11 M413 191 l-11 11" stroke="#f87171" stroke-width="2" stroke-linecap="round"/>
+  <text x="424" y="201" font-size="11.5" font-weight="700" fill="#f8a3a3" letter-spacing="0.4">NO ACCESS</text>
+
+  <!-- personal rows -->
+  <g>
+    <rect x="112" y="226" width="400" height="50" rx="10" fill="#0f1424" stroke="#232a42"/>
+    <rect x="128" y="241" width="20" height="20" rx="4" fill="#d6492f" opacity="0.85"/>
+    <text x="160" y="248" font-size="14" font-weight="600" fill="#e7eafa">Gmail</text>
+    <text x="160" y="266" font-size="12" fill="#7e88ac">you@gmail.com &#183; signed in</text>
+  </g>
+  <g>
+    <rect x="112" y="288" width="400" height="50" rx="10" fill="#0f1424" stroke="#232a42"/>
+    <rect x="128" y="303" width="20" height="20" rx="4" fill="#2f7d4f" opacity="0.85"/>
+    <text x="160" y="310" font-size="14" font-weight="600" fill="#e7eafa">Your bank</text>
+    <text x="160" y="328" font-size="12" fill="#7e88ac">saved password &#183; 2FA cookie</text>
+  </g>
+  <g>
+    <rect x="112" y="350" width="400" height="50" rx="10" fill="#0f1424" stroke="#232a42"/>
+    <rect x="128" y="365" width="20" height="20" rx="4" fill="#5566aa" opacity="0.85"/>
+    <text x="160" y="372" font-size="14" font-weight="600" fill="#e7eafa">Socials, history, 200 open tabs</text>
+    <text x="160" y="390" font-size="12" fill="#7e88ac">everything you do, every day</text>
+  </g>
+
+  <!-- left footer label -->
+  <text x="112" y="450" font-size="12" font-weight="600" fill="#7e88ac" letter-spacing="1.4">YOUR EVERYDAY CHROME</text>
+  <text x="112" y="474" font-size="13" fill="#9aa3c7">logins &#183; cookies &#183; history &#8212; the bridge never touches this</text>
+  <text x="112" y="500" font-size="12.5" font-weight="600" fill="#86d9cd">Untouched. Unread. Yours.</text>
+
+  <!-- OFF-LIMITS: big red X crossing out the personal browser -->
+  <rect x="82" y="170" width="460" height="252" rx="6" fill="#ef4444" opacity="0.07"/>
+  <g stroke="#ef4444" stroke-linecap="round" opacity="0.22">
+    <line x1="130" y1="200" x2="494" y2="416" stroke-width="26"/>
+    <line x1="494" y1="200" x2="130" y2="416" stroke-width="26"/>
+  </g>
+  <g stroke="#ef4444" stroke-linecap="round" opacity="0.95">
+    <line x1="130" y1="200" x2="494" y2="416" stroke-width="14"/>
+    <line x1="494" y1="200" x2="130" y2="416" stroke-width="14"/>
+  </g>
+
+  <!-- ============ WALL ============ -->
+  <ellipse cx="590" cy="331" rx="120" ry="150" fill="url(#vglow)" filter="url(#soft)" opacity="0.55"/>
+  <rect x="560" y="150" width="60" height="362" rx="14" fill="url(#wall)" stroke="#3a456a" stroke-width="1.25"/>
+  <!-- brick seams -->
+  <g stroke="#0f1424" stroke-width="1.5" opacity="0.55">
+    <line x1="560" y1="210" x2="620" y2="210"/>
+    <line x1="560" y1="270" x2="620" y2="270"/>
+    <line x1="560" y1="392" x2="620" y2="392"/>
+    <line x1="560" y1="452" x2="620" y2="452"/>
+    <line x1="590" y1="150" x2="590" y2="210"/>
+    <line x1="590" y1="270" x2="590" y2="331"/>
+    <line x1="590" y1="392" x2="590" y2="452"/>
+  </g>
+  <!-- shield -->
+  <circle cx="590" cy="331" r="30" fill="#0e1322" stroke="#8b6ff8" stroke-width="1.5"/>
+  <path d="M590 313 l15 6 v13 c0 11 -7 19 -15 22 c-8 -3 -15 -11 -15 -22 v-13 z" fill="url(#violetEdge)"/>
+  <path d="M583 332 l5 5 l10 -11" fill="none" stroke="#0e1322" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+  <text x="590" y="234" font-size="11" font-weight="700" fill="#cdbcff" text-anchor="middle" letter-spacing="2" transform="rotate(-90 590 234)">WALLED OFF</text>
+  <text x="590" y="430" font-size="9.5" font-weight="600" fill="#8089ab" text-anchor="middle" letter-spacing="1.5" transform="rotate(-90 590 430)">SEPARATE PROFILE</text>
+
+  <!-- ============ RIGHT: bridge's dedicated Chrome ============ -->
+  <rect x="638" y="126" width="460" height="410" rx="14" fill="url(#win)" stroke="#4b3f86" stroke-width="1.75"/>
+  <!-- title bar -->
+  <path d="M638 140 a14 14 0 0 1 14 -14 h432 a14 14 0 0 1 14 14 v28 h-460 z" fill="#1c1b36"/>
+  <circle cx="666" cy="147" r="5" fill="#6b5fb0"/>
+  <circle cx="684" cy="147" r="5" fill="#6b5fb0"/>
+  <circle cx="702" cy="147" r="5" fill="#6b5fb0"/>
+  <rect x="732" y="136" width="342" height="23" rx="11.5" fill="#0e1322" stroke="#4b3f86" stroke-width="1"/>
+  <path d="M748 142 v-2 a3 3 0 0 1 6 0 v2 M746 142 h10 v8 h-10 z" fill="none" stroke="#a08fe0" stroke-width="1.3"/>
+  <text x="764" y="152" font-size="12" fill="#b3a6e6">app.empir3.com</text>
+  <!-- agent-driven badge -->
+  <rect x="938" y="184" width="142" height="26" rx="13" fill="#1f1840" stroke="#5a49a0"/>
+  <circle cx="956" cy="197" r="4.5" fill="#8b6ff8"/>
+  <text x="968" y="201" font-size="11.5" font-weight="600" fill="#cdbcff" letter-spacing="0.4">AGENT-DRIVEN</text>
+
+  <!-- bridge rows: only granted -->
+  <g>
+    <rect x="668" y="226" width="400" height="50" rx="10" fill="#12152b" stroke="#2e2a55"/>
+    <circle cx="690" cy="251" r="9" fill="none" stroke="#8b6ff8" stroke-width="2.2"/>
+    <circle cx="690" cy="251" r="3" fill="#8b6ff8"/>
+    <text x="712" y="248" font-size="14" font-weight="600" fill="#e7eafa">app.empir3.com</text>
+    <text x="712" y="266" font-size="12" fill="#9b8fd0">a login you explicitly granted</text>
+    <text x="1052" y="256" font-size="12" fill="#34d399" text-anchor="end">&#10003;</text>
+  </g>
+  <g>
+    <rect x="668" y="288" width="400" height="50" rx="10" fill="#12152b" stroke="#2e2a55"/>
+    <circle cx="690" cy="313" r="9" fill="none" stroke="#8b6ff8" stroke-width="2.2"/>
+    <circle cx="690" cy="313" r="3" fill="#8b6ff8"/>
+    <text x="712" y="310" font-size="14" font-weight="600" fill="#e7eafa">github.com/your-repo</text>
+    <text x="712" y="328" font-size="12" fill="#9b8fd0">granted for this task</text>
+    <text x="1052" y="318" font-size="12" fill="#34d399" text-anchor="end">&#10003;</text>
+  </g>
+
+  <!-- agent driving: highlighted target + ghost cursor -->
+  <rect x="668" y="350" width="400" height="50" rx="10" fill="#160f33" stroke="#8b6ff8" stroke-width="1.75"/>
+  <rect x="936" y="362" width="92" height="26" rx="8" fill="#8b6ff8"/>
+  <text x="982" y="379" font-size="12.5" font-weight="700" fill="#0b1020" text-anchor="middle">Run</text>
+  <text x="690" y="380" font-size="13" fill="#cdbcff">the agent is acting here &#8212; visibly</text>
+  <!-- ghost cursor -->
+  <g transform="translate(1006 384)">
+    <path d="M0 0 L0 19 L5 14 L9 22 L12 21 L8 13 L15 13 z" fill="#ffffff" stroke="#8b6ff8" stroke-width="1.2"/>
+  </g>
+
+  <!-- right footer label -->
+  <text x="668" y="450" font-size="12" font-weight="600" fill="#9b8fd0" letter-spacing="1.4">BRIDGE&#8217;S DEDICATED CHROME</text>
+  <text x="668" y="474" font-size="13" fill="#b3a6e6">only the logins you grant it &#183; persists across runs</text>
+  <text x="668" y="500" font-size="12.5" font-weight="600" fill="#cdbcff">Real Chrome. Its own profile. Visible while it works.</text>
+</svg>

package/assets/demo-orchestration.svg

@@ -0,0 +1,74 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 472" width="920" height="472" font-family="'SF Mono','Cascadia Code','Consolas','Menlo',monospace" role="img" aria-label="Terminal demo: one prompt drives Codex, Gemini, and a real browser from a single agent">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0d0f15"/>
+      <stop offset="1" stop-color="#0a0b10"/>
+    </linearGradient>
+    <style>
+      .ln { opacity: 1; }                 /* fallback: fully visible if animation is stripped */
+      @keyframes a1{0%,3%{opacity:0}6%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a2{0%,7%{opacity:0}10%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a3{0%,11%{opacity:0}14%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a4{0%,24%{opacity:0}28%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a5{0%,36%{opacity:0}40%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a6{0%,48%{opacity:0}52%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a7{0%,62%{opacity:0}66%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes a8{0%,66%{opacity:0}70%,90%{opacity:1}95%,100%{opacity:0}}
+      @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
+      .c1{animation:a1 13s infinite} .c2{animation:a2 13s infinite} .c3{animation:a3 13s infinite}
+      .c4{animation:a4 13s infinite} .c5{animation:a5 13s infinite} .c6{animation:a6 13s infinite}
+      .c7{animation:a7 13s infinite} .c8{animation:a8 13s infinite}
+      .caret{animation:blink 1.1s steps(1) infinite}
+      text{font-size:15px}
+    </style>
+  </defs>
+
+  <!-- window -->
+  <rect x="1" y="1" width="918" height="470" rx="14" fill="url(#bg)" stroke="#23262f"/>
+  <!-- title bar -->
+  <rect x="1" y="1" width="918" height="44" rx="14" fill="#11141b"/>
+  <rect x="1" y="30" width="918" height="15" fill="#11141b"/>
+  <circle cx="28" cy="23" r="6" fill="#ff5f57"/>
+  <circle cx="50" cy="23" r="6" fill="#febc2e"/>
+  <circle cx="72" cy="23" r="6" fill="#28c840"/>
+  <text x="460" y="28" text-anchor="middle" fill="#6b7280" font-size="13.5">empir3 bridge — one prompt, the whole team</text>
+
+  <!-- body -->
+  <g>
+    <!-- command -->
+    <g class="ln c1">
+      <text x="34" y="92"><tspan fill="#4ade80">$</tspan> <tspan fill="#e6e9f0">claude</tspan></text>
+    </g>
+    <!-- request -->
+    <g class="ln c2">
+      <text x="34" y="122"><tspan fill="#a78bfa">&#8250;</tspan> <tspan fill="#e6e9f0">Have Codex scaffold the API, Gemini review the diff,</tspan></text>
+    </g>
+    <g class="ln c3">
+      <text x="50" y="146"><tspan fill="#e6e9f0">then open the dashboard in a real browser and screenshot it.</tspan><tspan class="caret" fill="#a78bfa" dx="6">&#9608;</tspan></text>
+    </g>
+
+    <!-- task lines -->
+    <g class="ln c4">
+      <text x="34" y="200"><tspan fill="#a78bfa">&#9656;</tspan> <tspan fill="#c7ccd6">codex</tspan><tspan fill="#6b7280" dx="42">scaffolding endpoints&#8230;</tspan><tspan fill="#4ade80" dx="36">&#10003;</tspan> <tspan fill="#9aa3b2">4 files written</tspan></text>
+    </g>
+    <g class="ln c5">
+      <text x="34" y="230"><tspan fill="#a78bfa">&#9656;</tspan> <tspan fill="#c7ccd6">gemini</tspan><tspan fill="#6b7280" dx="30">reviewing the diff&#8230;</tspan><tspan fill="#4ade80" dx="58">&#10003;</tspan> <tspan fill="#9aa3b2">2 fixes suggested</tspan></text>
+    </g>
+    <g class="ln c6">
+      <text x="34" y="260"><tspan fill="#a78bfa">&#9656;</tspan> <tspan fill="#c7ccd6">browser</tspan><tspan fill="#6b7280" dx="20">opening dashboard, capturing&#8230;</tspan><tspan fill="#4ade80" dx="14">&#10003;</tspan> <tspan fill="#9aa3b2">shot saved</tspan></text>
+    </g>
+
+    <!-- done -->
+    <g class="ln c7">
+      <text x="34" y="316"><tspan fill="#c4b5fd">&#10022;</tspan> <tspan fill="#e6e9f0">Done — Codex on your OpenAI seat, Gemini on your Google seat,</tspan></text>
+    </g>
+    <g class="ln c8">
+      <text x="50" y="340"><tspan fill="#8b93a4">the browser on this machine. No API keys. No per-token meter. One thread.</tspan></text>
+    </g>
+  </g>
+
+  <!-- footer strip -->
+  <text x="34" y="406" fill="#5b6270" font-size="13">cli_status &#183; cli_run &#183; browser_* &#183; desktop_* — 57 local tools &#183; write controls off by default</text>
+  <rect x="34" y="424" width="852" height="1" fill="#1b1e26"/>
+  <text x="34" y="450" fill="#7d8597" font-size="13"><tspan fill="#a78bfa">empir3</tspan> Bridge &#183; github.com/empir3hq/empir3-bridge</text>
+</svg>

package/assets/orchestration-hero.svg

@@ -0,0 +1,126 @@
+<svg width="1280" height="660" viewBox="0 0 1280 660" fill="none" xmlns="http://www.w3.org/2000/svg" font-family="'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1280" y2="660" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0b1020"/>
+      <stop offset="1" stop-color="#0a0e1c"/>
+    </linearGradient>
+    <linearGradient id="card" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#161d33"/>
+      <stop offset="1" stop-color="#121829"/>
+    </linearGradient>
+    <linearGradient id="spine" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#9b82fb"/>
+      <stop offset="1" stop-color="#6f53e8"/>
+    </linearGradient>
+    <linearGradient id="violetFlow" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#8b6ff8" stop-opacity="0.25"/>
+      <stop offset="1" stop-color="#8b6ff8" stop-opacity="0.95"/>
+    </linearGradient>
+    <linearGradient id="tealFlow" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#2dd4bf" stop-opacity="0.25"/>
+      <stop offset="1" stop-color="#2dd4bf" stop-opacity="0.95"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="#8b6ff8" stop-opacity="0.35"/>
+      <stop offset="1" stop-color="#8b6ff8" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="soft" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="6"/>
+    </filter>
+    <marker id="arrowV" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#8b6ff8"/>
+    </marker>
+    <marker id="arrowT" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10 z" fill="#2dd4bf"/>
+    </marker>
+  </defs>
+
+  <!-- frame -->
+  <rect x="6" y="6" width="1268" height="648" rx="24" fill="url(#bg)" stroke="#232a42" stroke-width="1.5"/>
+  <ellipse cx="586" cy="375" rx="240" ry="240" fill="url(#glow)" filter="url(#soft)" opacity="0.6"/>
+
+  <!-- header -->
+  <text x="56" y="56" font-size="26" font-weight="700" fill="#f4f6ff" letter-spacing="0.2">empir<tspan fill="#8b6ff8">3</tspan><tspan fill="#aeb6d6" font-weight="500"> &#160;Bridge</tspan></text>
+  <text x="1224" y="52" text-anchor="end" font-size="14" fill="#7e88ac" letter-spacing="0.3">one agent &#183; every CLI you already pay for &#183; your browser &amp; desktop</text>
+  <line x1="56" y1="86" x2="1224" y2="86" stroke="#1d2438" stroke-width="1"/>
+
+  <!-- ===== arrows (drawn under nodes) ===== -->
+  <!-- agent -> bridge -->
+  <path d="M296 375 L548 375" stroke="#8b6ff8" stroke-width="4" fill="none" marker-end="url(#arrowV)"/>
+  <text x="422" y="365" font-size="11.5" font-weight="600" fill="#b9a6ff" text-anchor="middle" letter-spacing="0.6">delegates</text>
+  <!-- bridge -> model seats (violet) -->
+  <path d="M624 375 C 676 375, 668 178, 712 178" stroke="url(#violetFlow)" stroke-width="2.5" fill="none" marker-end="url(#arrowV)"/>
+  <path d="M624 375 C 676 375, 668 244, 712 244" stroke="url(#violetFlow)" stroke-width="2.5" fill="none" marker-end="url(#arrowV)"/>
+  <path d="M624 375 C 676 375, 668 310, 712 310" stroke="url(#violetFlow)" stroke-width="2.5" fill="none" marker-end="url(#arrowV)"/>
+  <path d="M624 375 C 676 375, 700 376, 712 376" stroke="url(#violetFlow)" stroke-width="2.5" fill="none" marker-end="url(#arrowV)"/>
+  <!-- bridge -> machine (teal) -->
+  <path d="M624 375 C 690 375, 660 480, 712 480" stroke="url(#tealFlow)" stroke-width="2.5" fill="none" marker-end="url(#arrowT)"/>
+  <path d="M624 375 C 690 375, 660 566, 712 566" stroke="url(#tealFlow)" stroke-width="2.5" fill="none" marker-end="url(#arrowT)"/>
+
+  <!-- ===== driving agent ===== -->
+  <text x="56" y="294" font-size="12" font-weight="600" fill="#7e88ac" letter-spacing="1.6">ONE CONVERSATION</text>
+  <rect x="56" y="304" width="240" height="142" rx="16" fill="url(#card)" stroke="#2c3556" stroke-width="1.5"/>
+  <circle cx="92" cy="344" r="16" fill="#8b6ff8" opacity="0.18"/>
+  <path d="M84 340 h16 a2 2 0 0 1 2 2 v8 a2 2 0 0 1 -2 2 h-9 l-5 4 v-4 h-2 a2 2 0 0 1 -2 -2 v-8 a2 2 0 0 1 2 -2 z" fill="#8b6ff8"/>
+  <text x="120" y="349" font-size="18" font-weight="700" fill="#f4f6ff">The driving agent</text>
+  <text x="80" y="392" font-size="13.5" fill="#9aa3c7">Claude Code &#183; Cursor &#183; Codex</text>
+  <text x="80" y="414" font-size="13.5" fill="#9aa3c7">&#8230; any MCP client</text>
+  <text x="80" y="436" font-size="12" fill="#5f6b91">it composes &#8212; the bridge executes</text>
+
+  <!-- ===== bridge spine (hub) ===== -->
+  <rect x="556" y="150" width="62" height="450" rx="31" fill="url(#spine)"/>
+  <rect x="556" y="150" width="62" height="450" rx="31" fill="none" stroke="#b9a6ff" stroke-width="1" opacity="0.5"/>
+  <text x="587" y="375" font-size="17" font-weight="700" fill="#ffffff" text-anchor="middle" letter-spacing="3" transform="rotate(-90 587 375)">EMPIR3 BRIDGE</text>
+  <text x="587" y="138" font-size="11.5" font-weight="600" fill="#7e88ac" text-anchor="middle" letter-spacing="0.8">127.0.0.1 &#183; local</text>
+  <text x="587" y="624" font-size="11.5" font-weight="600" fill="#7e88ac" text-anchor="middle" letter-spacing="0.8">read-only by default</text>
+
+  <!-- ===== model seats ===== -->
+  <text x="712" y="138" font-size="12" font-weight="600" fill="#7e88ac" letter-spacing="1.2">YOUR MODEL SEATS<tspan fill="#5f6b91" font-weight="500" letter-spacing="0.2">  &#183;  no API keys, no extra cost</tspan></text>
+
+  <g>
+    <rect x="712" y="150" width="316" height="56" rx="12" fill="url(#card)" stroke="#2c3556" stroke-width="1.25"/>
+    <circle cx="740" cy="178" r="5" fill="#e6e6e6"/>
+    <text x="760" y="183" font-size="16" font-weight="600" fill="#eef1fb">Codex</text>
+    <text x="1012" y="183" font-size="12" fill="#34d399" text-anchor="end">&#10003; ready</text>
+  </g>
+  <g>
+    <rect x="712" y="216" width="316" height="56" rx="12" fill="url(#card)" stroke="#2c3556" stroke-width="1.25"/>
+    <circle cx="740" cy="244" r="5" fill="#9aa0aa"/>
+    <text x="760" y="249" font-size="16" font-weight="600" fill="#eef1fb">Grok</text>
+    <text x="1012" y="249" font-size="12" fill="#34d399" text-anchor="end">&#10003; ready</text>
+  </g>
+  <g>
+    <rect x="712" y="282" width="316" height="56" rx="12" fill="url(#card)" stroke="#2c3556" stroke-width="1.25"/>
+    <circle cx="740" cy="310" r="5" fill="#5b9dff"/>
+    <text x="760" y="315" font-size="16" font-weight="600" fill="#eef1fb">Gemini</text>
+    <text x="1012" y="315" font-size="12" fill="#34d399" text-anchor="end">&#10003; ready</text>
+  </g>
+  <g>
+    <rect x="712" y="348" width="316" height="56" rx="12" fill="url(#card)" stroke="#2c3556" stroke-width="1.25"/>
+    <circle cx="740" cy="376" r="5" fill="#d97757"/>
+    <text x="760" y="381" font-size="16" font-weight="600" fill="#eef1fb">Claude</text>
+    <text x="1012" y="381" font-size="12" fill="#34d399" text-anchor="end">&#10003; ready</text>
+  </g>
+
+  <!-- ===== your machine ===== -->
+  <text x="712" y="432" font-size="12" font-weight="600" fill="#7e88ac" letter-spacing="1.2">YOUR MACHINE<tspan fill="#5f6b91" font-weight="500" letter-spacing="0.2">  &#183;  you choose what it touches</tspan></text>
+
+  <!-- chrome card -->
+  <rect x="712" y="444" width="440" height="72" rx="14" fill="url(#card)" stroke="#27506a" stroke-width="1.25"/>
+  <circle cx="746" cy="480" r="15" fill="#2dd4bf" opacity="0.15"/>
+  <circle cx="746" cy="480" r="9" fill="none" stroke="#2dd4bf" stroke-width="2.5"/>
+  <circle cx="746" cy="480" r="3" fill="#2dd4bf"/>
+  <text x="776" y="476" font-size="16" font-weight="600" fill="#eef1fb">Dedicated Chrome</text>
+  <text x="776" y="498" font-size="12.5" fill="#86d9cd">a real browser, walled off from your personal one</text>
+
+  <!-- desktop card -->
+  <rect x="712" y="528" width="440" height="72" rx="14" fill="url(#card)" stroke="#27506a" stroke-width="1.25"/>
+  <rect x="734" y="552" width="26" height="18" rx="2.5" fill="none" stroke="#2dd4bf" stroke-width="2.5"/>
+  <line x1="747" y1="570" x2="747" y2="576" stroke="#2dd4bf" stroke-width="2.5"/>
+  <line x1="741" y1="576" x2="753" y2="576" stroke="#2dd4bf" stroke-width="2.5"/>
+  <text x="776" y="560" font-size="16" font-weight="600" fill="#eef1fb">Your desktop</text>
+  <text x="776" y="582" font-size="12.5" fill="#86d9cd">scoped to a box you draw &#8212; everything else stays private</text>
+
+  <!-- footer -->
+  <line x1="56" y1="620" x2="1224" y2="620" stroke="#1d2438" stroke-width="1"/>
+</svg>