From 2b39e3d1c8166ff195ffc655080cbcad446e654d Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Mon, 31 Aug 2026 14:27:57 -0300
Subject: [PATCH] docs(dashboard): redraw onboarding tier-flow SVGs for the
 real 4-tier model
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The onboarding diagram (TierFlowDiagram.tsx) still drew the legacy 3-tier
cascade (Subscription -> Cheap -> Free). Redrawn for the real model —
Tier 1 Subscription -> Tier 2 API -> Tier 3 Cheap -> Tier 4 Free — keeping
each theme's existing visual language (new cyan family for the API tier),
exact 4-column geometry on the 800x420 canvas, a Linux-safe font stack and
the accessibility floor (role/aria-label/title/desc). Rendered and verified
via svg-studio (validator pass, diagram checker 0 violations); canonical
numbers (352/19/110) remain covered by check:docs-counts.
---
 public/images/tier-flow-dark.svg  | 66 ++++++++++++++++++-------------
 public/images/tier-flow-light.svg | 66 ++++++++++++++++++-------------
 2 files changed, 78 insertions(+), 54 deletions(-)

diff --git a/public/images/tier-flow-dark.svg b/public/images/tier-flow-dark.svg
index 7412d8445e..0d67776574 100644
--- a/public/images/tier-flow-dark.svg
+++ b/public/images/tier-flow-dark.svg
@@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420" font-family="system-ui, -apple-system, sans-serif">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420" font-family="system-ui, -apple-system, Segoe UI, Arial, Helvetica, sans-serif" role="img" aria-label="OmniRoute 4-tier fallback: your IDE or CLI calls one local endpoint and the OmniRoute Smart Router fails over across 352 providers in 4 tiers — Tier 1 Subscription, Tier 2 API, Tier 3 Cheap, Tier 4 Free.">
+  <title>OmniRoute 4-tier fallback</title>
+  <desc>OmniRoute 4-tier fallback: your IDE or CLI calls one local endpoint and the OmniRoute Smart Router fails over across 352 providers in 4 tiers — Tier 1 Subscription, Tier 2 API, Tier 3 Cheap, Tier 4 Free.</desc>
   <defs>
     <marker id="arrow-dark" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
       <path d="M0,0 L0,6 L9,3 z" fill="#9ca3af"/>
@@ -12,7 +14,7 @@
   <rect width="800" height="420" fill="#111827" rx="12"/>
 
   <!-- Title -->
-  <text x="400" y="32" text-anchor="middle" font-size="18" font-weight="700" fill="#f9fafb">OmniRoute 3-tier fallback</text>
+  <text x="400" y="32" text-anchor="middle" font-size="18" font-weight="700" fill="#f9fafb">OmniRoute 4-tier fallback</text>
   <text x="400" y="52" text-anchor="middle" font-size="12" fill="#6b7280">Never stop building — automatic zero-config failover across 352 providers</text>
 
   <!-- Client box -->
@@ -31,35 +33,45 @@
   <text x="400" y="213" text-anchor="middle" font-size="10" fill="#60a5fa">Circuit breaker · MCP server (110 tools) · A2A · Memory · Guardrails</text>
 
   <!-- Arrows from router to tiers -->
-  <line x1="310" y1="224" x2="150" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
-  <line x1="400" y1="224" x2="400" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
-  <line x1="490" y1="224" x2="650" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
+  <line x1="260" y1="224" x2="109" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
+  <line x1="355" y1="224" x2="303" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
+  <line x1="445" y1="224" x2="497" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
+  <line x1="540" y1="224" x2="691" y2="285" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-dark)"/>
 
   <!-- Tier 1: Subscription -->
-  <rect x="30" y="287" width="220" height="110" rx="8" fill="#1c1a00" stroke="#d97706" stroke-width="1.5"/>
-  <text x="140" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#fbbf24">Tier 1 — SUBSCRIPTION</text>
-  <text x="140" y="328" text-anchor="middle" font-size="10" fill="#d97706">Pay flat-rate, use every drop</text>
-  <text x="140" y="346" text-anchor="middle" font-size="9.5" fill="#fbbf24">Claude Code · Codex · Copilot</text>
-  <text x="140" y="362" text-anchor="middle" font-size="9.5" fill="#fbbf24">Cursor · Antigravity · Windsurf</text>
-  <text x="140" y="387" text-anchor="middle" font-size="9" fill="#f59e0b">quota exhausted → Tier 2</text>
-  <line x1="140" y1="378" x2="300" y2="378" stroke="#f87171" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-dark)"/>
+  <rect x="16" y="287" width="186" height="110" rx="8" fill="#1c1a00" stroke="#d97706" stroke-width="1.5"/>
+  <text x="109" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#fbbf24">Tier 1 — SUBSCRIPTION</text>
+  <text x="109" y="328" text-anchor="middle" font-size="9.5" fill="#d97706">Pay flat-rate, use every drop</text>
+  <text x="109" y="346" text-anchor="middle" font-size="9" fill="#fbbf24">Claude Code · Codex</text>
+  <text x="109" y="362" text-anchor="middle" font-size="9" fill="#fbbf24">Copilot · Cursor · Windsurf</text>
+  <text x="109" y="390" text-anchor="middle" font-size="8.5" fill="#f59e0b">quota exhausted → Tier 2</text>
+  <line x1="109" y1="376" x2="240" y2="376" stroke="#f87171" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-dark)"/>
 
