diff --git a/README.md b/README.md
index 0d9f15d..427758c 100644
--- a/README.md
+++ b/README.md
@@ -17,10 +17,10 @@ Plan, search, implement, test, review, and deliver changes through a streaming w
 
 <p align="center">
   <a href="assets/demo/coding-agent-demo.mp4">
-    <img src="assets/demo/completed-github-pr-task.png" alt="Watch CODING complete a repository task and prepare a pull request" width="92%">
+    <img src="assets/demo/coding-agent-demo-preview.gif" alt="Preview: CODING searches a repository, edits code, runs checks, and prepares a pull request" width="92%">
   </a>
 </p>
-<p align="center"><a href="assets/demo/coding-agent-demo.mp4">▶ Watch the 89-second coding workflow demo</a></p>
+<p align="center">▶ Animated preview · <a href="assets/demo/coding-agent-demo.mp4">Open the full 89-second video</a></p>
 
 ## What is CODING?
 
@@ -42,7 +42,8 @@ CODING is a web-based AI coding agent for real Git repositories. It turns a requ
 
 Solid borders show the current application and Eval paths. The dashed area is the documented scale-out target; it is not the default runtime topology.
 
-<p align="center"><img src="assets/architecture-en.svg" alt="CODING architecture" width="100%"></p>
+<p align="center"><a href="assets/architecture-en.svg"><img src="assets/architecture-flow-en.gif" alt="Animated CODING architecture: request routing, agent execution, isolated evaluation, and evidence flow" width="100%"></a></p>
+<p align="center">Animated flow · <a href="assets/architecture-en.svg">Open the scalable SVG diagram</a></p>
 
 The deployment design describes **3 Agent Workers and 2 ASGI nodes**, with estimates of about **170 peak concurrent requests** and **20–30 concurrent coding/review tasks**. Treat these as design capacity estimates: this repository does not include a load-test report validating those figures. The Redis queue, repository lock, and event stream are shown as target components, not current application services.
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 6ba3b93..6358952 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -17,10 +17,10 @@
 
 <p align="center">
   <a href="assets/demo/coding-agent-demo.mp4">
-    <img src="assets/demo/completed-github-pr-task.png" alt="点击观看 CODING 完成仓库任务并准备 Pull Request 的演示" width="92%">
+    <img src="assets/demo/coding-agent-demo-preview.gif" alt="预览：CODING 检索仓库、修改代码、运行检查并准备 Pull Request" width="92%">
   </a>
 </p>
-<p align="center"><a href="assets/demo/coding-agent-demo.mp4">▶ 观看 89 秒编码工作流演示</a></p>
+<p align="center">▶ 动态预览 · <a href="assets/demo/coding-agent-demo.mp4">打开 89 秒完整演示视频</a></p>
 
 ## CODING 是什么
 
@@ -42,7 +42,8 @@ CODING 是一个面向真实 Git 仓库的 AI 编码工作台。它把用户需
 
 实线表示当前应用和 Eval 的运行路径；虚线区域表示文档中的横向扩容目标，并非默认运行拓扑。
 
-<p align="center"><img src="assets/architecture-zh.svg" alt="CODING 项目架构图" width="100%"></p>
+<p align="center"><a href="assets/architecture-zh.svg"><img src="assets/architecture-flow-zh.gif" alt="CODING 动态架构图：需求路由、Agent 执行、隔离评测与报告反馈" width="100%"></a></p>
+<p align="center">动态流程图 · <a href="assets/architecture-zh.svg">打开可缩放 SVG 源图</a></p>
 
 部署设计描述了 **3 个 Agent Worker 和 2 个 ASGI 节点**，并给出约 **170 峰值并发请求、20–30 个 coding/review 并发任务**的容量估算。仓库目前没有包含验证这些数字的压测报告，因此应视为设计容量估算。图中的 Redis 队列、仓库锁和事件流是目标组件，不是当前应用服务。
 
