258 lines
14 KiB
HTML
258 lines
14 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 MANG ĐI THI (Mốc 1)</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 #cfd6df;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:#1f3b6e}
|
||
.badge .d{width:9px;height:9px;border-radius:99px;background:#d9a441}
|
||
.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}
|
||
.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>MANG ĐI THI</b> · Mốc 1 (trước nhánh <code style="font-family:monospace">feat/plan07-track-a-hardening</code>) · đủ 7 harness mức demo/PoC.</p>
|
||
</div>
|
||
<span class="badge"><span class="d"></span>Mốc 1 · ~3.0/5 · demo/PoC</span>
|
||
</div>
|
||
<div class="chips">
|
||
<div class="chip">Script <b>37</b></div>
|
||
<div class="chip">Kiểm thử đối kháng <b>79</b> <span style="color:#2e9e6b">· 0 lỗi</span></div>
|
||
<div class="chip">H4·H5·H6 <b>~3.0</b>/5</div>
|
||
<div class="chip">Model <b>Ollama ornith:9b</b> (local)</div>
|
||
</div>
|
||
|
||
<div class="canvas">
|
||
<svg viewBox="0 0 1280 660" 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}
|
||
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}
|
||
.redzone{fill:rgba(226,46,28,.03);stroke:#e12e1c;stroke-width:2.6;stroke-dasharray:0}
|
||
</style>
|
||
</defs>
|
||
|
||
<!-- RED GOVERNANCE ZONE -->
|
||
<rect class="redzone" x="250" y="42" rx="14" width="972" height="286"/>
|
||
<text x="262" y="62" class="t" font-size="12" fill="#e12e1c" letter-spacing=".08em">RUNTIME GOVERNANCE · gw-tap (mọi LLM call đi xuyên harness)</text>
|
||
|
||
<!-- ===== TOP ROW ===== -->
|
||
<!-- AI ENGINEER -->
|
||
<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>
|
||
<!-- HARNESS AGENTS -->
|
||
<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>
|
||
<!-- MODEL API (image: ANTHROPIC API) -->
|
||
<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>
|
||
<!-- JIRA -->
|
||
<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 ===== -->
|
||
<!-- DEVELOPER -->
|
||
<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>
|
||
<!-- CLAUDE CODE CLI -->
|
||
<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 -->
|
||
<g>
|
||
<rect class="box gw" x="540" y="200" width="238" height="112" rx="11"/>
|
||
<text class="tw" x="659" y="232" text-anchor="middle" font-size="15">GATEWAY · gw-tap</text>
|
||
<text class="sw" x="659" y="253" text-anchor="middle" font-size="10.5">bảo mật · chính sách per-agent</text>
|
||
<text class="sw" x="659" y="269" text-anchor="middle" font-size="10.5">telemetry · audit</text>
|
||
<text class="sw" x="659" y="288" text-anchor="middle" font-size="11" font-weight="700">CG1–CG6, CG8</text>
|
||
<circle cx="763" cy="214" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<!-- STORE (image: POSTGRES DB) -->
|
||
<g>
|
||
<rect class="box db" x="828" y="216" width="168" height="80" rx="9"/>
|
||
<text class="t" x="912" y="243" text-anchor="middle" font-size="12.5">AUDIT / TELEMETRY</text>
|
||
<text class="s" x="912" y="260" text-anchor="middle" font-size="10.5">JSONL logs (audit ·</text>
|
||
<text class="s" x="912" y="275" text-anchor="middle" font-size="10.5">provider-usage · metrics)</text>
|
||
<text class="s" x="912" y="290" text-anchor="middle" font-size="9.5" fill="#8a94a0">prod → Postgres</text>
|
||
<circle cx="983" cy="228" r="5" fill="#d9a441"/>
|
||
</g>
|
||
<!-- DASHBOARD -->
|
||
<g>
|
||
<rect class="box dash" x="1050" y="216" width="172" height="80" rx="9"/>
|
||
<text class="tw" x="1136" y="248" text-anchor="middle" font-size="14">DASHBOARD</text>
|
||
<text class="sw" x="1136" y="266" text-anchor="middle" font-size="10.5">AgentOps</text>
|
||
<text class="sw" x="1136" y="281" text-anchor="middle" font-size="10.5">(HTML tĩnh)</text>
|
||
<circle cx="1209" cy="228" r="5" fill="#d9a441"/>
|
||
</g>
|
||
|
||
<!-- MAINTAIN DEV -->
|
||
<g>
|
||
<rect class="box actor" x="1072" y="372" width="150" height="60" rx="9"/>
|
||
<text class="t" x="1147" y="399" text-anchor="middle" font-size="12.5">MAINTAIN DEV</text>
|
||
<text class="s" x="1147" y="416" text-anchor="middle" font-size="10.5">quan sát tình trạng</text>
|
||
</g>
|
||
|
||
<!-- ===== BOTTOM ROW · CI/CD ===== -->
|
||
<g>
|
||
<rect class="box proc" x="40" y="536" width="176" height="70" rx="9"/>
|
||
<text class="t" x="128" y="565" text-anchor="middle" font-size="12.5">DEVELOPMENT</text>
|
||
<text class="s" x="128" y="583" text-anchor="middle" font-size="10">output: Design · Source</text>
|
||
<circle cx="203" cy="548" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="248" y="536" width="196" height="70" rx="9"/>
|
||
<text class="t" x="346" y="562" text-anchor="middle" font-size="12.5">STATIC SCAN</text>
|
||
<text class="s" x="346" y="580" text-anchor="middle" font-size="9.5">tsc · ESLint · SAST · gitleaks · npm audit</text>
|
||
<circle cx="431" cy="548" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="476" y="536" width="150" height="70" rx="9"/>
|
||
<text class="t" x="551" y="565" text-anchor="middle" font-size="12.5">GITHUB</text>
|
||
<text class="s" x="551" y="583" text-anchor="middle" font-size="10">push source</text>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="658" y="536" width="150" height="70" rx="9"/>
|
||
<text class="t" x="733" y="574" text-anchor="middle" font-size="12.5">DEPLOY</text>
|
||
</g>
|
||
<g>
|
||
<rect class="box proc" x="840" y="536" width="190" height="70" rx="9"/>
|
||
<text class="t" x="935" y="562" text-anchor="middle" font-size="12.5">TESTING · CG7</text>
|
||
<text class="s" x="935" y="580" text-anchor="middle" font-size="10">adversarial + harness (79)</text>
|
||
<circle cx="1017" cy="548" r="5" fill="#2e9e6b"/>
|
||
</g>
|
||
|
||
<!-- ===== ARROWS ===== -->
|
||
<!-- AI ENGINEER -> HARNESS AGENTS -->
|
||
<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>
|
||
<!-- HARNESS AGENTS -> CLI (down) -->
|
||
<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>
|
||
<!-- DEVELOPER -> CLI -->
|
||
<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>
|
||
<!-- CLI -> GATEWAY -->
|
||
<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 API (up) -->
|
||
<path class="flow" marker-end="url(#ah)" d="M659,200 L659,142"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M690,142 L690,198"/>
|
||
<text class="lbl" x="712" y="172" text-anchor="middle" font-size="10.5">proxy</text>
|
||
<!-- GATEWAY -> STORE -->
|
||
<path class="flow" marker-end="url(#ah)" d="M778,256 L824,256"/>
|
||
<text class="lbl" x="801" y="249" text-anchor="middle" font-size="10.5">ghi</text>
|
||
<!-- STORE -> DASHBOARD -->
|
||
<path class="flow" marker-end="url(#ah)" d="M996,256 L1046,256"/>
|
||
<!-- JIRA -> DASHBOARD (down) -->
|
||
<path class="flow" marker-end="url(#ah)" d="M1136,140 L1136,212"/>
|
||
<text class="lbl" x="1165" y="180" text-anchor="middle" font-size="10.5">metrics</text>
|
||
<!-- DASHBOARD -> MAINTAIN DEV (down) -->
|
||
<path class="flow" marker-end="url(#ah)" d="M1136,296 L1140,368"/>
|
||
<text class="lbl" x="1174" y="336" text-anchor="middle" font-size="10.5">theo dõi</text>
|
||
<!-- CLI -> DEVELOPMENT (down-left) -->
|
||
<path class="flow" marker-end="url(#ah)" d="M320,294 L320,420 L128,420 L128,532"/>
|
||
<text class="lbl" x="250" y="412" text-anchor="middle" font-size="10.5">thực hiện</text>
|
||
<!-- CI/CD chain -->
|
||
<path class="flow" marker-end="url(#ah)" d="M216,571 L244,571"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M444,571 L472,571"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M626,571 L654,571"/>
|
||
<path class="flow" marker-end="url(#ah)" d="M808,571 L836,571"/>
|
||
<!-- TESTING -> JIRA (ra mép phải rồi vào JIRA từ cạnh phải, tránh xuyên DASHBOARD) -->
|
||
<path class="flow" marker-end="url(#ah)" d="M1030,555 L1250,555 L1250,108 L1226,108"/>
|
||
<text class="lbl" x="1120" y="548" 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 (người)</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:#fff"></i>Store audit/telemetry</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>local / MVP (chưa prod)</span>
|
||
<span><i class="dot" style="background:#9aa4b0"></i>tầm nhìn / prod-target</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3>Control Gates (CG) trong gw-tap</h3>
|
||
<div class="cg">
|
||
<code>CG1</code> input security (injection/secret/PII) · <code>CG2</code> governance/approval (SoD)<br>
|
||
<code>CG3</code> tool-authz (registry·idempotency·rate-limit) · <code>CG4</code> telemetry (cost/latency/token)<br>
|
||
<code>CG5</code> output security (secret/PII egress) · <code>CG6</code> audit hash-chain + ký RSA<br>
|
||
<code>CG7</code> testing gate (CI/CD) · <code>CG8</code> cost-spike / drift / hallucination
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:11.5px;color:#8a94a0;margin-top:18px">CASAN — Context-Aware Secure Agent Native · bản mang đi thi (Mốc 1). Vùng khoanh đỏ = mọi lời gọi model đi xuyên gw-tap (CG1–CG6, CG8); CG7 nằm ở tầng testing CI/CD.</p>
|
||
</div>
|
||
</body>
|
||
</html>
|