-  <!-- Tier 2: Cheap -->
-  <rect x="290" y="287" width="220" height="110" rx="8" fill="#052e16" stroke="#16a34a" stroke-width="1.5"/>
-  <text x="400" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#4ade80">Tier 2 — CHEAP</text>
-  <text x="400" y="328" text-anchor="middle" font-size="10" fill="#22c55e">Pay-per-token, under $1/1M</text>
-  <text x="400" y="346" text-anchor="middle" font-size="9.5" fill="#4ade80">DeepSeek $0.27 · GLM $0.60</text>
-  <text x="400" y="362" text-anchor="middle" font-size="9.5" fill="#4ade80">MiniMax $0.20 · Qwen $0.30</text>
-  <text x="400" y="387" text-anchor="middle" font-size="9" fill="#16a34a">budget hit → Tier 3</text>
-  <line x1="400" y1="378" x2="560" y2="378" stroke="#f87171" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-dark)"/>
+  <!-- Tier 2: API -->
+  <rect x="210" y="287" width="186" height="110" rx="8" fill="#083344" stroke="#0891b2" stroke-width="1.5"/>
+  <text x="303" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#67e8f9">Tier 2 — API</text>
+  <text x="303" y="328" text-anchor="middle" font-size="9.5" fill="#22d3ee">Your own pay-as-you-go keys</text>
+  <text x="303" y="346" text-anchor="middle" font-size="9" fill="#67e8f9">OpenAI · Anthropic · Gemini</text>
+  <text x="303" y="362" text-anchor="middle" font-size="9" fill="#67e8f9">Groq · Mistral · xAI</text>
+  <text x="303" y="390" text-anchor="middle" font-size="8.5" fill="#06b6d4">rate-limited → Tier 3</text>
+  <line x1="303" y1="376" x2="434" y2="376" stroke="#f87171" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-dark)"/>
 
-  <!-- Tier 3: Free -->
-  <rect x="550" y="287" width="220" height="110" rx="8" fill="#1e1b4b" stroke="#6366f1" stroke-width="1.5"/>
-  <text x="660" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#a5b4fc">Tier 3 — FREE</text>
-  <text x="660" y="328" text-anchor="middle" font-size="10" fill="#818cf8">Free tiers &amp; credit programs</text>
-  <text x="660" y="346" text-anchor="middle" font-size="9.5" fill="#a5b4fc">Kiro · OpenCode · Qoder</text>
-  <text x="660" y="362" text-anchor="middle" font-size="9.5" fill="#a5b4fc">Antigravity · Vertex $300cr</text>
-  <text x="660" y="387" text-anchor="middle" font-size="9" fill="#6366f1">always available</text>
+  <!-- Tier 3: Cheap -->
+  <rect x="404" y="287" width="186" height="110" rx="8" fill="#052e16" stroke="#16a34a" stroke-width="1.5"/>
+  <text x="497" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#4ade80">Tier 3 — CHEAP</text>
+  <text x="497" y="328" text-anchor="middle" font-size="9.5" fill="#22c55e">Pay-per-token, under $1/1M</text>
+  <text x="497" y="346" text-anchor="middle" font-size="9" fill="#4ade80">DeepSeek $0.27 · GLM $0.60</text>
+  <text x="497" y="362" text-anchor="middle" font-size="9" fill="#4ade80">MiniMax $0.20 · Qwen $0.30</text>
+  <text x="497" y="390" text-anchor="middle" font-size="8.5" fill="#16a34a">budget hit → Tier 4</text>
+  <line x1="497" y1="376" x2="628" y2="376" stroke="#f87171" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-dark)"/>
+
+  <!-- Tier 4: Free -->
+  <rect x="598" y="287" width="186" height="110" rx="8" fill="#1e1b4b" stroke="#6366f1" stroke-width="1.5"/>
+  <text x="691" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#a5b4fc">Tier 4 — FREE</text>
+  <text x="691" y="328" text-anchor="middle" font-size="9.5" fill="#818cf8">Free tiers &amp; credit programs</text>
+  <text x="691" y="346" text-anchor="middle" font-size="9" fill="#a5b4fc">Kiro · OpenCode · Qoder</text>
+  <text x="691" y="362" text-anchor="middle" font-size="9" fill="#a5b4fc">Antigravity · Vertex $300cr</text>
+  <text x="691" y="390" text-anchor="middle" font-size="8.5" fill="#6366f1">always available</text>
 
   <!-- Footer note -->
   <text x="400" y="413" text-anchor="middle" font-size="9" fill="#4b5563">Fallback happens in milliseconds — transparent to the calling tool</text>
