diff --git a/README.md b/README.md
index a422cf1..97f7896 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,7 @@ remote development from any browser — with conversation aggregation, parallel
 development, MCP/Skills management, chat channel interactions (Telegram, Lark, iLink, etc.),
 and integrated Git/file/terminal workflows.
 
-## Communication Flow
-
-![Communication Flow](./docs/images/communication-flow.svg)
+![gallery](./docs/images/gallery.svg)
 
 ## Main Interface
 ![Codeg Light](./docs/images/main-light.png#gh-light-mode-only)
diff --git a/docs/images/gallery.png b/docs/images/gallery.png
new file mode 100644
index 0000000..bf61d6b
Binary files /dev/null and b/docs/images/gallery.png differ
diff --git a/docs/images/gallery.svg b/docs/images/gallery.svg
new file mode 100644
index 0000000..6a0dd5d
--- /dev/null
+++ b/docs/images/gallery.svg
@@ -0,0 +1,304 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1270 760" width="1270" height="760" fill="none" role="img" aria-label="Codeg Product Overview">
+  <defs>
+    <style>
+      @keyframes f { to { stroke-dashoffset: -24 } }
+      text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif }
+      .fl { stroke-width: 2; stroke-dasharray: 8 4; stroke-linecap: round; fill: none; animation: f .8s linear infinite; stroke: #93c5fd }
+      .card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1 }
+      .fc { fill: #f9fafb; stroke: #e5e7eb; stroke-width: 1 }
+      .t1 { fill: #1f2937 }
+      .t2 { fill: #6b7280 }
+      .th { fill: #9ca3af }
+      .dp { fill: #f3f4f6; stroke: #e5e7eb; stroke-width: 1 }
+      .bg { fill: #ffffff }
+      @media (prefers-color-scheme: dark) {
+        .fl { stroke: #3b82f6 }
+        .card { fill: #161b22; stroke: #30363d }
+        .fc { fill: #0d1117; stroke: #30363d }
+        .t1 { fill: #e6edf3 }
+        .t2 { fill: #8b949e }
+        .th { fill: #6e7681 }
+        .dp { fill: #161b22; stroke: #30363d }
+        .bg { fill: #0d1117 }
+      }
+    </style>
+    <!-- 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"/>
+    </linearGradient>
+    <linearGradient id="ic-b1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff4081"/>
+      <stop offset="100%" stop-color="#e91e63"/>
+    </linearGradient>
+    <linearGradient id="ic-b2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffeb3b"/>
+      <stop offset="100%" stop-color="#fdd835"/>
+    </linearGradient>
+    <linearGradient id="ic-b3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#29b6f6"/>
+      <stop offset="100%" stop-color="#03a9f4"/>
+    </linearGradient>
+    <!-- Agent icon gradients -->
+    <linearGradient gradientUnits="userSpaceOnUse" id="g-codex" 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>
+    <linearGradient gradientUnits="userSpaceOnUse" id="g-gemini" 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>
+    <linearGradient gradientUnits="userSpaceOnUse" id="g-claw0" 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="g-claw1" 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="g-claw2" x1="19.385" x2="24.399" y1="9.953" y2="14.462">
+      <stop stop-color="#FF4D4D"/>
+      <stop offset="1" stop-color="#991B1B"/>
+    </linearGradient>
+    <!-- Feature icon gradient -->
+    <linearGradient id="g-feat" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#818cf8"/>
+      <stop offset="100%" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1270" height="760" rx="0" class="bg"/>
+
+  <!-- ═══════════ TITLE ═══════════ -->
+  <text x="635" y="50" text-anchor="middle" font-size="22" font-weight="700" letter-spacing="0.5" class="t1">Multi-Agent Coding Workspace — Desktop · Server · Docker</text>
+
+  <!-- ═══════════ FLOW LINES ═══════════ -->
+
+  <!-- Clients → Codeg Hub -->
+  <path d="M330,164 C430,164 500,288 580,288" class="fl" style="animation-delay:-0.1s"/>
+  <path d="M330,226 C430,226 500,288 580,288" class="fl" style="animation-delay:-0.25s"/>
+  <path d="M330,288 C400,288 510,288 580,288" class="fl" style="animation-delay:-0.4s"/>
+  <path d="M330,350 C430,350 500,288 580,288" class="fl" style="animation-delay:-0.55s"/>
+  <path d="M330,412 C430,412 500,288 580,288" class="fl" style="animation-delay:-0.7s"/>
+
+  <!-- Codeg Hub → Agents -->
+  <path d="M690,288 C760,288 840,145 940,145" class="fl" style="animation-delay:-0.05s"/>
+  <path d="M690,288 C760,288 840,202 940,202" class="fl" style="animation-delay:-0.2s"/>
+  <path d="M690,288 C760,288 840,259 940,259" class="fl" style="animation-delay:-0.35s"/>
+  <path d="M690,288 C760,288 840,316 940,316" class="fl" style="animation-delay:-0.5s"/>
+  <path d="M690,288 C760,288 840,373 940,373" class="fl" style="animation-delay:-0.65s"/>
+  <path d="M690,288 C760,288 840,430 940,430" class="fl" style="animation-delay:-0.8s"/>
+
+  <!-- ═══════════ CLIENT CARDS ═══════════ -->
+
+  <text x="60" y="98" font-size="11" font-weight="700" letter-spacing="1.5" class="th">CLIENTS</text>
+
+  <!-- Web Browser -->
+  <rect x="60" y="139" width="270" height="50" rx="12" class="card"/>
+  <g transform="translate(74,150) 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"/>
+  </g>
+  <text x="114" y="169" font-size="15" font-weight="500" class="t1">Web Browser</text>
+
+  <!-- Desktop App -->
+  <rect x="60" y="201" width="270" height="50" rx="12" class="card"/>
+  <g transform="translate(74,212) 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="231" font-size="15" font-weight="500" class="t1">Desktop App</text>
+
+  <!-- Telegram -->
+  <rect x="60" y="263" width="270" height="50" rx="12" class="card"/>
+  <g transform="translate(74,274) 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="293" font-size="15" font-weight="500" class="t1">Telegram</text>
+
+  <!-- Lark (Feishu) -->
+  <rect x="60" y="325" width="270" height="50" rx="12" class="card"/>
+  <g transform="translate(74,336) 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="#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="355" font-size="15" font-weight="500" class="t1">Lark (Feishu)</text>
+
+  <!-- iLink (Weixin) -->
+  <rect x="60" y="387" width="270" 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="195" y="458" text-anchor="middle" font-size="11" font-weight="500" class="t2">More channels ...</text>
+
+  <!-- ═══════════ CODEG HUB ═══════════ -->
+
+  <g transform="translate(595,248) 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"/>
+    <circle cx="206" cy="256" r="30" fill="url(#ic-b1)" opacity="0.95"/>
+    <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="635" y="350" text-anchor="middle" font-size="20" font-weight="700" letter-spacing="0.5" class="t1">Codeg</text>
+  <text x="635" y="370" text-anchor="middle" font-size="12" font-weight="500" class="t2">Unified Hub</text>
+
+  <!-- ═══════════ AGENT CARDS ═══════════ -->
+
+  <text x="940" y="98" font-size="11" font-weight="700" letter-spacing="1.5" class="th">AGENTS</text>
+
+  <!-- Claude Code -->
+  <rect x="940" y="122" width="270" height="46" rx="12" class="card"/>
+  <g transform="translate(952,131) 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="990" y="150" font-size="15" font-weight="500" class="t1">Claude Code</text>
+
+  <!-- Codex CLI -->
+  <rect x="940" y="179" width="270" height="46" rx="12" class="card"/>
+  <g transform="translate(952,188) 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(#g-codex)"/>
+  </g>
+  <text x="990" y="207" font-size="15" font-weight="500" class="t1">Codex CLI</text>
+
+  <!-- OpenCode -->
+  <rect x="940" y="236" width="270" height="46" rx="12" class="card"/>
+  <g transform="translate(952,245) scale(1.1667)" fill="#6366F1" fill-rule="evenodd">
+    <path d="M16 6H8v12h8V6zm4 16H4V2h16v20z"/>
+  </g>
+  <text x="990" y="264" font-size="15" font-weight="500" class="t1">OpenCode</text>
+
+  <!-- Gemini CLI -->
+  <rect x="940" y="293" width="270" height="46" rx="12" class="card"/>
+  <g transform="translate(952,302) 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(#g-gemini)"/>
+    <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="990" y="321" font-size="15" font-weight="500" class="t1">Gemini CLI</text>
+
+  <!-- OpenClaw -->
+  <rect x="940" y="350" width="270" height="46" rx="12" class="card"/>
+  <g transform="translate(952,359) 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(#g-claw0)"/>
+    <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(#g-claw1)"/>
+    <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(#g-claw2)"/>
+    <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="990" y="378" font-size="15" font-weight="500" class="t1">OpenClaw</text>
+
+  <!-- Cline -->
+  <rect x="940" y="407" width="270" height="46" rx="12" class="card"/>
+  <g transform="translate(952,416) 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="990" y="435" font-size="15" font-weight="500" class="t1">Cline</text>
+
+  <text x="1075" y="475" text-anchor="middle" font-size="11" font-weight="500" class="t2">More agents ...</text>
+
+  <!-- ═══════════ FEATURE CARDS ═══════════ -->
+
+  <text x="635" y="520" text-anchor="middle" font-size="11" font-weight="700" letter-spacing="1.5" class="th">KEY FEATURES</text>
+
+  <!-- Feature 1: Conversation Aggregation -->
+  <rect x="66" y="540" width="210" height="90" rx="14" class="fc"/>
+  <g transform="translate(171,558)" fill="none" stroke="url(#g-feat)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M-8,-8 h16 v10 h-16z" rx="2"/>
+    <path d="M-5,-4 h10 M-5,-1 h7"/>
+    <path d="M-4,4 h8 v6 h-8z"/>
+    <path d="M-1,7 h4"/>
+  </g>
+  <text x="171" y="585" text-anchor="middle" font-size="13" font-weight="600" class="t1">Conversation</text>
+  <text x="171" y="601" text-anchor="middle" font-size="13" font-weight="600" class="t1">Aggregation</text>
+  <text x="171" y="620" text-anchor="middle" font-size="10" class="t2">Unified session viewer</text>
+
+  <!-- Feature 2: Git Worktree -->
+  <rect x="296" y="540" width="210" height="90" rx="14" class="fc"/>
+  <g transform="translate(401,558)" fill="none" stroke="url(#g-feat)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="0" cy="-6" r="3"/>
+    <circle cx="-6" cy="6" r="3"/>
+    <circle cx="6" cy="6" r="3"/>
+    <path d="M0,-3 V0 M-3,4.5 L0,0 L3,4.5"/>
+  </g>
+  <text x="401" y="592" text-anchor="middle" font-size="13" font-weight="600" class="t1">Git Worktree</text>
+  <text x="401" y="620" text-anchor="middle" font-size="10" class="t2">Parallel development</text>
+
+  <!-- Feature 3: Terminal -->
+  <rect x="526" y="540" width="210" height="90" rx="14" class="fc"/>
+  <g transform="translate(631,558)" fill="none" stroke="url(#g-feat)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="-10" y="-8" width="20" height="16" rx="2"/>
+    <path d="M-5,-2 L-1,2 L-5,6"/>
+    <path d="M2,6 h5"/>
+  </g>
+  <text x="631" y="592" text-anchor="middle" font-size="13" font-weight="600" class="t1">Terminal</text>
+  <text x="631" y="620" text-anchor="middle" font-size="10" class="t2">Integrated shell</text>
+
+  <!-- Feature 4: MCP & Skills -->
+  <rect x="756" y="540" width="210" height="90" rx="14" class="fc"/>
+  <g transform="translate(861,558)" fill="none" stroke="url(#g-feat)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M-4,-8 L-8,0 L-4,8 L4,8 L8,0 L4,-8 Z"/>
+    <circle cx="0" cy="0" r="3"/>
+  </g>
+  <text x="861" y="592" text-anchor="middle" font-size="13" font-weight="600" class="t1">MCP &amp; Skills</text>
+  <text x="861" y="620" text-anchor="middle" font-size="10" class="t2">Plugin management</text>
+
+  <!-- Feature 5: Code Editor -->
+  <rect x="986" y="540" width="210" height="90" rx="14" class="fc"/>
+  <g transform="translate(1091,558)" fill="none" stroke="url(#g-feat)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="-10" y="-8" width="20" height="16" rx="2"/>
+    <path d="M-4,-3 L-7,0 L-4,3"/>
+    <path d="M4,-3 L7,0 L4,3"/>
+    <line x1="-1" y1="-4" x2="1" y2="4"/>
+  </g>
+  <text x="1091" y="592" text-anchor="middle" font-size="13" font-weight="600" class="t1">Code Editor</text>
+  <text x="1091" y="620" text-anchor="middle" font-size="10" class="t2">Rust-powered backend</text>
+
+  <!-- ═══════════ DEPLOYMENT FOOTER ═══════════ -->
+
+  <rect x="395" y="660" width="130" height="36" rx="10" class="dp"/>
+  <g transform="translate(411,670) scale(0.8)" fill="none" stroke="#24C8DB" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="0" y="0" width="16" height="11" rx="2"/>
+    <line x1="8" y1="11" x2="8" y2="15"/>
+    <line x1="4" y1="15" x2="12" y2="15"/>
+  </g>
+  <text x="440" y="683" font-size="12" font-weight="500" class="t1">Desktop</text>
+
+  <rect x="545" y="660" width="180" height="36" rx="10" class="dp"/>
+  <g transform="translate(561,670) scale(0.8)" fill="none" stroke="#10B981" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="1" y="0" width="14" height="16" rx="2"/>
+    <line x1="1" y1="4" x2="15" y2="4"/>
+    <circle cx="4" cy="2" r="0.8" fill="#10B981"/>
+    <circle cx="7" cy="2" r="0.8" fill="#10B981"/>
+  </g>
+  <text x="588" y="683" font-size="12" font-weight="500" class="t1">Self-hosted Server</text>
+
+  <rect x="745" y="660" width="130" height="36" rx="10" class="dp"/>
+  <g transform="translate(761,670) scale(0.8)" fill="none" stroke="#2496ED" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M1,10 h3v-4h3v4h3v-6h3v6h3"/>
+    <path d="M0,10 Q0,15 8,15 Q16,15 16,10"/>
+  </g>
+  <text x="790" y="683" font-size="12" font-weight="500" class="t1">Docker</text>
+
+  <text x="635" y="730" text-anchor="middle" font-size="11" class="t2">Access from anywhere — deploy your way</text>
+
+</svg>
diff --git a/docs/readme/README.ar.md b/docs/readme/README.ar.md
index e46d6a4..9932cc9 100644
--- a/docs/readme/README.ar.md
+++ b/docs/readme/README.ar.md
@@ -21,12 +21,10 @@
 
 Codeg (Code Generation) هو مساحة عمل مؤسسية متعددة الوكلاء للبرمجة.
 يوحّد وكلاء البرمجة المحليين بالذكاء الاصطناعي (Claude Code، Codex CLI، OpenCode، Gemini CLI،
-OpenClaw، وغيرها) في تطبيق سطح مكتب أو خادم مستقل أو حاوية Docker — مما يتيح التطوير عن بُعد من أي متصفح — مع تجميع المحادثات، والتطوير المتوازي
+OpenClaw، Cline، وغيرها) في تطبيق سطح مكتب أو خادم مستقل أو حاوية Docker — مما يتيح التطوير عن بُعد من أي متصفح — مع تجميع المحادثات، والتطوير المتوازي
 عبر `git worktree`، وإدارة MCP/Skills، والتفاعل عبر قنوات الدردشة (Telegram وLark وiLink وغيرها)، وسير عمل متكامل لـ Git/الملفات/الطرفية.
 
-## تدفق الاتصال
-
-![تدفق الاتصال](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## الواجهة الرئيسية
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -43,7 +41,7 @@ OpenClaw، وغيرها) في تطبيق سطح مكتب أو خادم مستق
 - استيعاب محلي للمحادثات مع عرض منظّم
 - تطوير متوازي مع تدفقات `git worktree` مدمجة
 - **مُنشئ المشروع** — إنشاء مشاريع جديدة بصريًا مع معاينة حية
-- **قنوات الدردشة** — ربط Telegram وLark (Feishu) وiLink (Weixin) والمزيد بوكلاء البرمجة للتفاعل الكامل مع الجلسات والتحكم عن بُعد في المهام
+- **قنوات الدردشة** — ربط Telegram وLark (Feishu) وiLink (Weixin) والمزيد بوكلاء البرمجة لاستقبال الإشعارات الفورية والتفاعل الكامل مع الجلسات والتحكم عن بُعد في المهام
 - إدارة MCP (فحص محلي + بحث/تثبيت من السجل)
 - إدارة Skills (نطاق عام ونطاق المشروع)
 - إدارة حسابات Git البعيدة (GitHub وخوادم Git الأخرى)
diff --git a/docs/readme/README.de.md b/docs/readme/README.de.md
index 1575ef1..7079615 100644
--- a/docs/readme/README.de.md
+++ b/docs/readme/README.de.md
@@ -22,14 +22,12 @@
 Codeg (Code Generation) ist ein unternehmenstauglicher Multi-Agent-Workspace
 für die Programmierung.
 Es vereint lokale KI-Coding-Agenten (Claude Code, Codex CLI, OpenCode,
-Gemini CLI, OpenClaw usw.) in einer Desktop-App, einem Standalone-Server oder
+Gemini CLI, OpenClaw, Cline usw.) in einer Desktop-App, einem Standalone-Server oder
 Docker-Container — Remote-Entwicklung von jedem Browser aus — mit Konversationsaggregation,
 paralleler `git worktree`-Entwicklung, MCP/Skills-Verwaltung, Chat-Kanal-Integration
 (Telegram, Lark, iLink usw.) und integrierten Git/Datei/Terminal-Workflows.
 
-## Kommunikationsfluss
-
-![Kommunikationsfluss](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## Hauptoberfläche
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -46,12 +44,12 @@ paralleler `git worktree`-Entwicklung, MCP/Skills-Verwaltung, Chat-Kanal-Integra
 - Lokale Konversationserfassung mit strukturierter Darstellung
 - Parallele Entwicklung mit integrierten `git worktree`-Abläufen
 - **Projekt-Starter** — neue Projekte visuell erstellen mit Live-Vorschau
-- **Chat-Kanäle** — Telegram, Lark (Feishu), iLink (Weixin) und mehr mit Ihren Coding-Agenten verbinden für vollständige Sitzungsinteraktion und Remote-Aufgabensteuerung
+- **Chat-Kanäle** — Telegram, Lark (Feishu), iLink (Weixin) und mehr mit Ihren Coding-Agenten verbinden für Echtzeit-Benachrichtigungen, vollständige Sitzungsinteraktion und Remote-Aufgabensteuerung
 - MCP-Verwaltung (lokaler Scan + Registry-Suche/Installation)
 - Skills-Verwaltung (global und projektbezogen)
 - Git-Remote-Kontoverwaltung (GitHub und andere Git-Server)
 - Webdienst-Modus — Zugriff auf Codeg über jeden Browser für Remote-Arbeit
-- Standalone-Server-Bereitstellung — codeg-server auf jedem Linux/macOS-Server ausführen, Zugriff über den Browser
+- **Standalone-Server-Bereitstellung** — `codeg-server` auf jedem Linux/macOS-Server ausführen, Zugriff über den Browser
 - **Docker-Unterstützung** — `docker compose up` oder `docker run`, mit benutzerdefiniertem Token/Port, Datenpersistenz und Projektverzeichnis-Mounts
 - Integrierter Engineering-Kreislauf (Dateibaum, Diff, Git-Änderungen, Commit, Terminal)
 
diff --git a/docs/readme/README.es.md b/docs/readme/README.es.md
index 046c1d9..2320da9 100644
--- a/docs/readme/README.es.md
+++ b/docs/readme/README.es.md
@@ -27,9 +27,7 @@ o contenedor Docker — permitiendo el desarrollo remoto desde cualquier navegad
 de conversaciones, desarrollo paralelo con `git worktree`, gestión de MCP/Skills,
 interacción con canales de chat (Telegram, Lark, iLink, etc.) y flujos integrados de Git/archivos/terminal.
 
-## Flujo de comunicación
-
-![Flujo de comunicación](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## Interfaz principal
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -46,12 +44,12 @@ interacción con canales de chat (Telegram, Lark, iLink, etc.) y flujos integrad
 - Ingesta local de conversaciones con renderizado estructurado
 - Desarrollo paralelo con flujos integrados de `git worktree`
 - **Inicio de Proyecto** — crea nuevos proyectos visualmente con vista previa en tiempo real
-- **Canales de Chat** — conecta Telegram, Lark (Feishu), iLink (Weixin) y más a tus agentes de codificación para interacción completa con sesiones y control remoto de tareas
+- **Canales de Chat** — conecta Telegram, Lark (Feishu), iLink (Weixin) y más a tus agentes de codificación para notificaciones en tiempo real, interacción completa con sesiones y control remoto de tareas
 - Gestión de MCP (escaneo local + búsqueda/instalación desde registro)
 - Gestión de Skills (ámbito global y por proyecto)
 - Gestión de cuentas remotas de Git (GitHub y otros servidores Git)
 - Modo de servicio web — accede a Codeg desde cualquier navegador para trabajo remoto
-- Despliegue como servidor independiente — ejecuta codeg-server en cualquier servidor Linux/macOS, accede desde el navegador
+- **Despliegue como servidor independiente** — ejecuta `codeg-server` en cualquier servidor Linux/macOS, accede desde el navegador
 - **Soporte Docker** — `docker compose up` o `docker run`, con token/puerto personalizables, persistencia de datos y montaje de directorios de proyecto
 - Ciclo de ingeniería integrado (árbol de archivos, diff, cambios git, commit, terminal)
 
diff --git a/docs/readme/README.fr.md b/docs/readme/README.fr.md
index b35c35b..60a08a9 100644
--- a/docs/readme/README.fr.md
+++ b/docs/readme/README.fr.md
@@ -26,9 +26,7 @@ Docker — permettant le développement à distance depuis n'importe quel naviga
 parallèle via `git worktree`, gestion MCP/Skills, interaction avec les canaux de chat (Telegram, Lark, iLink, etc.)
 et workflows intégrés Git/fichiers/terminal.
 
-## Flux de communication
-
-![Flux de communication](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## Interface principale
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -45,12 +43,12 @@ et workflows intégrés Git/fichiers/terminal.
 - Ingestion locale des conversations avec rendu structuré
 - Développement parallèle avec flux `git worktree` intégré
 - **Lanceur de projet** — créez visuellement de nouveaux projets avec aperçu en temps réel
-- **Canaux de chat** — connectez Telegram, Lark (Feishu), iLink (Weixin) et plus à vos agents de codage pour une interaction complète avec les sessions et le contrôle à distance des tâches
+- **Canaux de chat** — connectez Telegram, Lark (Feishu), iLink (Weixin) et plus à vos agents de codage pour des notifications en temps réel, une interaction complète avec les sessions et le contrôle à distance des tâches
 - Gestion MCP (scan local + recherche/installation depuis le registre)
 - Gestion des Skills (portée globale et projet)
 - Gestion des comptes distants Git (GitHub et autres serveurs Git)
 - Mode service web — accédez à Codeg depuis n'importe quel navigateur pour le travail à distance
-- Déploiement en serveur autonome — exécutez codeg-server sur n'importe quel serveur Linux/macOS, accédez via le navigateur
+- **Déploiement en serveur autonome** — exécutez `codeg-server` sur n'importe quel serveur Linux/macOS, accédez via le navigateur
 - **Support Docker** — `docker compose up` ou `docker run`, avec token/port personnalisables, persistance des données et montage de répertoires de projets
 - Boucle d'ingénierie intégrée (arborescence de fichiers, diff, changements git, commit, terminal)
 
diff --git a/docs/readme/README.ja.md b/docs/readme/README.ja.md
index 654605d..0f534cf 100644
--- a/docs/readme/README.ja.md
+++ b/docs/readme/README.ja.md
@@ -20,13 +20,11 @@
 </p>
 
 Codeg（Code Generation）は、エンタープライズ級のマルチ Agent コーディングワークスペースです。
-Claude Code、Codex CLI、OpenCode、Gemini CLI、OpenClaw などのローカル AI コーディング Agent を
+Claude Code、Codex CLI、OpenCode、Gemini CLI、OpenClaw、Cline などのローカル AI コーディング Agent を
 デスクトップアプリ、スタンドアロンサーバー、または Docker コンテナに統合し——ブラウザからどこでもリモート開発が可能——会話集約、並列 `git worktree` 開発、MCP/Skills 管理、
 チャットチャンネル連携（Telegram、Lark、iLink など）、Git/ファイル/ターミナル連携ワークフローを提供します。
 
-## 通信フロー
-
-![通信フロー](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## メインインターフェース
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -43,7 +41,7 @@ Claude Code、Codex CLI、OpenCode、Gemini CLI、OpenClaw などのローカル
 - ローカル会話の取り込みと構造化レンダリング
 - 内蔵 `git worktree` フローによる並列開発
 - **プロジェクトブート** — ビジュアル設定とライブプレビューで新規プロジェクトを作成
-- **チャットチャンネル** — Telegram、Lark（Feishu）、iLink（Weixin）などをコーディング Agent に接続し、チャットからフルセッション操作やリモートタスク制御を実行
+- **チャットチャンネル** — Telegram、Lark（Feishu）、iLink（Weixin）などをコーディング Agent に接続し、リアルタイム通知の受信、フルセッション操作、リモートタスク制御を実行
 - MCP 管理（ローカルスキャン + レジストリ検索/インストール）
 - Skills 管理（グローバルおよびプロジェクトスコープ）
 - Git リモートアカウント管理（GitHub およびその他の Git サーバー）
diff --git a/docs/readme/README.ko.md b/docs/readme/README.ko.md
index dc5ab49..1627d27 100644
--- a/docs/readme/README.ko.md
+++ b/docs/readme/README.ko.md
@@ -20,13 +20,11 @@
 </p>
 
 Codeg(Code Generation)는 엔터프라이즈급 멀티 Agent 코딩 워크스페이스입니다.
-Claude Code, Codex CLI, OpenCode, Gemini CLI, OpenClaw 등 로컬 AI 코딩 Agent를
+Claude Code, Codex CLI, OpenCode, Gemini CLI, OpenClaw, Cline 등 로컬 AI 코딩 Agent를
 데스크톱 앱, 독립형 서버 또는 Docker 컨테이너로 통합하여 — 브라우저만으로 어디서든 원격 개발이 가능하며 — 대화 집계, 병렬 `git worktree` 개발, MCP/Skills 관리,
 채팅 채널 연동(Telegram, Lark, iLink 등), Git/파일/터미널 통합 워크플로를 제공합니다.
 
-## 통신 흐름
-
-![통신 흐름](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## 메인 인터페이스
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -43,7 +41,7 @@ Claude Code, Codex CLI, OpenCode, Gemini CLI, OpenClaw 등 로컬 AI 코딩 Agen
 - 로컬 대화 수집 및 구조화 렌더링
 - 내장 `git worktree` 플로를 통한 병렬 개발
 - **프로젝트 부트** — 시각적 설정과 실시간 미리보기로 새 프로젝트 생성
-- **채팅 채널** — Telegram, Lark(Feishu), iLink(Weixin) 등을 코딩 에이전트에 연결하여 전체 세션 상호작용 및 원격 작업 제어
+- **채팅 채널** — Telegram, Lark(Feishu), iLink(Weixin) 등을 코딩 에이전트에 연결하여 실시간 알림 수신, 전체 세션 상호작용 및 원격 작업 제어
 - MCP 관리 (로컬 스캔 + 레지스트리 검색/설치)
 - Skills 관리 (글로벌 및 프로젝트 범위)
 - Git 원격 계정 관리 (GitHub 및 기타 Git 서버)
diff --git a/docs/readme/README.pt.md b/docs/readme/README.pt.md
index 62af52d..eb2c4e5 100644
--- a/docs/readme/README.pt.md
+++ b/docs/readme/README.pt.md
@@ -26,9 +26,7 @@ Docker — possibilitando o desenvolvimento remoto a partir de qualquer navegado
 paralelo via `git worktree`, gerenciamento de MCP/Skills, interação com canais de chat (Telegram, Lark, iLink, etc.)
 e fluxos integrados de Git/arquivos/terminal.
 
-## Fluxo de comunicação
-
-![Fluxo de comunicação](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## Interface principal
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -45,7 +43,7 @@ e fluxos integrados de Git/arquivos/terminal.
 - Ingestão local de conversas com renderização estruturada
 - Desenvolvimento paralelo com fluxos `git worktree` integrados
 - **Inicializador de Projeto** — crie novos projetos visualmente com pré-visualização em tempo real
-- **Canais de Chat** — conecte Telegram, Lark (Feishu), iLink (Weixin) e mais aos seus agentes de codificação para interação completa de sessão e controle remoto de tarefas
+- **Canais de Chat** — conecte Telegram, Lark (Feishu), iLink (Weixin) e mais aos seus agentes de codificação para notificações em tempo real, interação completa de sessão e controle remoto de tarefas
 - Gerenciamento de MCP (varredura local + busca/instalação no registro)
 - Gerenciamento de Skills (escopo global e por projeto)
 - Gerenciamento de contas remotas Git (GitHub e outros servidores Git)
diff --git a/docs/readme/README.zh-CN.md b/docs/readme/README.zh-CN.md
index e643134..9e81c83 100644
--- a/docs/readme/README.zh-CN.md
+++ b/docs/readme/README.zh-CN.md
@@ -24,9 +24,7 @@ Codeg（Code Generation）是一个企业级多 Agent 编码工作台。
 OpenClaw、Cline 等）统一到桌面应用、独立服务器或 Docker 容器中——通过浏览器即可远程开发——支持对话聚合、
 并行 `git worktree` 开发、MCP/Skills 管理、消息渠道交互（Telegram、飞书、iLink 等），以及集成的 Git/文件/终端工作流。
 
-## 通信流程
-
-![通信流程](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## 主界面
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
diff --git a/docs/readme/README.zh-TW.md b/docs/readme/README.zh-TW.md
index 82665ec..6631531 100644
--- a/docs/readme/README.zh-TW.md
+++ b/docs/readme/README.zh-TW.md
@@ -24,9 +24,7 @@ Codeg（Code Generation）是一個企業級多 Agent 編碼工作台。
 OpenClaw、Cline 等）整合到桌面應用、獨立伺服器或 Docker 容器中——透過瀏覽器即可遠端開發——支援對話彙整、並行 `git worktree`
 開發、MCP/Skills 管理、訊息渠道互動（Telegram、飛書、iLink 等），以及整合的 Git/檔案/終端工作流。
 
-## 通訊流程
-
-![通訊流程](../images/communication-flow.svg)
+![gallery](../images/gallery.svg)
 
 ## 主介面
 ![Codeg Light](../images/main-light.png#gh-light-mode-only)
@@ -43,7 +41,7 @@ OpenClaw、Cline 等）整合到桌面應用、獨立伺服器或 Docker 容器
 - 本地對話解析與結構化渲染
 - 內建 `git worktree` 並行開發流程
 - **專案啟動器** — 視覺化建立新專案，即時預覽效果
-- **訊息渠道** — 連接 Telegram、飛書、iLink（微信）等即時通訊應用到編碼代理，完整會話交互、遠端任務控制
+- **訊息渠道** — 連接 Telegram、飛書、iLink（微信）等即時通訊應用到編碼代理，即時接收通知、完整會話交互、遠端任務控制
 - MCP 管理（本地掃描 + 市場搜尋/安裝）
 - Skills 管理（全域與專案級）
 - Git 遠端帳號管理（支援 GitHub 及其他 Git 伺服器）