commit 17f0c8c8ff441eba73b59b4872e840adde403bf0
Author: ogt <ogt@awoooi.local>
Date:   Fri Jul 3 00:36:01 2026 +0800

    chore: restore initial vtuber source snapshot

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..5e20f52
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,6 @@
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/vtuber"
+API_PORT=4000
+NEXT_PUBLIC_API_BASE_URL=http://localhost:4000/api
+APP_DOMAIN=vtuber.wooo.work
+NEXT_PUBLIC_LIVE_STREAM_URL=https://videos.pexels.com/video-files/7297923/7297923-uhd_3840_2160_30fps.mp4
+NEXT_PUBLIC_REAL_HOST_AVATAR_URL=https://videos.pexels.com/video-files/7297923/7297923-uhd_3840_2160_30fps.mp4
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..054aa5e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+node_modules
+.next
+dist
+coverage
+.env
+.env.*
+!/.env.example
+!.env.example
+!/.env.sample
+!/.env.local
+*.tsbuildinfo
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+tmp
+*.log
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..acf723e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,148 @@
+# VTuber
+
+VTuber monorepo demo for live commerce (virtual streamer) workflow:
+
+- `apps/web`：Next.js 前台（商品瀏覽、直播頁、購物車）
+- `apps/admin`：Next.js 後台（商品、訂單、庫存）
+- `apps/api`：NestJS 後端 API
+- `packages/db`：Prisma schema 與資料庫工具
+- `packages/ui`：共享 UI 元件
+
+## 快速開始
+
+```bash
+cd VTuber
+git init
+npm install
+npm run db:generate
+npm run db:push   # 需先啟動 PostgreSQL 並設定 DATABASE_URL
+npm run seed
+
+npm run dev
+```
+
+### 常用指令
+
+- `npm run dev`：啟動 web/admin/api 開發伺服器
+- 開發與示範域名：
+  - `APP_DOMAIN=vtuber.wooo.work`（預設生產網域）
+
+- `npm run build`：打包三個 app
+- `npm run lint`：執行 lint
+- `npm run test`：執行 API 測試（目前為 API 空殼，日後補上）
+- `npm run seed`：建立 demo 資料（10 商品、1 直播間、20 則留言）
+- `npm run db:generate`：重新產生 Prisma client
+- `npm run db:push`：依 schema 同步 DB 結構
+- `npm run db:migrate`：產生 migration 檔（可選）
+
+## 日誌總覽
+
+- Day 1：Monorepo + Prisma + Seed（10 商品、20 留言）
+- Day 2：前台商品頁、商品頁、購物車與結帳
+- Day 3：直播 Demo（左主播、右留言、下方主推）
+- Day 4：後台商品/訂單/庫存/作業台
+- Day 5：AI 主播問答 API（價格、庫存、尺寸、物流）
+- Day 6：真人 / 虛擬直播場景與動畫 placeholder
+- Day 7：部署 + 端到端流程驗證
+
+### Day 3：直播 Demo
+
+- 開啟 `/live/demo` 進入直播頁（預設會讀取直播間場景流與作業資訊）
+- 左側為虛擬主播區（可替換 video/avatar）
+- 右側為留言輸入與列表
+- 下方為主推商品與「立即購買」
+
+## 主播角色與作業流程（MVP）
+
+- 主持人（HOST）：直播主講、回覆問題、引導下單
+- 場控/導播（PRODUCER）：轉場與畫面節奏控制
+- 導演（DIRECTOR）：逐字稿節奏、回合節奏與上鏡順序控管
+- 小編/編輯（EDITOR）：腳本文案、備稿、字幕與直播素材
+- 小助手（SUPPORT）：留言回覆、加購/售後疑問回應
+- 倉儲（WAREHOUSE）：實體庫存核對、出貨前置
+- 行銷（MARKETING）：促銷節奏、優惠提醒、活動執行
+- 運維（OPERATOR）：直播間啟關、連線監控（預留）
+
+主流程（可操作）：
+1) 開播前：建立直播間與角色指派，完成 3~5 個主打腳本節點與核對清單；
+2) 直播中：開播/留言互動/AI 詢問回覆；
+3) 結帳：在直播頁可直接「加入購物車」或「立即購買」建立 mock 訂單；
+4) 結束後：在後台回顧腳本勾選與清單完成度。
+
+## 正式環境推版（建議 188）
+
+1. 在正式機先放好 `VTuber` repo，並複製 `deploy/.env.prod.example` 為 `deploy/.env.prod`
+2. 填寫 `deploy/.env.prod`
+3. 本機執行推版腳本：
+```bash
+chmod +x deploy/deploy-prod.sh
+cp deploy/.env.prod.example deploy/.env.prod
+./deploy/deploy-prod.sh
+```
+
+若你要直接做到「推版 + 內外網可用性檢查」一次完成，可直接執行：
+
+```bash
+./scripts/deploy-and-verify-vtuber110.sh
+```
+
+這支指令會先跑 `deploy-prod.sh`，再自動做 `/live/demo` 與 DNS/憑證健康檢查，部署完直接知道是否已恢復。
+若外網 DNS 還是指到舊站，腳本會直接回傳失敗並停止，避免把錯誤版本上線。
+
+4. 正式環境驗證：
+ - `curl http://localhost:3000`（前台）
+ - `curl http://localhost:3001`（後台）
+ - `curl http://localhost:4000/api/health`（API）
+ - `curl http://localhost:3000/live/demo`（直播頁）
+- `curl -ksS https://vtuber.wooo.work/live/demo`（正式網域直播頁）
+- `curl -ksS https://vtuber.wooo.work/zh-TW/live/demo`（正式網域繁中直播頁）
+
+或者直接一鍵執行（包含部署驗證＋兩條正式網域路徑）：
+
+```bash
+./scripts/verify-live-domain-110.sh
+```
+
+ 如果你要直接在正式網域驗證，請先確認反向代理已將 443/80 轉到對應服務。
+
+### 110 正式站快速可用性檢查
+
+可直接執行：
+
+```bash
+./scripts/check-vtuber-offline-110.sh vtuber.wooo.work 114.32.151.246
+```
+
+內容會回報：
+- DNS A/AAAA 解析是否指到 114.32.151.246
+- TLS 憑證 Subject / Issuer / 到期日 / SAN
+- `/live/demo` 及 `/zh-TW/live/demo` 直連、SNI 指向、IP+Host 直走、純 IP 訪問 5 種路徑結果
+- 若回應非 200，腳本會直接列為失敗（`404` 不會再被誤判為通過）
+- 失敗項目對應的提醒（例如要檢查哪個 DNS A Record）
+
+可加上 `CHECK_STRICT_MODE=1` 強制回傳非 0 讓流水線判斷失敗（預設已啟用）。
+
+### 110 Nginx 404 保底導回設定
+
+如果你要直接在 110 套用 404 fallback，可先確認 `deploy/.env.prod` 已填好，再執行：
+
+```bash
+./deploy/apply-nginx-110-live-fallback.sh
+```
+
+腳本行為：
+- 將 `deploy/vtuber-nginx-110-live-fallback.conf` 上傳到
+  `/etc/nginx/snippets/vtuber-nginx-110-live-fallback.conf`
+- 於 `NGINX_SERVER_CONFIG`（預設 `/etc/nginx/sites-available/${APP_DOMAIN}`）
+  插入 snippet include
+- `nginx -t` 後重新載入 Nginx
+
+## 環境變數
+
+請複製根目錄 `.env.example` 為 `.env` 並修改：
+
+- `DATABASE_URL`
+- `API_PORT`
+- `NEXT_PUBLIC_API_BASE_URL`
+
+各 app 也保留 `.env.example` 於專案下可作為參考。
diff --git a/apps/admin/.env.example b/apps/admin/.env.example
new file mode 100644
index 0000000..7d39d6b
--- /dev/null
+++ b/apps/admin/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_BASE_URL=http://localhost:4000/api
+NEXT_PUBLIC_APP_DOMAIN=vtuber.wooo.work
diff --git a/apps/admin/.eslintrc.json b/apps/admin/.eslintrc.json
new file mode 100644
index 0000000..957cd15
--- /dev/null
+++ b/apps/admin/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}
diff --git a/apps/admin/Dockerfile b/apps/admin/Dockerfile
new file mode 100644
index 0000000..577fecf
--- /dev/null
+++ b/apps/admin/Dockerfile
@@ -0,0 +1,27 @@
+FROM node:20 AS builder
+WORKDIR /app
+
+COPY package.json ./
+COPY tsconfig.base.json ./
+COPY apps/web ./apps/web
+COPY apps/admin ./apps/admin
+COPY packages ./packages
+
+RUN npm install
+RUN npm run build:admin
+
+FROM node:20
+WORKDIR /app
+ENV NODE_ENV=production
+
+COPY --from=builder /app/package.json /app/package.json
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/apps/admin/.next ./apps/admin/.next
+COPY --from=builder /app/apps/admin/package.json ./apps/admin/package.json
+COPY --from=builder /app/apps/admin/public ./apps/admin/public
+COPY --from=builder /app/apps/admin/next.config.js ./apps/admin/next.config.js
+COPY --from=builder /app/apps/admin/next-env.d.ts ./apps/admin/next-env.d.ts
+
+ENV NEXT_TELEMETRY_DISABLED=1
+EXPOSE 3001
+CMD ["npm","run","start","-w","apps/admin"]
diff --git a/apps/admin/next-env.d.ts b/apps/admin/next-env.d.ts
new file mode 100644
index 0000000..40c3d68
--- /dev/null
+++ b/apps/admin/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/admin/next.config.js b/apps/admin/next.config.js
new file mode 100644
index 0000000..91ef62f
--- /dev/null
+++ b/apps/admin/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;
diff --git a/apps/admin/package.json b/apps/admin/package.json
new file mode 100644
index 0000000..d6601dd
--- /dev/null
+++ b/apps/admin/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@vtuber/admin",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@vtuber/ui": "*",
+    "next": "^14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.5",
+    "typescript": "^5.5.0"
+  }
+}
diff --git a/apps/admin/public/.gitkeep b/apps/admin/public/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/admin/src/app/globals.css b/apps/admin/src/app/globals.css
new file mode 100644
index 0000000..10f7c7d
--- /dev/null
+++ b/apps/admin/src/app/globals.css
@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: #222;
+  background: #f4f6ff;
+}
+
+main {
+  max-width: 960px;
+  margin: 0 auto;
+}
diff --git a/apps/admin/src/app/inventory/page.tsx b/apps/admin/src/app/inventory/page.tsx
new file mode 100644
index 0000000..85324b8
--- /dev/null
+++ b/apps/admin/src/app/inventory/page.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import { FormEvent, useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../lib/api';
+
+type Product = {
+  id: string;
+  name: string;
+  slug: string;
+};
+
+type InventoryRecord = {
+  id: string;
+  quantity: number;
+  reserved: number;
+};
+
+type ProductVariant = {
+  id: string;
+  sku: string;
+  name: string;
+  size: string | null;
+  price: number;
+  product: Product;
+  inventory: InventoryRecord | null;
+};
+
+export default function InventoryPage() {
+  const [variants, setVariants] = useState<ProductVariant[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [quantityInputs, setQuantityInputs] = useState<Record<string, string>>({});
+
+  const loadInventory = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await apiFetch<ProductVariant[]>('/admin/inventories');
+      setVariants(data);
+      setQuantityInputs((prev) => {
+        const next = { ...prev };
+        data.forEach((variant) => {
+          const key = variant.id;
+          const quantity = variant.inventory?.quantity ?? 0;
+          next[key] = String(quantity);
+        });
+        return next;
+      });
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '載入庫存失敗');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadInventory();
+  }, [loadInventory]);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>, variantId: string) {
+    event.preventDefault();
+    setError('');
+    const quantity = Number.parseInt(quantityInputs[variantId] ?? '0', 10);
+    if (Number.isNaN(quantity) || quantity < 0) {
+      setError('庫存必須是非負整數');
+      return;
+    }
+    try {
+      await apiFetch(`/admin/inventories/${variantId}`, {
+        method: 'PUT',
+        body: JSON.stringify({ quantity }),
+      });
+      await loadInventory();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '更新庫存失敗');
+    }
+  }
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>庫存管理</h1>
+      <Link href="/admin">回後台首頁</Link>
+      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
+      {loading ? <p>載入中...</p> : null}
+      {variants.length === 0 ? (
+        <p>目前無庫存資料</p>
+      ) : (
+        <div style={{ display: 'grid', gap: 12 }}>
+          {variants.map((variant) => (
+            <article
+              key={variant.id}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: 10,
+                padding: 12,
+              }}
+            >
+              <h3>{variant.product.name}</h3>
+              <p>
+                規格：
+                {variant.name}
+                {' / '}
+                SKU: {variant.sku}
+                {' / '}
+                尺寸：{variant.size || '-'}
+                {' / '}
+                售價：NT$ {variant.price}
+              </p>
+              <p>剩餘庫存：{variant.inventory?.quantity ?? 0}</p>
+              <p>預留：{variant.inventory?.reserved ?? 0}</p>
+              <form
+                onSubmit={(event) => handleSubmit(event, variant.id)}
+                style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+              >
+                <input
+                  value={quantityInputs[variant.id] ?? '0'}
+                  onChange={(event) =>
+                    setQuantityInputs((prev) => ({
+                      ...prev,
+                      [variant.id]: event.target.value,
+                    }))
+                  }
+                  type="number"
+                  min={0}
+                  placeholder="庫存數"
+                />
+                <button type="submit">更新庫存</button>
+              </form>
+            </article>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}
diff --git a/apps/admin/src/app/layout.tsx b/apps/admin/src/app/layout.tsx
new file mode 100644
index 0000000..7872eaf
--- /dev/null
+++ b/apps/admin/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import '../app/globals.css';
+
+export const metadata = {
+  title: 'VTuber Admin',
+  description: 'VTuber Admin Console',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-Hant">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/admin/src/app/operations/page.tsx b/apps/admin/src/app/operations/page.tsx
new file mode 100644
index 0000000..08b90d6
--- /dev/null
+++ b/apps/admin/src/app/operations/page.tsx
@@ -0,0 +1,785 @@
+'use client';
+
+import { FormEvent, useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../lib/api';
+
+type TeamRole =
+  | 'HOST'
+  | 'PRODUCER'
+  | 'DIRECTOR'
+  | 'EDITOR'
+  | 'SUPPORT'
+  | 'WAREHOUSE'
+  | 'MARKETING'
+  | 'OPERATOR';
+
+type TeamMember = {
+  id: string;
+  displayName: string;
+  role: TeamRole;
+  phone: string | null;
+  email: string | null;
+  isActive: boolean;
+};
+
+type LiveRoom = {
+  id: string;
+  title: string;
+  hostName: string;
+  status: string;
+  isActive: boolean;
+  streamUrl: string | null;
+};
+
+type LiveRoomAssignment = {
+  id: string;
+  role: TeamRole;
+  isPrimary: boolean;
+  shiftStartAt: string | null;
+  shiftEndAt: string | null;
+  note: string | null;
+  teamMember: {
+    id: string;
+    displayName: string;
+    role: TeamRole;
+    phone: string | null;
+    email: string | null;
+  };
+};
+
+type LiveRoomScript = {
+  id: string;
+  sequence: number;
+  cue: string | null;
+  title: string;
+  content: string;
+  ownerRole: TeamRole | null;
+  targetProductId: string | null;
+  isDone: boolean;
+};
+
+type LiveRoomChecklistItem = {
+  id: string;
+  title: string;
+  ownerRole: TeamRole;
+  description: string | null;
+  isRequired: boolean;
+  isDone: boolean;
+  note: string | null;
+};
+
+type RoomOps = {
+  room: {
+    id: string;
+    title: string;
+    hostName: string;
+    status: string;
+    liveGoal: string | null;
+    streamUrl: string | null;
+  };
+  assignments: LiveRoomAssignment[];
+  scripts: LiveRoomScript[];
+  checklists: LiveRoomChecklistItem[];
+};
+
+const TEAM_ROLES: TeamRole[] = [
+  'HOST',
+  'PRODUCER',
+  'DIRECTOR',
+  'EDITOR',
+  'SUPPORT',
+  'WAREHOUSE',
+  'MARKETING',
+  'OPERATOR',
+];
+
+export default function OperationsPage() {
+  const [rooms, setRooms] = useState<LiveRoom[]>([]);
+  const [members, setMembers] = useState<TeamMember[]>([]);
+  const [selectedRoomId, setSelectedRoomId] = useState('');
+  const [roomOps, setRoomOps] = useState<RoomOps | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const [newMember, setNewMember] = useState({
+    displayName: '',
+    role: TEAM_ROLES[0] as TeamRole,
+    phone: '',
+    email: '',
+  });
+
+  const [newAssignment, setNewAssignment] = useState({
+    teamMemberId: '',
+    role: TEAM_ROLES[0] as TeamRole,
+    isPrimary: false,
+    note: '',
+  });
+
+  const [newScript, setNewScript] = useState({
+    sequence: '1',
+    cue: '',
+    title: '',
+    content: '',
+    ownerRole: TEAM_ROLES[0] as TeamRole,
+    targetProductId: '',
+  });
+
+  const [newChecklist, setNewChecklist] = useState({
+    title: '',
+    ownerRole: TEAM_ROLES[0] as TeamRole,
+    description: '',
+    isRequired: true,
+    note: '',
+  });
+
+  const loadRooms = useCallback(async () => {
+    try {
+      const data = await apiFetch<LiveRoom[]>('/live-rooms');
+      setRooms(data);
+      if (!selectedRoomId && data.length > 0) {
+        const initial = data.find((room) => room.isActive) || data[0];
+        setSelectedRoomId(initial.id);
+      }
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '載入直播間失敗');
+    }
+  }, [selectedRoomId]);
+
+  const loadMembers = useCallback(async () => {
+    try {
+      const data = await apiFetch<TeamMember[]>('/admin/team-members');
+      setMembers(data);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '載入人員失敗');
+    }
+  }, []);
+
+  const loadOperations = useCallback(async () => {
+    if (!selectedRoomId) return;
+    setLoading(true);
+    setError('');
+    try {
+      const data = await apiFetch<RoomOps>(`/admin/live-rooms/${selectedRoomId}/operations`);
+      setRoomOps(data);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '載入直播作業失敗');
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedRoomId]);
+
+  useEffect(() => {
+    void loadRooms();
+    void loadMembers();
+  }, [loadRooms, loadMembers]);
+
+  useEffect(() => {
+    void loadOperations();
+  }, [loadOperations]);
+
+  const selectedRoom = rooms.find((room) => room.id === selectedRoomId) ?? null;
+
+  async function handleCreateMember(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError('');
+
+    if (!newMember.displayName.trim()) {
+      setError('請輸入人員姓名');
+      return;
+    }
+
+    try {
+      await apiFetch('/admin/team-members', {
+        method: 'POST',
+        body: JSON.stringify({
+          displayName: newMember.displayName.trim(),
+          role: newMember.role,
+          phone: newMember.phone.trim() || undefined,
+          email: newMember.email.trim() || undefined,
+        }),
+      });
+      setNewMember({
+        displayName: '',
+        role: TEAM_ROLES[0],
+        phone: '',
+        email: '',
+      });
+      await loadMembers();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '新增人員失敗');
+    }
+  }
+
+  async function handleDeleteMember(id: string) {
+    setError('');
+    if (!confirm('要移除這位人員？')) return;
+    try {
+      await apiFetch(`/admin/team-members/${id}`, { method: 'DELETE' });
+      await loadMembers();
+      if (selectedRoomId) {
+        await loadOperations();
+      }
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '刪除人員失敗');
+    }
+  }
+
+  async function assignMember(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError('');
+
+    if (!selectedRoomId || !newAssignment.teamMemberId) {
+      setError('請先選直播間並指定人員');
+      return;
+    }
+
+    try {
+      await apiFetch(`/admin/live-rooms/${selectedRoomId}/operations/assignments`, {
+        method: 'POST',
+        body: JSON.stringify({
+          teamMemberId: newAssignment.teamMemberId,
+          role: newAssignment.role,
+          isPrimary: newAssignment.isPrimary,
+          note: newAssignment.note || undefined,
+        }),
+      });
+      setNewAssignment((prev) => ({
+        ...prev,
+        teamMemberId: '',
+        isPrimary: false,
+        note: '',
+      }));
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '指派角色失敗');
+    }
+  }
+
+  async function handleRemoveAssignment(assignmentId: string) {
+    setError('');
+    if (!selectedRoomId) return;
+    if (!confirm('要移除這筆分工？')) return;
+
+    try {
+      await apiFetch(`/admin/live-rooms/${selectedRoomId}/operations/assignments/${assignmentId}`, {
+        method: 'DELETE',
+      });
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '移除分工失敗');
+    }
+  }
+
+  async function handleCreateScript(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError('');
+
+    if (!selectedRoomId) {
+      setError('請先選直播間');
+      return;
+    }
+
+    const sequence = Number.parseInt(newScript.sequence, 10);
+    if (!newScript.title.trim() || !newScript.content.trim() || Number.isNaN(sequence) || sequence <= 0) {
+      setError('請輸入腳本標題/內容，並填入正整數序號');
+      return;
+    }
+
+    try {
+      await apiFetch(`/admin/live-rooms/${selectedRoomId}/operations/scripts`, {
+        method: 'POST',
+        body: JSON.stringify({
+          sequence,
+          cue: newScript.cue.trim() || undefined,
+          title: newScript.title.trim(),
+          content: newScript.content.trim(),
+          ownerRole: newScript.ownerRole,
+          targetProductId: newScript.targetProductId.trim() || undefined,
+        }),
+      });
+      setNewScript((prev) => ({
+        ...prev,
+        cue: '',
+        title: '',
+        content: '',
+        targetProductId: '',
+      }));
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '新增腳本失敗');
+    }
+  }
+
+  async function handleToggleScript(scriptId: string, isDone: boolean) {
+    setError('');
+    try {
+      await apiFetch(`/admin/live-ops/scripts/${scriptId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isDone }),
+      });
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '更新腳本狀態失敗');
+    }
+  }
+
+  async function handleCreateChecklist(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError('');
+
+    if (!selectedRoomId) {
+      setError('請先選直播間');
+      return;
+    }
+
+    if (!newChecklist.title.trim()) {
+      setError('任務標題必填');
+      return;
+    }
+
+    try {
+      await apiFetch(`/admin/live-rooms/${selectedRoomId}/operations/checklists`, {
+        method: 'POST',
+        body: JSON.stringify({
+          title: newChecklist.title.trim(),
+          ownerRole: newChecklist.ownerRole,
+          description: newChecklist.description.trim() || undefined,
+          isRequired: newChecklist.isRequired,
+          note: newChecklist.note.trim() || undefined,
+        }),
+      });
+      setNewChecklist({
+        title: '',
+        ownerRole: TEAM_ROLES[0],
+        description: '',
+        isRequired: true,
+        note: '',
+      });
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '新增任務失敗');
+    }
+  }
+
+  async function handleToggleChecklist(itemId: string, isDone: boolean) {
+    setError('');
+    try {
+      await apiFetch(`/admin/live-ops/checklists/${itemId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isDone }),
+      });
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '任務勾選失敗');
+    }
+  }
+
+  async function handleRoomStatusUpdate(status: string) {
+    if (!selectedRoomId) return;
+    setError('');
+    try {
+      await apiFetch(`/admin/live-rooms/${selectedRoomId}/status`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status }),
+      });
+      await loadRooms();
+      await loadOperations();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '更新直播狀態失敗');
+    }
+  }
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>直播作業台</h1>
+      <Link href="/admin">回後台首頁</Link>
+      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
+
+      <section style={{ marginBottom: 20 }}>
+        <h2>直播間</h2>
+        <select
+          value={selectedRoomId}
+          onChange={(event) => setSelectedRoomId(event.target.value)}
+        >
+          <option value="">請先選擇直播間</option>
+          {rooms.map((room) => (
+            <option key={room.id} value={room.id}>
+              {room.title}
+              {' / '}
+              {room.hostName}
+              {' / '}
+              {room.status}
+            </option>
+          ))}
+        </select>
+
+        {selectedRoom ? (
+          <div style={{ marginTop: 8 }}>
+            <strong>目前直播：</strong>
+            {selectedRoom.title}
+            {' / '}
+            狀態：
+            {selectedRoom.status}
+            {' / '}
+            人員區：
+            {selectedRoom.isActive ? '開啟' : '關閉'}
+            <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              {['PLANNING', 'LIVE', 'FINISHED', 'CANCELLED'].map((status) => (
+                <button
+                  key={status}
+                  type="button"
+                  onClick={() => handleRoomStatusUpdate(status)}
+                  disabled={selectedRoom.status === status}
+                >
+                  設為
+                  {status}
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </section>
+
+      <section style={{ marginBottom: 28, borderBottom: '1px solid #ddd', paddingBottom: 12 }}>
+        <h2>人員管理</h2>
+        <form onSubmit={handleCreateMember} style={{ display: 'grid', gap: 8, maxWidth: 680 }}>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            <input
+              value={newMember.displayName}
+              onChange={(event) =>
+                setNewMember((prev) => ({ ...prev, displayName: event.target.value }))
+              }
+              placeholder="顯示名稱"
+            />
+            <select
+              value={newMember.role}
+              onChange={(event) =>
+                setNewMember((prev) => ({ ...prev, role: event.target.value as TeamRole }))
+              }
+            >
+              {TEAM_ROLES.map((role) => (
+                <option key={role} value={role}>
+                  {role}
+                </option>
+              ))}
+            </select>
+            <input
+              value={newMember.phone}
+              onChange={(event) =>
+                setNewMember((prev) => ({ ...prev, phone: event.target.value }))
+              }
+              placeholder="電話（可空）"
+            />
+            <input
+              value={newMember.email}
+              onChange={(event) =>
+                setNewMember((prev) => ({ ...prev, email: event.target.value }))
+              }
+              placeholder="信箱（可空）"
+            />
+            <button type="submit">新增人員</button>
+          </div>
+        </form>
+
+        <div style={{ marginTop: 12 }}>
+          {members.length === 0 ? <p>目前無可用人員</p> : null}
+          {members.map((member) => (
+            <article
+              key={member.id}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: 8,
+                padding: 8,
+                marginBottom: 8,
+              }}
+            >
+              <div>
+                {member.displayName}
+                {' / '}
+                角色：
+                {member.role}
+                {' / '}
+                狀態：
+                {member.isActive ? '啟用' : '停用'}
+              </div>
+              <div style={{ color: '#666', fontSize: 13 }}>
+                {member.phone ? `${member.phone} / ` : ''}
+                {member.email || '-'}
+              </div>
+              <button type="button" onClick={() => handleDeleteMember(member.id)}>
+                移除
+              </button>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section style={{ marginBottom: 28 }}>
+        <h2>直播角色分工（實時作業）</h2>
+        <form onSubmit={assignMember} style={{ display: 'grid', gap: 8, maxWidth: 760 }}>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            <select
+              value={newAssignment.teamMemberId}
+              onChange={(event) =>
+                setNewAssignment((prev) => ({ ...prev, teamMemberId: event.target.value }))
+              }
+            >
+              <option value="">選擇人員</option>
+              {members.map((member) => (
+                <option key={member.id} value={member.id}>
+                  {member.displayName}
+                  {'（'}
+                  {member.role}
+                  {'）'}
+                </option>
+              ))}
+            </select>
+            <select
+              value={newAssignment.role}
+              onChange={(event) =>
+                setNewAssignment((prev) => ({ ...prev, role: event.target.value as TeamRole }))
+              }
+            >
+              {TEAM_ROLES.map((role) => (
+                <option key={role} value={role}>
+                  {role}
+                </option>
+              ))}
+            </select>
+            <label style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
+              <input
+                type="checkbox"
+                checked={newAssignment.isPrimary}
+                onChange={(event) =>
+                  setNewAssignment((prev) => ({ ...prev, isPrimary: event.target.checked }))
+                }
+              />
+              主持主位
+            </label>
+          </div>
+          <input
+            value={newAssignment.note}
+            onChange={(event) =>
+              setNewAssignment((prev) => ({ ...prev, note: event.target.value }))
+            }
+            placeholder="派工備註"
+          />
+          <button type="submit">派工</button>
+        </form>
+
+        <div style={{ marginTop: 12 }}>
+          {roomOps?.assignments.map((assignment) => (
+            <article
+              key={assignment.id}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: 8,
+                padding: 8,
+                marginBottom: 8,
+              }}
+            >
+              <div>
+                {assignment.teamMember.displayName}
+                {' / '}
+                指派為：
+                {assignment.role}
+                {assignment.isPrimary ? '（主責）' : ''}
+              </div>
+              <div style={{ color: '#666', fontSize: 13 }}>
+                {assignment.teamMember.phone || '-'}
+                {' / '}
+                {assignment.teamMember.email || '-'}
+                {' / '}
+                {assignment.note || '無備註'}
+              </div>
+              <button type="button" onClick={() => handleRemoveAssignment(assignment.id)}>
+                移除分工
+              </button>
+            </article>
+          ))}
+          {roomOps?.assignments.length === 0 ? <p>尚未指派角色</p> : null}
+        </div>
+      </section>
+
+      <section style={{ marginBottom: 28, display: 'grid', gap: 20, gridTemplateColumns: '1fr 1fr' }}>
+        <div>
+          <h2>直播腳本</h2>
+          <form onSubmit={handleCreateScript} style={{ display: 'grid', gap: 8 }}>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <input
+                value={newScript.sequence}
+                onChange={(event) =>
+                  setNewScript((prev) => ({ ...prev, sequence: event.target.value }))
+                }
+                placeholder="順序"
+                type="number"
+                min={1}
+              />
+              <input
+                value={newScript.cue}
+                onChange={(event) =>
+                  setNewScript((prev) => ({ ...prev, cue: event.target.value }))
+                }
+                placeholder="時間點"
+              />
+              <select
+                value={newScript.ownerRole}
+                onChange={(event) =>
+                  setNewScript((prev) => ({ ...prev, ownerRole: event.target.value as TeamRole }))
+                }
+              >
+                {TEAM_ROLES.map((role) => (
+                  <option key={role} value={role}>
+                    {role}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <input
+              value={newScript.title}
+              onChange={(event) =>
+                setNewScript((prev) => ({ ...prev, title: event.target.value }))
+              }
+              placeholder="標題"
+            />
+            <textarea
+              value={newScript.content}
+              onChange={(event) =>
+                setNewScript((prev) => ({ ...prev, content: event.target.value }))
+              }
+              rows={3}
+              placeholder="台本內容"
+            />
+            <input
+              value={newScript.targetProductId}
+              onChange={(event) =>
+                setNewScript((prev) => ({ ...prev, targetProductId: event.target.value }))
+              }
+              placeholder="目標商品ID（可空）"
+            />
+            <button type="submit">加入腳本</button>
+          </form>
+
+          {roomOps?.scripts.map((script) => (
+            <article
+              key={script.id}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: 8,
+                padding: 8,
+                marginBottom: 8,
+                marginTop: 12,
+              }}
+            >
+              <div>
+                {script.sequence}
+                {' / '}
+                {script.cue || '-'}
+                {' / '}
+                {script.title}
+              </div>
+              <p style={{ marginTop: 4 }}>{script.content}</p>
+              <p style={{ color: '#666', fontSize: 12 }}>
+                {script.ownerRole || '-'} / 目標商品ID：
+                {script.targetProductId || '-'}
+              </p>
+              <button
+                type="button"
+                onClick={() => handleToggleScript(script.id, !script.isDone)}
+              >
+                {script.isDone ? '標記未完成' : '標記完成'}
+              </button>
+            </article>
+          ))}
+          {roomOps?.scripts.length === 0 ? <p>尚未建立腳本</p> : null}
+        </div>
+
+        <div>
+          <h2>直播核對清單（任務）</h2>
+          <form onSubmit={handleCreateChecklist} style={{ display: 'grid', gap: 8 }}>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <input
+                value={newChecklist.title}
+                onChange={(event) =>
+                  setNewChecklist((prev) => ({ ...prev, title: event.target.value }))
+                }
+                placeholder="任務標題"
+              />
+              <select
+                value={newChecklist.ownerRole}
+                onChange={(event) =>
+                  setNewChecklist((prev) => ({ ...prev, ownerRole: event.target.value as TeamRole }))
+                }
+              >
+                {TEAM_ROLES.map((role) => (
+                  <option key={role} value={role}>
+                    {role}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <textarea
+              value={newChecklist.description}
+              onChange={(event) =>
+                setNewChecklist((prev) => ({ ...prev, description: event.target.value }))
+              }
+              rows={2}
+              placeholder="任務描述"
+            />
+            <input
+              value={newChecklist.note}
+              onChange={(event) =>
+                setNewChecklist((prev) => ({ ...prev, note: event.target.value }))
+              }
+              placeholder="備註"
+            />
+            <label style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
+              <input
+                type="checkbox"
+                checked={newChecklist.isRequired}
+                onChange={(event) =>
+                  setNewChecklist((prev) => ({ ...prev, isRequired: event.target.checked }))
+                }
+              />
+              必做
+            </label>
+            <button type="submit">新增任務</button>
+          </form>
+
+          {roomOps?.checklists.map((item) => (
+            <article
+              key={item.id}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: 8,
+                padding: 8,
+                marginBottom: 8,
+                marginTop: 12,
+              }}
+            >
+              <div>
+                {item.title}
+                {' / '}
+                負責：
+                {item.ownerRole}
+                {' / '}
+                {item.isRequired ? '必要' : '非必要'}
+              </div>
+              {item.description ? <p style={{ marginTop: 4 }}>{item.description}</p> : null}
+              <p style={{ color: '#666', fontSize: 12 }}>{item.note || ''}</p>
+              <button
+                type="button"
+                onClick={() => handleToggleChecklist(item.id, !item.isDone)}
+              >
+                {item.isDone ? '取消完成' : '標記完成'}
+              </button>
+            </article>
+          ))}
+          {roomOps?.checklists.length === 0 ? <p>尚未建立清單</p> : null}
+        </div>
+      </section>
+      {loading ? <p>讀取中...</p> : null}
+    </main>
+  );
+}
diff --git a/apps/admin/src/app/orders/page.tsx b/apps/admin/src/app/orders/page.tsx
new file mode 100644
index 0000000..674da68
--- /dev/null
+++ b/apps/admin/src/app/orders/page.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../lib/api';
+
+type Product = {
+  id: string;
+  name: string;
+};
+
+type Variant = {
+  id: string;
+  name: string;
+  product: Product;
+};
+
+type OrderItem = {
+  id: string;
+  quantity: number;
+  unitPrice: number;
+  variant: Variant;
+};
+
+type Order = {
+  id: string;
+  orderNumber: string;
+  status: string;
+  totalAmount: number;
+  createdAt: string;
+  items: OrderItem[];
+};
+
+const ORDER_STATUS_OPTIONS = ['PENDING', 'PAID', 'SHIPPED', 'CANCELLED'] as const;
+
+export default function AdminOrdersPage() {
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const loadOrders = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await apiFetch<Order[]>('/admin/orders');
+      setOrders(data);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '載入訂單失敗');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadOrders();
+  }, [loadOrders]);
+
+  async function handleStatusChange(orderId: string, status: string) {
+    setError('');
+    try {
+      await apiFetch(`/admin/orders/${orderId}/status`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status }),
+      });
+      await loadOrders();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '更新訂單狀態失敗');
+    }
+  }
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>訂單管理</h1>
+      <Link href="/admin">回後台首頁</Link>
+      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
+      {loading ? <p>載入中...</p> : null}
+
+      {orders.length === 0 ? (
+        <p>目前沒有訂單</p>
+      ) : (
+        orders.map((order) => (
+          <article
+            key={order.id}
+            style={{
+              border: '1px solid #ddd',
+              borderRadius: 10,
+              padding: 12,
+              marginBottom: 12,
+            }}
+          >
+            <h3>
+              訂單編號：{order.orderNumber}
+              {' '}
+              /
+              {' '}
+              {new Date(order.createdAt).toLocaleString()}
+            </h3>
+            <p>
+              總金額：NT$
+              {order.totalAmount}
+            </p>
+            <div>
+              狀態：
+              <select
+                value={order.status}
+                onChange={(event) => handleStatusChange(order.id, event.target.value)}
+              >
+                {ORDER_STATUS_OPTIONS.map((status) => (
+                  <option key={status} value={status}>
+                    {status}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <ul>
+              {order.items.map((item) => (
+                <li key={item.id}>
+                  {item.variant.product.name}
+                  {' '}
+                  / {item.variant.name}
+                  {' '}
+                  x
+                  {' '}
+                  {item.quantity}
+                  {' '}
+                  （NT$
+                  {item.unitPrice}
+                  /件）
+                </li>
+              ))}
+            </ul>
+          </article>
+        ))
+      )}
+    </main>
+  );
+}
diff --git a/apps/admin/src/app/page.tsx b/apps/admin/src/app/page.tsx
new file mode 100644
index 0000000..372459f
--- /dev/null
+++ b/apps/admin/src/app/page.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link';
+
+export default function AdminHomePage() {
+  return (
+    <main style={{ padding: 32, fontFamily: 'system-ui' }}>
+      <h1>VTuber 後台 Demo</h1>
+      <p>Day 4 已完成：商品管理、訂單管理、庫存管理。</p>
+      <ul>
+        <li>
+          <Link href="/products">商品管理</Link>
+        </li>
+        <li>
+          <Link href="/orders">訂單管理</Link>
+        </li>
+        <li>
+          <Link href="/inventory">庫存管理</Link>
+        </li>
+        <li>
+          <Link href="/operations">直播作業台</Link>
+        </li>
+      </ul>
+    </main>
+  );
+}
diff --git a/apps/admin/src/app/products/page.tsx b/apps/admin/src/app/products/page.tsx
new file mode 100644
index 0000000..c2e0f0e
--- /dev/null
+++ b/apps/admin/src/app/products/page.tsx
@@ -0,0 +1,321 @@
+'use client';
+
+import { useCallback, FormEvent, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../lib/api';
+
+type Inventory = {
+  quantity: number;
+};
+
+type ProductVariant = {
+  id: string;
+  sku: string;
+  name: string;
+  size: string | null;
+  price: number;
+  inventory: Inventory | null;
+};
+
+type Product = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  imageUrl: string | null;
+  basePrice: number;
+  isActive: boolean;
+  variants: ProductVariant[];
+};
+
+type NewProductInput = {
+  name: string;
+  slug: string;
+  description: string;
+  imageUrl: string;
+  basePrice: string;
+};
+
+type EditProductInput = {
+  name: string;
+  slug: string;
+  description: string;
+  imageUrl: string;
+  basePrice: string;
+  isActive: boolean;
+};
+
+const toNumber = (value: string) => Number.parseInt(value, 10);
+
+export default function AdminProductsPage() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const [form, setForm] = useState<NewProductInput>({
+    name: '',
+    slug: '',
+    description: '',
+    imageUrl: '',
+    basePrice: '0',
+  });
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editing, setEditing] = useState<EditProductInput>({
+    name: '',
+    slug: '',
+    description: '',
+    imageUrl: '',
+    basePrice: '0',
+    isActive: true,
+  });
+
+  const loadProducts = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await apiFetch<Product[]>('/admin/products');
+      setProducts(data);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '載入商品失敗');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProducts();
+  }, [loadProducts]);
+
+  async function handleCreate(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError('');
+
+    const payload = {
+      name: form.name.trim(),
+      slug: form.slug.trim(),
+      description: form.description.trim() || undefined,
+      imageUrl: form.imageUrl.trim() || undefined,
+      basePrice: toNumber(form.basePrice),
+    };
+
+    if (!payload.name || !payload.slug || Number.isNaN(payload.basePrice) || payload.basePrice < 0) {
+      setError('請填寫名稱、slug 且售價需為非負整數');
+      return;
+    }
+
+    try {
+      await apiFetch<Product>('/admin/products', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+      setForm({
+        name: '',
+        slug: '',
+        description: '',
+        imageUrl: '',
+        basePrice: '0',
+      });
+      await loadProducts();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '建立商品失敗');
+    }
+  }
+
+  function startEdit(product: Product) {
+    setEditingId(product.id);
+    setEditing({
+      name: product.name,
+      slug: product.slug,
+      description: product.description ?? '',
+      imageUrl: product.imageUrl ?? '',
+      basePrice: String(product.basePrice),
+      isActive: product.isActive,
+    });
+  }
+
+  async function handleUpdate(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!editingId) return;
+    setError('');
+
+    const basePrice = toNumber(editing.basePrice);
+    if (!editing.name.trim() || !editing.slug.trim() || Number.isNaN(basePrice) || basePrice < 0) {
+      setError('請填寫名稱、slug 且售價需為非負整數');
+      return;
+    }
+
+    try {
+      await apiFetch<Product>(`/admin/products/${editingId}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          name: editing.name.trim(),
+          slug: editing.slug.trim(),
+          description: editing.description.trim() || null,
+          imageUrl: editing.imageUrl.trim() || null,
+          basePrice,
+          isActive: editing.isActive,
+        }),
+      });
+      setEditingId(null);
+      await loadProducts();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '更新商品失敗');
+    }
+  }
+
+  async function handleDelete(productId: string) {
+    setError('');
+    if (!confirm('要刪除這筆商品？')) return;
+    try {
+      await apiFetch<unknown>(`/admin/products/${productId}`, {
+        method: 'DELETE',
+      });
+      await loadProducts();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '刪除商品失敗');
+    }
+  }
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>商品管理</h1>
+      <Link href="/admin">回後台首頁</Link>
+      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
+      {loading ? <p>載入中...</p> : null}
+
+      <section style={{ marginBottom: 24 }}>
+        <h2>新增商品</h2>
+        <form onSubmit={handleCreate} style={{ display: 'grid', gap: 8, maxWidth: 540 }}>
+          <input
+            value={form.name}
+            onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
+            placeholder="商品名稱"
+          />
+          <input
+            value={form.slug}
+            onChange={(event) => setForm((prev) => ({ ...prev, slug: event.target.value }))}
+            placeholder="slug（唯一）"
+          />
+          <input
+            value={form.description}
+            onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
+            placeholder="描述"
+          />
+          <input
+            value={form.imageUrl}
+            onChange={(event) => setForm((prev) => ({ ...prev, imageUrl: event.target.value }))}
+            placeholder="圖片網址（可空）"
+          />
+          <input
+            value={form.basePrice}
+            onChange={(event) => setForm((prev) => ({ ...prev, basePrice: event.target.value }))}
+            type="number"
+            min={0}
+            placeholder="售價"
+          />
+          <button type="submit">建立商品</button>
+        </form>
+      </section>
+
+      <section style={{ borderTop: '1px solid #ddd', paddingTop: 20 }}>
+        <h2>商品清單</h2>
+        {products.length === 0 ? (
+          <p>目前無商品</p>
+        ) : (
+          products.map((product) => (
+            <article
+              key={product.id}
+              style={{
+                border: '1px solid #ddd',
+                borderRadius: 10,
+                padding: 12,
+                marginBottom: 12,
+              }}
+            >
+              <h3>
+                {product.name}
+                {' '}
+                ({product.slug})
+              </h3>
+              <p>售價：NT$ {product.basePrice}</p>
+              <p>描述：{product.description || '-'}</p>
+              <p>狀態：{product.isActive ? '啟用' : '停用'}</p>
+              <p>預設規格數：{product.variants.length}</p>
+              <ul>
+                {product.variants.map((variant) => (
+                  <li key={variant.id}>
+                    {variant.name} / {variant.size || '-'} / NT$ {variant.price} / SKU:
+                    {variant.sku} / 庫存 {variant.inventory?.quantity ?? 0}
+                  </li>
+                ))}
+              </ul>
+
+              {editingId === product.id ? (
+                <form onSubmit={handleUpdate} style={{ display: 'grid', gap: 8, marginTop: 12 }}>
+                  <h4>編輯這筆商品</h4>
+                  <input
+                    value={editing.name}
+                    onChange={(event) => setEditing((prev) => ({ ...prev, name: event.target.value }))}
+                    placeholder="商品名稱"
+                  />
+                  <input
+                    value={editing.slug}
+                    onChange={(event) => setEditing((prev) => ({ ...prev, slug: event.target.value }))}
+                    placeholder="slug"
+                  />
+                  <input
+                    value={editing.description}
+                    onChange={(event) =>
+                      setEditing((prev) => ({ ...prev, description: event.target.value }))
+                    }
+                    placeholder="描述"
+                  />
+                  <input
+                    value={editing.imageUrl}
+                    onChange={(event) => setEditing((prev) => ({ ...prev, imageUrl: event.target.value }))}
+                    placeholder="圖片網址"
+                  />
+                  <input
+                    value={editing.basePrice}
+                    onChange={(event) =>
+                      setEditing((prev) => ({ ...prev, basePrice: event.target.value }))
+                    }
+                    type="number"
+                    min={0}
+                    placeholder="售價"
+                  />
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={editing.isActive}
+                      onChange={(event) =>
+                        setEditing((prev) => ({ ...prev, isActive: event.target.checked }))
+                      }
+                    />
+                    啟用
+                  </label>
+                  <div style={{ display: 'flex', gap: 8 }}>
+                    <button type="submit">儲存</button>
+                    <button type="button" onClick={() => setEditingId(null)}>
+                      取消
+                    </button>
+                  </div>
+                </form>
+              ) : (
+                <div style={{ display: 'flex', gap: 8 }}>
+                  <button type="button" onClick={() => startEdit(product)}>
+                    編輯
+                  </button>
+                  <button type="button" onClick={() => void handleDelete(product.id)}>
+                    刪除
+                  </button>
+                </div>
+              )}
+            </article>
+          ))
+        )}
+      </section>
+    </main>
+  );
+}
diff --git a/apps/admin/src/lib/api.ts b/apps/admin/src/lib/api.ts
new file mode 100644
index 0000000..ee57c2d
--- /dev/null
+++ b/apps/admin/src/lib/api.ts
@@ -0,0 +1,23 @@
+export const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:4000/api';
+
+export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init?.headers || {}),
+    },
+    ...init,
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(text || `API error: ${response.status}`);
+  }
+
+  if (response.status === 204) {
+    return {} as T;
+  }
+
+  return response.json() as Promise<T>;
+}
diff --git a/apps/admin/tsconfig.json b/apps/admin/tsconfig.json
new file mode 100644
index 0000000..5aec35a
--- /dev/null
+++ b/apps/admin/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/api/.env.example b/apps/api/.env.example
new file mode 100644
index 0000000..b7ddfee
--- /dev/null
+++ b/apps/api/.env.example
@@ -0,0 +1,2 @@
+PORT=4000
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/vtuber
diff --git a/apps/api/.eslintrc.json b/apps/api/.eslintrc.json
new file mode 100644
index 0000000..c0bb97d
--- /dev/null
+++ b/apps/api/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "parserOptions": {
+    "project": ["./tsconfig.json"]
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"]
+}
diff --git a/apps/api/Dockerfile b/apps/api/Dockerfile
new file mode 100644
index 0000000..421221d
--- /dev/null
+++ b/apps/api/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:20
+WORKDIR /app
+
+COPY package.json ./
+COPY tsconfig.base.json ./
+COPY packages ./packages
+COPY apps/api ./apps/api
+
+RUN npm install
+RUN npm run db:generate -w packages/db
+RUN npm run build:api
+
+ENV NODE_ENV=production
+EXPOSE 4000
+CMD ["npm","run","start","-w","apps/api"]
diff --git a/apps/api/nest-cli.json b/apps/api/nest-cli.json
new file mode 100644
index 0000000..c8c967d
--- /dev/null
+++ b/apps/api/nest-cli.json
@@ -0,0 +1,8 @@
+{
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "assets": ["**/*.json"],
+    "watchAssets": true
+  }
+}
diff --git a/apps/api/package.json b/apps/api/package.json
new file mode 100644
index 0000000..a1da540
--- /dev/null
+++ b/apps/api/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@vtuber/api",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "start": "node dist/main.js",
+    "build": "tsc -p tsconfig.build.json",
+    "start:dev": "ts-node -r tsconfig-paths/register src/main.ts",
+    "lint": "eslint '{src,test}/**/*.ts' --fix",
+    "test": "echo \"No tests yet\""
+  },
+  "dependencies": {
+    "@nestjs/common": "^10.3.0",
+    "@nestjs/config": "^3.1.1",
+    "@nestjs/core": "^10.3.0",
+    "@nestjs/platform-express": "^10.3.0",
+    "@vtuber/db": "*",
+    "@prisma/client": "^5.18.0",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "tsconfig-paths": "^4.2.0",
+    "prisma": "^5.18.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.0"
+  }
+}
diff --git a/apps/api/src/app.controller.ts b/apps/api/src/app.controller.ts
new file mode 100644
index 0000000..6246828
--- /dev/null
+++ b/apps/api/src/app.controller.ts
@@ -0,0 +1,494 @@
+import {
+  BadRequestException,
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  Post,
+  Put,
+  Patch,
+  Query,
+} from '@nestjs/common';
+import { AppService } from './app.service';
+
+type OrderStatus = 'PENDING' | 'PAID' | 'SHIPPED' | 'CANCELLED';
+type LiveRoomStatus = 'PLANNING' | 'LIVE' | 'FINISHED' | 'CANCELLED';
+type TeamRole =
+  | 'HOST'
+  | 'PRODUCER'
+  | 'DIRECTOR'
+  | 'EDITOR'
+  | 'SUPPORT'
+  | 'WAREHOUSE'
+  | 'MARKETING'
+  | 'OPERATOR';
+
+@Controller()
+export class AppController {
+  constructor(private readonly appService: AppService) {}
+
+  @Get('health')
+  health() {
+    return this.appService.health();
+  }
+
+  @Get('products')
+  async listProducts() {
+    return this.appService.listProducts();
+  }
+
+  @Get('products/:id')
+  async getProduct(@Param('id') id: string) {
+    const product = await this.appService.getProduct(id);
+    if (!product) {
+      throw new BadRequestException('找不到商品');
+    }
+    return product;
+  }
+
+  @Get('live-rooms')
+  async listLiveRooms() {
+    return this.appService.listLiveRooms();
+  }
+
+  @Get('live-rooms/:id/messages')
+  async listLiveMessages(
+    @Param('id') id: string,
+    @Query('limit') limit?: string,
+  ) {
+    const parsedLimit = Number(limit ?? 30);
+    const validLimit = Number.isNaN(parsedLimit) ? 30 : parsedLimit;
+    return this.appService.listLiveMessages(id, validLimit);
+  }
+
+  @Get('live-rooms/:id/operations')
+  async getLiveRoomOperations(@Param('id') id: string) {
+    return this.appService.getLiveRoomOperations(id);
+  }
+
+  @Post('live-rooms/:id/messages')
+  async postLiveMessage(
+    @Param('id') id: string,
+    @Body()
+    body: {
+      userName?: string;
+      message?: string;
+      productVariantId?: string;
+    },
+  ) {
+    const userName = body.userName?.trim() ?? '';
+    const message = body.message?.trim() ?? '';
+    if (!userName || !message) {
+      throw new BadRequestException('userName 與 message 是必要欄位');
+    }
+
+    return this.appService.postLiveMessage({
+      liveRoomId: id,
+      userName,
+      message,
+      productVariantId: body.productVariantId?.trim(),
+    });
+  }
+
+  @Get('admin/team-members')
+  async listTeamMembers() {
+    return this.appService.listTeamMembers();
+  }
+
+  @Post('admin/team-members')
+  async createTeamMember(
+    @Body()
+    body: {
+      displayName?: string;
+      role?: TeamRole;
+      nickname?: string;
+      phone?: string;
+      email?: string;
+      notes?: string;
+    },
+  ) {
+    const displayName = body.displayName?.trim();
+    if (!displayName || !body.role) {
+      throw new BadRequestException('displayName 與 role 是必要欄位');
+    }
+
+    const result = await this.appService.createTeamMember({
+      displayName,
+      role: body.role,
+      nickname: body.nickname?.trim(),
+      phone: body.phone?.trim(),
+      email: body.email?.trim(),
+      notes: body.notes?.trim(),
+    });
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Delete('admin/team-members/:id')
+  async deleteTeamMember(@Param('id') id: string) {
+    return this.appService.removeTeamMember(id);
+  }
+
+  @Get('admin/products')
+  async listAdminProducts() {
+    return this.appService.listAdminProducts();
+  }
+
+  @Post('admin/products')
+  async createProduct(
+    @Body()
+    body: {
+      name: string;
+      slug: string;
+      description?: string;
+      imageUrl?: string;
+      basePrice: number;
+      liveRoomId?: string | null;
+      variants?: Array<{
+        sku: string;
+        name: string;
+        size?: string | null;
+        price: number;
+        stock: number;
+      }>;
+    },
+  ) {
+    if (!body?.name?.trim() || !body?.slug?.trim()) {
+      throw new BadRequestException('name/slug/basePrice 為必要欄位');
+    }
+    const basePrice = Number(body.basePrice);
+    if (Number.isNaN(basePrice) || basePrice < 0) {
+      throw new BadRequestException('basePrice 必須是非負數');
+    }
+
+    return this.appService.createProduct({
+      name: body.name,
+      slug: body.slug,
+      description: body.description,
+      imageUrl: body.imageUrl,
+      basePrice,
+      liveRoomId: body.liveRoomId ?? null,
+      variants: body.variants,
+    });
+  }
+
+  @Put('admin/products/:id')
+  async updateProduct(
+    @Param('id') id: string,
+    @Body()
+    body: {
+      name?: string;
+      slug?: string;
+      description?: string | null;
+      imageUrl?: string | null;
+      basePrice?: number;
+      isActive?: boolean;
+      liveRoomId?: string | null;
+    },
+  ) {
+    return this.appService.updateProduct(id, body);
+  }
+
+  @Delete('admin/products/:id')
+  async deleteProduct(@Param('id') id: string) {
+    return this.appService.deleteProduct(id);
+  }
+
+  @Get('admin/orders')
+  async listAdminOrders() {
+    return this.appService.listAdminOrders();
+  }
+
+  @Patch('admin/orders/:id/status')
+  async updateOrderStatus(
+    @Param('id') id: string,
+    @Body() body: { status: string },
+  ) {
+    const normalizedStatus = body.status?.toUpperCase();
+    if (
+      !normalizedStatus ||
+      !(['PENDING', 'PAID', 'SHIPPED', 'CANCELLED'] as const).includes(
+        normalizedStatus as OrderStatus,
+      )
+    ) {
+      throw new BadRequestException('status 僅能為 PENDING/PAID/SHIPPED/CANCELLED');
+    }
+
+    return this.appService.updateOrderStatus(id, normalizedStatus as OrderStatus);
+  }
+
+  @Get('admin/inventories')
+  async listInventories() {
+    return this.appService.listInventories();
+  }
+
+  @Put('admin/inventories/:variantId')
+  async updateInventory(
+    @Param('variantId') variantId: string,
+    @Body() body: { quantity: number },
+  ) {
+    const quantity = Number(body.quantity);
+    if (Number.isNaN(quantity)) {
+      throw new BadRequestException('quantity 必須為數字');
+    }
+    const result = await this.appService.updateInventory(variantId, quantity);
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Get('admin/live-rooms/:id/operations')
+  async getLiveRoomOperationsAdmin(@Param('id') id: string) {
+    return this.appService.getLiveRoomOperations(id);
+  }
+
+  @Post('admin/live-rooms/:id/operations/assignments')
+  async createLiveRoomAssignment(
+    @Param('id') id: string,
+    @Body()
+    body: {
+      teamMemberId?: string;
+      role?: TeamRole;
+      isPrimary?: boolean;
+      shiftStartAt?: string;
+      shiftEndAt?: string;
+      note?: string;
+    },
+  ) {
+    if (!body.teamMemberId || !body.role) {
+      throw new BadRequestException('teamMemberId 與 role 是必要欄位');
+    }
+
+    const result = await this.appService.createLiveRoomAssignment(id, {
+      teamMemberId: body.teamMemberId,
+      role: body.role,
+      isPrimary: !!body.isPrimary,
+      shiftStartAt: body.shiftStartAt,
+      shiftEndAt: body.shiftEndAt,
+      note: body.note?.trim(),
+    });
+
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Delete('admin/live-rooms/:id/operations/assignments/:assignmentId')
+  async removeLiveRoomAssignment(
+    @Param('id') liveRoomId: string,
+    @Param('assignmentId') assignmentId: string,
+  ) {
+    return this.appService.removeLiveRoomAssignment(liveRoomId, assignmentId);
+  }
+
+  @Patch('admin/live-rooms/:id/status')
+  async updateLiveRoomStatus(
+    @Param('id') id: string,
+    @Body() body: { status?: LiveRoomStatus },
+  ) {
+    if (!body.status) {
+      throw new BadRequestException('status 是必要欄位');
+    }
+    const result = await this.appService.updateLiveRoomStatus(id, body.status);
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Post('admin/live-rooms/:id/operations/scripts')
+  async createLiveRoomScript(
+    @Param('id') id: string,
+    @Body()
+    body: {
+      sequence?: number;
+      cue?: string;
+      title?: string;
+      content?: string;
+      ownerRole?: TeamRole;
+      targetProductId?: string;
+    },
+  ) {
+    const payload = {
+      sequence: Number(body.sequence ?? 0),
+      cue: body.cue?.trim(),
+      title: body.title?.trim() ?? '',
+      content: body.content?.trim() ?? '',
+      ownerRole: body.ownerRole,
+      targetProductId: body.targetProductId?.trim(),
+    };
+
+    if (!payload.title || !payload.content) {
+      throw new BadRequestException('title/content 是必要欄位');
+    }
+    if (Number.isNaN(payload.sequence) || payload.sequence <= 0) {
+      throw new BadRequestException('sequence 必須是正整數');
+    }
+
+    const result = await this.appService.createLiveRoomScript(id, payload);
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Patch('admin/live-ops/scripts/:id')
+  async updateLiveRoomScript(
+    @Param('id') id: string,
+    @Body()
+    body: {
+      sequence?: number;
+      cue?: string;
+      title?: string;
+      content?: string;
+      ownerRole?: TeamRole;
+      targetProductId?: string;
+      isDone?: boolean;
+    },
+  ) {
+    const result = await this.appService.updateLiveRoomScript(id, {
+      sequence: body.sequence,
+      cue: body.cue?.trim(),
+      title: body.title?.trim(),
+      content: body.content?.trim(),
+      ownerRole: body.ownerRole,
+      targetProductId: body.targetProductId?.trim(),
+      isDone: body.isDone,
+    });
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Post('admin/live-rooms/:id/operations/checklists')
+  async createLiveRoomChecklistItem(
+    @Param('id') id: string,
+    @Body()
+    body: {
+      title?: string;
+      ownerRole?: TeamRole;
+      description?: string;
+      isRequired?: boolean;
+      note?: string;
+    },
+  ) {
+    const title = body.title?.trim() ?? '';
+    const ownerRole = body.ownerRole;
+    if (!title || !ownerRole) {
+      throw new BadRequestException('title/ownerRole 是必要欄位');
+    }
+
+    const payload = {
+      title,
+      description: body.description?.trim(),
+      isRequired: body.isRequired ?? true,
+      note: body.note?.trim(),
+      ownerRole,
+    };
+
+    const result = await this.appService.createLiveRoomChecklistItem(id, payload);
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Patch('admin/live-ops/checklists/:id')
+  async updateLiveRoomChecklistItem(
+    @Param('id') id: string,
+    @Body() body: { isDone?: boolean },
+  ) {
+    const result = await this.appService.updateLiveRoomChecklistItem(id, {
+      isDone: body.isDone,
+    });
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Get('cart')
+  async getCart(@Query('sessionId') sessionId: string) {
+    return this.appService.getCartBySession(sessionId);
+  }
+
+  @Post('cart/items')
+  async addCartItem(
+    @Body()
+    body: {
+      sessionId?: string;
+      productVariantId?: string;
+      quantity?: number;
+    },
+  ) {
+    if (!body?.sessionId) {
+      throw new BadRequestException('sessionId 是必要參數');
+    }
+    if (!body?.productVariantId) {
+      throw new BadRequestException('productVariantId 是必要參數');
+    }
+    const quantity = Number(body.quantity ?? 1);
+    if (Number.isNaN(quantity) || quantity <= 0) {
+      throw new BadRequestException('quantity 需為正整數');
+    }
+
+    const result = await this.appService.addCartItem({
+      sessionId: body.sessionId,
+      productVariantId: body.productVariantId,
+      quantity,
+    });
+
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Delete('cart/items/:id')
+  async removeCartItem(@Param('id') id: string) {
+    return this.appService.removeCartItem(id);
+  }
+
+  @Post('checkout')
+  async checkout(@Body() body: { sessionId?: string; liveRoomId?: string }) {
+    if (!body?.sessionId) {
+      throw new BadRequestException('sessionId 是必要參數');
+    }
+    const result = await this.appService.createMockCheckout({
+      sessionId: body.sessionId,
+      liveRoomId: body.liveRoomId,
+    });
+    if (!result.ok) {
+      throw new BadRequestException(result.message);
+    }
+    return result;
+  }
+
+  @Post('ai/product-chat')
+  async productChat(
+    @Body()
+    body: {
+      userMessage?: string;
+      currentProductId?: string;
+      liveRoomId?: string;
+    },
+  ) {
+    if (!body?.userMessage?.trim()) {
+      throw new BadRequestException('userMessage 是必要參數');
+    }
+
+    const result = await this.appService.answerProductChat({
+      userMessage: body.userMessage,
+      currentProductId: body.currentProductId,
+      liveRoomId: body.liveRoomId,
+    });
+
+    return result;
+  }
+}
diff --git a/apps/api/src/app.module.ts b/apps/api/src/app.module.ts
new file mode 100644
index 0000000..43bd994
--- /dev/null
+++ b/apps/api/src/app.module.ts
@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { ConfigModule } from '@nestjs/config';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+import { DatabaseModule } from './database/database.module';
+
+@Module({
+  imports: [ConfigModule.forRoot({ isGlobal: true }), DatabaseModule],
+  controllers: [AppController],
+  providers: [AppService],
+})
+export class AppModule {}
diff --git a/apps/api/src/app.service.ts b/apps/api/src/app.service.ts
new file mode 100644
index 0000000..fa6b597
--- /dev/null
+++ b/apps/api/src/app.service.ts
@@ -0,0 +1,1219 @@
+import { BadRequestException, Injectable } from '@nestjs/common';
+import { PrismaService } from './database/prisma.service';
+import { Prisma } from '@prisma/client';
+
+type OrderStatus = 'PENDING' | 'PAID' | 'SHIPPED' | 'CANCELLED';
+type LiveRoomStatus = 'PLANNING' | 'LIVE' | 'FINISHED' | 'CANCELLED';
+type TeamRole =
+  | 'HOST'
+  | 'PRODUCER'
+  | 'DIRECTOR'
+  | 'EDITOR'
+  | 'SUPPORT'
+  | 'WAREHOUSE'
+  | 'MARKETING'
+  | 'OPERATOR';
+
+type CheckoutVariant = {
+  product: {
+    name: string;
+  };
+  price: number;
+};
+
+type CheckoutVariantWithInventory = CheckoutVariant & {
+  inventory: {
+    id: string;
+    quantity: number;
+  };
+};
+
+type CheckoutCartItem = {
+  productVariantId: string;
+  quantity: number;
+  variant: CheckoutVariant;
+};
+
+type LiveRoomWithOperations = {
+  id: string;
+  title: string;
+  hostName: string;
+  status: string;
+  streamUrl: string | null;
+  liveGoal: string | null;
+  plannedStartAt: Date | null;
+  plannedEndAt: Date | null;
+  startedAt: Date | null;
+  endedAt: Date | null;
+  assignments: Array<{
+    id: string;
+    role: TeamRole;
+    isPrimary: boolean;
+    shiftStartAt: Date | null;
+    shiftEndAt: Date | null;
+    note: string | null;
+    teamMember: {
+      id: string;
+      displayName: string;
+      phone: string | null;
+      email: string | null;
+      role: TeamRole;
+    };
+  }>;
+  scripts: Array<{
+    id: string;
+    sequence: number;
+    cue: string | null;
+    title: string;
+    content: string;
+    ownerRole: TeamRole | null;
+    targetProductId: string | null;
+    isDone: boolean;
+  }>;
+  checklists: Array<{
+    id: string;
+    title: string;
+    ownerRole: TeamRole;
+    description: string | null;
+    isRequired: boolean;
+    isDone: boolean;
+    note: string | null;
+  }>;
+};
+
+type CheckoutCartPayload = {
+  id: string;
+  items: CheckoutCartItem[];
+};
+
+type CheckoutResult =
+  | { ok: false; message: string }
+  | {
+      ok: true;
+      order: {
+        id: string;
+        orderNumber: string;
+        totalAmount: number;
+        status: string;
+      };
+      message?: never;
+    };
+
+type ProductChatResult = {
+  reply: string;
+};
+
+type ProductChatRequest = {
+  userMessage: string;
+  currentProductId?: string;
+  liveRoomId?: string;
+};
+
+type ProductChatKeyword =
+  | 'PRICE'
+  | 'STOCK'
+  | 'SIZE'
+  | 'SHIPPING'
+  | 'GENERAL';
+
+type OperationSnapshot = {
+  room: {
+    id: string;
+    title: string;
+    hostName: string;
+    status: string;
+    streamUrl: string | null;
+    liveGoal: string | null;
+    plannedStartAt: Date | null;
+    plannedEndAt: Date | null;
+    startedAt: Date | null;
+    endedAt: Date | null;
+  };
+  assignments: Array<{
+    id: string;
+    role: TeamRole;
+    isPrimary: boolean;
+    shiftStartAt: Date | null;
+    shiftEndAt: Date | null;
+    note: string | null;
+    teamMember: {
+      id: string;
+      displayName: string;
+      phone: string | null;
+      email: string | null;
+      role: TeamRole;
+    };
+  }>;
+  scripts: Array<{
+    id: string;
+    sequence: number;
+    cue: string | null;
+    title: string;
+    content: string;
+    ownerRole: TeamRole | null;
+    targetProductId: string | null;
+    isDone: boolean;
+  }>;
+  checklists: Array<{
+    id: string;
+    title: string;
+    ownerRole: TeamRole;
+    description: string | null;
+    isRequired: boolean;
+    isDone: boolean;
+    note: string | null;
+  }>;
+};
+
+const TEAM_ROLES: TeamRole[] = [
+  'HOST',
+  'PRODUCER',
+  'DIRECTOR',
+  'EDITOR',
+  'SUPPORT',
+  'WAREHOUSE',
+  'MARKETING',
+  'OPERATOR',
+];
+
+const LIVE_ROOM_STATUS_SET: Set<LiveRoomStatus> = new Set([
+  'PLANNING',
+  'LIVE',
+  'FINISHED',
+  'CANCELLED',
+]);
+
+@Injectable()
+export class AppService {
+  constructor(private readonly prisma: PrismaService) {}
+
+  health() {
+    return {
+      status: 'ok',
+      service: 'VTuber API',
+      now: new Date().toISOString(),
+    };
+  }
+
+  async listProducts() {
+    return this.prisma.product.findMany({
+      include: {
+        variants: {
+          include: {
+            inventory: true,
+          },
+          orderBy: { createdAt: 'asc' },
+        },
+      },
+      orderBy: { createdAt: 'asc' },
+    });
+  }
+
+  async listAdminProducts() {
+    return this.prisma.product.findMany({
+      include: {
+        variants: {
+          include: {
+            inventory: true,
+          },
+          orderBy: { createdAt: 'asc' },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+  }
+
+  async createProduct(payload: {
+    name: string;
+    slug: string;
+    description?: string;
+    imageUrl?: string;
+    basePrice: number;
+    liveRoomId?: string | null;
+    variants?: Array<{
+      sku: string;
+      name: string;
+      size?: string | null;
+      price: number;
+      stock: number;
+    }>;
+  }) {
+    const preparedVariants = (payload.variants?.length
+      ? payload.variants
+      : [
+          {
+            sku: `VT-${Math.random().toString(36).slice(2, 8).toUpperCase()}`,
+            name: '標準款',
+            size: null,
+            price: payload.basePrice,
+            stock: 50,
+          },
+        ]
+    ).map((variant) => ({
+      sku: variant.sku,
+      name: variant.name,
+      size: variant.size ?? null,
+      price: variant.price,
+      inventory: {
+        create: {
+          quantity: variant.stock,
+          reserved: 0,
+        },
+      },
+    }));
+
+    return this.prisma.product.create({
+      data: {
+        name: payload.name,
+        slug: payload.slug,
+        description: payload.description ?? null,
+        imageUrl: payload.imageUrl ?? null,
+        basePrice: payload.basePrice,
+        liveRoomId: payload.liveRoomId ?? null,
+        variants: {
+          create: preparedVariants,
+        },
+      },
+      include: {
+        variants: {
+          include: { inventory: true },
+        },
+      },
+    });
+  }
+
+  async updateProduct(
+    id: string,
+    payload: {
+      name?: string;
+      slug?: string;
+      description?: string | null;
+      imageUrl?: string | null;
+      basePrice?: number;
+      isActive?: boolean;
+      liveRoomId?: string | null;
+    },
+  ) {
+    return this.prisma.product.update({
+      where: { id },
+      data: {
+        ...(payload.name !== undefined ? { name: payload.name } : {}),
+        ...(payload.slug !== undefined ? { slug: payload.slug } : {}),
+        ...(payload.description !== undefined ? { description: payload.description } : {}),
+        ...(payload.imageUrl !== undefined ? { imageUrl: payload.imageUrl } : {}),
+        ...(payload.basePrice !== undefined ? { basePrice: payload.basePrice } : {}),
+        ...(payload.isActive !== undefined ? { isActive: payload.isActive } : {}),
+        ...(payload.liveRoomId !== undefined ? { liveRoomId: payload.liveRoomId } : {}),
+      },
+    });
+  }
+
+  async deleteProduct(id: string) {
+    await this.prisma.product.delete({ where: { id } });
+    return { ok: true };
+  }
+
+  async getProduct(idOrSlug: string) {
+    const product = await this.prisma.product.findFirst({
+      where: {
+        OR: [
+          { id: idOrSlug },
+          { slug: idOrSlug },
+        ],
+      },
+      include: {
+        variants: {
+          include: {
+            inventory: true,
+          },
+          orderBy: { createdAt: 'asc' },
+        },
+      },
+    });
+
+    if (!product) {
+      return null;
+    }
+
+    return product;
+  }
+
+  async listLiveRooms() {
+    return this.prisma.liveRoom.findMany({
+      orderBy: { createdAt: 'desc' },
+    });
+  }
+
+  async answerProductChat(payload: ProductChatRequest): Promise<ProductChatResult> {
+    const userMessage = payload.userMessage.trim();
+    let product = null;
+
+    if (payload.currentProductId) {
+      product = await this.prisma.product.findFirst({
+        where: {
+          OR: [
+            { id: payload.currentProductId },
+            { slug: payload.currentProductId },
+          ],
+        },
+        include: {
+          variants: {
+            include: {
+              inventory: true,
+            },
+            orderBy: { createdAt: 'asc' },
+          },
+        },
+      });
+    }
+
+    const lowerMessage = userMessage.toLowerCase();
+    const intent = this.detectProductChatIntent(lowerMessage);
+    const answer = this.renderHostReply(intent, userMessage, product, payload.liveRoomId);
+    return { reply: answer };
+  }
+
+  private detectProductChatIntent(message: string): ProductChatKeyword {
+    if (/(價格|價錢|花費|賣價|多少|多少錢|NT\$|新台幣)/.test(message)) {
+      return 'PRICE';
+    }
+    if (/(庫存|存貨|還有|有幾|剩多少|剩下|斷貨|有貨|補貨)/.test(message)) {
+      return 'STOCK';
+    }
+    if (/(尺寸|size|規格|多少號|號碼|尺碼|size)/.test(message)) {
+      return 'SIZE';
+    }
+    if (/(運送|運費|物流|宅配|到貨|配送|運輸|多久|幾天)/.test(message)) {
+      return 'SHIPPING';
+    }
+    return 'GENERAL';
+  }
+
+  private renderHostReply(
+    intent: ProductChatKeyword,
+    message: string,
+    product: {
+      name: string;
+      basePrice: number;
+      variants: Array<{
+        name: string;
+        size: string | null;
+        price: number;
+        inventory: {
+          quantity: number;
+        } | null;
+      }>;
+    } | null,
+    liveRoomId?: string,
+  ) {
+    if (!product) {
+      const liveHint = liveRoomId
+        ? '我先幫你對應到直播間中的主打商品給你報價。'
+        : '可以先告訴我你想看的商品名稱，我就能直接回報精準數字。';
+      return `主播在這裡！${liveHint} 目前都還有人氣爆滿，建議你直接點「加入購物車」或「立即購買」先鎖定。`;
+    }
+
+    const sizeList = product.variants.length > 0
+      ? product.variants
+          .map((variant) => `${variant.name}${variant.size ? `（${variant.size}）` : ''}`)
+          .join('、')
+      : '尚未建立規格';
+    const totalStock = product.variants.reduce(
+      (acc, variant) => acc + (variant.inventory?.quantity ?? 0),
+      0,
+    );
+
+    switch (intent) {
+      case 'PRICE':
+        return `哈囉，這款「${product.name}」目前直播價是 NT$ ${product.basePrice} 起，主播限定你現在下單可直接享有現場折扣感覺！立即購買可直接跳過猶豫時間。`;
+      case 'STOCK':
+        return `這款「${product.name}」目前直播庫存是 ${totalStock} 件（即時庫存，會隨著下單即時扣除），要快點哦，直播間每分鐘都很夠快啦！`;
+      case 'SIZE':
+        return `你問得很好，這裡有 ${product.name} 的規格：${sizeList}。你這題很適合直接用「直接加到購物車」先試著看實際商品頁細節，主播再幫你追蹤！`;
+      case 'SHIPPING':
+        return `關於運送：通常採宅配，現場訂單一般 24 小時內備貨、2-3 天可到（台灣本島時段），節慶時段可能有波動，建議你今晚先下單可最晚今晚晚點開始出貨。`;
+      default:
+        return `感謝 ${message}，我來幫你解答：${product.name} 目前售價 NT$ ${product.basePrice}，庫存 ${totalStock}，主推規格為 ${sizeList}。你要不要直接按「立即購買」體驗無縫完成？`;
+    }
+  }
+
+  async listLiveMessages(liveRoomId: string, limit = 30) {
+    return this.prisma.liveMessage.findMany({
+      where: { liveRoomId },
+      orderBy: { createdAt: 'desc' },
+      take: Math.min(Math.max(limit, 1), 100),
+    });
+  }
+
+  async postLiveMessage(payload: {
+    liveRoomId: string;
+    userName: string;
+    message: string;
+    productVariantId?: string;
+  }) {
+    const trimmedName = payload.userName.trim();
+    const trimmedMessage = payload.message.trim();
+    if (!trimmedName || !trimmedMessage) {
+      throw new BadRequestException('userName 與 message 都是必要欄位');
+    }
+
+    const room = await this.prisma.liveRoom.findUnique({
+      where: { id: payload.liveRoomId },
+    });
+    if (!room) {
+      throw new BadRequestException('直播間不存在');
+    }
+
+    if (payload.productVariantId) {
+      const variant = await this.prisma.productVariant.findUnique({
+        where: { id: payload.productVariantId },
+      });
+      if (!variant) {
+        throw new BadRequestException('商品規格不存在');
+      }
+    }
+
+    return this.prisma.liveMessage.create({
+      data: {
+        liveRoomId: payload.liveRoomId,
+        userName: trimmedName,
+        message: trimmedMessage,
+        productVariantId: payload.productVariantId ?? null,
+      },
+    });
+  }
+
+  async listAdminOrders() {
+    return this.prisma.order.findMany({
+      include: {
+        liveRoom: {
+          select: {
+            id: true,
+            title: true,
+          },
+        },
+        items: {
+          include: {
+            variant: {
+              include: {
+                product: true,
+              },
+            },
+          },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+  }
+
+  async updateOrderStatus(orderId: string, status: OrderStatus) {
+    return this.prisma.order.update({
+      where: { id: orderId },
+      data: { status },
+    });
+  }
+
+  async listInventories() {
+    return this.prisma.productVariant.findMany({
+      include: {
+        product: {
+          select: { id: true, name: true, slug: true },
+        },
+        inventory: true,
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+  }
+
+  async updateInventory(productVariantId: string, quantity: number) {
+    const stock = Number(quantity);
+    if (Number.isNaN(stock) || stock < 0) {
+      throw new BadRequestException('庫存必須是非負數');
+    }
+
+    const variant = await this.prisma.productVariant.findUnique({
+      where: { id: productVariantId },
+      include: { inventory: true },
+    });
+    if (!variant) {
+      return { ok: false, message: '找不到變體' };
+    }
+
+    if (!variant.inventory) {
+      await this.prisma.inventory.create({
+        data: {
+          productVariantId,
+          quantity: stock,
+          reserved: 0,
+        },
+      });
+      return { ok: true };
+    }
+
+    await this.prisma.inventory.update({
+      where: { id: variant.inventory.id },
+      data: { quantity: stock },
+    });
+    return { ok: true };
+  }
+
+  async getCartBySession(sessionId: string) {
+    if (!sessionId) {
+      return {
+        id: '',
+        items: [],
+      };
+    }
+
+    const cart = await this.prisma.cart.findFirst({
+      where: { sessionId },
+      include: {
+        items: {
+          include: {
+            variant: {
+              include: {
+                product: true,
+                inventory: true,
+              },
+            },
+          },
+          orderBy: { createdAt: 'asc' },
+        },
+      },
+    });
+
+    if (!cart) {
+      return {
+        id: '',
+        items: [],
+      };
+    }
+
+    return cart;
+  }
+
+  async addCartItem(payload: {
+    sessionId: string;
+    productVariantId: string;
+    quantity: number;
+  }) {
+    const { sessionId, productVariantId, quantity } = payload;
+
+    const variant = await this.prisma.productVariant.findUnique({
+      where: { id: productVariantId },
+      include: { product: true, inventory: true },
+    });
+
+    if (!variant) {
+      return { ok: false, message: '商品變體不存在' };
+    }
+
+    const existingCart = await this.prisma.cart.findFirst({
+      where: { sessionId },
+      include: { items: true },
+    });
+    const cart = existingCart
+      ? existingCart
+      : await this.prisma.cart.create({
+          data: { sessionId },
+          include: { items: true },
+        });
+
+    const stock = variant.inventory?.quantity ?? 0;
+    const existing = await this.prisma.cartItem.findUnique({
+      where: {
+        cartId_productVariantId: {
+          cartId: cart.id,
+          productVariantId,
+        },
+      },
+    });
+
+    if (existing) {
+      const nextQuantity = existing.quantity + quantity;
+      if (nextQuantity > stock) {
+        return {
+          ok: false,
+          message: `庫存不足，目前可加入上限 ${stock} 件`,
+        };
+      }
+      await this.prisma.cartItem.update({
+        where: { id: existing.id },
+        data: { quantity: nextQuantity },
+      });
+      return { ok: true };
+    }
+
+    if (quantity > stock) {
+      return {
+        ok: false,
+        message: `庫存不足，目前可加入上限 ${stock} 件`,
+      };
+    }
+
+    await this.prisma.cartItem.create({
+      data: {
+        cartId: cart.id,
+        productVariantId,
+        quantity,
+      },
+    });
+
+    return { ok: true };
+  }
+
+  async removeCartItem(cartItemId: string) {
+    await this.prisma.cartItem.delete({
+      where: { id: cartItemId },
+    });
+    return { ok: true };
+  }
+
+  async createMockCheckout(payload: {
+    sessionId: string;
+    liveRoomId?: string;
+  }): Promise<CheckoutResult> {
+    const { sessionId, liveRoomId } = payload;
+
+    if (liveRoomId) {
+      const room = await this.prisma.liveRoom.findUnique({
+        where: { id: liveRoomId },
+      });
+      if (!room) {
+        return {
+          ok: false,
+          message: '指定的直播間不存在',
+        };
+      }
+    }
+
+    const cart = (await this.prisma.cart.findFirst({
+      where: { sessionId },
+      include: {
+        items: {
+          include: {
+            variant: {
+              include: { product: true },
+            },
+          },
+        },
+      },
+    })) as CheckoutCartPayload | null;
+
+    if (!cart || cart.items.length === 0) {
+      return {
+        ok: false,
+        message: '購物車為空',
+      };
+    }
+
+    return this.prisma.$transaction(async (transaction: Prisma.TransactionClient) => {
+      const preparedItems = await Promise.all(
+        cart.items.map(async (item: CheckoutCartItem) => {
+          const variant = (await transaction.productVariant.findUnique({
+            where: { id: item.productVariantId },
+            include: { inventory: true },
+          })) as CheckoutVariantWithInventory | null;
+          if (!variant?.inventory) {
+            throw new BadRequestException('購物車有商品缺少庫存資訊');
+          }
+          if (variant.inventory.quantity < item.quantity) {
+            throw new BadRequestException(`庫存不足：${item.variant.product.name}`);
+          }
+          return {
+            item,
+            variant,
+          };
+        }),
+      );
+
+      const totalAmount = preparedItems.reduce(
+        (
+          acc: number,
+          entry: {
+            item: CheckoutCartItem;
+            variant: CheckoutVariantWithInventory;
+          },
+        ) => acc + entry.item.quantity * entry.item.variant.price,
+        0,
+      );
+
+      const order = await transaction.order.create({
+        data: {
+          totalAmount,
+          status: 'PENDING',
+          orderSource: liveRoomId ? 'LIVE' : 'WEB',
+          liveRoomId: liveRoomId ?? null,
+          items: {
+            create: preparedItems.map(
+              (
+                entry: {
+                  item: CheckoutCartItem;
+                  variant: CheckoutVariantWithInventory;
+                },
+              ) => ({
+                productVariantId: entry.item.productVariantId,
+                quantity: entry.item.quantity,
+                unitPrice: entry.item.variant.price,
+              }),
+            ),
+          },
+        },
+        include: {
+          items: true,
+        },
+      });
+
+      await Promise.all(
+        preparedItems.map(
+          (entry: {
+            item: CheckoutCartItem;
+            variant: CheckoutVariantWithInventory;
+          }) =>
+            transaction.inventory.update({
+              where: {
+                id: entry.variant.inventory.id,
+              },
+              data: {
+                quantity: {
+                  decrement: entry.item.quantity,
+                },
+              },
+            }),
+        ),
+      );
+
+      await transaction.cartItem.deleteMany({
+        where: { cartId: cart.id },
+      });
+
+      return { ok: true as const, order };
+    });
+  }
+
+  async listTeamMembers() {
+    return this.prisma.liveTeamMember.findMany({
+      include: {
+        assignments: {
+          include: {
+            liveRoom: {
+              select: {
+                id: true,
+                title: true,
+              },
+            },
+          },
+          orderBy: { createdAt: 'desc' },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+  }
+
+  async createTeamMember(payload: {
+    displayName: string;
+    role: string;
+    nickname?: string;
+    phone?: string;
+    email?: string;
+    notes?: string;
+  }) {
+    const role = this.normalizeTeamRole(payload.role);
+    if (!role) {
+      return {
+        ok: false,
+        message: 'role 需為 HOST/PRODUCER/DIRECTOR/EDITOR/SUPPORT/WAREHOUSE/MARKETING/OPERATOR',
+      };
+    }
+
+    const member = await this.prisma.liveTeamMember.create({
+      data: {
+        displayName: payload.displayName,
+        role,
+        nickname: payload.nickname,
+        phone: payload.phone,
+        email: payload.email,
+        notes: payload.notes,
+      },
+    });
+
+    return {
+      ok: true,
+      member,
+    };
+  }
+
+  async removeTeamMember(memberId: string) {
+    await this.prisma.liveTeamMember.delete({ where: { id: memberId } });
+    return { ok: true };
+  }
+
+  async getLiveRoomOperations(liveRoomId: string): Promise<OperationSnapshot> {
+    const room = (await this.prisma.liveRoom.findUnique({
+      where: { id: liveRoomId },
+      include: {
+        assignments: {
+          include: {
+            teamMember: {
+              select: {
+                id: true,
+                displayName: true,
+                phone: true,
+                email: true,
+                role: true,
+              },
+            },
+          },
+          orderBy: { createdAt: 'asc' },
+        },
+        scripts: {
+          orderBy: { sequence: 'asc' },
+        },
+        checklists: {
+          orderBy: { createdAt: 'asc' },
+        },
+      },
+    })) as LiveRoomWithOperations | null;
+
+    if (!room) {
+      throw new BadRequestException('直播間不存在');
+    }
+
+    return {
+      room: {
+        id: room.id,
+        title: room.title,
+        hostName: room.hostName,
+        status: room.status,
+        streamUrl: room.streamUrl ?? null,
+        liveGoal: room.liveGoal ?? null,
+        plannedStartAt: room.plannedStartAt ?? null,
+        plannedEndAt: room.plannedEndAt ?? null,
+        startedAt: room.startedAt,
+        endedAt: room.endedAt,
+      },
+      assignments: room.assignments.map((assignment) => ({
+        id: assignment.id,
+        role: assignment.role,
+        isPrimary: assignment.isPrimary,
+        shiftStartAt: assignment.shiftStartAt,
+        shiftEndAt: assignment.shiftEndAt,
+        note: assignment.note,
+        teamMember: {
+          id: assignment.teamMember.id,
+          displayName: assignment.teamMember.displayName,
+          phone: assignment.teamMember.phone,
+          email: assignment.teamMember.email,
+          role: assignment.teamMember.role,
+        },
+      })),
+      scripts: room.scripts.map((script) => ({
+        id: script.id,
+        sequence: script.sequence,
+        cue: script.cue,
+        title: script.title,
+        content: script.content,
+        ownerRole: script.ownerRole,
+        targetProductId: script.targetProductId,
+        isDone: script.isDone,
+      })),
+      checklists: room.checklists.map((item) => ({
+        id: item.id,
+        title: item.title,
+        ownerRole: item.ownerRole,
+        description: item.description,
+        isRequired: item.isRequired,
+        isDone: item.isDone,
+        note: item.note,
+      })),
+    };
+  }
+
+  async createLiveRoomAssignment(
+    liveRoomId: string,
+    payload: {
+      teamMemberId: string;
+      role: string;
+      isPrimary: boolean;
+      shiftStartAt?: string;
+      shiftEndAt?: string;
+      note?: string;
+    },
+  ) {
+    const role = this.normalizeTeamRole(payload.role);
+    if (!role) {
+      return {
+        ok: false,
+        message: 'role 需為 HOST/PRODUCER/DIRECTOR/EDITOR/SUPPORT/WAREHOUSE/MARKETING/OPERATOR',
+      };
+    }
+
+    const liveRoom = await this.prisma.liveRoom.findUnique({ where: { id: liveRoomId } });
+    if (!liveRoom) {
+      return {
+        ok: false,
+        message: '直播間不存在',
+      };
+    }
+
+    const teamMember = await this.prisma.liveTeamMember.findUnique({
+      where: { id: payload.teamMemberId },
+    });
+    if (!teamMember) {
+      return {
+        ok: false,
+        message: '人員不存在',
+      };
+    }
+
+    const shiftStartAt = payload.shiftStartAt
+      ? new Date(payload.shiftStartAt)
+      : undefined;
+    const shiftEndAt = payload.shiftEndAt ? new Date(payload.shiftEndAt) : undefined;
+
+    try {
+      const assignment = await this.prisma.liveRoomRoleAssignment.create({
+        data: {
+          liveRoomId,
+          teamMemberId: payload.teamMemberId,
+          role,
+          isPrimary: payload.isPrimary,
+          shiftStartAt,
+          shiftEndAt,
+          note: payload.note ?? null,
+        },
+        include: {
+          teamMember: true,
+          liveRoom: {
+            select: {
+              id: true,
+              title: true,
+            },
+          },
+        },
+      });
+      return { ok: true, assignment };
+    } catch {
+      return {
+        ok: false,
+        message: '這位人員已在此直播間建立角色分工，請先刪除舊資料再重建',
+      };
+    }
+  }
+
+  async removeLiveRoomAssignment(liveRoomId: string, assignmentId: string) {
+    const assignment = await this.prisma.liveRoomRoleAssignment.findUnique({
+      where: { id: assignmentId },
+    });
+
+    if (!assignment || assignment.liveRoomId !== liveRoomId) {
+      return {
+        ok: false,
+        message: '找不到對應的角色分配',
+      };
+    }
+
+    await this.prisma.liveRoomRoleAssignment.delete({ where: { id: assignmentId } });
+    return { ok: true };
+  }
+
+  async updateLiveRoomStatus(liveRoomId: string, status: string) {
+    if (!this.normalizeLiveRoomStatus(status)) {
+      return {
+        ok: false,
+        message: 'status 僅能為 PLANNING/LIVE/FINISHED/CANCELLED',
+      };
+    }
+
+    await this.prisma.liveRoom.update({
+      where: { id: liveRoomId },
+      data: {
+        status,
+        isActive: status !== 'CANCELLED',
+        ...(status === 'LIVE' && { startedAt: new Date() }),
+        ...(status === 'FINISHED' && { endedAt: new Date() }),
+      },
+    });
+
+    return { ok: true };
+  }
+
+  async createLiveRoomScript(
+    liveRoomId: string,
+    payload: {
+      sequence: number;
+      cue?: string | null;
+      title: string;
+      content: string;
+      ownerRole?: TeamRole;
+      targetProductId?: string;
+    },
+  ) {
+    const ownerRole = payload.ownerRole ? this.normalizeTeamRole(payload.ownerRole) : undefined;
+    if (!ownerRole && payload.ownerRole) {
+      return {
+        ok: false,
+        message: 'ownerRole 格式錯誤',
+      };
+    }
+
+    const liveRoom = await this.prisma.liveRoom.findUnique({ where: { id: liveRoomId } });
+    if (!liveRoom) {
+      return {
+        ok: false,
+        message: '直播間不存在',
+      };
+    }
+
+    const script = await this.prisma.liveRoomScript.create({
+      data: {
+        liveRoomId,
+        sequence: payload.sequence,
+        cue: payload.cue,
+        title: payload.title,
+        content: payload.content,
+        ownerRole,
+        targetProductId: payload.targetProductId,
+      },
+    });
+
+    return { ok: true, script };
+  }
+
+  async updateLiveRoomScript(
+    scriptId: string,
+    payload: {
+      sequence?: number;
+      cue?: string;
+      title?: string;
+      content?: string;
+      ownerRole?: TeamRole;
+      targetProductId?: string;
+      isDone?: boolean;
+    },
+  ) {
+    const script = await this.prisma.liveRoomScript.findUnique({ where: { id: scriptId } });
+    if (!script) {
+      return {
+        ok: false,
+        message: '找不到腳本',
+      };
+    }
+
+    const nextOwnerRole = payload.ownerRole
+      ? this.normalizeTeamRole(payload.ownerRole)
+      : script.ownerRole;
+    if (payload.ownerRole && !nextOwnerRole) {
+      return {
+        ok: false,
+        message: 'ownerRole 格式錯誤',
+      };
+    }
+
+    const nextSequence = payload.sequence === undefined ? script.sequence : payload.sequence;
+    if (Number.isNaN(Number(nextSequence)) || (nextSequence as number) <= 0) {
+      return {
+        ok: false,
+        message: 'sequence 必須是正整數',
+      };
+    }
+
+    const updated = await this.prisma.liveRoomScript.update({
+      where: { id: scriptId },
+      data: {
+        ...(payload.sequence !== undefined ? { sequence: payload.sequence } : {}),
+        ...(payload.cue !== undefined ? { cue: payload.cue } : {}),
+        ...(payload.title !== undefined ? { title: payload.title } : {}),
+        ...(payload.content !== undefined ? { content: payload.content } : {}),
+        ...(nextOwnerRole !== undefined ? { ownerRole: nextOwnerRole } : {}),
+        ...(payload.targetProductId !== undefined ? { targetProductId: payload.targetProductId } : {}),
+        ...(payload.isDone !== undefined ? { isDone: payload.isDone } : {}),
+      },
+    });
+
+    return { ok: true, script: updated };
+  }
+
+  async createLiveRoomChecklistItem(
+    liveRoomId: string,
+    payload: {
+      title: string;
+      ownerRole: TeamRole;
+      description?: string;
+      isRequired: boolean;
+      note?: string;
+    },
+  ) {
+    const ownerRole = this.normalizeTeamRole(payload.ownerRole);
+    if (!ownerRole) {
+      return {
+        ok: false,
+        message: 'ownerRole 格式錯誤',
+      };
+    }
+
+    const liveRoom = await this.prisma.liveRoom.findUnique({ where: { id: liveRoomId } });
+    if (!liveRoom) {
+      return {
+        ok: false,
+        message: '直播間不存在',
+      };
+    }
+
+    const item = await this.prisma.liveRoomChecklistItem.create({
+      data: {
+        liveRoomId,
+        title: payload.title,
+        ownerRole,
+        description: payload.description,
+        isRequired: payload.isRequired,
+        note: payload.note,
+      },
+    });
+
+    return { ok: true, item };
+  }
+
+  async updateLiveRoomChecklistItem(
+    checklistId: string,
+    payload: {
+      isDone?: boolean;
+    },
+  ) {
+    const item = await this.prisma.liveRoomChecklistItem.findUnique({ where: { id: checklistId } });
+    if (!item) {
+      return {
+        ok: false,
+        message: '找不到任務',
+      };
+    }
+
+    const nextDone = payload.isDone === undefined ? !item.isDone : payload.isDone;
+    const updated = await this.prisma.liveRoomChecklistItem.update({
+      where: { id: checklistId },
+      data: {
+        isDone: nextDone,
+        completedAt: nextDone ? new Date() : null,
+      },
+    });
+
+    return {
+      ok: true,
+      item: updated,
+    };
+  }
+
+  private normalizeTeamRole(value: string): TeamRole | null {
+    if (!value) {
+      return null;
+    }
+
+    const normalized = value.toUpperCase() as TeamRole;
+    return TEAM_ROLES.includes(normalized) ? normalized : null;
+  }
+
+  private normalizeLiveRoomStatus(value: string): value is LiveRoomStatus {
+    return LIVE_ROOM_STATUS_SET.has(value as LiveRoomStatus);
+  }
+
+}
diff --git a/apps/api/src/database/database.module.ts b/apps/api/src/database/database.module.ts
new file mode 100644
index 0000000..e8a9179
--- /dev/null
+++ b/apps/api/src/database/database.module.ts
@@ -0,0 +1,9 @@
+import { Global, Module } from '@nestjs/common';
+import { PrismaService } from './prisma.service';
+
+@Global()
+@Module({
+  providers: [PrismaService],
+  exports: [PrismaService],
+})
+export class DatabaseModule {}
diff --git a/apps/api/src/database/prisma.service.ts b/apps/api/src/database/prisma.service.ts
new file mode 100644
index 0000000..623d5e0
--- /dev/null
+++ b/apps/api/src/database/prisma.service.ts
@@ -0,0 +1,13 @@
+import { Injectable, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import { PrismaClient } from '@prisma/client';
+
+@Injectable()
+export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
+  async onModuleInit() {
+    await this.$connect();
+  }
+
+  async onModuleDestroy() {
+    await this.$disconnect();
+  }
+}
diff --git a/apps/api/src/main.ts b/apps/api/src/main.ts
new file mode 100644
index 0000000..19b0045
--- /dev/null
+++ b/apps/api/src/main.ts
@@ -0,0 +1,14 @@
+import { Logger } from '@nestjs/common';
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  app.setGlobalPrefix('api');
+  const port = process.env.PORT ? Number(process.env.PORT) : 4000;
+
+  await app.listen(port);
+  Logger.log(`VTuber API running on http://localhost:${port}/api`, 'Bootstrap');
+}
+
+bootstrap();
diff --git a/apps/api/tsconfig.build.json b/apps/api/tsconfig.build.json
new file mode 100644
index 0000000..c180ac8
--- /dev/null
+++ b/apps/api/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "**/*spec.ts"]
+}
diff --git a/apps/api/tsconfig.json b/apps/api/tsconfig.json
new file mode 100644
index 0000000..fb855c7
--- /dev/null
+++ b/apps/api/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2022",
+    "lib": ["es2022", "dom"],
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}
diff --git a/apps/web/.env.example b/apps/web/.env.example
new file mode 100644
index 0000000..907257c
--- /dev/null
+++ b/apps/web/.env.example
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_API_BASE_URL=http://localhost:4000/api
+NEXT_PUBLIC_APP_DOMAIN=vtuber.wooo.work
+NEXT_PUBLIC_LIVE_STREAM_URL=https://videos.pexels.com/video-files/7297923/7297923-uhd_3840_2160_30fps.mp4
+NEXT_PUBLIC_REAL_HOST_AVATAR_URL=https://videos.pexels.com/video-files/7297923/7297923-uhd_3840_2160_30fps.mp4
diff --git a/apps/web/.eslintrc.json b/apps/web/.eslintrc.json
new file mode 100644
index 0000000..957cd15
--- /dev/null
+++ b/apps/web/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
new file mode 100644
index 0000000..fb218d8
--- /dev/null
+++ b/apps/web/Dockerfile
@@ -0,0 +1,26 @@
+FROM node:20 AS builder
+WORKDIR /app
+
+COPY package.json ./
+COPY tsconfig.base.json ./
+COPY apps/web ./apps/web
+COPY apps/admin ./apps/admin
+COPY packages ./packages
+
+RUN npm install
+RUN npm run build:web
+
+FROM node:20
+WORKDIR /app
+ENV NODE_ENV=production
+
+COPY --from=builder /app/package.json /app/package.json
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/apps/web/.next ./apps/web/.next
+COPY --from=builder /app/apps/web/package.json ./apps/web/package.json
+COPY --from=builder /app/apps/web/public ./apps/web/public
+COPY --from=builder /app/apps/web/next.config.js ./apps/web/next.config.js
+COPY --from=builder /app/apps/web/next-env.d.ts ./apps/web/next-env.d.ts
+ENV NEXT_TELEMETRY_DISABLED=1
+EXPOSE 3000
+CMD ["npm","run","start","-w","apps/web"]
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
new file mode 100644
index 0000000..40c3d68
--- /dev/null
+++ b/apps/web/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
new file mode 100644
index 0000000..401cca8
--- /dev/null
+++ b/apps/web/next.config.js
@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'picsum.photos',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;
diff --git a/apps/web/package.json b/apps/web/package.json
new file mode 100644
index 0000000..bd84c44
--- /dev/null
+++ b/apps/web/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vtuber/web",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@pixiv/three-vrm": "^3.5.3",
+    "@types/three": "^0.184.1",
+    "@vtuber/ui": "*",
+    "next": "^14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.184.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.5",
+    "typescript": "^5.5.0"
+  }
+}
diff --git a/apps/web/public/.gitkeep b/apps/web/public/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web/public/models/realistic-host.glb b/apps/web/public/models/realistic-host.glb
new file mode 100644
index 0000000..f4e3a3c
Binary files /dev/null and b/apps/web/public/models/realistic-host.glb differ
diff --git a/apps/web/public/models/xiaoyai.vrm b/apps/web/public/models/xiaoyai.vrm
new file mode 100644
index 0000000..a5aac1f
Binary files /dev/null and b/apps/web/public/models/xiaoyai.vrm differ
diff --git a/apps/web/src/app/[locale]/live/demo/page.tsx b/apps/web/src/app/[locale]/live/demo/page.tsx
new file mode 100644
index 0000000..270ba1c
--- /dev/null
+++ b/apps/web/src/app/[locale]/live/demo/page.tsx
@@ -0,0 +1,5 @@
+import LiveDemoPage from '../../../live/demo/page';
+
+export default function LocaleLiveDemoPage() {
+  return <LiveDemoPage />;
+}
diff --git a/apps/web/src/app/cart/page.tsx b/apps/web/src/app/cart/page.tsx
new file mode 100644
index 0000000..6def8fa
--- /dev/null
+++ b/apps/web/src/app/cart/page.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { API_BASE_URL, getSessionId } from '../../lib/api';
+
+type Product = {
+  name: string;
+  id: string;
+  imageUrl: string | null;
+};
+
+type Variant = {
+  id: string;
+  name: string;
+  price: number;
+  product: Product;
+};
+
+type CartItem = {
+  id: string;
+  quantity: number;
+  variant: Variant;
+};
+
+type CartData = {
+  id: string;
+  items: CartItem[];
+};
+
+export default function CartPage() {
+  const [sessionId, setSessionId] = useState('');
+  const [cart, setCart] = useState<CartData>({ id: '', items: [] });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const refresh = useCallback(async () => {
+    if (!sessionId) return;
+    setLoading(true);
+    setError('');
+    try {
+      const response = await fetch(`${API_BASE_URL}/cart?sessionId=${sessionId}`, {
+        cache: 'no-store',
+      });
+      if (!response.ok) {
+        throw new Error('購物車讀取失敗');
+      }
+      const data = (await response.json()) as CartData;
+      setCart(data);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '購物車讀取失敗');
+    } finally {
+      setLoading(false);
+    }
+  }, [sessionId]);
+
+  useEffect(() => {
+    const sid = getSessionId();
+    setSessionId(sid);
+  }, []);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    void refresh();
+  }, [sessionId, refresh]);
+
+  const total = cart.items.reduce((acc, item) => acc + item.quantity * item.variant.price, 0);
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>購物車</h1>
+      <p>
+        <Link href="/products">回商品列表</Link> | <Link href="/checkout">結帳</Link>
+      </p>
+      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
+      {loading ? <p>讀取中...</p> : null}
+      <ul>
+        {cart.items.map((item) => (
+          <li key={item.id} style={{ marginBottom: 12 }}>
+            <strong>{item.variant.product.name}</strong> / {item.variant.name}
+            {' - '}
+            {item.quantity} 件 x NT$ {item.variant.price}
+          </li>
+        ))}
+      </ul>
+      <div>小計：NT$ {total}</div>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/checkout/page.tsx b/apps/web/src/app/checkout/page.tsx
new file mode 100644
index 0000000..b5f9f17
--- /dev/null
+++ b/apps/web/src/app/checkout/page.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { API_BASE_URL, getSessionId } from '../../lib/api';
+
+type Product = {
+  name: string;
+  id: string;
+};
+
+type Variant = {
+  id: string;
+  name: string;
+  price: number;
+  product: Product;
+};
+
+type CartItem = {
+  id: string;
+  quantity: number;
+  variant: Variant;
+};
+
+type CartData = {
+  id: string;
+  items: CartItem[];
+};
+
+type OrderResult = {
+  ok: boolean;
+  order?: {
+    id: string;
+    orderNumber: string;
+    totalAmount: number;
+    status: string;
+  };
+};
+
+export default function CheckoutPage() {
+  const [sessionId, setSessionId] = useState('');
+  const [cart, setCart] = useState<CartData>({ id: '', items: [] });
+  const [checking, setChecking] = useState(false);
+  const [result, setResult] = useState<OrderResult | null>(null);
+  const [error, setError] = useState('');
+
+  const total = cart.items.reduce((acc, item) => acc + item.quantity * item.variant.price, 0);
+
+  async function loadCart(sid: string) {
+    const response = await fetch(`${API_BASE_URL}/cart?sessionId=${sid}`, {
+      cache: 'no-store',
+    });
+    if (!response.ok) throw new Error('購物車讀取失敗');
+    const data = (await response.json()) as CartData;
+    setCart(data);
+  }
+
+  async function handleCheckout() {
+    setChecking(true);
+    setError('');
+    setResult(null);
+    try {
+      const response = await fetch(`${API_BASE_URL}/checkout`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+      });
+      if (!response.ok) {
+        const message = await response.text();
+        throw new Error(message || '結帳失敗');
+      }
+      const data = (await response.json()) as OrderResult;
+      setResult(data);
+      await loadCart(sessionId);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : '結帳失敗');
+    } finally {
+      setChecking(false);
+    }
+  }
+
+  useEffect(() => {
+    const sid = getSessionId();
+    setSessionId(sid);
+  }, []);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    void loadCart(sessionId);
+  }, [sessionId]);
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>結帳</h1>
+      <p>
+        <Link href="/cart">回購物車</Link>
+      </p>
+      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
+      {result ? (
+        <div>
+          <h3>訂單建立成功（Mock）</h3>
+          <p>訂單編號：{result.order?.orderNumber}</p>
+          <p>狀態：{result.order?.status}</p>
+          <p>總金額：NT$ {result.order?.totalAmount}</p>
+        </div>
+      ) : null}
+      <div style={{ marginBottom: 16 }}>
+        {cart.items.map((item) => (
+          <div key={item.id}>
+            {item.variant.product.name} x {item.quantity} = NT${' '}
+            {item.quantity * item.variant.price}
+          </div>
+        ))}
+      </div>
+      <div style={{ marginBottom: 12 }}>總金額：NT$ {total}</div>
+      <button type="button" onClick={handleCheckout} disabled={checking || cart.items.length === 0}>
+        {checking ? '送出中...' : '模擬結帳'}
+      </button>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/en/live/demo/page.tsx b/apps/web/src/app/en/live/demo/page.tsx
new file mode 100644
index 0000000..b2e4aaf
--- /dev/null
+++ b/apps/web/src/app/en/live/demo/page.tsx
@@ -0,0 +1,5 @@
+import LiveDemoPage from '../../../live/demo/page';
+
+export default function EnLiveDemoPage() {
+  return <LiveDemoPage />;
+}
diff --git a/apps/web/src/app/en/live/page.tsx b/apps/web/src/app/en/live/page.tsx
new file mode 100644
index 0000000..ce9aca6
--- /dev/null
+++ b/apps/web/src/app/en/live/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function EnLivePageRedirect() {
+  redirect('/en/live/demo');
+}
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
new file mode 100644
index 0000000..dbb3daa
--- /dev/null
+++ b/apps/web/src/app/globals.css
@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: #222;
+  background: #f8f8fb;
+}
+
+main {
+  max-width: 960px;
+  margin: 0 auto;
+}
diff --git a/apps/web/src/app/ja/live/demo/page.tsx b/apps/web/src/app/ja/live/demo/page.tsx
new file mode 100644
index 0000000..5677ef3
--- /dev/null
+++ b/apps/web/src/app/ja/live/demo/page.tsx
@@ -0,0 +1,5 @@
+import LiveDemoPage from '../../../live/demo/page';
+
+export default function JaLiveDemoPage() {
+  return <LiveDemoPage />;
+}
diff --git a/apps/web/src/app/ja/live/page.tsx b/apps/web/src/app/ja/live/page.tsx
new file mode 100644
index 0000000..77a66ba
--- /dev/null
+++ b/apps/web/src/app/ja/live/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function JaLivePageRedirect() {
+  redirect('/ja/live/demo');
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
new file mode 100644
index 0000000..1fb39fe
--- /dev/null
+++ b/apps/web/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './globals.css';
+
+export const metadata = {
+  title: 'VTuber Web',
+  description: 'VTuber Live Commerce Frontend Demo',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-Hant">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/web/src/app/live/demo/page.tsx b/apps/web/src/app/live/demo/page.tsx
new file mode 100644
index 0000000..e7b9dfd
--- /dev/null
+++ b/apps/web/src/app/live/demo/page.tsx
@@ -0,0 +1,1878 @@
+'use client';
+
+import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { API_BASE_URL, getSessionId } from '../../../lib/api';
+import VirtualHost, { VirtualHostRef } from '../../../components/virtual-host';
+
+type Inventory = {
+  quantity: number;
+};
+
+type ProductVariant = {
+  id: string;
+  name: string;
+  price: number;
+  inventory: Inventory | null;
+};
+
+type Product = {
+  id: string;
+  name: string;
+  slug: string;
+  basePrice: number;
+  imageUrl: string | null;
+  variants: ProductVariant[];
+};
+
+type ChatMessage = {
+  id: string;
+  userName: string;
+  message: string;
+  at: string;
+  productVariantId?: string | null;
+};
+
+type RawChatMessage = {
+  id: string;
+  userName: string;
+  message: string;
+  createdAt: string;
+  productVariantId?: string | null;
+};
+
+type LiveRoom = {
+  id: string;
+  title: string;
+  isActive: boolean;
+};
+
+type TeamRole =
+  | 'HOST'
+  | 'PRODUCER'
+  | 'DIRECTOR'
+  | 'EDITOR'
+  | 'SUPPORT'
+  | 'WAREHOUSE'
+  | 'MARKETING'
+  | 'OPERATOR';
+
+type LiveRoomAssignment = {
+  id: string;
+  role: TeamRole;
+  isPrimary: boolean;
+  note: string | null;
+  teamMember: {
+    displayName: string;
+    phone: string | null;
+    role: TeamRole;
+  };
+};
+
+type LiveRoomScript = {
+  id: string;
+  sequence: number;
+  cue: string | null;
+  title: string;
+  content: string;
+  ownerRole: TeamRole | null;
+  isDone: boolean;
+};
+
+type LiveRoomChecklistItem = {
+  id: string;
+  title: string;
+  ownerRole: TeamRole;
+  isRequired: boolean;
+  isDone: boolean;
+};
+
+type LiveRoomOperations = {
+  room: {
+    id: string;
+    title: string;
+    status: string;
+    liveGoal: string | null;
+    streamUrl: string | null;
+  };
+  assignments: LiveRoomAssignment[];
+  scripts: LiveRoomScript[];
+  checklists: LiveRoomChecklistItem[];
+};
+
+type CheckoutResult = {
+  ok: boolean;
+  order?: {
+    orderNumber: string;
+    totalAmount: number;
+  };
+  message?: string;
+};
+
+type HostReplyResponse = {
+  reply: string;
+};
+
+const LIVE_ROOM_DEFAULT_NAME = 'VTuber Demo Live';
+const LIVE_MESSAGE_MAX_COUNT = 50;
+const DEAL_DURATION_MS = 12 * 60 * 1000;
+const DEAL_URGENT_MS = 3 * 60 * 1000;
+const LIVE_MAX_QUANTITY = 9;
+const MIN_WATCHERS = 900;
+const MAX_WATCHERS = 2800;
+const LIVE_STOCK_DISPLAY_CAP = 120;
+const LIVE_COUPON_CODE = 'VHOST188';
+const LIVE_COUPON_DESC = '直播限定｜滿 NT$ 1,280 再折 100 元';
+const QUICK_HOST_ASK_PROMPTS = [
+  { id: 'q_price', label: '我想問價格', question: '這件主推商品的價格是多少？' },
+  { id: 'q_stock', label: '庫存還有嗎', question: '這件商品還有多少庫存？' },
+  { id: 'q_size', label: '有什麼尺寸', question: '有什麼尺寸可選？' },
+  { id: 'q_delivery', label: '多久能到貨', question: '下單後多久可以到貨？' },
+];
+const LIVE_HOT_KEYWORDS = ['便宜', '折扣', '超值', '下單', '庫存', '有貨', '快', '推薦', '價格', '多少', '尺寸', '到貨', '立刻'];
+const LIVE_SCENE_CUES = [
+  '今天限定場，主播會逐步開啟主推主題，先搶先得！',
+  '有興趣配件可直接加到購物車，結帳再一起送！',
+  '看直播不只看價格，快去留言搶答，主播會補貨狀態',
+  '每 10 秒都會更新主推焦點，先看再決定，錯過沒下一次',
+  '收藏直播間優惠，限時券可同時套用到後續加價購',
+];
+
+function formatNT(amount: number) {
+  return `NT$ ${amount.toLocaleString('zh-TW')}`;
+}
+
+function formatCountdown(endAt: number) {
+  const remain = Math.max(0, endAt - Date.now());
+  const totalSeconds = Math.floor(remain / 1000);
+  const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
+  const seconds = (totalSeconds % 60).toString().padStart(2, '0');
+  return `${minutes}:${seconds}`;
+}
+
+function clamp(value: number, min: number, max: number) {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
+function normalizeQuantity(raw: number, stock = Number.MAX_SAFE_INTEGER) {
+  const parsed = Number.isFinite(raw) ? Math.floor(raw) : 1;
+  const safeStock = Math.max(1, stock);
+  return clamp(Math.max(1, parsed), 1, Math.min(LIVE_MAX_QUANTITY, safeStock));
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function highlightMessage(text: string) {
+  if (!text.trim()) {
+    return [text];
+  }
+
+  const pattern = new RegExp(`(${LIVE_HOT_KEYWORDS.map(escapeRegExp).join('|')})`, 'g');
+  const chunks = text.split(pattern);
+
+  return chunks.map((chunk, index) => {
+    if (!chunk) {
+      return '';
+    }
+    if (LIVE_HOT_KEYWORDS.includes(chunk)) {
+      return (
+        <span key={index} className="chat-hotword">
+          {chunk}
+        </span>
+      );
+    }
+    return chunk;
+  });
+}
+
+function deliveryEstimate(seed: string) {
+  const score = seed.split('').reduce((sum, char) => sum + char.charCodeAt(0), 0);
+  if (score % 3 === 0) {
+    return '1-2 個工作天';
+  }
+  if (score % 3 === 1) {
+    return '2-3 個工作天';
+  }
+  return '3-5 個工作天';
+}
+
+async function fetchProducts(): Promise<Product[]> {
+  const response = await fetch(`${API_BASE_URL}/products`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) return [];
+  return response.json();
+}
+
+async function fetchLiveRooms() {
+  const response = await fetch(`${API_BASE_URL}/live-rooms`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) return [];
+  return (await response.json()) as LiveRoom[];
+}
+
+async function fetchLiveMessages(roomId: string): Promise<ChatMessage[]> {
+  const response = await fetch(`${API_BASE_URL}/live-rooms/${roomId}/messages`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) return [];
+
+  const raw = (await response.json()) as RawChatMessage[];
+
+  return raw.map((item) => ({
+    id: item.id,
+    userName: item.userName,
+    message: item.message,
+    at: new Date(item.createdAt).toLocaleTimeString(),
+    productVariantId: item.productVariantId,
+  }));
+}
+
+async function fetchLiveOperations(roomId: string): Promise<LiveRoomOperations | null> {
+  const response = await fetch(`${API_BASE_URL}/live-rooms/${roomId}/operations`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) {
+    return null;
+  }
+
+  return (await response.json()) as LiveRoomOperations;
+}
+
+export default function LiveDemoPage() {
+  const virtualHostRef = useRef<VirtualHostRef>(null);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [liveRoomId, setLiveRoomId] = useState('');
+  const [roomName, setRoomName] = useState(LIVE_ROOM_DEFAULT_NAME);
+  const [message, setMessage] = useState('');
+  const [nickname] = useState(() => `觀眾-${Math.floor(Math.random() * 9000) + 1000}`);
+  const [seedMessage] = useState<ChatMessage>(() => ({
+    id: 'seed-1',
+    userName: '系統',
+    message: '歡迎來到 VTuber 直播間，右側可留言互動，並可直接從下方商品卡加入購物車或立即下單。',
+    at: new Date().toLocaleTimeString(),
+  }));
+  const [messages, setMessages] = useState<ChatMessage[]>([seedMessage]);
+  const [roomOperations, setRoomOperations] = useState<LiveRoomOperations | null>(null);
+  const [loadingRoom, setLoadingRoom] = useState(true);
+  const [busyVariantId, setBusyVariantId] = useState<string | null>(null);
+  const [statusMessage, setStatusMessage] = useState('');
+  const [hostReply, setHostReply] = useState('可點擊「送出並詢問主播」取得即時回覆');
+  const [isAskingHost, setIsAskingHost] = useState(false);
+  const [isHostTalking, setIsHostTalking] = useState(false);
+  const [spotlightIndex, setSpotlightIndex] = useState(0);
+  const [sceneCueIndex, setSceneCueIndex] = useState(0);
+  const [watcherCount, setWatcherCount] = useState(1240);
+  const [dealTotalMs] = useState(() => DEAL_DURATION_MS + Math.floor(Math.random() * 120000));
+  const [dealEndsAt] = useState(() => Date.now() + dealTotalMs);
+  const [dealRemaining, setDealRemaining] = useState(formatCountdown(Date.now() + dealTotalMs));
+  const [dealRemainingMs, setDealRemainingMs] = useState(dealTotalMs);
+  const [isDealEnded, setIsDealEnded] = useState(false);
+  const [todaySales, setTodaySales] = useState(() => 160 + Math.floor(Math.random() * 60));
+  const [recentSaleBurst, setRecentSaleBurst] = useState(0);
+  const [selectedQtyByVariant, setSelectedQtyByVariant] = useState<Record<string, number>>({});
+  const [couponCopied, setCouponCopied] = useState(false);
+  const hostTalkTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const salesPulseRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const couponCopiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const triggerHostTalking = useCallback((durationMs = 1800) => {
+    if (hostTalkTimerRef.current) {
+      clearTimeout(hostTalkTimerRef.current);
+    }
+    setIsHostTalking(true);
+    hostTalkTimerRef.current = setTimeout(() => {
+      setIsHostTalking(false);
+      hostTalkTimerRef.current = null;
+    }, durationMs);
+  }, []);
+
+  const estimateHostTalkDuration = useCallback((text: string) => {
+    const normalized = text.trim();
+    if (!normalized) {
+      return 1800;
+    }
+
+    return Math.max(1800, Math.min(18000, normalized.length * 72));
+  }, []);
+
+  const mergeMessages = useCallback(
+    (history: ChatMessage[]) => {
+      const normalized = history.slice(0, LIVE_MESSAGE_MAX_COUNT - 1).reverse();
+      const merged = [seedMessage, ...normalized];
+      const seen = new Set<string>();
+      const deduped: ChatMessage[] = [];
+
+      for (const item of merged) {
+        if (seen.has(item.id)) {
+          continue;
+        }
+        seen.add(item.id);
+        deduped.push({
+          ...item,
+          at: item.at || new Date().toLocaleTimeString(),
+        });
+      }
+
+      return deduped.slice(-LIVE_MESSAGE_MAX_COUNT);
+    },
+    [seedMessage],
+  );
+
+  const loadMessages = useCallback(
+    async (roomId: string) => {
+      const history = await fetchLiveMessages(roomId);
+      setMessages((prev) => {
+        const baseline = prev.find((item) => item.id === 'seed-1') ?? seedMessage;
+        const nextMessages = mergeMessages(history);
+        if (nextMessages.length === 0) {
+          return [baseline];
+        }
+        return nextMessages;
+      });
+    },
+    [seedMessage, mergeMessages],
+  );
+
+  const loadOperations = useCallback(
+    async (roomId: string) => {
+      const ops = await fetchLiveOperations(roomId);
+      setRoomOperations(ops);
+    },
+    [],
+  );
+
+  const initScene = useCallback(async () => {
+    setLoadingRoom(true);
+    try {
+      const rooms = await fetchLiveRooms();
+      const activeRoom = rooms.find((room) => room.isActive) || rooms[0];
+      const currentRoom = activeRoom || { id: '', title: LIVE_ROOM_DEFAULT_NAME };
+
+      setRoomName(currentRoom.title);
+      if (currentRoom.id) {
+        setLiveRoomId(currentRoom.id);
+        await loadMessages(currentRoom.id);
+        await loadOperations(currentRoom.id);
+      } else {
+        setLiveRoomId('');
+        setRoomOperations(null);
+      }
+
+      const latestProducts = await fetchProducts();
+      if (latestProducts.length === 0) {
+        setSpotlightIndex(0);
+        setSceneCueIndex(0);
+      }
+      setProducts(latestProducts);
+      setSpotlightIndex((prev) => (latestProducts.length ? (prev % latestProducts.length) : 0));
+      setSceneCueIndex((prev) => (LIVE_SCENE_CUES.length ? (prev % LIVE_SCENE_CUES.length) : 0));
+    } finally {
+      setLoadingRoom(false);
+    }
+  }, [loadMessages, loadOperations]);
+
+  useEffect(() => {
+    void initScene();
+  }, [initScene]);
+
+  useEffect(() => {
+    if (!liveRoomId) return;
+
+    const timer = setInterval(() => {
+      void loadMessages(liveRoomId);
+      void loadOperations(liveRoomId);
+    }, 4500);
+
+    return () => clearInterval(timer);
+  }, [liveRoomId, loadMessages, loadOperations]);
+
+  useEffect(() => {
+    const featuredProducts = products.slice(0, 4);
+    if (featuredProducts.length <= 1) {
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setSpotlightIndex((prev) => (prev + 1) % featuredProducts.length);
+      setWatcherCount((prev) => {
+        const drift = Math.floor(Math.random() * 21) - 10;
+        return clamp(prev + drift, MIN_WATCHERS, MAX_WATCHERS);
+      });
+    }, 10000);
+
+    return () => clearInterval(timer);
+  }, [products]);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setSceneCueIndex((prev) => (prev + 1) % LIVE_SCENE_CUES.length);
+    }, 10000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (isDealEnded) {
+      return;
+    }
+
+    const timer = setInterval(() => {
+      const add = Math.floor(Math.random() * 4) + 1;
+      setTodaySales((prev) => prev + add);
+      setRecentSaleBurst(add);
+      if (salesPulseRef.current) {
+        clearTimeout(salesPulseRef.current);
+      }
+      salesPulseRef.current = setTimeout(() => {
+        setRecentSaleBurst(0);
+      }, 4200);
+    }, 9000);
+
+    return () => clearInterval(timer);
+  }, [isDealEnded]);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const remain = dealEndsAt - Date.now();
+      if (remain <= 0) {
+        setDealRemaining('00:00');
+        setDealRemainingMs(0);
+        setIsDealEnded(true);
+        clearInterval(timer);
+        return;
+      }
+      setDealRemaining(formatCountdown(dealEndsAt));
+      setDealRemainingMs(remain);
+      setIsDealEnded(false);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [dealEndsAt]);
+
+  useEffect(() => {
+    return () => {
+      if (hostTalkTimerRef.current) {
+        clearTimeout(hostTalkTimerRef.current);
+      }
+      if (salesPulseRef.current) {
+        clearTimeout(salesPulseRef.current);
+      }
+      if (couponCopiedTimerRef.current) {
+        clearTimeout(couponCopiedTimerRef.current);
+      }
+    };
+  }, []);
+
+  async function copyCouponCode() {
+    try {
+      await navigator.clipboard.writeText(LIVE_COUPON_CODE);
+      setCouponCopied(true);
+      if (couponCopiedTimerRef.current) {
+        clearTimeout(couponCopiedTimerRef.current);
+      }
+      couponCopiedTimerRef.current = setTimeout(() => {
+        setCouponCopied(false);
+      }, 1400);
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : '複製優惠碼失敗');
+    }
+  }
+
+  function updateQuantity(variantId: string, stock: number, delta: number) {
+    setSelectedQtyByVariant((prev) => ({
+      ...prev,
+      [variantId]: normalizeQuantity((prev[variantId] ?? 1) + delta, stock),
+    }));
+  }
+
+  async function askHostReply(question: string) {
+    setIsAskingHost(true);
+    setHostReply('主播正在回覆中...');
+    triggerHostTalking(estimateHostTalkDuration(question));
+    try {
+      const targetProductId = products[0]?.id;
+      const response = await fetch(`${API_BASE_URL}/ai/product-chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userMessage: question,
+          currentProductId: targetProductId,
+          liveRoomId,
+        }),
+      });
+
+      if (!response.ok) {
+        const msg = await response.text();
+        throw new Error(msg || '主播暫時無法回覆');
+      }
+
+      const result = (await response.json()) as HostReplyResponse;
+      const reply = result.reply || '主播目前沒有可回覆的建議';
+      setHostReply(reply);
+      triggerHostTalking(estimateHostTalkDuration(reply));
+      virtualHostRef.current?.speak(reply);
+    } catch (error) {
+      setHostReply(error instanceof Error ? error.message : '主播回覆發生錯誤');
+      triggerHostTalking(2200);
+    } finally {
+      setIsAskingHost(false);
+    }
+  }
+
+  async function sendMessage(askHost = false, overrideMessage?: string) {
+    const trimmed = (overrideMessage ?? message).trim();
+    if (!trimmed || !liveRoomId) return;
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/live-rooms/${liveRoomId}/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userName: nickname,
+          message: trimmed,
+        }),
+      });
+
+      if (!response.ok) {
+        const msg = await response.text();
+        throw new Error(msg || '留言失敗');
+      }
+
+      setMessage('');
+      setStatusMessage('留言已送出，聊天紀錄已即時更新');
+      if (askHost) {
+        await askHostReply(trimmed);
+      }
+      await loadMessages(liveRoomId);
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : '留言發生錯誤');
+    }
+  }
+
+  async function addMessage(e: FormEvent<HTMLFormElement>, askHost = false) {
+    e.preventDefault();
+    await sendMessage(askHost);
+  }
+
+  async function askQuickHost(question: string) {
+    setMessage(question);
+    await sendMessage(true, question);
+  }
+
+  async function addToCart(variantId: string, quantity: number, stock: number) {
+    setBusyVariantId(variantId);
+    setStatusMessage('');
+    const safeQty = normalizeQuantity(quantity, stock);
+    try {
+      if (stock > 0 && safeQty > stock) {
+        throw new Error('所選數量超過庫存');
+      }
+      const sessionId = getSessionId();
+      const addResponse = await fetch(`${API_BASE_URL}/cart/items`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          productVariantId: variantId,
+          quantity: safeQty,
+        }),
+      });
+      if (!addResponse.ok) {
+        const message = await addResponse.text();
+        throw new Error(message || '加入購物車失敗');
+      }
+
+      setStatusMessage(`已加入購物車 ${safeQty} 件，請到結帳流程完成下單`);
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : '加入購物車發生錯誤');
+    } finally {
+      setBusyVariantId(null);
+    }
+  }
+
+  async function handleBuyNow(variantId: string, quantity: number, stock: number) {
+    setBusyVariantId(variantId);
+    setStatusMessage('');
+    const safeQty = normalizeQuantity(quantity, stock);
+    try {
+      if (stock > 0 && safeQty > stock) {
+        throw new Error('所選數量超過庫存');
+      }
+      const sessionId = getSessionId();
+      const addResponse = await fetch(`${API_BASE_URL}/cart/items`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          productVariantId: variantId,
+          quantity: safeQty,
+        }),
+      });
+      if (!addResponse.ok) {
+        const message = await addResponse.text();
+        throw new Error(message || '加入購物車失敗');
+      }
+
+      const checkout = await fetch(`${API_BASE_URL}/checkout`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          liveRoomId,
+        }),
+      });
+      if (!checkout.ok) {
+        const message = await checkout.text();
+        throw new Error(message || '立即下單失敗');
+      }
+      const result = (await checkout.json()) as CheckoutResult;
+      if (!result.ok) {
+        throw new Error(result.message || '結帳未完成');
+      }
+      setStatusMessage(
+        `已幫你完成 ${safeQty} 件購買，訂單 ${result.order?.orderNumber}，金額 NT$ ${result.order?.totalAmount}`,
+      );
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : '立即購買發生錯誤');
+    } finally {
+      setBusyVariantId(null);
+    }
+  }
+
+  const featured = products.slice(0, 4);
+  const spotlightProduct = featured.length > 0 ? featured[spotlightIndex % featured.length] : null;
+  const spotlightVariant = spotlightProduct?.variants[0];
+  const spotlightStock = spotlightVariant?.inventory?.quantity ?? 0;
+  const spotlightStockPressure = clamp(
+    Math.max(0, Math.round(100 - (spotlightStock / LIVE_STOCK_DISPLAY_CAP) * 100)),
+    0,
+    100,
+  );
+  const spotlightDelivery = deliveryEstimate(spotlightProduct?.id ?? 'default');
+  const isSpotlightUrgentStock = spotlightStock > 0 && spotlightStock <= 12;
+  const spotlightStockTone = spotlightStock <= 0
+    ? '#ef4444'
+    : isSpotlightUrgentStock
+      ? '#ef4444'
+      : spotlightStockPressure > 68
+        ? '#f97316'
+        : '#10b981';
+  const completionRateValue = roomOperations?.scripts.length
+    ? Math.round((roomOperations.scripts.filter((item) => item.isDone).length / roomOperations.scripts.length) * 100)
+    : 0;
+  const spotlightDealProgress = Math.max(0, Math.min(100, Math.round((dealRemainingMs / dealTotalMs) * 100)));
+  const isDealUrgent = !isDealEnded && dealRemainingMs <= DEAL_URGENT_MS;
+  const hostLiveStatus = isHostTalking
+    ? '主播回覆中'
+    : roomOperations
+      ? roomOperations.room.status
+      : loadingRoom
+        ? '初始化中'
+        : '待機';
+  const completionRate = `${completionRateValue}%`;
+  const interactionRate = `${clamp(48 + (watcherCount % 47), 48, 96)}%`;
+  const estimatedConversion = Math.max(5, Math.min(98, Math.round((todaySales / (watcherCount || 1)) * 100)));
+  const spotlightSceneMessage = LIVE_SCENE_CUES[sceneCueIndex % LIVE_SCENE_CUES.length];
+  const upsellProducts = featured.filter((product) => spotlightProduct && product.id !== spotlightProduct.id).slice(0, 2);
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>VTuber 直播間 / Demo</h1>
+      <p>
+        <Link href="/products">回商品列表</Link>
+      </p>
+      <div
+        style={{
+          display: 'grid',
+          gap: 16,
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+        }}
+      >
+        <section
+          style={{ border: '1px solid #ddd', borderRadius: 12, padding: 16 }}
+          aria-label="模擬真人直播區塊"
+        >
+          <h2>模擬真人直播場景</h2>
+          <div className="live-stage">
+            <div className="live-video-wrap">
+              <div
+                className={`virtual-host-fullscreen${isHostTalking ? ' is-speaking' : ''}`}
+                aria-hidden="true"
+                style={{ position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 1 }}
+              >
+                <VirtualHost ref={virtualHostRef} />
+              </div>
+              <div className="stream-pulse" style={{ zIndex: 2 }} />
+              <div className="floating-orb orb-a" style={{ zIndex: 2 }} />
+              <div className="floating-orb orb-b" style={{ zIndex: 2 }} />
+              <div className="floating-orb orb-c" style={{ zIndex: 2 }} />
+              <div className="host-status-badge" aria-live="polite" style={{ zIndex: 3 }}>
+                <span>主播：寫實虛擬主播「小艾」</span>
+                <strong>🟢 {hostLiveStatus}</strong>
+              </div>
+              <div
+                className={`live-caption${isDealUrgent ? ' is-urgent' : ''}`}
+                style={{ zIndex: 3 }}
+              >
+                {spotlightProduct ? `主推：${spotlightProduct.name}` : '直播畫面與主持人互動同步'}
+                {isDealEnded ? '（優惠場已收攏）' : `（剩 ${dealRemaining}）`}
+                {isDealUrgent ? '（即將收尾，抓緊下單）' : ''}
+              </div>
+              <div className="live-scene-cue" style={{ zIndex: 3 }}>
+                {spotlightSceneMessage}
+              </div>
+              <div className="live-kpi" style={{ zIndex: 3 }}>
+                <span>👥 在線：{watcherCount.toLocaleString()}人</span>
+                <span>⚡ 互動率：{interactionRate}</span>
+              </div>
+              <div className="live-tip">右側留言可詢問：價格、庫存、尺寸、運送</div>
+            </div>
+          </div>
+        </section>
+        <section
+          style={{ border: '1px solid #ddd', borderRadius: 12, padding: 16 }}
+          aria-label="留言區塊"
+        >
+          <h2>直播留言</h2>
+          <p style={{ color: '#666', marginTop: 0, marginBottom: 8 }}>
+            直播間：{loadingRoom ? '載入中…' : roomName}
+          </p>
+          <div style={{ display: 'grid', gap: 8, gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', marginBottom: 10 }}>
+            <div className="sales-metric">
+              <strong>今天下單</strong>
+              <span>{todaySales} 單</span>
+            </div>
+            <div className="sales-metric">
+              <strong>近期增量</strong>
+              <span>
+                +{recentSaleBurst}
+                單/10秒
+              </span>
+            </div>
+            <div className="sales-metric">
+              <strong>預估轉化</strong>
+              <span>{estimatedConversion}%</span>
+            </div>
+          </div>
+          <div className="live-coupon">
+            <div>
+              <strong>直播限定券：</strong>
+              <code>{LIVE_COUPON_CODE}</code>
+              <span>{LIVE_COUPON_DESC}</span>
+            </div>
+            <button type="button" onClick={copyCouponCode}>
+              {couponCopied ? '已複製' : '複製優惠碼'}
+            </button>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 10 }}>
+            {QUICK_HOST_ASK_PROMPTS.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                disabled={!liveRoomId || isAskingHost}
+                onClick={() => {
+                  void askQuickHost(item.question);
+                }}
+                style={{ fontSize: 12 }}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+          <form onSubmit={addMessage} style={{ display: 'grid', gap: 8 }}>
+            <textarea
+              value={message}
+              onChange={(event) => setMessage(event.target.value)}
+              rows={2}
+              placeholder="輸入留言..."
+              style={{ width: '100%' }}
+            />
+            <button type="submit" disabled={!liveRoomId || isAskingHost}>
+              送出留言
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                void sendMessage(true);
+              }}
+              disabled={!liveRoomId || isAskingHost || !message.trim()}
+            >
+              送出並詢問主播
+            </button>
+          </form>
+          <div
+            style={{
+              marginTop: 12,
+              maxHeight: 240,
+              overflowY: 'auto',
+              border: '1px solid #eee',
+              borderRadius: 8,
+              padding: 8,
+            }}
+          >
+            {messages.map((chat) => (
+              <div
+                key={chat.id}
+                style={{
+                  marginBottom: 8,
+                  borderBottom: '1px dashed #eee',
+                  paddingBottom: 8,
+                }}
+              >
+                <strong>{chat.userName}</strong>：
+                <span
+                  style={{
+                    display: 'inline-flex',
+                    flexWrap: 'wrap',
+                    gap: 2,
+                  }}
+                >
+                  {highlightMessage(chat.message)}
+                </span>
+                {chat.productVariantId ? <span style={{ color: '#0d9488' }}>（含商品編號）</span> : null}
+                <div style={{ color: '#666', fontSize: 12 }}>{chat.at}</div>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              marginTop: 12,
+              border: '1px solid #d1fae5',
+              background: '#ecfeff',
+              borderRadius: 8,
+              padding: 8,
+            }}
+          >
+            <strong>主播回覆：</strong>
+            <div>{hostReply}</div>
+          </div>
+        </section>
+      </div>
+
+      <section
+        style={{
+          marginTop: 16,
+          border: '1px solid #ddd',
+          borderRadius: 12,
+          padding: 16,
+        }}
+      >
+        <h2>直播現場作業資訊（可見）</h2>
+        <p style={{ marginTop: 4, marginBottom: 8 }}>
+          腳本完成率：<strong>{completionRate}</strong>
+        </p>
+        <div style={{ height: 8, background: '#e5e7eb', borderRadius: 8, overflow: 'hidden', marginBottom: 12 }}>
+          <div
+            style={{
+              width: completionRate,
+              height: '100%',
+              background: 'linear-gradient(90deg, #10b981, #0ea5e9)',
+            }}
+          />
+        </div>
+        {roomOperations ? (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <div>
+              <strong>直播間目標：</strong>
+              {roomOperations.room.liveGoal || '未設定'}
+            </div>
+            <div>
+              <strong>直播狀態：</strong>
+              {roomOperations.room.status}
+            </div>
+            <div>
+              <strong>角色分工：</strong>
+              {roomOperations.assignments.length === 0 ? (
+                <p>尚未指派</p>
+              ) : (
+                <ul style={{ marginTop: 4 }}>
+                  {roomOperations.assignments.map((assignment) => (
+                    <li key={assignment.id}>
+                      {assignment.teamMember.displayName}（{assignment.teamMember.role}） - {assignment.role}
+                      {assignment.isPrimary ? '（主責）' : ''}
+                      {assignment.note ? `｜${assignment.note}` : ''}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+            <div>
+              <strong>直播腳本：</strong>
+              {roomOperations.scripts.length === 0 ? (
+                <p>尚未建立</p>
+              ) : (
+                <ol style={{ marginTop: 4 }}>
+                  {roomOperations.scripts.slice(0, 4).map((script) => (
+                    <li key={script.id}>
+                      <span style={{ color: script.isDone ? '#16a34a' : '#dc2626' }}>
+                        [{script.sequence}]
+                        {' '}
+                        {script.title}
+                        {' '}
+                        {script.isDone ? '✓' : '...'}
+                      </span>
+                      {script.cue ? ` (${script.cue})` : ''}
+                    </li>
+                  ))}
+                </ol>
+              )}
+            </div>
+            <div>
+              <strong>核對清單：</strong>
+              {roomOperations.checklists.length === 0 ? (
+                <p>尚未建立</p>
+              ) : (
+                <ul style={{ marginTop: 4 }}>
+                  {roomOperations.checklists.map((item) => (
+                    <li key={item.id}>
+                      <span style={{ color: item.isDone ? '#16a34a' : '#f97316' }}>
+                        {item.title}
+                        {' '}
+                        {item.isDone ? '完成' : '進行中'}
+                      </span>
+                      {' '}
+                      （{item.ownerRole} / {item.isRequired ? '必要' : '可選'}）
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        ) : (
+          <p>尚未有作業資料</p>
+        )}
+      </section>
+
+      <section
+        style={{
+          marginTop: 16,
+          border: '1px solid #ddd',
+          borderRadius: 12,
+          padding: 16,
+        }}
+      >
+        <h2>目前主推商品（直播購物）</h2>
+        <p style={{ marginTop: 0, color: '#475569' }}>
+          依主播回放順序自動輪播的熱門推薦；每 10 秒更新一組焦點
+        </p>
+        {spotlightProduct ? (
+          <article
+            style={{
+              border: '1px solid #2563eb',
+              borderRadius: 10,
+              padding: 12,
+              display: 'grid',
+              gap: 10,
+              background: '#eff6ff',
+              marginBottom: 12,
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
+              <strong>🚀 直播焦點</strong>
+              <span>{isDealEnded ? '已關閉' : `限時 ${dealRemaining}`}</span>
+            </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
+                <div>
+                  <div style={{ fontWeight: 700 }}>{spotlightProduct.name}</div>
+                  <div style={{ color: '#0f172a' }}>{formatNT(spotlightProduct.basePrice)}</div>
+                  <div style={{ color: '#0f172a', marginTop: 4 }}>
+                    限時剩餘進度
+                    <div style={{ height: 6, borderRadius: 999, background: '#cbd5e1', marginTop: 4 }}>
+                      <div
+                        style={{
+                          width: `${spotlightDealProgress}%`,
+                          height: '100%',
+                          borderRadius: 999,
+                          background: isDealEnded ? '#94a3b8' : 'linear-gradient(90deg, #ef4444, #f97316)',
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div style={{ color: '#334155', fontSize: 12, marginTop: 6 }}>
+                    到貨預估：{spotlightDelivery}
+                  </div>
+                  <div style={{ color: '#334155', fontSize: 12 }}>
+                    庫存：{spotlightStock} 件
+                  </div>
+                  {isSpotlightUrgentStock ? (
+                    <div style={{ color: '#be123c', fontSize: 12, marginTop: 2 }}>⚠️ 庫存偏低，請優先推播</div>
+                  ) : null}
+                  <div style={{ color: '#475569', fontSize: 12, marginTop: 2 }}>
+                    庫存壓力
+                    <div style={{ height: 6, borderRadius: 999, background: '#e2e8f0', marginTop: 4 }}>
+                      <div
+                        style={{
+                          width: `${spotlightStockPressure}%`,
+                          height: '100%',
+                          borderRadius: 999,
+                          background: spotlightStockTone,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              {spotlightProduct.imageUrl ? (
+                <img
+                  src={spotlightProduct.imageUrl}
+                  alt={spotlightProduct.name}
+                  width={96}
+                  height={96}
+                  style={{ borderRadius: 8, objectFit: 'cover' }}
+                />
+              ) : null}
+            </div>
+                {spotlightVariant ? (
+                  <div style={{ display: 'flex', gap: 8 }}>
+                    <div className="quantity-control" aria-label="主推數量">
+                      <button
+                        type="button"
+                        disabled={spotlightStock <= 0 || isDealEnded}
+                        onClick={() => updateQuantity(spotlightVariant.id, spotlightStock, -1)}
+                      >
+                        -
+                      </button>
+                      <span>{normalizeQuantity(selectedQtyByVariant[spotlightVariant.id] ?? 1, spotlightStock)}</span>
+                      <button
+                        type="button"
+                        disabled={spotlightStock <= 0 || isDealEnded}
+                        onClick={() => updateQuantity(spotlightVariant.id, spotlightStock, 1)}
+                      >
+                        +
+                      </button>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        addToCart(
+                          spotlightVariant.id,
+                          normalizeQuantity(selectedQtyByVariant[spotlightVariant.id] ?? 1, spotlightStock),
+                          spotlightStock,
+                        );
+                      }}
+                      disabled={busyVariantId === spotlightVariant.id || spotlightStock <= 0}
+                    >
+                      {spotlightStock <= 0
+                        ? '售罄'
+                        : busyVariantId === spotlightVariant.id
+                          ? '處理中...'
+                          : '加入購物車'}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        handleBuyNow(
+                          spotlightVariant.id,
+                          normalizeQuantity(selectedQtyByVariant[spotlightVariant.id] ?? 1, spotlightStock),
+                          spotlightStock,
+                        );
+                      }}
+                      disabled={busyVariantId === spotlightVariant.id || spotlightStock <= 0}
+                    >
+                      {spotlightStock <= 0
+                        ? '售罄'
+                        : busyVariantId === spotlightVariant.id
+                          ? '處理中...'
+                          : '立即下單'}
+                    </button>
+                  </div>
+            ) : (
+              <p style={{ margin: 0, color: '#64748b' }}>該商品尚無可售規格</p>
+            )}
+          </article>
+        ) : null}
+        {upsellProducts.length > 0 ? (
+          <div style={{ marginBottom: 12 }}>
+            <strong>加價購（配件）</strong>
+            <div style={{ display: 'grid', gap: 8, marginTop: 8 }}>
+              {upsellProducts.map((product) => {
+                const variant = product.variants[0];
+                const variantStock = variant?.inventory?.quantity ?? 0;
+                const variantQty = normalizeQuantity(selectedQtyByVariant[variant?.id ?? product.id] ?? 1, variantStock);
+                return (
+                  <article
+                    key={`upsell-${product.id}`}
+                    style={{
+                      border: '1px solid #f59e0b',
+                      borderRadius: 8,
+                      padding: 8,
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      background: '#fffbeb',
+                    }}
+                  >
+                    <div style={{ display: 'grid', gap: 2 }}>
+                      <strong>{product.name}</strong>
+                      <span style={{ fontSize: 12, color: '#334155' }}>{formatNT(product.basePrice)}</span>
+                      <span style={{ fontSize: 12, color: '#475569' }}>庫存：{variantStock} 件</span>
+                    </div>
+                    {variant ? (
+                      <div style={{ display: 'flex', gap: 8 }}>
+                        <div className="quantity-control" aria-label={`${product.name}加價購數量`}>
+                          <button
+                            type="button"
+                            disabled={variantStock <= 0 || isDealEnded}
+                            onClick={() => updateQuantity(variant.id, variantStock, -1)}
+                          >
+                            -
+                          </button>
+                          <span>{variantQty}</span>
+                          <button
+                            type="button"
+                            disabled={variantStock <= 0 || isDealEnded}
+                            onClick={() => updateQuantity(variant.id, variantStock, 1)}
+                          >
+                            +
+                          </button>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => addToCart(variant.id, variantQty, variantStock)}
+                          disabled={busyVariantId === variant.id || variantStock <= 0}
+                        >
+                          {variantStock <= 0 ? '售罄' : '直接加購'}
+                        </button>
+                      </div>
+                    ) : (
+                      <span style={{ fontSize: 12, color: '#64748b' }}>暫無規格</span>
+                    )}
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+        {featured.length === 0 ? (
+          <p>尚無主推商品</p>
+        ) : (
+              <div style={{ display: 'grid', gap: 12 }}>
+                {featured.map((product) => {
+                  const variant = product.variants[0];
+                  const variantStock = variant?.inventory?.quantity ?? 0;
+                  const variantQty = normalizeQuantity(selectedQtyByVariant[variant?.id ?? product.id] ?? 1, variantStock);
+                  return (
+                    <article
+                      key={product.id}
+                  style={{
+                    border: '1px solid #eee',
+                    borderRadius: 8,
+                    padding: 12,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}
+                >
+                    <div>
+                      <div style={{ fontWeight: spotlightProduct?.id === product.id ? 700 : 500 }}>
+                        {product.name}
+                      </div>
+                      <div>{formatNT(product.basePrice)}</div>
+                      <div>庫存：{variantStock} 件</div>
+                    <div style={{ color: '#64748b', fontSize: 12 }}>
+                      到貨：{deliveryEstimate(product.id)}
+                    </div>
+                    <div style={{ color: '#64748b', fontSize: 12, marginTop: 4 }}>
+                      庫存壓力：
+                      <div
+                        style={{
+                          marginTop: 2,
+                          height: 5,
+                          borderRadius: 999,
+                          width: 140,
+                          background: '#e2e8f0',
+                        }}
+                      >
+                        {(() => {
+                          const pressure = clamp(
+                            Math.max(0, Math.round(100 - (variantStock / LIVE_STOCK_DISPLAY_CAP) * 100)),
+                            0,
+                            100,
+                          );
+                          const isUrgent = variantStock > 0 && variantStock <= 12;
+                          const color = variantStock <= 0
+                            ? '#ef4444'
+                            : isUrgent
+                              ? '#ef4444'
+                              : pressure > 68
+                                ? '#f97316'
+                                : '#10b981';
+                          return (
+                            <div
+                              style={{
+                                height: '100%',
+                                width: `${pressure}%`,
+                                borderRadius: 999,
+                                background: color,
+                              }}
+                            />
+                          );
+                        })()}
+                      </div>
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', gap: 8 }}>
+                    {variant ? (
+                      <>
+                        <div className="quantity-control" aria-label={`${product.name}數量`}>
+                          <button
+                            type="button"
+                            disabled={variantStock <= 0 || isDealEnded}
+                            onClick={() => updateQuantity(variant.id, variantStock, -1)}
+                          >
+                            -
+                          </button>
+                          <span>{variantQty}</span>
+                          <button
+                            type="button"
+                            disabled={variantStock <= 0 || isDealEnded}
+                            onClick={() => updateQuantity(variant.id, variantStock, 1)}
+                          >
+                            +
+                          </button>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => addToCart(variant.id, variantQty, variantStock)}
+                          disabled={busyVariantId === variant.id || variantStock <= 0}
+                        >
+                          {variantStock <= 0
+                            ? '售罄'
+                            : busyVariantId === variant.id
+                              ? '處理中...'
+                              : '加入購物車'}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleBuyNow(variant.id, variantQty, variantStock)}
+                          disabled={busyVariantId === variant.id || variantStock <= 0}
+                        >
+                          {variantStock <= 0
+                            ? '售罄'
+                            : busyVariantId === variant.id
+                              ? '處理中...'
+                              : '立即購買'}
+                        </button>
+                      </>
+                    ) : (
+                      <span>暫無規格</span>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const idx = featured.findIndex((item) => item.id === product.id);
+                        if (idx >= 0) {
+                          setSpotlightIndex(idx);
+                        }
+                      }}
+                      disabled={spotlightProduct?.id === product.id}
+                    >
+                      {spotlightProduct?.id === product.id ? '焦點中' : '設為焦點'}
+                    </button>
+                    <Link href={`/products/${product.slug}`}>前往商品頁</Link>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        )}
+        {statusMessage ? <p style={{ marginTop: 12, color: '#333' }}>{statusMessage}</p> : null}
+      </section>
+      <style jsx>{`
+        .live-stage {
+          position: relative;
+          height: 270px;
+          border-radius: 12px;
+          overflow: hidden;
+          background:
+            radial-gradient(120px 80px at 25% 0%, rgba(59, 130, 246, 0.3), transparent 60%),
+            radial-gradient(180px 160px at 85% 20%, rgba(16, 185, 129, 0.3), transparent 55%),
+            linear-gradient(135deg, #111827, #1f2937, #0f172a);
+          border: 1px solid rgba(255, 255, 255, 0.22);
+          color: #fff;
+        }
+
+        .live-video-wrap {
+          position: absolute;
+          inset: 0;
+          padding: 6px;
+          z-index: 1;
+          background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.65));
+          display: grid;
+          place-items: center;
+        }
+
+        .live-video-frame {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          max-height: 100%;
+          border: 1px solid rgba(255, 255, 255, 0.24);
+          border-radius: 10px;
+          object-fit: cover;
+          background: #000;
+        }
+
+        .stream-pulse {
+          position: absolute;
+          inset: 0;
+          z-index: 2;
+          background:
+            repeating-radial-gradient(
+              circle at 50% 100%,
+              rgba(255, 255, 255, 0.14),
+              rgba(255, 255, 255, 0.14) 4px,
+              transparent 4px,
+              transparent 8px
+            );
+          opacity: 0.24;
+          animation: scanline 4s linear infinite;
+        }
+
+        .floating-orb {
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          border-radius: 999px;
+          background: rgba(59, 130, 246, 0.9);
+          box-shadow: 0 0 16px rgba(59, 130, 246, 0.8);
+          filter: blur(0.2px);
+          animation: float 6s ease-in-out infinite;
+        }
+
+        .orb-a {
+          top: 26%;
+          left: 18%;
+          animation-delay: 0s;
+        }
+
+        .orb-b {
+          top: 55%;
+          right: 14%;
+          width: 10px;
+          height: 10px;
+          animation-delay: 2s;
+        }
+
+        .orb-c {
+          bottom: 22%;
+          left: 56%;
+          width: 12px;
+          height: 12px;
+          animation-delay: 4s;
+        }
+
+        .virtual-host-avatar {
+          position: absolute;
+          left: 50%;
+          top: 48%;
+          z-index: 4;
+          transform: translate(-50%, -50%);
+          width: 176px;
+          padding: 10px 10px 12px;
+          border-radius: 18px;
+          background: linear-gradient(180deg, rgba(15, 23, 42, 0.93), rgba(15, 23, 42, 0.76));
+          border: 1px solid rgba(255, 255, 255, 0.35);
+          box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
+          text-align: center;
+          display: grid;
+          justify-items: center;
+          gap: 8px;
+          animation: floatBob 4.2s ease-in-out infinite;
+        }
+
+        .virtual-host-avatar.talking {
+          animation-duration: 1.4s;
+          box-shadow: 0 14px 28px rgba(16, 185, 129, 0.45);
+        }
+
+        .avatar-shell {
+          position: relative;
+          width: 120px;
+          height: 130px;
+        }
+
+        .avatar-head {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 102px;
+          height: 112px;
+          border-radius: 56px 56px 44px 44px;
+          background: linear-gradient(180deg, #fbc89a, #e39f68 55%, #be7a4c);
+          border: 1px solid rgba(255, 255, 255, 0.4);
+          box-shadow: inset 0 -6px 0 rgba(129, 72, 27, 0.35), 0 5px 14px rgba(0, 0, 0, 0.35);
+          z-index: 2;
+        }
+
+        .avatar-hair {
+          position: absolute;
+          top: 0;
+          left: 6px;
+          width: 90px;
+          height: 28px;
+          border-radius: 45px 45px 16px 16px;
+          background: linear-gradient(180deg, #1f2937, #374151);
+          box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.12);
+        }
+
+        .avatar-face {
+          position: absolute;
+          top: 30px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 74px;
+          height: 52px;
+          border-radius: 8px;
+          background: linear-gradient(180deg, rgba(250, 219, 191, 0.85), rgba(236, 190, 156, 0.5));
+        }
+
+        .avatar-eye {
+          position: absolute;
+          top: 16px;
+          width: 10px;
+          height: 12px;
+          border-radius: 999px;
+          background: #111827;
+          box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8);
+          animation: avatarBlink 4.2s infinite;
+          transform-origin: center center;
+        }
+
+        .avatar-eye::before {
+          content: '';
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: 4px;
+          height: 5px;
+          border-radius: 50%;
+          background: #fff;
+        }
+
+        .avatar-eye.eye-right {
+          right: 18px;
+        }
+
+        .avatar-eye:not(.eye-right) {
+          left: 18px;
+        }
+
+        .avatar-mouth {
+          position: absolute;
+          left: 50%;
+          bottom: 8px;
+          width: 22px;
+          height: 6px;
+          background: #4c1d95;
+          border-radius: 0 0 16px 16px;
+          border: 1px solid #2d0a5f;
+          transform: translateX(-50%);
+          transform-origin: center center;
+          transition: transform 140ms ease;
+        }
+
+        .virtual-host-avatar.talking .avatar-mouth {
+          animation: avatarMouth 0.22s linear infinite;
+        }
+
+        .avatar-nose {
+          position: absolute;
+          left: 50%;
+          top: 27px;
+          width: 5px;
+          height: 10px;
+          border-radius: 0 0 2px 2px;
+          transform: translateX(-50%);
+          background: rgba(160, 96, 56, 0.9);
+          opacity: 0.8;
+        }
+
+        .avatar-cheek {
+          position: absolute;
+          width: 16px;
+          height: 7px;
+          background: rgba(248, 113, 113, 0.26);
+          border-radius: 999px;
+          bottom: 18px;
+          transform: translateY(2px);
+        }
+
+        .cheek-left {
+          left: 22px;
+        }
+
+        .cheek-right {
+          right: 22px;
+        }
+
+        .avatar-body {
+          position: absolute;
+          left: 50%;
+          top: 104px;
+          transform: translateX(-50%);
+          width: 74px;
+          height: 15px;
+          border-radius: 50%;
+          background: linear-gradient(180deg, rgba(45, 67, 120, 0.82), rgba(30, 41, 87, 0.84));
+          filter: blur(0.2px);
+          z-index: 1;
+        }
+
+        .avatar-arm {
+          position: absolute;
+          width: 22px;
+          height: 44px;
+          top: 92px;
+          background: linear-gradient(180deg, #f5ccb8, #e6a67d);
+          border: 1px solid rgba(255, 255, 255, 0.4);
+          border-radius: 14px;
+          transform-origin: top center;
+          z-index: 0;
+        }
+
+        .avatar-arm-left {
+          left: 19px;
+          border-radius: 14px 14px 0 0;
+          transform: rotate(38deg);
+        }
+
+        .avatar-arm-right {
+          right: 19px;
+          border-radius: 14px 14px 0 0;
+          transform: rotate(-42deg);
+        }
+
+        .virtual-host-avatar.talking .avatar-arm-right {
+          animation: avatarWave 0.45s ease-in-out infinite;
+        }
+
+        .avatar-glow {
+          position: absolute;
+          inset: 4px;
+          border-radius: 40px;
+          border: 1px solid rgba(96, 165, 250, 0.4);
+          opacity: 0.6;
+          animation: avatarAura 2.4s ease-in-out infinite;
+        }
+
+        .avatar-state-text {
+          color: #dbeafe;
+          font-size: 11px;
+          opacity: 0.88;
+          line-height: 1.2;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+        }
+
+        .virtual-host-fullscreen {
+          position: absolute;
+          inset: 0;
+          border-radius: 10px;
+          overflow: hidden;
+          transform: scale(1);
+          transition: transform 360ms ease, box-shadow 260ms ease, border-color 260ms ease, filter 260ms ease;
+          border: 1px solid rgba(255, 255, 255, 0.12);
+          box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.35), inset 0 0 40px rgba(15, 23, 42, 0.28);
+        }
+
+        .virtual-host-fullscreen.is-speaking {
+          border-color: rgba(34, 211, 238, 0.55);
+          transform: scale(1.008);
+          box-shadow: 0 0 24px rgba(34, 211, 238, 0.28), inset 0 0 55px rgba(15, 23, 42, 0.25);
+          filter: saturate(1.06) contrast(1.06);
+        }
+
+        .live-kpi {
+          position: absolute;
+          left: 12px;
+          bottom: 44px;
+          z-index: 4;
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+          padding: 4px 10px;
+          border-radius: 999px;
+          background: rgba(2, 132, 199, 0.36);
+          border: 1px solid rgba(255, 255, 255, 0.35);
+          color: #ecfeff;
+          font-size: 12px;
+          backdrop-filter: blur(4px);
+        }
+
+        .real-host-name {
+          color: #f8fafc;
+          font-size: 13px;
+          font-weight: 700;
+          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+        }
+
+        .live-caption {
+          position: absolute;
+          top: 12px;
+          left: 12px;
+          z-index: 4;
+          padding: 4px 10px;
+          background: #ef4444;
+          color: #fff;
+          border-radius: 999px;
+          font-size: 12px;
+          animation: pulseLive 1.2s ease-in-out infinite;
+        }
+
+        .live-caption.is-urgent {
+          background: #b91c1c;
+          box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
+          animation:
+            pulseLive 1.2s ease-in-out infinite,
+            urgencyShake 1.6s ease-in-out infinite;
+        }
+
+        .live-scene-cue {
+          position: absolute;
+          left: 12px;
+          right: 12px;
+          top: 38px;
+          z-index: 3;
+          padding: 3px 10px;
+          border-radius: 10px;
+          background: rgba(14, 116, 144, 0.72);
+          color: #ecfeff;
+          font-size: 11px;
+          letter-spacing: 0.02em;
+          display: flex;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .chat-hotword {
+          display: inline;
+          color: #0f172a;
+          background: #fef08a;
+          border-radius: 4px;
+          padding: 0 4px;
+          margin: 0 1px;
+        }
+
+        .sales-metric {
+          border: 1px solid rgba(148, 163, 184, 0.45);
+          border-radius: 10px;
+          background: #f8fafc;
+          padding: 8px;
+          display: grid;
+          gap: 2px;
+          min-height: 55px;
+        }
+
+        .sales-metric strong {
+          color: #0f172a;
+          font-size: 12px;
+        }
+
+        .sales-metric span {
+          color: #334155;
+          font-size: 13px;
+          font-weight: 700;
+        }
+
+        .live-coupon {
+          margin-bottom: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+          border: 1px dashed #1d4ed8;
+          border-radius: 10px;
+          padding: 8px;
+          background: #e0ecff;
+          font-size: 13px;
+          flex-wrap: wrap;
+        }
+
+        .live-coupon code {
+          margin: 0 6px;
+          padding: 2px 6px;
+          border-radius: 6px;
+          background: #1e40af;
+          color: #fff;
+          font-weight: 700;
+        }
+
+        .live-coupon button {
+          padding: 6px 10px;
+          border: 1px solid #1d4ed8;
+          border-radius: 8px;
+          background: #1d4ed8;
+          color: #fff;
+        }
+
+        .quantity-control {
+          display: inline-flex;
+          align-items: center;
+          border: 1px solid #cbd5e1;
+          border-radius: 8px;
+          overflow: hidden;
+          height: 28px;
+        }
+
+        .quantity-control button {
+          width: 28px;
+          height: 28px;
+          border: none;
+          background: #f1f5f9;
+        }
+
+        .quantity-control span {
+          min-width: 30px;
+          text-align: center;
+          font-size: 12px;
+          color: #334155;
+          background: #fff;
+        }
+
+        .host-status-badge {
+          position: absolute;
+          left: 12px;
+          top: 44px;
+          z-index: 4;
+          border-radius: 999px;
+          background: rgba(37, 99, 235, 0.85);
+          color: #fff;
+          padding: 6px 10px;
+          font-size: 12px;
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+          border: 1px solid rgba(255, 255, 255, 0.25);
+        }
+
+        .host-status-badge strong {
+          font-size: 11px;
+          opacity: 0.9;
+        }
+
+        .live-tip {
+          position: absolute;
+          right: 12px;
+          bottom: 12px;
+          z-index: 4;
+          background: rgba(0, 0, 0, 0.35);
+          border-radius: 999px;
+          padding: 4px 10px;
+          font-size: 12px;
+          color: #fff;
+        }
+
+        @keyframes floatBob {
+          0%, 100% {
+            transform: translate(-50%, -50%) rotate(-1.8deg) translateY(0);
+          }
+          50% {
+            transform: translate(-50%, -50%) rotate(1.8deg) translateY(-10px);
+          }
+        }
+
+        @keyframes float {
+          0%,
+          100% {
+            transform: translateY(6px);
+          }
+          50% {
+            transform: translateY(-12px);
+          }
+        }
+
+        @keyframes scanline {
+          0% {
+            transform: translateY(0);
+          }
+          100% {
+            transform: translateY(-16px);
+          }
+        }
+
+        @keyframes avatarBlink {
+          0%,
+          88%,
+          100% {
+            transform: scaleY(1);
+          }
+          90%,
+          92% {
+            transform: scaleY(0.08);
+          }
+        }
+
+        @keyframes avatarMouth {
+          0%,
+          100% {
+            transform: translateX(-50%) scaleY(1);
+            width: 22px;
+            border-radius: 0 0 15px 15px;
+          }
+          50% {
+            transform: translateX(-50%) scaleY(0.35) translateY(1px);
+            width: 20px;
+            border-radius: 999px 999px 14px 14px;
+          }
+        }
+
+        @keyframes avatarWave {
+          0%,
+          100% {
+            transform: rotate(-36deg);
+          }
+          50% {
+            transform: rotate(-74deg);
+          }
+        }
+
+        @keyframes avatarAura {
+          0%,
+          100% {
+            opacity: 0.4;
+          }
+          50% {
+            opacity: 0.75;
+          }
+        }
+
+        @keyframes pulseLive {
+          0% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.58;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+
+        @keyframes urgencyShake {
+          0%,
+          100% {
+            transform: translateX(0);
+          }
+          20% {
+            transform: translateX(-1px);
+          }
+          40% {
+            transform: translateX(1px);
+          }
+          60% {
+            transform: translateX(-1px);
+          }
+          80% {
+            transform: translateX(1px);
+          }
+        }
+      `}</style>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/live/page.tsx b/apps/web/src/app/live/page.tsx
new file mode 100644
index 0000000..03bbd01
--- /dev/null
+++ b/apps/web/src/app/live/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function LivePageRedirect() {
+  redirect('/live/demo');
+}
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 0000000..26b3b8a
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function NotFound() {
+  redirect('/live/demo');
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
new file mode 100644
index 0000000..81a858b
--- /dev/null
+++ b/apps/web/src/app/page.tsx
@@ -0,0 +1,16 @@
+export default function HomePage() {
+  return (
+    <main style={{ padding: 32, fontFamily: 'system-ui' }}>
+      <h1>VTuber 前台 Demo</h1>
+      <p>Day 2：商品清單、商品頁、購物車、mock 結帳已可展示。</p>
+      <a href="/products">進入商品列表</a>
+      <div>
+        <a href="/live/demo">進入直播 Demo</a>
+      </div>
+      <ul>
+        <li><a href="/cart">前往購物車</a></li>
+        <li><a href="/checkout">前往結帳</a></li>
+      </ul>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/products/[slug]/page.tsx b/apps/web/src/app/products/[slug]/page.tsx
new file mode 100644
index 0000000..442852b
--- /dev/null
+++ b/apps/web/src/app/products/[slug]/page.tsx
@@ -0,0 +1,73 @@
+import Image from 'next/image';
+import AddToCartButton from '../../../components/add-to-cart-button';
+import { API_BASE_URL } from '../../../lib/api';
+
+type Inventory = {
+  quantity: number;
+};
+
+type ProductVariant = {
+  id: string;
+  name: string;
+  price: number;
+  size: string | null;
+  sku: string;
+  inventory: Inventory | null;
+};
+
+type Product = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  imageUrl: string | null;
+  basePrice: number;
+  variants: ProductVariant[];
+};
+
+async function fetchProduct(slug: string): Promise<Product | null> {
+  const response = await fetch(`${API_BASE_URL}/products/${slug}`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) return null;
+  return response.json();
+}
+
+export default async function ProductDetailPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const product = await fetchProduct(params.slug);
+
+  if (!product) {
+    return (
+      <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+        <h1>找不到商品</h1>
+      </main>
+    );
+  }
+
+  const variant = product.variants[0];
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>{product.name}</h1>
+      {product.imageUrl ? (
+        <Image
+          src={product.imageUrl}
+          alt={product.name}
+          width={360}
+          height={360}
+          style={{ width: '100%', maxWidth: 360, height: 'auto' }}
+        />
+      ) : null}
+      <p>{product.description ?? '無描述'}</p>
+      <h3>售價：NT$ {product.basePrice}</h3>
+      <p>預設款：{variant?.name ?? '暫無款式'}</p>
+      <p>尺寸：{variant?.size ?? '-'}</p>
+      <p>庫存：{variant?.inventory?.quantity ?? 0}</p>
+      {variant ? <AddToCartButton variantId={variant.id} /> : <p>尚無可販售款式</p>}
+    </main>
+  );
+}
diff --git a/apps/web/src/app/products/page.tsx b/apps/web/src/app/products/page.tsx
new file mode 100644
index 0000000..29368ae
--- /dev/null
+++ b/apps/web/src/app/products/page.tsx
@@ -0,0 +1,93 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { API_BASE_URL } from '../../lib/api';
+
+type Inventory = {
+  quantity: number;
+};
+
+type ProductVariant = {
+  id: string;
+  name: string;
+  price: number;
+  size: string | null;
+  inventory: Inventory | null;
+};
+
+type Product = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  imageUrl: string | null;
+  basePrice: number;
+  variants: ProductVariant[];
+};
+
+async function fetchProducts(): Promise<Product[]> {
+  const response = await fetch(`${API_BASE_URL}/products`, {
+    cache: 'no-store',
+  });
+  if (!response.ok) {
+    return [];
+  }
+  return response.json();
+}
+
+export default async function ProductsPage() {
+  const products = await fetchProducts();
+
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
+      <h1>VTuber 商品列表</h1>
+      <p>
+        <Link href="/cart">前往購物車</Link>
+      </p>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+          gap: 16,
+        }}
+      >
+        {products.map((product) => (
+          <article
+            key={product.id}
+            style={{
+              border: '1px solid #ddd',
+              borderRadius: 8,
+              padding: 12,
+            }}
+          >
+            <h3>{product.name}</h3>
+            {product.imageUrl ? (
+              <Image
+                src={product.imageUrl}
+                alt={product.name}
+                width={320}
+                height={320}
+                style={{
+                  width: '100%',
+                  height: 'auto',
+                  borderRadius: 8,
+                  marginBottom: 8,
+                }}
+              />
+            ) : null}
+            <p>{product.description ?? '無描述'}</p>
+            <p>售價：NT$ {product.basePrice}</p>
+            <p>
+              尺寸數：
+              {product.variants.length}
+            </p>
+            <p>
+              庫存：
+              {product.variants[0]?.inventory?.quantity ?? 0}
+            </p>
+            <Link href={`/products/${product.slug}`}>查看商品</Link>
+          </article>
+        ))}
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/zh-CN/live/demo/page.tsx b/apps/web/src/app/zh-CN/live/demo/page.tsx
new file mode 100644
index 0000000..e1c39d1
--- /dev/null
+++ b/apps/web/src/app/zh-CN/live/demo/page.tsx
@@ -0,0 +1,5 @@
+import LiveDemoPage from '../../../live/demo/page';
+
+export default function ZhCnLiveDemoPage() {
+  return <LiveDemoPage />;
+}
diff --git a/apps/web/src/app/zh-CN/live/page.tsx b/apps/web/src/app/zh-CN/live/page.tsx
new file mode 100644
index 0000000..6ca4c19
--- /dev/null
+++ b/apps/web/src/app/zh-CN/live/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function ZhCnLivePageRedirect() {
+  redirect('/zh-CN/live/demo');
+}
diff --git a/apps/web/src/app/zh-TW/live/demo/page.tsx b/apps/web/src/app/zh-TW/live/demo/page.tsx
new file mode 100644
index 0000000..20d9d39
--- /dev/null
+++ b/apps/web/src/app/zh-TW/live/demo/page.tsx
@@ -0,0 +1,5 @@
+import LiveDemoPage from '../../../live/demo/page';
+
+export default function ZhTwLiveDemoPage() {
+  return <LiveDemoPage />;
+}
diff --git a/apps/web/src/app/zh-TW/live/page.tsx b/apps/web/src/app/zh-TW/live/page.tsx
new file mode 100644
index 0000000..a63135d
--- /dev/null
+++ b/apps/web/src/app/zh-TW/live/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function ZhTwLivePageRedirect() {
+  redirect('/zh-TW/live/demo');
+}
diff --git a/apps/web/src/components/add-to-cart-button.tsx b/apps/web/src/components/add-to-cart-button.tsx
new file mode 100644
index 0000000..b91b42c
--- /dev/null
+++ b/apps/web/src/components/add-to-cart-button.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+import { API_BASE_URL, getSessionId } from '../lib/api';
+
+type AddToCartButtonProps = {
+  variantId: string;
+};
+
+export default function AddToCartButton({ variantId }: AddToCartButtonProps) {
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  async function handleAdd() {
+    setLoading(true);
+    setMessage('');
+    try {
+      const sessionId = getSessionId();
+      const response = await fetch(`${API_BASE_URL}/cart/items`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          productVariantId: variantId,
+          quantity: 1,
+        }),
+      });
+      if (!response.ok) {
+        const message = await response.text();
+        throw new Error(message || '加入購物車失敗');
+      }
+      setMessage('已加入購物車');
+    } catch (error) {
+      setMessage(
+        error instanceof Error ? error.message : '加入購物車發生錯誤',
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ display: 'grid', gap: 8 }}>
+      <button type="button" onClick={handleAdd} disabled={loading}>
+        {loading ? '加入中...' : '加入購物車'}
+      </button>
+      {message ? <div>{message}</div> : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/virtual-host.tsx b/apps/web/src/components/virtual-host.tsx
new file mode 100644
index 0000000..fbd118f
--- /dev/null
+++ b/apps/web/src/components/virtual-host.tsx
@@ -0,0 +1,286 @@
+'use client';
+
+import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+export interface VirtualHostRef {
+  speak: (text: string) => void;
+}
+
+const VirtualHost = forwardRef<VirtualHostRef, {}>((props, ref) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  const headMeshRef = useRef<THREE.SkinnedMesh | null>(null);
+  const isSpeakingRef = useRef(false);
+
+  useImperativeHandle(ref, () => ({
+    speak: (text: string) => {
+      if (!('speechSynthesis' in window)) {
+        console.warn('SpeechSynthesis is not supported in this browser.');
+        return;
+      }
+
+      window.speechSynthesis.cancel();
+
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = 'zh-TW';
+      utterance.rate = 1.1;
+      utterance.pitch = 1.1;
+
+      const voices = window.speechSynthesis.getVoices();
+      const femaleVoice = voices.find(v => v.lang.includes('zh') && (v.name.includes('Yating') || v.name.includes('Xiaoxiao') || v.name.includes('female') || v.name.includes('Mei-Jia')));
+      if (femaleVoice) {
+        utterance.voice = femaleVoice;
+      }
+
+      utterance.onstart = () => {
+        setIsSpeaking(true);
+        isSpeakingRef.current = true;
+      };
+
+      utterance.onend = () => {
+        setIsSpeaking(false);
+        isSpeakingRef.current = false;
+        if (headMeshRef.current?.morphTargetInfluences) {
+          const dict = headMeshRef.current.morphTargetDictionary;
+          if (dict) {
+            ['viseme_aa', 'viseme_E', 'viseme_I', 'viseme_O', 'viseme_U'].forEach(v => {
+              if (dict[v] !== undefined) headMeshRef.current!.morphTargetInfluences![dict[v]] = 0;
+            });
+          }
+        }
+      };
+
+      window.speechSynthesis.speak(utterance);
+    }
+  }));
+
+  useEffect(() => {
+    const currentContainer = containerRef.current;
+    if (!currentContainer) return;
+
+    const width = currentContainer.clientWidth;
+    const height = currentContainer.clientHeight;
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xf1f5f9); // Clean slate-100 background
+
+    const camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 20.0);
+    camera.position.set(0.0, 1.5, 1.8);
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.0;
+    currentContainer.appendChild(renderer.domElement);
+
+    // Hemisphere light for soft natural outdoor/studio look
+    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 2.0);
+    hemiLight.position.set(0, 20, 0);
+    scene.add(hemiLight);
+
+    // Main directional light to highlight face clearly
+    const dirLight = new THREE.DirectionalLight(0xffffff, 2.5);
+    dirLight.position.set(0, 2, 4);
+    dirLight.castShadow = true;
+    dirLight.shadow.mapSize.width = 1024;
+    dirLight.shadow.mapSize.height = 1024;
+    scene.add(dirLight);
+
+    // Soft fill light from the opposite side
+    const fillLight = new THREE.DirectionalLight(0xd0e0ff, 1.0);
+    fillLight.position.set(-2, 1, 2);
+    scene.add(fillLight);
+
+    // Boost overall brightness
+    const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
+    scene.add(ambientLight);
+
+    let modelGroup: THREE.Group | null = null;
+    const loader = new GLTFLoader();
+
+    // Using a reliable Ready Player Me demo avatar (female) hosted locally due to DNS issues
+    const avatarSources = ['/models/realistic-host.glb?v=1', '/models/xiaoyai.vrm?v=3'];
+
+    const loadAvatar = (sourceIndex = 0) => {
+      const source = avatarSources[sourceIndex];
+      if (!source) {
+        setIsLoaded(true);
+        setLoadError('已嘗試所有模型來源，仍無法載入虛擬主播模型');
+        return;
+      }
+
+      loader.load(
+      source,
+      (gltf) => {
+        const model = gltf.scene;
+        model.traverse((child) => {
+          if (child instanceof THREE.Mesh || child instanceof THREE.SkinnedMesh) {
+            child.castShadow = true;
+            child.receiveShadow = true;
+            if (child.name === 'Wolf3D_Head' || child.name === 'Wolf3D_Avatar') {
+              headMeshRef.current = child as THREE.SkinnedMesh;
+            }
+          }
+        });
+
+        const box = new THREE.Box3().setFromObject(model);
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+
+        // Auto position model to center its bounds
+        model.position.x += (model.position.x - center.x);
+        model.position.y += (model.position.y - center.y);
+        model.position.z += (model.position.z - center.z);
+
+        // Offset Y down slightly so it looks like a bust
+        model.position.y -= size.y * 0.15;
+
+        // Ensure camera looks at the center of the model
+        camera.position.set(0, size.y * 0.1, size.y * 1.3);
+        camera.lookAt(0, 0, 0);
+
+        scene.add(model);
+        modelGroup = model;
+        setIsLoaded(true);
+      },
+      undefined,
+      (error) => {
+        if (sourceIndex + 1 < avatarSources.length) {
+          loadAvatar(sourceIndex + 1);
+          return;
+        }
+        console.error('Failed to load RPM Avatar:', error);
+        setLoadError(error instanceof Error ? error.message : String(error));
+        setIsLoaded(true); // Set to true to hide the spinner and show the error message
+      }
+    );
+    };
+
+    loadAvatar();
+
+    const clock = new THREE.Clock();
+    let animationId: number;
+
+    const animate = () => {
+      animationId = requestAnimationFrame(animate);
+      const time = clock.getElapsedTime();
+
+      if (modelGroup) {
+        const spine = modelGroup.getObjectByName('Spine');
+        const head = modelGroup.getObjectByName('Head');
+        const rightArm = modelGroup.getObjectByName('RightArm');
+        const leftArm = modelGroup.getObjectByName('LeftArm');
+
+        if (spine) spine.rotation.x = Math.sin(time * 1.5) * 0.02;
+        if (head) {
+          head.rotation.y = Math.sin(time * 0.5) * 0.05;
+          head.rotation.x = Math.sin(time * 0.8) * 0.02;
+        }
+
+        if (rightArm && rightArm.rotation.z > -1.0) rightArm.rotation.z = -1.2;
+        if (leftArm && leftArm.rotation.z < 1.0) leftArm.rotation.z = 1.2;
+      }
+
+      if (headMeshRef.current?.morphTargetDictionary) {
+        const dict = headMeshRef.current.morphTargetDictionary;
+        const blinkIdx = dict['eyeBlink_L'] ?? dict['eyesClosed'];
+        if (blinkIdx !== undefined && headMeshRef.current.morphTargetInfluences) {
+           const isBlinking = (Math.sin(time * 4) > 0.98);
+           headMeshRef.current.morphTargetInfluences[blinkIdx] = isBlinking ? 1 : 0;
+           const blinkIdxR = dict['eyeBlink_R'];
+           if (blinkIdxR !== undefined) headMeshRef.current.morphTargetInfluences[blinkIdxR] = isBlinking ? 1 : 0;
+        }
+      }
+
+      if (isSpeakingRef.current && headMeshRef.current?.morphTargetDictionary && headMeshRef.current?.morphTargetInfluences) {
+        const dict = headMeshRef.current.morphTargetDictionary;
+        const t = time * 15;
+        const v = (Math.sin(t) + Math.sin(t * 1.5) + Math.sin(t * 2.3)) / 3;
+        const open = Math.max(0, v * 1.2);
+
+        ['viseme_aa', 'viseme_E', 'viseme_I', 'viseme_O', 'viseme_U'].forEach(vis => {
+          if (dict[vis] !== undefined) headMeshRef.current!.morphTargetInfluences![dict[vis]] = 0;
+        });
+
+        if (dict['viseme_aa'] !== undefined) headMeshRef.current.morphTargetInfluences[dict['viseme_aa']] = open;
+        if (Math.random() < 0.2 && dict['viseme_O'] !== undefined) {
+           headMeshRef.current.morphTargetInfluences[dict['viseme_O']] = Math.random() * 0.5;
+        }
+      }
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    const handleResize = () => {
+      if (!currentContainer) return;
+      const w = currentContainer.clientWidth;
+      const h = currentContainer.clientHeight;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      cancelAnimationFrame(animationId);
+      if (currentContainer && renderer.domElement) {
+        currentContainer.removeChild(renderer.domElement);
+      }
+      renderer.dispose();
+      scene.clear();
+    };
+  }, []);
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <div
+        ref={containerRef}
+        style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative', zIndex: 10 }}
+      />
+      {!isLoaded && !loadError && (
+        <div style={{
+          position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
+          alignItems: 'center', justifyContent: 'center',
+          backgroundColor: '#f1f5f9', color: '#1e293b', zIndex: 20
+        }}>
+          <div style={{
+            width: 40, height: 40, border: '3px solid rgba(0,0,0,0.1)',
+            borderTopColor: '#3b82f6', borderRadius: '50%', animation: 'spin 1s linear infinite',
+            marginBottom: 16
+          }} />
+          <style>{`
+            @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+          `}</style>
+          <span style={{ fontSize: '1rem', letterSpacing: '1px' }}>連線寫實虛擬主播中... (v2)</span>
+        </div>
+      )}
+
+      {loadError && (
+        <div style={{
+          position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
+          alignItems: 'center', justifyContent: 'center',
+          backgroundColor: '#f1f5f9', color: '#ef4444', zIndex: 20, padding: 20, textAlign: 'center'
+        }}>
+          <span style={{ fontSize: '1.2rem', fontWeight: 'bold', marginBottom: 8 }}>模型載入失敗</span>
+          <span style={{ fontSize: '0.9rem' }}>{loadError}</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+VirtualHost.displayName = 'VirtualHost';
+
+export default VirtualHost;
diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
new file mode 100644
index 0000000..99d7864
--- /dev/null
+++ b/apps/web/src/lib/api.ts
@@ -0,0 +1,31 @@
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:4000/api';
+
+export function getSessionId(): string {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  const key = 'vtuber-session-id';
+  const existing = localStorage.getItem(key);
+  if (existing) return existing;
+  const next = `v-${Math.random().toString(16).slice(2)}-${Date.now()}`;
+  localStorage.setItem(key, next);
+  return next;
+}
+
+export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init?.headers as Record<string, string>),
+    },
+    ...init,
+  });
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(text || `API error: ${response.status}`);
+  }
+  if (response.status === 204) {
+    return {} as T;
+  }
+  return response.json() as Promise<T>;
+}
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
new file mode 100644
index 0000000..1c2d665
--- /dev/null
+++ b/apps/web/src/middleware.ts
@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+const SUPPORTED_LOCALES = new Set(['zh-TW', 'en', 'zh-CN', 'ja']);
+
+function shouldSkipLocaleRewrite(pathname: string) {
+  return (
+    pathname.startsWith('/_next') ||
+    pathname.startsWith('/api') ||
+    pathname.startsWith('/favicon.ico') ||
+    pathname.includes('.')
+  );
+}
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (shouldSkipLocaleRewrite(pathname)) {
+    return NextResponse.next();
+  }
+
+  const match = pathname.match(/^\/([^/]+)(\/.*)?$/);
+  if (!match) {
+    return NextResponse.next();
+  }
+
+  const locale = match[1];
+  if (!SUPPORTED_LOCALES.has(locale)) {
+    return NextResponse.next();
+  }
+
+  const nextPath = pathname.replace(`/${locale}`, '') || '/';
+  const nextUrl = request.nextUrl.clone();
+  nextUrl.pathname = nextPath;
+
+  return NextResponse.rewrite(nextUrl);
+}
+
+export const config = {
+  matcher: '/:path*',
+};
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
new file mode 100644
index 0000000..5aec35a
--- /dev/null
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/deploy/apply-nginx-110-live-fallback.sh b/deploy/apply-nginx-110-live-fallback.sh
new file mode 100755
index 0000000..4a8812a
--- /dev/null
+++ b/deploy/apply-nginx-110-live-fallback.sh
@@ -0,0 +1,79 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ENV_FILE="${SCRIPT_DIR}/.env.prod"
+if [ ! -f "${ENV_FILE}" ]; then
+  echo "❌ 找不到 deploy/.env.prod，請先建立後再執行。"
+  exit 1
+fi
+
+source "${ENV_FILE}"
+
+DEPLOY_HOST="${DEPLOY_HOST:-}"
+DEPLOY_USER="${DEPLOY_USER:-}"
+DEPLOY_PORT="${DEPLOY_PORT:-22}"
+APP_DOMAIN="${APP_DOMAIN:-vtuber.wooo.work}"
+NGINX_SERVER_CONFIG="${NGINX_SERVER_CONFIG:-}"
+SNIPPET_SRC="${SCRIPT_DIR}/vtuber-nginx-110-live-fallback.conf"
+SNIPPET_REMOTE="/etc/nginx/snippets/vtuber-nginx-110-live-fallback.conf"
+
+if [ -z "${DEPLOY_HOST}" ] || [ -z "${DEPLOY_USER}" ]; then
+  echo "❌ deploy/.env.prod 缺少 DEPLOY_HOST / DEPLOY_USER"
+  exit 1
+fi
+
+REMOTE="${DEPLOY_USER}@${DEPLOY_HOST}"
+SSH_OPTS=(-p "${DEPLOY_PORT}")
+SCP_OPTS=(-P "${DEPLOY_PORT}")
+NGINX_SNIPPET_TAG="vtuber-nginx-110-live-fallback.conf"
+TMP_SNIPPET="/tmp/vtuber-nginx-110-live-fallback.conf"
+
+if [ -z "${NGINX_SERVER_CONFIG}" ]; then
+  echo "未指定 NGINX_SERVER_CONFIG，開始自動偵測..."
+  NGINX_SERVER_CONFIG="$(
+    ssh "${SSH_OPTS[@]}" "${REMOTE}" "
+      if [ -f '/etc/nginx/conf.d/vtuber.wooo.conf' ]; then
+        echo '/etc/nginx/conf.d/vtuber.wooo.conf'
+      elif [ -f \"/etc/nginx/sites-available/${APP_DOMAIN}\" ]; then
+        echo '/etc/nginx/sites-available/${APP_DOMAIN}'
+      elif [ -f '/etc/nginx/sites-enabled/vtuber.wooo.work' ]; then
+        echo '/etc/nginx/sites-enabled/vtuber.wooo.work'
+      else
+        grep -R -l \"server_name[[:space:]]\\+.*${APP_DOMAIN}\" /etc/nginx/sites-enabled /etc/nginx/sites-available /etc/nginx/conf.d 2>/dev/null | head -n 1
+      fi
+    "
+  )"
+fi
+
+if [ -z "${NGINX_SERVER_CONFIG}" ]; then
+  echo "❌ 無法自動找出 vtuber 的 nginx 設定檔，請手動指定 NGINX_SERVER_CONFIG 環境變數"
+  exit 1
+fi
+
+echo "目標主機：${REMOTE}"
+echo "目標網域：${APP_DOMAIN}"
+echo "目標 Nginx 設定：${NGINX_SERVER_CONFIG}"
+
+ssh "${SSH_OPTS[@]}" "${REMOTE}" "test -f '${SNIPPET_REMOTE}' && sudo chmod 644 '${SNIPPET_REMOTE}' || true"
+ssh "${SSH_OPTS[@]}" "${REMOTE}" "test -f '${NGINX_SERVER_CONFIG}' || { echo 'Nginx 設定檔不存在：${NGINX_SERVER_CONFIG}' >&2; exit 1; }"
+scp "${SCP_OPTS[@]}" "${SNIPPET_SRC}" "${REMOTE}:${TMP_SNIPPET}"
+ssh "${SSH_OPTS[@]}" "${REMOTE}" "sudo cp '${TMP_SNIPPET}' '${SNIPPET_REMOTE}' && sudo chmod 644 '${SNIPPET_REMOTE}'"
+
+ssh "${SSH_OPTS[@]}" "${REMOTE}" "
+  set -euo pipefail
+  sudo cp '${NGINX_SERVER_CONFIG}' '${NGINX_SERVER_CONFIG}.bak.\$(date +%F_%H%M%S)'
+  if ! sudo grep -q '${NGINX_SNIPPET_TAG}' '${NGINX_SERVER_CONFIG}'; then
+    sudo sed -i '/^[[:space:]]*server_name[[:space:]]\\+[^;]*;/ a\\
+    include /etc/nginx/snippets/vtuber-nginx-110-live-fallback.conf;\\
+    ' '${NGINX_SERVER_CONFIG}'
+  fi
+  sudo nginx -t
+  if command -v systemctl >/dev/null 2>&1; then
+    sudo systemctl reload nginx
+  else
+    sudo service nginx reload
+  fi
+"
+
+echo "✅ 110 Nginx 404 fallback 已提交。"
diff --git a/deploy/deploy-prod.sh b/deploy/deploy-prod.sh
new file mode 100755
index 0000000..9b5fc69
--- /dev/null
+++ b/deploy/deploy-prod.sh
@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "${SCRIPT_DIR}/.." && pwd)"
+source "${SCRIPT_DIR}/.env.prod"
+
+if [ -z "${DEPLOY_HOST:-}" ] || [ -z "${DEPLOY_USER:-}" ] || [ -z "${DEPLOY_DIR:-}" ]; then
+  echo "請先建立 deploy/.env.prod 並設定 DEPLOY_HOST / DEPLOY_USER / DEPLOY_DIR" >&2
+  exit 1
+fi
+
+SSH_OPTS=(-p "${DEPLOY_PORT:-22}")
+REMOTE="${DEPLOY_USER}@${DEPLOY_HOST}"
+
+echo "Preparing deployment content to ${REMOTE}:${DEPLOY_DIR}"
+
+synced=0
+
+if ssh "${SSH_OPTS[@]}" "$REMOTE" "[ -d \"${DEPLOY_DIR}/.git\" ]"; then
+  ssh "${SSH_OPTS[@]}" "$REMOTE" "
+    set -euo pipefail
+    cd \"${DEPLOY_DIR}\"
+    if git show-ref --verify --quiet \"refs/heads/${DEPLOY_BRANCH}\"; then
+      git fetch --all || true
+      git checkout \"${DEPLOY_BRANCH}\" || true
+      git pull origin \"${DEPLOY_BRANCH}\" || true
+      exit 0
+    else
+      echo \"[warn] 遠端 git 無法找到 ${DEPLOY_BRANCH}，改用 rsync 同步部署檔案。\"\n
+      exit 1
+    fi
+  " && synced=1 || synced=0
+  # 分支存在但拉取失敗時，fallback 改為 rsync
+  if [ ${synced} -ne 1 ]; then
+    ssh "${SSH_OPTS[@]}" "$REMOTE" "[ -d \"${DEPLOY_DIR}\" ] || mkdir -p \"${DEPLOY_DIR}\""
+  fi
+else
+  synced=0
+fi
+
+if [ ${synced} -ne 1 ]; then
+  echo "遠端未完成 git 同步，改用 rsync 直接推送部署內容..."
+  rsync -av --delete \
+    --exclude 'node_modules' \
+    --exclude '.next' \
+    --exclude '.turbo' \
+    --exclude 'dist' \
+    --exclude 'coverage' \
+    --exclude '.env' \
+    --exclude '*.log' \
+    -e "ssh ${SSH_OPTS[*]}" \
+    "${ROOT_DIR}/" "$REMOTE:${DEPLOY_DIR}/"
+fi
+
+ssh "${SSH_OPTS[@]}" "$REMOTE" "
+  set -euo pipefail
+  cd \"${DEPLOY_DIR}\"
+  cp deploy/.env.prod .env
+
+  docker compose -f deploy/docker-compose.prod.yml --env-file deploy/.env.prod down || true
+  docker compose -f deploy/docker-compose.prod.yml --env-file deploy/.env.prod up -d --build
+"
+
+echo "VTuber production deploy sent to ${DEPLOY_USER}@${DEPLOY_HOST}"
diff --git a/deploy/docker-compose.prod.yml b/deploy/docker-compose.prod.yml
new file mode 100644
index 0000000..c0554d9
--- /dev/null
+++ b/deploy/docker-compose.prod.yml
@@ -0,0 +1,69 @@
+version: "3.9"
+
+services:
+  db:
+    image: postgres:16
+    container_name: vtuber-db
+    environment:
+      - POSTGRES_DB=vtuber
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=vtuber_local_pwd
+    volumes:
+      - vtuber-pg-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d vtuber"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    restart: always
+
+  api:
+    build:
+      context: ..
+      dockerfile: apps/api/Dockerfile
+    container_name: vtuber-api
+    depends_on:
+      db:
+        condition: service_healthy
+    environment:
+      - NODE_ENV=production
+      - PORT=${API_PORT:-4000}
+      - DATABASE_URL=${DATABASE_URL}
+    ports:
+      - "${API_PORT:-4000}:4000"
+    restart: always
+
+  web:
+    build:
+      context: ..
+      dockerfile: apps/web/Dockerfile
+    container_name: vtuber-web
+    depends_on:
+      - api
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_API_BASE_URL=http://api:4000/api
+      - NEXT_PUBLIC_APP_DOMAIN=${APP_DOMAIN}
+      - PORT=3000
+    ports:
+      - "${WEB_PORT:-3200}:3000"
+    restart: always
+
+  admin:
+    build:
+      context: ..
+      dockerfile: apps/admin/Dockerfile
+    container_name: vtuber-admin
+    depends_on:
+      - api
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_API_BASE_URL=http://api:4000/api
+      - NEXT_PUBLIC_APP_DOMAIN=${APP_DOMAIN}
+      - PORT=3001
+    ports:
+      - "${ADMIN_PORT:-3201}:3001"
+    restart: always
+
+volumes:
+  vtuber-pg-data:
diff --git a/deploy/vtuber-nginx-110-live-fallback.conf b/deploy/vtuber-nginx-110-live-fallback.conf
new file mode 100644
index 0000000..b3ec16b
--- /dev/null
+++ b/deploy/vtuber-nginx-110-live-fallback.conf
@@ -0,0 +1,11 @@
+# 追加到正式主機前台 Nginx server 區塊內
+# vtuber-nginx-110-live-fallback
+# 功能：發生 404 時自動導回首頁，避免走錯 host/path 看到空白頁
+# 引用方式：在 server { ... } 中加
+# include /etc/nginx/snippets/vtuber-nginx-110-live-fallback.conf;
+
+error_page 404 = @vtuber_live_demo_fallback;
+
+location @vtuber_live_demo_fallback {
+  return 302 /live/demo;
+}
diff --git a/docs/PRD.md b/docs/PRD.md
new file mode 100644
index 0000000..845c338
--- /dev/null
+++ b/docs/PRD.md
@@ -0,0 +1,22 @@
+# VTuber PRD
+
+## 目標
+建立可 demo 的虛擬主播直播電商系統，使用者可在直播頁看到主播推薦商品、留言互動，並完成加入購物車與下單流程。
+
+## 核心場景
+1. 前台商品頁可看到商品、商品細節、加購流程。
+2. 直播頁顯示主播區塊 + 留言牆 + 主推商品。
+3. 用戶輸入問題可看到 AI 直播話術式回答。
+4. 後台能看到商品、訂單、庫存。
+5. 無需真金流，以 mock checkout 完成閉環。
+
+## 非功能
+- 前後端解耦 monorepo
+- PostgreSQL + Prisma
+- 可重複部署的最小可 demo 架構
+
+## 平台主流參考與角色建議
+
+- 平台取樣：Amazon Live、TikTok Shop Live、YouTube Shopping、Shopee Live。
+- 共通作業角色：主播、助播/場控、導播、編導、小編、客服、倉儲、行銷。
+- 建議在本 Demo 套用「主講 + 作業台」模式：後台先配置角色與腳本，直播中以留言即時回覆與購物按鈕收斂閉環。
diff --git a/docs/TASKS.md b/docs/TASKS.md
new file mode 100644
index 0000000..617c9b8
--- /dev/null
+++ b/docs/TASKS.md
@@ -0,0 +1,37 @@
+# VTuber 任務拆解（7 天）
+
+## Day 1
+- 建立 monorepo 架構
+- 建立 Prisma schema 與 seed
+
+## Day 2
+- 建立前台商品列表、商品頁、購物車、結帳頁（mock）
+
+## Day 3
+- 建立直播 demo 頁：左主播、右留言、下方主推商品
+
+## Day 4
+- 建立後台商品、訂單、庫存管理
+
+## Day 5
+- 建立 AI 主播問答 API：POST `/api/ai/product-chat`
+
+## Day 6
+- 虛擬主播影片 / 真人場景 placeholder 與直播 UI 優化
+
+### 直播作業角色模組（已加入）
+
+- 後台新增「直播作業台」：建立直播人員、角色指派、主播腳本、核對清單。
+- API 新增作業 API：
+  - 團隊成員 CRUD
+  - 直播作業（分工/腳本/清單）管理
+  - 直播狀態更新
+
+### 交付可操作閉環
+
+- 直播前：建立角色分工與作業流程。
+- 直播中：在 `/live/demo` 留言 + AI 互動 + 加入購物車 / 立即購買。
+- 直播後：後台觀測訂單、庫存扣減、作業完成度。
+
+## Day 7
+- 部署 demo（local->staging->公開）
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2491bb5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "vtuber",
+  "private": true,
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "dev:web": "npm run dev -w apps/web",
+    "dev:admin": "npm run dev -w apps/admin",
+    "dev:api": "npm run start:dev -w apps/api",
+    "dev": "npm run dev:web & npm run dev:admin & npm run dev:api",
+    "build:web": "npm run build -w apps/web",
+    "build:admin": "npm run build -w apps/admin",
+    "build:api": "npm run build -w apps/api",
+    "build": "npm run build:web && npm run build:admin && npm run build:api",
+    "lint:web": "npm run lint -w apps/web",
+    "lint:admin": "npm run lint -w apps/admin",
+    "lint:api": "npm run lint -w apps/api",
+    "lint": "npm run lint:web && npm run lint:admin && npm run lint:api",
+    "test": "npm run test -w apps/api",
+    "seed": "npm run seed -w packages/db",
+    "db:generate": "npm run db:generate -w packages/db",
+    "db:push": "npm run db:push -w packages/db",
+    "db:migrate": "npm run db:migrate -w packages/db"
+  },
+  "packageManager": "npm@10.0.0",
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  }
+}
diff --git a/packages/db/package.json b/packages/db/package.json
new file mode 100644
index 0000000..530a78f
--- /dev/null
+++ b/packages/db/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@vtuber/db",
+  "version": "0.1.0",
+  "private": true,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "seed": "tsx prisma/seed.ts",
+    "db:generate": "prisma generate --schema prisma/schema.prisma",
+    "db:push": "prisma db push --accept-data-loss --schema prisma/schema.prisma",
+    "db:migrate": "prisma migrate dev --name init --schema prisma/schema.prisma"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.18.0",
+    "prisma": "^5.18.0"
+  },
+  "devDependencies": {
+    "tsx": "^4.19.1",
+    "typescript": "^5.5.0"
+  }
+}
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
new file mode 100644
index 0000000..2975fe6
--- /dev/null
+++ b/packages/db/prisma/schema.prisma
@@ -0,0 +1,245 @@
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+enum OrderStatus {
+  PENDING
+  PAID
+  SHIPPED
+  CANCELLED
+}
+
+enum TeamRole {
+  HOST
+  PRODUCER
+  DIRECTOR
+  EDITOR
+  SUPPORT
+  WAREHOUSE
+  MARKETING
+  OPERATOR
+}
+
+enum LiveRoomStatus {
+  PLANNING
+  LIVE
+  FINISHED
+  CANCELLED
+}
+
+enum OrderSource {
+  WEB
+  LIVE
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  orders     Order[]
+  carts      Cart[]
+  messages   LiveMessage[]
+}
+
+model LiveTeamMember {
+  id        String   @id @default(cuid())
+  displayName String
+  nickname  String?
+  role      TeamRole
+  phone     String?
+  email     String?
+  notes     String?
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  assignments LiveRoomRoleAssignment[]
+}
+
+model Product {
+  id           String   @id @default(cuid())
+  name         String
+  slug         String   @unique
+  description  String?
+  imageUrl     String?
+  basePrice    Int
+  isActive     Boolean  @default(true)
+  liveRoomId   String?
+  liveRoom     LiveRoom? @relation(fields: [liveRoomId], references: [id], onDelete: SetNull)
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+
+  variants     ProductVariant[]
+}
+
+model ProductVariant {
+  id         String   @id @default(cuid())
+  productId  String
+  sku        String   @unique
+  name       String
+  size       String?
+  price      Int
+  product    Product  @relation(fields: [productId], references: [id], onDelete: Cascade)
+  inventory  Inventory?
+  orderItems OrderItem[]
+  cartItems  CartItem[]
+  messages   LiveMessage[]
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model Inventory {
+  id               String   @id @default(cuid())
+  productVariantId String   @unique
+  productVariant   ProductVariant @relation(fields: [productVariantId], references: [id], onDelete: Cascade)
+  quantity         Int      @default(0)
+  reserved         Int      @default(0)
+  updatedAt        DateTime @updatedAt
+}
+
+model Order {
+  id          String   @id @default(cuid())
+  orderNumber String   @unique @default(cuid())
+  userId      String?
+  user        User?    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  status      OrderStatus @default(PENDING)
+  orderSource OrderSource  @default(WEB)
+  totalAmount Int
+  liveRoomId  String?
+  liveRoom    LiveRoom? @relation(fields: [liveRoomId], references: [id], onDelete: SetNull)
+  items       OrderItem[]
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}
+
+model OrderItem {
+  id               String @id @default(cuid())
+  orderId          String
+  productVariantId String
+  quantity         Int
+  unitPrice        Int
+  order            Order  @relation(fields: [orderId], references: [id], onDelete: Cascade)
+  variant          ProductVariant @relation(fields: [productVariantId], references: [id], onDelete: Cascade)
+}
+
+model LiveRoom {
+  id          String   @id @default(cuid())
+  title       String
+  hostName    String
+  description String?
+  status      LiveRoomStatus @default(PLANNING)
+  streamUrl   String?
+  liveGoal    String?
+  plannedStartAt DateTime?
+  plannedEndAt   DateTime?
+  isActive    Boolean  @default(true)
+  startedAt   DateTime?
+  endedAt     DateTime?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  products    Product[]
+  messages    LiveMessage[]
+  assignments LiveRoomRoleAssignment[]
+  scripts     LiveRoomScript[]
+  checklists  LiveRoomChecklistItem[]
+  orders      Order[]
+}
+
+model LiveMessage {
+  id               String   @id @default(cuid())
+  liveRoomId       String
+  userId           String?
+  userName         String
+  message          String
+  productVariantId String?
+  createdAt        DateTime @default(now())
+
+  liveRoom         LiveRoom      @relation(fields: [liveRoomId], references: [id], onDelete: Cascade)
+  user             User?         @relation(fields: [userId], references: [id], onDelete: SetNull)
+  productVariant   ProductVariant? @relation(fields: [productVariantId], references: [id], onDelete: SetNull)
+}
+
+model Cart {
+  id        String   @id @default(cuid())
+  userId    String?
+  sessionId String?
+  user      User?    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  items     CartItem[]
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@unique([userId, sessionId])
+}
+
+model CartItem {
+  id               String   @id @default(cuid())
+  cartId           String
+  productVariantId String
+  quantity         Int
+  createdAt        DateTime @default(now())
+  updatedAt        DateTime @updatedAt
+
+  cart             Cart           @relation(fields: [cartId], references: [id], onDelete: Cascade)
+  variant          ProductVariant  @relation(fields: [productVariantId], references: [id], onDelete: Cascade)
+
+  @@unique([cartId, productVariantId])
+}
+
+model LiveRoomRoleAssignment {
+  id         String   @id @default(cuid())
+  liveRoomId String
+  teamMemberId String
+  role       TeamRole
+  isPrimary  Boolean  @default(false)
+  shiftStartAt DateTime?
+  shiftEndAt   DateTime?
+  note       String?
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+
+  liveRoom   LiveRoom @relation(fields: [liveRoomId], references: [id], onDelete: Cascade)
+  teamMember LiveTeamMember @relation(fields: [teamMemberId], references: [id], onDelete: Cascade)
+
+  @@unique([liveRoomId, teamMemberId])
+}
+
+model LiveRoomScript {
+  id         String   @id @default(cuid())
+  liveRoomId String
+  sequence   Int
+  cue        String?
+  title      String
+  content    String
+  ownerRole  TeamRole?
+  targetProductId String?
+  isDone     Boolean  @default(false)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+
+  liveRoom   LiveRoom @relation(fields: [liveRoomId], references: [id], onDelete: Cascade)
+}
+
+model LiveRoomChecklistItem {
+  id           String   @id @default(cuid())
+  liveRoomId   String
+  title        String
+  ownerRole    TeamRole
+  description  String?
+  isRequired   Boolean  @default(true)
+  isDone       Boolean  @default(false)
+  note         String?
+  completedAt  DateTime?
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+
+  liveRoom     LiveRoom @relation(fields: [liveRoomId], references: [id], onDelete: Cascade)
+}
diff --git a/packages/db/prisma/seed.ts b/packages/db/prisma/seed.ts
new file mode 100644
index 0000000..79d5846
--- /dev/null
+++ b/packages/db/prisma/seed.ts
@@ -0,0 +1,354 @@
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  await prisma.cartItem.deleteMany();
+  await prisma.cart.deleteMany();
+  await prisma.orderItem.deleteMany();
+  await prisma.order.deleteMany();
+  await prisma.inventory.deleteMany();
+  await prisma.productVariant.deleteMany();
+  await prisma.product.deleteMany();
+  await prisma.liveMessage.deleteMany();
+  await prisma.liveRoomChecklistItem.deleteMany();
+  await prisma.liveRoomScript.deleteMany();
+  await prisma.liveRoomRoleAssignment.deleteMany();
+  await prisma.liveRoom.deleteMany();
+  await prisma.liveTeamMember.deleteMany();
+  await prisma.user.deleteMany();
+
+  const user = await prisma.user.create({
+    data: {
+      email: 'streamer-fan@vtuber.local',
+      name: 'Demo User',
+    },
+  });
+
+  const room = await prisma.liveRoom.create({
+    data: {
+      title: 'VTuber Demo Live',
+      hostName: 'Ari',
+      description: '歡迎來到 VTuber Demo 直播間！',
+      isActive: true,
+      status: 'PLANNING',
+      streamUrl: 'https://videos.pexels.com/video-files/7297923/7297923-uhd_3840_2160_30fps.mp4',
+      liveGoal: '示範真人＋主播互動＋主推商品成交閉環',
+      plannedStartAt: new Date(),
+      plannedEndAt: new Date(Date.now() + 90 * 60 * 1000),
+    },
+  });
+
+  const teamMembers = await Promise.all([
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '主持人-Ari',
+        role: 'HOST',
+        phone: '0911000001',
+        email: 'host@vtuber.local',
+      },
+    }),
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '編導-Jess',
+        role: 'DIRECTOR',
+        phone: '0911000002',
+        email: 'director@vtuber.local',
+      },
+    }),
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '導播-Kim',
+        role: 'PRODUCER',
+        phone: '0911000003',
+        email: 'producer@vtuber.local',
+      },
+    }),
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '小編-Lina',
+        role: 'EDITOR',
+        phone: '0911000004',
+        email: 'editor@vtuber.local',
+      },
+    }),
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '客服-Ann',
+        role: 'SUPPORT',
+        phone: '0911000005',
+        email: 'support@vtuber.local',
+      },
+    }),
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '物流-Wei',
+        role: 'WAREHOUSE',
+        phone: '0911000006',
+        email: 'warehouse@vtuber.local',
+      },
+    }),
+    prisma.liveTeamMember.create({
+      data: {
+        displayName: '行銷-May',
+        role: 'MARKETING',
+        phone: '0911000007',
+        email: 'marketing@vtuber.local',
+      },
+    }),
+  ]);
+
+  const [hostMember, directorMember, producerMember, editorMember, supportMember, warehouseMember, marketingMember] = teamMembers;
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: hostMember.id,
+      role: 'HOST',
+      isPrimary: true,
+      note: '直播前3分鐘啟播確認',
+      shiftStartAt: new Date(Date.now() - 30 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: directorMember.id,
+      role: 'DIRECTOR',
+      note: '節奏控場，提醒商品切換順序',
+      shiftStartAt: new Date(Date.now() - 20 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: producerMember.id,
+      role: 'PRODUCER',
+      note: '音畫輸出、畫面切換',
+      shiftStartAt: new Date(Date.now() - 20 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: editorMember.id,
+      role: 'EDITOR',
+      note: '補充彈幕腳本文案',
+      shiftStartAt: new Date(Date.now() - 10 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: supportMember.id,
+      role: 'SUPPORT',
+      note: '回覆 DM 與加購問題',
+      shiftStartAt: new Date(Date.now() - 10 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: warehouseMember.id,
+      role: 'WAREHOUSE',
+      note: '監控出貨、保留庫存',
+      shiftStartAt: new Date(Date.now() - 10 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomRoleAssignment.create({
+    data: {
+      liveRoomId: room.id,
+      teamMemberId: marketingMember.id,
+      role: 'MARKETING',
+      note: '活動主打標語與互動口號',
+      shiftStartAt: new Date(Date.now() - 10 * 60 * 1000),
+      shiftEndAt: new Date(Date.now() + 120 * 60 * 1000),
+    },
+  });
+
+  const productsCreated: {
+    id: string;
+    variants: Array<{ id: string }>;
+  }[] = [];
+
+  for (let i = 1; i <= 10; i += 1) {
+    const basePrice = 250 + i * 80;
+    const product = await prisma.product.create({
+      data: {
+        name: `Demo Product ${i}`,
+        slug: `demo-product-${i}`,
+        description: `這是第 ${i} 個直播間示範商品`,
+        imageUrl: `https://picsum.photos/seed/vtuber-${i}/640/640`,
+        basePrice,
+        liveRoomId: room.id,
+      },
+    });
+
+    const variant = await prisma.productVariant.create({
+      data: {
+        productId: product.id,
+        sku: `VT-P-${i.toString().padStart(3, '0')}`,
+        name: '標準款',
+        size: 'M',
+        price: basePrice,
+      },
+    });
+
+    await prisma.inventory.create({
+      data: {
+        productVariantId: variant.id,
+        quantity: 50 + i * 10,
+        reserved: 0,
+      },
+    });
+
+    productsCreated.push({
+      id: product.id,
+      variants: [{ id: variant.id }],
+    });
+  }
+
+  await prisma.liveRoomScript.create({
+    data: {
+      liveRoomId: room.id,
+      sequence: 1,
+      cue: '00:00',
+      title: '開場破冰與今晚主推',
+      content:
+        '先報告福利機制、引導觀眾先看 1~3 號主推商品，最後加入購物車可贈運費券。',
+      ownerRole: 'HOST',
+      isDone: false,
+      targetProductId: productsCreated[0]?.id,
+    },
+  });
+
+  await prisma.liveRoomScript.create({
+    data: {
+      liveRoomId: room.id,
+      sequence: 2,
+      cue: '00:20',
+      title: '第一輪上鏡',
+      content:
+        '切到主推款 Demo Product 1，補充材質、顏色、穿搭組合，並引導觀眾留言問價。',
+      ownerRole: 'HOST',
+      isDone: false,
+      targetProductId: productsCreated[1]?.id,
+    },
+  });
+
+  await prisma.liveRoomScript.create({
+    data: {
+      liveRoomId: room.id,
+      sequence: 3,
+      cue: '01:20',
+      title: '加碼互動與秒殺',
+      content: '導播轉場到購物掛件，客服同步回覆尺寸、庫存問題，提醒直播限時加價購。',
+      ownerRole: 'PRODUCER',
+      isDone: false,
+      targetProductId: productsCreated[2]?.id,
+    },
+  });
+
+  await prisma.liveRoomScript.create({
+    data: {
+      liveRoomId: room.id,
+      sequence: 4,
+      cue: '02:10',
+      title: '結尾總結',
+      content: '複盤今晚三款重點，提示未付款者可直接在結帳頁完成，下播後將開啟補貨預購名單。',
+      ownerRole: 'HOST',
+      isDone: false,
+      targetProductId: productsCreated[3]?.id,
+    },
+  });
+
+  await prisma.liveRoomChecklistItem.create({
+    data: {
+      liveRoomId: room.id,
+      title: '直播前 15 分鐘檢查音訊與畫面',
+      ownerRole: 'PRODUCER',
+      description: '確認鏡頭、麥克風、延遲與貨幣換算腳本無誤。',
+      isRequired: true,
+      isDone: true,
+      completedAt: new Date(Date.now() - 10 * 60 * 1000),
+    },
+  });
+
+  await prisma.liveRoomChecklistItem.create({
+    data: {
+      liveRoomId: room.id,
+      title: '補貨規則與庫存同步',
+      ownerRole: 'WAREHOUSE',
+      description: '確認各款庫存不低於 10 件，避免前 10 分鐘售罄。',
+      isRequired: true,
+      isDone: false,
+    },
+  });
+
+  await prisma.liveRoomChecklistItem.create({
+    data: {
+      liveRoomId: room.id,
+      title: '客服值守回覆',
+      ownerRole: 'SUPPORT',
+      description: '監看留言問題回覆：價格、尺寸、運送、下單步驟。',
+      isRequired: true,
+      isDone: false,
+    },
+  });
+
+  const sampleMessages = [
+    '主播你好，這款材質是什麼？',
+    '有沒有打折？',
+    '今晚能配這個紅色款嗎？',
+    '有現貨嗎？',
+    '這件能搭配什麼配件？',
+    '有貨到付款嗎？',
+    '什麼時候會補貨？',
+    '寄送多久可以到？',
+    '有試穿影片嗎？',
+    '價格會再便宜一點嗎？',
+    '尺寸表可以再清楚一點嗎？',
+    '包裝是不是有品牌紙袋？',
+    '可以直接加到購物車嗎？',
+    '有其他顏色嗎？',
+    '這張是第一個回應！',
+    '直播間氣氛很棒',
+    '主播的穿搭很有氛圍',
+    '我先看一下其他款',
+    '結帳流程有點複雜',
+    '今晚還會有其他新品嗎？',
+  ];
+
+  for (const msg of sampleMessages) {
+    await prisma.liveMessage.create({
+      data: {
+        liveRoomId: room.id,
+        userName: `觀眾-${Math.floor(Math.random() * 99) + 1}`,
+        message: msg,
+        userId: user.id,
+      },
+    });
+  }
+}
+
+main()
+  .then(async () => {
+    await prisma.$disconnect();
+  })
+  .catch(async (error) => {
+    console.error(error);
+    await prisma.$disconnect();
+    process.exit(1);
+  });
diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts
new file mode 100644
index 0000000..abc4343
--- /dev/null
+++ b/packages/db/src/index.ts
@@ -0,0 +1,11 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };
+export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = prisma;
+}
+
+export default prisma;
+export type { PrismaClient };
diff --git a/packages/db/tsconfig.json b/packages/db/tsconfig.json
new file mode 100644
index 0000000..bc1bdcf
--- /dev/null
+++ b/packages/db/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "rootDir": "src"
+  },
+  "include": ["src/**/*", "prisma/**/*"]
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..fb9b9d2
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@vtuber/ui",
+  "version": "0.1.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  }
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..2a6cfe6
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function SectionCard({
+  title,
+  children,
+}: React.PropsWithChildren<{ title: string }>) {
+  return (
+    <section style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16, marginBottom: 16 }}>
+      <h2 style={{ marginTop: 0 }}>{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+export default SectionCard;
diff --git a/scripts/check-vtuber-offline-110.sh b/scripts/check-vtuber-offline-110.sh
new file mode 100755
index 0000000..109dda8
--- /dev/null
+++ b/scripts/check-vtuber-offline-110.sh
@@ -0,0 +1,138 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+DOMAIN="${1:-vtuber.wooo.work}"
+TARGET_IP="${2:-114.32.151.246}"
+DNS_RESOLVER="${3:-8.8.8.8}"
+STRICT_MODE="${4:-1}"
+
+strict_mode="${CHECK_STRICT_MODE:-${STRICT_MODE}}"
+
+fail_count=0
+resolved_count=0
+
+need_cmd() {
+  if ! command -v "$1" >/dev/null 2>&1; then
+    echo "❌ 缺少指令：$1"
+    exit 1
+  fi
+}
+
+need_cmd dig
+need_cmd openssl
+need_cmd curl
+
+echo "===== DNS 解析檢查 ====="
+echo "網域：${DOMAIN}"
+echo "預期 A 紀錄指向：${TARGET_IP}"
+echo "採用解析器：${DNS_RESOLVER}"
+echo "嚴格檢查：${strict_mode}"
+
+a_records="$(dig +short A "${DOMAIN}" @"${DNS_RESOLVER}" | awk 'NF {print $1}' | sort -u)"
+aaaa_records="$(dig +short AAAA "${DOMAIN}" @"${DNS_RESOLVER}" | awk 'NF {print $1}' | sort -u)"
+
+if [ -z "${a_records}" ] && [ -z "${aaaa_records}" ]; then
+  echo "⚠️  無法解析到 A/AAAA；請檢查 DNS zone 是否有建立 ${DOMAIN} 的 A/AAAA 紀錄。"
+  fail_count=$((fail_count + 1))
+else
+  echo "A 紀錄：${a_records:-（未設定）}"
+  echo "AAAA 紀錄：${aaaa_records:-（未設定）}"
+  if printf '%s\n' "${a_records}" | grep -Fxq "${TARGET_IP}"; then
+    echo "✅ A 紀錄包含 ${TARGET_IP}"
+    resolved_count=$((resolved_count + 1))
+  else
+    echo "⚠️  ${DOMAIN} 的 A 紀錄未看到 ${TARGET_IP}"
+    echo "   請檢查 DNS：A Record (${DOMAIN}) = ${TARGET_IP}"
+    echo "   修正指引：在 DNS 面板把 vtuber.wooo.work 的 A Record 指到 ${TARGET_IP}"
+    fail_count=$((fail_count + 1))
+  fi
+fi
+
+if command -v host >/dev/null 2>&1; then
+  host "${DOMAIN}" | sed -n '1,4p' || true
+else
+  echo "(已略過 host 查詢，未安裝 host 指令)"
+fi
+echo
+
+echo "===== HTTPS 憑證檢查 ====="
+cert_pem="$(echo | openssl s_client -connect "${DOMAIN}:443" -servername "${DOMAIN}" 2>/dev/null | openssl x509 2>/dev/null || true)"
+if [ -z "${cert_pem}" ]; then
+  echo "❌ 無法抓到 TLS 憑證（連線或憑證有問題）"
+  fail_count=$((fail_count + 1))
+else
+  subject="$(printf '%s\n' "${cert_pem}" | openssl x509 -noout -subject)"
+  issuer="$(printf '%s\n' "${cert_pem}" | openssl x509 -noout -issuer)"
+  start_date="$(printf '%s\n' "${cert_pem}" | openssl x509 -noout -startdate)"
+  end_date="$(printf '%s\n' "${cert_pem}" | openssl x509 -noout -enddate)"
+  san="$(printf '%s\n' "${cert_pem}" | openssl x509 -noout -ext subjectAltName 2>/dev/null || true)"
+
+  echo "Subject: ${subject}"
+  echo "Issuer: ${issuer}"
+  echo "起始: ${start_date}"
+  echo "到期: ${end_date}"
+  echo "SAN: ${san:-（未提供）}"
+
+  if printf '%s\n' "${san}" | grep -q "DNS:${DOMAIN}"; then
+    echo "✅ 憑證 SAN 包含 ${DOMAIN}"
+  else
+    echo "⚠️  憑證 SAN 未明確列出 ${DOMAIN}"
+    fail_count=$((fail_count + 1))
+  fi
+
+  if printf '%s\n' "${cert_pem}" | openssl x509 -checkend $((7*24*60*60)) >/dev/null 2>&1; then
+    echo "✅ 憑證未於 7 日內到期"
+  else
+    echo "⚠️  憑證疑似 7 日內到期"
+    fail_count=$((fail_count + 1))
+  fi
+fi
+echo
+
+echo "===== 路徑可達性檢查 ====="
+check_url() {
+  local label="$1"
+  local url="$2"
+  local expect_http="${3:-200}"
+  local output
+  shift 3
+  output="$(curl -ksS -m 12 -o /dev/null -w 'HTTP %{http_code} | total=%{time_total}s | remote=%{remote_ip}' "$@" "$url" || true)"
+  local http_code
+  http_code="$(printf '%s\n' "${output}" | awk '{print $2}')"
+
+  if [ -z "${output}" ] || [ "${http_code}" = "000" ] || [ -z "${http_code}" ]; then
+    echo "❌ ${label}：連線失敗"
+    fail_count=$((fail_count + 1))
+  elif [ "${http_code}" != "${expect_http}" ]; then
+    echo "❌ ${label}：HTTP ${http_code}（預期 ${expect_http}）"
+    fail_count=$((fail_count + 1))
+  else
+    echo "✅ ${label}：${output}"
+  fi
+}
+
+check_url "域名直連" "https://${DOMAIN}/live/demo" 200
+check_url "域名繁中直連" "https://${DOMAIN}/zh-TW/live/demo" 200
+check_url "SNI 直定向到 ${TARGET_IP}" "https://${DOMAIN}/live/demo" \
+  --resolve "${DOMAIN}:443:${TARGET_IP}" 200
+check_url "IP + Host 直走 (防止 host 漏配)" "http://${TARGET_IP}/live/demo" \
+  -H "Host: ${DOMAIN}" 200
+check_url "純 IP 訪問（不帶 Host）" "http://${TARGET_IP}/live/demo" 200
+
+echo
+if [ "${fail_count}" -eq 0 ]; then
+  echo "總結：✅ 全部檢查通過。"
+else
+  echo "總結：⚠️ ${fail_count} 項提醒，需先補上對應修正。"
+fi
+
+if [ "${strict_mode}" != "0" ] && [ "${fail_count}" -gt 0 ]; then
+  echo "部署門檻：❌ 因嚴格模式，非 0 值結果將阻止後續流程。"
+  exit 1
+fi
+
+if [ "${fail_count}" -gt 0 ] && [ "${resolved_count}" -eq 0 ]; then
+  echo "DNS 門檻：❌ 外網無法直接導向目標主機，這通常代表流量仍在舊站。"
+fi
+
+exit 0
diff --git a/scripts/deploy-and-verify-vtuber110.sh b/scripts/deploy-and-verify-vtuber110.sh
new file mode 100755
index 0000000..14dcf88
--- /dev/null
+++ b/scripts/deploy-and-verify-vtuber110.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "${SCRIPT_DIR}/.." && pwd)"
+ENV_FILE="${ROOT_DIR}/deploy/.env.prod"
+DEFAULT_ENV_FILE="${ROOT_DIR}/deploy/.env.prod.example"
+
+if [ ! -f "${ENV_FILE}" ]; then
+  if [ -f "${DEFAULT_ENV_FILE}" ]; then
+    echo "⚠️  找不到 deploy/.env.prod，先複製並填寫預設值："
+    echo "cp deploy/.env.prod.example deploy/.env.prod"
+  else
+    echo "❌ 找不到 deploy/.env.prod"
+  fi
+  exit 1
+fi
+
+source "${ENV_FILE}"
+
+TARGET_DOMAIN="${APP_DOMAIN:-vtuber.wooo.work}"
+TARGET_HOST="${DEPLOY_HOST:-114.32.151.246}"
+
+cd "${ROOT_DIR}"
+
+echo "=== Step 1: 正式版推版到 ${DEPLOY_USER}@${TARGET_HOST} ==="
+./deploy/deploy-prod.sh
+
+echo
+
+echo "=== Step 2: 內網服務健康檢查 ==="
+curl -ksS -o /dev/null -w "[內網] /live/demo => HTTP %{http_code} | 花費 %{time_total}s\n" "http://${TARGET_HOST}:3200/live/demo"
+
+if [ -n "${TARGET_DOMAIN}" ]; then
+  echo
+  echo "=== Step 3: 外網導向一致性檢查 ==="
+  ./scripts/check-vtuber-offline-110.sh "${TARGET_DOMAIN}" "${TARGET_HOST}" 8.8.8.8 1
+else
+  echo
+  echo "=== Step 3: 外網導向檢查已略過（缺少 APP_DOMAIN） ==="
+fi
+
+echo
+echo "✅ 推版＋驗證流程完成。"
diff --git a/scripts/verify-live-domain-110.sh b/scripts/verify-live-domain-110.sh
new file mode 100755
index 0000000..c22be70
--- /dev/null
+++ b/scripts/verify-live-domain-110.sh
@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+DOMAIN="${1:-vtuber.wooo.work}"
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "${SCRIPT_DIR}/.." && pwd)"
+
+cd "${ROOT_DIR}"
+
+echo "=== Step 1: 執行正式站推版＋外網可用性基礎檢查 ==="
+./scripts/deploy-and-verify-vtuber110.sh
+
+echo
+echo "=== Step 2: 正式網域直播頁路由逐一驗證 ==="
+
+for path in "/live/demo" "/zh-TW/live/demo"; do
+  url="https://${DOMAIN}${path}"
+  http_code="$(curl -ksS -m 12 -o /dev/null -w '%{http_code}' "$url" || true)"
+
+  if [ -z "${http_code}" ] || [ "${http_code}" = "000" ]; then
+    echo "❌ ${url}：連線失敗"
+    exit 1
+  elif [ "${http_code}" != "200" ]; then
+    echo "❌ ${url}：HTTP ${http_code}（預期 200）"
+    exit 1
+  else
+    echo "✅ ${url}：HTTP ${http_code}"
+  fi
+done
+
+echo
+echo "✅ 所有正式網域直播路由驗證通過。"
diff --git a/test-browser.js b/test-browser.js
new file mode 100644
index 0000000..5f548aa
--- /dev/null
+++ b/test-browser.js
@@ -0,0 +1,13 @@
+const puppeteer = require('puppeteer');
+
+(async () => {
+  const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
+  const page = await browser.newPage();
+  page.on('console', msg => console.log('BROWSER CONSOLE:', msg.text()));
+  page.on('pageerror', error => console.log('BROWSER ERROR:', error.message));
+  page.on('requestfailed', request => console.log('BROWSER REQUEST FAILED:', request.url(), request.failure().errorText));
+
+  await page.goto('https://vtuber.wooo.work/live/demo', { waitUntil: 'networkidle2' });
+  await new Promise(r => setTimeout(r, 5000));
+  await browser.close();
+})();
diff --git a/test_glb.js b/test_glb.js
new file mode 100644
index 0000000..0328b8b
--- /dev/null
+++ b/test_glb.js
@@ -0,0 +1,11 @@
+const fs = require('fs');
+const buffer = fs.readFileSync('./apps/web/public/models/realistic-host.glb');
+const chunkLength = buffer.readUInt32LE(12);
+const jsonChunk = buffer.toString('utf8', 20, 20 + chunkLength);
+const json = JSON.parse(jsonChunk);
+if (json.meshes) {
+  console.log('Meshes:', json.meshes.map(m => m.name));
+}
+if (json.nodes) {
+  console.log('Mesh Nodes:', json.nodes.filter(n => n.mesh !== undefined).map(n => n.name));
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..24310af
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "@vtuber/db": ["./packages/db/src"],
+      "@vtuber/ui": ["./packages/ui/src"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}