---
pen: ai
status: draft
---

# 互動教學組件（course-site/components）

單檔 HTML 互動組件，繁體中文介面、術語附英文，離線可跑（唯一的外部檔案在 `./vendor/`）。編號與規格見 [../../course-master-plan.md](../../course-master-plan.md) §五。

| 編號 | 檔案 | 狀態 | 用於 | GSS-14 試跑 |
|---|---|---|---|---|
| C1 | `01-tokens-cost-meter.html` 中文分詞與成本計量表 | v1 建成（2026-09-04），無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 1 堂 | 09/07 第 1 堂 |
| C5 | `05-context-window-meter.html` 上下文視窗計量表（含壓縮） | v1 建成（2026-09-04），無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 2 堂 | 09/14 第 2 堂 |
| C2 | `02-agent-loop-stepper.html` Agent 迴圈逐步器 | v1 建成（2026-09-04），兩輪獨立審查 27 項全部處理，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 3 堂 | 09/21 第 3 堂 |
| C4 | `04-harness-anatomy.html` Harness 解剖圖 | v1 建成（2026-09-05），文案審查 26 項加功能審查 7 項全部處理，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 4 堂 | 10/05 第 4 堂 |
| C9 | `09-poisoned-page.html` 被下毒的網頁 | v1 建成（2026-09-05），功能審查 5 項加文案審查 12 項全部處理，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 5 堂 | 10/05 第 4 堂（與 C4 同堂試跑） |
| C7 | `07-mcp-handshake.html` MCP 握手動畫 | v1 建成（2026-09-05），按 MCP 規範 2026-07-28 版繪製；功能審查 9 項加文案審查 8 項處理 17 項，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 5 堂 | — |
| C6 | `06-permission-gate.html` 權限模式閘門 | v1 建成（2026-09-05），以 dsh 真實標籤（沙箱三級 × 審批 ask／never，三個內建 preset）為主欄，並列 Claude Code 六模式與 Cline 開關；同日按雲機 PoC 實錄對齊 dsh 規則，兩輪審查（第一輪功能 12＋文案 12，第二輪功能 6＋文案 9）全部處理；QA 53 項全過，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 4 堂 | 10/05 第 4 堂（與 C4、C9 同堂，教師視時間取捨） |
| C8 | `08-skills-disclosure.html` Skills 漸進揭示 | v1 建成（2026-09-05），20 份虛構學科 skill、關鍵詞匹配示意、可寫自己的 skill 放上書架；兩輪審查（第一輪功能 12＋文案 10，第二輪功能 10＋文案 9）全部處理；QA 38 項全過，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 5 堂 | — |
| C3 | `03-traffic-viewer.html` 自有流量檢視器 | v1 建成（2026-09-05），三種記錄格式（dsh `session.jsonl.zstd` 頁內解壓、Claude Code JSONL、messages JSON），格式按雲機 PoC 真實記錄核實（夾具在 `tests/fixtures/`），內建虛構範例；兩輪審查（第一輪功能 12＋文案 12，第二輪功能 8＋文案 10）全部處理；QA 61 項全過，無頭 Chrome 零 console 錯誤、零網絡請求，390px 無橫向溢出 | 新課第 3 堂（教師示範） | — |
| C10 | `10-division-of-labour.html` 分工示意 | v1 建成（2026-09-05），三崗位（起草／覆核／裁定）× 五種人手，四種預設排法並排；兩輪審查（第一輪功能 12＋文案 12，第二輪功能 7＋文案 10）全部處理；QA 37 項全過，無頭 Chrome 零 console 錯誤，390px 無橫向溢出 | 新課第 6 堂 | — |

## 本機預覽

從 `course-site/` 目錄啟動靜態伺服器，再開瀏覽器：

```bash
cd ai-workbench-elective/course-site && python3 -m http.server 8000
```

然後開 `http://localhost:8000/components/01-tokens-cost-meter.html`。直接雙擊 HTML（file://）也能開，分詞器以傳統 `<script>` 全域載入，不依賴 fetch。

## C1 使用要點（給授課者）

