feat: 完成 H 群組 — 網頁對話介面（第一個可實際使用的垂直切片）

- POST /chat/:characterId：正式對外對話端點，DialogueService 補上情緒標記與親密度
  累積（每輪對話走完整管線：標記情緒→檢索記憶→組裝→生成→過濾）
- POST /session/:sessionId/end：觸發睡眠固化
- NestJS 啟用 CORS（WEB_ORIGIN，預設 http://localhost:3100），本清單第一次有瀏覽器直接呼叫 api
- apps/web/app/chat：對話頁面（ChatView 用戶端元件），電腦雙欄／行動單欄同一份 RWD 程式，
  立繪半身像置頂佔 40% 為行動版背景層
- 情緒晶片＋親密度數字顯示，跟著每輪回應即時更新
- 動作描寫標記（＊…＊）以暮空紫小字獨立呈現，與台詞區分
- HeartbeatWave 元件：載入時由左至右畫出、親密度決定振幅、通知紅點心跳脈動，
  皆尊重 prefers-reduced-motion；首頁與對話頁共用同一元件
- 色票換成 wiki 主視覺提案頁的完整 token 組（含官方深色模式數值）
- scripts/smoke/H.mjs：端到端驗證對話 API 狀態變化、session 結束固化、頁面結構標記；
  另以 Playwright + headless Chromium 實際開瀏覽器驗證桌面／行動版面、送出訊息、
  動作標記渲染，過程無 console 錯誤

npm run restart && npm run smoke -- H 皆通過（H-V），A~G 群組冒煙測試無回歸。

todo.md

@@ -228,12 +228,22 @@ flowchart TB
 
 ### H. 網頁對話介面（第一個可實際使用的垂直切片）
 
