feat(遊戲化): 新增大廳、附身、時間流、後日談進度等遊戲化系統功能

新增角色大廳（lobby）邀約與通話、附身（possession）、時鐘（clock）抽象、
時間流與睡眠負債、後日談進度、行為選擇與旁觀反應等模組，並補齊對應冒煙
測試（R~V）與單元測試；同步調整 web/mobile 對應頁面與元件。

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

apps/mobile/app/(tabs)/_layout.tsx

@@ -1,7 +1,11 @@
 import { Tabs } from "expo-router";
+import { HeartbeatDot } from "../../components/HeartbeatDot";
+import { useUnread } from "../../lib/unread-context";
 
 // Q-2 底部分頁籤：聊天／角色／日常／設定，同行動網頁版佈局＋這一層分頁籤是 APP 相對於行動網頁的唯一差異。
 export default function TabsLayout() {
+  const { hasUnread } = useUnread();
+
   return (
     <Tabs
       screenOptions={{
@@ -9,7 +13,14 @@ export default function TabsLayout() {
         tabBarActiveTintColor: "#FF7E9D",
       }}
     >
-      <Tabs.Screen name="index" options={{ title: "聊天" }} />
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "大廳",
+          // Q-4／T20-P2：收到推播、或任一房間有未讀訊息時，籤上顯示心跳紅點；都清了才不佔版面。
+          tabBarIcon: hasUnread ? () => <HeartbeatDot size={8} /> : undefined,
+        }}
+      />
       <Tabs.Screen name="character" options={{ title: "角色" }} />
       <Tabs.Screen name="daily" options={{ title: "日常" }} />
       <Tabs.Screen name="settings" options={{ title: "設定" }} />

apps/mobile/app/(tabs)/index.tsx

@@ -1,169 +1,30 @@
-import { useState } from "react";
-import {
-  KeyboardAvoidingView,
-  Platform,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from "react-native";
-import type { EmotionTag } from "@kokorone/shared";
-import { sendChatMessage, fetchExpression, type TachieExpressionResponse } from "../../lib/api";
-import { EMOTION_LABELS } from "../../lib/emotion-labels";
-import { generateSessionId } from "../../lib/id";
+import { useCallback } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import { useFocusEffect } from "expo-router";
+import { LobbyPreview } from "../../components/LobbyPreview";
+import { useUnread } from "../../lib/unread-context";
 
-const CHARACTER_ID = "seed-character-genki";
-const USER_ID = "seed-user-primary";
-const EXPRESSION_LEAD_MS = 220; // O-2/Q-2：表情先變化、文字延後一小段時間出現，跟 apps/web 的作法一致。
+// T20-P2：聊天分頁改為大廳優先——取代舊版寫死單一角色的 1:1 聊天畫面（該畫面併入 T38 的 SOLO
+// 房後，固定角色的假設已不成立：使用者現在透過大廳喊人，答應者可能是任何角色）。實際對話畫面
+// 移到 app/room/[roomId].tsx，由本畫面的房間清單／大廳呼叫導向。
+export default function LobbyScreen() {
+  const { markRead } = useUnread();
 
-interface Message {
-  role: "user" | "character";
-  text: string;
-}
-
-// Q-2 行動版佈局：立繪半身像置於上方 40% 為背景層，對話流覆蓋其上向下延伸——
-// 跟行動網頁版同一份設計原則，只是這裡用 View 的 flex 排版而非 CSS。立繪本體目前是佔位色塊
-// （O 群組的 PixiJS 渲染器是網頁 DOM/Canvas 實作，沒有移植到 React Native，見本群組實作記錄）。
-export default function ChatScreen() {
-  const [sessionId] = useState(() => generateSessionId());
-  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 [expression, setExpression] = useState<TachieExpressionResponse | null>(null);
-  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);
-      if (result.availability === "NO_REPLY") {
-        return;
-      }
-      if (result.context) {
-        setDominant(result.context.emotion.dominant);
-        setIntimacy(result.context.relationship.intimacy);
-      }
-      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 {
-      setSending(false);
-    }
-  }
+  // Q-4：使用者切回本分頁即視為已讀推播提示（各房未讀數則由 LobbyPreview 每次刷新時各自更新）。
+  useFocusEffect(
+    useCallback(() => {
+      markRead();
+    }, [markRead]),
+  );
 
   return (
-    <KeyboardAvoidingView
-      style={styles.flex}
-      behavior={Platform.OS === "ios" ? "padding" : undefined}
-    >
-      <View style={styles.tachieArea}>
-        <Text style={styles.tachieLabel}>親密度 {intimacy}</Text>
-        <View style={styles.emotionChip}>
-          <Text style={styles.emotionChipText}>{EMOTION_LABELS[dominant]}</Text>
-        </View>
-        <View style={[styles.tachiePlaceholder, expression ? { opacity: 0.85 + expression.magnitude * 0.15 } : null]} />
-        <Text style={styles.tachieCaption}>立繪（表情差分即時變化）</Text>
-      </View>
-
-      <ScrollView style={styles.messages} contentContainerStyle={styles.messagesContent}>
-        {messages.length === 0 && <Text style={styles.hint}>傳個訊息，開始今天的對話吧。</Text>}
-        {messages.map((message, index) => (
-          <View
-            key={index}
-            style={[styles.bubble, message.role === "user" ? styles.bubbleUser : styles.bubbleCharacter]}
-          >
-            <Text style={styles.bubbleText}>{message.text}</Text>
-          </View>
-        ))}
-      </ScrollView>
-
-      {error && <Text style={styles.error}>{error}</Text>}
-
-      <View style={styles.inputRow}>
-        <TextInput
-          value={input}
-          onChangeText={setInput}
-          placeholder="輸入訊息……"
-          style={styles.input}
-          editable={!sending}
-          onSubmitEditing={handleSend}
-        />
-        <Pressable onPress={handleSend} disabled={sending}>
-          <Text style={[styles.sendButton, sending ? styles.sendButtonDisabled : null]}>送出</Text>
-        </Pressable>
-      </View>
-    </KeyboardAvoidingView>
+    <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
+      <LobbyPreview />
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1, backgroundColor: "#FFF5F7" },
-  tachieArea: {
-    height: "40%",
-    backgroundColor: "#FCE4EC",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    paddingBottom: 16,
-  },
-  tachieLabel: { position: "absolute", top: 14, left: 14, fontSize: 11, color: "#8a6b6f" },
-  emotionChip: {
-    position: "absolute",
-    top: 14,
-    right: 14,
-    backgroundColor: "#FFE0EA",
-    borderRadius: 999,
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-  },
-  emotionChipText: { color: "#FF7E9D", fontWeight: "bold", fontSize: 12 },
-  tachiePlaceholder: {
-    width: 120,
-    height: 190,
-    borderTopLeftRadius: 60,
-    borderTopRightRadius: 60,
-    borderBottomLeftRadius: 24,
-    borderBottomRightRadius: 24,
-    backgroundColor: "#FF9EB5",
-  },
-  tachieCaption: { fontSize: 11, color: "#8a6b6f", marginTop: 8 },
-  messages: { flex: 1 },
-  messagesContent: { padding: 16, gap: 8 },
-  hint: { fontSize: 13, color: "#8a6b6f" },
-  bubble: { maxWidth: "80%", borderRadius: 16, padding: 10 },
-  bubbleUser: { alignSelf: "flex-end", backgroundColor: "#FF7E9D" },
-  bubbleCharacter: { alignSelf: "flex-start", backgroundColor: "#EFEFEF" },
-  bubbleText: { color: "#222" },
-  error: { color: "#FF7E9D", fontSize: 12, paddingHorizontal: 16 },
-  inputRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    margin: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: "#E5D5D8",
-  },
-  input: { flex: 1, fontSize: 14 },
-  sendButton: { color: "#FF7E9D", fontWeight: "bold" },
-  sendButtonDisabled: { opacity: 0.5 },
+  content: { paddingBottom: 24 },
 });

