279 lines
16 KiB
HTML
279 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="vi">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>CASAN — Kiến trúc hệ thống · Bản HIỆN TẠI (Mốc 2, sau hardening)</title>
|
||
<style>
|
||
:root{ --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:#e9ebee;color:#12233b;font-family:var(--font);-webkit-font-smoothing:antialiased}
|
||
.wrap{max-width:1280px;margin:0 auto;padding:26px 24px 60px}
|
||
.head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:8px}
|
||
h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;color:#1f3b6e}
|
||
.sub{font-size:13.5px;color:#4a5568;margin:6px 0 0}
|
||
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #bfe0cd;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:#1e7a4f}
|
||
.badge .d{width:9px;height:9px;border-radius:99px;background:#2e9e6b}
|
||
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
|
||
.chip{background:#fff;border:1px solid #d3dae2;border-radius:12px;padding:9px 14px;font-size:12.5px;color:#31465f}
|
||
.chip b{color:#1f3b6e;font-size:15px}
|
||
.chip .up{color:#2e9e6b;font-weight:700}
|
||
.canvas{background:#eceef1;border:1px solid #d3dae2;border-radius:16px;padding:8px}
|
||
svg{display:block;width:100%;height:auto}
|
||
.legend{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:20px}
|
||
.legend h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#5a6b80}
|
||
.lg{display:flex;flex-wrap:wrap;gap:8px 16px}
|
||
.lg span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#31465f}
|
||
.sw{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.15)}
|
||
.dot{width:10px;height:10px;border-radius:99px}
|
||
.cg{font-size:12.5px;color:#31465f;line-height:1.9}
|
||
.cg code{background:#fff;border:1px solid #d3dae2;border-radius:5px;padding:1px 6px;font-size:11.5px;color:#1f3b6e}
|
||
@media(max-width:760px){.legend{grid-template-columns:1fr}}
|
||
</style>
|
||
<div class="wrap">
|
||
<div class="head">
|
||
<div>
|
||
<h1>Bức tranh tổng thể của hệ thống — CASAN</h1>
|
||
<p class="sub">Bản <b>HIỆN TẠI</b> · Mốc 2 (sau <code style="font-family:monospace">feat/plan07-track-a-hardening</code> + H5/H6 hardening) · cứng hoá "sát production".</p>
|
||
</div>
|
||
<span class="badge"><span class="d"></span>Mốc 2 · ~4.0/5 · Level 4 · không lớp nào <80</span>
|
||
</div>
|
||
<div class="chips">
|
||
<div class="chip">Script <b>60</b> <span class="up">↑ từ 37</span></div>
|
||
<div class="chip">Kiểm thử đối kháng <b>175</b> <span class="up">↑ từ 79</span> · 0 lỗi</div>
|
||
<div class="chip">H4·H5·H6 <b>~4.0</b>/5 <span class="up">↑ từ 3.0</span></div>
|
||
<div class="chip">Bổ sung <b>KMS · WORM · Alert live · Dashboard hosted</b></div>
|
||
</div>
|
||
|
||
<div class="canvas">
|
||
<svg viewBox="0 0 1280 700" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system,Segoe UI,system-ui,sans-serif">
|
||
<defs>
|
||
<marker id="ah" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
<path d="M0,0 L7,3 L0,6 Z" fill="#5b7fa6"/>
|
||
</marker>
|
||
<style>
|
||
.actor{fill:#fce293;stroke:#dcae37}
|
||
.proc{fill:#c3daf1;stroke:#7ba7d4}
|
||
.gw{fill:#1f3b6e;stroke:#10203c}
|
||
.api{fill:#e5863b;stroke:#c16a24}
|
||
.db{fill:#ffffff;stroke:#b7bfc9}
|
||
.dash{fill:#e12e1c;stroke:#ad2011}
|
||
.jira{fill:#1e74c6;stroke:#14568f}
|
||
.kms{fill:#6b4fa8;stroke:#4d3880}
|
||
.alert{fill:#f4b73f;stroke:#cf9420}
|
||
rect.box{stroke-width:1.4}
|
||
.t{font-weight:800;fill:#13233b}
|
||
.tw{font-weight:800;fill:#ffffff}
|
||
.s{fill:#41566f}
|
||
.sw{fill:#e7eefb}
|
||
.lbl{fill:#7286a0;font-style:italic}
|
||
.flow{stroke:#5b7fa6;stroke-width:1.6;fill:none}
|
||
.flowg{stroke:#2e9e6b;stroke-width:1.8;fill:none}
|
||
.redzone{fill:rgba(226,46,28,.03);stroke:#e12e1c;stroke-width:2.6}
|
||
.hz{fill:none;stroke:#2e9e6b;stroke-width:1.6;stroke-dasharray:5 4}
|
||
</style>
|
||
</defs>
|
||
|
||
<!-- RED GOVERNANCE ZONE (rộng hơn, ôm KMS + Alert) -->
|
||
<rect class="redzone" x="250" y="42" rx="14" width="972" height="360"/>
|
||
<text x="262" y="62" class="t" font-size="12" fill="#e12e1c" letter-spacing=".08em">RUNTIME GOVERNANCE · gw-tap — cứng hoá: KMS ký · WORM audit · alert live · strict fail-closed</text>
|
||
|
||
<!-- ===== TOP ROW ===== -->
|
||
<g>
|
||
<rect class="box actor" x="40" y="78" width="150" height="60" rx="9"/>
|
||
<text class="t" x="115" y="105" text-anchor="middle" font-size="13">AI ENGINEER</text>
|
||
<text class="s" x="115" y="122" text-anchor="middle" font-size="10.5">tạo harness</text>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="272" y="76" width="178" height="64" rx="9"/>
|
||
<text class="t" x="361" y="101" text-anchor="middle" font-size="13">HARNESS AGENTS</text>
|
||
<text class="s" x="361" y="119" text-anchor="middle" font-size="10.5">red-team trước khi bàn giao</text>
|
||
<circle cx="437" cy="88" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<g>
|
||
<rect class="box api" x="560" y="76" width="230" height="64" rx="9"/>
|
||
<text class="tw" x="675" y="100" text-anchor="middle" font-size="13">MODEL API</text>
|
||
<text class="sw" x="675" y="118" text-anchor="middle" font-size="10.5">Ollama ornith:9b (live) · Anthropic/OpenAI (path)</text>
|
||
<circle cx="777" cy="88" r="5" fill="#d9a441"/>
|
||
</g>
|
||
<g>
|
||
<rect class="box jira" x="1050" y="76" width="172" height="64" rx="9"/>
|
||
<text class="tw" x="1136" y="101" text-anchor="middle" font-size="13">JIRA</text>
|
||
<text class="sw" x="1136" y="119" text-anchor="middle" font-size="10.5">tiến độ · bug</text>
|
||
<circle cx="1209" cy="88" r="5" fill="#9aa4b0"/>
|
||
</g>
|
||
|
||
<!-- ===== MIDDLE ROW ===== -->
|
||
<g>
|
||
<rect class="box actor" x="40" y="224" width="150" height="64" rx="9"/>
|
||
<text class="t" x="115" y="252" text-anchor="middle" font-size="13">DEVELOPER</text>
|
||
<text class="s" x="115" y="270" text-anchor="middle" font-size="10.5">dùng pipeline</text>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="272" y="218" width="188" height="76" rx="9"/>
|
||
<text class="t" x="366" y="245" text-anchor="middle" font-size="13">CLAUDE CODE CLI</text>
|
||
<text class="s" x="366" y="263" text-anchor="middle" font-size="10.5">speckit multiagent</text>
|
||
<text class="s" x="366" y="279" text-anchor="middle" font-size="10.5">Boss + Sub-agents + Hooks</text>
|
||
<circle cx="447" cy="230" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<!-- GATEWAY gw-tap (hardened) -->
|
||
<g>
|
||
<rect class="box gw" x="540" y="196" width="238" height="126" rx="11"/>
|
||
<text class="tw" x="659" y="224" text-anchor="middle" font-size="15">GATEWAY · gw-tap</text>
|
||
<text class="sw" x="659" y="244" text-anchor="middle" font-size="10.5">bảo mật · policy per-agent · telemetry</text>
|
||
<text class="sw" x="659" y="260" text-anchor="middle" font-size="10.5">audit · CG1–CG6, CG8</text>
|
||
<text x="659" y="281" text-anchor="middle" font-size="10" fill="#8fe3bd" font-weight="700">+ strict fail-closed · unicode/base64</text>
|
||
<text x="659" y="297" text-anchor="middle" font-size="10" fill="#8fe3bd" font-weight="700">+ action/supply/exfil gate</text>
|
||
<circle cx="763" cy="210" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<!-- VAULT KMS (mới) -->
|
||
<g>
|
||
<rect class="box kms" x="560" y="336" width="150" height="52" rx="9"/>
|
||
<text class="tw" x="635" y="360" text-anchor="middle" font-size="12">VAULT KMS</text>
|
||
<text class="sw" x="635" y="376" text-anchor="middle" font-size="9.5">ký · rotate · non-exportable</text>
|
||
<circle cx="697" cy="347" r="5" fill="#d9a441"/>
|
||
</g>
|
||
<!-- STORE + WORM -->
|
||
<g>
|
||
<rect class="box db" x="828" y="210" width="168" height="92" rx="9"/>
|
||
<text class="t" x="912" y="235" text-anchor="middle" font-size="12.5">AUDIT / TELEMETRY</text>
|
||
<text class="s" x="912" y="252" text-anchor="middle" font-size="10.5">JSONL logs + head ký KMS</text>
|
||
<text class="s" x="912" y="268" text-anchor="middle" font-size="10.5">reconcile vs provider API</text>
|
||
<text x="912" y="286" text-anchor="middle" font-size="10" font-weight="700" fill="#1e7a4f">+ WORM ledger ngoài</text>
|
||
<circle cx="983" cy="222" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<!-- DASHBOARD hosted -->
|
||
<g>
|
||
<rect class="box dash" x="1050" y="210" width="172" height="92" rx="9"/>
|
||
<text class="tw" x="1136" y="238" text-anchor="middle" font-size="14">DASHBOARD</text>
|
||
<text class="sw" x="1136" y="256" text-anchor="middle" font-size="10.5">AgentOps · hosted</text>
|
||
<text class="sw" x="1136" y="272" text-anchor="middle" font-size="10.5">/healthz stale-aware</text>
|
||
<text class="sw" x="1136" y="289" text-anchor="middle" font-size="9.5">200 fresh · 503 stale</text>
|
||
<circle cx="1209" cy="222" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<!-- ALERT live (mới) -->
|
||
<g>
|
||
<rect class="box alert" x="1050" y="336" width="172" height="52" rx="9"/>
|
||
<text class="t" x="1136" y="358" text-anchor="middle" font-size="12">ALERT DISPATCH</text>
|
||
<text class="s" x="1136" y="374" text-anchor="middle" font-size="9.5">webhook · dedup · dead-letter</text>
|
||
<circle cx="1209" cy="347" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
|
||
<!-- MAINTAIN DEV -->
|
||
<g>
|
||
<rect class="box actor" x="1072" y="430" width="150" height="58" rx="9"/>
|
||
<text class="t" x="1147" y="456" text-anchor="middle" font-size="12.5">MAINTAIN DEV</text>
|
||
<text class="s" x="1147" y="473" text-anchor="middle" font-size="10.5">on-call · quan sát</text>
|
||
</g>
|
||
|
||
<!-- ===== BOTTOM ROW · CI/CD ===== -->
|
||
<g>
|
||
<rect class="box proc" x="40" y="576" width="176" height="70" rx="9"/>
|
||
<text class="t" x="128" y="605" text-anchor="middle" font-size="12.5">DEVELOPMENT</text>
|
||
<text class="s" x="128" y="623" text-anchor="middle" font-size="10">output: Design · Source</text>
|
||
<circle cx="203" cy="588" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="248" y="576" width="196" height="70" rx="9"/>
|
||
<text class="t" x="346" y="602" text-anchor="middle" font-size="12.5">STATIC SCAN</text>
|
||
<text class="s" x="346" y="620" text-anchor="middle" font-size="9.5">tsc · ESLint · SAST · gitleaks · npm audit</text>
|
||
<circle cx="431" cy="588" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="476" y="576" width="150" height="70" rx="9"/>
|
||
<text class="t" x="551" y="605" text-anchor="middle" font-size="12.5">GITHUB</text>
|
||
<text class="s" x="551" y="623" text-anchor="middle" font-size="10">push source</text>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="658" y="576" width="150" height="70" rx="9"/>
|
||
<text class="t" x="733" y="614" text-anchor="middle" font-size="12.5">DEPLOY</text>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="840" y="576" width="190" height="70" rx="9"/>
|
||
<text class="t" x="935" y="602" text-anchor="middle" font-size="12.5">TESTING · CG7</text>
|
||
<text class="s" x="935" y="620" text-anchor="middle" font-size="10">adversarial + harness (175)</text>
|
||
<circle cx="1017" cy="588" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
|
||
<!-- ===== ARROWS ===== -->
|
||
<path class="flow" marker-end="url(#ah)" d="M190,108 L268,108"/>
|
||
<text class="lbl" x="228" y="101" text-anchor="middle" font-size="10.5">tạo ra</text>
|
||
<path class="flow" marker-end="url(#ah)" d="M361,140 L361,214"/>
|
||
<text class="lbl" x="392" y="182" text-anchor="middle" font-size="10.5">bàn giao</text>
|
||
<path class="flow" marker-end="url(#ah)" d="M190,256 L268,256"/>
|
||
<text class="lbl" x="230" y="249" text-anchor="middle" font-size="10.5">sử dụng</text>
|
||
<path class="flow" marker-end="url(#ah)" d="M460,256 L536,256"/>
|
||
<text class="lbl" x="498" y="249" text-anchor="middle" font-size="10.5">mọi LLM call</text>
|
||
<!-- gateway <-> model -->
|
||
<path class="flow" marker-end="url(#ah)" d="M659,196 L659,142"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M690,142 L690,194"/>
|
||
<text class="lbl" x="712" y="172" text-anchor="middle" font-size="10.5">proxy</text>
|
||
<!-- gateway <-> KMS -->
|
||
<path class="flowg" marker-end="url(#ah)" d="M655,322 L650,332"/>
|
||
<text class="lbl" x="600" y="330" text-anchor="middle" font-size="10">ký head</text>
|
||
<!-- gateway -> store -->
|
||
<path class="flow" marker-end="url(#ah)" d="M778,252 L824,252"/>
|
||
<text class="lbl" x="801" y="245" text-anchor="middle" font-size="10.5">ghi</text>
|
||
<!-- store -> dashboard -->
|
||
<path class="flow" marker-end="url(#ah)" d="M996,252 L1046,252"/>
|
||
<!-- store -> alert (down-right) -->
|
||
<path class="flowg" marker-end="url(#ah)" d="M912,302 L912,362 L1046,362"/>
|
||
<text class="lbl" x="980" y="356" text-anchor="middle" font-size="10">ngưỡng vượt</text>
|
||
<!-- jira -> dashboard -->
|
||
<path class="flow" marker-end="url(#ah)" d="M1136,140 L1136,206"/>
|
||
<text class="lbl" x="1165" y="176" text-anchor="middle" font-size="10.5">metrics</text>
|
||
<!-- alert -> maintain dev -->
|
||
<path class="flowg" marker-end="url(#ah)" d="M1140,388 L1143,426"/>
|
||
<text class="lbl" x="1178" y="412" text-anchor="middle" font-size="10">page on-call</text>
|
||
<!-- dashboard -> maintain dev -->
|
||
<path class="hz" marker-end="url(#ah)" d="M1108,302 L1108,426"/>
|
||
<!-- CLI -> DEVELOPMENT -->
|
||
<path class="flow" marker-end="url(#ah)" d="M320,294 L320,460 L128,460 L128,572"/>
|
||
<text class="lbl" x="250" y="452" text-anchor="middle" font-size="10.5">thực hiện</text>
|
||
<!-- CI/CD chain -->
|
||
<path class="flow" marker-end="url(#ah)" d="M216,611 L244,611"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M444,611 L472,611"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M626,611 L654,611"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M808,611 L836,611"/>
|
||
<!-- TESTING -> JIRA (ra mép phải rồi vào JIRA từ cạnh phải, tránh xuyên DASHBOARD/ALERT) -->
|
||
<path class="flow" marker-end="url(#ah)" d="M1030,595 L1252,595 L1252,108 L1226,108"/>
|
||
<text class="lbl" x="1120" y="588" text-anchor="middle" font-size="10.5">thống kê kết quả về Jira</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div>
|
||
<h3>Chú giải màu (vai trò)</h3>
|
||
<div class="lg">
|
||
<span><i class="sw" style="background:#fce293"></i>Actor</span>
|
||
<span><i class="sw" style="background:#c3daf1"></i>Process / agent</span>
|
||
<span><i class="sw" style="background:#1f3b6e"></i>Gateway gw-tap</span>
|
||
<span><i class="sw" style="background:#e5863b"></i>Model API</span>
|
||
<span><i class="sw" style="background:#6b4fa8"></i>Vault KMS</span>
|
||
<span><i class="sw" style="background:#f4b73f"></i>Alert</span>
|
||
<span><i class="sw" style="background:#fff"></i>Store + WORM</span>
|
||
<span><i class="sw" style="background:#e12e1c"></i>Dashboard</span>
|
||
<span><i class="sw" style="background:#1e74c6"></i>Jira</span>
|
||
</div>
|
||
<h3 style="margin-top:16px">Trạng thái (trung thực)</h3>
|
||
<div class="lg">
|
||
<span><i class="dot" style="background:#2e9e6b"></i>hiện thực + test thật</span>
|
||
<span><i class="dot" style="background:#d9a441"></i>MVP / local (chưa prod)</span>
|
||
<span><i class="dot" style="background:#9aa4b0"></i>tầm nhìn / prod-target</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3>Cứng hoá thêm ở Mốc 2 (vs bản thi)</h3>
|
||
<div class="cg">
|
||
<b style="color:#1e7a4f">H5+</b> approval ký-danh-tính · KMS live (rotate/non-exportable) · WORM audit (gap/tamper)<br>
|
||
<b style="color:#1e7a4f">H6+</b> alert live (webhook·dead-letter) · provider-telemetry reconcile · dashboard /healthz · window circuit-breaker<br>
|
||
<b style="color:#1e7a4f">Track A/C</b> unicode/base64 · tool-output scan · action/supply-chain/data-exfil gate · Evidence Pack<br>
|
||
<span style="color:#8a94a0">Còn [planned]: IdP live · WORM store thật (S3 Object Lock) · sandbox isolation · billing-API thật</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:11.5px;color:#8a94a0;margin-top:18px">CASAN — bản hiện tại (Mốc 2). Đường/nút <b style="color:#1e7a4f">xanh lá</b> = phần cứng hoá mới sau khi thi (KMS, WORM, alert live, dashboard hosted). Vẫn Level 4 chứng minh bằng tấn công — chưa phải production Level 5 (xem chú giải [planned]).</p>
|
||
</div>
|
||
</body>
|
||
</html>
|