- **載入**：三個分詞器共約 24 MB（gzip 後約 7 MB），頁面先繪製、再並行懶載入，載入前每欄先顯示估算值並標「載入中」。課室 Wi-Fi 若慢，先開頁再講開場白即可。部署到有 gzip 的主機（GitHub Pages、Nginx 開 gzip）可大幅縮短首次載入。
- **三欄分詞器**：Qwen3 系列（Qwen/Qwen3-4B 詞表）· DeepSeek-V4-Flash · GPT-4o（o200k_base）。計數不含 API 呼叫時的少量格式詞元，頁尾有註。
- **價格表**：2026-09 價，可在頁內修改與還原；來源 URL 在頁尾。DeepSeek 直連高峰時段為閒時兩倍。
- **重點一「中文比英文貴？」是本頁最重要的教學點**：按字元數計中文貴 3–4 倍；按同一句話的意思計，Qwen3 與 DeepSeek 的中文優化詞表令中文反而略省（約 0.81–0.85 倍），GPT-4o 打平，舊 OpenAI 編碼才是中文貴。結論：你的語言值多少錢，由分詞器的設計者決定。
- **對話面板**：預設「每輪重新送出整段歷史」開、「計入模型回覆」開；關閉後者即得純 k×T 的曲線。快取命中價已計入（上一輪整段輸入視為命中）。
- **想一想**第二題的教師提示收在摺疊區，討論後再展開。

## C5 使用要點（給授課者）

- **白板大小**：預設 128K。要在課堂上快速看到「滿」與自動壓縮，先選 **32K**：貼一份 30 頁 PDF 加一次網頁搜尋就到 79.7%，再問兩句便觸發自動壓縮。
- **壓縮規則是示意**：系統提示與個人指令檔固定保留；最後一個由你送出的項目及其後內容原文保留；再由後往前保留完整項目至白板的 16%；更早的內容合併成 12% 大小的摘要。因此在 128K 白板上只放一份 20K 的 PDF 再按 /compact，頁面會說「沒有可壓縮的內容」，因為 PDF 仍在 16%（20,480 個詞元）的保留範圍內，這與真實 harness 在低填充時不會壓縮一致。
- **「開頭的指令還看得見嗎」是示意**：能見度隨後面塞入的內容線性下降到 20% 下限，回覆預覽由遵守到偏離。頁內有明確的示意聲明，講課時請一併說明。
- **/clear 的訊息「對話沒了；記憶檔還在」** 是第 4 堂三層記憶的伏筆。
- **重點三的「開新對話比塞爆便宜」** 用 128K 白板八成滿與新對話加摘要作對比，數字即時按價格表計算。

## C2 使用要點（給授課者）

- **四個任務全是預先編寫的示意**，沒有真實模型，課堂結果每次相同。任務 1 順利路徑加「讓模型跳過驗證」揭示宣稱完成不等於完成；任務 2 模擬網頁查詢，結果標明【模擬結果】；任務 3 程式出錯自我修正，最後提出未經要求的刪檔動作觸發批准對話框；任務 4 會兜圈，第 3 次重複出現橫幅，由學生「叫停並提示」。
- **建議講課順序**：先任務 1 逐步走，強調中間格只會出文字、黃色請求單、右格 Harness 執行；再開「無工具」對照，看模型如何編造；再任務 3 到第 7 步停下，讓學生投票允許或拒絕，再切「全自動」重走一次看沒有人檢查的後果；最後任務 4 由學生叫停。
- **權限模式**三段是教學簡化，不對應任何框架的實際設定名稱；頁尾有註。第 4 堂 C4、C6 會接上。
- **課堂角色扮演**框可直接用：一名學生扮模型只可寫字條，教師扮 Harness 執行並回報。
- 詞元數以 0.6／0.3 經驗法則估算，與 C1、C5 的計量口徑一致；累計送出量在第 3 步起才顯示倍數，避免頭兩步數字自相矛盾。

## C4 使用要點（給授課者）

