diff --git a/socket_status_flow_simple.svg b/socket_status_flow_simple.svg
new file mode 100644
index 0000000..3e102f5
--- /dev/null
+++ b/socket_status_flow_simple.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700">
+  <defs>
+    <style>
+      .box { fill: #ffffff; stroke: #222; stroke-width: 2; rx: 12; ry: 12; }
+      .soft { fill: #f6f8fa; }
+      .good { fill: #d9f7e8; }
+      .warn { fill: #ffe8c2; }
+      .text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; fill: #111; }
+      .title { font-size: 22px; font-weight: 600; }
+      .small { font-size: 14px; fill: #333; }
+      .line { stroke: #222; stroke-width: 2.2; fill: none; }
+    </style>
+
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#222"/>
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text class="text title" x="40" y="55">Socket connection (simplified)</text>
+  <text class="text small" x="40" y="82">A simpler state flow: Connecting ’ Connected, with Disconnected / No Internet handling and UI updates.</text>
+
+  <!-- External inputs -->
+  <rect class="box soft" x="60" y="140" width="220" height="70" rx="12" ry="12"/>
+  <text class="text" x="170" y="183" text-anchor="middle">Socket</text>
+
+  <rect class="box soft" x="60" y="250" width="220" height="70" rx="12" ry="12"/>
+  <text class="text" x="170" y="293" text-anchor="middle">Internet</text>
+
+  <!-- Core states -->
+  <rect class="box warn" x="360" y="140" width="260" height="70" rx="12" ry="12"/>
+  <text class="text" x="490" y="183" text-anchor="middle">Connecting</text>
+
+  <rect class="box good" x="700" y="140" width="260" height="70" rx="12" ry="12"/>
+  <text class="text" x="830" y="183" text-anchor="middle">Connected</text>
+
+  <rect class="box" x="360" y="320" width="260" height="70" rx="12" ry="12"/>
+  <text class="text" x="490" y="363" text-anchor="middle">Disconnected</text>
+
+  <rect class="box" x="700" y="320" width="260" height="70" rx="12" ry="12"/>
+  <text class="text" x="830" y="363" text-anchor="middle">Reconnecting</text>
+
+  <rect class="box" x="530" y="470" width="260" height="70" rx="12" ry="12"/>
+  <text class="text" x="660" y="513" text-anchor="middle">No Internet</text>
+
+  <!-- UI -->
+  <rect class="box soft" x="1000" y="220" width="160" height="210" rx="14" ry="14"/>
+  <text class="text" x="1080" y="262" text-anchor="middle">Status UI</text>
+  <text class="text small" x="1080" y="295" text-anchor="middle">Shows:</text>
+  <text class="text small" x="1080" y="320" text-anchor="middle">- Connecting</text>
+  <text class="text small" x="1080" y="345" text-anchor="middle">- Connected</text>
+  <text class="text small" x="1080" y="370" text-anchor="middle">- Disconnected</text>
+  <text class="text small" x="1080" y="395" text-anchor="middle">- No Internet</text>
+
+  <!-- Arrows: inputs -->
+  <path class="line" marker-end="url(#arrow)" d="M 280 175 L 360 175"/>
+  <text class="text small" x="320" y="163" text-anchor="middle">start/connect</text>
+
+  <path class="line" marker-end="url(#arrow)" d="M 280 285 L 520 285 L 520 470"/>
+  <text class="text small" x="430" y="275" text-anchor="middle">offline</text>
+
+  <!-- Core transitions -->
+  <path class="line" marker-end="url(#arrow)" d="M 620 175 L 700 175"/>
+  <text class="text small" x="660" y="163" text-anchor="middle">success</text>
+
+  <path class="line" marker-end="url(#arrow)" d="M 830 210 L 830 320"/>
+  <text class="text small" x="848" y="268">drop/error</text>
+
+  <path class="line" marker-end="url(#arrow)" d="M 490 390 L 700 355"/>
+  <text class="text small" x="600" y="402" text-anchor="middle">retry</text>
+
+  <path class="line" marker-end="url(#arrow)" d="M 700 355 L 620 355 L 620 210"/>
+  <text class="text small" x="640" y="330">backoff</text>
+
+  <path class="line" marker-end="url(#arrow)" d="M 660 470 L 660 410 L 490 410 L 490 390"/>
+  <text class="text small" x="585" y="456" text-anchor="middle">still offline</text>
+
+  <path class="line" marker-end="url(#arrow)" d="M 790 505 L 930 505 L 930 355 L 960 355"/>
+  <text class="text small" x="900" y="493" text-anchor="middle">internet back</text>
+
+  <!-- UI updates (dashed) -->
+  <path class="line" stroke-dasharray="7 6" marker-end="url(#arrow)" d="M 960 175 L 1000 255"/>
+  <path class="line" stroke-dasharray="7 6" marker-end="url(#arrow)" d="M 960 355 L 1000 355"/>
+  <path class="line" stroke-dasharray="7 6" marker-end="url(#arrow)" d="M 790 505 L 1000 395"/>
+
+  <!-- Legend -->
+  <rect class="box soft" x="60" y="590" width="1100" height="70" rx="12" ry="12"/>
+  <circle cx="90" cy="625" r="6" fill="#222"/>
+  <text class="text small" x="110" y="630">Solid arrows: state transitions</text>
+  <path class="line" stroke-dasharray="7 6" d="M 420 625 L 470 625"/>
+  <text class="text small" x="490" y="630">Dashed arrows: UI updates based on current state</text>
+</svg>