feat: 完成 O 群組 — 立繪子系統

後端（apps/api/src/tachie/）：立繪 manifest（身體姿勢/服裝/表情眉眼口/
效果層/微動態的資產目錄，服裝目錄有 M-1 登錄時優先採用）；表情解析依
情緒引擎六狀態對照眉/眼/口/效果/姿勢，依 RelationshipStage 分層解鎖
（陌生~認識/朋友/摯友/羈絆，哭臉限羈絆才會出現），依角色外顯度縮放
差分幅度（magnitude = expressiveness × 情緒強度）；emotionTag（實際
套用）與 rawEmotionTag（情緒引擎真實判定）分離，讓文字生成與表情解析
維持兩條獨立資料流，「文字與立繪故意不一致」是這個設計的自然結果，
不需要額外邏輯；視線方向依思考/迴避/警戒切換。

前端（apps/web/components/TachieStage.tsx）：以 PixiJS 實作分層合成
與眨眼/呼吸微動態，預留 TachieRenderer 介面供未來 Live2D Cubism SDK
實作（未引入任何 Live2D 相依或授權，純架構佔位）；接上 ChatView 取代
H 群組的佔位立繪，聊天回應後先查詢表情、延遲約 220ms 才顯示文字，
在非串流架構下盡力模擬「表情先變化、文字後出現」。

以 scratchpad 暫裝 playwright-core 實測瀏覽器行為（本環境無
chromium-cli），確認情緒變化即時反映在立繪、微動態持續運作。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/chat/ChatView.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import { useState } from "react";
-import { sendChatMessage } from "../../lib/api";
+import { sendChatMessage, fetchExpression, type TachieExpressionResponse } from "../../lib/api";
 import { EMOTION_LABELS } from "../../lib/emotion-labels";
 import { ChatBubble } from "../../components/ChatBubble";
 import { HeartbeatWave } from "../../components/HeartbeatWave";
+import { TachieStage } from "../../components/TachieStage";
 import type { EmotionTag } from "@kokorone/shared";
 
+// O-2 表情演出時機：表情差分要在文字回覆出現前先變化——順序要對才有真實感。
+const EXPRESSION_LEAD_MS = 220;
+
 const CHARACTER_ID = "seed-character-genki";
 const USER_ID = "seed-user-primary";
 
@@ -22,6 +26,7 @@ export function ChatView() {
   const [sending, setSending] = useState(false);
   const [dominant, setDominant] = useState<EmotionTag>("CALM");
   const [intimacy, setIntimacy] = useState(0);
+  const [expression, setExpression] = useState<TachieExpressionResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   async function handleSend() {
@@ -40,11 +45,18 @@ export function ChatView() {
         // I-2：作息狀態為睡眠且未破例時，這輪不會有真的回覆。
         return;
       }
-      setMessages((prev) => [...prev, { role: "character", text: result.text }]);
       if (result.context) {
         setDominant(result.context.emotion.dominant);
         setIntimacy(result.context.relationship.intimacy);
       }
+      // O-2：情緒引擎在文字生成前就已經更新完畢，這裡先套用新表情，文字訊息延後一小段時間才出現。
+      try {
+        setExpression(await fetchExpression(CHARACTER_ID, USER_ID));
+      } catch {
+        // 表情查詢失敗不影響對話本身。
+      }
+      await new Promise((resolve) => setTimeout(resolve, EXPRESSION_LEAD_MS));
+      setMessages((prev) => [...prev, { role: "character", text: result.text }]);
     } catch {
       setError("訊息傳送失敗，請確認 api 服務是否已啟動");
     } finally {
@@ -68,15 +80,7 @@ export function ChatView() {
           {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>
+          <TachieStage expression={expression} />
           <p className="text-xs" style={{ color: "var(--ink-soft)" }}>
             立繪（表情差分即時變化）
           </p>