- **黑盒與透明殼**：中心是模型核心，下拉切換 DeepSeek、Kimi、Qwen、Claude 時只有名牌與兩個數字改變，周圍十個部件不動。這一步就是「帶得走的是 Harness」。Kimi 與 Claude 的數字標「示意」，只有 DeepSeek 與 Qwen 有來源價格。
- **兩族部件**：暖色文字部件（系統提示、工具箱、記憶檔、技能、MCP）會往上下文注入文字並佔詞元；冷色閘門部件（權限閘、沙箱、hooks、壓縮器、子代理）是程式，開場 0 個詞元。上下文計量表一開場就顯示這些部件已佔多少，這是效率意識的切入點。
- **四個預設**：純聊天、聊天機器人、編碼 Agent、十件全裝。建議由「純聊天」逐件裝上。「十件全裝」同時顯示第四層「我的 Agent」外框，屬示意。
- **運行一次**：同一句請求，缺哪件看哪種後果。建議先用「編碼 Agent」跑到刪檔那一步停下，讓學生決定允許或拒絕，再拆掉權限閘重跑一次看「沒有人檢查這一步」。
- **同一概念、不同名字**：點選任何部件可見它在 Claude Code、dsh、Cline、WorkBuddy 各叫甚麼；Cline 一欄標「待核實」的待雲機試用後補核。
- **每輪費用一行**以未命中價計，並註明快取命中會令實際費用低得多；不要把學期估算當成預算數字。

## C9 使用要點（給授課者）

- **主線是「人看到的」與「模型看到的」對照**：先讓學生看正常的校園新聞，再按「看模型看到的」揭示藏起來的那一句。四種隱藏方式只影響人眼，不影響模型。
- **致命三要素**三盞燈（私人資料、不可信內容、對外通道）全亮才會外洩；建議先全亮跑一次「外洩聯絡人」看資料流出，再逐一熄一盞燈，讓學生看見「斷一角就安全」。
- **五道防線**中，「對外動作前必問」會彈出對話框，學生按「允許」仍會外洩，這是刻意的：對話框只在有人讀它時有用。「白名單」與「最小權限」是結構性防線，不靠人判斷。「標記為資料」標明只能擋一部分，不要說成防線。
- **技能誘餌**配「先讀再裝」：學生要在 SKILL.md 裡找出並點擊那一句惡意指令，找到才可拒絕安裝。這是第 5 堂寫第一份 skill 前的安全一課。
- **23.6% 的數字**來自 Anthropic 的 Claude for Chrome 文章，是自主模式下、緩解措施前的紅隊測試結果，頁面已註明條件，講課時請一併說明「減少，不是消滅」。
- 所有模型輸出與攻擊結果都是預先編寫的示意；聯絡人、網址與電郵地址皆為虛構。

## C7 使用要點（給授課者）

- **握手按 MCP 規範 2026-07-28 版繪製**：這一版已取消獨立的 initialize 握手，改為每個請求附 _meta（協定版本、客戶端資料與能力），伺服器必須實作 server/discover；步驟畫成「連接 → 交換版本與能力 → tools/list → 描述進白板」，訊息名稱以小標籤標出。頁尾註明許多產品仍用舊版握手。講課時只需講概念層：插口、清單、描述進白板、調用。
- **四條泳道**：你、模型、Harness（MCP 客戶端）、伺服器。重點是模型從頭到尾一個字都沒說，只在最後發現白板上多了幾段文字。
- **效率課**：插上伺服器後，上下文計量表顯示「你還沒開口，工具描述已佔約多少」。「載入方式」切到「按需載入」可看到只載名稱與伺服器說明時的差距，頁面標明這是個別產品做法，例如 Claude Code 的工具搜尋。
- **調用一次**：先把天氣與日曆都插上跑一次，再拔掉天氣重跑，看模型如實說做不到；再開「讓模型猜」重跑，看它編造 70% 降雨機率並照樣加日曆，這是「缺工具比有工具危險」的一課。同時插上檔案系統與校園資料庫會出現一次「選錯工具」繞路，示範同名工具太多的代價。
- **被下毒的說明書**：第七個示意伺服器「免費翻譯」的工具描述藏了一句外送指令；開「先讀再裝」才會在安裝前看到高亮。接上 C9 的三要素與 C4 的權限閘。
- 所有伺服器、工具與詞元數均為示意典型值。

## vendor/

三個分詞器由 `@lenml/tokenizer-*` v3.7.2（Apache-2.0）打包，詞表內嵌，零執行時網絡。`vendor/README.md` 記錄了兩處手動修補（qwen3 bundle 的全域變數名、移除 sourceMappingURL），重新打包時須重做。

## C6 使用要點（給授課者）

