gitea-admin/CASAN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(arch): add projectable visual architecture page (casan-architecture.html)

Browse Source 
Self-contained, full-screen-projectable HTML visualizing the base → competition
→ now journey: OLED-glass design, 3-milestone timeline, 7 harness bento cards
(color-coded H1–H7 with each file's role), 5 upgrade-track tables (Track A /
C-MVP / Evidence / H5+ / H6+) with gap-closed columns, honest-maturity panel +
one-line flow diagram. UTF-8 standalone doc (opens directly in a browser),
IntersectionObserver scroll reveals, custom cubic-bezier motion, mobile fallback.
Verified rendering in preview. Cross-linked from both architecture md files.
Adds .claude/launch.json (static server for local preview of optimize-docs).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
thanhnv
2026-07-05 12:48:32 +09:00
co-authored by Claude Fable 5
parent bb1dc8ad9f
commit 571f5d8cc3
4 changed files with 453 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/launch.json
+11
View File
@@ -0,0 +1,11 @@
{
"version": "0.0.1",
"configurations": [
{
"name": "casan-docs",
"runtimeExecutable": "python3",
"runtimeArgs": ["-m", "http.server", "8791", "--directory", "optimize-docs"],
"port": 8791
}
]
}
optimize-docs/CASAN_ARCHITECTURE_AFTER.md
+2
View File
@@ -3,6 +3,8 @@
> **File này = phần nâng cấp SAU khi thi** — nhánh `feat/plan07-track-a-hardening`.
> Điểm xuất phát là trạng thái ở `CASAN_ARCHITECTURE_BEFORE.md` (**37 script, mức demo/PoC**).
> Mục tiêu nâng cấp: từ "chặn được trên sân khấu" → **"đủ chững chạc để chạy thật, chứng minh bằng tấn công"**.
>
> 🖥️ **Bản trình chiếu trực quan:** `casan-architecture.html` — mở full-screen bằng trình duyệt khi thuyết trình.
---
optimize-docs/CASAN_ARCHITECTURE_BEFORE.md
+2
View File
@@ -2,6 +2,8 @@
> **File này = trạng thái "mang đi thi"** — commit freeze `fbcef96`, **trước** nhánh `feat/plan07-track-a-hardening`.
> So sánh với **base gốc** (bộ khung spec-kit vanilla trong ảnh). File tiếp theo (`CASAN_ARCHITECTURE_AFTER.md`) kể tiếp phần nâng cấp sau khi thi.
>
> 🖥️ **Bản trình chiếu trực quan (mở full-screen khi thuyết trình):** `casan-architecture.html` — mở trực tiếp bằng trình duyệt, có cả 3 mốc + 7 harness + 5 nhóm nâng cấp trên một trang.
---
optimize-docs/casan-architecture.html
+438
View File
@@ -0,0 +1,438 @@
<!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</title>
<style>
:root{
--bg:#050506; --ink:#f4f5f7; --dim:#9aa0aa; --faint:#6b7079;
--hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.05);
--glass:rgba(255,255,255,.024);
--h1c:#38bdf8; --h2c:#22d3ee; --h3c:#a78bfa; --h4c:#fb7185;
--h5c:#fbbf24; --h6c:#34d399; --h7c:#818cf8; --gold:#f5d182;
--ease:cubic-bezier(.32,.72,0,1);
--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0}
.page{
font-family:var(--font); background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
line-height:1.55; letter-spacing:-.01em;
}
/* ambient mesh */
.page::before{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(46rem 32rem at 12% -8%, rgba(56,189,248,.10), transparent 60%),
radial-gradient(42rem 30rem at 92% 4%, rgba(167,139,250,.10), transparent 60%),
radial-gradient(50rem 40rem at 78% 96%, rgba(52,211,153,.09), transparent 60%),
radial-gradient(40rem 30rem at 4% 88%, rgba(251,113,133,.07), transparent 60%);
}
/* film grain */
.page::after{
content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}
.wrap{position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 28px}
section{padding:96px 0}
/* reveal */
.rv{opacity:0; transform:translateY(38px); filter:blur(8px); transition:all .9s var(--ease)}
.rv.in{opacity:1; transform:none; filter:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
.eyebrow{
display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair);
background:var(--glass); border-radius:999px; padding:7px 15px;
font-size:11px; text-transform:uppercase; letter-spacing:.24em; color:var(--dim); font-weight:600;
}
.dot{width:6px;height:6px;border-radius:99px;background:var(--h6c);box-shadow:0 0 10px var(--h6c)}
/* HERO */
.hero{min-height:96dvh; display:flex; flex-direction:column; justify-content:center; padding-top:60px}
h1{
font-size:clamp(42px,7.4vw,104px); line-height:.98; margin:26px 0 0;
font-weight:800; letter-spacing:-.045em;
}
h1 .grad{
background:linear-gradient(115deg,#fff 8%,#8fb6ff 42%,#c9a5ff 66%,#7ff0c0 92%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lede{max-width:660px; margin:30px 0 0; font-size:clamp(16px,1.7vw,21px); color:var(--dim); line-height:1.6}
.chips{display:flex; flex-wrap:wrap; gap:14px; margin-top:44px}
.chip{
position:relative; border-radius:22px; padding:5px;
background:var(--glass); border:1px solid var(--hair);
}
.chip .core{
border-radius:17px; padding:16px 22px; background:rgba(255,255,255,.02);
box-shadow:inset 0 1px 1px rgba(255,255,255,.08); min-width:150px;
}
.chip .k{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); font-weight:600}
.chip .v{font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:5px; display:flex; align-items:baseline; gap:9px}
.chip .v small{font-size:14px; font-weight:600; color:var(--dim); letter-spacing:0}
.arrow{color:var(--faint); font-weight:600}
.up{color:var(--h6c)}
/* TIMELINE */
.rail{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:14px}
.stage{
position:relative; border-radius:26px; padding:6px; border:1px solid var(--hair);
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.stage .core{border-radius:20px; padding:26px 24px 28px; background:rgba(10,11,13,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.07); height:100%}
.stage.now{border-color:rgba(52,211,153,.34); box-shadow:0 0 0 1px rgba(52,211,153,.12),0 30px 80px -50px rgba(52,211,153,.5)}
.stage .step{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:700}
.stage h3{margin:10px 0 4px; font-size:20px; font-weight:750; letter-spacing:-.02em}
.stage .big{font-size:52px; font-weight:800; letter-spacing:-.04em; margin:12px 0 2px; line-height:1}
.stage .big span{font-size:18px; color:var(--dim); font-weight:600}
.stage p{margin:8px 0 0; color:var(--dim); font-size:14px; line-height:1.5}
.stage .tag{display:inline-block; margin-top:16px; font-size:12px; padding:5px 11px; border-radius:99px; border:1px solid var(--hair); color:var(--dim)}
.stage.now .tag{color:var(--h6c); border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.06)}
.sec-head{max-width:760px}
.sec-head h2{font-size:clamp(30px,4.4vw,50px); font-weight:800; letter-spacing:-.035em; margin:20px 0 0; line-height:1.04}
.sec-head p{color:var(--dim); font-size:clamp(15px,1.6vw,18px); margin:18px 0 0; line-height:1.6}
/* harness bento */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:48px}
.card{
position:relative; border-radius:24px; padding:6px; border:1px solid var(--hair);
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
transition:transform .6s var(--ease), border-color .6s var(--ease);
}
.card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.16)}
.card .core{border-radius:18px; padding:22px 22px 20px; background:rgba(9,10,12,.72); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); height:100%}
.card .top{display:flex; align-items:center; gap:12px}
.tab{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:13px; letter-spacing:-.02em; flex:none}
.card h4{margin:0; font-size:16px; font-weight:750; letter-spacing:-.02em}
.card .role{font-size:12.5px; color:var(--faint); font-weight:500; margin-top:1px}
.files{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.files li{display:flex; gap:10px; font-size:13px; color:var(--dim); line-height:1.4}
.files code{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--ink); background:rgba(255,255,255,.05); padding:1px 6px; border-radius:6px; white-space:nowrap; flex:none; align-self:flex-start}
.files .fx{color:var(--faint)}
.glow{box-shadow:0 0 14px -2px currentColor}
.col4{grid-column:span 4}.col6{grid-column:span 6}.col12{grid-column:span 12}
/* base strip */
.base{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:30px}
.basecard{border:1px dashed var(--hair); border-radius:16px; padding:16px 16px 18px; background:rgba(255,255,255,.015)}
.basecard code{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink)}
.basecard p{margin:8px 0 0; font-size:12.5px; color:var(--faint); line-height:1.45}
/* upgrade track */
.track{
position:relative; border-radius:26px; padding:7px; margin-top:20px; border:1px solid var(--hair);
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.track .core{border-radius:20px; padding:28px 30px; background:rgba(9,10,12,.72); box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
.track .thead{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pill{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 13px; border-radius:99px}
.track h3{margin:0; font-size:22px; font-weight:780; letter-spacing:-.025em}
.track .sub{color:var(--dim); font-size:14.5px; margin:10px 0 0; max-width:820px; line-height:1.55}
.rows{margin-top:22px; display:flex; flex-direction:column; gap:1px; border-radius:14px; overflow:hidden; border:1px solid var(--hair2)}
.row{display:grid; grid-template-columns:230px 1fr 1fr; gap:20px; padding:15px 18px; background:rgba(255,255,255,.018); align-items:baseline}
.row.h{background:rgba(255,255,255,.03); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); font-weight:700}
.row code{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink); font-weight:600}
.row .desc{font-size:13.5px; color:var(--dim); line-height:1.45}
.row .gap{font-size:13px; color:var(--faint); line-height:1.45}
.row .gap b{color:#e7b4bd; font-weight:600}
.note{margin-top:16px; font-size:13px; color:var(--faint); line-height:1.5; padding-left:14px; border-left:2px solid var(--hair)}
/* honesty */
.honest{
border-radius:28px; padding:8px; margin-top:20px;
border:1px solid rgba(251,191,36,.22); background:linear-gradient(180deg,rgba(251,191,36,.05),rgba(255,255,255,.01));
}
.honest .core{border-radius:21px; padding:34px 34px 32px; background:rgba(12,11,8,.66); box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
.honest h3{margin:0; font-size:24px; font-weight:780; letter-spacing:-.025em}
.honest .lv{display:inline-block; margin-left:12px; font-size:12px; padding:5px 12px; border-radius:99px; background:rgba(52,211,153,.1); color:var(--h6c); border:1px solid rgba(52,211,153,.28); vertical-align:middle; font-weight:700; letter-spacing:.04em}
.honest p{color:var(--dim); font-size:15px; margin:16px 0 0; line-height:1.65}
.planned{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.planned span{font-size:12.5px; color:var(--dim); padding:7px 13px; border-radius:99px; border:1px solid var(--hair); background:rgba(255,255,255,.02)}
.flow{
margin-top:30px; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:13px; color:var(--dim);
border-radius:18px; border:1px solid var(--hair); background:rgba(255,255,255,.02); padding:22px 24px; overflow-x:auto; line-height:2;
}
.flow b{color:var(--ink)} .flow .g{color:var(--h6c)} .flow .a{color:var(--faint)}
footer{padding:56px 0 80px; text-align:center; color:var(--faint); font-size:13px}
@media(max-width:900px){
.rail{grid-template-columns:1fr}
.base{grid-template-columns:1fr 1fr}
.col4,.col6{grid-column:span 12}
.row{grid-template-columns:1fr; gap:6px} .row.h{display:none}
.row code{align-self:start}
}
@media(max-width:600px){
section{padding:64px 0} .wrap{padding:0 18px} .base{grid-template-columns:1fr}
.chip .core{min-width:0}
}
</style>
<div class="page">
<div class="wrap">
<!-- HERO -->
<section class="hero">
<div class="rv"><span class="eyebrow"><span class="dot"></span>CASAN · Kiến trúc bảo mật AI</span></div>
<h1 class="rv d1">Từ bộ khung trống<br>đến <span class="grad">7 lớp phòng thủ</span></h1>
<p class="lede rv d2">Hành trình <b style="color:var(--ink)">before → after</b> của thư mục <code style="font-family:'SF Mono',monospace;font-size:.85em">.specify/scripts</code>: khởi đầu chỉ có 5 file spec-kit vô hại, đến hệ 60 script chặn tấn công thật — mỗi tuyên bố có một cuộc tấn công chứng minh.</p>
<div class="chips rv d3">
<div class="chip"><div class="core"><div class="k">Script</div><div class="v">5 <span class="arrow">→</span> 37 <span class="arrow">→</span> <span class="up">60</span></div></div></div>
<div class="chip"><div class="core"><div class="k">Kiểm thử đối kháng</div><div class="v">79 <span class="arrow">→</span> <span class="up">175</span> <small>0 lỗi</small></div></div></div>
<div class="chip"><div class="core"><div class="k">H4 · H5 · H6</div><div class="v">3.0 <span class="arrow">→</span> <span class="up">4.0</span><small>/ 5</small></div></div></div>
<div class="chip"><div class="core"><div class="k">Lớp yếu nhất</div><div class="v">76 <span class="arrow">→</span> 79 <span class="arrow">→</span> <span class="up">80</span></div></div></div>
</div>
</section>
<!-- TIMELINE -->
<section>
<div class="rv"><span class="eyebrow">3 mốc</span></div>
<div class="sec-head rv d1"><h2>Ba mốc, một mạch tiến hoá</h2></div>
<div class="rail" style="margin-top:40px">
<div class="stage rv d1"><div class="core">
<div class="step">Mốc 0 · Base</div><h3>Spec-kit vanilla</h3>
<div class="big">5<span> file</span></div>
<p>Chỉ biết sinh khung dự án. Không chặn, không ghi vết, không đo chi phí.</p>
<span class="tag">Điểm xuất phát</span>
</div></div>
<div class="stage rv d2"><div class="core">
<div class="step">Mốc 1 · Lúc mang đi thi</div><h3>Đủ 7 harness</h3>
<div class="big">37<span> script</span></div>
<p>Hiện thực đủ 7 lớp bảo vệ. Chặn được tấn công trên sân khấu — mức demo/PoC.</p>
<span class="tag">H4/H5/H6 ~3.0 / 5</span>
</div></div>
<div class="stage now rv d3"><div class="core">
<div class="step">Mốc 2 · Sau khi thi</div><h3>Cứng hoá production</h3>
<div class="big">60<span> script</span></div>
<p>+23 script vá đường lọt "sát production". Chứng minh bằng tấn công, trung thực chỗ chưa tới.</p>
<span class="tag">CASAN Level 4 · không lớp nào &lt; 80</span>
</div></div>
</div>
</section>
<!-- BEFORE: base -->
<section>
<div class="rv"><span class="eyebrow" style="color:var(--faint)">Mốc 0 → Mốc 1</span></div>
<div class="sec-head rv d1">
<h2>Base gốc: 5 file "chỉ sinh khung"</h2>
<p>Đây là toàn bộ <code style="font-family:'SF Mono',monospace;font-size:.85em">.specify/scripts/bash</code> của spec-kit vanilla — chưa một dòng nào về an toàn.</p>
</div>
<div class="base rv d2">
<div class="basecard"><code>check-prerequisites</code><p>Kiểm tra công cụ/điều kiện trước khi chạy</p></div>
<div class="basecard"><code>common</code><p>Hàm dùng chung (đường dẫn, tiện ích)</p></div>
<div class="basecard"><code>create-new-feature</code><p>Dựng khung một feature theo đặc tả</p></div>
<div class="basecard"><code>setup-plan</code><p>Dựng khung kế hoạch triển khai</p></div>
<div class="basecard"><code>update-agent-context</code><p>Cập nhật ngữ cảnh cho agent</p></div>
</div>
</section>
<!-- 7 HARNESS at competition -->
<section>
<div class="rv"><span class="eyebrow">Mốc 1 · lúc thi</span></div>
<div class="sec-head rv d1">
<h2>+32 script → đủ 7 lớp phòng thủ</h2>
<p>Mỗi harness là một lớp bảo vệ. Mỗi file là một mảnh của lớp đó.</p>
</div>
<div class="bento">
<!-- H1 -->
<div class="card col4 rv d1"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(56,189,248,.14);color:var(--h1c)">H1</div><div><h4>Context</h4><div class="role">Ngữ cảnh</div></div></div>
<ul class="files">
<li><code>context-validate</code><span class="fx">kiểm tra pipeline-context hợp lệ</span></li>
<li><code>casan-log</code><span class="fx">ghi log theo cấp độ</span></li>
</ul>
</div></div>
<!-- H2 -->
<div class="card col4 rv d2"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(34,211,238,.14);color:var(--h2c)">H2</div><div><h4>Tool</h4><div class="role">Công cụ</div></div></div>
<ul class="files">
<li><code>tool-registry-gate</code><span class="fx">least-privilege + rate-limit + idempotency</span></li>
<li><code>validate-tool-input</code><span class="fx">kiểm input theo JSON schema</span></li>
<li><code>tool-exec</code><span class="fx">chạy tool có timeout cứng</span></li>
<li><code>tool-audit-lib</code><span class="fx">ghi nhật ký mọi lần gọi tool</span></li>
<li><code>verify-tool-audit</code><span class="fx">xác minh chuỗi nhật ký tool</span></li>
</ul>
</div></div>
<!-- H3 -->
<div class="card col4 rv d3"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(167,139,250,.14);color:var(--h3c)">H3</div><div><h4>Evaluation</h4><div class="role">Đánh giá / model</div></div></div>
<ul class="files">
<li><code>model-router</code><span class="fx">định tuyến model theo vai trò</span></li>
<li><code>model-call</code><span class="fx">gọi model local + cloud</span></li>
<li><code>model-fallback</code><span class="fx">model A hỏng → chuyển B</span></li>
</ul>
</div></div>
<!-- H4 -->
<div class="card col6 rv d1"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(251,113,133,.14);color:var(--h4c)">H4</div><div><h4>Security</h4><div class="role">Bảo mật đầu vào / đầu ra</div></div></div>
<ul class="files">
<li><code>security-check</code><span class="fx">quét injection / secret / PII hai chiều</span></li>
<li><code>artifact-scan</code><span class="fx">chặn injection gián tiếp giấu trong tài liệu</span></li>
<li><code>security-gate</code><span class="fx">cổng bảo mật tổng hợp</span></li>
<li><code>pii-mask</code><span class="fx">che thông tin cá nhân</span></li>
</ul>
</div></div>
<!-- H5 -->
<div class="card col6 rv d2"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(251,191,36,.14);color:var(--h5c)">H5</div><div><h4>Governance</h4><div class="role">Quản trị & nhật ký</div></div></div>
<ul class="files">
<li><code>governance-check</code><span class="fx">tách quyền (SoD), duyệt, least-privilege</span></li>
<li><code>verify-audit-chain</code><span class="fx">xác minh hash-chain (sửa 1 ký tự là gãy)</span></li>
<li><code>sign-audit-head</code><span class="fx">ký số HEAD chuỗi audit</span></li>
<li><code>sign-policy-bundle</code><span class="fx">ký gói chính sách trung tâm</span></li>
<li><code>secrets-scan</code><span class="fx">quét secret lỡ commit</span></li>
<li><code>circuit-breaker-check</code><span class="fx">no-bypass + cầu dao model</span></li>
<li><code>vault-kms</code><span class="fx">ký qua Vault Transit (KMS)</span></li>
</ul>
</div></div>
<!-- H6 -->
<div class="card col6 rv d1"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(52,211,153,.14);color:var(--h6c)">H6</div><div><h4>AgentOps</h4><div class="role">Vận hành & chi phí</div></div></div>
<ul class="files">
<li><code>agent-metrics</code><span class="fx">đo chi phí / độ trễ / token + cảnh báo</span></li>
<li><code>cost-spike-detect</code><span class="fx">phát hiện vọt chi phí</span></li>
<li><code>drift-detect</code><span class="fx">model đổi hành vi theo thời gian</span></li>
<li><code>hallucination-scan</code><span class="fx">quét tín hiệu bịa đặt</span></li>
<li><code>import-provider-telemetry</code><span class="fx">nhập số dùng thật</span></li>
<li><code>provider-cost-lookup</code><span class="fx">tra chi phí thật theo bước</span></li>
<li><code>business-kpi-report</code><span class="fx">báo cáo KPI nghiệp vụ</span></li>
</ul>
</div></div>
<!-- H7 -->
<div class="card col6 rv d2"><div class="core">
<div class="top"><div class="tab glow" style="background:rgba(129,140,248,.14);color:var(--h7c)">H7</div><div><h4>Orchestration</h4><div class="role">Điều phối</div></div></div>
<ul class="files">
<li><code>casan-harness</code><span class="fx">wrapper chạy 1 bước qua đủ harness</span></li>
<li><code>rollback-manager</code><span class="fx">rollback thật khi bước lỗi</span></li>
<li><code>verify-harness-reuse</code><span class="fx">chứng minh harness tái dùng đa dự án</span></li>
</ul>
</div></div>
</div>
</section>
<!-- AFTER: upgrade tracks -->
<section>
<div class="rv"><span class="eyebrow"><span class="dot"></span>Mốc 1 → Mốc 2 · sau khi thi</span></div>
<div class="sec-head rv d1">
<h2>+23 script → cứng hoá cho chạy thật</h2>
<p>Năm nhóm nâng cấp. Không xoá gì của bản thi — chỉ bồi thêm lớp và vá từng đường lọt.</p>
</div>
<!-- Track A -->
<div class="track rv d1"><div class="core">
<div class="thead"><span class="pill" style="background:rgba(251,113,133,.14);color:var(--h4c)">Track A</span><h3>Vá khe hở bộ lọc cũ</h3></div>
<p class="sub">Bịt các kỹ thuật né tránh nâng cao mà bộ lọc thi bỏ sót; làm telemetry không sửa được.</p>
<div class="rows">
<div class="row h"><span>File mới</span><span>Tác dụng</span><span>Đường lọt nó vá</span></div>
<div class="row"><code>unicode-normalize.py</code><span class="desc">Chuẩn hoá NFKC + gấp homoglyph + bóc zero-width + fullwidth</span><span class="gap">Chữ "ignore" viết bằng <b>ký tự Cyrillic giả</b></span></div>
<div class="row"><code>decode-suspicious.py</code><span class="desc">Giải base64/hex đoạn khả nghi rồi quét lại</span><span class="gap"><b>Payload giấu trong mã hoá</b></span></div>
<div class="row"><code>tool-output-scan.sh</code><span class="desc">Quét injection trong OUTPUT của tool trước khi tái nhập context</span><span class="gap"><b>Kết quả tool nhiễm độc</b> quay lại model</span></div>
<div class="row"><code>telemetry-integrity.sh</code><span class="desc">Ràng chi phí vào manifest ký — sửa 1 token là MISMATCH</span><span class="gap"><b>Sửa lén sổ chi phí</b></span></div>
<div class="row"><code>benign-fp-report.sh</code><span class="desc">Corpus 95 câu hợp lệ (Anh/Việt/Nhật) + ngân sách FP</span><span class="gap"><b>Siết chặt mà bắt nhầm</b> người thật</span></div>
</div>
<p class="note">File cũ được nâng: <code style="font-family:'SF Mono',monospace">security-check</code> thêm strict fail-closed (model chết → CHẶN) · <code style="font-family:'SF Mono',monospace">cost-spike-detect</code> thêm trần tuyệt đối + ngân sách tích luỹ + cold-start.</p>
</div></div>
<!-- Track C -->
<div class="track rv d1"><div class="core">
<div class="thead"><span class="pill" style="background:rgba(34,211,238,.14);color:var(--h2c)">Track C-MVP</span><h3>Kiểm soát ngoài 3 harness lõi</h3></div>
<p class="sub">Bảo mật thật không chỉ lọc prompt — còn ở hành động, chuỗi cung ứng, rò rỉ dữ liệu, cô lập chạy.</p>
<div class="rows">
<div class="row h"><span>File mới</span><span>Tác dụng</span><span>Đường lọt nó vá</span></div>
<div class="row"><code>action-gate.sh</code><span class="desc">Canh theo hành động: ghi .env, rm -rf, curl|bash, cài dep</span><span class="gap"><b>Tool "hợp lệ"</b> nhưng làm việc phá hoại</span></div>
<div class="row"><code>supply-chain-gate.sh</code><span class="desc">Typosquat / postinstall / denylist + gói mới phải duyệt</span><span class="gap"><b>AI tự kéo thư viện độc</b></span></div>
<div class="row"><code>supply-chain-scan.py</code><span class="desc">Quét khác biệt manifest dependency</span><span class="gap">bổ trợ cho gate trên</span></div>
<div class="row"><code>data-exfil-guard.sh</code><span class="desc">Chặn secret → cloud; che PII → nhật ký</span><span class="gap"><b>Tuồn dữ liệu ra ngoài</b></span></div>
<div class="row"><code>sandbox-run.sh</code><span class="desc">Chính sách tĩnh (ssh/egress/forkbomb) + ulimit</span><span class="gap">Code sinh ra làm bậy <b>(⚠ scaffold)</b></span></div>
</div>
</div></div>
<!-- Evidence -->
<div class="track rv d1"><div class="core">
<div class="thead"><span class="pill" style="background:rgba(245,209,130,.16);color:var(--gold)">Evidence Pack</span><h3>"Vì sao tin output này?"</h3></div>
<div class="rows">
<div class="row h"><span>File mới</span><span>Tác dụng</span><span>Kết quả</span></div>
<div class="row"><code>evidence-pack.sh</code><span class="desc">Lệnh pack / verify-pack gói bằng chứng</span><span class="gap">gói 12 file ký số</span></div>
<div class="row"><code>evidence-pack-build.py</code><span class="desc">Dựng gói + manifest hash + ký HEAD</span><span class="gap">anchor = signed</span></div>
<div class="row"><code>evidence-pack-verify.py</code><span class="desc">Xác minh tamper-evident</span><span class="gap"><b>Sửa 1 byte → VÔ HIỆU</b>; certified chỉ khi đủ cổng</span></div>
</div>
</div></div>
<!-- H5+ -->
<div class="track rv d1" style="border-color:rgba(251,191,36,.2)"><div class="core">
<div class="thead"><span class="pill" style="background:rgba(251,191,36,.14);color:var(--h5c)">H5+</span><h3>Quản trị lên hạng</h3><span style="margin-left:auto;font-size:12px;color:var(--h5c)">76 → 80</span></div>
<p class="sub">Vá 3 đường lọt lớn nhất: duyệt tin bằng biến môi trường · khoá ký nằm local · nhật ký xoá được.</p>
<div class="rows">
<div class="row h"><span>File mới</span><span>Tác dụng</span><span>Đường lọt nó vá</span></div>
<div class="row"><code>approval-sign.sh</code><span class="desc">Reviewer ký số vào đúng request để duyệt</span><span class="gap"><b>Khai "người duyệt = X" là qua</b></span></div>
<div class="row"><code>approval-verify.sh</code><span class="desc">Xác minh chữ ký + vai trò; chống giả / sai vai / replay / tự duyệt</span><span class="gap">như trên</span></div>
<div class="row"><code>audit-ship.sh</code><span class="desc">Ship HEAD audit ra sổ ngoài append-only (WORM)</span><span class="gap"><b>Xoá nhật ký để phi tang</b></span></div>
<div class="row"><code>worm-ledger.py</code><span class="desc">Sổ ngoài chỉ-ghi-thêm, móc xích hash</span><span class="gap">như trên</span></div>
<div class="row"><code>verify-audit-gap.sh</code><span class="desc">Phát hiện rollback + giả mạo sổ</span><span class="gap">AUDIT_GAP / LEDGER_TAMPERED</span></div>
</div>
<p class="note">File cũ được nâng: <code style="font-family:'SF Mono',monospace">vault-kms</code> thêm rotate (xoay khoá) + non-exportable (chìa không rời két).</p>
</div></div>
<!-- H6+ -->
<div class="track rv d1" style="border-color:rgba(52,211,153,.22)"><div class="core">
<div class="thead"><span class="pill" style="background:rgba(52,211,153,.14);color:var(--h6c)">H6+</span><h3>Vận hành lên hạng</h3><span style="margin-left:auto;font-size:12px;color:var(--h6c)">79 → 80</span></div>
<p class="sub">Vá 3 gap của chính báo cáo chấm điểm: alerting chỉ ghi file · telemetry nhập tay · dashboard tĩnh — cộng kỹ thuật né cầu dao.</p>
<div class="rows">
<div class="row h"><span>File mới</span><span>Tác dụng</span><span>Đường lọt nó vá</span></div>
<div class="row"><code>alert-dispatch.sh</code><span class="desc">Gửi cảnh báo live ra webhook + dedup + dead-letter + gửi lại</span><span class="gap"><b>Sự cố chỉ ghi file, 3h sáng không ai biết</b></span></div>
<div class="row"><code>provider-usage-fetch.sh</code><span class="desc">Kéo usage từ API nhà cung cấp + kiểm định dạng + fail-loud</span><span class="gap">thiếu nguồn chi phí "ground truth"</span></div>
<div class="row"><code>telemetry-reconcile.sh</code><span class="desc">Đối soát số ở máy vs nhà cung cấp</span><span class="gap"><b>Khai gian chi phí</b> để giấu hành động lén</span></div>
<div class="row"><code>dashboard-serve.sh</code><span class="desc">Serve dashboard qua HTTP + /healthz stale-aware</span><span class="gap"><b>Bảng tĩnh không biết khi telemetry chết lặng</b></span></div>
<div class="row"><code>dashboard-server.py</code><span class="desc">HTTP server: fresh → 200, số liệu cũ → 503 stale</span><span class="gap">như trên</span></div>
</div>
<p class="note">File cũ được nâng: <code style="font-family:'SF Mono',monospace">circuit-breaker-check</code> thêm cầu dao theo tỷ lệ hỏng trong khoảng (chống né bằng xen kẽ thành công).</p>
</div></div>
</section>
<!-- HONEST -->
<section>
<div class="honest rv d1"><div class="core">
<h3>Trung thực về chỗ chưa tới<span class="lv">CASAN Level 4 · chứng minh bằng tấn công</span></h3>
<p>Đây là mức <b style="color:var(--ink)">production nội bộ</b>, mỗi tuyên bố có tấn công thật đứng sau — <b style="color:var(--ink)">chưa phải production hoàn chỉnh</b>. Sức mạnh nằm ở <b style="color:var(--ink)">phòng thủ nhiều tầng + trung thực</b>, không phải "viên đạn bạc". Các hạng mục production còn để ngỏ:</p>
<div class="planned">
<span>Hệ danh tính doanh nghiệp (IdP / OIDC live)</span>
<span>Kho WORM thật (S3 Object Lock)</span>
<span>KMS mặc định + HSM</span>
<span>Cô lập kernel thật (container/nsjail)</span>
<span>Dashboard triển khai chính thức + kênh alert managed</span>
<span>Billing-API thật (cần khoá)</span>
<span>Phát hiện đa ngôn ngữ (VI/JA)</span>
</div>
<div class="flow">
<b>Base 5 file</b> <span class="a">(spec-kit)</span>
└─ <span class="a">+32 script, +8 test</span> → <b>LÚC THI: 37 script · ~79 test</b> <span class="a">· demo/PoC (H4/H5/H6 ~3.0/5)</span>
└─ <span class="a">+23 script, +6 test</span> → <b class="g">SAU THI: 60 script · 175 test</b> <span class="a">· Level 4 (H4/H5/H6 ~4.0/5, không lớp nào &lt; 80)</span>
</div>
</div></div>
</section>
<footer>CASAN — Context-Aware Secure Agent Native · kiến trúc before → after · <b style="color:var(--dim)">175 kiểm thử · 0 lỗi</b></footer>
</div>
</div>
<script>
(function(){
var io=new IntersectionObserver(function(es){
es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
},{threshold:.12, rootMargin:'0px 0px -8% 0px'});
document.querySelectorAll('.rv').forEach(function(el){ io.observe(el); });
})();
</script>
</body>
</html>