diff --git a/public/images/tier-flow-light.svg b/public/images/tier-flow-light.svg
index 411aa9e39e..00cbbedbe2 100644
--- a/public/images/tier-flow-light.svg
+++ b/public/images/tier-flow-light.svg
@@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420" font-family="system-ui, -apple-system, sans-serif">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420" font-family="system-ui, -apple-system, Segoe UI, Arial, Helvetica, sans-serif" role="img" aria-label="OmniRoute 4-tier fallback: your IDE or CLI calls one local endpoint and the OmniRoute Smart Router fails over across 352 providers in 4 tiers — Tier 1 Subscription, Tier 2 API, Tier 3 Cheap, Tier 4 Free.">
+  <title>OmniRoute 4-tier fallback</title>
+  <desc>OmniRoute 4-tier fallback: your IDE or CLI calls one local endpoint and the OmniRoute Smart Router fails over across 352 providers in 4 tiers — Tier 1 Subscription, Tier 2 API, Tier 3 Cheap, Tier 4 Free.</desc>
   <defs>
     <marker id="arrow-light" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
       <path d="M0,0 L0,6 L9,3 z" fill="#6b7280"/>
@@ -12,7 +14,7 @@
   <rect width="800" height="420" fill="#f9fafb" rx="12"/>
 
   <!-- Title -->
-  <text x="400" y="32" text-anchor="middle" font-size="18" font-weight="700" fill="#111827">OmniRoute 3-tier fallback</text>
+  <text x="400" y="32" text-anchor="middle" font-size="18" font-weight="700" fill="#111827">OmniRoute 4-tier fallback</text>
   <text x="400" y="52" text-anchor="middle" font-size="12" fill="#6b7280">Never stop building — automatic zero-config failover across 352 providers</text>
 
   <!-- Client box -->
@@ -31,35 +33,45 @@
   <text x="400" y="213" text-anchor="middle" font-size="10" fill="#3b82f6">Circuit breaker · MCP server (110 tools) · A2A · Memory · Guardrails</text>
 
   <!-- Arrows from router to tiers -->
-  <line x1="310" y1="224" x2="150" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
-  <line x1="400" y1="224" x2="400" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
-  <line x1="490" y1="224" x2="650" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
+  <line x1="260" y1="224" x2="109" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
+  <line x1="355" y1="224" x2="303" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
+  <line x1="445" y1="224" x2="497" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
+  <line x1="540" y1="224" x2="691" y2="285" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow-light)"/>
 
   <!-- Tier 1: Subscription -->
-  <rect x="30" y="287" width="220" height="110" rx="8" fill="#fffbeb" stroke="#f59e0b" stroke-width="1.5"/>
-  <text x="140" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#92400e">Tier 1 — SUBSCRIPTION</text>
-  <text x="140" y="328" text-anchor="middle" font-size="10" fill="#78350f">Pay flat-rate, use every drop</text>
-  <text x="140" y="346" text-anchor="middle" font-size="9.5" fill="#92400e">Claude Code · Codex · Copilot</text>
-  <text x="140" y="362" text-anchor="middle" font-size="9.5" fill="#92400e">Cursor · Antigravity · Windsurf</text>
-  <text x="140" y="387" text-anchor="middle" font-size="9" fill="#b45309">quota exhausted → Tier 2</text>
-  <line x1="140" y1="378" x2="300" y2="378" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-light)"/>
+  <rect x="16" y="287" width="186" height="110" rx="8" fill="#fffbeb" stroke="#f59e0b" stroke-width="1.5"/>
+  <text x="109" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#92400e">Tier 1 — SUBSCRIPTION</text>
+  <text x="109" y="328" text-anchor="middle" font-size="9.5" fill="#78350f">Pay flat-rate, use every drop</text>
+  <text x="109" y="346" text-anchor="middle" font-size="9" fill="#92400e">Claude Code · Codex</text>
+  <text x="109" y="362" text-anchor="middle" font-size="9" fill="#92400e">Copilot · Cursor · Windsurf</text>
+  <text x="109" y="390" text-anchor="middle" font-size="8.5" fill="#b45309">quota exhausted → Tier 2</text>
+  <line x1="109" y1="376" x2="240" y2="376" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-light)"/>
 