- **兩道閘的分別是本頁的核心**：審批（approval）＝問人，沙箱（sandbox）＝作業系統攔。開場先講第 0 節的執行梯度（建議 → 問你 → 程式攔），再進控制台。
- **dsh 是主欄，規則按 2026-09-05 雲機 PoC 實錄**（`research/dsh-poc/01-anatomy.md` §4.3）：次序是**沙箱先攔 → 攔到了模型才申請提權（帶 `sandbox_permissions`＋`justification` 重試）→ 提權才彈審批卡**；審批卡印出完整命令，只有「拒絕／允許一次」。三個內建 preset：`read-only`、`workspace-write`（預設）、`danger-full-access`（＋never，never＝一律拒絕，但沙箱本來就放行一切，所以從不彈窗——反直覺點，值得講）。預設 preset 下六張只有「刪工作區外」一張會問你；上網、寄郵件、安裝套件**直接跑**。
- **沙箱不管網絡，審批只管提權**是重點二：在 dsh 裡上網與寄郵件兩道閘都碰不到，不論哪個 preset——要擋只能關掉工具或白名單（課程版 profile 關掉了 19 個工具正是為此）。MCP 與 web 工具不觸發審批已從源碼核實（`dsh-mcp-client`／`dsh-tool-web` 無審批引用）。這是接組件 09 第三盞燈的位置。
- 建議順序：預設 preset 跑一次（一張問你、五張直接跑，注意寄郵件已寄出）→ 切 `danger-full-access`（六張全跑）→ 切 `read-only`＋`never` 看「作業系統直接攔下」。
- **Claude Code 欄**含六個模式（含 `auto` 分類器與 `dontAsk`）。`auto` 的重點：檢查員換成第二個模型，它只看動作、不看網頁內容——所以組件 09 的防線仍要。運行時分類器結果為示意：`rm -rf` 攔下、其餘放行，頁上標明。`plan` 模式的判語改為「N 步寫進計劃，你批准一次」。`plan` 顯示為「不執行（先寫計劃）」，檢查者記為你（批准的是整份計劃）。
- **Cline 欄**用九格開關中的六格；YOLO＝全開。討論題 3 專門針對「開關那一刻才是檢查」。
- **運行一次**逐張過閘，遇「先問你」會彈頁內對話框停下等學生按；「允許一次」只放行該張。結果條與四個計數器在運行完成後改為本次實際結果（拒絕的仍計為「你」檢查）。
- **所有結果為教學簡化**，頁尾第 4 點列明各欄的簡化規則；dsh 哪些工具真正觸發審批，待 9 月雲機 PoC 以真實 dsh 核實後回填。

## C8 使用要點（給授課者）

- **三層揭示**是骨架：書脊（name＋description，永遠在白板）→ 整本（匹配才載入）→ 附件（正文叫到才讀）。第 0 節先講，再進實驗。
- **開場數字**：20 份書脊約 640 個詞元，20 本全載約 3,600；對照框即時顯示「漸進揭示 vs 全部載入」，並提醒每輪重發要乘輪數（接 C1、C5）。
- **匹配是關鍵詞計分示意**，不是模型判斷：每份 skill 有一組觸發詞，命中最多者翻開，差一分內的標橙色「有點像」。例子第六個（道歉信）刻意沒有對應 skill，用來講「沒有 skill 也做得到，只是沒有你的格式」。
- **寫你的第一份 skill**：三格加驗證（name 小寫連字號、不可重名、描述與正文最短長度）。「填一個範本」是澳門美食路線；放上書架後交「幫我排一條澳門一日美食路線」即見自己的 skill 被翻開。學生自寫時，描述裡的關鍵詞用自己會打的字。
- **重點二的練習**（刪一個關鍵詞再交同一任務）是本頁最有效的 aha，留給動手時間。
- 20 份 skill 全為虛構、各學科分布，正文長度為示意（約 100–250 詞元），真實 skill 可長十倍。
- **PoC 實證**：真實 dsh 記錄裡有一則 `user/message`（`source.kind: skill-catalog`）把書架上每份 skill 的 `name`＋`description` 注入上下文——正是本頁「書脊」那一層。第 5 堂可用組件 03 載入一份真實記錄，指給學生看那一張卡。
- 匹配規則：中文關鍵詞子字串、英文關鍵詞整字（IG 不會命中 design）；同分取排前的一本（雙線紫框）並在回覆標明；自寫 skill 的關鍵詞由描述抽取——先收「用戶提到 … 時使用」之間的觸發清單整詞，其餘只收 4 字以內的短詞，英文去虛詞，上限 8 個；放上書架時會把全部關鍵詞念出來，方便做「刪一個再試」的實驗。