-- [ ] **H-1 對話 API 與 session 生命週期（S）**：`POST /chat/:characterId` 走完整管線（標記情緒 → 檢索記憶 → 組裝 → 生成 → 過濾），`POST /session/:id/end` 觸發睡眠固化。驗收：一輪完整對話回傳回應、情緒狀態與親密度變化。
-- [ ] **H-2 情緒晶片與親密度顯示（S）**：對話畫面顯示當前情緒（愉悅／害羞／彆扭…）與親密度數值。驗收：畫面數值與 API 回傳一致並即時更新。依據：主視覺與資產§電腦網頁 mockup 的「親密度 62」「愉悅」晶片。
-- [ ] **H-3 動作描寫標記渲染（S）**：把 `＊…＊` 標記以暮空紫小字呈現，與台詞區分。驗收：含動作描寫的回應在畫面上樣式正確。依據：主視覺與資產 mockup `.bubble .act` 樣式。
-- [ ] **H-4 心跳波形母題（S）**：載入動畫為波形由左至右畫出、親密度以波形振幅呈現、通知紅點為心跳脈動；尊重 `prefers-reduced-motion`。驗收：三處母題皆可見且降低動態偏好下不動畫。依據：主視覺與資產§視覺母題。
-- [ ] **H-5 對話頁版面（M）**：電腦版雙欄（左對話流、右大幅立繪區，先以佔位圖形）；行動版單欄、立繪半身像置頂佔 40% 為背景層、對話流覆蓋其上；同一份 RWD 程式。驗收：桌面與 720px 以下寬度各自呈現正確版面。依據：§三種載體的版面。
-- [ ] **H-V 階段驗證（S）**：`npm run restart && npm run smoke -- H`（H.mjs 端到端：送訊息 → 收回應 → 情緒與親密度變化可見 → 結束 session 觸發固化），並實際開啟瀏覽器操作一次確認畫面無誤。
+- [x] **H-1 對話 API 與 session 生命週期（S）**：`POST /chat/:characterId` 走完整管線（標記情緒 → 檢索記憶 → 組裝 → 生成 → 過濾），`POST /session/:id/end` 觸發睡眠固化。驗收：一輪完整對話回傳回應、情緒狀態與親密度變化。
+- [x] **H-2 情緒晶片與親密度顯示（S）**：對話畫面顯示當前情緒（愉悅／害羞／彆扭…）與親密度數值。驗收：畫面數值與 API 回傳一致並即時更新。依據：主視覺與資產§電腦網頁 mockup 的「親密度 62」「愉悅」晶片。
+- [x] **H-3 動作描寫標記渲染（S）**：把 `＊…＊` 標記以暮空紫小字呈現，與台詞區分。驗收：含動作描寫的回應在畫面上樣式正確。依據：主視覺與資產 mockup `.bubble .act` 樣式。
+- [x] **H-4 心跳波形母題（S）**：載入動畫為波形由左至右畫出、親密度以波形振幅呈現、通知紅點為心跳脈動；尊重 `prefers-reduced-motion`。驗收：三處母題皆可見且降低動態偏好下不動畫。依據：主視覺與資產§視覺母題。
+- [x] **H-5 對話頁版面（M）**：電腦版雙欄（左對話流、右大幅立繪區，先以佔位圖形）；行動版單欄、立繪半身像置頂佔 40% 為背景層、對話流覆蓋其上；同一份 RWD 程式。驗收：桌面與 720px 以下寬度各自呈現正確版面。依據：§三種載體的版面。
+- [x] **H-V 階段驗證（S）**：`npm run restart && npm run smoke -- H`（H.mjs 端到端：送訊息 → 收回應 → 情緒與親密度變化可見 → 結束 session 觸發固化），並實際開啟瀏覽器操作一次確認畫面無誤。
+
+> **實作記錄（H 群組）**：
+> - `POST /chat/:characterId`（`apps/api/src/chat/`）才是正式對外端點；F 群組的 `DialogueService.handleMessage` 補上了兩行呼叫（`EmotionService.processInput`、`RelationshipService.recordInteraction`），讓每輪對話會**真的**標記情緒、累積親密度，而不是只讀現有狀態——F 群組當時的 `/dialogue/*` 端點刻意沒做這件事（見 F 群組實作記錄），H 群組把它補上。往後任何人再動 `DialogueService.handleMessage`，記得這兩行是新對話語意變化的入口，不要誤刪。
+> - NestJS 這邊加了 `app.enableCors({ origin: WEB_ORIGIN ?? "http://localhost:3100" })`（`main.ts`）——這是本清單第一次有瀏覽器直接打 api，之前所有群組都只靠 curl／smoke test，不會撞到 CORS。
+> - 前端色票整份換成 wiki「主視覺與資產」頁完整 HTML 提案裡的 token 組（`--bg`／`--bg-soft`／`--ink`／`--ink-soft`／`--accent`／`--accent-bright`／`--violet`／`--line`／`--card`／`--chip-bg`／`--wave`／`--frame`／`--shadow`，含官方給的深色模式數值），比 A-5 當時只做的四色簡化版完整很多；`--color-heartbeat-pink`／`--color-dusk-purple`／`--background`／`--foreground` 留著當作 A-5 首頁的別名，沒有刪除舊頁面的相依。
+> - **重要**：apps/web 用 Next.js 的 `moduleResolution: "bundler"`，相對匯入**不可以**加 `.js` 副檔名（跟 apps/api 的 NodeNext 慣例相反，那邊要求一定要加）。這次寫元件時把後端習慣帶過來，加了 `.js` 結果 Turbopack 直接找不到檔案、整個 web 健康檢查逾時 60 秒。**以後在 apps/web 底下新增檔案，相對匯入一律不要加副檔名；只有 apps/api、packages/shared、packages/db 底下才需要加 `.js`。**
+> - 對話頁走固定的 `CHARACTER_ID`／`USER_ID`（種子角色與種子使用者），因為角色選擇、登入機制都還沒有 wiki 依據（見「需人工確認」清單）；`sessionId` 用 `crypto.randomUUID()` 在元件掛載時產生一次。
+> - 心跳波形（`HeartbeatWave` 元件）用同一份 SVG／CSS 動畫邏輯同時服務首頁（A-5）與對話頁，振幅由親密度（0~100）換算縮放係數 0.4~1.5；`prefers-reduced-motion` 已在 `globals.css` 用 media query 關閉動畫，沒有另外寫 JS 判斷。
+> - **驗證方式與環境限定備註**：這台機器目前是共用的重載主機（`uptime` 曾量到 load average 39+，遠超這台機器的核心數，來自其他無關的並行 session），單一 API 請求偶爾會被系統排擠到 30~50 秒——**這不是本群組程式碼的效能問題**，同一請求在負載降下來後可以在 3 秒內完成。之後如果又遇到「重啟或 smoke test 突然變得異常慢」，先用 `uptime` 確認 load average 是否異常，不要急著去改程式碼。
+> - 本機沒有 GUI 瀏覽器，用 Playwright（暫裝在 scratchpad，非專案相依）+ headless Chromium 驗證畫面；headless shell 需要 `libasound.so.2`（本機沒有 root 權限跑 `apt-get install`），改用其他 session 已解壓好的 `.deb` 內容夾搭配 `LD_LIBRARY_PATH` 繞過，沒有動到系統套件。畫面截圖裡中文顯示為方塊字，是測試用無頭瀏覽器缺中文字型，**不是程式或 CSS 的問題**（DOM 文字內容本身是正確的繁體中文，実際使用者瀏覽器有系統字型即可正常顯示）。
 
 ### I. 生活作息與離線生活