diff --git a/assets/architecture-en.svg b/assets/architecture-en.svg
index afd2752..1b0e0f0 100644
--- a/assets/architecture-en.svg
+++ b/assets/architecture-en.svg
@@ -1,88 +1,88 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1300" viewBox="0 0 1600 1300" role="img" aria-labelledby="title desc">
-  <title id="title">CODING system architecture</title>
-  <desc id="desc">Current application, agent execution, persistence, sandbox evaluation, and a dashed scale-out deployment target.</desc>
-  <defs>
-    <linearGradient id="hero" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#18264f"/><stop offset="1" stop-color="#3459c5"/></linearGradient>
-    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#6881b6"/></marker>
-    <marker id="arrow-light" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#8b9ab7"/></marker>
-    <style>
-      text{font-family:Inter,"Segoe UI",Arial,sans-serif;fill:#17233d}
-      .title{font-size:34px;font-weight:750;fill:#fff}.subtitle{font-size:17px;fill:#dbe5ff}
-      .section{font-size:19px;font-weight:750;letter-spacing:.4px;fill:#34435e}
-      .head{font-size:19px;font-weight:700}.body{font-size:15px;fill:#53627b}.tiny{font-size:13px;fill:#66758e}
-      .panel{fill:#fff;stroke:#dbe3f0;stroke-width:1.5}.node{fill:#f8faff;stroke:#cbd6e9;stroke-width:1.5}
-      .blue{fill:#eef3ff;stroke:#92a8ed}.teal{fill:#edf9f8;stroke:#91d1cb}.amber{fill:#fff7e9;stroke:#f0c878}
-      .arrow{fill:none;stroke:#6881b6;stroke-width:2.5;marker-end:url(#arrow)}
-      .softarrow{fill:none;stroke:#8b9ab7;stroke-width:2;marker-end:url(#arrow-light)}
-      .dash{fill:#fbfcff;stroke:#8896b3;stroke-width:2;stroke-dasharray:9 7}
-    </style>
-  </defs>
-  <rect width="1600" height="1300" rx="26" fill="#f2f5fb"/>
-  <rect x="40" y="28" width="1520" height="76" rx="18" fill="url(#hero)"/>
-  <text x="72" y="67" class="title">CODING · System Architecture</text>
-  <text x="74" y="91" class="subtitle">Repository-aware agent · persistent sessions · isolated, reproducible evaluation</text>
-  <line x1="1210" y1="55" x2="1260" y2="55" stroke="#dbe5ff" stroke-width="3"/>
-  <text x="1272" y="61" class="subtitle">Current path</text>
-  <line x1="1390" y1="55" x2="1440" y2="55" stroke="#dbe5ff" stroke-width="3" stroke-dasharray="8 6"/>
-  <text x="1450" y="61" class="subtitle">Target</text>
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1260" viewBox="0 0 1440 1260" role="img" aria-labelledby="title desc">
+<title id="title">CODING · SYSTEM ARCHITECTURE</title><desc id="desc">A repository-aware coding agent with a reviewable engineering loop</desc>
+<defs>
+ <linearGradient id="hero" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#17264f"/><stop offset="1" stop-color="#3558c7"/></linearGradient>
+ <linearGradient id="evalbg" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#f7f8ff"/><stop offset="1" stop-color="#f4f7ff"/></linearGradient>
+ <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#5975b4"/></marker>
+ <marker id="arrowTeal" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#159d9a"/></marker>
+ <style>text{font-family:Inter,Segoe UI,Arial,sans-serif;fill:#18233c} .title{font-size:34px;font-weight:760;fill:#fff} .sub{font-size:17px;fill:#d7e2ff} .section{font-size:17px;font-weight:750;letter-spacing:.5px;fill:#586987} .h{font-size:20px;font-weight:700} .b{font-size:15px;fill:#66738d} .small{font-size:13px;fill:#5f6f8b} .card{fill:#fff;stroke:#d9e1ee;stroke-width:1.6} .app{fill:#f5f8ff;stroke:#9aafe6;stroke-width:1.7} .teal{fill:#effaf9;stroke:#89cfc8;stroke-width:1.7} .amber{fill:#fff8ec;stroke:#e6c47b;stroke-width:1.7} .line{fill:none;stroke:#7185ae;stroke-width:2.5;marker-end:url(#arrow)} .flow{fill:none;stroke:#1a9b98;stroke-width:3;marker-end:url(#arrowTeal)} .future{fill:#fbfcff;stroke:#9aa6bd;stroke-width:2;stroke-dasharray:9 7} .tag{fill:#e9eefb} .tagtext{font-size:12px;font-weight:700;fill:#526790}</style>
+</defs>
+<rect width="1440" height="1260" fill="#f2f5fb"/>
+<rect x="32" y="26" width="1376" height="142" rx="24" fill="url(#hero)"/>
+<text x="68" y="78" class="title">CODING · SYSTEM ARCHITECTURE</text>
+<text x="68" y="111" class="sub">A repository-aware coding agent with a reviewable engineering loop</text>
+<text x="68" y="145" class="sub" style="font-size:14px;font-weight:700;letter-spacing:.4px">REQUEST → ROUTE → REASON → BUILD → VERIFY → REPORT</text>
 
-  <rect x="40" y="120" width="1520" height="455" rx="20" class="panel"/>
-  <text x="68" y="155" class="section">01 · PRODUCT RUNTIME</text>
-  <rect x="70" y="180" width="245" height="100" rx="14" class="node blue"/>
-  <text x="92" y="216" class="head">Vue 3 workspace</text><text x="92" y="244" class="body">Task input · plans · diffs</text><text x="92" y="265" class="body">Live status and history</text>
-  <rect x="370" y="180" width="265" height="100" rx="14" class="node blue"/>
-  <text x="392" y="216" class="head">FastAPI application</text><text x="392" y="244" class="body">HTTP APIs · approval actions</text><text x="392" y="265" class="body">SSE event endpoint</text>
-  <rect x="690" y="180" width="280" height="100" rx="14" class="node amber"/>
-  <text x="712" y="216" class="head">Multi-layer intent router</text><text x="712" y="244" class="body">LLM classification + rule fallback</text><text x="712" y="265" class="body">Planning · coding · review · QA</text>
-  <rect x="1025" y="180" width="500" height="100" rx="14" class="node blue"/>
-  <text x="1048" y="216" class="head">Primary Agent · DeepAgents / LangGraph</text><text x="1048" y="244" class="body">Coordinates task execution, delegates work, and summarizes results</text><text x="1048" y="265" class="body">Checkpoint-backed runs · user approval and resume</text>
-  <path d="M315 230H360" class="arrow"/><path d="M635 230H680" class="arrow"/><path d="M970 230H1015" class="arrow"/>
-
-  <rect x="70" y="330" width="330" height="112" rx="14" class="node"/>
-  <text x="92" y="366" class="head">Dynamic agent assembly</text><text x="92" y="394" class="body">Prompt · tools · permissions</text><text x="92" y="416" class="body">Skills and task context</text>
-  <rect x="440" y="330" width="300" height="112" rx="14" class="node teal"/>
-  <text x="462" y="366" class="head">Specialist subagents</text><text x="462" y="394" class="body">Task breakdown · analysis · Reviewer</text><text x="462" y="416" class="body">Action decisions and findings return</text>
-  <rect x="780" y="330" width="330" height="112" rx="14" class="node amber"/>
-  <text x="802" y="366" class="head">Tools and safety middleware</text><text x="802" y="394" class="body">Path / input checks · tool recovery</text><text x="802" y="416" class="body">Model, tool-call, and time limits</text>
-  <rect x="1150" y="330" width="375" height="112" rx="14" class="node blue"/>
-  <text x="1172" y="366" class="head">Streaming and state</text><text x="1172" y="394" class="body">Buffered events → stable SSE protocol</text><text x="1172" y="416" class="body">PostgreSQL / SQLite checkpoint + task state</text>
-  <path d="M1275 280V305H235V320" class="softarrow"/>
-  <path d="M400 386H430" class="arrow"/><path d="M740 386H770" class="arrow"/><path d="M1110 386H1140" class="arrow"/>
-  <path d="M590 442V474H1010V442" class="softarrow"/>
-  <rect x="300" y="486" width="1000" height="58" rx="15" fill="#18264f"/>
-  <text x="800" y="522" text-anchor="middle" font-size="20" font-weight="700" fill="#fff">Plan → implement → review → fix → verify → explain the result</text>
-
-  <rect x="40" y="600" width="1520" height="258" rx="20" class="panel"/>
-  <text x="68" y="637" class="section">02 · REPOSITORY, EXECUTION AND PERSISTENCE</text>
-  <rect x="65" y="668" width="275" height="145" rx="14" class="node blue"/>
-  <text x="86" y="704" class="head">Code intelligence</text><text x="86" y="734" class="body">CodeGraph + grep hybrid</text><text x="86" y="759" class="body">Repository and PR context</text><text x="86" y="786" class="tiny">Targeted retrieval for agent tools</text>
-  <rect x="365" y="668" width="275" height="145" rx="14" class="node"/>
-  <text x="386" y="704" class="head">Controlled workspace</text><text x="386" y="734" class="body">Path-scoped file backend</text><text x="386" y="759" class="body">Git branch and repository tools</text><text x="386" y="786" class="tiny">Repository-scoped working copy</text>
-  <rect x="665" y="668" width="275" height="145" rx="14" class="node amber"/>
-  <text x="686" y="704" class="head">OpenSandbox · Eval path</text><text x="686" y="734" class="body">Isolated command execution</text><text x="686" y="759" class="body">Snapshot upload · patch return</text><text x="686" y="786" class="tiny">Resource cleanup after evaluation</text>
-  <rect x="965" y="668" width="275" height="145" rx="14" class="node teal"/>
-  <text x="986" y="704" class="head">SQLite / PostgreSQL</text><text x="986" y="734" class="body">Business state · checkpoints</text><text x="986" y="759" class="body">Worker leases · audit events</text><text x="986" y="786" class="tiny">SQLite local default · PostgreSQL option</text>
-  <rect x="1265" y="668" width="270" height="145" rx="14" class="node"/>
-  <text x="1286" y="704" class="head">Repository memory</text><text x="1286" y="734" class="body">Project structure · test commands</text><text x="1286" y="759" class="body">Decisions · history · PR context</text><text x="1286" y="786" class="tiny">Retrieved across sessions</text>
-  <path d="M235 442V570H202V658" class="softarrow"/><path d="M945 442V570H502V658" class="softarrow"/>
-  <path d="M945 442V570H802V658" class="softarrow"/><path d="M1335 442V570H1102V658" class="softarrow"/><path d="M1335 442V570H1400V658" class="softarrow"/>
-
-  <rect x="40" y="882" width="1520" height="193" rx="20" class="panel"/>
-  <text x="68" y="919" class="section">03 · REPRODUCIBLE AGENT EVAL</text>
-  <rect x="68" y="944" width="255" height="94" rx="13" class="node blue"/><text x="88" y="978" class="head">Pinned inputs</text><text x="88" y="1006" class="body">Agent SHA · task · target SHA</text>
-  <rect x="368" y="944" width="255" height="94" rx="13" class="node"/><text x="388" y="978" class="head">Isolated case copy</text><text x="388" y="1006" class="body">Fresh workspace per case</text>
-  <rect x="668" y="944" width="255" height="94" rx="13" class="node amber"/><text x="688" y="978" class="head">Real Agent run</text><text x="688" y="1006" class="body">Model · tools · retrieval traces</text>
-  <rect x="968" y="944" width="255" height="94" rx="13" class="node teal"/><text x="988" y="978" class="head">Acceptance gates</text><text x="988" y="1006" class="body">Target · regression · oracle</text>
-  <rect x="1268" y="944" width="255" height="94" rx="13" class="node blue"/><text x="1288" y="978" class="head">Reviewable report</text><text x="1288" y="1006" class="body">Patch · tokens · latency · HTML</text>
-  <path d="M323 991H358" class="arrow"/><path d="M623 991H658" class="arrow"/><path d="M923 991H958" class="arrow"/><path d="M1223 991H1258" class="arrow"/>
-
-  <rect x="40" y="1098" width="1520" height="165" rx="20" class="dash"/>
-  <text x="68" y="1135" class="section">SCALE-OUT TARGET · DOCUMENTED DESIGN, NOT THE DEFAULT RUNTIME</text>
-  <text x="70" y="1175" class="head">2 ASGI nodes</text><text x="70" y="1204" class="body">HTTP / SSE ingress</text>
-  <path d="M260 1180H340" class="softarrow"/>
-  <text x="360" y="1175" class="head">Redis</text><text x="360" y="1204" class="body">Queue · repo lock · event stream</text>
-  <path d="M620 1180H700" class="softarrow"/>
-  <text x="720" y="1175" class="head">3 Agent Workers</text><text x="720" y="1204" class="body">Shared PostgreSQL + workspace</text>
-  <text x="1110" y="1172" class="body">Stated capacity estimate: ~170 peak requests,</text><text x="1110" y="1200" class="body">~20–30 concurrent coding/review tasks.</text>
-  <text x="1110" y="1227" class="tiny">No included load-test report validates these figures.</text>
-</svg>
+<rect x="48" y="192" width="1344" height="414" rx="22" fill="#ffffff" stroke="#dce4f0" stroke-width="1.4"/>
+<text x="76" y="226" class="section">APP RUNTIME</text>
+<rect x="70" y="260" width="230" height="112" rx="16" class="app"/>
+<text x="90" y="302" class="h">Developer / User</text>
+<text x="90" y="333" class="b">Task · approval · review</text>
+<rect x="370" y="260" width="230" height="112" rx="16" class="app"/>
+<text x="390" y="302" class="h">Web UI · FastAPI</text>
+<text x="390" y="333" class="b">REST + SSE event stream</text>
+<rect x="670" y="260" width="250" height="112" rx="16" class="app"/>
+<text x="690" y="302" class="h">Intent router</text>
+<text x="690" y="333" class="b">LLM classification + rule fallback</text>
+<rect x="1010" y="260" width="330" height="112" rx="16" class="teal"/>
+<text x="1030" y="302" class="h">Primary Agent</text>
+<text x="1030" y="333" class="b">Plan · delegate · code · summarize</text>
+<rect x="70" y="460" width="330" height="112" rx="16" class="card"/>
+<text x="90" y="502" class="h">Code intelligence &amp; tools</text>
+<text x="90" y="533" class="b">CodeGraph · grep · Git · terminal · tests</text>
+<rect x="450" y="460" width="330" height="112" rx="16" class="card"/>
+<text x="470" y="502" class="h">Repository workspace</text>
+<text x="470" y="533" class="b">Guarded file access · reviewable diffs</text>
+<rect x="840" y="460" width="250" height="112" rx="16" class="amber"/>
+<text x="860" y="502" class="h">Specialist SubAgents</text>
+<text x="860" y="533" class="b">Analysis · read-only review · focused tasks</text>
+<path id="p1" d="M300 316H370" class="line"/>
+<path id="p2" d="M600 316H670" class="line"/>
+<path id="p3" d="M920 316H1010" class="line"/>
+<path id="p4" d="M1175 372V410H965V460" class="line"/>
+<path id="p5" d="M1060 372V420H615V460" class="line"/>
+<path id="p6" d="M450 516H400" class="line"/>
+<text x="1000" y="430" class="small">delegate / review</text>
+<text x="730" y="444" class="small">read / edit / test</text>
+<text x="398" y="498" class="small">retrieve context</text>
+<rect x="48" y="638" width="1344" height="378" rx="22" fill="url(#evalbg)" stroke="#d6def0" stroke-width="1.4"/>
+<text x="76" y="677" class="section">AGENT EVAL · REPRODUCIBLE CODING BENCHMARK</text>
+<rect x="70" y="728" width="280" height="118" rx="16" class="app"/>
+<text x="90" y="771" class="h">Eval runner</text>
+<text x="90" y="803" class="b">Fixed task · agent revision · limits</text>
+<rect x="420" y="728" width="280" height="118" rx="16" class="teal"/>
+<text x="440" y="771" class="h">OpenSandbox</text>
+<text x="440" y="803" class="b">Isolated candidate repository</text>
+<rect x="770" y="728" width="280" height="118" rx="16" class="amber"/>
+<text x="790" y="771" class="h">Scorers &amp; checks</text>
+<text x="790" y="803" class="b">Target · regression · hidden oracle</text>
+<rect x="1120" y="728" width="250" height="118" rx="16" class="app"/>
+<text x="1140" y="771" class="h">Report &amp; evidence</text>
+<text x="1140" y="803" class="b">Patch · events · tokens · latency · HTML</text>
+<path id="p7" d="M350 787H420" class="flow"/>
+<path id="p8" d="M700 787H770" class="flow"/>
+<path id="p9" d="M1050 787H1120" class="flow"/>
+<path id="p10" d="M1245 846V910H210V846" class="flow"/>
+<path id="p11" d="M1175 372V680H210V728" class="flow"/>
+<path id="p12" d="M1190 728V640H1175V372" class="flow"/>
+<text x="356" y="771" class="small">candidate patch</text>
+<text x="704" y="771" class="small">run isolated tests</text>
+<text x="1054" y="771" class="small">scores + traces</text>
+<text x="560" y="900" class="small">reproducible evidence</text>
+<text x="1200" y="625" class="small">evaluation feedback</text>
+<rect x="48" y="1046" width="1344" height="174" rx="22" fill="#fff" stroke="#dce4f0" stroke-width="1.4"/>
+<rect x="80" y="1080" width="350" height="100" rx="15" class="card"/>
+<text x="98" y="1118" class="h" style="font-size:18px">SQLite / PostgreSQL</text>
+<text x="98" y="1148" class="b" style="font-size:14px">Tasks · messages · events · checkpoints</text>
+<rect x="500" y="1080" width="350" height="100" rx="15" class="card"/>
+<text x="518" y="1118" class="h" style="font-size:18px">Repository memory</text>
+<text x="518" y="1148" class="b" style="font-size:14px">Project facts · decisions · session resume</text>
+<rect x="1020" y="1080" width="300" height="100" rx="15" class="future"/>
+<text x="1038" y="1118" class="h" style="font-size:18px">Scale-out design</text>
+<text x="1038" y="1148" class="b" style="font-size:14px">Redis queue · worker pool · repo lock</text>
+<path id="p13" d="M485 372V1040H255V1080" class="line"/>
+<path id="p14" d="M1120 572V1018H680V1080" class="line"/>
+<path id="p15" d="M1110 1080H850" class="future"/>
+<text x="420" y="1035" class="small">persist &amp; resume</text>
+<text x="76" y="1204" class="small">Dashed = documented deployment target; capacity numbers are estimates, not load-test results.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/architecture-flow-en.gif b/assets/architecture-flow-en.gif
new file mode 100644
index 0000000..9c11d0a
Binary files /dev/null and b/assets/architecture-flow-en.gif differ
diff --git a/assets/architecture-flow-zh.gif b/assets/architecture-flow-zh.gif
new file mode 100644
index 0000000..1e7d1cb
Binary files /dev/null and b/assets/architecture-flow-zh.gif differ
diff --git a/assets/architecture-zh.svg b/assets/architecture-zh.svg
index 20955a3..458d533 100644
--- a/assets/architecture-zh.svg
+++ b/assets/architecture-zh.svg
@@ -1,86 +1,88 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1300" viewBox="0 0 1600 1300" role="img" aria-labelledby="title desc">
-  <title id="title">CODING 项目系统架构</title>
-  <desc id="desc">展示当前应用、Agent 执行、持久化、沙箱评测和虚线标注的横向扩容目标。</desc>
-  <defs>
-    <linearGradient id="hero" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#18264f"/><stop offset="1" stop-color="#3459c5"/></linearGradient>
-    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#6881b6"/></marker>
-    <marker id="arrow-light" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#8b9ab7"/></marker>
-    <style>
-      text{font-family:"Microsoft YaHei","Noto Sans CJK SC","Segoe UI",Arial,sans-serif;fill:#17233d}
-      .title{font-size:34px;font-weight:750;fill:#fff}.subtitle{font-size:17px;fill:#dbe5ff}
-      .section{font-size:19px;font-weight:750;letter-spacing:.4px;fill:#34435e}
-      .head{font-size:19px;font-weight:700}.body{font-size:15px;fill:#53627b}.tiny{font-size:13px;fill:#66758e}
-      .panel{fill:#fff;stroke:#dbe3f0;stroke-width:1.5}.node{fill:#f8faff;stroke:#cbd6e9;stroke-width:1.5}
-      .blue{fill:#eef3ff;stroke:#92a8ed}.teal{fill:#edf9f8;stroke:#91d1cb}.amber{fill:#fff7e9;stroke:#f0c878}
-      .arrow{fill:none;stroke:#6881b6;stroke-width:2.5;marker-end:url(#arrow)}
-      .softarrow{fill:none;stroke:#8b9ab7;stroke-width:2;marker-end:url(#arrow-light)}
-      .dash{fill:#fbfcff;stroke:#8896b3;stroke-width:2;stroke-dasharray:9 7}
-    </style>
-  </defs>
-  <rect width="1600" height="1300" rx="26" fill="#f2f5fb"/>
-  <rect x="40" y="28" width="1520" height="76" rx="18" fill="url(#hero)"/>
-  <text x="72" y="67" class="title">CODING · 项目系统架构</text>
-  <text x="74" y="91" class="subtitle">理解仓库的 Agent · 可恢复会话 · 隔离且可复跑的评测</text>
-  <line x1="1210" y1="55" x2="1260" y2="55" stroke="#dbe5ff" stroke-width="3"/><text x="1272" y="61" class="subtitle">当前链路</text>
-  <line x1="1390" y1="55" x2="1440" y2="55" stroke="#dbe5ff" stroke-width="3" stroke-dasharray="8 6"/><text x="1450" y="61" class="subtitle">扩容目标</text>
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1260" viewBox="0 0 1440 1260" role="img" aria-labelledby="title desc">
+<title id="title">CODING · 项目系统架构</title><desc id="desc">面向真实代码仓库，形成可审查、可复现的研发闭环</desc>
+<defs>
+ <linearGradient id="hero" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#17264f"/><stop offset="1" stop-color="#3558c7"/></linearGradient>
+ <linearGradient id="evalbg" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#f7f8ff"/><stop offset="1" stop-color="#f4f7ff"/></linearGradient>
+ <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#5975b4"/></marker>
+ <marker id="arrowTeal" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#159d9a"/></marker>
+ <style>text{font-family:Microsoft YaHei,Noto Sans CJK SC,Segoe UI,Arial,sans-serif;fill:#18233c} .title{font-size:34px;font-weight:760;fill:#fff} .sub{font-size:17px;fill:#d7e2ff} .section{font-size:17px;font-weight:750;letter-spacing:.5px;fill:#586987} .h{font-size:20px;font-weight:700} .b{font-size:15px;fill:#66738d} .small{font-size:13px;fill:#5f6f8b} .card{fill:#fff;stroke:#d9e1ee;stroke-width:1.6} .app{fill:#f5f8ff;stroke:#9aafe6;stroke-width:1.7} .teal{fill:#effaf9;stroke:#89cfc8;stroke-width:1.7} .amber{fill:#fff8ec;stroke:#e6c47b;stroke-width:1.7} .line{fill:none;stroke:#7185ae;stroke-width:2.5;marker-end:url(#arrow)} .flow{fill:none;stroke:#1a9b98;stroke-width:3;marker-end:url(#arrowTeal)} .future{fill:#fbfcff;stroke:#9aa6bd;stroke-width:2;stroke-dasharray:9 7} .tag{fill:#e9eefb} .tagtext{font-size:12px;font-weight:700;fill:#526790}</style>
+</defs>
+<rect width="1440" height="1260" fill="#f2f5fb"/>
+<rect x="32" y="26" width="1376" height="142" rx="24" fill="url(#hero)"/>
+<text x="68" y="78" class="title">CODING · 项目系统架构</text>
+<text x="68" y="111" class="sub">面向真实代码仓库，形成可审查、可复现的研发闭环</text>
+<text x="68" y="145" class="sub" style="font-size:14px;font-weight:700;letter-spacing:.4px">提交需求 → 意图路由 → Agent 执行 → 测试验证 → 评测报告</text>
 
-  <rect x="40" y="120" width="1520" height="455" rx="20" class="panel"/>
-  <text x="68" y="155" class="section">01 · 产品运行链路</text>
-  <rect x="70" y="180" width="245" height="100" rx="14" class="node blue"/>
-  <text x="92" y="216" class="head">Vue 3 工作台</text><text x="92" y="244" class="body">提交任务 · 查看计划与补丁</text><text x="92" y="265" class="body">实时状态与历史会话</text>
-  <rect x="370" y="180" width="265" height="100" rx="14" class="node blue"/>
-  <text x="392" y="216" class="head">FastAPI 应用</text><text x="392" y="244" class="body">HTTP API · 审批操作</text><text x="392" y="265" class="body">SSE 事件接口</text>
-  <rect x="690" y="180" width="280" height="100" rx="14" class="node amber"/>
-  <text x="712" y="216" class="head">多层意图路由</text><text x="712" y="244" class="body">LLM 语义分类 + 关键词规则兜底</text><text x="712" y="265" class="body">规划 · 编码 · 审查 · QA</text>
-  <rect x="1025" y="180" width="500" height="100" rx="14" class="node blue"/>
-  <text x="1048" y="216" class="head">主 Agent · DeepAgents / LangGraph</text><text x="1048" y="244" class="body">统筹任务、委派工作并汇总结果</text><text x="1048" y="265" class="body">Checkpoint 恢复 · 用户审批后继续执行</text>
-  <path d="M315 230H360" class="arrow"/><path d="M635 230H680" class="arrow"/><path d="M970 230H1015" class="arrow"/>
-
-  <rect x="70" y="330" width="330" height="112" rx="14" class="node"/>
-  <text x="92" y="366" class="head">按任务动态装配</text><text x="92" y="394" class="body">Prompt · 工具 · 权限</text><text x="92" y="416" class="body">Skills 与任务上下文</text>
-  <rect x="440" y="330" width="300" height="112" rx="14" class="node teal"/>
-  <text x="462" y="366" class="head">专业 SubAgent</text><text x="462" y="394" class="body">任务拆解 · 分析 · Reviewer</text><text x="462" y="416" class="body">动作决策与审查发现回传</text>
-  <rect x="780" y="330" width="330" height="112" rx="14" class="node amber"/>
-  <text x="802" y="366" class="head">工具与安全中间件</text><text x="802" y="394" class="body">路径/参数校验 · 工具异常恢复</text><text x="802" y="416" class="body">模型、工具调用和时长上限</text>
-  <rect x="1150" y="330" width="375" height="112" rx="14" class="node blue"/>
-  <text x="1172" y="366" class="head">流式输出与运行状态</text><text x="1172" y="394" class="body">队列缓冲 → 稳定 SSE 事件协议</text><text x="1172" y="416" class="body">PostgreSQL / SQLite checkpoint 与任务状态</text>
-  <path d="M1275 280V305H235V320" class="softarrow"/>
-  <path d="M400 386H430" class="arrow"/><path d="M740 386H770" class="arrow"/><path d="M1110 386H1140" class="arrow"/>
-  <path d="M590 442V474H1010V442" class="softarrow"/>
-  <rect x="300" y="486" width="1000" height="58" rx="15" fill="#18264f"/>
-  <text x="800" y="522" text-anchor="middle" font-size="20" font-weight="700" fill="#fff">规划 → 编码 → 审查 → 修复 → 验证 → 汇报结果</text>
-
-  <rect x="40" y="600" width="1520" height="258" rx="20" class="panel"/>
-  <text x="68" y="637" class="section">02 · 仓库、执行与持久化</text>
-  <rect x="65" y="668" width="275" height="145" rx="14" class="node blue"/>
-  <text x="86" y="704" class="head">代码检索</text><text x="86" y="734" class="body">CodeGraph + grep 混合检索</text><text x="86" y="759" class="body">仓库与 PR 上下文</text><text x="86" y="786" class="tiny">供 Agent 工具定位相关代码</text>
-  <rect x="365" y="668" width="275" height="145" rx="14" class="node"/>
-  <text x="386" y="704" class="head">受控项目工作区</text><text x="386" y="734" class="body">限制路径范围的文件后端</text><text x="386" y="759" class="body">Git 分支与仓库工具</text><text x="386" y="786" class="tiny">按仓库管理工作副本</text>
-  <rect x="665" y="668" width="275" height="145" rx="14" class="node amber"/>
-  <text x="686" y="704" class="head">OpenSandbox · Eval 路径</text><text x="686" y="734" class="body">隔离环境中执行命令</text><text x="686" y="759" class="body">上传源码快照 · 回传补丁</text><text x="686" y="786" class="tiny">评测完成后清理沙箱资源</text>
-  <rect x="965" y="668" width="275" height="145" rx="14" class="node teal"/>
-  <text x="986" y="704" class="head">SQLite / PostgreSQL</text><text x="986" y="734" class="body">业务状态 · 会话 checkpoint</text><text x="986" y="759" class="body">Worker 租约 · 审计事件</text><text x="986" y="786" class="tiny">SQLite 本地默认 · PostgreSQL 可选</text>
-  <rect x="1265" y="668" width="270" height="145" rx="14" class="node"/>
-  <text x="1286" y="704" class="head">仓库长期记忆</text><text x="1286" y="734" class="body">项目结构 · 测试命令</text><text x="1286" y="759" class="body">技术决策 · 历史 · PR 上下文</text><text x="1286" y="786" class="tiny">跨会话检索与复用</text>
-  <path d="M235 442V570H202V658" class="softarrow"/><path d="M945 442V570H502V658" class="softarrow"/>
-  <path d="M945 442V570H802V658" class="softarrow"/><path d="M1335 442V570H1102V658" class="softarrow"/><path d="M1335 442V570H1400V658" class="softarrow"/>
-
-  <rect x="40" y="882" width="1520" height="193" rx="20" class="panel"/>
-  <text x="68" y="919" class="section">03 · 可复现 Agent Eval</text>
-  <rect x="68" y="944" width="255" height="94" rx="13" class="node blue"/><text x="88" y="978" class="head">固定输入版本</text><text x="88" y="1006" class="body">Agent SHA · 题目 · 目标 SHA</text>
-  <rect x="368" y="944" width="255" height="94" rx="13" class="node"/><text x="388" y="978" class="head">独立案例副本</text><text x="388" y="1006" class="body">每题创建新工作区</text>
-  <rect x="668" y="944" width="255" height="94" rx="13" class="node amber"/><text x="688" y="978" class="head">启动真实 Agent</text><text x="688" y="1006" class="body">模型 · 工具 · 检索轨迹</text>
-  <rect x="968" y="944" width="255" height="94" rx="13" class="node teal"/><text x="988" y="978" class="head">验收门禁</text><text x="988" y="1006" class="body">目标 · 回归 · 隐藏验收</text>
-  <rect x="1268" y="944" width="255" height="94" rx="13" class="node blue"/><text x="1288" y="978" class="head">可复核报告</text><text x="1288" y="1006" class="body">补丁 · Token · 耗时 · HTML</text>
-  <path d="M323 991H358" class="arrow"/><path d="M623 991H658" class="arrow"/><path d="M923 991H958" class="arrow"/><path d="M1223 991H1258" class="arrow"/>
-
-  <rect x="40" y="1098" width="1520" height="165" rx="20" class="dash"/>
-  <text x="68" y="1135" class="section">横向扩容目标 · 部署设计，并非当前默认运行链路</text>
-  <text x="70" y="1175" class="head">2 个 ASGI 节点</text><text x="70" y="1204" class="body">接收 HTTP / SSE</text>
-  <path d="M260 1180H340" class="softarrow"/>
-  <text x="360" y="1175" class="head">Redis</text><text x="360" y="1204" class="body">队列 · 仓库锁 · 事件流</text>
-  <path d="M620 1180H700" class="softarrow"/>
-  <text x="720" y="1175" class="head">3 个 Agent Worker</text><text x="720" y="1204" class="body">共享 PostgreSQL 与工作区</text>
-  <text x="1110" y="1172" class="body">容量估算：峰值约 170 个请求，</text><text x="1110" y="1200" class="body">20–30 个 coding/review 并发任务。</text>
-  <text x="1110" y="1227" class="tiny">仓库未附验证该数字的压测报告。</text>
-</svg>
+<rect x="48" y="192" width="1344" height="414" rx="22" fill="#ffffff" stroke="#dce4f0" stroke-width="1.4"/>
+<text x="76" y="226" class="section">应用运行链路</text>
+<rect x="70" y="260" width="230" height="112" rx="16" class="app"/>
+<text x="90" y="302" class="h">开发者 / 用户</text>
+<text x="90" y="333" class="b">需求 · 审批 · 代码审查</text>
+<rect x="370" y="260" width="230" height="112" rx="16" class="app"/>
+<text x="390" y="302" class="h">Web 工作台 · FastAPI</text>
+<text x="390" y="333" class="b">REST 接口 + SSE 事件流</text>
+<rect x="670" y="260" width="250" height="112" rx="16" class="app"/>
+<text x="690" y="302" class="h">意图路由</text>
+<text x="690" y="333" class="b">LLM 语义分类 + 规则兜底</text>
+<rect x="1010" y="260" width="330" height="112" rx="16" class="teal"/>
+<text x="1030" y="302" class="h">主 Agent</text>
+<text x="1030" y="333" class="b">计划 · 委派 · 编码 · 汇总</text>
+<rect x="70" y="460" width="330" height="112" rx="16" class="card"/>
+<text x="90" y="502" class="h">代码检索与工具</text>
+<text x="90" y="533" class="b">CodeGraph · grep · Git · 终端 · 测试</text>
+<rect x="450" y="460" width="330" height="112" rx="16" class="card"/>
+<text x="470" y="502" class="h">仓库工作区</text>
+<text x="470" y="533" class="b">受控文件访问 · 可审查 diff</text>
+<rect x="840" y="460" width="250" height="112" rx="16" class="amber"/>
+<text x="860" y="502" class="h">专业 SubAgent</text>
+<text x="860" y="533" class="b">分析 · 只读审查 · 专项子任务</text>
+<path id="p1" d="M300 316H370" class="line"/>
+<path id="p2" d="M600 316H670" class="line"/>
+<path id="p3" d="M920 316H1010" class="line"/>
+<path id="p4" d="M1175 372V410H965V460" class="line"/>
+<path id="p5" d="M1060 372V420H615V460" class="line"/>
+<path id="p6" d="M450 516H400" class="line"/>
+<text x="1000" y="430" class="small">任务委派 / 审查</text>
+<text x="730" y="444" class="small">读取 / 修改 / 测试</text>
+<text x="398" y="498" class="small">检索上下文</text>
+<rect x="48" y="638" width="1344" height="378" rx="22" fill="url(#evalbg)" stroke="#d6def0" stroke-width="1.4"/>
+<text x="76" y="677" class="section">AGENT EVAL · 可复现编码能力评测</text>
+<rect x="70" y="728" width="280" height="118" rx="16" class="app"/>
+<text x="90" y="771" class="h">评测运行器</text>
+<text x="90" y="803" class="b">固定题目 · Agent 版本 · 资源限制</text>
+<rect x="420" y="728" width="280" height="118" rx="16" class="teal"/>
+<text x="440" y="771" class="h">OpenSandbox</text>
+<text x="440" y="803" class="b">隔离的候选项目副本</text>
+<rect x="770" y="728" width="280" height="118" rx="16" class="amber"/>
+<text x="790" y="771" class="h">评分器与验收</text>
+<text x="790" y="803" class="b">目标测试 · 回归测试 · 隐藏验收</text>
+<rect x="1120" y="728" width="250" height="118" rx="16" class="app"/>
+<text x="1140" y="771" class="h">报告与证据</text>
+<text x="1140" y="803" class="b">补丁 · 事件 · Token · 耗时 · HTML</text>
+<path id="p7" d="M350 787H420" class="flow"/>
+<path id="p8" d="M700 787H770" class="flow"/>
+<path id="p9" d="M1050 787H1120" class="flow"/>
+<path id="p10" d="M1245 846V910H210V846" class="flow"/>
+<path id="p11" d="M1175 372V680H210V728" class="flow"/>
+<path id="p12" d="M1190 728V640H1175V372" class="flow"/>
+<text x="356" y="771" class="small">候选补丁</text>
+<text x="704" y="771" class="small">隔离运行测试</text>
+<text x="1054" y="771" class="small">评分与轨迹</text>
+<text x="560" y="900" class="small">可复现证据</text>
+<text x="1200" y="625" class="small">评测反馈</text>
+<rect x="48" y="1046" width="1344" height="174" rx="22" fill="#fff" stroke="#dce4f0" stroke-width="1.4"/>
+<rect x="80" y="1080" width="350" height="100" rx="15" class="card"/>
+<text x="98" y="1118" class="h" style="font-size:18px">SQLite / PostgreSQL</text>
+<text x="98" y="1148" class="b" style="font-size:14px">任务 · 消息 · 事件 · checkpoint</text>
+<rect x="500" y="1080" width="350" height="100" rx="15" class="card"/>
+<text x="518" y="1118" class="h" style="font-size:18px">仓库长期记忆</text>
+<text x="518" y="1148" class="b" style="font-size:14px">项目事实 · 技术决策 · 会话恢复</text>
+<rect x="1020" y="1080" width="300" height="100" rx="15" class="future"/>
+<text x="1038" y="1118" class="h" style="font-size:18px">横向扩容设计</text>
+<text x="1038" y="1148" class="b" style="font-size:14px">Redis 队列 · Worker 池 · 仓库锁</text>
+<path id="p13" d="M485 372V1040H255V1080" class="line"/>
+<path id="p14" d="M1120 572V1018H680V1080" class="line"/>
+<path id="p15" d="M1110 1080H850" class="future"/>
+<text x="420" y="1035" class="small">持久化与恢复</text>
+<text x="76" y="1204" class="small">虚线表示文档中的部署目标；并发数字为估算值，尚非压测结果。</text>
+</svg>
\ No newline at end of file
diff --git a/assets/demo/coding-agent-demo-preview.gif b/assets/demo/coding-agent-demo-preview.gif
new file mode 100644
index 0000000..4faac3f
Binary files /dev/null and b/assets/demo/coding-agent-demo-preview.gif differ