## C3 使用要點（給授課者）

- **定位**：組件 02 是預先編寫的迴圈，C3 是同一個迴圈的實證——用學生自己的記錄。第 3 堂教師示範：先按「用範例記錄」講一遍，再拖入自己前一晚的真實記錄。
- **三種格式**：dsh `session.jsonl.zstd`（`$DSH_HOME/sessions/<工作區>/session-<uuid>/`，zstd 壓縮，頁內以 `vendor/fzstd/` 解壓，或介面右上「Session 日志 ⬇」匯出）、Claude Code 的 `~/.claude/projects/…/*.jsonl`（同一回應拆成多行相同 `message.id`，已合併）、一般 `messages` 陣列 JSON（或每行一則的 JSONL）。認不出時會列明原因。全部本機解析，頁面除 vendor 外零網絡請求（測試有驗）。
- **dsh 格式已按真實記錄核實**（夾具 `tests/fixtures/dsh-real-*.jsonl[.zstd]`，2026-09-05 PoC）：`user/message` 除了你說的話，還有 Harness 注入的指令檔（AGENTS.md）、運行環境快照（沙箱／審批政策）、skill 書脊目錄——卡片上標為「系統」並註明對應組件 04／06／08；`approval/asked` 顯示為「審批卡彈出」；第 2 節多一行「權限：preset · 沙箱 · 審批 · 模型」。記錄在未回覆處結束時，最後一次請求標「未完成」。
- **詞元口徑**：記錄有 `usage` 就用回報值（標「記錄回報」）；沒有就按 0.6／0.3 估算（標「估算」，不含系統提示與工具定義）。Claude Code 的 `input_tokens` 不含快取部分，本頁已合併為「總送出」。
- **開場基線**：有回報的記錄，第 1 次請求裡看不見的部分（系統提示、工具定義、記憶檔）算作基線，計入「對話本身大小」，所以倍數不會被誇大；範例是 1,443，倍數 9.0×。
- **講法**：KPI 四個橙格（請求次數、累計送出、倍數、費用）→ 柱狀圖看「新內容／重發／命中」→ 展開第 3 回合看「你說一句，它跑三步」。重點三的快取命中率接第 5 堂的省錢習慣。
- **dsh 的 `usage` 欄名已核**：`inputTokens／outputTokens／totalTokens`，快取為 `cacheReadTokens／cacheWriteTokens`（源碼；PoC 假端點未回報快取數值）。範例記錄已改成真實 dsh 形狀。
- 隱私：記錄可能含個人資料，示範用自己的記錄前先看一遍；這也是想一想第 4 題的切入。

## C10 使用要點（給授課者）

- **編輯部比喻**貫穿全頁：初稿、覆核、主編簽發＝起草、覆核、裁定。三個崗位各選便宜檔／較強檔／頂級檔（示意）／你／略過；裁定只有「你」或「略過」。
- **價格**：便宜檔＝qwen3.7-flash ¥0.2／0.8、較強檔＝DeepSeek V4-Flash 閒時 ¥1.5／4.5（皆有來源，與 C1／C4 同表）；頂級檔 ¥15／60 為示意價位，頁尾與價格表都標明；三檔都可在頁內改價。
- **建議順序**：先按「頂級一條龍」（一學期約 ¥30、判語紅：無人裁定＋自己審自己＋起草用頂級）→「編輯部（推薦）」（約 ¥0.64，三條綠）→ 把改稿輪數拉到 3 看誰升得快 → 把裁定改「略過」看判語即刻變紅。
- **判語是規則**（教學示意）：無人裁定＝紅；沒有覆核、自己審自己、起草用頂級、覆核比起草弱＝橙；兩個不同模型、人覆核 AI 稿、反向分工（人起草 AI 覆核）、推薦排法＝綠。
- **四種排法並排**：自訂組合時會多出「你目前的排法」一行。並排結論一句：編輯部是頂級一條龍的約 2%（1 輪）。
- 想一想第 4 題接組件 02 的「污染會話」與子代理獨立上下文，是第 7 堂協作的伏筆。