apps/mobile/app/(tabs)/settings.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useEffect, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, Switch, Text, View } from "react-native";
 import * as Device from "expo-device";
 import * as Notifications from "expo-notifications";
 import { fetchHealth, registerPushToken } from "../../lib/api";
+import { isVoiceAutoplayEnabled, setVoiceAutoplayEnabled } from "../../lib/voice-autoplay-settings";
 
 const USER_ID = "seed-user-primary";
 
@@ -13,6 +14,17 @@ export default function SettingsScreen() {
   const [healthStatus, setHealthStatus] = useState<string | null>(null);
   const [healthError, setHealthError] = useState<string | null>(null);
   const [pushStatus, setPushStatus] = useState<string | null>(null);
+  // T20-P3：與 apps/web 的 VoiceAutoplaySection.tsx 對應，關閉後房間畫面回到逐則點擊才播放。
+  const [voiceAutoplay, setVoiceAutoplay] = useState(true);
+
+  useEffect(() => {
+    void isVoiceAutoplayEnabled().then(setVoiceAutoplay);
+  }, []);
+
+  async function handleToggleVoiceAutoplay(next: boolean) {
+    await setVoiceAutoplayEnabled(next);
+    setVoiceAutoplay(next);
+  }
 
   async function checkHealth() {
     setHealthError(null);
@@ -64,6 +76,15 @@ export default function SettingsScreen() {
         </Pressable>
         {pushStatus && <Text style={styles.line}>{pushStatus}</Text>}
       </View>
+
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>自走語音自動播放</Text>
+        <Text style={styles.line}>開啟後，在房間畫面時角色的新發言會自動依序念出來；關閉則回到逐則點擊才播放。</Text>
+        <View style={styles.switchRow}>
+          <Switch value={voiceAutoplay} onValueChange={(next) => void handleToggleVoiceAutoplay(next)} />
+          <Text style={styles.line}>在房間時自動播放角色語音</Text>
+        </View>
+      </View>
     </ScrollView>
   );
 }
@@ -78,4 +99,5 @@ const styles = StyleSheet.create({
   buttonText: { color: "#fff", fontWeight: "bold" },
   line: { fontSize: 13, color: "#222" },
   error: { color: "#FF7E9D", fontSize: 12 },
+  switchRow: { flexDirection: "row", alignItems: "center", gap: 10 },
 });