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 群組冒煙測試無回歸。

apps/web/app/chat/ChatView.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { sendChatMessage } from "../../lib/api";
+import { EMOTION_LABELS } from "../../lib/emotion-labels";
+import { ChatBubble } from "../../components/ChatBubble";
+import { HeartbeatWave } from "../../components/HeartbeatWave";
+import type { EmotionTag } from "@kokorone/shared";
+
+const CHARACTER_ID = "seed-character-genki";
+const USER_ID = "seed-user-primary";
+
+interface Message {
+  role: "user" | "character";
+  text: string;
+}
+
+export function ChatView() {
+  const [sessionId] = useState(() => crypto.randomUUID());
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const [dominant, setDominant] = useState<EmotionTag>("CALM");
+  const [intimacy, setIntimacy] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSend() {
+    const text = input.trim();
+    if (!text || sending) {
+      return;
+    }
+    setSending(true);
+    setError(null);
+    setInput("");
+    setMessages((prev) => [...prev, { role: "user", text }]);
+
+    try {
+      const result = await sendChatMessage(CHARACTER_ID, USER_ID, sessionId, text);
+      setMessages((prev) => [...prev, { role: "character", text: result.text }]);
+      setDominant(result.context.emotion.dominant);
+      setIntimacy(result.context.relationship.intimacy);
+    } catch {
+      setError("訊息傳送失敗，請確認 api 服務是否已啟動");
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="flex h-dvh flex-col md:flex-row">
+      <div
+        className="relative flex h-[38vh] shrink-0 items-end justify-center overflow-hidden md:order-2 md:h-auto md:w-[38%] md:min-w-[280px]"
+        style={{ background: "linear-gradient(180deg, var(--bg-soft), var(--card))" }}
+      >
+        <span className="absolute top-3.5 left-3.5 text-[11px]" style={{ color: "var(--ink-soft)" }}>
+          親密度 <b style={{ color: "var(--accent)" }}>{intimacy}</b>
+        </span>
+        <span
+          className="absolute top-3.5 right-3.5 rounded-full px-3 py-1 text-xs font-bold"
+          style={{ background: "var(--chip-bg)", color: "var(--accent)" }}
+        >
+          {EMOTION_LABELS[dominant]}
+        </span>
+        <div className="mb-6 flex flex-col items-center gap-2">
+          <div
+            className="relative h-[190px] w-[120px] rounded-t-[60px] rounded-b-[24px] opacity-85"
+            style={{ background: "linear-gradient(180deg, var(--accent-bright), var(--violet))" }}
+          >
+            <div
+              className="absolute -top-11 left-1/2 h-21 w-21 -translate-x-1/2 rounded-full"
+              style={{ background: "linear-gradient(180deg, var(--accent-bright), var(--violet) 140%)" }}
+            />
+          </div>
+          <p className="text-xs" style={{ color: "var(--ink-soft)" }}>
+            立繪（表情差分即時變化）
+          </p>
+        </div>
+      </div>
+
+      <div
+        className="flex flex-1 flex-col gap-2.5 overflow-y-auto p-4 md:order-1 md:border-r"
+        style={{ borderColor: "var(--line)" }}
+      >
+        <div className="mb-2 flex items-center gap-3">
+          <HeartbeatWave amplitude={intimacy} className="h-6 w-24" />
+          <h1 className="text-sm font-bold" style={{ color: "var(--accent)" }}>
+            心音 Kokorone
+          </h1>
+        </div>
+
+        <div className="flex flex-1 flex-col gap-2.5 overflow-y-auto">
+          {messages.length === 0 && (
+            <p className="text-sm" style={{ color: "var(--ink-soft)" }}>
+              傳個訊息，開始今天的對話吧。
+            </p>
+          )}
+          {messages.map((message, index) => (
+            <ChatBubble key={index} role={message.role} text={message.text} />
+          ))}
+        </div>
+
+        {error && (
+          <p className="text-xs" style={{ color: "var(--accent)" }}>
+            {error}
+          </p>
+        )}
+
+        <div
+          className="mt-2 flex items-center justify-between gap-2 rounded-full border px-4 py-2 text-sm"
+          style={{ borderColor: "var(--line)" }}
+        >
+          <input
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                void handleSend();
+              }
+            }}
+            placeholder="輸入訊息……"
+            className="flex-1 bg-transparent outline-none"
+            style={{ color: "var(--ink)" }}
+            disabled={sending}
+          />
+          <button
+            type="button"
+            onClick={() => void handleSend()}
+            disabled={sending}
+            className="font-bold disabled:opacity-50"
+            style={{ color: "var(--accent)" }}
+          >
+            送出
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/chat/page.tsx

@@ -0,0 +1,5 @@
+import { ChatView } from "./ChatView";
+
+export default function ChatPage() {
+  return <ChatView />;
+}