-  <!-- Tier 2: Cheap -->
-  <rect x="290" y="287" width="220" height="110" rx="8" fill="#f0fdf4" stroke="#22c55e" stroke-width="1.5"/>
-  <text x="400" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#14532d">Tier 2 — CHEAP</text>
-  <text x="400" y="328" text-anchor="middle" font-size="10" fill="#166534">Pay-per-token, under $1/1M</text>
-  <text x="400" y="346" text-anchor="middle" font-size="9.5" fill="#14532d">DeepSeek $0.27 · GLM $0.60</text>
-  <text x="400" y="362" text-anchor="middle" font-size="9.5" fill="#14532d">MiniMax $0.20 · Qwen $0.30</text>
-  <text x="400" y="387" text-anchor="middle" font-size="9" fill="#15803d">budget hit → Tier 3</text>
-  <line x1="400" y1="378" x2="560" y2="378" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-light)"/>
+  <!-- Tier 2: API -->
+  <rect x="210" y="287" width="186" height="110" rx="8" fill="#ecfeff" stroke="#06b6d4" stroke-width="1.5"/>
+  <text x="303" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#155e75">Tier 2 — API</text>
+  <text x="303" y="328" text-anchor="middle" font-size="9.5" fill="#0e7490">Your own pay-as-you-go keys</text>
+  <text x="303" y="346" text-anchor="middle" font-size="9" fill="#155e75">OpenAI · Anthropic · Gemini</text>
+  <text x="303" y="362" text-anchor="middle" font-size="9" fill="#155e75">Groq · Mistral · xAI</text>
+  <text x="303" y="390" text-anchor="middle" font-size="8.5" fill="#0891b2">rate-limited → Tier 3</text>
+  <line x1="303" y1="376" x2="434" y2="376" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-light)"/>
 
-  <!-- Tier 3: Free -->
-  <rect x="550" y="287" width="220" height="110" rx="8" fill="#eef2ff" stroke="#6366f1" stroke-width="1.5"/>
-  <text x="660" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#312e81">Tier 3 — FREE</text>
-  <text x="660" y="328" text-anchor="middle" font-size="10" fill="#3730a3">Free tiers &amp; credit programs</text>
-  <text x="660" y="346" text-anchor="middle" font-size="9.5" fill="#312e81">Kiro · OpenCode · Qoder</text>
-  <text x="660" y="362" text-anchor="middle" font-size="9.5" fill="#312e81">Antigravity · Vertex $300cr</text>
-  <text x="660" y="387" text-anchor="middle" font-size="9" fill="#4338ca">always available</text>
+  <!-- Tier 3: Cheap -->
+  <rect x="404" y="287" width="186" height="110" rx="8" fill="#f0fdf4" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="497" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#14532d">Tier 3 — CHEAP</text>
+  <text x="497" y="328" text-anchor="middle" font-size="9.5" fill="#166534">Pay-per-token, under $1/1M</text>
+  <text x="497" y="346" text-anchor="middle" font-size="9" fill="#14532d">DeepSeek $0.27 · GLM $0.60</text>
+  <text x="497" y="362" text-anchor="middle" font-size="9" fill="#14532d">MiniMax $0.20 · Qwen $0.30</text>
+  <text x="497" y="390" text-anchor="middle" font-size="8.5" fill="#15803d">budget hit → Tier 4</text>
+  <line x1="497" y1="376" x2="628" y2="376" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow-fallback-light)"/>
+
+  <!-- Tier 4: Free -->
+  <rect x="598" y="287" width="186" height="110" rx="8" fill="#eef2ff" stroke="#6366f1" stroke-width="1.5"/>
+  <text x="691" y="310" text-anchor="middle" font-size="11" font-weight="700" fill="#312e81">Tier 4 — FREE</text>
+  <text x="691" y="328" text-anchor="middle" font-size="9.5" fill="#3730a3">Free tiers &amp; credit programs</text>
+  <text x="691" y="346" text-anchor="middle" font-size="9" fill="#312e81">Kiro · OpenCode · Qoder</text>
+  <text x="691" y="362" text-anchor="middle" font-size="9" fill="#312e81">Antigravity · Vertex $300cr</text>
+  <text x="691" y="390" text-anchor="middle" font-size="8.5" fill="#4338ca">always available</text>
 
   <!-- Footer note -->
   <text x="400" y="413" text-anchor="middle" font-size="9" fill="#9ca3af">Fallback happens in milliseconds — transparent to the calling tool</text>