From ae93cc062bd49acb2f6fcde8331759daede32522 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Fri, 3 Apr 2026 11:46:12 +0800
Subject: [PATCH] fix: optimize communication flow diagram icons and layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/images/communication-flow.svg | 225 ++++++++++++++++++-----------
 1 file changed, 137 insertions(+), 88 deletions(-)

diff --git a/docs/images/communication-flow.svg b/docs/images/communication-flow.svg
index 0bf34b6..cf35f3b 100644
--- a/docs/images/communication-flow.svg
+++ b/docs/images/communication-flow.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 510" fill="none" role="img" aria-label="Codeg Communication Flow Diagram">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="25 65 910 420" fill="none" role="img" aria-label="Codeg Communication Flow Diagram">
   <defs>
     <style>
       @keyframes f { to { stroke-dashoffset: -24 } }
@@ -8,19 +8,15 @@
       .t1 { fill: #1f2937 }
       .t2 { fill: #6b7280 }
       .th { fill: #9ca3af }
-      .uc { fill: #dbeafe }
-      .ui { fill: #3b82f6 }
       @media (prefers-color-scheme: dark) {
         .fl { stroke: #3b82f6 }
         .card { fill: #161b22; stroke: #30363d }
         .t1 { fill: #e6edf3 }
         .t2 { fill: #8b949e }
         .th { fill: #6e7681 }
-        .uc { fill: #1e3a5f }
-        .ui { fill: #58a6ff }
       }
     </style>
-    <!-- Icon gradients from src-tauri/icons/icon.svg -->
+    <!-- Codeg hub gradients -->
     <linearGradient id="ic-code" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#dcdfe9"/>
       <stop offset="100%" stop-color="#cdd1e2"/>
@@ -37,78 +33,111 @@
       <stop offset="0%" stop-color="#29b6f6"/>
       <stop offset="100%" stop-color="#03a9f4"/>
     </linearGradient>
-    <clipPath id="uc">
-      <circle cx="158" cy="280" r="38"/>
-    </clipPath>
+    <!-- Agent icon gradients: Codex -->
+    <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-codex-fill" x1="12" x2="12" y1="3" y2="21">
+      <stop stop-color="#B1A7FF"/>
+      <stop offset=".5" stop-color="#7A9DFF"/>
+      <stop offset="1" stop-color="#3941FF"/>
+    </linearGradient>
+    <!-- Agent icon gradients: Gemini CLI -->
+    <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-cli-fill" x1="24" x2="0" y1="6.587" y2="16.494">
+      <stop stop-color="#EE4D5D"/>
+      <stop offset=".328" stop-color="#B381DD"/>
+      <stop offset=".476" stop-color="#207CFE"/>
+    </linearGradient>
+    <!-- Agent icon gradients: OpenClaw -->
+    <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-open-claw-fill-0" x1="-.659" x2="27.023" y1=".458" y2="22.855">
+      <stop stop-color="#FF4D4D"/>
+      <stop offset="1" stop-color="#991B1B"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-open-claw-fill-1" x1="0" x2="4.311" y1="9.672" y2="14.949">
+      <stop stop-color="#FF4D4D"/>
+      <stop offset="1" stop-color="#991B1B"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-open-claw-fill-2" x1="19.385" x2="24.399" y1="9.953" y2="14.462">
+      <stop stop-color="#FF4D4D"/>
+      <stop offset="1" stop-color="#991B1B"/>
+    </linearGradient>
   </defs>
 
   <!-- ═══ Flow Lines (behind everything) ═══ -->
 
-  <!-- User → Clients -->
-  <path d="M196,280 C238,280 250,148 280,148" class="fl"/>
-  <path d="M196,280 C238,280 250,214 280,214" class="fl" style="animation-delay:-0.15s"/>
-  <path d="M196,280 C235,280 260,280 280,280" class="fl" style="animation-delay:-0.3s"/>
-  <path d="M196,280 C238,280 250,346 280,346" class="fl" style="animation-delay:-0.45s"/>
-  <path d="M196,280 C238,280 250,412 280,412" class="fl" style="animation-delay:-0.6s"/>
-
   <!-- Clients → Codeg -->
-  <path d="M480,148 C525,148 600,280 640,280" class="fl" style="animation-delay:-0.1s"/>
-  <path d="M480,214 C525,214 600,280 640,280" class="fl" style="animation-delay:-0.25s"/>
-  <path d="M480,280 C525,280 600,280 640,280" class="fl" style="animation-delay:-0.4s"/>
-  <path d="M480,346 C525,346 600,280 640,280" class="fl" style="animation-delay:-0.55s"/>
-  <path d="M480,412 C525,412 600,280 640,280" class="fl" style="animation-delay:-0.7s"/>
+  <path d="M290,148 C360,148 400,280 440,280" class="fl" style="animation-delay:-0.1s"/>
+  <path d="M290,214 C360,214 400,280 440,280" class="fl" style="animation-delay:-0.25s"/>
+  <path d="M290,280 C350,280 410,280 440,280" class="fl" style="animation-delay:-0.4s"/>
+  <path d="M290,346 C360,346 400,280 440,280" class="fl" style="animation-delay:-0.55s"/>
+  <path d="M290,412 C360,412 400,280 440,280" class="fl" style="animation-delay:-0.7s"/>
 
   <!-- Codeg → Agents -->
-  <path d="M720,280 C760,280 830,135 870,135" class="fl" style="animation-delay:-0.05s"/>
-  <path d="M720,280 C760,280 830,193 870,193" class="fl" style="animation-delay:-0.2s"/>
-  <path d="M720,280 C760,280 830,251 870,251" class="fl" style="animation-delay:-0.35s"/>
-  <path d="M720,280 C760,280 830,309 870,309" class="fl" style="animation-delay:-0.5s"/>
-  <path d="M720,280 C760,280 830,367 870,367" class="fl" style="animation-delay:-0.65s"/>
-  <path d="M720,280 C760,280 830,425 870,425" class="fl" style="animation-delay:-0.8s"/>
-
-  <!-- ═══ User Section ═══ -->
-
-  <circle cx="158" cy="280" r="38" class="uc"/>
-  <g clip-path="url(#uc)">
-    <circle cx="158" cy="264" r="13" class="ui"/>
-    <ellipse cx="158" cy="304" rx="24" ry="16" class="ui"/>
-  </g>
-  <text x="158" y="338" text-anchor="middle" font-size="13" font-weight="600" class="t2">Users</text>
+  <path d="M520,280 C560,280 620,135 660,135" class="fl" style="animation-delay:-0.05s"/>
+  <path d="M520,280 C560,280 620,193 660,193" class="fl" style="animation-delay:-0.2s"/>
+  <path d="M520,280 C560,280 620,251 660,251" class="fl" style="animation-delay:-0.35s"/>
+  <path d="M520,280 C560,280 620,309 660,309" class="fl" style="animation-delay:-0.5s"/>
+  <path d="M520,280 C560,280 620,367 660,367" class="fl" style="animation-delay:-0.65s"/>
+  <path d="M520,280 C560,280 620,425 660,425" class="fl" style="animation-delay:-0.8s"/>
 
   <!-- ═══ Client Cards ═══ -->
 
-  <text x="280" y="88" text-anchor="start" font-size="11" font-weight="700" letter-spacing="1.5" class="th">CLIENTS</text>
+  <text x="60" y="88" text-anchor="start" font-size="11" font-weight="700" letter-spacing="1.5" class="th">CLIENTS</text>
 
-  <!-- Web Browser -->
-  <rect x="280" y="123" width="200" height="50" rx="12" class="card"/>
-  <circle cx="304" cy="148" r="6" fill="#4285F4"/>
-  <text x="322" y="153" font-size="14" font-weight="500" class="t1">Web Browser</text>
+  <!-- Web Browser — globe icon (28px) -->
+  <rect x="60" y="123" width="230" height="50" rx="12" class="card"/>
+  <g transform="translate(74, 134) scale(1.4)">
+    <circle cx="10" cy="10" r="9" fill="none" stroke="#4285F4" stroke-width="1.6"/>
+    <ellipse cx="10" cy="10" rx="4.5" ry="9" fill="none" stroke="#4285F4" stroke-width="1.1"/>
+    <line x1="1" y1="10" x2="19" y2="10" stroke="#4285F4" stroke-width="1.1"/>
+    <line x1="10" y1="1" x2="10" y2="19" stroke="#4285F4" stroke-width="0.6" opacity="0.4"/>
+  </g>
+  <text x="114" y="153" font-size="15" font-weight="500" class="t1">Web Browser</text>
 
-  <!-- Desktop App -->
-  <rect x="280" y="189" width="200" height="50" rx="12" class="card"/>
-  <circle cx="304" cy="214" r="6" fill="#24C8DB"/>
-  <text x="322" y="219" font-size="14" font-weight="500" class="t1">Desktop App</text>
+  <!-- Desktop App — monitor icon (28px) -->
+  <rect x="60" y="189" width="230" height="50" rx="12" class="card"/>
+  <g transform="translate(74, 200) scale(1.4)">
+    <rect x="1" y="1" width="18" height="12" rx="2" fill="none" stroke="#24C8DB" stroke-width="1.6"/>
+    <line x1="6" y1="5" x2="14" y2="5" stroke="#24C8DB" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
+    <line x1="6" y1="8" x2="11" y2="8" stroke="#24C8DB" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
+    <line x1="10" y1="13" x2="10" y2="17" stroke="#24C8DB" stroke-width="1.6"/>
+    <line x1="5" y1="17" x2="15" y2="17" stroke="#24C8DB" stroke-width="1.6" stroke-linecap="round"/>
+  </g>
+  <text x="114" y="219" font-size="15" font-weight="500" class="t1">Desktop App</text>
 
-  <!-- Telegram -->
-  <rect x="280" y="255" width="200" height="50" rx="12" class="card"/>
-  <circle cx="304" cy="280" r="6" fill="#26A5E4"/>
-  <text x="322" y="285" font-size="14" font-weight="500" class="t1">Telegram</text>
+  <!-- Telegram — paper plane icon (28px) -->
+  <rect x="60" y="255" width="230" height="50" rx="12" class="card"/>
+  <g transform="translate(74, 266) scale(1.4)">
+    <path d="M1,10.5 L19,2.5 L15,18 L10.5,12 Z" fill="#26A5E4"/>
+    <path d="M10.5,12 L19,2.5" stroke="#1d8dbf" stroke-width="0.8"/>
+    <path d="M7.5,11 L10.5,12 L9,15.5" fill="#1d8dbf" opacity="0.6"/>
+  </g>
+  <text x="114" y="285" font-size="15" font-weight="500" class="t1">Telegram</text>
 
-  <!-- Lark (Feishu) -->
-  <rect x="280" y="321" width="200" height="50" rx="12" class="card"/>
-  <circle cx="304" cy="346" r="6" fill="#3370FF"/>
-  <text x="322" y="351" font-size="14" font-weight="500" class="t1">Lark (Feishu)</text>
+  <!-- Lark (Feishu) — official Feishu logo (28px) -->
+  <rect x="60" y="321" width="230" height="50" rx="12" class="card"/>
+  <g transform="translate(74, 332) scale(1.0769) translate(-7, -7)">
+    <path fill="#00d6b9" d="m21.069 20.504.063-.06.125-.122.085-.084.256-.254.348-.344.299-.296.281-.278.293-.289.269-.266.374-.37.218-.206.419-.359.404-.306.598-.386.617-.33.606-.265.348-.127.177-.058a14.8 14.8 0 0 0-2.793-5.603 1.34 1.34 0 0 0-1.047-.502H12.221a.201.201 0 0 0-.119.364 31.5 31.5 0 0 1 8.943 10.162l.025-.023z"/>
+    <path fill="#3370ff" d="M16.791 30c5.57 0 10.423-3.074 12.955-7.618q.133-.239.258-.484a6 6 0 0 1-.425.699 6 6 0 0 1-.17.23 6 6 0 0 1-.225.274q-.092.105-.188.206a6 6 0 0 1-.407.384 6 6 0 0 1-.24.195 7 7 0 0 1-.292.21q-.094.065-.191.122c-.097.057-.134.081-.204.119q-.21.116-.428.215a6 6 0 0 1-.385.157 6 6 0 0 1-.43.138 6 6 0 0 1-.661.143 6 6 0 0 1-.491.055 6.125 6.125 0 0 1-1.543-.085 7 7 0 0 1-.38-.079l-.2-.051-.555-.155-.275-.081-.41-.125-.334-.107-.317-.104-.215-.073-.26-.091-.186-.066-.367-.134-.212-.081-.284-.11-.299-.119-.193-.079-.24-.1-.185-.078-.192-.084-.166-.073-.152-.067-.153-.07-.159-.073-.2-.093-.208-.099-.222-.108-.189-.093a31.2 31.2 0 0 1-8.822-6.583.202.202 0 0 0-.349.138l.005 9.52v.773c0 .448.222.87.595 1.118A14.75 14.75 0 0 0 16.791 30"/>
+    <path fill="#133c92" d="m29.746 22.382.051-.093zm.231-.435.014-.025.007-.012z"/>
+    <path fill="#133c9a" d="M33.151 16.582a8.45 8.45 0 0 0-3.744-.869 8.5 8.5 0 0 0-2.303.317l-.252.075-.177.058-.348.127-.606.265-.617.33-.598.386-.404.306-.419.359-.218.206-.374.37-.269.266-.293.289-.281.278-.299.296-.348.344-.256.254-.085.084-.125.122-.063.06-.095.09-.105.099a15 15 0 0 1-3.072 2.175l.2.093.159.073.153.07.152.067.166.073.192.084.185.078.24.1.193.079.299.119.284.11.212.081.367.134.186.066.26.09.215.073.317.104.334.107.41.125.275.081.555.155.2.051.379.079.433.062.585.037.525-.014.491-.055a6 6 0 0 0 .66-.143l.43-.138.385-.158.427-.215.204-.119.191-.122.292-.21.24-.195.407-.384.188-.206.225-.274.17-.23a6 6 0 0 0 .421-.693l.144-.288 1.305-2.599-.003.006a8.1 8.1 0 0 1 1.697-2.439z"/>
+  </g>
+  <text x="114" y="351" font-size="15" font-weight="500" class="t1">Lark (Feishu)</text>
 
-  <!-- iLink (Weixin) -->
-  <rect x="280" y="387" width="200" height="50" rx="12" class="card"/>
-  <circle cx="304" cy="412" r="6" fill="#07C160"/>
-  <text x="322" y="417" font-size="14" font-weight="500" class="t1">iLink (Weixin)</text>
+  <!-- iLink (Weixin) — chat bubble icon (28px) -->
+  <rect x="60" y="387" width="230" height="50" rx="12" class="card"/>
+  <g transform="translate(74, 398) scale(1.4)">
+    <ellipse cx="8.5" cy="11.5" rx="7.5" ry="6" fill="#07C160"/>
+    <ellipse cx="14" cy="6.5" rx="5.5" ry="4.5" fill="#2DC84D"/>
+    <circle cx="12" cy="6" r="1" fill="#fff"/>
+    <circle cx="16" cy="6" r="1" fill="#fff"/>
+    <circle cx="6" cy="11" r="1" fill="#fff"/>
+    <circle cx="11" cy="11" r="1" fill="#fff"/>
+  </g>
+  <text x="114" y="417" font-size="15" font-weight="500" class="t1">iLink (Weixin)</text>
 
-  <text x="380" y="458" text-anchor="middle" font-size="11" font-weight="500" class="t2">More channels ...</text>
+  <text x="175" y="458" text-anchor="middle" font-size="11" font-weight="500" class="t2">More channels ...</text>
 
   <!-- ═══ Codeg Hub (icon from src-tauri/icons/icon.svg, scaled to 80x80) ═══ -->
 
-  <g transform="translate(640,240) scale(0.15625)">
+  <g transform="translate(440,240) scale(0.15625)">
     <rect x="0" y="0" width="512" height="512" rx="90" ry="90" fill="#1a1a2e"/>
     <polyline points="180,186 100,256 180,326" fill="none" stroke="url(#ic-code)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
     <polyline points="332,186 412,256 332,326" fill="none" stroke="url(#ic-code)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
@@ -116,43 +145,63 @@
     <circle cx="256" cy="256" r="36" fill="url(#ic-b2)" opacity="0.95"/>
     <circle cx="306" cy="256" r="30" fill="url(#ic-b3)" opacity="0.95"/>
   </g>
-  <text x="680" y="340" text-anchor="middle" font-size="18" font-weight="700" letter-spacing="0.5" class="t1">Codeg</text>
-  <text x="680" y="358" text-anchor="middle" font-size="11" font-weight="500" class="t2">Unified Hub</text>
+  <text x="480" y="340" text-anchor="middle" font-size="18" font-weight="700" letter-spacing="0.5" class="t1">Codeg</text>
+  <text x="480" y="358" text-anchor="middle" font-size="11" font-weight="500" class="t2">Unified Hub</text>
 
-  <!-- ═══ AI Agent Cards ═══ -->
+  <!-- ═══ Agent Cards (icons from @lobehub/icons) ═══ -->
 
-  <text x="870" y="88" text-anchor="start" font-size="11" font-weight="700" letter-spacing="1.5" class="th">AI CODING AGENTS</text>
+  <text x="660" y="88" text-anchor="start" font-size="11" font-weight="700" letter-spacing="1.5" class="th">AGENTS</text>
 
-  <!-- Claude Code -->
-  <rect x="870" y="112" width="210" height="46" rx="12" class="card"/>
-  <circle cx="892" cy="135" r="5" fill="#D97757"/>
-  <text x="908" y="140" font-size="14" font-weight="500" class="t1">Claude Code</text>
+  <!-- Claude Code — lobehub claudecode icon (28px) -->
+  <rect x="660" y="112" width="230" height="46" rx="12" class="card"/>
+  <g transform="translate(672, 121) scale(1.1667)">
+    <path clip-rule="evenodd" d="M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z" fill="#D97757" fill-rule="evenodd"/>
+  </g>
+  <text x="710" y="140" font-size="15" font-weight="500" class="t1">Claude Code</text>
 
-  <!-- Codex CLI -->
-  <rect x="870" y="170" width="210" height="46" rx="12" class="card"/>
-  <circle cx="892" cy="193" r="5" fill="#10A37F"/>
-  <text x="908" y="198" font-size="14" font-weight="500" class="t1">Codex CLI</text>
+  <!-- Codex CLI — lobehub codex-color icon (28px) -->
+  <rect x="660" y="170" width="230" height="46" rx="12" class="card"/>
+  <g transform="translate(672, 179) scale(1.1667)">
+    <path d="M19.503 0H4.496A4.496 4.496 0 000 4.496v15.007A4.496 4.496 0 004.496 24h15.007A4.496 4.496 0 0024 19.503V4.496A4.496 4.496 0 0019.503 0z" fill="#fff"/>
+    <path d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z" fill="url(#lobe-icons-codex-fill)"/>
+  </g>
+  <text x="710" y="198" font-size="15" font-weight="500" class="t1">Codex CLI</text>
 
-  <!-- OpenCode -->
-  <rect x="870" y="228" width="210" height="46" rx="12" class="card"/>
-  <circle cx="892" cy="251" r="5" fill="#6366F1"/>
-  <text x="908" y="256" font-size="14" font-weight="500" class="t1">OpenCode</text>
+  <!-- OpenCode — lobehub opencode icon (28px) -->
+  <rect x="660" y="228" width="230" height="46" rx="12" class="card"/>
+  <g transform="translate(672, 237) scale(1.1667)" fill="#6366F1" fill-rule="evenodd">
+    <path d="M16 6H8v12h8V6zm4 16H4V2h16v20z"/>
+  </g>
+  <text x="710" y="256" font-size="15" font-weight="500" class="t1">OpenCode</text>
 
-  <!-- Gemini CLI -->
-  <rect x="870" y="286" width="210" height="46" rx="12" class="card"/>
-  <circle cx="892" cy="309" r="5" fill="#8B5CF6"/>
-  <text x="908" y="314" font-size="14" font-weight="500" class="t1">Gemini CLI</text>
+  <!-- Gemini CLI — lobehub geminicli-color icon (28px) -->
+  <rect x="660" y="286" width="230" height="46" rx="12" class="card"/>
+  <g transform="translate(672, 295) scale(1.1667)">
+    <path d="M0 4.391A4.391 4.391 0 014.391 0h15.217A4.391 4.391 0 0124 4.391v15.217A4.391 4.391 0 0119.608 24H4.391A4.391 4.391 0 010 19.608V4.391z" fill="url(#lobe-icons-gemini-cli-fill)"/>
+    <path clip-rule="evenodd" d="M19.74 1.444a2.816 2.816 0 012.816 2.816v15.48a2.816 2.816 0 01-2.816 2.816H4.26a2.816 2.816 0 01-2.816-2.816V4.26A2.816 2.816 0 014.26 1.444h15.48zM7.236 8.564l7.752 3.728-7.752 3.727v2.802l9.557-4.596v-3.866L7.236 5.763v2.801z" fill="#1E1E2E" fill-rule="evenodd"/>
+  </g>
+  <text x="710" y="314" font-size="15" font-weight="500" class="t1">Gemini CLI</text>
 
-  <!-- OpenClaw -->
-  <rect x="870" y="344" width="210" height="46" rx="12" class="card"/>
-  <circle cx="892" cy="367" r="5" fill="#F59E0B"/>
-  <text x="908" y="372" font-size="14" font-weight="500" class="t1">OpenClaw</text>
+  <!-- OpenClaw — lobehub openclaw-color icon (28px) -->
+  <rect x="660" y="344" width="230" height="46" rx="12" class="card"/>
+  <g transform="translate(672, 353) scale(1.1667)">
+    <path d="M12 2.568c-6.33 0-9.495 5.275-9.495 9.495 0 4.22 3.165 8.44 6.33 9.494v2.11h2.11v-2.11s1.055.422 2.11 0v2.11h2.11v-2.11c3.165-1.055 6.33-5.274 6.33-9.494S18.33 2.568 12 2.568z" fill="url(#lobe-icons-open-claw-fill-0)"/>
+    <path d="M3.56 9.953C.396 8.898-.66 11.008.396 13.118c1.055 2.11 3.164 1.055 4.22-1.055.632-1.477 0-2.11-1.056-2.11z" fill="url(#lobe-icons-open-claw-fill-1)"/>
+    <path d="M20.44 9.953c3.164-1.055 4.22 1.055 3.164 3.165-1.055 2.11-3.164 1.055-4.22-1.055-.632-1.477 0-2.11 1.056-2.11z" fill="url(#lobe-icons-open-claw-fill-2)"/>
+    <path d="M5.507 1.875c.476-.285 1.036-.233 1.615.037.577.27 1.223.774 1.937 1.488a.316.316 0 01-.447.447c-.693-.693-1.279-1.138-1.757-1.361-.475-.222-.795-.205-1.022-.069a.317.317 0 01-.326-.542zM16.877 1.913c.58-.27 1.14-.323 1.616-.038a.317.317 0 01-.326.542c-.227-.136-.547-.153-1.022.069-.478.223-1.064.668-1.756 1.361a.316.316 0 11-.448-.447c.714-.714 1.36-1.218 1.936-1.487z" fill="#FF4D4D"/>
+    <path d="M8.835 9.109a1.266 1.266 0 100-2.532 1.266 1.266 0 000 2.532zM15.165 9.109a1.266 1.266 0 100-2.532 1.266 1.266 0 000 2.532z" fill="#050810"/>
+    <path d="M9.046 8.16a.527.527 0 100-1.056.527.527 0 000 1.055zM15.376 8.16a.527.527 0 100-1.055.527.527 0 000 1.054z" fill="#00E5CC"/>
+  </g>
+  <text x="710" y="372" font-size="15" font-weight="500" class="t1">OpenClaw</text>
 
-  <!-- Cline -->
-  <rect x="870" y="402" width="210" height="46" rx="12" class="card"/>
-  <circle cx="892" cy="425" r="5" fill="#EC4899"/>
-  <text x="908" y="430" font-size="14" font-weight="500" class="t1">Cline</text>
+  <!-- Cline — lobehub cline icon (28px) -->
+  <rect x="660" y="402" width="230" height="46" rx="12" class="card"/>
+  <g transform="translate(672, 411) scale(1.1667)" fill="#EC4899" fill-rule="evenodd">
+    <path d="M17.035 3.991c2.75 0 4.98 2.24 4.98 5.003v1.667l1.45 2.896a1.01 1.01 0 01-.002.909l-1.448 2.864v1.668c0 2.762-2.23 5.002-4.98 5.002H7.074c-2.751 0-4.98-2.24-4.98-5.002V17.33l-1.48-2.855a1.01 1.01 0 01-.003-.927l1.482-2.887V8.994c0-2.763 2.23-5.003 4.98-5.003h9.962zM8.265 9.6a2.274 2.274 0 00-2.274 2.274v4.042a2.274 2.274 0 004.547 0v-4.042A2.274 2.274 0 008.265 9.6zm7.326 0a2.274 2.274 0 00-2.274 2.274v4.042a2.274 2.274 0 104.548 0v-4.042A2.274 2.274 0 0015.59 9.6z"/>
+    <path d="M12.054 5.558a2.779 2.779 0 100-5.558 2.779 2.779 0 000 5.558z"/>
+  </g>
+  <text x="710" y="430" font-size="15" font-weight="500" class="t1">Cline</text>
 
-  <text x="975" y="468" text-anchor="middle" font-size="11" font-weight="500" class="t2">More agents ...</text>
+  <text x="775" y="468" text-anchor="middle" font-size="11" font-weight="500" class="t2">More agents ...</text>
 
 </svg>