update doc/log
This commit is contained in:
thanhnv
@@ -0,0 +1,257 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,216 @@
|
||||
<!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 before → after (1 trang)</title>
|
||||
<style>
|
||||
:root{
|
||||
--bg:#050506; --ink:#f4f5f7; --dim:#9aa0aa; --faint:#6b7079;
|
||||
--hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.05); --glass:rgba(255,255,255,.03);
|
||||
--h1c:#38bdf8; --h2c:#22d3ee; --h3c:#a78bfa; --h4c:#fb7185; --h5c:#fbbf24; --h6c:#34d399; --h7c:#818cf8; --gold:#f5d182;
|
||||
--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
|
||||
--mono:"SF Mono",ui-monospace,Menlo,monospace;
|
||||
}
|
||||
*{box-sizing:border-box; margin:0}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
font-family:var(--font); background:var(--bg); color:var(--ink);
|
||||
-webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow:hidden; position:relative;
|
||||
}
|
||||
body::before{
|
||||
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
|
||||
background:
|
||||
radial-gradient(40rem 26rem at 8% -10%, rgba(56,189,248,.11), transparent 60%),
|
||||
radial-gradient(38rem 26rem at 96% -6%, rgba(167,139,250,.10), transparent 60%),
|
||||
radial-gradient(46rem 34rem at 88% 108%, rgba(52,211,153,.10), transparent 60%),
|
||||
radial-gradient(34rem 26rem at 0% 106%, rgba(251,113,133,.07), transparent 60%);
|
||||
}
|
||||
body::after{
|
||||
content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.03;
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
.deck{
|
||||
position:relative; z-index:1; height:100dvh; max-width:1500px; margin:0 auto;
|
||||
padding:clamp(16px,2.4vh,30px) clamp(20px,2.6vw,46px);
|
||||
display:grid; grid-template-rows:auto auto 1fr auto; gap:clamp(10px,1.7vh,20px);
|
||||
}
|
||||
|
||||
/* header */
|
||||
.hd{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
|
||||
.brand{display:flex; align-items:center; gap:14px}
|
||||
.eyebrow{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); background:var(--glass); border-radius:999px; padding:6px 13px; font-size:10.5px; text-transform:uppercase; letter-spacing:.22em; color:var(--dim); font-weight:600; white-space:nowrap}
|
||||
.dot{width:6px;height:6px;border-radius:99px;background:var(--h6c);box-shadow:0 0 10px var(--h6c)}
|
||||
.hd h1{font-size:clamp(20px,2.5vw,34px); font-weight:800; letter-spacing:-.035em; line-height:1}
|
||||
.hd h1 .g{background:linear-gradient(110deg,#fff,#8fb6ff 45%,#7ff0c0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
|
||||
.lv{font-size:11px; padding:6px 13px; border-radius:99px; background:rgba(52,211,153,.1); color:var(--h6c); border:1px solid rgba(52,211,153,.3); font-weight:700; letter-spacing:.03em; white-space:nowrap}
|
||||
|
||||
/* stat strip */
|
||||
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px)}
|
||||
.stat{border-radius:16px; padding:5px; background:var(--glass); border:1px solid var(--hair)}
|
||||
.stat .c{border-radius:11px; padding:clamp(9px,1.5vh,15px) clamp(12px,1.2vw,18px); background:rgba(255,255,255,.02); box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
|
||||
.stat .k{font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--faint); font-weight:600}
|
||||
.stat .v{font-size:clamp(21px,2.5vw,31px); font-weight:800; letter-spacing:-.03em; margin-top:3px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
|
||||
.stat .v small{font-size:12px; font-weight:600; color:var(--dim); letter-spacing:0}
|
||||
.ar{color:var(--faint); font-weight:600} .up{color:var(--h6c)}
|
||||
|
||||
/* body split */
|
||||
.body{display:grid; grid-template-columns:0.86fr 1.6fr; gap:clamp(12px,1.4vw,20px); min-height:0}
|
||||
.panel{border-radius:20px; padding:6px; border:1px solid var(--hair); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); min-height:0}
|
||||
.panel>.in{border-radius:14px; padding:clamp(14px,1.9vh,22px); background:rgba(9,10,12,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); height:100%; display:flex; flex-direction:column; min-height:0}
|
||||
.ptitle{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); font-weight:700; margin-bottom:clamp(10px,1.4vh,16px)}
|
||||
|
||||
/* timeline (left) */
|
||||
.mile{display:flex; flex-direction:column; gap:clamp(9px,1.3vh,14px); flex:1; justify-content:space-between}
|
||||
.m{position:relative; border-radius:14px; padding:clamp(11px,1.5vh,16px) 16px; border:1px solid var(--hair2); background:rgba(255,255,255,.017)}
|
||||
.m.now{border-color:rgba(52,211,153,.34); background:rgba(52,211,153,.05)}
|
||||
.m .step{font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); font-weight:700}
|
||||
.m .row1{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:5px}
|
||||
.m .name{font-size:clamp(14px,1.5vw,17px); font-weight:750; letter-spacing:-.02em}
|
||||
.m .num{font-size:clamp(20px,2.3vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1}
|
||||
.m .num small{font-size:11px; color:var(--dim); font-weight:600}
|
||||
.m.now .num{color:var(--h6c)}
|
||||
.m p{margin-top:5px; font-size:12px; color:var(--dim); line-height:1.4}
|
||||
|
||||
/* right column: harness + tracks */
|
||||
.rcol{display:grid; grid-template-rows:auto 1fr; gap:clamp(10px,1.4vh,16px); min-height:0}
|
||||
.harness{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(7px,.8vw,11px)}
|
||||
.hx{border-radius:12px; padding:clamp(9px,1.3vh,13px) clamp(9px,.9vw,13px); border:1px solid var(--hair2); background:rgba(255,255,255,.02); display:flex; align-items:center; gap:9px}
|
||||
.tab{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none;box-shadow:0 0 12px -3px currentColor}
|
||||
.hx .nm{font-size:12.5px; font-weight:700; letter-spacing:-.01em; line-height:1.1}
|
||||
.hx .rl{font-size:10.5px; color:var(--faint); margin-top:1px}
|
||||
.hx.span2{grid-column:span 2}
|
||||
|
||||
.tracks{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(7px,.8vw,11px); min-height:0}
|
||||
.tk{border-radius:13px; padding:clamp(11px,1.5vh,15px) clamp(10px,.9vw,14px); border:1px solid var(--hair2); background:rgba(255,255,255,.02); display:flex; flex-direction:column}
|
||||
.tk .ph{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:99px; align-self:flex-start}
|
||||
.tk .cnt{font-size:clamp(17px,1.9vw,23px); font-weight:800; letter-spacing:-.03em; margin-top:10px}
|
||||
.tk .cnt small{font-size:11px; color:var(--faint); font-weight:600}
|
||||
.tk .desc{font-size:11.5px; color:var(--dim); line-height:1.38; margin-top:6px; flex:1}
|
||||
.tk .win{font-size:11px; font-weight:700; margin-top:8px}
|
||||
|
||||
/* footer honesty */
|
||||
.ft{border-radius:16px; padding:5px; border:1px solid rgba(251,191,36,.22); background:linear-gradient(180deg,rgba(251,191,36,.05),rgba(255,255,255,.01))}
|
||||
.ft .c{border-radius:11px; padding:clamp(11px,1.6vh,16px) clamp(16px,1.6vw,24px); background:rgba(12,11,8,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between}
|
||||
.ft .lead{font-size:clamp(12.5px,1.3vw,15px); color:var(--dim); line-height:1.45}
|
||||
.ft .lead b{color:var(--ink); font-weight:700}
|
||||
.ft .flow{font-family:var(--mono); font-size:11.5px; color:var(--dim); white-space:nowrap}
|
||||
.ft .flow b{color:var(--ink)} .ft .flow .g{color:var(--h6c)} .ft .flow .a{color:var(--faint)}
|
||||
|
||||
@media(max-width:1040px){
|
||||
body{overflow:auto}
|
||||
.deck{height:auto; min-height:100dvh}
|
||||
.body{grid-template-columns:1fr}
|
||||
.harness{grid-template-columns:repeat(2,1fr)}
|
||||
.tracks{grid-template-columns:1fr 1fr}
|
||||
.stats{grid-template-columns:1fr 1fr}
|
||||
.hx.span2{grid-column:span 1}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="deck">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="hd">
|
||||
<div class="brand">
|
||||
<span class="eyebrow"><span class="dot"></span>CASAN · Kiến trúc bảo mật AI</span>
|
||||
<h1>Từ <span class="g">5 file spec-kit → 60 script phòng thủ</span></h1>
|
||||
</div>
|
||||
<span class="lv">CASAN Level 4 · chứng minh bằng tấn công</span>
|
||||
</div>
|
||||
|
||||
<!-- STAT STRIP -->
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="c"><div class="k">Script</div><div class="v">5 <span class="ar">→</span> 37 <span class="ar">→</span> <span class="up">60</span></div></div></div>
|
||||
<div class="stat"><div class="c"><div class="k">Kiểm thử đối kháng</div><div class="v">79 <span class="ar">→</span> <span class="up">175</span> <small>0 lỗi</small></div></div></div>
|
||||
<div class="stat"><div class="c"><div class="k">H4 · H5 · H6 (trưởng thành)</div><div class="v">3.0 <span class="ar">→</span> <span class="up">4.0</span> <small>/ 5</small></div></div></div>
|
||||
<div class="stat"><div class="c"><div class="k">Lớp yếu nhất</div><div class="v">76 <span class="ar">→</span> 79 <span class="ar">→</span> <span class="up">80</span></div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- BODY -->
|
||||
<div class="body">
|
||||
|
||||
<!-- LEFT: 3 milestones -->
|
||||
<div class="panel"><div class="in">
|
||||
<div class="ptitle">Ba mốc tiến hoá</div>
|
||||
<div class="mile">
|
||||
<div class="m">
|
||||
<div class="step">Mốc 0 · Base</div>
|
||||
<div class="row1"><span class="name">Spec-kit vanilla</span><span class="num">5<small> file</small></span></div>
|
||||
<p>Chỉ sinh khung dự án — chưa chặn, chưa ghi vết, chưa đo chi phí.</p>
|
||||
</div>
|
||||
<div class="m">
|
||||
<div class="step">Mốc 1 · Lúc mang đi thi</div>
|
||||
<div class="row1"><span class="name">Đủ 7 harness</span><span class="num">37<small> script</small></span></div>
|
||||
<p>Hiện thực đủ 7 lớp bảo vệ. Chặn tấn công trên sân khấu — mức demo/PoC (3.0/5).</p>
|
||||
</div>
|
||||
<div class="m now">
|
||||
<div class="step">Mốc 2 · Sau khi thi</div>
|
||||
<div class="row1"><span class="name">Cứng hoá production</span><span class="num">60<small> script</small></span></div>
|
||||
<p>+23 script vá đường lọt "sát production". Level 4 — không lớp nào dưới 80.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- RIGHT: harnesses + upgrade tracks -->
|
||||
<div class="rcol">
|
||||
|
||||
<div class="panel"><div class="in">
|
||||
<div class="ptitle">7 lớp phòng thủ (harness) — hiện thực từ lúc thi</div>
|
||||
<div class="harness">
|
||||
<div class="hx"><span class="tab" style="background:rgba(56,189,248,.15);color:var(--h1c)">H1</span><div><div class="nm">Context</div><div class="rl">ngữ cảnh</div></div></div>
|
||||
<div class="hx"><span class="tab" style="background:rgba(34,211,238,.15);color:var(--h2c)">H2</span><div><div class="nm">Tool</div><div class="rl">công cụ · least-priv</div></div></div>
|
||||
<div class="hx"><span class="tab" style="background:rgba(167,139,250,.15);color:var(--h3c)">H3</span><div><div class="nm">Evaluation</div><div class="rl">model · judge</div></div></div>
|
||||
<div class="hx"><span class="tab" style="background:rgba(251,113,133,.15);color:var(--h4c)">H4</span><div><div class="nm">Security</div><div class="rl">injection · secret · PII</div></div></div>
|
||||
<div class="hx"><span class="tab" style="background:rgba(251,191,36,.15);color:var(--h5c)">H5</span><div><div class="nm">Governance</div><div class="rl">audit ký · SoD</div></div></div>
|
||||
<div class="hx"><span class="tab" style="background:rgba(52,211,153,.15);color:var(--h6c)">H6</span><div><div class="nm">AgentOps</div><div class="rl">chi phí · drift · alert</div></div></div>
|
||||
<div class="hx span2"><span class="tab" style="background:rgba(129,140,248,.15);color:var(--h7c)">H7</span><div><div class="nm">Orchestration</div><div class="rl">điều phối · rollback thật</div></div></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div class="panel"><div class="in">
|
||||
<div class="ptitle">+23 script sau khi thi — 5 nhóm cứng hoá</div>
|
||||
<div class="tracks">
|
||||
<div class="tk">
|
||||
<span class="ph" style="background:rgba(251,113,133,.14);color:var(--h4c)">Track A</span>
|
||||
<div class="cnt">5 <small>file</small></div>
|
||||
<div class="desc">Homoglyph · zero-width · base64 · fail-closed · telemetry ký · FP 0%.</div>
|
||||
</div>
|
||||
<div class="tk">
|
||||
<span class="ph" style="background:rgba(34,211,238,.14);color:var(--h2c)">Track C</span>
|
||||
<div class="cnt">5 <small>file</small></div>
|
||||
<div class="desc">Gate hành động · supply-chain · chống rò rỉ · sandbox.</div>
|
||||
</div>
|
||||
<div class="tk">
|
||||
<span class="ph" style="background:rgba(245,209,130,.16);color:var(--gold)">Evidence</span>
|
||||
<div class="cnt">3 <small>file</small></div>
|
||||
<div class="desc">Gói bằng chứng ký số — sửa 1 byte → vô hiệu.</div>
|
||||
</div>
|
||||
<div class="tk">
|
||||
<span class="ph" style="background:rgba(251,191,36,.14);color:var(--h5c)">H5+</span>
|
||||
<div class="cnt">5 <small>file</small></div>
|
||||
<div class="desc">Duyệt ký-danh-tính · khoá trong két (KMS) · WORM ngoài.</div>
|
||||
<div class="win" style="color:var(--h5c)">76 → 80 ↑</div>
|
||||
</div>
|
||||
<div class="tk">
|
||||
<span class="ph" style="background:rgba(52,211,153,.14);color:var(--h6c)">H6+</span>
|
||||
<div class="cnt">5 <small>file</small></div>
|
||||
<div class="desc">Alert live + dead-letter · đối soát chi phí · dashboard /healthz.</div>
|
||||
<div class="win" style="color:var(--h6c)">79 → 80 ↑</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER honesty -->
|
||||
<div class="ft"><div class="c">
|
||||
<div class="lead"><b>Trung thực:</b> mức <b>production nội bộ, chứng minh bằng tấn công</b> — chưa production hoàn chỉnh (còn IdP live · WORM store thật · cô lập kernel · billing-API). Sức mạnh = <b>phòng thủ nhiều tầng + trung thực</b>, không phải "viên đạn bạc".</div>
|
||||
<div class="flow"><b>5</b> <span class="a">→</span> <b>37</b> <span class="a">→</span> <b class="g">60 script</b> <span class="a">·</span> <b class="g">175 test · 0 lỗi</b></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user