thanhnvandClaude Opus 4.8
fbcef967e5
Freeze current submission/demo baseline: - casan-next-plans/: full task-level plan set (Plan 00 index + 02/04/06/07/08/09/12, QA, slide deck) - optimize-docs/video-steps/: per-vector scene breakdown (commands/screen-text/script) + start-tmux - run-all.sh / scorecard.sh / map-live.sh: REAL=1 live-battery wiring - regenerated evidence + audit/telemetry logs from live REAL=1 run - submission README + video recording guide updates - dry-run pipeline logs for 001-okr-web-app Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
120 lines
7.7 KiB
Markdown
120 lines
7.7 KiB
Markdown
# Bố trí màn hình khi quay
|
||
|
||
> Vì `run-all.sh` **tự in title card + mô tả + lệnh + exit code** ngay trong terminal, chính terminal đã là "text hiển thị". Không cần phần mềm dựng phụ đề — chỉ cần layout terminal đọc rõ.
|
||
|
||
---
|
||
|
||
## ✅ PHƯƠNG ÁN 1 — Một terminal full-screen (KHUYẾN NGHỊ)
|
||
|
||
Đơn giản nhất, ít lỗi nhất, hợp video text-only. Script tự dẫn chuyện tuần tự.
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ TERMINAL DUY NHẤT (full-screen, font lớn) │
|
||
│ → chạy: bash .../video-steps/run-all.sh │
|
||
│ │
|
||
│ ┏━ A1 · Direct prompt injection │
|
||
│ ┗━ OWASP LLM01 · MAESTRO L1 │
|
||
│ 🎯 Tấn công: ... │
|
||
│ 🛡️ Control: ... │
|
||
│ $ bash $S/security-check.sh ... │
|
||
│ SECURITY_BLOCKED ... rc=2 │
|
||
│ → exit=2 │
|
||
│ [Enter ▶ bước tiếp theo] │
|
||
│ │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Thiết lập terminal khi quay:**
|
||
- Kích thước cửa sổ: **1920×1080** (khớp khung quay 1080p), hoặc 2560×1440.
|
||
- Font: **18–22pt** monospace (JetBrains Mono / Menlo / Fira Code), **line-height 1.4**.
|
||
- Theme **nền tối, tương phản cao** (vd Dracula, One Dark) — chữ trắng/vàng/xanh nổi rõ.
|
||
- `columns ≈ 100`, đủ để dòng title card + rule không bị xuống dòng.
|
||
- **Tắt** thông báo hệ thống, Do Not Disturb, ẩn thanh menu.
|
||
- Xoá scrollback trước khi quay: `clear && printf '\033[3J'`.
|
||
|
||
**Cách chạy khi quay:**
|
||
```bash
|
||
# MẶC ĐỊNH: tự chạy, dừng 5s mỗi bước rồi tiếp (rảnh tay, hợp quay)
|
||
bash /…/optimize-docs/video-steps/run-all.sh
|
||
|
||
STEP_DELAY=8 bash /…/run-all.sh # bước nhiều output → tăng thời gian dừng
|
||
AUTO=0 bash /…/run-all.sh # bấm Enter thủ công (kiểm soát nhịp cắt cảnh)
|
||
```
|
||
|
||
---
|
||
|
||
## ◧ PHƯƠNG ÁN 2 — tmux 2 pane + BẢN ĐỒ SỐNG nhấp nháy (KHUYẾN NGHỊ cho bạn)
|
||
|
||
Pane trái là **bản đồ ANSI sống**: `run-all.sh` chạy tới bước nào thì bản đồ **tự tô màu bước đó, nhấp nháy vàng**, các bước trước chuyển **✓ xanh**, bước sau **mờ**. Hai pane đồng bộ qua một file trạng thái (`/tmp/casan_step`).
|
||
|
||
```
|
||
┌────────────────────┬─────────────────────────────────────────┐
|
||
│ CASAN·ATTACK MAP │ PANE PHẢI — run-all.sh │
|
||
│ tiến độ chạy ▸ │ │
|
||
│ ⭐ H4 · SECURITY │ ┏━ D1 · Cost-spike 3× 🔥 │
|
||
│ ✓ A1 direct inj │ 🎯 Tấn công: ... │
|
||
│ ✓ A2 paraphrase │ 🛡️ Control: ... │
|
||
│ ✓ … │ $ cost-spike-detect ... │
|
||
│ ⭐ H6 · AGENTOPS │ COST_SPIKE_DETECTED exit=2 │
|
||
│ ▶ D1 cost-spike🔥 ◀│ → exit=2 │ ← ▶ nhấp nháy
|
||
│ · D2 negative │ [Enter ▶ bước tiếp] │
|
||
│ · … │ │
|
||
└────────────────────┴─────────────────────────────────────────┘
|
||
↑ ✓ xanh = xong · ▶ vàng nháy = đang chạy · · mờ = chưa tới
|
||
```
|
||
|
||
**Cách chạy — 1 lệnh dựng sẵn cả 2 pane:**
|
||
```bash
|
||
cd <thư mục gốc dự án có .specify/> # vd: AINative_OKR_CASAN5
|
||
bash /…/optimize-docs/video-steps/start-tmux.sh
|
||
```
|
||
`start-tmux.sh` tự: tạo session `casan`, pane trái chạy [`map-live.sh`](map-live.sh), pane phải chạy [`run-all.sh`](run-all.sh) — **mặc định tự chạy, dừng 5s/bước**. Tuỳ chỉnh:
|
||
```bash
|
||
STEP_DELAY=8 bash /…/start-tmux.sh # tăng thời gian dừng mỗi bước
|
||
AUTO=0 bash /…/start-tmux.sh # pane phải bấm Enter thủ công
|
||
COLS=240 ROWS=60 LEFT=48 bash /…/start-tmux.sh # cửa sổ to hơn / pane trái rộng hơn
|
||
```
|
||
|
||
**Cơ chế đồng bộ (nếu muốn tự dựng tay):**
|
||
- `run-all.sh` ghi id bước hiện tại vào `$CASAN_STEP_FILE` (mặc định `/tmp/casan_step`) tại mỗi bước.
|
||
- `map-live.sh <step_file>` poll file đó ~0.45s/lần, vẽ lại map và **tự toggle nhấp nháy** (không phụ thuộc terminal có hỗ trợ thuộc tính blink hay không).
|
||
- Cả hai pane phải trỏ **cùng** một `step_file`.
|
||
|
||
---
|
||
|
||
## ❓ Mermaid có làm được không?
|
||
|
||
**Không — không dùng trực tiếp trong pane tmux.** Mermaid render bằng engine SVG của trình duyệt/markdown-viewer; terminal không có engine đó, và bản mermaid tĩnh cũng không "nhấp nháy theo bước". Vì vậy hiệu ứng bạn muốn được làm bằng **bản đồ ANSI sống** ở trên (đúng tinh thần "chạy đến đâu sáng đến đó").
|
||
|
||
Nếu bạn **thích đúng look mermaid**, có 2 lối vòng (không khuyến nghị cho tmux):
|
||
1. **Render ảnh mỗi bước:** `mmdc` (mermaid-cli) sinh PNG với node hiện tại được tô (`classDef current`/`:::current`), rồi hiện bằng terminal hỗ trợ ảnh (kitty `icat`, iTerm2 `imgcat`, hoặc `chafa`). Mỗi bước phải sinh lại ảnh → nặng, và **không nhấp nháy**.
|
||
2. **Trang HTML mermaid + JS:** highlight node theo bước bằng JavaScript, quay **cửa sổ trình duyệt** đặt cạnh terminal thay cho pane trái. Đẹp, mượt, nhưng bỏ mô hình tmux thuần.
|
||
|
||
> Muốn phương án 2 (HTML mermaid động, tôi dựng thành 1 trang tự chạy highlight)? Nói mình làm — nhưng để quay trong tmux thì `map-live.sh` là lựa chọn gọn nhất.
|
||
|
||
---
|
||
|
||
## 🎚️ Cửa sổ phụ (KHÔNG đưa lên khung quay)
|
||
|
||
Để riêng ở tab/desktop khác, chỉ bật trước:
|
||
|
||
| Cửa sổ | Việc | Ghi chú |
|
||
|---|---|---|
|
||
| **SSH tunnel Ollama** | `ssh -N -L 11434:...` | giữ chạy để A3/A8/D4 có model — KHÔNG cần quay |
|
||
| **asciinema** | `asciinema rec casan.cast` | ghi terminal thật để giám khảo replay (tuỳ chọn) |
|
||
|
||
> `run-all.sh` tự phát hiện Ollama: nếu tunnel sống → chạy A3/A8/D4; nếu không → in "SKIP" có ghi chú. Bật tunnel trước là đủ.
|
||
|
||
---
|
||
|
||
## 🎬 Nhịp quay gợi ý (với Enter thủ công)
|
||
|
||
1. Mở màn hình intro (banner + 3 dòng nguyên tắc) → đọc/để 5s → Enter.
|
||
2. Mỗi vector: để title card + 🎯/🛡️ hiện ~2s → Enter chạy lệnh → giữ **exit code** ~2s → Enter.
|
||
3. 4 cảnh 🔥 (A5 · B1 · D1 · CHAIN): giữ lâu hơn (~4s), zoom dòng kết quả khi dựng.
|
||
4. Kết: security-gate `PASS=11 FAIL=0` + card chốt → giữ ~4s.
|
||
|
||
Tổng ~12–15 phút khớp bảng thời lượng ở Mục 9 kịch bản gốc.
|