diff --git a/frontend/src/pages/playtest/README.md b/frontend/src/pages/playtest/README.md
new file mode 100644
index 0000000..7863c51
--- /dev/null
+++ b/frontend/src/pages/playtest/README.md
@@ -0,0 +1,128 @@
+# Playtest
+
+Playtest 是角色动画的只读调试和核验界面。它既能直接操控角色验证 idle、walk、jump
+之间的响应，也能逐帧查看动作、时长、位移与质量标记，并在不改变角色素材的前提下记录
+整体核验结论。
+
+## 入口
+
+- **Demo：`/playtest/demo`**。直接使用明确标注的少年开发 fixture，方便独立查看 idle 和
+  walk 动作。
+- **正式：`/playtest/:characterId/:outfitId`**。需要由应用提供 `PlaytestPageAPIs`；页面读取
+  指定角色和最新核验结论。
+
+正式入口未配置 APIs 时，页面会明确显示“Playtest 后端接口尚未配置”。它不会加载或回退到
+Demo 少年数据。
+
+## 数据与只读边界
+
+Demo 数据来自 `public/playtest-fixtures/boy/` 的已提取少年帧，以及
+`testing/demo-character.ts` 中的开发 fixture。素材来源和用途说明见该目录的 `SOURCE.md`。
+
+Playtest 不修改角色、造型、动作、帧、工作流或版本。正式入口唯一可保存的内容是独立的
+Playtest 核验结论；Demo 中的核验状态仅保留在当前页面，不写入本地存储或后端。
+
+## 统一工作台
+
+页面只有一套 `PlaybackController`。动作列表、方向选择、统一舞台、播放控制、时间线，
+以及右侧“帧检查 / 问题记录 / 资产导出”三个页签共同读取当前动作、方向和帧。键盘、按钮或
+时间线改变帧后，舞台与右侧工具会同步更新，不存在隐藏的第二套状态。
+
+- 左侧动作栏展开宽度为 190px，也可收起为窄条；三栏在宽屏共用相同高度和底边，右侧长内容
+  在栏内滚动，不再向下撑出额外空白。
+- 按住 A/D 时临时播放 `walk` 的逐帧动画，并按各帧 `rootMotion` 移动；松开后，若按键前处于
+  暂停状态则恢复暂停，原本正在播放则继续播放。A 面向左，D 面向右。
+- 没有可播放 `walk` 时，A/D 不改变当前动作、镜像或播放状态。
+- ← / → 才是当前序列的上一帧 / 下一帧控制，长按时可连续切帧。
+- W 选择首个包含有效帧的 jump 动作并从首帧播放。
+- S 选择首个包含有效帧的 crouch 动作并从首帧播放。
+- jump/crouch 缺失时，W/S 不改变当前动作，也不会用其他动作图片冒充。
+
+当前 Demo 少年包含 idle 和 walk，不包含 jump 或 crouch，因此界面会明确显示“未提供跳跃
+动作”和“未提供下蹲动作”。以后正式 Character 提供对应动作后，同一套控制器会自动启用
+W/S。
+
+## 播放与核验
+
+- 初始为暂停；切换动作、方向或手动选择帧时暂停。
+- 每帧的 `durationMs` 优先；未提供有效时长时才按动作 FPS 计算显示与播放间隔。
+- 关闭循环时，播放停留在末帧；开启循环时，末帧会回到首帧。
+- 页面会以无障碍实时播报当前动作、帧位置和播放状态。
+- 舞台始终只渲染当前帧角色，不叠加上一帧、下一帧或其他动作的角色虚影。
+- 有横向根位移的角色到达舞台左右边界后会自动掉头并继续播放。边界按舞台和角色的实际显示
+  宽度计算；窗口尺寸改变后会重新钳制。自动掉头不显示文字，也不触发额外播报。
+
+## 逐帧自动审核依据
+
+逐帧审核会在浏览器中读取每张图片的 Alpha 像素，提供只读的几何检查依据。Alpha 大于
+24 的像素视为候选前景；算法按八邻域过滤小于 `max(4 像素, 最大连通区域的 0.2%)` 的
+孤立噪点，同时始终保留最大主体。
+
+右侧分别展示三类位移，不能混为一个数：
+
+- **画面内额外漂移**：过滤噪点后，相邻帧透明像素质心的变化；自动连续性判断只使用它。
+- **预期根位移增量**：当前帧的 `rootMotion`；它是本次自动播放帧推进应累加的增量，y 正值
+  表示向上。
+- **合成预览位移**：播放器按每次自动播放推进累计根位移后的最终位置；它用于解释播放效果，
+  不重复参与自动异常判断。
+
+自动审核会输出带问题代码、严重程度和帧位置的结构化结果，覆盖图片不可用、空白主体、画布
+尺寸、边缘裁切、覆盖率、相邻重复帧、位移突变、脚底/高度/面积变化，以及画面位移与根位移
+方向矛盾。重复帧依据主体边界内归一化的 8×8 Alpha/亮度指纹判断，避免小型精灵被整张透明
+画布稀释；位移异常同时使用序列中位数、MAD 和按动作设置的绝对上限，避免整段异常素材用
+自身均值掩盖问题。
+
+阈值按动作类别解释：idle 严格检查脚底和高度，walk 允许周期变化，jump 允许离地，crouch
+允许主体高度下降，attack/custom 使用更宽的序列离群范围。画布 256×256、主体覆盖率 65%、
+脚底漂移 3 px 和轮廓面积变化 28% 仍作为绝对安全线。
+
+这些结果只能发现位置、缩放、背景和轮廓突变，不能判断变脸、人体结构、动作语义或服装
+细节。图片加载失败、完全透明、Canvas 不可用或跨域像素受限时会明确显示“无法计算”，不会
+伪造为 0。检查结果不会修改 `Frame.qc`、Character 或核验记录；当前 Action 尚无明确循环
+合同，因此不计算循环首尾接缝。
+
+## 人工问题记录
+
+“问题记录”页签把自动发现和人工标记分开显示。用户可以为当前动作、方向和帧选择问题类型、
+补充说明，并修改或删除人工记录。人工问题只保存在当前 React 会话，刷新后清空，不写入
+localStorage、Character、Frame 或后端。后端“核验通过 / 发现问题”的总体结论仍在独立区域
+由用户提交，不会被逐帧问题自动改变。
+
+## 游戏资产导出
+
+“资产导出”页签只导出状态为 `confirmed` 且包含帧的动作序列。单个 ZIP 中只有：
+
+1. 保留原 MIME/扩展名的逐帧原图；
+2. 每个“动作 × 方向”一张 PNG Sprite Sheet；
+3. 与每张 Sprite Sheet 对应的 `animation.json`。
+
+Sprite Sheet 每行最多 8 帧，不缩放原图；不同尺寸使用序列最大宽高作为单元格并居中。图片
+加载失败时仍生成资产包：对应单元格保持透明，JSON 标记 `available: false`，页面提示导出
+不完整。已有自动或人工问题时，导出页会先提示问题数量但不阻断导出。切换右侧页签不会卸载
+进行中的导出，因此不能通过切换页签并发启动第二份任务。ZIP 不包含 manifest、审核结果、
+核验结论或开发说明。打包采用同一导出文件内的标准无压缩 ZIP 封装，不新增运行时依赖。
+
+## 键盘控制
+
+| 按键       | 操作                                             |
+| ---------- | ------------------------------------------------ |
+| A          | 按住时面向左并播放 Walk；松开后恢复原播放状态    |
+| D          | 按住时面向右并播放 Walk；松开后恢复原播放状态    |
+| W          | 有 jump 动作时从首帧播放；缺少时不改变当前状态   |
+| S          | 有 crouch 动作时从首帧播放；缺少时不改变当前状态 |
+| Space      | 播放或暂停当前动作                               |
+| ← / →      | 当前序列上一帧 / 下一帧，可长按连续切帧          |
+| Home / End | 当前序列首帧 / 尾帧                              |
+| L          | 切换循环                                         |
+
+焦点位于按钮、输入框、文本区域、选择器或可编辑文本区域时，Playtest 不拦截键盘控制。
+长按 Space、L、W 或 S 不会重复触发；A、D、方向键、Home 和 End 保持可连续触发。
+
+## 视觉参考
+
+三栏信息布局只参考 `live-demo-ui-components/animation-workbench.tsx` 的视觉层次。统一舞台保留
+旧工程的网格、地面线和透明背景视觉。`rootMotion` 是逐帧位移增量，只在自动播放实际推进
+时累计；它为 `null` 或零时角色原地播放。向左/向右镜像、位移累计、时间线和检查器均由同一
+`PlaybackController` 驱动，不使用前端写死的行走速度、重力或跳跃高度。Playtest 不导入 Cocos
+运行时、旧 iframe 或微信小程序适配；当前导出只生成通用逐帧、Sprite Sheet 与 JSON，不生成
+Cocos 或小程序工程。
diff --git a/frontend/src/pages/playtest/demo-page.tsx b/frontend/src/pages/playtest/demo-page.tsx
new file mode 100644
index 0000000..8a06c58
--- /dev/null
+++ b/frontend/src/pages/playtest/demo-page.tsx
@@ -0,0 +1,18 @@
+import {
+  PLAYTEST_DEMO_CHARACTER,
+  PLAYTEST_DEMO_ACTION_ID,
+  PLAYTEST_DEMO_OUTFIT_ID,
+} from "./testing/demo-character";
+import { PlaytestWorkbench } from "./workbench";
+
+/** Explicit development fixture entry point. It intentionally bypasses all production APIs. */
+export function PlaytestDemoPage() {
+  return (
+    <PlaytestWorkbench
+      character={PLAYTEST_DEMO_CHARACTER}
+      outfitId={PLAYTEST_DEMO_OUTFIT_ID}
+      initialActionId={PLAYTEST_DEMO_ACTION_ID}
+      inspectionMode="demo"
+    />
+  );
+}
diff --git a/frontend/src/pages/playtest/index.test.tsx b/frontend/src/pages/playtest/index.test.tsx
new file mode 100644
index 0000000..8f5c3af
--- /dev/null
+++ b/frontend/src/pages/playtest/index.test.tsx
@@ -0,0 +1,268 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes, useNavigate, type NavigateFunction } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Character } from "@/entities/character";
+import type { PlaytestInspection } from "@/entities/playtest-inspection";
+
+import { PlaytestPage, type PlaytestPageAPIs } from "./index";
+import { PLAYTEST_DEMO_ACTION_ID, PLAYTEST_DEMO_CHARACTER } from "./testing/demo-character";
+
+function createCharacter(characterId: string, outfitId: string, name: string): Character {
+  return {
+    ...PLAYTEST_DEMO_CHARACTER,
+    id: characterId,
+    name,
+    outfits: PLAYTEST_DEMO_CHARACTER.outfits.map((outfit) => ({
+      ...outfit,
+      id: outfitId,
+      characterId,
+      actions: outfit.actions.map((action) => ({ ...action, outfitId })),
+    })),
+  };
+}
+
+const character = createCharacter("character-1", "outfit-1", "正式角色");
+
+const inspection: PlaytestInspection = {
+  id: "inspection-1",
+  characterId: "character-1",
+  outfitId: "outfit-1",
+  source: { runId: "run-1", revisionId: "revision-1" },
+  status: "passed",
+  createdAt: "2026-07-30T00:00:00.000Z",
+  updatedAt: "2026-07-30T00:00:00.000Z",
+};
+
+function NavigationProbe({ onReady }: { onReady(navigate: NavigateFunction): void }) {
+  onReady(useNavigate());
+  return null;
+}
+
+function renderPage(apis?: PlaytestPageAPIs, initialEntry = "/playtest/character-1/outfit-1") {
+  let navigate: NavigateFunction | null = null;
+  const rendered = render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <NavigationProbe onReady={(value) => (navigate = value)} />
+      <Routes>
+        <Route path="/playtest/:characterId/:outfitId" element={<PlaytestPage apis={apis} />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+
+  return {
+    ...rendered,
+    navigate(to: string) {
+      if (navigate === null) throw new Error("navigation was not initialized");
+      act(() => navigate?.(to));
+    },
+  };
+}
+
+function deferred<T>() {
+  let resolve: (value: T) => void = () => undefined;
+  let reject: (reason?: unknown) => void = () => undefined;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+}
+
+afterEach(cleanup);
+
+describe("PlaytestPage", () => {
+  it("states that the backend APIs are not configured instead of rendering the demo", () => {
+    renderPage();
+
+    expect(screen.getByText("Playtest 后端接口尚未配置")).toBeTruthy();
+    expect(
+      screen.queryByRole("heading", { name: /少年 · Playtest 演示角色 · 默认造型/ }),
+    ).toBeNull();
+  });
+
+  it("reads only the requested character and its latest inspection", async () => {
+    const apis: PlaytestPageAPIs = {
+      characters: { get: vi.fn().mockResolvedValue(character) },
+      inspections: {
+        getLatest: vi.fn().mockResolvedValue(inspection),
+        record: vi.fn(),
+      },
+    };
+
+    renderPage(apis);
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { name: /正式角色 · 默认造型/ })).toBeTruthy(),
+    );
+    expect(apis.characters.get).toHaveBeenCalledExactlyOnceWith("character-1");
+    expect(apis.inspections.getLatest).toHaveBeenCalledExactlyOnceWith({
+      characterId: "character-1",
+      outfitId: "outfit-1",
+    });
+    expect(screen.getByText("run-1 / revision-1")).toBeTruthy();
+  });
+
+  it.each([{ code: 404 }, { status: 404 }])(
+    "reports a missing character for a recognizable 404 error: %o",
+    async (notFoundError) => {
+      const apis: PlaytestPageAPIs = {
+        characters: { get: vi.fn().mockRejectedValue(notFoundError) },
+        inspections: {
+          getLatest: vi.fn(),
+          record: vi.fn(),
+        },
+      };
+
+      renderPage(apis);
+
+      expect(await screen.findByText("角色不存在")).toBeTruthy();
+      expect(apis.inspections.getLatest).not.toHaveBeenCalled();
+    },
+  );
+
+  it("reports a character read failure for other character errors", async () => {
+    const apis: PlaytestPageAPIs = {
+      characters: { get: vi.fn().mockRejectedValue(new Error("network unavailable")) },
+      inspections: {
+        getLatest: vi.fn(),
+        record: vi.fn(),
+      },
+    };
+
+    renderPage(apis);
+
+    expect(await screen.findByText("角色读取失败")).toBeTruthy();
+    expect(apis.inspections.getLatest).not.toHaveBeenCalled();
+  });
+
+  it("reports an inspection read failure after the character was loaded", async () => {
+    const apis: PlaytestPageAPIs = {
+      characters: { get: vi.fn().mockResolvedValue(character) },
+      inspections: {
+        getLatest: vi.fn().mockRejectedValue(new Error("inspection unavailable")),
+        record: vi.fn(),
+      },
+    };
+
+    renderPage(apis);
+
+    expect(await screen.findByText("核验记录读取失败")).toBeTruthy();
+    expect(apis.characters.get).toHaveBeenCalledExactlyOnceWith("character-1");
+    expect(apis.inspections.getLatest).toHaveBeenCalledExactlyOnceWith({
+      characterId: "character-1",
+      outfitId: "outfit-1",
+    });
+    expect(screen.queryByText("角色读取失败")).toBeNull();
+  });
+
+  it("synchronizes the initial action when only the actionId query changes", async () => {
+    const apis: PlaytestPageAPIs = {
+      characters: { get: vi.fn().mockResolvedValue(character) },
+      inspections: {
+        getLatest: vi.fn().mockResolvedValue(null),
+        record: vi.fn(),
+      },
+    };
+    const walkActionId = "playtest-demo-boy-walk";
+    const mounted = renderPage(apis, `/playtest/character-1/outfit-1?actionId=${walkActionId}`);
+
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: /行走/ }).getAttribute("aria-pressed")).toBe(
+        "true",
+      ),
+    );
+    mounted.navigate(`/playtest/character-1/outfit-1?actionId=${PLAYTEST_DEMO_ACTION_ID}`);
+
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: /待机/ }).getAttribute("aria-pressed")).toBe(
+        "true",
+      ),
+    );
+    expect(apis.characters.get).toHaveBeenCalledTimes(1);
+    expect(apis.inspections.getLatest).toHaveBeenCalledTimes(1);
+  });
+
+  it("records a persisted conclusion through the inspection API only", async () => {
+    const apis: PlaytestPageAPIs = {
+      characters: { get: vi.fn().mockResolvedValue(character) },
+      inspections: {
+        getLatest: vi.fn().mockResolvedValue(null),
+        record: vi.fn().mockResolvedValue({ ...inspection, status: "passed" }),
+      },
+    };
+
+    renderPage(apis);
+    const recordButton = await screen.findByRole("button", { name: "核验通过" });
+    fireEvent.click(recordButton);
+
+    await waitFor(() =>
+      expect(apis.inspections.record).toHaveBeenCalledExactlyOnceWith({
+        characterId: "character-1",
+        outfitId: "outfit-1",
+        status: "passed",
+      }),
+    );
+    expect(apis.characters.get).toHaveBeenCalledExactlyOnceWith("character-1");
+  });
+
+  it("ignores an old record success after navigating to another asset", async () => {
+    const oldRecord = deferred<PlaytestInspection>();
+    const character2 = createCharacter("character-2", "outfit-2", "第二个正式角色");
+    const apis: PlaytestPageAPIs = {
+      characters: {
+        get: vi.fn((characterId: string) =>
+          Promise.resolve(characterId === "character-1" ? character : character2),
+        ),
+      },
+      inspections: {
+        getLatest: vi.fn().mockResolvedValue(null),
+        record: vi.fn(() => oldRecord.promise),
+      },
+    };
+    const mounted = renderPage(apis);
+    fireEvent.click(await screen.findByRole("button", { name: "核验通过" }));
+    mounted.navigate("/playtest/character-2/outfit-2");
+    await screen.findByRole("heading", { name: /第二个正式角色 · 默认造型/ });
+
+    await act(async () => {
+      oldRecord.resolve({
+        ...inspection,
+        characterId: "character-1",
+        outfitId: "outfit-1",
+      });
+      await oldRecord.promise;
+    });
+
+    expect(screen.queryByText("已保存：通过")).toBeNull();
+  });
+
+  it("ignores an old record failure after navigating to another asset", async () => {
+    const oldRecord = deferred<PlaytestInspection>();
+    const character2 = createCharacter("character-2", "outfit-2", "第二个正式角色");
+    const apis: PlaytestPageAPIs = {
+      characters: {
+        get: vi.fn((characterId: string) =>
+          Promise.resolve(characterId === "character-1" ? character : character2),
+        ),
+      },
+      inspections: {
+        getLatest: vi.fn().mockResolvedValue(null),
+        record: vi.fn(() => oldRecord.promise),
+      },
+    };
+    const mounted = renderPage(apis);
+    fireEvent.click(await screen.findByRole("button", { name: "核验通过" }));
+    mounted.navigate("/playtest/character-2/outfit-2");
+    await screen.findByRole("heading", { name: /第二个正式角色 · 默认造型/ });
+
+    await act(async () => {
+      oldRecord.reject(new Error("old request failed"));
+      await oldRecord.promise.catch(() => undefined);
+    });
+
+    expect(screen.queryByText("Playtest 核验结论保存失败")).toBeNull();
+  });
+});
diff --git a/frontend/src/pages/playtest/index.tsx b/frontend/src/pages/playtest/index.tsx
new file mode 100644
index 0000000..9942bb2
--- /dev/null
+++ b/frontend/src/pages/playtest/index.tsx
@@ -0,0 +1,183 @@
+import { useEffect, useRef, useState } from "react";
+import { useParams, useSearchParams } from "react-router";
+
+import type { Character, CharacterAPIs } from "@/entities/character";
+import type {
+  PlaytestInspection,
+  PlaytestInspectionAPIs,
+  PlaytestInspectionStatus,
+} from "@/entities/playtest-inspection";
+
+import { PlaytestWorkbench } from "./workbench";
+
+export interface PlaytestPageAPIs {
+  characters: Pick<CharacterAPIs, "get">;
+  inspections: Pick<PlaytestInspectionAPIs, "getLatest" | "record">;
+}
+
+export interface PlaytestPageProps {
+  apis?: PlaytestPageAPIs;
+}
+
+interface PageData {
+  character: Character | null;
+  inspection: PlaytestInspection | null;
+  error: string | null;
+  loading: boolean;
+}
+
+const initialPageData: PageData = {
+  character: null,
+  inspection: null,
+  error: null,
+  loading: false,
+};
+
+interface PageIdentity {
+  apis: PlaytestPageAPIs | undefined;
+  characterId: string | undefined;
+  outfitId: string | undefined;
+}
+
+function isNotFoundError(error: unknown): boolean {
+  if (typeof error !== "object" || error === null) return false;
+  const identifiable = error as { code?: unknown; status?: unknown };
+  return (
+    identifiable.code === 404 ||
+    identifiable.code === "404" ||
+    identifiable.status === 404 ||
+    identifiable.status === "404"
+  );
+}
+
+export function PlaytestPage({ apis }: PlaytestPageProps) {
+  const { characterId, outfitId } = useParams();
+  const [searchParams] = useSearchParams();
+  const initialActionId = searchParams.get("actionId");
+  const [data, setData] = useState<PageData>(initialPageData);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const pageIdentityRef = useRef<PageIdentity>({
+    apis,
+    characterId,
+    outfitId,
+  });
+  const saveRequestVersionRef = useRef(0);
+
+  useEffect(() => {
+    pageIdentityRef.current = { apis, characterId, outfitId };
+    saveRequestVersionRef.current += 1;
+
+    if (apis === undefined) {
+      setData({ ...initialPageData, error: "Playtest 后端接口尚未配置" });
+      setSaving(false);
+      setSaveError(null);
+      return;
+    }
+
+    if (characterId === undefined || outfitId === undefined) {
+      setData({ ...initialPageData, error: "Playtest 路由参数不完整" });
+      setSaving(false);
+      setSaveError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setData({ ...initialPageData, loading: true });
+    setSaving(false);
+    setSaveError(null);
+
+    void (async () => {
+      let character: Character;
+      try {
+        character = await apis.characters.get(characterId);
+      } catch (error) {
+        if (!cancelled) {
+          setData({
+            ...initialPageData,
+            error: isNotFoundError(error) ? "角色不存在" : "角色读取失败",
+            loading: false,
+          });
+        }
+        return;
+      }
+
+      if (cancelled) return;
+
+      try {
+        const inspection = await apis.inspections.getLatest({ characterId, outfitId });
+        if (!cancelled) setData({ character, inspection, error: null, loading: false });
+      } catch {
+        if (!cancelled) {
+          setData({
+            character,
+            inspection: null,
+            error: "核验记录读取失败",
+            loading: false,
+          });
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [apis, characterId, outfitId]);
+
+  const recordStatus = (status: PlaytestInspectionStatus) => {
+    if (apis === undefined || characterId === undefined || outfitId === undefined) return;
+
+    const requestIdentity = pageIdentityRef.current;
+    const requestVersion = saveRequestVersionRef.current + 1;
+    saveRequestVersionRef.current = requestVersion;
+    setSaving(true);
+    setSaveError(null);
+    void apis.inspections.record({ characterId, outfitId, status }).then(
+      (inspection) => {
+        if (
+          pageIdentityRef.current !== requestIdentity ||
+          saveRequestVersionRef.current !== requestVersion
+        )
+          return;
+        setData((current) => ({ ...current, inspection }));
+        setSaving(false);
+      },
+      () => {
+        if (
+          pageIdentityRef.current !== requestIdentity ||
+          saveRequestVersionRef.current !== requestVersion
+        )
+          return;
+        setSaving(false);
+        setSaveError("Playtest 核验结论保存失败");
+      },
+    );
+  };
+
+  if (data.error !== null) return <PlaytestPageMessage>{data.error}</PlaytestPageMessage>;
+  if (data.loading || data.character === null)
+    return <PlaytestPageMessage>加载 Playtest 数据中</PlaytestPageMessage>;
+
+  return (
+    <PlaytestWorkbench
+      key={initialActionId ?? ""}
+      character={data.character}
+      outfitId={outfitId ?? ""}
+      initialActionId={initialActionId}
+      source={data.inspection?.source ?? null}
+      inspectionStatus={data.inspection?.status ?? null}
+      inspectionMode="persisted"
+      saving={saving}
+      saveError={saveError}
+      onRecordStatus={recordStatus}
+    />
+  );
+}
+
+function PlaytestPageMessage({ children }: { children: string }) {
+  return (
+    <main aria-label="Playtest" className="grid min-h-screen place-items-center bg-slate-100 p-6">
+      <p className="text-sm font-medium text-slate-700">{children}</p>
+    </main>
+  );
+}
diff --git a/frontend/src/pages/playtest/playtest-boundaries.test.ts b/frontend/src/pages/playtest/playtest-boundaries.test.ts
new file mode 100644
index 0000000..5254bfd
--- /dev/null
+++ b/frontend/src/pages/playtest/playtest-boundaries.test.ts
@@ -0,0 +1,110 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, isAbsolute, join, relative, resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const playtestDirectory = fileURLToPath(new URL(".", import.meta.url));
+const entitiesDirectory = fileURLToPath(new URL("../../entities/", import.meta.url));
+const prohibitedImports = [
+  "live-demo-ui-components",
+  "entities/workflow-run",
+  "entities/generation",
+] as const;
+const allowedEntityImports = ["@/entities/character", "@/entities/playtest-inspection"] as const;
+
+function sourceFiles(directory: string): readonly string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) return sourceFiles(path);
+    if (!entry.isFile() || !/\.(?:ts|tsx)$/.test(entry.name) || entry.name.includes(".test.")) {
+      return [];
+    }
+    return [path];
+  });
+}
+
+function allTypeScriptFiles(directory: string): readonly string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) return allTypeScriptFiles(path);
+    if (!entry.isFile() || !/\.(?:ts|tsx)$/.test(entry.name)) return [];
+    return [path];
+  });
+}
+
+function moduleSpecifiers(source: string): readonly string[] {
+  return [...source.matchAll(/(?:from\s+|import\s*)["']([^"']+)["']/g)].map(
+    (match) => match[1] ?? "",
+  );
+}
+
+function entityEntry(file: string, dependency: string): string | null {
+  if (dependency === "@/entities") return "";
+  if (dependency.startsWith("@/entities/")) return dependency.slice("@/entities/".length);
+  if (!dependency.startsWith(".")) return null;
+
+  const relativeEntry = relative(entitiesDirectory, resolve(dirname(file), dependency));
+  if (relativeEntry.startsWith("..") || isAbsolute(relativeEntry)) return null;
+
+  return relativeEntry.replaceAll("\\", "/").replace(/\/index$/, "");
+}
+
+describe("Playtest architecture boundaries", () => {
+  it("does not import forbidden application or live-demo implementation layers", () => {
+    // Catches the isolated Playtest slice reaching into unrelated product layers.
+    for (const file of sourceFiles(playtestDirectory)) {
+      const source = readFileSync(file, "utf8");
+      for (const fragment of prohibitedImports) {
+        expect(source, `${file} must not contain ${fragment}`).not.toContain(fragment);
+      }
+    }
+  });
+
+  it("does not import application or capabilities roots or subpaths", () => {
+    // Catches bypassing the isolated Page through either a barrel or a deep implementation path.
+    for (const file of sourceFiles(playtestDirectory)) {
+      const dependencies = moduleSpecifiers(readFileSync(file, "utf8"));
+      expect(
+        dependencies.filter(
+          (dependency) =>
+            dependency === "@/application" ||
+            dependency.startsWith("@/application/") ||
+            dependency === "@/capabilities" ||
+            dependency.startsWith("@/capabilities/"),
+        ),
+        `${file} must not import application or capabilities`,
+      ).toEqual([]);
+    }
+  });
+
+  it("imports Entity contracts only from the two approved direct entrypoints", () => {
+    // Catches alias or relative root barrels and deep paths that hide Playtest's dependencies.
+    for (const file of sourceFiles(playtestDirectory)) {
+      const entityImports = moduleSpecifiers(readFileSync(file, "utf8"))
+        .map((dependency) => ({ dependency, entry: entityEntry(file, dependency) }))
+        .filter((candidate) => candidate.entry !== null);
+
+      for (const { dependency, entry } of entityImports) {
+        expect(allowedEntityImports, `${file} imports ${dependency}`).toContain(
+          `@/entities/${entry}`,
+        );
+      }
+    }
+  });
+
+  it("keeps the demo fixture out of formal Playtest source", () => {
+    // Catches a formal route silently importing the demo character as an API fallback.
+    const importers = allTypeScriptFiles(playtestDirectory).filter((file) =>
+      readFileSync(file, "utf8").includes("testing/demo-character"),
+    );
+
+    expect(
+      importers.every(
+        (file) => file === join(playtestDirectory, "demo-page.tsx") || file.includes(".test."),
+      ),
+    ).toBe(true);
+    expect(readFileSync(join(playtestDirectory, "index.tsx"), "utf8")).not.toContain(
+      "testing/demo-character",
+    );
+  });
+});
diff --git a/frontend/src/pages/playtest/testing/demo-character.test.ts b/frontend/src/pages/playtest/testing/demo-character.test.ts
new file mode 100644
index 0000000..4a4fafc
--- /dev/null
+++ b/frontend/src/pages/playtest/testing/demo-character.test.ts
@@ -0,0 +1,45 @@
+import { existsSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+import {
+  PLAYTEST_DEMO_ACTION_ID,
+  PLAYTEST_DEMO_CHARACTER,
+  PLAYTEST_DEMO_OUTFIT_ID,
+} from "./demo-character";
+
+describe("PLAYTEST_DEMO_CHARACTER", () => {
+  it("provides a confirmed boy outfit with complete idle and walk fixtures", () => {
+    const outfit = PLAYTEST_DEMO_CHARACTER.outfits.find(({ id }) => id === PLAYTEST_DEMO_OUTFIT_ID);
+
+    expect(PLAYTEST_DEMO_CHARACTER.outfits).toHaveLength(1);
+    expect(PLAYTEST_DEMO_CHARACTER.outfits[0]?.id).toBe(PLAYTEST_DEMO_OUTFIT_ID);
+    expect(outfit).toBeDefined();
+    expect(PLAYTEST_DEMO_ACTION_ID).toBe("playtest-demo-boy-idle");
+    expect(outfit!.actions.map((action) => action.type)).toEqual(["idle", "walk"]);
+    expect(outfit!.actions.every((action) => action.sequences[0]?.frames.length === 8)).toBe(true);
+    expect(outfit!.actions.every((action) => action.status === "confirmed")).toBe(true);
+
+    const walkFrames = outfit!.actions.find((action) => action.type === "walk")!.sequences[0]!
+      .frames;
+    const walkSteps = walkFrames.flatMap((frame) =>
+      frame.rootMotion === null ? [] : [frame.rootMotion.dx],
+    );
+    expect(walkSteps).toEqual([4, 4, 4, 4, 4, 4]);
+    expect(walkSteps.reduce((sum, step) => sum + step, 0)).toBe(24);
+
+    const frames = outfit!.actions.flatMap((action) => action.sequences[0]!.frames);
+    expect(frames.some((frame) => frame.durationMs !== null)).toBe(true);
+    expect(frames.some((frame) => frame.rootMotion !== null)).toBe(true);
+    expect(frames.some((frame) => frame.qc === "passed")).toBe(true);
+    expect(frames.some((frame) => frame.qc === "pending")).toBe(true);
+    expect(frames.some((frame) => frame.rejected)).toBe(true);
+
+    const imageUrls = [
+      outfit!.characterTemplateUrl,
+      ...outfit!.candidateCharacterTemplates.map((candidate) => candidate.imageUrl),
+      ...outfit!.baseFrames.map((frame) => frame.imageUrl),
+      ...frames.map((frame) => frame.imageUrl),
+    ];
+    expect(imageUrls.every((url) => url !== null && existsSync(new URL(url)))).toBe(true);
+  });
+});
diff --git a/frontend/src/pages/playtest/testing/demo-character.ts b/frontend/src/pages/playtest/testing/demo-character.ts
new file mode 100644
index 0000000..05cff11
--- /dev/null
+++ b/frontend/src/pages/playtest/testing/demo-character.ts
@@ -0,0 +1,192 @@
+import type { Character, Frame } from "../../../entities/character";
+
+export const PLAYTEST_DEMO_CHARACTER_ID = "playtest-demo-boy";
+export const PLAYTEST_DEMO_OUTFIT_ID = "playtest-demo-boy-default";
+export const PLAYTEST_DEMO_ACTION_ID = "playtest-demo-boy-idle";
+
+const fixtureUrls = {
+  "base.png": new URL("./fixtures/boy/base.png", import.meta.url).href,
+  "idle-01.png": new URL("./fixtures/boy/idle-01.png", import.meta.url).href,
+  "idle-02.png": new URL("./fixtures/boy/idle-02.png", import.meta.url).href,
+  "idle-03.png": new URL("./fixtures/boy/idle-03.png", import.meta.url).href,
+  "idle-04.png": new URL("./fixtures/boy/idle-04.png", import.meta.url).href,
+  "idle-05.png": new URL("./fixtures/boy/idle-05.png", import.meta.url).href,
+  "idle-06.png": new URL("./fixtures/boy/idle-06.png", import.meta.url).href,
+  "idle-07.png": new URL("./fixtures/boy/idle-07.png", import.meta.url).href,
+  "idle-08.png": new URL("./fixtures/boy/idle-08.png", import.meta.url).href,
+  "walk-01.png": new URL("./fixtures/boy/walk-01.png", import.meta.url).href,
+  "walk-02.png": new URL("./fixtures/boy/walk-02.png", import.meta.url).href,
+  "walk-03.png": new URL("./fixtures/boy/walk-03.png", import.meta.url).href,
+  "walk-04.png": new URL("./fixtures/boy/walk-04.png", import.meta.url).href,
+  "walk-05.png": new URL("./fixtures/boy/walk-05.png", import.meta.url).href,
+  "walk-06.png": new URL("./fixtures/boy/walk-06.png", import.meta.url).href,
+  "walk-07.png": new URL("./fixtures/boy/walk-07.png", import.meta.url).href,
+  "walk-08.png": new URL("./fixtures/boy/walk-08.png", import.meta.url).href,
+} as const;
+
+const fixtureUrl = (name: keyof typeof fixtureUrls) => fixtureUrls[name];
+const demoWalkStep = 4;
+
+const idleFrames: Frame[] = [
+  {
+    imageUrl: fixtureUrl("idle-01.png"),
+    durationMs: 160,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("idle-02.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("idle-03.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "pending",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("idle-04.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("idle-05.png"),
+    durationMs: 160,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("idle-06.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "pending",
+    rejected: true,
+  },
+  {
+    imageUrl: fixtureUrl("idle-07.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("idle-08.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+];
+
+const walkFrames: Frame[] = [
+  {
+    imageUrl: fixtureUrl("walk-01.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-02.png"),
+    durationMs: null,
+    rootMotion: { dx: demoWalkStep, dy: 0 },
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-03.png"),
+    durationMs: 120,
+    rootMotion: { dx: demoWalkStep, dy: 0 },
+    qc: "pending",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-04.png"),
+    durationMs: null,
+    rootMotion: { dx: demoWalkStep, dy: 0 },
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-05.png"),
+    durationMs: null,
+    rootMotion: { dx: demoWalkStep, dy: 0 },
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-06.png"),
+    durationMs: null,
+    rootMotion: { dx: demoWalkStep, dy: 0 },
+    qc: "pending",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-07.png"),
+    durationMs: 120,
+    rootMotion: { dx: demoWalkStep, dy: 0 },
+    qc: "passed",
+    rejected: false,
+  },
+  {
+    imageUrl: fixtureUrl("walk-08.png"),
+    durationMs: null,
+    rootMotion: null,
+    qc: "passed",
+    rejected: false,
+  },
+];
+
+export const PLAYTEST_DEMO_CHARACTER: Character = {
+  id: PLAYTEST_DEMO_CHARACTER_ID,
+  projectId: "playtest-demo-project",
+  name: "少年 · Playtest 演示角色",
+  createdAt: "2026-07-30T00:00:00.000Z",
+  updatedAt: "2026-07-30T00:00:00.000Z",
+  outfits: [
+    {
+      id: PLAYTEST_DEMO_OUTFIT_ID,
+      characterId: PLAYTEST_DEMO_CHARACTER_ID,
+      name: "默认造型",
+      candidateCharacterTemplates: [
+        {
+          id: "playtest-demo-boy-template",
+          imageUrl: fixtureUrl("base.png"),
+          generationId: "playtest-demo-boy-import",
+        },
+      ],
+      characterTemplateUrl: fixtureUrl("base.png"),
+      baseFrames: [{ direction: "default", imageUrl: fixtureUrl("base.png") }],
+      actions: [
+        {
+          id: PLAYTEST_DEMO_ACTION_ID,
+          outfitId: PLAYTEST_DEMO_OUTFIT_ID,
+          name: "待机",
+          source: "action_template",
+          type: "idle",
+          status: "confirmed",
+          fps: 8,
+          sequences: [{ direction: "default", keyFrameIndex: 0, frames: idleFrames }],
+        },
+        {
+          id: "playtest-demo-boy-walk",
+          outfitId: PLAYTEST_DEMO_OUTFIT_ID,
+          name: "行走",
+          source: "action_template",
+          type: "walk",
+          status: "confirmed",
+          fps: 10,
+          sequences: [{ direction: "default", keyFrameIndex: 0, frames: walkFrames }],
+        },
+      ],
+    },
+  ],
+};
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/SOURCE.md b/frontend/src/pages/playtest/testing/fixtures/boy/SOURCE.md
new file mode 100644
index 0000000..16a42e6
--- /dev/null
+++ b/frontend/src/pages/playtest/testing/fixtures/boy/SOURCE.md
@@ -0,0 +1,7 @@
+# Playtest fixture source
+
+- Original project: `E:/Compressed/windup-asset-lab-codex-issue-14-workflow-skeleton_5/windup-asset-lab-codex-issue-14-workflow-skeleton/`
+- Original character (`card.json`): `少年 · 默认角色`
+- Original `importedFrom`: `default-demo-assets`
+
+These files are copied only as development test data for the Playtest workbench.
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/base.png b/frontend/src/pages/playtest/testing/fixtures/boy/base.png
new file mode 100644
index 0000000..7755f3c
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/base.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-01.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-01.png
new file mode 100644
index 0000000..7755f3c
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-01.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-02.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-02.png
new file mode 100644
index 0000000..4cc3e9b
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-02.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-03.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-03.png
new file mode 100644
index 0000000..649ba1b
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-03.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-04.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-04.png
new file mode 100644
index 0000000..b998e0b
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-04.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-05.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-05.png
new file mode 100644
index 0000000..cdd4e01
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-05.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-06.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-06.png
new file mode 100644
index 0000000..0b1ccb7
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-06.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-07.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-07.png
new file mode 100644
index 0000000..23a0356
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-07.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/idle-08.png b/frontend/src/pages/playtest/testing/fixtures/boy/idle-08.png
new file mode 100644
index 0000000..67936b2
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/idle-08.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-01.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-01.png
new file mode 100644
index 0000000..ab3e368
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-01.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-02.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-02.png
new file mode 100644
index 0000000..7e50772
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-02.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-03.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-03.png
new file mode 100644
index 0000000..15b97a2
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-03.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-04.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-04.png
new file mode 100644
index 0000000..c3ac40e
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-04.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-05.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-05.png
new file mode 100644
index 0000000..12970d8
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-05.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-06.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-06.png
new file mode 100644
index 0000000..d5fe4a9
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-06.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-07.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-07.png
new file mode 100644
index 0000000..5c9f309
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-07.png differ
diff --git a/frontend/src/pages/playtest/testing/fixtures/boy/walk-08.png b/frontend/src/pages/playtest/testing/fixtures/boy/walk-08.png
new file mode 100644
index 0000000..802a06e
Binary files /dev/null and b/frontend/src/pages/playtest/testing/fixtures/boy/walk-08.png differ
diff --git a/frontend/src/pages/playtest/workbench/acceptance.tsx b/frontend/src/pages/playtest/workbench/acceptance.tsx
new file mode 100644
index 0000000..3ad398e
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/acceptance.tsx
@@ -0,0 +1,87 @@
+import type { PlaytestInspectionStatus } from "@/entities/playtest-inspection";
+
+import { StatusPanel } from "./status-panel";
+
+export interface AcceptanceProps {
+  inspectionMode: "demo" | "persisted";
+  inspectionStatus: PlaytestInspectionStatus | null;
+  saving?: boolean;
+  saveError?: string | null;
+  onRecordStatus(status: PlaytestInspectionStatus): void;
+}
+
+function statusText(status: PlaytestInspectionStatus | null): string {
+  if (status === "passed") return "通过";
+  if (status === "issues_found") return "发现问题";
+  return "尚未核验";
+}
+
+export function Acceptance({
+  inspectionMode,
+  inspectionStatus,
+  saving = false,
+  saveError = null,
+  onRecordStatus,
+}: AcceptanceProps) {
+  const isDemo = inspectionMode === "demo";
+
+  return (
+    <section
+      aria-label="核验状态"
+      aria-busy={saving}
+      className="space-y-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+    >
+      <header>
+        <p className="text-[10px] font-semibold tracking-[0.18em] text-slate-400">ACCEPTANCE</p>
+        <h2 className="mt-1 text-sm font-semibold text-slate-900">核验状态</h2>
+      </header>
+      <StatusPanel
+        title={isDemo ? "Demo 核验" : "持久化核验"}
+        tone={inspectionStatus === "issues_found" ? "warning" : "neutral"}
+      >
+        {isDemo ? (
+          <>
+            <p>本地核验：{statusText(inspectionStatus)}</p>
+            <p className="mt-1 text-xs">未提交后端</p>
+          </>
+        ) : (
+          <p>
+            {inspectionStatus === null
+              ? "尚无已保存核验"
+              : `已保存：${statusText(inspectionStatus)}`}
+          </p>
+        )}
+      </StatusPanel>
+      {saving ? (
+        <p role="status" aria-live="polite" className="text-xs text-slate-500">
+          正在保存核验结论
+        </p>
+      ) : null}
+      {saveError !== null ? (
+        <div role="alert" aria-live="assertive">
+          <StatusPanel title="保存失败" tone="danger">
+            {saveError}
+          </StatusPanel>
+        </div>
+      ) : null}
+      <div className="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          disabled={saving}
+          onClick={() => onRecordStatus("passed")}
+          className="rounded-lg bg-emerald-900 px-3 py-2 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          核验通过
+        </button>
+        <button
+          type="button"
+          disabled={saving}
+          onClick={() => onRecordStatus("issues_found")}
+          className="rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-900 disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          发现问题
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/action-selector.tsx b/frontend/src/pages/playtest/workbench/action-selector.tsx
new file mode 100644
index 0000000..3853aa6
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/action-selector.tsx
@@ -0,0 +1,51 @@
+import type { PreviewAction } from "./model/types";
+
+export interface ActionSelectorProps {
+  actions: readonly PreviewAction[];
+  selectedActionId: string | null;
+  onSelectAction(actionId: string): void;
+}
+
+function frameCount(action: PreviewAction): number {
+  return action.sequences.reduce((total, sequence) => total + sequence.frames.length, 0);
+}
+
+export function ActionSelector({ actions, selectedActionId, onSelectAction }: ActionSelectorProps) {
+  return (
+    <aside
+      aria-label="动作列表"
+      className="h-full overflow-y-auto border-r border-slate-200 bg-[#171918] p-3 text-white"
+    >
+      <p className="text-[10px] font-semibold tracking-[0.18em] text-white/35">动作实例</p>
+      <div className="mt-3 space-y-2">
+        {actions.map((action) => {
+          const count = frameCount(action);
+          const selected = action.id === selectedActionId;
+
+          return (
+            <button
+              key={action.id}
+              type="button"
+              aria-pressed={selected}
+              disabled={count === 0}
+              onClick={() => onSelectAction(action.id)}
+              className={`flex w-full items-center justify-between rounded-lg border px-3 py-3 text-left transition-colors ${
+                selected
+                  ? "border-white/25 bg-white/12 text-white"
+                  : "border-transparent text-white/65 hover:bg-white/5 hover:text-white"
+              } disabled:cursor-not-allowed disabled:opacity-40`}
+            >
+              <span>
+                <strong className="block text-sm">{action.name}</strong>
+                <span className="mt-1 block text-[10px] uppercase text-white/45">
+                  {action.status} · {action.fps} FPS
+                </span>
+              </span>
+              <span className="text-xs tabular-nums text-emerald-300">{count} 帧</span>
+            </button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/analysis/frame-geometry.test.ts b/frontend/src/pages/playtest/workbench/analysis/frame-geometry.test.ts
new file mode 100644
index 0000000..77a358d
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/frame-geometry.test.ts
@@ -0,0 +1,128 @@
+import { describe, expect, it } from "vitest";
+
+import { measureFrameGeometry, type FramePixelData } from "./frame-geometry";
+
+function createPixels(
+  width: number,
+  height: number,
+  visible: readonly { x: number; y: number; alpha: number }[],
+): FramePixelData {
+  const data = new Uint8ClampedArray(width * height * 4);
+
+  for (const pixel of visible) data[(pixel.y * width + pixel.x) * 4 + 3] = pixel.alpha;
+
+  return { data, width, height };
+}
+
+describe("measureFrameGeometry", () => {
+  it("treats only alpha values greater than 24 as visible", () => {
+    // Catches the review algorithm including matte noise at the old Alpha cutoff.
+    expect(measureFrameGeometry(createPixels(1, 1, [{ x: 0, y: 0, alpha: 24 }]))).toBeNull();
+    expect(measureFrameGeometry(createPixels(1, 1, [{ x: 0, y: 0, alpha: 25 }]))).toMatchObject({
+      opaquePixels: 1,
+      coverageRatio: 1,
+    });
+  });
+
+  it("measures bounds, centroid, foot line, height, area and coverage from visible pixels", () => {
+    // Catches off-by-one bounds or a centroid derived from the box instead of real visible pixels.
+    const geometry = measureFrameGeometry(
+      createPixels(4, 4, [
+        { x: 1, y: 1, alpha: 255 },
+        { x: 2, y: 1, alpha: 255 },
+        { x: 1, y: 2, alpha: 255 },
+        { x: 2, y: 2, alpha: 255 },
+      ]),
+    );
+
+    expect(geometry).toEqual({
+      width: 4,
+      height: 4,
+      bounds: { left: 1, top: 1, right: 2, bottom: 2, width: 2, height: 2 },
+      centroid: { x: 1.5, y: 1.5 },
+      footY: 2,
+      subjectHeight: 2,
+      opaquePixels: 4,
+      coverageRatio: 0.25,
+      fingerprint: expect.any(Array),
+    });
+    expect(geometry?.fingerprint).toHaveLength(64);
+  });
+
+  it("produces different compact fingerprints for different silhouettes with equal bounds", () => {
+    const leftTop = measureFrameGeometry(
+      createPixels(4, 4, [
+        { x: 0, y: 0, alpha: 255 },
+        { x: 1, y: 0, alpha: 255 },
+        { x: 2, y: 0, alpha: 255 },
+        { x: 3, y: 0, alpha: 255 },
+        { x: 3, y: 1, alpha: 255 },
+        { x: 3, y: 2, alpha: 255 },
+        { x: 3, y: 3, alpha: 255 },
+      ]),
+    );
+    const leftBottom = measureFrameGeometry(
+      createPixels(4, 4, [
+        { x: 0, y: 0, alpha: 255 },
+        { x: 0, y: 1, alpha: 255 },
+        { x: 0, y: 2, alpha: 255 },
+        { x: 0, y: 3, alpha: 255 },
+        { x: 1, y: 3, alpha: 255 },
+        { x: 2, y: 3, alpha: 255 },
+        { x: 3, y: 3, alpha: 255 },
+      ]),
+    );
+
+    expect(leftTop?.bounds).toEqual(leftBottom?.bounds);
+    expect(leftTop?.fingerprint).not.toEqual(leftBottom?.fingerprint);
+  });
+
+  it("keeps small dark silhouettes distinguishable instead of diluting them across the canvas", () => {
+    const topLeft: Array<{ x: number; y: number; alpha: number }> = [];
+    const bottomRight: Array<{ x: number; y: number; alpha: number }> = [];
+    for (let y = 96; y < 160; y += 1) {
+      for (let x = 96; x < 160; x += 1) {
+        if (y < 128 || x < 112) topLeft.push({ x, y, alpha: 255 });
+        if (y >= 128 || x >= 144) bottomRight.push({ x, y, alpha: 255 });
+      }
+    }
+    const first = measureFrameGeometry(createPixels(256, 256, topLeft));
+    const second = measureFrameGeometry(createPixels(256, 256, bottomRight));
+    const distance =
+      first?.fingerprint?.reduce(
+        (total, value, index) => total + Math.abs(value - (second?.fingerprint?.[index] ?? value)),
+        0,
+      ) ?? 0;
+
+    expect(first?.bounds).toEqual(second?.bounds);
+    expect(distance / 64).toBeGreaterThan(0.02);
+  });
+
+  it("rejects an RGBA buffer whose dimensions do not match its length", () => {
+    // Catches silent geometry corruption when Canvas data and dimensions diverge.
+    expect(() =>
+      measureFrameGeometry({ data: new Uint8ClampedArray(4), width: 2, height: 2 }),
+    ).toThrowError("RGBA 像素长度与画布尺寸不一致");
+  });
+
+  it("ignores a tiny isolated Alpha component outside the visible subject", () => {
+    // Catches one stray generated pixel moving the measured foot line and centroid.
+    const geometry = measureFrameGeometry(
+      createPixels(4, 4, [
+        { x: 0, y: 0, alpha: 255 },
+        { x: 1, y: 0, alpha: 255 },
+        { x: 0, y: 1, alpha: 255 },
+        { x: 1, y: 1, alpha: 255 },
+        { x: 3, y: 3, alpha: 255 },
+      ]),
+    );
+
+    expect(geometry).toMatchObject({
+      bounds: { left: 0, top: 0, right: 1, bottom: 1, width: 2, height: 2 },
+      centroid: { x: 0.5, y: 0.5 },
+      footY: 1,
+      opaquePixels: 4,
+      coverageRatio: 0.25,
+    });
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/analysis/frame-geometry.ts b/frontend/src/pages/playtest/workbench/analysis/frame-geometry.ts
new file mode 100644
index 0000000..c4bc63c
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/frame-geometry.ts
@@ -0,0 +1,178 @@
+export const ALPHA_THRESHOLD = 24;
+const MIN_COMPONENT_PIXELS = 4;
+const RELATIVE_COMPONENT_RATIO = 0.002;
+
+export interface FramePixelData {
+  data: Uint8ClampedArray;
+  width: number;
+  height: number;
+}
+
+export interface FrameGeometry {
+  width: number;
+  height: number;
+  bounds: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+  };
+  centroid: { x: number; y: number };
+  footY: number;
+  subjectHeight: number;
+  opaquePixels: number;
+  coverageRatio: number;
+  /** Compact 8×8 alpha/luminance signature used for adjacent-frame similarity checks. */
+  fingerprint?: readonly number[];
+}
+
+function createFingerprint(
+  data: Uint8ClampedArray,
+  width: number,
+  subjectPixels: readonly number[],
+  bounds: { left: number; top: number; width: number; height: number },
+): readonly number[] {
+  const sums = new Float64Array(64);
+  const cellPixels = new Uint32Array(64);
+
+  for (let y = 0; y < bounds.height; y += 1) {
+    for (let x = 0; x < bounds.width; x += 1) {
+      const cellX = Math.min(7, Math.floor((x * 8) / bounds.width));
+      const cellY = Math.min(7, Math.floor((y * 8) / bounds.height));
+      cellPixels[cellY * 8 + cellX] += 1;
+    }
+  }
+
+  for (const index of subjectPixels) {
+    const x = index % width;
+    const y = Math.floor(index / width);
+    const offset = index * 4;
+    const red = data[offset] ?? 0;
+    const green = data[offset + 1] ?? 0;
+    const blue = data[offset + 2] ?? 0;
+    const alpha = (data[offset + 3] ?? 0) / 255;
+    const luminance = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255;
+    const cellX = Math.min(7, Math.floor(((x - bounds.left) * 8) / bounds.width));
+    const cellY = Math.min(7, Math.floor(((y - bounds.top) * 8) / bounds.height));
+    sums[cellY * 8 + cellX] += alpha * (0.25 + luminance * 0.75);
+  }
+
+  return Array.from(sums, (sum, index) => {
+    const count = cellPixels[index] ?? 0;
+    return count === 0 ? 0 : Number((sum / count).toFixed(4));
+  });
+}
+
+function visibleComponents(data: Uint8ClampedArray, width: number, height: number): number[][] {
+  const visible = new Uint8Array(width * height);
+  const visited = new Uint8Array(width * height);
+  const components: number[][] = [];
+
+  for (let index = 0; index < visible.length; index += 1) {
+    const alpha = data[index * 4 + 3];
+    if (alpha !== undefined && alpha > ALPHA_THRESHOLD) visible[index] = 1;
+  }
+
+  for (let start = 0; start < visible.length; start += 1) {
+    if (visible[start] === 0 || visited[start] === 1) continue;
+
+    const component: number[] = [];
+    const queue = [start];
+    visited[start] = 1;
+
+    for (let head = 0; head < queue.length; head += 1) {
+      const index = queue[head];
+      if (index === undefined) continue;
+      component.push(index);
+
+      const x = index % width;
+      const y = Math.floor(index / width);
+      for (let offsetY = -1; offsetY <= 1; offsetY += 1) {
+        for (let offsetX = -1; offsetX <= 1; offsetX += 1) {
+          if (offsetX === 0 && offsetY === 0) continue;
+          const nextX = x + offsetX;
+          const nextY = y + offsetY;
+          if (nextX < 0 || nextX >= width || nextY < 0 || nextY >= height) continue;
+
+          const next = nextY * width + nextX;
+          if (visible[next] === 0 || visited[next] === 1) continue;
+          visited[next] = 1;
+          queue.push(next);
+        }
+      }
+    }
+
+    components.push(component);
+  }
+
+  return components;
+}
+
+export function measureFrameGeometry(pixels: FramePixelData): FrameGeometry | null {
+  const { data, width, height } = pixels;
+
+  if (data.length !== width * height * 4) {
+    throw new RangeError("RGBA 像素长度与画布尺寸不一致");
+  }
+
+  const components = visibleComponents(data, width, height);
+  if (components.length === 0) return null;
+
+  const largestSize = Math.max(...components.map((component) => component.length));
+  const minimumSize = Math.min(
+    largestSize,
+    Math.max(MIN_COMPONENT_PIXELS, Math.ceil(largestSize * RELATIVE_COMPONENT_RATIO)),
+  );
+  const subjectPixels = components.flatMap((component) =>
+    component.length === largestSize || component.length >= minimumSize ? component : [],
+  );
+
+  let left = width;
+  let top = height;
+  let right = -1;
+  let bottom = -1;
+  let opaquePixels = 0;
+  let sumX = 0;
+  let sumY = 0;
+
+  for (const index of subjectPixels) {
+    const x = index % width;
+    const y = Math.floor(index / width);
+    left = Math.min(left, x);
+    top = Math.min(top, y);
+    right = Math.max(right, x);
+    bottom = Math.max(bottom, y);
+    opaquePixels += 1;
+    sumX += x;
+    sumY += y;
+  }
+
+  const subjectWidth = right - left + 1;
+  const subjectHeight = bottom - top + 1;
+
+  return {
+    width,
+    height,
+    bounds: {
+      left,
+      top,
+      right,
+      bottom,
+      width: subjectWidth,
+      height: subjectHeight,
+    },
+    centroid: { x: sumX / opaquePixels, y: sumY / opaquePixels },
+    footY: bottom,
+    subjectHeight,
+    opaquePixels,
+    coverageRatio: opaquePixels / (width * height),
+    fingerprint: createFingerprint(data, width, subjectPixels, {
+      left,
+      top,
+      width: subjectWidth,
+      height: subjectHeight,
+    }),
+  };
+}
diff --git a/frontend/src/pages/playtest/workbench/analysis/image-geometry.test.ts b/frontend/src/pages/playtest/workbench/analysis/image-geometry.test.ts
new file mode 100644
index 0000000..a80199b
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/image-geometry.test.ts
@@ -0,0 +1,145 @@
+/** @vitest-environment jsdom */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { readImageGeometry } from "./image-geometry";
+
+type ImageBehavior = "load" | "error" | "pending";
+
+let imageBehavior: ImageBehavior;
+let crossOriginAtSourceAssignment: string | null;
+let lastAssignedSource: string;
+let canvasContext: Pick<CanvasRenderingContext2D, "drawImage" | "getImageData"> | null;
+
+class FakeImage {
+  crossOrigin: string | null = null;
+  naturalWidth = 2;
+  naturalHeight = 2;
+  onerror: OnErrorEventHandler | null = null;
+  onload: ((this: GlobalEventHandlers, event: Event) => unknown) | null = null;
+  private source = "";
+
+  get src(): string {
+    return this.source;
+  }
+
+  set src(value: string) {
+    this.source = value;
+    crossOriginAtSourceAssignment = this.crossOrigin;
+    lastAssignedSource = value;
+    if (value === "" || imageBehavior === "pending") return;
+
+    queueMicrotask(() => {
+      if (imageBehavior === "load") this.onload?.call(this as never, new Event("load"));
+      else this.onerror?.call(this as never, "error", "", 0, 0, new Error("load failed"));
+    });
+  }
+}
+
+function pixelsWithAlpha(alpha: number): ImageData {
+  const data = new Uint8ClampedArray(2 * 2 * 4);
+  data[3] = alpha;
+  return { data, width: 2, height: 2, colorSpace: "srgb" } as ImageData;
+}
+
+beforeEach(() => {
+  imageBehavior = "load";
+  crossOriginAtSourceAssignment = null;
+  lastAssignedSource = "";
+  canvasContext = {
+    drawImage: vi.fn(),
+    getImageData: vi.fn(() => pixelsWithAlpha(255)),
+  };
+  vi.stubGlobal("Image", FakeImage);
+  vi.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+    if (tagName !== "canvas")
+      return document.createElementNS("http://www.w3.org/1999/xhtml", tagName);
+    return {
+      width: 0,
+      height: 0,
+      getContext: () => canvasContext,
+    } as unknown as HTMLCanvasElement;
+  }) as typeof document.createElement);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("readImageGeometry", () => {
+  it("requests anonymous image access before reading real Canvas pixels", async () => {
+    // Catches crossOrigin being assigned after src or a placeholder geometry replacing actual pixels.
+    const result = await readImageGeometry("https://cdn.example.test/frame.png");
+
+    expect(crossOriginAtSourceAssignment).toBe("anonymous");
+    expect(result).toEqual({
+      status: "ready",
+      geometry: {
+        width: 2,
+        height: 2,
+        bounds: { left: 0, top: 0, right: 0, bottom: 0, width: 1, height: 1 },
+        centroid: { x: 0, y: 0 },
+        footY: 0,
+        subjectHeight: 1,
+        opaquePixels: 1,
+        coverageRatio: 0.25,
+        fingerprint: expect.any(Array),
+      },
+    });
+  });
+
+  it("reports asset, Canvas and transparent-frame failures instead of zero evidence", async () => {
+    // Catches unavailable evidence being silently presented as a successful zero measurement.
+    imageBehavior = "error";
+    await expect(readImageGeometry("/missing.png")).resolves.toEqual({
+      status: "unavailable",
+      reason: "图片加载失败",
+    });
+
+    imageBehavior = "load";
+    canvasContext = null;
+    await expect(readImageGeometry("/no-canvas.png")).resolves.toEqual({
+      status: "unavailable",
+      reason: "浏览器无法读取图片像素",
+    });
+
+    canvasContext = {
+      drawImage: vi.fn(),
+      getImageData: vi.fn(() => pixelsWithAlpha(24)),
+    };
+    await expect(readImageGeometry("/transparent.png")).resolves.toEqual({
+      status: "unavailable",
+      reason: "图片没有可见主体",
+    });
+  });
+
+  it("reports a tainted Canvas as a cross-origin pixel failure", async () => {
+    // Catches signed remote images being mislabelled as transparent or valid when CORS blocks inspection.
+    canvasContext = {
+      drawImage: vi.fn(),
+      getImageData: vi.fn(() => {
+        throw new DOMException("tainted", "SecurityError");
+      }),
+    };
+
+    await expect(readImageGeometry("https://remote.example.test/frame.png")).resolves.toEqual({
+      status: "unavailable",
+      reason: "图片跨域，无法计算像素",
+    });
+  });
+
+  it("cancels a pending image read through AbortSignal", async () => {
+    // Catches a stale sequence load surviving a direction switch and updating the new review.
+    imageBehavior = "pending";
+    const controller = new AbortController();
+    const result = readImageGeometry("/slow.png", controller.signal);
+
+    controller.abort();
+
+    await expect(result).resolves.toEqual({
+      status: "unavailable",
+      reason: "分析已取消",
+    });
+    expect(lastAssignedSource).toBe("");
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/analysis/image-geometry.ts b/frontend/src/pages/playtest/workbench/analysis/image-geometry.ts
new file mode 100644
index 0000000..419a108
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/image-geometry.ts
@@ -0,0 +1,68 @@
+import { measureFrameGeometry } from "./frame-geometry";
+import type { FrameGeometryResult } from "./sequence-evidence";
+
+function unavailable(reason: string): FrameGeometryResult {
+  return { status: "unavailable", reason };
+}
+
+function pixelReadFailure(error: unknown): FrameGeometryResult {
+  if (error instanceof DOMException && error.name === "SecurityError") {
+    return unavailable("图片跨域，无法计算像素");
+  }
+
+  return unavailable("浏览器无法读取图片像素");
+}
+
+export function readImageGeometry(
+  imageUrl: string,
+  signal?: AbortSignal,
+): Promise<FrameGeometryResult> {
+  return new Promise((resolve) => {
+    const image = new Image();
+    let settled = false;
+
+    const finish = (result: FrameGeometryResult) => {
+      if (settled) return;
+      settled = true;
+      image.onload = null;
+      image.onerror = null;
+      signal?.removeEventListener("abort", abort);
+      resolve(result);
+    };
+    const abort = () => {
+      image.src = "";
+      finish(unavailable("分析已取消"));
+    };
+
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = image.naturalWidth;
+      canvas.height = image.naturalHeight;
+      const context = canvas.getContext("2d", { willReadFrequently: true });
+
+      if (context === null) {
+        finish(unavailable("浏览器无法读取图片像素"));
+        return;
+      }
+
+      try {
+        context.drawImage(image, 0, 0);
+        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const geometry = measureFrameGeometry(imageData);
+        finish(geometry === null ? unavailable("图片没有可见主体") : { status: "ready", geometry });
+      } catch (error) {
+        finish(pixelReadFailure(error));
+      }
+    };
+    image.onerror = () => finish(unavailable("图片加载失败"));
+
+    if (signal?.aborted) {
+      abort();
+      return;
+    }
+
+    signal?.addEventListener("abort", abort, { once: true });
+    image.src = imageUrl;
+  });
+}
diff --git a/frontend/src/pages/playtest/workbench/analysis/sequence-evidence.test.ts b/frontend/src/pages/playtest/workbench/analysis/sequence-evidence.test.ts
new file mode 100644
index 0000000..9d19681
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/sequence-evidence.test.ts
@@ -0,0 +1,275 @@
+import { describe, expect, it } from "vitest";
+
+import type { FrameGeometry } from "./frame-geometry";
+import { buildSequenceEvidence, type FrameEvidenceInput } from "./sequence-evidence";
+
+function geometry(
+  overrides: Partial<
+    Pick<
+      FrameGeometry,
+      "width" | "height" | "footY" | "subjectHeight" | "opaquePixels" | "coverageRatio"
+    >
+  > & { x?: number; y?: number; fingerprint?: readonly number[]; cropped?: boolean } = {},
+): FrameGeometry {
+  const subjectHeight = overrides.subjectHeight ?? 20;
+
+  return {
+    width: overrides.width ?? 256,
+    height: overrides.height ?? 256,
+    bounds: {
+      left: overrides.cropped ? 0 : 100,
+      top: overrides.cropped ? 0 : 100,
+      right: overrides.cropped ? 9 : 109,
+      bottom: overrides.cropped ? subjectHeight - 1 : 100 + subjectHeight - 1,
+      width: 10,
+      height: subjectHeight,
+    },
+    centroid: { x: overrides.x ?? 0, y: overrides.y ?? 0 },
+    footY: overrides.footY ?? 100,
+    subjectHeight,
+    opaquePixels: overrides.opaquePixels ?? 100,
+    coverageRatio: overrides.coverageRatio ?? 0.25,
+    fingerprint: overrides.fingerprint,
+  };
+}
+
+function ready(
+  value: FrameGeometry,
+  rootMotion: FrameEvidenceInput["rootMotion"] = null,
+): FrameEvidenceInput {
+  return { geometry: { status: "ready", geometry: value }, rootMotion };
+}
+
+describe("buildSequenceEvidence", () => {
+  it("returns structured findings for incomplete, cropped and duplicate frames", () => {
+    const fingerprint = Array.from({ length: 64 }, (_, index) => index / 64);
+    const evidence = buildSequenceEvidence(
+      [
+        ready(geometry({ cropped: true, fingerprint })),
+        ready(geometry({ fingerprint })),
+        { geometry: { status: "unavailable", reason: "图片没有可见主体" }, rootMotion: null },
+      ],
+      "walk",
+    );
+
+    expect(evidence.complete).toBe(false);
+    expect(evidence.findings.map((finding) => finding.code)).toEqual(
+      expect.arrayContaining(["subject_cropped", "duplicate_frame", "blank_subject"]),
+    );
+    expect(evidence.findings.find((finding) => finding.code === "duplicate_frame")).toMatchObject({
+      frameIndex: 1,
+      severity: "warning",
+    });
+  });
+
+  it("uses action-aware findings for foot and height changes", () => {
+    const frames = [
+      ready(geometry({ footY: 100, subjectHeight: 30 })),
+      ready(geometry({ footY: 112, subjectHeight: 15 })),
+    ];
+
+    expect(buildSequenceEvidence(frames, "idle").findings.map((finding) => finding.code)).toEqual(
+      expect.arrayContaining(["foot_drift", "height_drift"]),
+    );
+    expect(
+      buildSequenceEvidence(frames, "jump").findings.map((finding) => finding.code),
+    ).not.toContain("foot_drift");
+    expect(
+      buildSequenceEvidence(frames, "crouch").findings.map((finding) => finding.code),
+    ).not.toContain("height_drift");
+  });
+
+  it("flags motion outliers and root-motion direction contradictions", () => {
+    const evidence = buildSequenceEvidence(
+      [
+        ready(geometry({ x: 0 })),
+        ready(geometry({ x: 1 }), { dx: 1, dy: 0 }),
+        ready(geometry({ x: 2 }), { dx: 1, dy: 0 }),
+        ready(geometry({ x: -18 }), { dx: 5, dy: 0 }),
+      ],
+      "walk",
+    );
+
+    expect(evidence.findings.map((finding) => finding.code)).toEqual(
+      expect.arrayContaining(["motion_spike", "root_motion_mismatch"]),
+    );
+  });
+
+  it("calculates a selected frame delta and the hand-derived sequence baseline", () => {
+    // Catches image-derived offsets being calculated from bounds or against the first frame instead of the previous frame.
+    const evidence = buildSequenceEvidence(
+      [ready(geometry()), ready(geometry({ x: 3, y: 4, opaquePixels: 80 }))],
+      "walk",
+    );
+
+    expect(evidence.frames[0]?.previousDelta).toBeNull();
+    expect(evidence.frames[1]?.previousDelta).toEqual({
+      dx: 3,
+      dy: 4,
+      distance: 5,
+      areaDeltaPercent: 20,
+    });
+    expect(evidence.summary).toMatchObject({
+      medianStep: 5,
+      maxStep: 5,
+      movementThreshold: 15,
+      maxAreaDeltaPercent: 20,
+      movementState: "normal",
+      areaState: "normal",
+    });
+  });
+
+  it("does not compare across an unreadable middle frame", () => {
+    // Catches filtered valid frames becoming false neighbours and producing a misleading offset.
+    const evidence = buildSequenceEvidence(
+      [
+        ready(geometry()),
+        { geometry: { status: "unavailable", reason: "图片加载失败" }, rootMotion: null },
+        ready(geometry({ x: 20, y: 20 })),
+      ],
+      "walk",
+    );
+
+    expect(evidence.complete).toBe(false);
+    expect(evidence.unavailableFrameCount).toBe(1);
+    expect(evidence.frames.map((frame) => frame.previousDelta)).toEqual([null, null, null]);
+    expect(evidence.summary.medianStep).toBeNull();
+    expect(evidence.summary.movementState).toBe("not_applicable");
+  });
+
+  it("marks excessive coverage, foot drift and height drift with action-aware states", () => {
+    // Catches jump lift being rejected as foot drift or foreground/background problems being hidden.
+    const frames = [
+      ready(geometry({ footY: 100, subjectHeight: 20, coverageRatio: 0.66 })),
+      ready(geometry({ footY: 104, subjectHeight: 28 })),
+    ];
+
+    const walk = buildSequenceEvidence(frames, "walk");
+    const jump = buildSequenceEvidence(frames, "jump");
+
+    expect(walk.frames[0]?.coverageState).toBe("anomaly");
+    expect(walk.summary).toMatchObject({
+      footDrift: 4,
+      heightDrift: 8,
+      footState: "anomaly",
+      heightThreshold: 12,
+      heightState: "normal",
+    });
+    expect(jump.summary.footState).toBe("attention");
+  });
+
+  it("flags a single movement spike against the sequence median", () => {
+    // Catches a sudden position jump being normalized away by the animation's ordinary movement.
+    const evidence = buildSequenceEvidence(
+      [
+        ready(geometry({ x: 0 })),
+        ready(geometry({ x: 1 })),
+        ready(geometry({ x: 2 })),
+        ready(geometry({ x: 22 })),
+      ],
+      "walk",
+    );
+
+    expect(evidence.summary).toMatchObject({
+      medianStep: 1,
+      maxStep: 20,
+      movementThreshold: 6,
+      movementState: "anomaly",
+    });
+    expect(evidence.frames.map((frame) => frame.movementState)).toEqual([
+      "not_applicable",
+      "normal",
+      "normal",
+      "anomaly",
+    ]);
+  });
+
+  it("keeps an action-aware absolute movement ceiling when every step is large", () => {
+    // Catches an entire drifting sequence normalizing its own 100px jumps through the median.
+    const evidence = buildSequenceEvidence(
+      [ready(geometry({ x: 0 })), ready(geometry({ x: 100 })), ready(geometry({ x: 200 }))],
+      "walk",
+    );
+
+    expect(evidence.summary.movementThreshold).toBeLessThan(100);
+    expect(evidence.summary.movementState).toBe("anomaly");
+    expect(evidence.findings.map((finding) => finding.code)).toContain("motion_spike");
+  });
+
+  it("marks jump and crouch height variation as action-allowed attention", () => {
+    const frames = [ready(geometry({ subjectHeight: 20 })), ready(geometry({ subjectHeight: 60 }))];
+
+    for (const actionType of ["jump", "crouch"] as const) {
+      const evidence = buildSequenceEvidence(frames, actionType);
+      expect(evidence.summary.heightThreshold).toBeNull();
+      expect(evidence.summary.heightState).toBe("attention");
+      expect(evidence.findings.map((finding) => finding.code)).not.toContain("height_drift");
+    }
+  });
+
+  it("flags adjacent outline area changes over 28 percent", () => {
+    // Catches a character silhouette abruptly shrinking without a visible review warning.
+    const evidence = buildSequenceEvidence(
+      [ready(geometry({ opaquePixels: 100 })), ready(geometry({ opaquePixels: 70 }))],
+      "attack",
+    );
+
+    expect(evidence.summary).toMatchObject({
+      maxAreaDeltaPercent: 30,
+      areaState: "anomaly",
+    });
+    expect(evidence.frames[1]?.areaState).toBe("anomaly");
+  });
+
+  it("marks adjacency-only checks not applicable for one frame", () => {
+    // Catches the first frame displaying fabricated zero deltas as a successful comparison.
+    const evidence = buildSequenceEvidence([ready(geometry())], "idle");
+
+    expect(evidence.frames[0]).toMatchObject({
+      previousDelta: null,
+      movementState: "not_applicable",
+      areaState: "not_applicable",
+    });
+    expect(evidence.summary).toMatchObject({
+      footDrift: null,
+      heightDrift: null,
+      medianStep: null,
+      movementThreshold: null,
+      movementState: "not_applicable",
+      areaState: "not_applicable",
+    });
+  });
+
+  it("combines measured image drift with adjacent root-motion increments using an upward y axis", () => {
+    // Catches root motion being subtracted twice or image-space positive-down y being added as positive-up.
+    const evidence = buildSequenceEvidence(
+      [ready(geometry({ x: 0, y: 10 }), null), ready(geometry({ x: 3, y: 14 }), { dx: 10, dy: 6 })],
+      "walk",
+    );
+
+    expect(evidence.frames[0]).toMatchObject({
+      expectedRootDelta: null,
+      composedPreviewDelta: null,
+    });
+    expect(evidence.frames[1]?.expectedRootDelta).toMatchObject({ dx: 10, dy: 6 });
+    expect(evidence.frames[1]?.expectedRootDelta?.distance).toBeCloseTo(Math.sqrt(136));
+    expect(evidence.frames[1]?.composedPreviewDelta).toMatchObject({ dx: 13, dy: 2 });
+    expect(evidence.frames[1]?.composedPreviewDelta?.distance).toBeCloseTo(Math.sqrt(173));
+    expect(evidence.frames[1]?.movementState).toBe("normal");
+  });
+
+  it("treats each frame root motion as an increment instead of subtracting the previous frame", () => {
+    // Catches repeated per-frame dx values collapsing to zero and leaving a walking sprite in place.
+    const evidence = buildSequenceEvidence(
+      [
+        ready(geometry({ x: 0, y: 10 }), null),
+        ready(geometry({ x: 1, y: 11 }), { dx: 2, dy: 1 }),
+        ready(geometry({ x: 3, y: 12 }), { dx: 3, dy: 2 }),
+      ],
+      "walk",
+    );
+
+    expect(evidence.frames[2]?.expectedRootDelta).toMatchObject({ dx: 3, dy: 2 });
+    expect(evidence.frames[2]?.composedPreviewDelta).toMatchObject({ dx: 5, dy: 1 });
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/analysis/sequence-evidence.ts b/frontend/src/pages/playtest/workbench/analysis/sequence-evidence.ts
new file mode 100644
index 0000000..2bedca1
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/sequence-evidence.ts
@@ -0,0 +1,444 @@
+import type { Frame } from "@/entities/character";
+
+import type { PlaytestActionType } from "../model/types";
+import type { FrameGeometry } from "./frame-geometry";
+
+const EXPECTED_CANVAS_SIZE = 256;
+const MAX_COVERAGE_RATIO = 0.65;
+const MAX_FOOT_DRIFT = 3;
+const MAX_HEIGHT_DRIFT = 7;
+const MAX_AREA_DELTA_PERCENT = 28;
+const MIN_COVERAGE_RATIO = 0.005;
+const DUPLICATE_DISTANCE = 0.02;
+
+export type EvidenceState = "normal" | "attention" | "anomaly" | "not_applicable";
+
+export type QualityFindingCode =
+  | "image_unavailable"
+  | "blank_subject"
+  | "canvas_size_mismatch"
+  | "subject_cropped"
+  | "coverage_too_low"
+  | "coverage_too_high"
+  | "duplicate_frame"
+  | "motion_spike"
+  | "foot_drift"
+  | "height_drift"
+  | "area_spike"
+  | "root_motion_mismatch";
+
+export interface QualityFinding {
+  code: QualityFindingCode;
+  severity: "warning" | "error";
+  frameIndex: number | null;
+  message: string;
+  metrics: Readonly<Record<string, number | string>>;
+}
+
+export type FrameGeometryResult =
+  | { status: "ready"; geometry: FrameGeometry }
+  | { status: "unavailable"; reason: string };
+
+export interface FrameEvidenceInput {
+  geometry: FrameGeometryResult;
+  rootMotion: Frame["rootMotion"];
+}
+
+export interface AdjacentFrameDelta {
+  dx: number;
+  dy: number;
+  distance: number;
+  areaDeltaPercent: number;
+}
+
+export interface MotionVector {
+  dx: number;
+  dy: number;
+  distance: number;
+}
+
+export interface FrameReviewEvidence {
+  geometry: FrameGeometry | null;
+  unavailableReason: string | null;
+  previousDelta: AdjacentFrameDelta | null;
+  expectedRootDelta: MotionVector | null;
+  composedPreviewDelta: MotionVector | null;
+  coverageState: EvidenceState;
+  movementState: EvidenceState;
+  areaState: EvidenceState;
+}
+
+export interface SequenceReviewEvidence {
+  complete: boolean;
+  unavailableFrameCount: number;
+  frames: readonly FrameReviewEvidence[];
+  findings: readonly QualityFinding[];
+  summary: {
+    footDrift: number | null;
+    heightDrift: number | null;
+    medianStep: number | null;
+    maxStep: number | null;
+    movementThreshold: number | null;
+    heightThreshold: number | null;
+    maxAreaDeltaPercent: number | null;
+    canvasState: EvidenceState;
+    footState: EvidenceState;
+    heightState: EvidenceState;
+    movementState: EvidenceState;
+    areaState: EvidenceState;
+  };
+}
+
+function medianAbsoluteDeviation(values: readonly number[], center: number | null): number | null {
+  if (center === null || values.length === 0) return null;
+  return median(values.map((value) => Math.abs(value - center)));
+}
+
+function fingerprintDistance(
+  left: readonly number[] | undefined,
+  right: readonly number[] | undefined,
+): number | null {
+  if (
+    left === undefined ||
+    right === undefined ||
+    left.length === 0 ||
+    left.length !== right.length
+  )
+    return null;
+
+  const total = left.reduce(
+    (sum, value, index) => sum + Math.abs(value - (right[index] ?? value)),
+    0,
+  );
+  return total / left.length;
+}
+
+function isCropped(geometry: FrameGeometry): boolean {
+  return (
+    geometry.bounds.left <= 1 ||
+    geometry.bounds.top <= 1 ||
+    geometry.bounds.right >= geometry.width - 2 ||
+    geometry.bounds.bottom >= geometry.height - 2
+  );
+}
+
+function heightFindingThreshold(actionType: PlaytestActionType): number | null {
+  if (actionType === "jump" || actionType === "crouch") return null;
+  if (actionType === "idle") return 7;
+  if (actionType === "walk") return 12;
+  return 20;
+}
+
+function absoluteMovementThreshold(actionType: PlaytestActionType): number {
+  if (actionType === "idle") return 6;
+  if (actionType === "walk") return 24;
+  if (actionType === "crouch") return 16;
+  if (actionType === "jump") return 64;
+  return 48;
+}
+
+function median(values: readonly number[]): number | null {
+  if (values.length === 0) return null;
+
+  const sorted = [...values].sort((left, right) => left - right);
+  const middle = Math.floor(sorted.length / 2);
+  const upper = sorted[middle];
+  if (upper === undefined) return null;
+
+  if (sorted.length % 2 === 1) return upper;
+
+  const lower = sorted[middle - 1];
+  return lower === undefined ? upper : (lower + upper) / 2;
+}
+
+function spread(values: readonly number[]): number | null {
+  if (values.length < 2) return null;
+  return Math.max(...values) - Math.min(...values);
+}
+
+function adjacentDelta(previous: FrameGeometry, current: FrameGeometry): AdjacentFrameDelta {
+  const dx = current.centroid.x - previous.centroid.x;
+  const dy = current.centroid.y - previous.centroid.y;
+
+  return {
+    dx,
+    dy,
+    distance: Math.hypot(dx, dy),
+    areaDeltaPercent:
+      (Math.abs(current.opaquePixels - previous.opaquePixels) /
+        Math.max(current.opaquePixels, previous.opaquePixels)) *
+      100,
+  };
+}
+
+function motionVector(dx: number, dy: number): MotionVector {
+  return { dx, dy, distance: Math.hypot(dx, dy) };
+}
+
+function rootMotion(frame: FrameEvidenceInput): { dx: number; dy: number } {
+  return frame.rootMotion ?? { dx: 0, dy: 0 };
+}
+
+export function buildSequenceEvidence(
+  inputs: readonly FrameEvidenceInput[],
+  actionType: PlaytestActionType,
+): SequenceReviewEvidence {
+  const results = inputs.map((input) => input.geometry);
+  const readyGeometries = results.flatMap((result) =>
+    result.status === "ready" ? [result.geometry] : [],
+  );
+  const deltas = results.map((result, index): AdjacentFrameDelta | null => {
+    const previous = results[index - 1];
+    if (index === 0 || previous?.status !== "ready" || result.status !== "ready") return null;
+    return adjacentDelta(previous.geometry, result.geometry);
+  });
+  const rootDeltas = inputs.map((input, index): MotionVector | null => {
+    if (index === 0) return null;
+
+    const increment = rootMotion(input);
+    return motionVector(increment.dx, increment.dy);
+  });
+  const availableDeltas = deltas.flatMap((delta) => (delta === null ? [] : [delta]));
+  const steps = availableDeltas.map((delta) => delta.distance);
+  const areaDeltas = availableDeltas.map((delta) => delta.areaDeltaPercent);
+  const medianStep = median(steps);
+  const movementMad = medianAbsoluteDeviation(steps, medianStep);
+  const relativeMovementThreshold =
+    medianStep === null
+      ? null
+      : Math.max(medianStep * 2.6 + 2, medianStep + (movementMad ?? 0) * 3 + 2, 6);
+  const movementThreshold =
+    relativeMovementThreshold === null
+      ? null
+      : Math.min(relativeMovementThreshold, absoluteMovementThreshold(actionType));
+  const maxStep = steps.length === 0 ? null : Math.max(...steps);
+  const maxAreaDeltaPercent = areaDeltas.length === 0 ? null : Math.max(...areaDeltas);
+  const footDrift = spread(readyGeometries.map((geometry) => geometry.footY));
+  const heightDrift = spread(readyGeometries.map((geometry) => geometry.subjectHeight));
+  const unavailableFrameCount = results.length - readyGeometries.length;
+  const findings: QualityFinding[] = [];
+  const heightThreshold = heightFindingThreshold(actionType);
+
+  const frames = results.map((result, index): FrameReviewEvidence => {
+    const expectedRootDelta = rootDeltas[index] ?? null;
+    if (result.status === "unavailable") {
+      return {
+        geometry: null,
+        unavailableReason: result.reason,
+        previousDelta: null,
+        expectedRootDelta,
+        composedPreviewDelta: null,
+        coverageState: "not_applicable",
+        movementState: "not_applicable",
+        areaState: "not_applicable",
+      };
+    }
+
+    const delta = deltas[index] ?? null;
+    const composedPreviewDelta =
+      delta === null || expectedRootDelta === null
+        ? null
+        : motionVector(delta.dx + expectedRootDelta.dx, expectedRootDelta.dy - delta.dy);
+    return {
+      geometry: result.geometry,
+      unavailableReason: null,
+      previousDelta: delta,
+      expectedRootDelta,
+      composedPreviewDelta,
+      coverageState: result.geometry.coverageRatio > MAX_COVERAGE_RATIO ? "anomaly" : "normal",
+      movementState:
+        delta === null || movementThreshold === null
+          ? "not_applicable"
+          : delta.distance > movementThreshold
+            ? "anomaly"
+            : "normal",
+      areaState:
+        delta === null
+          ? "not_applicable"
+          : delta.areaDeltaPercent > MAX_AREA_DELTA_PERCENT
+            ? "anomaly"
+            : "normal",
+    };
+  });
+
+  results.forEach((result, index) => {
+    if (result.status === "unavailable") {
+      const blank = result.reason.includes("没有可见主体");
+      findings.push({
+        code: blank ? "blank_subject" : "image_unavailable",
+        severity: "error",
+        frameIndex: index,
+        message: blank ? "当前帧没有可见主体" : result.reason,
+        metrics: {},
+      });
+      return;
+    }
+
+    const { geometry } = result;
+    if (geometry.width !== EXPECTED_CANVAS_SIZE || geometry.height !== EXPECTED_CANVAS_SIZE) {
+      findings.push({
+        code: "canvas_size_mismatch",
+        severity: "error",
+        frameIndex: index,
+        message: "画布尺寸与预期规格不一致",
+        metrics: { width: geometry.width, height: geometry.height },
+      });
+    }
+    if (isCropped(geometry)) {
+      findings.push({
+        code: "subject_cropped",
+        severity: "error",
+        frameIndex: index,
+        message: "主体接触画布边缘，可能发生裁切",
+        metrics: {
+          left: geometry.bounds.left,
+          top: geometry.bounds.top,
+          right: geometry.bounds.right,
+          bottom: geometry.bounds.bottom,
+        },
+      });
+    }
+    if (geometry.coverageRatio < MIN_COVERAGE_RATIO) {
+      findings.push({
+        code: "coverage_too_low",
+        severity: "warning",
+        frameIndex: index,
+        message: "主体在画布中的占比过小",
+        metrics: { coverageRatio: geometry.coverageRatio },
+      });
+    } else if (geometry.coverageRatio > MAX_COVERAGE_RATIO) {
+      findings.push({
+        code: "coverage_too_high",
+        severity: "error",
+        frameIndex: index,
+        message: "主体在画布中的占比过大",
+        metrics: { coverageRatio: geometry.coverageRatio },
+      });
+    }
+
+    const previous = results[index - 1];
+    if (previous?.status !== "ready") return;
+    const duplicateDistance = fingerprintDistance(
+      previous.geometry.fingerprint,
+      geometry.fingerprint,
+    );
+    if (duplicateDistance !== null && duplicateDistance <= DUPLICATE_DISTANCE) {
+      findings.push({
+        code: "duplicate_frame",
+        severity: "warning",
+        frameIndex: index,
+        message: "当前帧与上一帧高度相似",
+        metrics: { distance: duplicateDistance },
+      });
+    }
+
+    const delta = deltas[index];
+    if (delta !== null && movementThreshold !== null && delta.distance > movementThreshold) {
+      findings.push({
+        code: "motion_spike",
+        severity: "error",
+        frameIndex: index,
+        message: "相邻帧出现异常位移突变",
+        metrics: { distance: delta.distance, threshold: movementThreshold },
+      });
+    }
+    if (delta !== null && delta.areaDeltaPercent > MAX_AREA_DELTA_PERCENT) {
+      findings.push({
+        code: "area_spike",
+        severity: "warning",
+        frameIndex: index,
+        message: "相邻帧主体轮廓面积变化过大",
+        metrics: { percent: delta.areaDeltaPercent },
+      });
+    }
+
+    const expected = rootDeltas[index];
+    if (delta !== null && expected !== null && expected.distance >= 2 && delta.distance >= 2) {
+      const dot = delta.dx * expected.dx + -delta.dy * expected.dy;
+      if (dot < 0) {
+        findings.push({
+          code: "root_motion_mismatch",
+          severity: "warning",
+          frameIndex: index,
+          message: "画面内位移方向与预期根位移矛盾",
+          metrics: { dotProduct: dot },
+        });
+      }
+    }
+  });
+
+  if (footDrift !== null && footDrift > MAX_FOOT_DRIFT && actionType !== "jump") {
+    findings.push({
+      code: "foot_drift",
+      severity: "error",
+      frameIndex: null,
+      message: "序列脚底线漂移超过动作允许范围",
+      metrics: { drift: footDrift, threshold: MAX_FOOT_DRIFT },
+    });
+  }
+  if (heightDrift !== null && heightThreshold !== null && heightDrift > heightThreshold) {
+    findings.push({
+      code: "height_drift",
+      severity: "warning",
+      frameIndex: null,
+      message: "序列主体高度变化超过动作允许范围",
+      metrics: { drift: heightDrift, threshold: heightThreshold },
+    });
+  }
+
+  return {
+    complete: results.length > 0 && unavailableFrameCount === 0,
+    unavailableFrameCount,
+    frames,
+    findings,
+    summary: {
+      footDrift,
+      heightDrift,
+      medianStep,
+      maxStep,
+      movementThreshold,
+      heightThreshold,
+      maxAreaDeltaPercent,
+      canvasState:
+        readyGeometries.length === 0
+          ? "not_applicable"
+          : readyGeometries.every(
+                (geometry) =>
+                  geometry.width === EXPECTED_CANVAS_SIZE &&
+                  geometry.height === EXPECTED_CANVAS_SIZE,
+              )
+            ? "normal"
+            : "anomaly",
+      footState:
+        footDrift === null
+          ? "not_applicable"
+          : footDrift <= MAX_FOOT_DRIFT
+            ? "normal"
+            : actionType === "jump"
+              ? "attention"
+              : "anomaly",
+      heightState:
+        heightDrift === null
+          ? "not_applicable"
+          : heightThreshold === null
+            ? heightDrift > MAX_HEIGHT_DRIFT
+              ? "attention"
+              : "normal"
+            : heightDrift > heightThreshold
+              ? "anomaly"
+              : "normal",
+      movementState:
+        maxStep === null || movementThreshold === null
+          ? "not_applicable"
+          : maxStep > movementThreshold
+            ? "anomaly"
+            : "normal",
+      areaState:
+        maxAreaDeltaPercent === null
+          ? "not_applicable"
+          : maxAreaDeltaPercent > MAX_AREA_DELTA_PERCENT
+            ? "anomaly"
+            : "normal",
+    },
+  };
+}
diff --git a/frontend/src/pages/playtest/workbench/analysis/use-frame-review-evidence.test.tsx b/frontend/src/pages/playtest/workbench/analysis/use-frame-review-evidence.test.tsx
new file mode 100644
index 0000000..ba75864
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/use-frame-review-evidence.test.tsx
@@ -0,0 +1,205 @@
+/** @vitest-environment jsdom */
+import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { PreviewSequence } from "../model/types";
+import type { FrameGeometry } from "./frame-geometry";
+import type { FrameGeometryResult } from "./sequence-evidence";
+import { useFrameReviewEvidence, type ImageGeometryReader } from "./use-frame-review-evidence";
+
+function sequence(...imageUrls: string[]): PreviewSequence {
+  return {
+    direction: "south",
+    frames: imageUrls.map((imageUrl) => ({
+      imageUrl,
+      durationMs: 100,
+      rootMotion: null,
+      qc: "pending",
+      rejected: false,
+      keyFrame: false,
+    })),
+  };
+}
+
+function geometry(x: number, y = 10): FrameGeometryResult {
+  const value: FrameGeometry = {
+    width: 256,
+    height: 256,
+    bounds: { left: x, top: 0, right: x + 9, bottom: 19, width: 10, height: 20 },
+    centroid: { x, y },
+    footY: 19,
+    subjectHeight: 20,
+    opaquePixels: 100,
+    coverageRatio: 100 / (256 * 256),
+  };
+  return { status: "ready", geometry: value };
+}
+
+function deferred<T>(): {
+  promise: Promise<T>;
+  resolve(value: T): void;
+} {
+  let resolvePromise: ((value: T) => void) | null = null;
+  const promise = new Promise<T>((resolve) => {
+    resolvePromise = resolve;
+  });
+
+  return {
+    promise,
+    resolve(value) {
+      if (resolvePromise === null) throw new Error("deferred promise is not initialized");
+      resolvePromise(value);
+    },
+  };
+}
+
+afterEach(cleanup);
+
+describe("useFrameReviewEvidence", () => {
+  it("exposes loading before producing real sequence evidence", async () => {
+    // Catches the Inspector flashing fabricated zeros before image analysis completes.
+    const pending = deferred<FrameGeometryResult>();
+    const reader: ImageGeometryReader = () => pending.promise;
+    const { result } = renderHook(() =>
+      useFrameReviewEvidence(sequence("/frame-1.png"), "walk", reader),
+    );
+
+    expect(result.current).toEqual({ status: "loading", evidence: null });
+
+    await act(async () => pending.resolve(geometry(4)));
+
+    await waitFor(() => expect(result.current.status).toBe("ready"));
+    expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(4);
+  });
+
+  it("ignores a previous sequence result that resolves after a direction switch", async () => {
+    // Catches a slow old direction replacing the evidence for the currently selected direction.
+    const south = deferred<FrameGeometryResult>();
+    const north = deferred<FrameGeometryResult>();
+    const reader: ImageGeometryReader = (imageUrl) =>
+      imageUrl.includes("south") ? south.promise : north.promise;
+    const { result, rerender } = renderHook(
+      ({ current }) => useFrameReviewEvidence(current, "walk", reader),
+      { initialProps: { current: sequence("/south.png") } },
+    );
+
+    rerender({ current: sequence("/north.png") });
+    await act(async () => north.resolve(geometry(20)));
+    await waitFor(() => expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(20));
+
+    await act(async () => south.resolve(geometry(2)));
+    expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(20);
+  });
+
+  it("passes an abort signal to image reads and aborts stale sequence work", () => {
+    const pending = deferred<FrameGeometryResult>();
+    const reader = vi.fn<ImageGeometryReader>(() => pending.promise);
+    const { rerender } = renderHook(
+      ({ current }) => useFrameReviewEvidence(current, "walk", reader),
+      { initialProps: { current: sequence("/south.png") } },
+    );
+
+    const firstSignal = reader.mock.calls[0]?.[1];
+    expect(firstSignal).toBeInstanceOf(AbortSignal);
+    expect(firstSignal?.aborted).toBe(false);
+
+    rerender({ current: sequence("/north.png") });
+
+    expect(firstSignal?.aborted).toBe(true);
+    expect(reader.mock.calls[1]?.[1]).toBeInstanceOf(AbortSignal);
+  });
+
+  it("reuses settled image results when frames are selected or revisited", async () => {
+    // Catches frame navigation repeatedly decoding every image in the same review session.
+    const reader = vi.fn<ImageGeometryReader>(async (imageUrl) =>
+      geometry(imageUrl.includes("one") ? 1 : 2),
+    );
+    const first = sequence("/one.png");
+    const second = sequence("/two.png");
+    const { result, rerender } = renderHook(
+      ({ current }) => useFrameReviewEvidence(current, "walk", reader),
+      { initialProps: { current: first } },
+    );
+
+    await waitFor(() => expect(result.current.status).toBe("ready"));
+    rerender({ current: first });
+    expect(reader).toHaveBeenCalledTimes(1);
+
+    rerender({ current: second });
+    await waitFor(() => expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(2));
+    rerender({ current: first });
+    await waitFor(() => expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(1));
+    expect(reader).toHaveBeenCalledTimes(2);
+  });
+
+  it("retries an unavailable image when its sequence is revisited", async () => {
+    // A transient image failure must not become a permanent session-level cache entry.
+    let failedOnce = false;
+    const reader = vi.fn<ImageGeometryReader>(async (imageUrl) => {
+      if (imageUrl.includes("retry") && !failedOnce) {
+        failedOnce = true;
+        return { status: "unavailable", reason: "temporary failure" };
+      }
+      return geometry(imageUrl.includes("retry") ? 9 : 2);
+    });
+    const retrySequence = sequence("/retry.png");
+    const otherSequence = sequence("/other.png");
+    const { result, rerender } = renderHook(
+      ({ current }) => useFrameReviewEvidence(current, "walk", reader),
+      { initialProps: { current: retrySequence } },
+    );
+
+    await waitFor(() => expect(result.current.status).toBe("ready"));
+    expect(result.current.evidence?.complete).toBe(false);
+
+    rerender({ current: otherSequence });
+    await waitFor(() => expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(2));
+    rerender({ current: retrySequence });
+    await waitFor(() => expect(result.current.evidence?.frames[0]?.geometry?.centroid.x).toBe(9));
+
+    expect(reader).toHaveBeenCalledTimes(3);
+  });
+
+  it("stays idle without a review sequence and does not read an image", () => {
+    // Catches direct-control mode starting hidden Canvas work.
+    const reader = vi.fn<ImageGeometryReader>();
+    const { result } = renderHook(() => useFrameReviewEvidence(null, null, reader));
+
+    expect(result.current).toEqual({ status: "idle", evidence: null });
+    expect(reader).not.toHaveBeenCalled();
+  });
+
+  it("does not update React state after the consumer unmounts", async () => {
+    // Catches an image completion writing into a removed Playtest workbench.
+    const pending = deferred<FrameGeometryResult>();
+    const reader: ImageGeometryReader = () => pending.promise;
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    const mounted = renderHook(() => useFrameReviewEvidence(sequence("/slow.png"), "walk", reader));
+
+    mounted.unmount();
+    await act(async () => pending.resolve(geometry(1)));
+
+    expect(consoleError).not.toHaveBeenCalled();
+  });
+
+  it("keeps each preview frame root motion beside its measured geometry", async () => {
+    // Catches asynchronous image results losing their matching motion contract before aggregation.
+    const base = sequence("/first.png", "/second.png");
+    const motionSequence: PreviewSequence = {
+      ...base,
+      frames: [
+        { ...base.frames[0]!, rootMotion: null },
+        { ...base.frames[1]!, rootMotion: { dx: 10, dy: 6 } },
+      ],
+    };
+    const reader: ImageGeometryReader = async (imageUrl) =>
+      imageUrl.includes("first") ? geometry(0, 10) : geometry(3, 14);
+    const { result } = renderHook(() => useFrameReviewEvidence(motionSequence, "walk", reader));
+
+    await waitFor(() => expect(result.current.status).toBe("ready"));
+    expect(result.current.evidence?.frames[1]).toMatchObject({
+      expectedRootDelta: { dx: 10, dy: 6 },
+      composedPreviewDelta: { dx: 13, dy: 2 },
+    });
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/analysis/use-frame-review-evidence.ts b/frontend/src/pages/playtest/workbench/analysis/use-frame-review-evidence.ts
new file mode 100644
index 0000000..07bded4
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/analysis/use-frame-review-evidence.ts
@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { PlaytestActionType, PreviewSequence } from "../model/types";
+import { readImageGeometry } from "./image-geometry";
+import {
+  buildSequenceEvidence,
+  type FrameGeometryResult,
+  type SequenceReviewEvidence,
+} from "./sequence-evidence";
+
+export type FrameReviewEvidenceState =
+  | { status: "idle"; evidence: null }
+  | { status: "loading"; evidence: null }
+  | { status: "ready"; evidence: SequenceReviewEvidence };
+
+export type ImageGeometryReader = (
+  imageUrl: string,
+  signal?: AbortSignal,
+) => Promise<FrameGeometryResult>;
+
+interface CachedReads {
+  reader: ImageGeometryReader;
+  entries: Map<string, FrameGeometryResult>;
+}
+
+interface ResolvedState {
+  key: string | null;
+  value: FrameReviewEvidenceState;
+}
+
+const IDLE_STATE: FrameReviewEvidenceState = { status: "idle", evidence: null };
+const LOADING_STATE: FrameReviewEvidenceState = { status: "loading", evidence: null };
+
+export function useFrameReviewEvidence(
+  sequence: PreviewSequence | null,
+  actionType: PlaytestActionType | null,
+  reader: ImageGeometryReader = readImageGeometry,
+): FrameReviewEvidenceState {
+  const frameDescriptors =
+    sequence?.frames.map((frame) => ({ imageUrl: frame.imageUrl, rootMotion: frame.rootMotion })) ??
+    [];
+  const imageUrls = frameDescriptors.map((frame) => frame.imageUrl);
+  const sequenceKey =
+    sequence === null || actionType === null
+      ? null
+      : JSON.stringify([actionType, ...frameDescriptors]);
+  const cache = useRef<CachedReads | null>(null);
+  const [resolved, setResolved] = useState<ResolvedState>({ key: null, value: IDLE_STATE });
+
+  if (cache.current === null || cache.current.reader !== reader) {
+    cache.current = { reader, entries: new Map() };
+  }
+
+  useEffect(() => {
+    if (sequenceKey === null || actionType === null) {
+      setResolved({ key: null, value: IDLE_STATE });
+      return;
+    }
+
+    const controller = new AbortController();
+    let active = true;
+    const reads = cache.current?.entries;
+    const inFlight = new Map<string, Promise<FrameGeometryResult>>();
+
+    setResolved({ key: sequenceKey, value: LOADING_STATE });
+
+    const results = imageUrls.map((imageUrl) => {
+      const cached = reads?.get(imageUrl);
+      if (cached !== undefined) return Promise.resolve(cached);
+
+      const existing = inFlight.get(imageUrl);
+      if (existing !== undefined) return existing;
+
+      const pending = reader(imageUrl, controller.signal)
+        .catch((): FrameGeometryResult => ({ status: "unavailable", reason: "图片分析失败" }))
+        .then((result) => {
+          if (!controller.signal.aborted && result.status === "ready") reads?.set(imageUrl, result);
+          return result;
+        });
+      inFlight.set(imageUrl, pending);
+      return pending;
+    });
+
+    void Promise.all(results).then((frameResults) => {
+      if (!active || controller.signal.aborted) return;
+
+      setResolved({
+        key: sequenceKey,
+        value: {
+          status: "ready",
+          evidence: buildSequenceEvidence(
+            frameResults.map((geometry, index) => ({
+              geometry,
+              rootMotion: frameDescriptors[index]?.rootMotion ?? null,
+            })),
+            actionType,
+          ),
+        },
+      });
+    });
+
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [actionType, reader, sequenceKey]);
+
+  if (sequenceKey === null) return IDLE_STATE;
+  return resolved.key === sequenceKey ? resolved.value : LOADING_STATE;
+}
diff --git a/frontend/src/pages/playtest/workbench/animation-stage.test.tsx b/frontend/src/pages/playtest/workbench/animation-stage.test.tsx
new file mode 100644
index 0000000..d0aa07c
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/animation-stage.test.tsx
@@ -0,0 +1,177 @@
+/** @vitest-environment jsdom */
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ActionSelector } from "./action-selector";
+import { AnimationStage } from "./animation-stage";
+import { FrameTimeline } from "./frame-timeline";
+import { PlaybackControls } from "./playback-controls";
+import type { PreviewAction, PreviewFrame, PreviewSequence } from "./model/types";
+
+const currentFrame: PreviewFrame = {
+  imageUrl: "https://cdn.example.test/current.png",
+  durationMs: 100,
+  rootMotion: { dx: 12, dy: 5 },
+  qc: "passed",
+  rejected: false,
+  keyFrame: true,
+};
+
+const nextFrame: PreviewFrame = {
+  ...currentFrame,
+  imageUrl: "https://cdn.example.test/next.png",
+  qc: "failed",
+  rejected: true,
+  keyFrame: false,
+};
+
+const sequence: PreviewSequence = {
+  direction: "south",
+  frames: [currentFrame, nextFrame],
+};
+
+const actions: readonly PreviewAction[] = [
+  {
+    id: "walk",
+    name: "行走",
+    type: "walk",
+    status: "confirmed",
+    fps: 12,
+    sequences: [sequence],
+  },
+  {
+    id: "empty",
+    name: "空动作",
+    type: "idle",
+    status: "candidate",
+    fps: 12,
+    sequences: [],
+  },
+];
+
+afterEach(cleanup);
+
+describe("playtest visual primitives", () => {
+  it("renders prop-supplied action names, statuses and actual frame counts while disabling empty actions", () => {
+    // Catches a selector replacing supplied actions with demo data or permitting a non-playable action.
+    const onSelectAction = vi.fn();
+
+    render(
+      <ActionSelector actions={actions} selectedActionId="walk" onSelectAction={onSelectAction} />,
+    );
+
+    expect(screen.getByRole("button", { name: /行走/ }).textContent).toContain("confirmed");
+    expect(screen.getByRole("button", { name: /行走/ }).textContent).toContain("2 帧");
+    expect((screen.getByRole("button", { name: /空动作/ }) as HTMLButtonElement).disabled).toBe(
+      true,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /行走/ }));
+    expect(onSelectAction).toHaveBeenCalledWith("walk");
+  });
+
+  it("uses the real frame URL and reports image failure with the accumulated mirrored transform", () => {
+    // Catches the stage reading per-frame root motion instead of the accumulated owner state, inverting y incorrectly, or hiding load errors.
+    render(
+      <AnimationStage
+        currentFrame={currentFrame}
+        motionOffset={{ x: 18, y: 7 }}
+        mirrored
+        showGrid
+        showChecker
+      />,
+    );
+
+    const image = screen.getByRole("img", { name: "角色动画预览" });
+    expect(image.getAttribute("src")).toBe(currentFrame.imageUrl);
+    expect(image.getAttribute("style")).toContain("translate(18px, -7px) scaleX(-1)");
+    expect(screen.getAllByRole("img")).toHaveLength(1);
+
+    fireEvent.error(image);
+    expect(screen.getByText("当前帧图片加载失败")).toBeTruthy();
+  });
+
+  it("reports horizontal travel from the measured stage and actor widths", () => {
+    const onHorizontalBoundsChange = vi.fn();
+    const rect = vi
+      .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+      .mockImplementation(function (this: HTMLElement) {
+        const width = this.getAttribute("aria-label") === "动画预览舞台" ? 600 : 200;
+        return {
+          width,
+          height: 400,
+          x: 0,
+          y: 0,
+          top: 0,
+          right: width,
+          bottom: 400,
+          left: 0,
+          toJSON: () => ({}),
+        };
+      });
+
+    render(
+      <AnimationStage
+        currentFrame={currentFrame}
+        motionOffset={{ x: 0, y: 0 }}
+        mirrored={false}
+        showGrid={false}
+        showChecker={false}
+        onHorizontalBoundsChange={onHorizontalBoundsChange}
+      />,
+    );
+
+    fireEvent.load(screen.getByRole("img", { name: "角色动画预览" }));
+    expect(onHorizontalBoundsChange).toHaveBeenLastCalledWith({ minX: -200, maxX: 200 });
+    rect.mockRestore();
+  });
+
+  it("surfaces frame markers and delegates timeline selection without its own playback behavior", () => {
+    // Catches a timeline dropping QC/rejection annotations or mutating playback rather than using its selection callback.
+    const onSelectFrame = vi.fn();
+
+    render(
+      <FrameTimeline sequence={sequence} currentFrameIndex={0} onSelectFrame={onSelectFrame} />,
+    );
+
+    expect(screen.getByText("关键帧")).toBeTruthy();
+    expect(screen.getByText("QC: failed")).toBeTruthy();
+    expect(screen.getByText("已驳回")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "第 2 帧" }));
+    expect(onSelectFrame).toHaveBeenCalledWith(1);
+  });
+
+  it("only relays playback controller callbacks", () => {
+    // Catches controls owning local play state instead of reporting user intent to the controller.
+    const onTogglePlaying = vi.fn();
+    const onNextFrame = vi.fn();
+
+    render(
+      <PlaybackControls
+        playing={false}
+        loop
+        frameIndex={0}
+        frameCount={2}
+        fps={12}
+        jumpAvailable={false}
+        crouchAvailable
+        onFirstFrame={vi.fn()}
+        onPreviousFrame={vi.fn()}
+        onTogglePlaying={onTogglePlaying}
+        onNextFrame={onNextFrame}
+        onLastFrame={vi.fn()}
+        onToggleLoop={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "播放" }));
+    fireEvent.click(screen.getByRole("button", { name: "下一帧" }));
+    expect(onTogglePlaying).toHaveBeenCalledTimes(1);
+    expect(onNextFrame).toHaveBeenCalledTimes(1);
+    expect(screen.getByText("A 左行走")).toBeTruthy();
+    expect(screen.getByText("D 右行走")).toBeTruthy();
+    expect(screen.getByText("未提供跳跃动作")).toBeTruthy();
+    expect(screen.getByText("下蹲动作可用")).toBeTruthy();
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/animation-stage.tsx b/frontend/src/pages/playtest/workbench/animation-stage.tsx
new file mode 100644
index 0000000..e4203f8
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/animation-stage.tsx
@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import type { PreviewFrame } from "./model/types";
+import type { HorizontalStageBounds, StageOffset } from "./stage-motion";
+
+export interface AnimationStageProps {
+  currentFrame: PreviewFrame | null;
+  /** Accumulated playback position in world coordinates (positive y is up). */
+  motionOffset: StageOffset;
+  mirrored: boolean;
+  showGrid: boolean;
+  showChecker: boolean;
+  onHorizontalBoundsChange?(bounds: HorizontalStageBounds | null): void;
+}
+
+export function AnimationStage({
+  currentFrame,
+  motionOffset,
+  mirrored,
+  showGrid,
+  showChecker,
+  onHorizontalBoundsChange,
+}: AnimationStageProps) {
+  const [failedImageUrl, setFailedImageUrl] = useState<string | null>(null);
+  const stageRef = useRef<HTMLElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const reportHorizontalBounds = useCallback(() => {
+    if (onHorizontalBoundsChange === undefined) return;
+    const stage = stageRef.current;
+    const image = imageRef.current;
+    if (stage === null || image === null) {
+      onHorizontalBoundsChange(null);
+      return;
+    }
+
+    const stageWidth = stage.getBoundingClientRect().width;
+    const actorWidth = image.getBoundingClientRect().width;
+    if (stageWidth <= 0 || actorWidth <= 0) {
+      onHorizontalBoundsChange(null);
+      return;
+    }
+    const travel = Math.max(0, (stageWidth - actorWidth) / 2);
+    onHorizontalBoundsChange({ minX: -travel, maxX: travel });
+  }, [onHorizontalBoundsChange]);
+
+  useEffect(() => {
+    setFailedImageUrl(null);
+  }, [currentFrame?.imageUrl]);
+
+  useEffect(() => {
+    reportHorizontalBounds();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", reportHorizontalBounds);
+      return () => window.removeEventListener("resize", reportHorizontalBounds);
+    }
+
+    const observer = new ResizeObserver(reportHorizontalBounds);
+    if (stageRef.current !== null) observer.observe(stageRef.current);
+    if (imageRef.current !== null) observer.observe(imageRef.current);
+    return () => observer.disconnect();
+  }, [currentFrame?.imageUrl, reportHorizontalBounds]);
+
+  const imageFailed = currentFrame !== null && failedImageUrl === currentFrame.imageUrl;
+
+  return (
+    <section
+      ref={stageRef}
+      aria-label="动画预览舞台"
+      className={`relative grid h-full min-h-[320px] place-items-center overflow-hidden rounded-2xl border border-slate-300 ${
+        showChecker
+          ? "bg-[linear-gradient(45deg,#e5e7eb_25%,transparent_25%),linear-gradient(-45deg,#e5e7eb_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#e5e7eb_75%),linear-gradient(-45deg,transparent_75%,#e5e7eb_75%)] bg-[length:24px_24px] bg-[position:0_0,0_12px,12px_-12px,-12px_0px]"
+          : "bg-slate-100"
+      }`}
+    >
+      {showGrid ? (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(15,23,42,0.055)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.055)_1px,transparent_1px)] bg-[length:24px_24px]"
+        />
+      ) : null}
+      <span
+        aria-hidden="true"
+        className="absolute bottom-[18%] left-[8%] right-[8%] h-px bg-emerald-900/30"
+      />
+      {currentFrame === null ? (
+        <div className="relative z-10 rounded-xl border border-dashed border-slate-400 bg-white/70 p-6 text-center text-sm text-slate-500">
+          当前动作没有可播放的帧
+        </div>
+      ) : imageFailed ? (
+        <div
+          role="alert"
+          className="relative z-10 rounded-xl border border-rose-200 bg-white/90 p-6 text-sm text-rose-700"
+        >
+          当前帧图片加载失败
+        </div>
+      ) : (
+        <img
+          ref={imageRef}
+          src={currentFrame.imageUrl}
+          alt="角色动画预览"
+          onLoad={reportHorizontalBounds}
+          onError={() => setFailedImageUrl(currentFrame.imageUrl)}
+          style={{
+            transform: `translate(${motionOffset.x}px, ${-motionOffset.y}px) scaleX(${mirrored ? -1 : 1})`,
+          }}
+          className="relative z-10 max-h-[68%] max-w-[68%] object-contain drop-shadow-[0_18px_12px_rgba(15,23,42,0.12)] [image-rendering:pixelated]"
+        />
+      )}
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/audit/audit-panel.test.tsx b/frontend/src/pages/playtest/workbench/audit/audit-panel.test.tsx
new file mode 100644
index 0000000..9180f2c
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/audit/audit-panel.test.tsx
@@ -0,0 +1,108 @@
+/** @vitest-environment jsdom */
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { PreviewFrame } from "../model/types";
+import { AuditPanel } from "./audit-panel";
+
+const frame: PreviewFrame = {
+  imageUrl: "/walk-03.png",
+  durationMs: 100,
+  rootMotion: { dx: 4, dy: 0 },
+  qc: "pending",
+  rejected: false,
+  keyFrame: false,
+};
+
+afterEach(cleanup);
+
+describe("AuditPanel", () => {
+  it("marks the current frame and keeps automatic findings read-only", () => {
+    const onAdd = vi.fn();
+    render(
+      <AuditPanel
+        actionId="walk"
+        actionName="行走"
+        direction="south"
+        frameIndex={2}
+        frame={frame}
+        automaticFindings={[
+          {
+            code: "subject_cropped",
+            severity: "error",
+            frameIndex: 2,
+            message: "主体接触画布边缘，可能发生裁切",
+            metrics: {},
+          },
+        ]}
+        issues={[]}
+        onAdd={onAdd}
+        onUpdate={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("自动")).toBeTruthy();
+    expect(screen.getByText("主体接触画布边缘，可能发生裁切")).toBeTruthy();
+    fireEvent.change(screen.getByLabelText("问题类型"), {
+      target: { value: "style_inconsistent" },
+    });
+    fireEvent.change(screen.getByLabelText("问题说明"), {
+      target: { value: "衣服颜色跳变" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "标记当前帧问题" }));
+
+    expect(onAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        category: "style_inconsistent",
+        actionId: "walk",
+        direction: "south",
+        frameIndex: 2,
+        imageUrl: "/walk-03.png",
+        note: "衣服颜色跳变",
+      }),
+    );
+  });
+
+  it("edits and removes an existing manual issue", () => {
+    const onUpdate = vi.fn();
+    const onRemove = vi.fn();
+    render(
+      <AuditPanel
+        actionId="walk"
+        actionName="行走"
+        direction="south"
+        frameIndex={2}
+        frame={frame}
+        automaticFindings={[]}
+        issues={[
+          {
+            id: "manual-1",
+            category: "motion_discontinuity",
+            actionId: "walk",
+            direction: "south",
+            frameIndex: 2,
+            imageUrl: "/walk-03.png",
+            note: "步幅突然变化",
+          },
+        ]}
+        onAdd={vi.fn()}
+        onUpdate={onUpdate}
+        onRemove={onRemove}
+      />,
+    );
+
+    expect(screen.getByText("人工")).toBeTruthy();
+    fireEvent.change(screen.getByLabelText("人工问题类型"), {
+      target: { value: "motion_direction" },
+    });
+    fireEvent.change(screen.getByLabelText("人工问题说明"), {
+      target: { value: "移动方向错误" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "删除人工问题" }));
+
+    expect(onUpdate).toHaveBeenCalledWith("manual-1", "motion_direction", "步幅突然变化");
+    expect(onUpdate).toHaveBeenCalledWith("manual-1", "motion_discontinuity", "移动方向错误");
+    expect(onRemove).toHaveBeenCalledWith("manual-1");
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/audit/audit-panel.tsx b/frontend/src/pages/playtest/workbench/audit/audit-panel.tsx
new file mode 100644
index 0000000..6c93617
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/audit/audit-panel.tsx
@@ -0,0 +1,189 @@
+import { useState } from "react";
+
+import type { QualityFinding } from "../analysis/sequence-evidence";
+import type { PlaytestDirection, PreviewFrame } from "../model/types";
+import type { ManualAuditIssue, ManualIssueCategory } from "./audit-session";
+
+const CATEGORY_LABELS: Readonly<Record<ManualIssueCategory, string>> = {
+  subject_cropped: "主体裁切",
+  transparency: "透明背景异常",
+  image_unavailable: "空白或加载失败",
+  duplicate_frame: "重复帧",
+  motion_discontinuity: "动作抖动或不连续",
+  motion_direction: "位移或方向错误",
+  style_inconsistent: "风格不一致",
+  other: "其他",
+};
+
+let fallbackId = 0;
+
+function createIssueId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  fallbackId += 1;
+  return `manual-${Date.now()}-${fallbackId}`;
+}
+
+export interface AuditPanelProps {
+  actionId: string | null;
+  actionName: string | null;
+  direction: PlaytestDirection | null;
+  frameIndex: number;
+  frame: PreviewFrame | null;
+  automaticFindings: readonly QualityFinding[];
+  issues: readonly ManualAuditIssue[];
+  onAdd(issue: ManualAuditIssue): void;
+  onUpdate(id: string, category: ManualIssueCategory, note: string): void;
+  onRemove(id: string): void;
+}
+
+export function AuditPanel({
+  actionId,
+  actionName,
+  direction,
+  frameIndex,
+  frame,
+  automaticFindings,
+  issues,
+  onAdd,
+  onUpdate,
+  onRemove,
+}: AuditPanelProps) {
+  const [category, setCategory] = useState<ManualIssueCategory>("subject_cropped");
+  const [note, setNote] = useState("");
+  const canMark = actionId !== null && direction !== null && frame !== null;
+
+  return (
+    <section
+      aria-label="问题记录"
+      className="space-y-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+    >
+      <header>
+        <p className="text-[10px] font-semibold tracking-[0.18em] text-slate-400">QUALITY ISSUES</p>
+        <h2 className="mt-1 text-sm font-semibold text-slate-900">问题记录</h2>
+        <p className="mt-1 text-[11px] text-slate-500">仅保留在当前 Playtest 会话</p>
+      </header>
+
+      <div className="space-y-2">
+        <h3 className="text-xs font-semibold text-slate-800">自动发现</h3>
+        {automaticFindings.length === 0 ? (
+          <p className="text-xs text-slate-500">当前序列没有自动问题</p>
+        ) : (
+          <ul className="space-y-2">
+            {automaticFindings.map((finding, index) => (
+              <li
+                key={`${finding.code}-${finding.frameIndex ?? "sequence"}-${index}`}
+                className="rounded-lg bg-slate-50 p-2 text-xs"
+              >
+                <div className="flex justify-between gap-2">
+                  <span>{finding.message}</span>
+                  <strong className="text-[10px] text-slate-500">自动</strong>
+                </div>
+                <span className="mt-1 block text-[10px] text-slate-500">
+                  {finding.frameIndex === null ? "整段序列" : `第 ${finding.frameIndex + 1} 帧`}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="space-y-2 border-t border-slate-100 pt-3">
+        <h3 className="text-xs font-semibold text-slate-800">
+          标记当前帧{actionName === null ? "" : ` · ${actionName} #${frameIndex + 1}`}
+        </h3>
+        <label className="block text-xs text-slate-600">
+          问题类型
+          <select
+            aria-label="问题类型"
+            value={category}
+            onChange={(event) => setCategory(event.target.value as ManualIssueCategory)}
+            className="mt-1 w-full rounded-lg border border-slate-200 bg-white px-2 py-2"
+          >
+            {Object.entries(CATEGORY_LABELS).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="block text-xs text-slate-600">
+          问题说明
+          <textarea
+            aria-label="问题说明"
+            value={note}
+            onChange={(event) => setNote(event.target.value)}
+            className="mt-1 min-h-16 w-full rounded-lg border border-slate-200 px-2 py-2"
+          />
+        </label>
+        <button
+          type="button"
+          disabled={!canMark}
+          onClick={() => {
+            if (actionId === null || direction === null || frame === null) return;
+            onAdd({
+              id: createIssueId(),
+              category,
+              actionId,
+              direction,
+              frameIndex,
+              imageUrl: frame.imageUrl,
+              note: note.trim(),
+            });
+            setNote("");
+          }}
+          className="w-full rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          标记当前帧问题
+        </button>
+      </div>
+
+      <div className="space-y-2 border-t border-slate-100 pt-3">
+        <h3 className="text-xs font-semibold text-slate-800">人工记录</h3>
+        {issues.length === 0 ? (
+          <p className="text-xs text-slate-500">尚未标记人工问题</p>
+        ) : (
+          issues.map((issue) => (
+            <article key={issue.id} className="space-y-2 rounded-lg border border-slate-200 p-2">
+              <div className="flex items-center justify-between gap-2 text-[10px] text-slate-500">
+                <strong>人工</strong>
+                <span>
+                  {issue.actionId} · {issue.direction} · 第 {issue.frameIndex + 1} 帧
+                </span>
+              </div>
+              <select
+                aria-label="人工问题类型"
+                value={issue.category}
+                onChange={(event) =>
+                  onUpdate(issue.id, event.target.value as ManualIssueCategory, issue.note)
+                }
+                className="w-full rounded-lg border border-slate-200 bg-white px-2 py-2 text-xs"
+              >
+                {Object.entries(CATEGORY_LABELS).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+              <textarea
+                aria-label="人工问题说明"
+                value={issue.note}
+                onChange={(event) => onUpdate(issue.id, issue.category, event.target.value)}
+                className="min-h-14 w-full rounded-lg border border-slate-200 px-2 py-2 text-xs"
+              />
+              <button
+                type="button"
+                aria-label="删除人工问题"
+                onClick={() => onRemove(issue.id)}
+                className="text-xs font-semibold text-rose-700"
+              >
+                删除
+              </button>
+            </article>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/audit/audit-session.test.ts b/frontend/src/pages/playtest/workbench/audit/audit-session.test.ts
new file mode 100644
index 0000000..05f500b
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/audit/audit-session.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { reduceAuditSession, type ManualAuditIssue } from "./audit-session";
+
+const issue: ManualAuditIssue = {
+  id: "issue-1",
+  category: "subject_cropped",
+  actionId: "walk",
+  direction: "south",
+  frameIndex: 2,
+  imageUrl: "/walk-03.png",
+  note: "右侧被裁切",
+};
+
+describe("reduceAuditSession", () => {
+  it("adds, updates and removes manual issues without mutating identity fields", () => {
+    const added = reduceAuditSession([], { type: "add", issue });
+    const updated = reduceAuditSession(added, {
+      type: "update",
+      id: issue.id,
+      category: "style_inconsistent",
+      note: "衣服颜色跳变",
+    });
+    const removed = reduceAuditSession(updated, { type: "remove", id: issue.id });
+
+    expect(added).toEqual([issue]);
+    expect(updated[0]).toEqual({
+      ...issue,
+      category: "style_inconsistent",
+      note: "衣服颜色跳变",
+    });
+    expect(updated[0]).toMatchObject({
+      actionId: "walk",
+      direction: "south",
+      frameIndex: 2,
+      imageUrl: "/walk-03.png",
+    });
+    expect(removed).toEqual([]);
+    expect(added).not.toBe(updated);
+  });
+
+  it("ignores updates and removals for unknown issue ids", () => {
+    expect(
+      reduceAuditSession([issue], {
+        type: "update",
+        id: "missing",
+        category: "other",
+        note: "无效更新",
+      }),
+    ).toEqual([issue]);
+    expect(reduceAuditSession([issue], { type: "remove", id: "missing" })).toEqual([issue]);
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/audit/audit-session.ts b/frontend/src/pages/playtest/workbench/audit/audit-session.ts
new file mode 100644
index 0000000..47e3a90
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/audit/audit-session.ts
@@ -0,0 +1,41 @@
+import type { PlaytestDirection } from "../model/types";
+
+export type ManualIssueCategory =
+  | "subject_cropped"
+  | "transparency"
+  | "image_unavailable"
+  | "duplicate_frame"
+  | "motion_discontinuity"
+  | "motion_direction"
+  | "style_inconsistent"
+  | "other";
+
+export interface ManualAuditIssue {
+  id: string;
+  category: ManualIssueCategory;
+  actionId: string;
+  direction: PlaytestDirection;
+  frameIndex: number;
+  imageUrl: string;
+  note: string;
+}
+
+export type AuditSessionAction =
+  | { type: "add"; issue: ManualAuditIssue }
+  | { type: "update"; id: string; category: ManualIssueCategory; note: string }
+  | { type: "remove"; id: string };
+
+export function reduceAuditSession(
+  state: readonly ManualAuditIssue[],
+  action: AuditSessionAction,
+): readonly ManualAuditIssue[] {
+  if (action.type === "add") return [...state, action.issue];
+  if (action.type === "remove") {
+    if (!state.some((issue) => issue.id === action.id)) return state;
+    return state.filter((issue) => issue.id !== action.id);
+  }
+  if (!state.some((issue) => issue.id === action.id)) return state;
+  return state.map((issue) =>
+    issue.id === action.id ? { ...issue, category: action.category, note: action.note } : issue,
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/export/asset-export.test.ts b/frontend/src/pages/playtest/workbench/export/asset-export.test.ts
new file mode 100644
index 0000000..4536ae3
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/export/asset-export.test.ts
@@ -0,0 +1,180 @@
+/** @vitest-environment jsdom */
+import { describe, expect, it, vi } from "vitest";
+
+import type { PlaytestPreviewModel, PreviewAction, PreviewFrame } from "../model/types";
+import { createAssetExportPlan, exportGameAssets, type AssetExportRuntime } from "./asset-export";
+
+function frame(index: number): PreviewFrame {
+  return {
+    imageUrl: `/frames/walk-${index}.png`,
+    durationMs: 100 + index,
+    rootMotion: { dx: index, dy: 0 },
+    qc: "pending",
+    rejected: false,
+    keyFrame: index === 0,
+  };
+}
+
+function action(status: PreviewAction["status"], frameCount = 9): PreviewAction {
+  return {
+    id: `walk-${status}-abcdef12`,
+    name: "Walk / Forward",
+    type: "walk",
+    status,
+    fps: 10,
+    sequences: [
+      {
+        direction: "south",
+        frames: Array.from({ length: frameCount }, (_, index) => frame(index)),
+      },
+    ],
+  };
+}
+
+const model: PlaytestPreviewModel = {
+  characterId: "character-1",
+  characterName: "Aster",
+  outfitId: "outfit-1",
+  outfitName: "Explorer",
+  characterTemplateUrl: null,
+  baseFrameCount: 0,
+  actions: [action("confirmed"), action("candidate")],
+};
+
+async function readStoredZip(blob: Blob): Promise<Map<string, Uint8Array>> {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const decoder = new TextDecoder();
+  const entries = new Map<string, Uint8Array>();
+  let offset = 0;
+
+  while (offset + 4 <= bytes.length && view.getUint32(offset, true) === 0x04034b50) {
+    const compressedSize = view.getUint32(offset + 18, true);
+    const nameLength = view.getUint16(offset + 26, true);
+    const extraLength = view.getUint16(offset + 28, true);
+    const nameStart = offset + 30;
+    const dataStart = nameStart + nameLength + extraLength;
+    const name = decoder.decode(bytes.slice(nameStart, nameStart + nameLength));
+    entries.set(name, bytes.slice(dataStart, dataStart + compressedSize));
+    offset = dataStart + compressedSize;
+  }
+  return entries;
+}
+
+function runtime(failingUrl: string | null = null): AssetExportRuntime {
+  return {
+    fetchFrame: vi.fn(async (url) => {
+      if (url === failingUrl) throw new Error("missing");
+      return new Blob([`original:${url}`], { type: "image/png" });
+    }),
+    decodeFrame: vi.fn(async (blob) => ({
+      source: {} as CanvasImageSource,
+      width: blob.size % 2 === 0 ? 32 : 24,
+      height: 40,
+      close: vi.fn(),
+    })),
+    createCanvas: vi.fn((width, height) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      Object.defineProperty(canvas, "getContext", {
+        value: () => ({ clearRect: vi.fn(), drawImage: vi.fn() }),
+      });
+      Object.defineProperty(canvas, "toBlob", {
+        value: (callback: BlobCallback) => callback(new Blob(["sheet"], { type: "image/png" })),
+      });
+      return canvas;
+    }),
+  };
+}
+
+describe("asset export", () => {
+  it("plans only confirmed non-empty sequences and wraps after eight columns", () => {
+    const plan = createAssetExportPlan(model);
+
+    expect(plan).toHaveLength(1);
+    expect(plan[0]).toMatchObject({
+      columns: 8,
+      rows: 2,
+      folder: "actions/Walk-Forward-abcdef12/south",
+    });
+    expect(plan[0]?.frames.map((item) => item.filename)).toEqual([
+      "000.png",
+      "001.png",
+      "002.png",
+      "003.png",
+      "004.png",
+      "005.png",
+      "006.png",
+      "007.png",
+      "008.png",
+    ]);
+  });
+
+  it("creates a zip containing only original frames, a sprite sheet and animation json", async () => {
+    const phases: string[] = [];
+    const result = await exportGameAssets(model, runtime(), (phase) => phases.push(phase));
+    const entries = await readStoredZip(result.blob);
+    const names = [...entries.keys()];
+
+    expect(result).toMatchObject({ filename: "windup-Aster-Explorer.zip", incomplete: false });
+    expect(phases).toEqual(["collecting", "rendering", "packing"]);
+    expect(names).toContain("actions/Walk-Forward-abcdef12/south/sprite-sheet.png");
+    expect(names).toContain("actions/Walk-Forward-abcdef12/south/animation.json");
+    expect(names.filter((name) => name.includes("/frames/"))).toHaveLength(9);
+    expect(names.some((name) => /manifest|audit/i.test(name))).toBe(false);
+
+    const jsonBytes = entries.get("actions/Walk-Forward-abcdef12/south/animation.json");
+    const animation = JSON.parse(new TextDecoder().decode(jsonBytes));
+    expect(animation.spriteSheet).toMatchObject({ columns: 8, rows: 2 });
+    expect(animation.frames[0]).toMatchObject({
+      index: 0,
+      source: "frames/000.png",
+      available: true,
+      durationMs: 100,
+      keyFrame: true,
+    });
+  });
+
+  it("keeps a transparent cell and marks a failed original frame unavailable", async () => {
+    const result = await exportGameAssets(model, runtime("/frames/walk-4.png"));
+    const entries = await readStoredZip(result.blob);
+    const animation = JSON.parse(
+      new TextDecoder().decode(entries.get("actions/Walk-Forward-abcdef12/south/animation.json")),
+    );
+
+    expect(result.incomplete).toBe(true);
+    expect(entries.has("actions/Walk-Forward-abcdef12/south/frames/004.png")).toBe(false);
+    expect(animation.frames[4]).toMatchObject({
+      index: 4,
+      source: "frames/004.png",
+      available: false,
+    });
+  });
+
+  it("releases decoded images when sprite-sheet rendering fails", async () => {
+    const baseRuntime = runtime();
+    const closes: Array<ReturnType<typeof vi.fn>> = [];
+    const failingRuntime: AssetExportRuntime = {
+      ...baseRuntime,
+      decodeFrame: vi.fn(async () => {
+        const close = vi.fn();
+        closes.push(close);
+        return { source: {} as CanvasImageSource, width: 24, height: 40, close };
+      }),
+      createCanvas: vi.fn((width, height) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        Object.defineProperty(canvas, "getContext", { value: () => null });
+        return canvas;
+      }),
+    };
+
+    await expect(exportGameAssets(model, failingRuntime)).rejects.toThrow(
+      "浏览器无法创建 Sprite Sheet",
+    );
+    expect(closes).toHaveLength(9);
+    expect(closes.every((close) => close.mock.calls.length === 1)).toBe(true);
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/export/asset-export.ts b/frontend/src/pages/playtest/workbench/export/asset-export.ts
new file mode 100644
index 0000000..66ebfb8
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/export/asset-export.ts
@@ -0,0 +1,375 @@
+import type {
+  PlaytestPreviewModel,
+  PreviewAction,
+  PreviewFrame,
+  PreviewSequence,
+} from "../model/types";
+
+export type AssetExportPhase = "collecting" | "rendering" | "packing";
+
+export interface AssetExportResult {
+  blob: Blob;
+  filename: string;
+  incomplete: boolean;
+}
+
+export interface DecodedFrame {
+  source: CanvasImageSource;
+  width: number;
+  height: number;
+  close(): void;
+}
+
+export interface AssetExportRuntime {
+  fetchFrame(url: string): Promise<Blob>;
+  decodeFrame(blob: Blob): Promise<DecodedFrame>;
+  createCanvas(width: number, height: number): HTMLCanvasElement;
+}
+
+export interface PlannedFrame {
+  frame: PreviewFrame;
+  index: number;
+  filename: string;
+}
+
+export interface PlannedSequence {
+  action: PreviewAction;
+  sequence: PreviewSequence;
+  folder: string;
+  columns: number;
+  rows: number;
+  frames: readonly PlannedFrame[];
+}
+
+interface LoadedFrame extends PlannedFrame {
+  blob: Blob | null;
+  decoded: DecodedFrame | null;
+  sourceFilename: string;
+}
+
+interface ZipEntry {
+  name: string;
+  data: Uint8Array;
+}
+
+function safeSegment(value: string, fallback: string): string {
+  const normalized = value
+    .normalize("NFKC")
+    .replace(/[^\p{L}\p{N}]+/gu, "-")
+    .replace(/^-+|-+$/g, "");
+  return normalized || fallback;
+}
+
+function idSuffix(id: string): string {
+  return safeSegment(id, "id").slice(-8) || "id";
+}
+
+function extensionFromUrl(imageUrl: string): string {
+  const match = imageUrl.split(/[?#]/, 1)[0]?.match(/\.([a-zA-Z0-9]{2,5})$/);
+  return match?.[1]?.toLowerCase() ?? "png";
+}
+
+function extensionForBlob(blob: Blob, imageUrl: string): string {
+  const byMime: Readonly<Record<string, string>> = {
+    "image/png": "png",
+    "image/jpeg": "jpg",
+    "image/webp": "webp",
+    "image/gif": "gif",
+    "image/avif": "avif",
+  };
+  return byMime[blob.type.toLowerCase()] ?? extensionFromUrl(imageUrl);
+}
+
+export function createAssetExportPlan(model: PlaytestPreviewModel): readonly PlannedSequence[] {
+  return model.actions.flatMap((action) => {
+    if (action.status !== "confirmed") return [];
+    const actionFolder = `${safeSegment(action.name, "action")}-${idSuffix(action.id)}`;
+    return action.sequences.flatMap((sequence) => {
+      if (sequence.frames.length === 0) return [];
+      const columns = Math.min(8, sequence.frames.length);
+      return [
+        {
+          action,
+          sequence,
+          folder: `actions/${actionFolder}/${safeSegment(sequence.direction, "default")}`,
+          columns,
+          rows: Math.ceil(sequence.frames.length / columns),
+          frames: sequence.frames.map((currentFrame, index) => ({
+            frame: currentFrame,
+            index,
+            filename: `${String(index).padStart(3, "0")}.${extensionFromUrl(currentFrame.imageUrl)}`,
+          })),
+        },
+      ];
+    });
+  });
+}
+
+const defaultRuntime: AssetExportRuntime = {
+  async fetchFrame(url) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`图片读取失败：${response.status}`);
+    return response.blob();
+  },
+  async decodeFrame(blob) {
+    const bitmap = await createImageBitmap(blob);
+    return {
+      source: bitmap,
+      width: bitmap.width,
+      height: bitmap.height,
+      close: () => bitmap.close(),
+    };
+  },
+  createCanvas(width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  },
+};
+
+function canvasPng(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob === null) reject(new Error("Sprite Sheet 编码失败"));
+      else resolve(blob);
+    }, "image/png");
+  });
+}
+
+async function bytes(data: Blob | string): Promise<Uint8Array> {
+  if (typeof data === "string") return new TextEncoder().encode(data);
+  return new Uint8Array(await data.arrayBuffer());
+}
+
+function uint32Table(): Uint32Array {
+  const table = new Uint32Array(256);
+  for (let value = 0; value < 256; value += 1) {
+    let current = value;
+    for (let bit = 0; bit < 8; bit += 1) {
+      current = (current & 1) !== 0 ? 0xedb88320 ^ (current >>> 1) : current >>> 1;
+    }
+    table[value] = current >>> 0;
+  }
+  return table;
+}
+
+const CRC32_TABLE = uint32Table();
+
+function crc32(data: Uint8Array): number {
+  let crc = 0xffffffff;
+  for (const value of data) crc = (crc >>> 8) ^ (CRC32_TABLE[(crc ^ value) & 0xff] ?? 0);
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+function dosDateTime(date: Date): { date: number; time: number } {
+  const year = Math.max(1980, date.getFullYear());
+  return {
+    date: ((year - 1980) << 9) | ((date.getMonth() + 1) << 5) | date.getDate(),
+    time: (date.getHours() << 11) | (date.getMinutes() << 5) | Math.floor(date.getSeconds() / 2),
+  };
+}
+
+function concat(chunks: readonly Uint8Array[]): Uint8Array {
+  const output = new Uint8Array(chunks.reduce((total, chunk) => total + chunk.length, 0));
+  let offset = 0;
+  for (const chunk of chunks) {
+    output.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return output;
+}
+
+function storedZip(entries: readonly ZipEntry[]): Blob {
+  const localChunks: Uint8Array[] = [];
+  const centralChunks: Uint8Array[] = [];
+  const encoder = new TextEncoder();
+  const timestamp = dosDateTime(new Date());
+  let localOffset = 0;
+
+  for (const entry of entries) {
+    const name = encoder.encode(entry.name);
+    const checksum = crc32(entry.data);
+    const local = new Uint8Array(30 + name.length);
+    const localView = new DataView(local.buffer);
+    localView.setUint32(0, 0x04034b50, true);
+    localView.setUint16(4, 20, true);
+    localView.setUint16(6, 0x0800, true);
+    localView.setUint16(8, 0, true);
+    localView.setUint16(10, timestamp.time, true);
+    localView.setUint16(12, timestamp.date, true);
+    localView.setUint32(14, checksum, true);
+    localView.setUint32(18, entry.data.length, true);
+    localView.setUint32(22, entry.data.length, true);
+    localView.setUint16(26, name.length, true);
+    local.set(name, 30);
+    localChunks.push(local, entry.data);
+
+    const central = new Uint8Array(46 + name.length);
+    const centralView = new DataView(central.buffer);
+    centralView.setUint32(0, 0x02014b50, true);
+    centralView.setUint16(4, 20, true);
+    centralView.setUint16(6, 20, true);
+    centralView.setUint16(8, 0x0800, true);
+    centralView.setUint16(10, 0, true);
+    centralView.setUint16(12, timestamp.time, true);
+    centralView.setUint16(14, timestamp.date, true);
+    centralView.setUint32(16, checksum, true);
+    centralView.setUint32(20, entry.data.length, true);
+    centralView.setUint32(24, entry.data.length, true);
+    centralView.setUint16(28, name.length, true);
+    centralView.setUint32(42, localOffset, true);
+    central.set(name, 46);
+    centralChunks.push(central);
+    localOffset += local.length + entry.data.length;
+  }
+
+  const centralDirectory = concat(centralChunks);
+  const end = new Uint8Array(22);
+  const endView = new DataView(end.buffer);
+  endView.setUint32(0, 0x06054b50, true);
+  endView.setUint16(8, entries.length, true);
+  endView.setUint16(10, entries.length, true);
+  endView.setUint32(12, centralDirectory.length, true);
+  endView.setUint32(16, localOffset, true);
+  const output = concat([...localChunks, centralDirectory, end]);
+  const arrayBuffer = new ArrayBuffer(output.length);
+  new Uint8Array(arrayBuffer).set(output);
+  return new Blob([arrayBuffer], { type: "application/zip" });
+}
+
+export async function exportGameAssets(
+  model: PlaytestPreviewModel,
+  runtime: AssetExportRuntime = defaultRuntime,
+  onPhase?: (phase: AssetExportPhase) => void,
+): Promise<AssetExportResult> {
+  const plan = createAssetExportPlan(model);
+  onPhase?.("collecting");
+  const blobCache = new Map<string, Promise<Blob>>();
+  let incomplete = false;
+
+  const loaded = await Promise.all(
+    plan.map(async (item) => ({
+      item,
+      frames: await Promise.all(
+        item.frames.map(async (planned): Promise<LoadedFrame> => {
+          try {
+            let pending = blobCache.get(planned.frame.imageUrl);
+            if (pending === undefined) {
+              pending = runtime.fetchFrame(planned.frame.imageUrl);
+              blobCache.set(planned.frame.imageUrl, pending);
+            }
+            const blob = await pending;
+            const decoded = await runtime.decodeFrame(blob);
+            const extension = extensionForBlob(blob, planned.frame.imageUrl);
+            return {
+              ...planned,
+              blob,
+              decoded,
+              sourceFilename: `${String(planned.index).padStart(3, "0")}.${extension}`,
+            };
+          } catch {
+            incomplete = true;
+            return { ...planned, blob: null, decoded: null, sourceFilename: planned.filename };
+          }
+        }),
+      ),
+    })),
+  );
+
+  onPhase?.("rendering");
+  const zipEntries: ZipEntry[] = [];
+  try {
+    for (const { item, frames } of loaded) {
+      const cellWidth = Math.max(1, ...frames.map((current) => current.decoded?.width ?? 0));
+      const cellHeight = Math.max(1, ...frames.map((current) => current.decoded?.height ?? 0));
+      const canvas = runtime.createCanvas(cellWidth * item.columns, cellHeight * item.rows);
+      const context = canvas.getContext("2d");
+      if (context === null) throw new Error("浏览器无法创建 Sprite Sheet");
+      context.clearRect(0, 0, canvas.width, canvas.height);
+
+      const animationFrames = frames.map((current) => {
+        const column = current.index % item.columns;
+        const row = Math.floor(current.index / item.columns);
+        const width = current.decoded?.width ?? 0;
+        const height = current.decoded?.height ?? 0;
+        const offsetX = Math.floor((cellWidth - width) / 2);
+        const offsetY = Math.floor((cellHeight - height) / 2);
+        if (current.decoded !== null) {
+          context.drawImage(
+            current.decoded.source,
+            column * cellWidth + offsetX,
+            row * cellHeight + offsetY,
+          );
+        }
+        return {
+          index: current.index,
+          source: `frames/${current.sourceFilename}`,
+          available: current.blob !== null,
+          x: column * cellWidth + offsetX,
+          y: row * cellHeight + offsetY,
+          width,
+          height,
+          originalWidth: width,
+          originalHeight: height,
+          offsetX,
+          offsetY,
+          durationMs: current.frame.durationMs,
+          keyFrame: current.frame.keyFrame,
+          rootMotion: current.frame.rootMotion,
+          qc: current.frame.qc,
+          rejected: current.frame.rejected,
+        };
+      });
+
+      const sheet = await canvasPng(canvas);
+      zipEntries.push({ name: `${item.folder}/sprite-sheet.png`, data: await bytes(sheet) });
+      for (const current of frames) {
+        if (current.blob === null) continue;
+        zipEntries.push({
+          name: `${item.folder}/frames/${current.sourceFilename}`,
+          data: await bytes(current.blob),
+        });
+      }
+      zipEntries.push({
+        name: `${item.folder}/animation.json`,
+        data: await bytes(
+          JSON.stringify(
+            {
+              schemaVersion: 1,
+              action: {
+                id: item.action.id,
+                name: item.action.name,
+                type: item.action.type,
+                status: item.action.status,
+              },
+              direction: item.sequence.direction,
+              fps: item.action.fps,
+              spriteSheet: {
+                file: "sprite-sheet.png",
+                width: canvas.width,
+                height: canvas.height,
+                columns: item.columns,
+                rows: item.rows,
+                cellWidth,
+                cellHeight,
+              },
+              frames: animationFrames,
+            },
+            null,
+            2,
+          ),
+        ),
+      });
+    }
+  } finally {
+    loaded.forEach(({ frames }) => frames.forEach((current) => current.decoded?.close()));
+  }
+
+  onPhase?.("packing");
+  return {
+    blob: storedZip(zipEntries),
+    filename: `windup-${safeSegment(model.characterName, "character")}-${safeSegment(model.outfitName, "outfit")}.zip`,
+    incomplete,
+  };
+}
diff --git a/frontend/src/pages/playtest/workbench/export/export-panel.test.tsx b/frontend/src/pages/playtest/workbench/export/export-panel.test.tsx
new file mode 100644
index 0000000..55d3144
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/export/export-panel.test.tsx
@@ -0,0 +1,127 @@
+/** @vitest-environment jsdom */
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { PlaytestPreviewModel } from "../model/types";
+import { ExportPanel } from "./export-panel";
+
+const model = {
+  characterId: "character-1",
+  characterName: "Aster",
+  outfitId: "outfit-1",
+  outfitName: "Explorer",
+  characterTemplateUrl: null,
+  baseFrameCount: 0,
+  actions: [
+    {
+      id: "walk-abcdef12",
+      name: "Walk",
+      type: "walk",
+      status: "confirmed",
+      fps: 10,
+      sequences: [
+        {
+          direction: "south",
+          frames: [
+            {
+              imageUrl: "/walk.png",
+              durationMs: 100,
+              rootMotion: null,
+              qc: "pending",
+              rejected: false,
+              keyFrame: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+} satisfies PlaytestPreviewModel;
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("ExportPanel", () => {
+  it("warns about current quality issues without blocking export", () => {
+    render(<ExportPanel model={model} qualityIssueCount={3} />);
+
+    expect(screen.getByText("当前核验存在 3 项质量问题，仍可导出")).toBeTruthy();
+    expect(
+      (screen.getByRole("button", { name: "导出游戏资产包" }) as HTMLButtonElement).disabled,
+    ).toBe(false);
+  });
+
+  it("shows progress, prevents duplicate export, downloads and revokes the object url", async () => {
+    let resolveExport: (value: {
+      blob: Blob;
+      filename: string;
+      incomplete: boolean;
+    }) => void = () => {
+      throw new Error("export promise was not initialized");
+    };
+    const exporter = vi.fn(
+      (
+        _model: PlaytestPreviewModel,
+        onPhase?: (phase: "collecting" | "rendering" | "packing") => void,
+      ) => {
+        onPhase?.("rendering");
+        return new Promise<{ blob: Blob; filename: string; incomplete: boolean }>((resolve) => {
+          resolveExport = resolve;
+        });
+      },
+    );
+    const createObjectURL = vi.fn(() => "blob:asset-package");
+    const revokeObjectURL = vi.fn();
+    Object.defineProperty(URL, "createObjectURL", { configurable: true, value: createObjectURL });
+    Object.defineProperty(URL, "revokeObjectURL", { configurable: true, value: revokeObjectURL });
+    const click = vi
+      .spyOn(HTMLAnchorElement.prototype, "click")
+      .mockImplementation(() => undefined);
+
+    render(<ExportPanel model={model} exporter={exporter} />);
+    const button = screen.getByRole("button", { name: "导出游戏资产包" });
+    fireEvent.click(button);
+    fireEvent.click(button);
+    expect(screen.getByText("正在生成图片")).toBeTruthy();
+    expect(exporter).toHaveBeenCalledTimes(1);
+
+    resolveExport({
+      blob: new Blob(["zip"], { type: "application/zip" }),
+      filename: "windup-Aster-Explorer.zip",
+      incomplete: false,
+    });
+    await waitFor(() => expect(screen.getByText("下载完成")).toBeTruthy());
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toHaveBeenCalledWith("blob:asset-package");
+    click.mockRestore();
+  });
+
+  it("warns for incomplete packages and allows retry after failure", async () => {
+    const exporter = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("pack failed"))
+      .mockResolvedValueOnce({
+        blob: new Blob(["zip"], { type: "application/zip" }),
+        filename: "windup-Aster-Explorer.zip",
+        incomplete: true,
+      });
+    Object.defineProperty(URL, "createObjectURL", {
+      configurable: true,
+      value: vi.fn(() => "blob:retry"),
+    });
+    Object.defineProperty(URL, "revokeObjectURL", { configurable: true, value: vi.fn() });
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined);
+
+    render(<ExportPanel model={model} exporter={exporter} />);
+    fireEvent.click(screen.getByRole("button", { name: "导出游戏资产包" }));
+    await waitFor(() => expect(screen.getByText("导出失败，可重试")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button", { name: "重新导出" }));
+    await waitFor(() =>
+      expect(screen.getByText("导出不完整，缺失图片已保留透明占位")).toBeTruthy(),
+    );
+    expect(exporter).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/export/export-panel.tsx b/frontend/src/pages/playtest/workbench/export/export-panel.tsx
new file mode 100644
index 0000000..8678d63
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/export/export-panel.tsx
@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import type { PlaytestPreviewModel } from "../model/types";
+import {
+  createAssetExportPlan,
+  exportGameAssets,
+  type AssetExportPhase,
+  type AssetExportResult,
+} from "./asset-export";
+
+export type AssetExporter = (
+  model: PlaytestPreviewModel,
+  onPhase?: (phase: AssetExportPhase) => void,
+) => Promise<AssetExportResult>;
+
+export interface ExportPanelProps {
+  model: PlaytestPreviewModel;
+  qualityIssueCount?: number;
+  exporter?: AssetExporter;
+}
+
+type ExportState =
+  | { status: "idle" }
+  | { status: "working"; phase: AssetExportPhase }
+  | { status: "success"; incomplete: boolean }
+  | { status: "failure" };
+
+const PHASE_LABELS: Readonly<Record<AssetExportPhase, string>> = {
+  collecting: "正在整理素材",
+  rendering: "正在生成图片",
+  packing: "正在打包",
+};
+
+const defaultExporter: AssetExporter = (model, onPhase) =>
+  exportGameAssets(model, undefined, onPhase);
+
+export function ExportPanel({
+  model,
+  qualityIssueCount = 0,
+  exporter = defaultExporter,
+}: ExportPanelProps) {
+  const [state, setState] = useState<ExportState>({ status: "idle" });
+  const plan = createAssetExportPlan(model);
+  const working = state.status === "working";
+
+  const startExport = async () => {
+    if (working) return;
+    setState({ status: "working", phase: "collecting" });
+    try {
+      const result = await exporter(model, (phase) => setState({ status: "working", phase }));
+      const url = URL.createObjectURL(result.blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = result.filename;
+      anchor.click();
+      URL.revokeObjectURL(url);
+      setState({ status: "success", incomplete: result.incomplete });
+    } catch {
+      setState({ status: "failure" });
+    }
+  };
+
+  return (
+    <section
+      aria-label="资产导出"
+      aria-busy={working}
+      className="space-y-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+    >
+      <header>
+        <p className="text-[10px] font-semibold tracking-[0.18em] text-slate-400">GAME ASSETS</p>
+        <h2 className="mt-1 text-sm font-semibold text-slate-900">资产导出</h2>
+        <p className="mt-1 text-[11px] text-slate-500">逐帧原图、Sprite Sheet 与动画 JSON</p>
+      </header>
+
+      <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-xs">
+        <dt className="text-slate-500">动作方向</dt>
+        <dd className="font-medium text-slate-900">{plan.length} 组</dd>
+        <dt className="text-slate-500">逐帧原图</dt>
+        <dd className="font-medium text-slate-900">
+          {plan.reduce((total, item) => total + item.frames.length, 0)} 张
+        </dd>
+        <dt className="text-slate-500">每行上限</dt>
+        <dd className="font-medium text-slate-900">8 帧</dd>
+      </dl>
+
+      {qualityIssueCount > 0 ? (
+        <p className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-900">
+          当前核验存在 {qualityIssueCount} 项质量问题，仍可导出
+        </p>
+      ) : null}
+
+      {state.status === "working" ? (
+        <p role="status" className="rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-700">
+          {PHASE_LABELS[state.phase]}
+        </p>
+      ) : state.status === "failure" ? (
+        <p role="alert" className="rounded-lg bg-rose-50 px-3 py-2 text-xs text-rose-800">
+          导出失败，可重试
+        </p>
+      ) : state.status === "success" ? (
+        <div className="space-y-2">
+          <p className="rounded-lg bg-emerald-50 px-3 py-2 text-xs text-emerald-800">下载完成</p>
+          {state.incomplete ? (
+            <p className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-900">
+              导出不完整，缺失图片已保留透明占位
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      <button
+        type="button"
+        disabled={working || plan.length === 0}
+        onClick={() => void startExport()}
+        className="w-full rounded-lg bg-orange-500 px-3 py-2 text-xs font-semibold text-white hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        {state.status === "failure" ? "重新导出" : "导出游戏资产包"}
+      </button>
+      {plan.length === 0 ? <p className="text-xs text-slate-500">没有可导出的已确认动作</p> : null}
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/frame-review-evidence.test.tsx b/frontend/src/pages/playtest/workbench/frame-review-evidence.test.tsx
new file mode 100644
index 0000000..5ab24b1
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/frame-review-evidence.test.tsx
@@ -0,0 +1,212 @@
+/** @vitest-environment jsdom */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import type { FrameReviewEvidenceState } from "./analysis/use-frame-review-evidence";
+import { FrameReviewEvidencePanel } from "./frame-review-evidence";
+
+const readyState: FrameReviewEvidenceState = {
+  status: "ready",
+  evidence: {
+    complete: true,
+    unavailableFrameCount: 0,
+    findings: [],
+    frames: [
+      {
+        geometry: {
+          width: 256,
+          height: 256,
+          bounds: { left: 80, top: 30, right: 175, bottom: 236, width: 96, height: 207 },
+          centroid: { x: 127, y: 140 },
+          footY: 236,
+          subjectHeight: 207,
+          opaquePixels: 12_000,
+          coverageRatio: 0.1831,
+        },
+        unavailableReason: null,
+        previousDelta: null,
+        expectedRootDelta: null,
+        composedPreviewDelta: null,
+        coverageState: "normal",
+        movementState: "not_applicable",
+        areaState: "not_applicable",
+      },
+      {
+        geometry: {
+          width: 256,
+          height: 256,
+          bounds: { left: 83, top: 31, right: 174, bottom: 237, width: 92, height: 207 },
+          centroid: { x: 130, y: 144 },
+          footY: 237,
+          subjectHeight: 207,
+          opaquePixels: 9_600,
+          coverageRatio: 0.1465,
+        },
+        unavailableReason: null,
+        previousDelta: { dx: 3, dy: 4, distance: 5, areaDeltaPercent: 20 },
+        expectedRootDelta: { dx: 10, dy: 6, distance: Math.sqrt(136) },
+        composedPreviewDelta: { dx: 13, dy: 2, distance: Math.sqrt(173) },
+        coverageState: "normal",
+        movementState: "normal",
+        areaState: "normal",
+      },
+    ],
+    summary: {
+      footDrift: 1,
+      heightDrift: 0,
+      medianStep: 5,
+      maxStep: 5,
+      movementThreshold: 15,
+      heightThreshold: 12,
+      maxAreaDeltaPercent: 20,
+      canvasState: "normal",
+      footState: "normal",
+      heightState: "normal",
+      movementState: "normal",
+      areaState: "normal",
+    },
+  },
+};
+
+afterEach(cleanup);
+
+describe("FrameReviewEvidencePanel", () => {
+  it("keeps analysis loading distinct from measured zero values", () => {
+    // Catches the right panel presenting fabricated zero evidence before image decoding completes.
+    render(
+      <FrameReviewEvidencePanel
+        state={{ status: "loading", evidence: null }}
+        frameIndex={0}
+        actionType="walk"
+      />,
+    );
+
+    expect(screen.getByRole("status").textContent).toContain("分析中");
+    expect(screen.queryByText(/0\.0 px/)).toBeNull();
+  });
+
+  it("shows measured drift, expected root increment and composed preview motion separately", () => {
+    // Catches expected motion and in-image drift being merged into one misleading number.
+    render(<FrameReviewEvidencePanel state={readyState} frameIndex={1} actionType="walk" />);
+
+    expect(screen.getByRole("region", { name: "自动审核依据" })).toBeTruthy();
+    expect(screen.getByText("画面内额外漂移")).toBeTruthy();
+    expect(screen.getByText("x +3.0 px，y +4.0 px，距离 5.0 px")).toBeTruthy();
+    expect(screen.getByText("预期根位移增量")).toBeTruthy();
+    expect(screen.getByText("x +10.0 px，y +6.0 px，距离 11.7 px")).toBeTruthy();
+    expect(screen.getByText("合成预览位移")).toBeTruthy();
+    expect(screen.getByText("x +13.0 px，y +2.0 px，距离 13.2 px")).toBeTruthy();
+    expect(screen.getByText("脚底线")).toBeTruthy();
+    expect(screen.getByText("237 px")).toBeTruthy();
+    expect(screen.getByText("主体高度")).toBeTruthy();
+    expect(screen.getByText("207 px")).toBeTruthy();
+    expect(screen.getByText("画布尺寸")).toBeTruthy();
+    expect(screen.getByText("256 × 256 px")).toBeTruthy();
+    expect(screen.getByText("轮廓面积变化")).toBeTruthy();
+    expect(screen.getByText("20.0%")).toBeTruthy();
+    expect(screen.getByText("序列基线")).toBeTruthy();
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
+  });
+
+  it("does not fabricate an adjacent comparison for the first frame", () => {
+    // Catches first-frame null deltas being displayed as a successful zero movement.
+    render(<FrameReviewEvidencePanel state={readyState} frameIndex={0} actionType="walk" />);
+
+    expect(screen.getAllByText("相邻对比不适用")).toHaveLength(3);
+  });
+
+  it("explains that jump foot drift requires human judgement instead of failing it", () => {
+    // Catches intentional lift being shown as an ordinary foot-anchor anomaly.
+    const jumpState: FrameReviewEvidenceState = {
+      status: "ready",
+      evidence: {
+        ...readyState.evidence!,
+        summary: {
+          ...readyState.evidence!.summary,
+          footDrift: 42,
+          footState: "attention",
+        },
+      },
+    };
+
+    render(<FrameReviewEvidencePanel state={jumpState} frameIndex={1} actionType="jump" />);
+
+    expect(screen.getByText("42.0 px / 固定脚底阈值 3.0 px；允许离地，需人工判断")).toBeTruthy();
+  });
+
+  it("explains action-allowed jump height variation without a false anomaly", () => {
+    const jumpState: FrameReviewEvidenceState = {
+      status: "ready",
+      evidence: {
+        ...readyState.evidence!,
+        summary: {
+          ...readyState.evidence!.summary,
+          heightDrift: 42,
+          heightThreshold: null,
+          heightState: "attention",
+        },
+      },
+    };
+
+    render(<FrameReviewEvidencePanel state={jumpState} frameIndex={1} actionType="jump" />);
+
+    expect(screen.getByText("42.0 px / 动作允许高度变化，需人工判断")).toBeTruthy();
+    expect(screen.getAllByText("注意").length).toBeGreaterThan(0);
+  });
+
+  it("shows the exact unavailable reason without disabling the rest of Playtest", () => {
+    // Catches cross-origin failures being converted to a normal geometry result.
+    const unavailableState: FrameReviewEvidenceState = {
+      status: "ready",
+      evidence: {
+        ...readyState.evidence!,
+        complete: false,
+        unavailableFrameCount: 1,
+        frames: [
+          {
+            geometry: null,
+            unavailableReason: "图片跨域，无法计算像素",
+            previousDelta: null,
+            expectedRootDelta: null,
+            composedPreviewDelta: null,
+            coverageState: "not_applicable",
+            movementState: "not_applicable",
+            areaState: "not_applicable",
+          },
+        ],
+      },
+    };
+
+    render(<FrameReviewEvidencePanel state={unavailableState} frameIndex={0} actionType="walk" />);
+
+    expect(screen.getByText("无法计算：图片跨域，无法计算像素")).toBeTruthy();
+    expect(screen.getByText("1 帧无法计算，序列结论不完整")).toBeTruthy();
+  });
+
+  it("renders structured findings with severity and frame location", () => {
+    const findingState: FrameReviewEvidenceState = {
+      status: "ready",
+      evidence: {
+        ...readyState.evidence!,
+        complete: false,
+        unavailableFrameCount: 1,
+        findings: [
+          {
+            code: "subject_cropped",
+            severity: "error",
+            frameIndex: 1,
+            message: "主体接触画布边缘，可能发生裁切",
+            metrics: { left: 0 },
+          },
+        ],
+      },
+    };
+
+    render(<FrameReviewEvidencePanel state={findingState} frameIndex={1} actionType="walk" />);
+
+    expect(screen.getByText("分析不完整")).toBeTruthy();
+    expect(screen.getByText("主体接触画布边缘，可能发生裁切")).toBeTruthy();
+    expect(screen.getByText("第 2 帧")).toBeTruthy();
+    expect(screen.getByText("错误")).toBeTruthy();
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/frame-review-evidence.tsx b/frontend/src/pages/playtest/workbench/frame-review-evidence.tsx
new file mode 100644
index 0000000..55e5e02
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/frame-review-evidence.tsx
@@ -0,0 +1,261 @@
+import type { EvidenceState, MotionVector } from "./analysis/sequence-evidence";
+import type { FrameReviewEvidenceState } from "./analysis/use-frame-review-evidence";
+import type { PlaytestActionType } from "./model/types";
+
+export interface FrameReviewEvidencePanelProps {
+  state: FrameReviewEvidenceState;
+  frameIndex: number;
+  actionType: PlaytestActionType;
+}
+
+const STATE_LABELS: Record<EvidenceState, string> = {
+  normal: "正常",
+  attention: "注意",
+  anomaly: "异常",
+  not_applicable: "不适用",
+};
+
+const STATE_CLASSES: Record<EvidenceState, string> = {
+  normal: "bg-emerald-50 text-emerald-800",
+  attention: "bg-amber-50 text-amber-800",
+  anomaly: "bg-rose-50 text-rose-800",
+  not_applicable: "bg-slate-100 text-slate-500",
+};
+
+function signed(value: number): string {
+  return `${value >= 0 ? "+" : ""}${value.toFixed(1)}`;
+}
+
+function vectorText(vector: MotionVector | null): string {
+  if (vector === null) return "相邻对比不适用";
+  return `x ${signed(vector.dx)} px，y ${signed(vector.dy)} px，距离 ${vector.distance.toFixed(1)} px`;
+}
+
+function optionalPixels(value: number | null): string {
+  return value === null ? "不适用" : `${value.toFixed(1)} px`;
+}
+
+function StateBadge({ state }: { state: EvidenceState }) {
+  return (
+    <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${STATE_CLASSES[state]}`}>
+      {STATE_LABELS[state]}
+    </span>
+  );
+}
+
+function EvidenceRow({
+  label,
+  value,
+  state,
+}: {
+  label: string;
+  value: string;
+  state?: EvidenceState;
+}) {
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 border-t border-slate-100 py-2 first:border-t-0">
+      <div className="min-w-0">
+        <dt className="text-[11px] text-slate-500">{label}</dt>
+        <dd className="mt-0.5 break-words text-xs font-medium text-slate-900">{value}</dd>
+      </div>
+      {state === undefined ? null : <StateBadge state={state} />}
+    </div>
+  );
+}
+
+export function FrameReviewEvidencePanel({
+  state,
+  frameIndex,
+  actionType,
+}: FrameReviewEvidencePanelProps) {
+  return (
+    <section
+      role="region"
+      aria-label="自动审核依据"
+      className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+    >
+      <header>
+        <p className="text-[10px] font-semibold tracking-[0.18em] text-slate-400">AUTO REVIEW</p>
+        <h2 className="mt-1 text-sm font-semibold text-slate-900">自动审核依据</h2>
+        <p className="mt-1 text-[11px] leading-5 text-slate-500">检查画面与序列质量，不修改 QC</p>
+      </header>
+
+      {state.status === "idle" ? (
+        <p className="mt-3 text-xs text-slate-500">未开始分析</p>
+      ) : state.status === "loading" ? (
+        <p role="status" className="mt-3 text-xs text-slate-500">
+          分析中，请稍候…
+        </p>
+      ) : (
+        <EvidenceContent state={state} frameIndex={frameIndex} actionType={actionType} />
+      )}
+    </section>
+  );
+}
+
+function EvidenceContent({
+  state,
+  frameIndex,
+  actionType,
+}: {
+  state: Extract<FrameReviewEvidenceState, { status: "ready" }>;
+  frameIndex: number;
+  actionType: PlaytestActionType;
+}) {
+  const { evidence } = state;
+  const frame = evidence.frames[frameIndex] ?? null;
+  const summary = evidence.summary;
+
+  if (frame === null) return <p className="mt-3 text-xs text-slate-500">当前帧没有分析结果</p>;
+
+  return (
+    <div className="mt-3 space-y-4">
+      {frame.unavailableReason === null ? null : (
+        <p role="status" className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-900">
+          无法计算：{frame.unavailableReason}
+        </p>
+      )}
+
+      <div>
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-xs font-semibold text-slate-800">质量问题</h3>
+          {!evidence.complete ? (
+            <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-800">
+              分析不完整
+            </span>
+          ) : null}
+        </div>
+        {evidence.findings.length === 0 ? (
+          <p className="mt-2 text-xs text-slate-500">未发现自动质量问题</p>
+        ) : (
+          <ul className="mt-2 space-y-2">
+            {evidence.findings.map((finding, index) => (
+              <li
+                key={`${finding.code}-${finding.frameIndex ?? "sequence"}-${index}`}
+                className={`rounded-lg border px-3 py-2 text-xs ${
+                  finding.severity === "error"
+                    ? "border-rose-200 bg-rose-50 text-rose-900"
+                    : "border-amber-200 bg-amber-50 text-amber-900"
+                }`}
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <span>{finding.message}</span>
+                  <strong className="shrink-0 text-[10px]">
+                    {finding.severity === "error" ? "错误" : "提醒"}
+                  </strong>
+                </div>
+                <span className="mt-1 block text-[10px] opacity-70">
+                  {finding.frameIndex === null ? "整段序列" : `第 ${finding.frameIndex + 1} 帧`}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div>
+        <h3 className="text-xs font-semibold text-slate-800">当前帧</h3>
+        <dl className="mt-1">
+          <EvidenceRow
+            label="画面内额外漂移"
+            value={vectorText(frame.previousDelta)}
+            state={frame.movementState}
+          />
+          <EvidenceRow label="预期根位移增量" value={vectorText(frame.expectedRootDelta)} />
+          <EvidenceRow label="合成预览位移" value={vectorText(frame.composedPreviewDelta)} />
+          <EvidenceRow
+            label="画布尺寸"
+            value={
+              frame.geometry === null
+                ? "无法计算"
+                : `${frame.geometry.width} × ${frame.geometry.height} px`
+            }
+            state={
+              frame.geometry === null
+                ? "not_applicable"
+                : frame.geometry.width === 256 && frame.geometry.height === 256
+                  ? "normal"
+                  : "anomaly"
+            }
+          />
+          <EvidenceRow
+            label="脚底线"
+            value={frame.geometry === null ? "无法计算" : `${frame.geometry.footY} px`}
+          />
+          <EvidenceRow
+            label="主体高度"
+            value={frame.geometry === null ? "无法计算" : `${frame.geometry.subjectHeight} px`}
+          />
+          <EvidenceRow
+            label="主体覆盖率"
+            value={
+              frame.geometry === null
+                ? "无法计算"
+                : `${(frame.geometry.coverageRatio * 100).toFixed(1)}%`
+            }
+            state={frame.coverageState}
+          />
+          <EvidenceRow
+            label="轮廓面积变化"
+            value={
+              frame.previousDelta === null
+                ? "不适用"
+                : `${frame.previousDelta.areaDeltaPercent.toFixed(1)}%`
+            }
+            state={frame.areaState}
+          />
+        </dl>
+      </div>
+
+      <div>
+        <h3 className="text-xs font-semibold text-slate-800">序列基线</h3>
+        {!evidence.complete ? (
+          <p className="mt-2 rounded-lg bg-amber-50 px-3 py-2 text-[11px] text-amber-900">
+            {evidence.unavailableFrameCount} 帧无法计算，序列结论不完整
+          </p>
+        ) : null}
+        <dl className="mt-1">
+          <EvidenceRow label="整段画布规格" value="要求 256 × 256" state={summary.canvasState} />
+          <EvidenceRow
+            label="最大脚底漂移"
+            value={
+              actionType === "jump" && summary.footState === "attention"
+                ? `${optionalPixels(summary.footDrift)} / 固定脚底阈值 3.0 px；允许离地，需人工判断`
+                : `${optionalPixels(summary.footDrift)} / 阈值 3.0 px`
+            }
+            state={summary.footState}
+          />
+          <EvidenceRow
+            label="最大高度波动"
+            value={
+              summary.heightThreshold === null && summary.heightDrift !== null
+                ? `${optionalPixels(summary.heightDrift)} / 动作允许高度变化，需人工判断`
+                : `${optionalPixels(summary.heightDrift)} / 阈值 ${summary.heightThreshold?.toFixed(1) ?? "不适用"} px`
+            }
+            state={summary.heightState}
+          />
+          <EvidenceRow
+            label="相邻位移连续性"
+            value={
+              summary.maxStep === null ||
+              summary.medianStep === null ||
+              summary.movementThreshold === null
+                ? "不适用"
+                : `最大 ${summary.maxStep.toFixed(1)} px，中值 ${summary.medianStep.toFixed(1)} px，阈值 ${summary.movementThreshold.toFixed(1)} px`
+            }
+            state={summary.movementState}
+          />
+          <EvidenceRow
+            label="最大轮廓面积变化"
+            value={
+              summary.maxAreaDeltaPercent === null
+                ? "不适用"
+                : `最大 ${summary.maxAreaDeltaPercent.toFixed(1)}% / 阈值 28.0%`
+            }
+            state={summary.areaState}
+          />
+        </dl>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/frame-timeline.tsx b/frontend/src/pages/playtest/workbench/frame-timeline.tsx
new file mode 100644
index 0000000..759b748
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/frame-timeline.tsx
@@ -0,0 +1,68 @@
+import type { PreviewSequence } from "./model/types";
+
+export interface FrameTimelineProps {
+  sequence: PreviewSequence | null;
+  currentFrameIndex: number;
+  onSelectFrame(index: number): void;
+}
+
+export function FrameTimeline({ sequence, currentFrameIndex, onSelectFrame }: FrameTimelineProps) {
+  const frames = sequence?.frames ?? [];
+
+  return (
+    <section
+      aria-label="逐帧时间线"
+      className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
+    >
+      <header className="mb-3 flex items-center justify-between gap-4">
+        <span>
+          <strong className="block text-xs">逐帧预览</strong>
+          <small className="text-[10px] text-slate-400">点击帧定位；Playtest 不写入审核结论</small>
+        </span>
+        <span className="text-[10px] font-semibold text-emerald-900">READ ONLY</span>
+      </header>
+      {frames.length === 0 ? (
+        <p className="rounded-lg border border-dashed border-slate-300 p-4 text-sm text-slate-500">
+          当前方向没有帧
+        </p>
+      ) : (
+        <div className="flex gap-2 overflow-x-auto pb-1">
+          {frames.map((frame, index) => (
+            <button
+              key={`${frame.imageUrl}-${index}`}
+              type="button"
+              aria-label={`第 ${index + 1} 帧`}
+              aria-pressed={index === currentFrameIndex}
+              onClick={() => onSelectFrame(index)}
+              className={`w-28 shrink-0 overflow-hidden rounded-lg border p-1 text-left transition-colors ${
+                index === currentFrameIndex
+                  ? "border-emerald-900 bg-emerald-50"
+                  : "border-slate-200 bg-slate-50 hover:border-slate-400"
+              }`}
+            >
+              <span className="grid aspect-square place-items-center rounded-md bg-white">
+                <img
+                  src={frame.imageUrl}
+                  alt=""
+                  className="h-full w-full object-contain p-1 [image-rendering:pixelated]"
+                />
+              </span>
+              <span className="mt-1.5 block px-1 text-[10px]">
+                <strong className="block">#{String(index + 1).padStart(2, "0")}</strong>
+                <span className="mt-1 flex flex-wrap gap-1 text-[9px] text-slate-500">
+                  {frame.keyFrame ? (
+                    <span className="rounded bg-amber-100 px-1 text-amber-800">关键帧</span>
+                  ) : null}
+                  <span>QC: {frame.qc}</span>
+                  {frame.rejected ? (
+                    <span className="rounded bg-rose-100 px-1 text-rose-700">已驳回</span>
+                  ) : null}
+                </span>
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/index.test.tsx b/frontend/src/pages/playtest/workbench/index.test.tsx
new file mode 100644
index 0000000..230d2b5
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/index.test.tsx
@@ -0,0 +1,598 @@
+/** @vitest-environment jsdom */
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { Character } from "@/entities/character";
+
+import type { FrameGeometryResult } from "./analysis/sequence-evidence";
+import { PlaytestWorkbench } from "./index";
+
+const readImageGeometry = vi.hoisted(() => vi.fn());
+
+vi.mock("./analysis/image-geometry", () => ({ readImageGeometry }));
+
+const character = {
+  id: "character-1",
+  projectId: "project-1",
+  name: "Aster",
+  createdAt: "2026-07-30T00:00:00.000Z",
+  updatedAt: "2026-07-30T00:00:00.000Z",
+  outfits: [
+    {
+      id: "outfit-1",
+      characterId: "character-1",
+      name: "Explorer",
+      candidateCharacterTemplates: [],
+      characterTemplateUrl: "https://cdn.example.test/aster.png",
+      baseFrames: [{ direction: "south", imageUrl: "https://cdn.example.test/base.png" }],
+      actions: [
+        {
+          id: "walk",
+          outfitId: "outfit-1",
+          name: "Walk",
+          source: "action_template",
+          type: "walk",
+          status: "confirmed",
+          fps: 8,
+          sequences: [
+            {
+              direction: "south",
+              keyFrameIndex: 0,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/walk-01.png",
+                  durationMs: 125,
+                  rootMotion: { dx: 2, dy: 1 },
+                  qc: "passed",
+                  rejected: false,
+                },
+              ],
+            },
+            {
+              direction: "north",
+              keyFrameIndex: 1,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/walk-north-01.png",
+                  durationMs: 100,
+                  rootMotion: null,
+                  qc: "passed",
+                  rejected: false,
+                },
+                {
+                  imageUrl: "https://cdn.example.test/walk-north-02.png",
+                  durationMs: 100,
+                  rootMotion: { dx: 0, dy: 2 },
+                  qc: "pending",
+                  rejected: false,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: "jump",
+          outfitId: "outfit-1",
+          name: "Jump",
+          source: "action_template",
+          type: "jump",
+          status: "confirmed",
+          fps: 8,
+          sequences: [
+            {
+              direction: "south",
+              keyFrameIndex: 0,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/jump-01.png",
+                  durationMs: 125,
+                  rootMotion: { dx: 0, dy: 3 },
+                  qc: "passed",
+                  rejected: false,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: "crouch",
+          outfitId: "outfit-1",
+          name: "Crouch",
+          source: "action_template",
+          type: "crouch",
+          status: "confirmed",
+          fps: 8,
+          sequences: [
+            {
+              direction: "south",
+              keyFrameIndex: 0,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/crouch-01.png",
+                  durationMs: 125,
+                  rootMotion: null,
+                  qc: "passed",
+                  rejected: false,
+                },
+                {
+                  imageUrl: "https://cdn.example.test/crouch-02.png",
+                  durationMs: 125,
+                  rootMotion: null,
+                  qc: "passed",
+                  rejected: false,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+} as unknown as Character;
+
+function measuredGeometry(imageUrl: string): FrameGeometryResult {
+  const second = imageUrl.includes("north-02");
+  return {
+    status: "ready",
+    geometry: {
+      width: 256,
+      height: 256,
+      bounds: { left: 80, top: 30, right: 175, bottom: 236, width: 96, height: 207 },
+      centroid: { x: second ? 3 : 0, y: second ? 14 : 10 },
+      footY: 236,
+      subjectHeight: 207,
+      opaquePixels: 12_000,
+      coverageRatio: 12_000 / (256 * 256),
+    },
+  };
+}
+
+beforeEach(() => {
+  readImageGeometry.mockReset();
+  readImageGeometry.mockImplementation(async (imageUrl: string) => measuredGeometry(imageUrl));
+  vi.stubGlobal("requestAnimationFrame", () => 1);
+  vi.stubGlobal("cancelAnimationFrame", () => undefined);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe("PlaytestWorkbench", () => {
+  it("renders the unified read-only workbench regions without production mutation controls", () => {
+    // Catches a return to a mode switch that hides any part of the single review workbench.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    expect(screen.getByRole("main", { name: "Playtest" })).toBeTruthy();
+    expect(screen.queryByRole("group", { name: "Playtest 模式" })).toBeNull();
+    expect(screen.getByRole("navigation", { name: "动作列表" })).toBeTruthy();
+    expect(screen.getByRole("region", { name: "动画预览舞台" })).toBeTruthy();
+    expect(screen.getByRole("group", { name: "播放控制" })).toBeTruthy();
+    expect(screen.getByRole("region", { name: "逐帧时间线" })).toBeTruthy();
+    expect(screen.getByRole("complementary", { name: "资产检查器" })).toBeTruthy();
+    expect(screen.getByRole("region", { name: "自动审核依据" })).toBeTruthy();
+    expect(screen.getByText("未提交后端")).toBeTruthy();
+    expect(screen.queryByText("重新生成")).toBeNull();
+    expect(screen.queryByText("通过此帧")).toBeNull();
+    expect(screen.queryByText("修改动作")).toBeNull();
+    expect(screen.queryByText("导出门禁")).toBeNull();
+  });
+
+  it("collapses the action sidebar to give the stage more horizontal space", () => {
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    const navigation = screen.getByRole("navigation", { name: "动作列表" });
+    const layout = navigation.parentElement;
+    expect(layout?.className).toContain("190px");
+    expect(within(navigation).getByRole("complementary", { name: "动作列表" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "收起动作栏" }));
+
+    expect(layout?.className).toContain("48px");
+    expect(within(navigation).queryByRole("complementary", { name: "动作列表" })).toBeNull();
+    expect(screen.getByRole("button", { name: "展开动作栏" })).toBeTruthy();
+  });
+
+  it("keeps the action list, stage workbench and tool rail aligned to one shared bottom edge", () => {
+    // Catches the tall inspector extending the grid while the left and middle columns end in blank space.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    const navigation = screen.getByRole("navigation", { name: "动作列表" });
+    const layout = navigation.parentElement;
+    const stageWorkbench = screen.getByRole("region", { name: "调试工作台" });
+    const toolRail = screen.getByRole("complementary", { name: "Playtest 工具栏" });
+
+    expect(layout?.className).toContain("xl:h-[calc(100vh-128px)]");
+    expect(navigation.className).toContain("h-full");
+    expect(stageWorkbench.className).toContain("h-full");
+    expect(toolRail.className).toContain("h-full");
+    expect(within(toolRail).getByRole("tabpanel", { name: "帧检查" }).className).toContain(
+      "overflow-y-auto",
+    );
+  });
+
+  it("renders only the current actor image without neighbouring frame ghosts", () => {
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    const stage = screen.getByRole("region", { name: "动画预览舞台" });
+    expect(within(stage).getAllByRole("img")).toHaveLength(1);
+    expect(within(stage).getByRole("img", { name: "角色动画预览" })).toBeTruthy();
+  });
+
+  it("shows measured drift, expected root increment and composed motion for the selected frame", async () => {
+    // Catches the Workbench computing evidence but failing to connect the selected frame to the Inspector.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+    fireEvent.click(screen.getByRole("button", { name: "north" }));
+
+    await waitFor(() => expect(screen.getByText("自动审核依据")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button", { name: "第 2 帧" }));
+
+    const evidence = screen.getByRole("region", { name: "自动审核依据" });
+    expect(within(evidence).getByText("x +3.0 px，y +4.0 px，距离 5.0 px")).toBeTruthy();
+    expect(within(evidence).getByText("x +0.0 px，y +2.0 px，距离 2.0 px")).toBeTruthy();
+    expect(within(evidence).getByText("x +3.0 px，y -2.0 px，距离 3.6 px")).toBeTruthy();
+
+    const inspector = screen.getByRole("complementary", { name: "资产检查器" });
+    expect(within(inspector).getByText("预期根位移")).toBeTruthy();
+    expect(within(inspector).getByText("画面内额外漂移")).toBeTruthy();
+  });
+
+  it("keeps review controls usable when image evidence is unavailable", async () => {
+    // Catches a CORS analysis failure disabling playback or masquerading as a QC failure.
+    readImageGeometry.mockResolvedValue({
+      status: "unavailable",
+      reason: "图片跨域，无法计算像素",
+    });
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+    await waitFor(() => expect(screen.getByText("无法计算：图片跨域，无法计算像素")).toBeTruthy());
+    expect((screen.getByRole("button", { name: "播放" }) as HTMLButtonElement).disabled).toBe(
+      false,
+    );
+    expect(screen.getByText("QC")).toBeTruthy();
+  });
+
+  it("keeps a missing-outfit error inside the named Playtest landmark", () => {
+    // Catches the failure branch escaping the page's main landmark and becoming hard to navigate to.
+    render(<PlaytestWorkbench character={character} outfitId="missing" inspectionMode="demo" />);
+
+    const main = screen.getByRole("main", { name: "Playtest" });
+    expect(within(main).getByText("找不到指定造型，无法构造只读预览。")).toBeTruthy();
+  });
+
+  it("records demo acceptance locally and announces the current playback state", () => {
+    // Catches demo acceptance escaping the workbench and an inaccessible playback-state change.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+    expect(screen.getByText("Walk，第 1/1 帧，已暂停")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "播放" }));
+    expect(screen.getByText("Walk，第 1/1 帧，播放中")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "核验通过" }));
+    expect(screen.getByText("本地核验：通过")).toBeTruthy();
+    expect(screen.getByText("未提交后端")).toBeTruthy();
+  });
+
+  it("switches directions through the controller and resets playback-dependent views", () => {
+    // Catches direction controls that only repaint a label without pausing and resetting the real playback state.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+    fireEvent.click(screen.getByRole("button", { name: "north" }));
+    fireEvent.click(screen.getByRole("button", { name: "第 2 帧" }));
+    fireEvent.click(screen.getByRole("button", { name: "播放" }));
+    expect(screen.getByText("Walk，第 2/2 帧，播放中")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "south" }));
+
+    const inspector = screen.getByRole("complementary", { name: "资产检查器" });
+    expect(within(inspector).getByText("south")).toBeTruthy();
+    expect(within(inspector).getByText("1 / 1")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "第 2 帧" })).toBeNull();
+    expect(screen.getByText("Walk，第 1/1 帧，已暂停")).toBeTruthy();
+  });
+
+  it("routes workbench keyboard shortcuts into playback and announces the result politely", () => {
+    // Catches the composed Workbench omitting the real keyboard hook or leaving its state changes unannounced.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+    fireEvent.click(screen.getByRole("button", { name: "north" }));
+    fireEvent.keyDown(window, { key: "ArrowRight" });
+
+    const liveRegion = document.querySelector('[aria-live="polite"]');
+    expect(liveRegion).not.toBeNull();
+    expect(liveRegion?.textContent).toBe("Walk，第 2/2 帧，已暂停");
+
+    fireEvent.keyDown(window, { key: " " });
+    expect(liveRegion?.textContent).toBe("Walk，第 2/2 帧，播放中");
+  });
+
+  it("does not announce every automatically timed frame", () => {
+    // Catches 100ms playback ticks flooding the polite live region while visual playback continues.
+    vi.useFakeTimers();
+    try {
+      render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+      fireEvent.click(screen.getByRole("button", { name: "north" }));
+      fireEvent.click(screen.getByRole("button", { name: "播放" }));
+
+      const liveRegion = document.querySelector('[aria-live="polite"]');
+      expect(liveRegion?.textContent).toBe("Walk，第 1/2 帧，播放中");
+
+      act(() => vi.advanceTimersByTime(100));
+
+      expect(screen.getByRole("button", { name: "第 2 帧" }).getAttribute("aria-pressed")).toBe(
+        "true",
+      );
+      expect(liveRegion?.textContent).toBe("Walk，第 1/2 帧，播放中");
+    } finally {
+      cleanup();
+      vi.useRealTimers();
+    }
+  });
+
+  it("plays Walk frames only while paused A/D is held", () => {
+    // Catches A/D sliding one static image instead of driving the shared Walk frame controller.
+    vi.useFakeTimers();
+    try {
+      render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+      fireEvent.click(screen.getByRole("button", { name: "north" }));
+      fireEvent.keyDown(window, { key: "d" });
+
+      const actor = screen.getByAltText("角色动画预览");
+      expect(actor.style.transform).toContain("scaleX(1)");
+      expect(screen.getByRole("button", { name: "暂停" })).toBeTruthy();
+
+      act(() => vi.advanceTimersByTime(100));
+      expect(screen.getByRole("button", { name: "第 2 帧" }).getAttribute("aria-pressed")).toBe(
+        "true",
+      );
+      expect(actor.getAttribute("src")).toBe("https://cdn.example.test/walk-north-02.png");
+
+      fireEvent.keyUp(window, { key: "d" });
+      expect(screen.getByRole("button", { name: "播放" })).toBeTruthy();
+    } finally {
+      cleanup();
+      vi.useRealTimers();
+    }
+  });
+
+  it("plays frames with A/D after the user pauses through the focused playback button", () => {
+    // Reproduces the browser path where clicking Pause leaves keyboard focus on that button.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    const playButton = screen.getByRole("button", { name: "播放" });
+    fireEvent.click(playButton);
+    const pauseButton = screen.getByRole("button", { name: "暂停" });
+    pauseButton.focus();
+    fireEvent.click(pauseButton);
+
+    const focusedPlayButton = screen.getByRole("button", { name: "播放" });
+    focusedPlayButton.focus();
+    fireEvent.keyDown(focusedPlayButton, { key: "d" });
+
+    expect(screen.getByRole("button", { name: "暂停" })).toBeTruthy();
+    fireEvent.keyUp(focusedPlayButton, { key: "d" });
+    expect(screen.getByRole("button", { name: "播放" })).toBeTruthy();
+  });
+
+  it("announces D facing once without letting key repeat replace its start frame", () => {
+    // Catches a repeated D keydown moving the live-region snapshot to each automatically advanced frame.
+    vi.useFakeTimers();
+    try {
+      render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+      fireEvent.click(screen.getByRole("button", { name: "north" }));
+      fireEvent.click(screen.getByRole("button", { name: "播放" }));
+      fireEvent.keyDown(window, { key: "d" });
+
+      const liveRegion = document.querySelector('[aria-live="polite"]');
+      expect(liveRegion?.textContent).toBe("Walk，第 1/2 帧，播放中，面向右");
+
+      act(() => vi.advanceTimersByTime(100));
+
+      expect(screen.getByRole("button", { name: "第 2 帧" }).getAttribute("aria-pressed")).toBe(
+        "true",
+      );
+      fireEvent.keyDown(window, { key: "d", repeat: true });
+      expect(liveRegion?.textContent).toBe("Walk，第 1/2 帧，播放中，面向右");
+
+      fireEvent.keyDown(window, { key: "a", repeat: true });
+      expect(liveRegion?.textContent).toBe("Walk，第 1/2 帧，播放中，面向左");
+    } finally {
+      cleanup();
+      vi.useRealTimers();
+    }
+  });
+
+  it("does not rebuild the preview model for playback-only state changes", () => {
+    // Catches frame navigation re-running the Character-to-preview conversion on every render.
+    const observedOutfit = { ...character.outfits[0] };
+    const actions = observedOutfit.actions;
+    let actionsReadCount = 0;
+    Object.defineProperty(observedOutfit, "actions", {
+      configurable: true,
+      get: () => {
+        actionsReadCount += 1;
+        return actions;
+      },
+    });
+    const observedCharacter: Character = { ...character, outfits: [observedOutfit] };
+
+    render(
+      <PlaytestWorkbench character={observedCharacter} outfitId="outfit-1" inspectionMode="demo" />,
+    );
+    const readsAfterInitialModel = actionsReadCount;
+
+    fireEvent.click(screen.getByRole("button", { name: "north" }));
+    fireEvent.keyDown(window, { key: "ArrowRight" });
+
+    expect(actionsReadCount).toBe(readsAfterInitialModel);
+  });
+
+  it("uses D to continue Walk playback from a non-walk action in the unified controller", async () => {
+    // Catches D remaining frame navigation instead of continuing the shared controller with Walk.
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+    fireEvent.keyDown(window, { key: "w" });
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: /^Jump/ }).getAttribute("aria-pressed")).toBe(
+        "true",
+      ),
+    );
+
+    fireEvent.keyDown(window, { key: "d" });
+    expect(screen.getByRole("button", { name: /^Walk/ }).getAttribute("aria-pressed")).toBe("true");
+    expect(screen.getByRole("button", { name: "暂停" })).toBeTruthy();
+    expect(
+      within(screen.getByRole("complementary", { name: "资产检查器" })).getByText("Walk"),
+    ).toBeTruthy();
+  });
+
+  it("keeps the playing Walk frame and accumulated offset when A flips its stage facing", () => {
+    // Catches a direction change recreating the controller state and resetting its current frame.
+    vi.useFakeTimers();
+    try {
+      render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+      fireEvent.click(screen.getByRole("button", { name: "north" }));
+      fireEvent.click(screen.getByRole("button", { name: "播放" }));
+      act(() => vi.advanceTimersByTime(100));
+
+      expect(screen.getByAltText("角色动画预览").style.transform).toContain("translate(0px, -2px)");
+      fireEvent.keyDown(window, { key: "a" });
+      expect(screen.getByAltText("角色动画预览").style.transform).toContain("scaleX(-1)");
+      fireEvent.keyDown(window, { key: "a", repeat: true });
+
+      expect(screen.getByRole("button", { name: /^Walk/ }).getAttribute("aria-pressed")).toBe(
+        "true",
+      );
+      expect(screen.getByRole("button", { name: "第 2 帧" }).getAttribute("aria-pressed")).toBe(
+        "true",
+      );
+      expect(screen.getByRole("button", { name: "暂停" })).toBeTruthy();
+      expect(screen.getByAltText("角色动画预览").style.transform).toContain("translate(0px, -2px)");
+      expect(screen.getByAltText("角色动画预览").style.transform).toContain("scaleX(-1)");
+    } finally {
+      cleanup();
+      vi.useRealTimers();
+    }
+  });
+
+  it("keeps the current action when Walk data are unavailable", () => {
+    // Catches A/D selecting an unrelated fallback action when no playable Walk exists.
+    const withoutWalk: Character = {
+      ...character,
+      outfits: [{ ...character.outfits[0], actions: [character.outfits[0].actions[1]] }],
+    };
+    render(<PlaytestWorkbench character={withoutWalk} outfitId="outfit-1" inspectionMode="demo" />);
+    const liveRegion = document.querySelector('[aria-live="polite"]');
+    const announcementBefore = liveRegion?.textContent;
+    const transformBefore = screen.getByAltText("角色动画预览").style.transform;
+
+    fireEvent.keyDown(window, { key: "a" });
+    fireEvent.keyDown(window, { key: "d" });
+
+    expect(screen.getByRole("button", { name: /^Jump/ }).getAttribute("aria-pressed")).toBeTruthy();
+    expect(liveRegion?.textContent).toBe(announcementBefore);
+    expect(screen.getByAltText("角色动画预览").style.transform).toBe(transformBefore);
+  });
+
+  it("keeps the current action when jump and crouch data are unavailable", () => {
+    // Catches unavailable typed shortcuts resetting playback to an unrelated default action.
+    const withoutJumpAndCrouch: Character = {
+      ...character,
+      outfits: [{ ...character.outfits[0], actions: [character.outfits[0].actions[0]] }],
+    };
+    render(
+      <PlaytestWorkbench
+        character={withoutJumpAndCrouch}
+        outfitId="outfit-1"
+        inspectionMode="demo"
+      />,
+    );
+
+    fireEvent.keyDown(window, { key: "w" });
+    fireEvent.keyDown(window, { key: "s" });
+
+    expect(screen.getByRole("button", { name: /^Walk/ }).getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("forwards persisted inspection conclusions without modifying the character", () => {
+    // Catches a persisted outcome being swallowed locally instead of being handed to the supplied inspection boundary.
+    const onRecordStatus = vi.fn();
+
+    render(
+      <PlaytestWorkbench
+        character={character}
+        outfitId="outfit-1"
+        inspectionMode="persisted"
+        inspectionStatus="passed"
+        onRecordStatus={onRecordStatus}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "发现问题" }));
+    expect(onRecordStatus).toHaveBeenCalledWith("issues_found");
+  });
+
+  it("switches one right-side panel without changing playback selection and keeps manual issues in session", () => {
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs.map((tab) => tab.textContent)).toEqual(["帧检查", "问题记录", "资产导出"]);
+    const selectedAction = screen.getByRole("button", { name: /^Walk/ });
+    const selectedFrame = screen.getByRole("button", { name: "第 1 帧" });
+    const retainedExportPanel = screen.getByRole("region", { name: "资产导出", hidden: true });
+
+    fireEvent.click(screen.getByRole("tab", { name: "问题记录" }));
+    expect(screen.getByRole("region", { name: "问题记录" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "标记当前帧问题" }));
+    expect(screen.getByText("人工")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("tab", { name: "帧检查" }));
+    expect(screen.getByRole("complementary", { name: "资产检查器" })).toBeTruthy();
+    expect(selectedAction.getAttribute("aria-pressed")).toBe("true");
+    expect(selectedFrame.getAttribute("aria-pressed")).toBe("true");
+
+    fireEvent.click(screen.getByRole("tab", { name: "问题记录" }));
+    expect(screen.getByText("人工")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("tab", { name: "资产导出" }));
+    expect(screen.getByRole("button", { name: "导出游戏资产包" })).toBeTruthy();
+    expect(screen.getByRole("region", { name: "资产导出" })).toBe(retainedExportPanel);
+    expect(selectedAction.getAttribute("aria-pressed")).toBe("true");
+    expect(selectedFrame.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("links tabs to retained panels and supports arrow-key navigation", () => {
+    render(<PlaytestWorkbench character={character} outfitId="outfit-1" inspectionMode="demo" />);
+
+    const inspectTab = screen.getByRole("tab", { name: "帧检查" });
+    const auditTab = screen.getByRole("tab", { name: "问题记录" });
+    expect(inspectTab.getAttribute("aria-controls")).toBe("playtest-tool-panel-inspect");
+    expect(inspectTab.tabIndex).toBe(0);
+    expect(auditTab.tabIndex).toBe(-1);
+
+    fireEvent.keyDown(inspectTab, { key: "ArrowRight" });
+
+    expect(auditTab.getAttribute("aria-selected")).toBe("true");
+    expect(auditTab.tabIndex).toBe(0);
+    expect(document.activeElement).toBe(auditTab);
+    const panel = screen.getByRole("tabpanel", { name: "问题记录" });
+    expect(panel.id).toBe("playtest-tool-panel-audit");
+    expect(panel.getAttribute("aria-labelledby")).toBe("playtest-tool-tab-audit");
+  });
+
+  it("exposes persisted saving and failure states to assistive technology", () => {
+    // Catches an in-flight or failed inspection save being conveyed only through button styling and visual color.
+    render(
+      <PlaytestWorkbench
+        character={character}
+        outfitId="outfit-1"
+        inspectionMode="persisted"
+        saving
+        saveError="网络连接失败"
+      />,
+    );
+
+    const acceptance = screen.getByRole("region", { name: "核验状态" });
+    expect(acceptance.getAttribute("aria-busy")).toBe("true");
+    expect(within(acceptance).getByRole("status").textContent).toContain("正在保存");
+    const alert = within(acceptance).getByRole("alert");
+    expect(alert.getAttribute("aria-live")).toBe("assertive");
+    expect(alert.textContent).toContain("网络连接失败");
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/index.tsx b/frontend/src/pages/playtest/workbench/index.tsx
new file mode 100644
index 0000000..cc54c0b
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/index.tsx
@@ -0,0 +1,414 @@
+import { useCallback, useMemo, useReducer, useRef, useState, type KeyboardEvent } from "react";
+
+import type { Character } from "@/entities/character";
+import type { PlaytestInspectionStatus } from "@/entities/playtest-inspection";
+
+import { ActionSelector } from "./action-selector";
+import { Acceptance } from "./acceptance";
+import { useFrameReviewEvidence } from "./analysis/use-frame-review-evidence";
+import { AnimationStage } from "./animation-stage";
+import { AuditPanel } from "./audit/audit-panel";
+import { reduceAuditSession } from "./audit/audit-session";
+import { FrameTimeline } from "./frame-timeline";
+import { ExportPanel } from "./export/export-panel";
+import { Inspector } from "./inspector";
+import { createPreviewModel } from "./model/create-preview-model";
+import type { PreviewAction } from "./model/types";
+import { PlaybackControls } from "./playback-controls";
+import { usePlaybackController } from "./playback/use-playback-controller";
+import { useStageMotion } from "./stage-motion";
+import { StatusPanel } from "./status-panel";
+import { usePlaytestKeyboard } from "./use-playtest-keyboard";
+
+export interface PlaytestWorkbenchProps {
+  character: Character;
+  outfitId: string;
+  initialActionId?: string | null;
+  source?: { runId: string; revisionId: string } | null;
+  inspectionStatus?: PlaytestInspectionStatus | null;
+  inspectionMode: "demo" | "persisted";
+  saving?: boolean;
+  saveError?: string | null;
+  onRecordStatus?(status: PlaytestInspectionStatus): void;
+}
+
+const EMPTY_PREVIEW_ACTIONS: readonly PreviewAction[] = [];
+const RIGHT_PANELS = [
+  ["inspect", "帧检查"],
+  ["audit", "问题记录"],
+  ["export", "资产导出"],
+] as const;
+type RightPanel = (typeof RIGHT_PANELS)[number][0];
+
+export function PlaytestWorkbench({
+  character,
+  outfitId,
+  initialActionId = null,
+  source = null,
+  inspectionStatus = null,
+  inspectionMode,
+  saving = false,
+  saveError = null,
+  onRecordStatus,
+}: PlaytestWorkbenchProps) {
+  const previewResult = useMemo(
+    () => createPreviewModel(character, outfitId),
+    [character, outfitId],
+  );
+  const preview = previewResult.ok ? previewResult.model : null;
+  const playback = usePlaybackController(
+    preview?.actions ?? EMPTY_PREVIEW_ACTIONS,
+    initialActionId,
+  );
+  const stageMotion = useStageMotion({
+    frame: playback.frame,
+    playing: playback.state.playing,
+    frameTick: playback.frameTick,
+    resetKey: `${character.id}:${outfitId}`,
+  });
+  const walkAvailable =
+    preview?.actions.some(
+      (action) =>
+        action.type === "walk" && action.sequences.some((sequence) => sequence.frames.length > 0),
+    ) ?? false;
+  const jumpAvailable =
+    preview?.actions.some(
+      (action) =>
+        action.type === "jump" && action.sequences.some((sequence) => sequence.frames.length > 0),
+    ) ?? false;
+  const crouchAvailable =
+    preview?.actions.some(
+      (action) =>
+        action.type === "crouch" && action.sequences.some((sequence) => sequence.frames.length > 0),
+    ) ?? false;
+  const reviewEvidence = useFrameReviewEvidence(playback.sequence, playback.action?.type ?? null);
+  const [demoInspectionStatus, setDemoInspectionStatus] = useState<PlaytestInspectionStatus | null>(
+    null,
+  );
+  const [playbackStartFrameIndex, setPlaybackStartFrameIndex] = useState<number | null>(null);
+  const [announcedFacing, setAnnouncedFacing] = useState<"left" | "right" | null>(null);
+  const [activeRightPanel, setActiveRightPanel] = useState<RightPanel>("inspect");
+  const [actionSidebarCollapsed, setActionSidebarCollapsed] = useState(false);
+  const [manualIssues, dispatchAudit] = useReducer(reduceAuditSession, []);
+  const horizontalHoldStartedPaused = useRef<boolean | null>(null);
+
+  const frameCount = playback.sequence?.frames.length ?? 0;
+  const currentInspectionStatus =
+    inspectionMode === "demo" ? demoInspectionStatus : inspectionStatus;
+  const announcedFrameIndex =
+    playback.state.playing && playbackStartFrameIndex !== null
+      ? playbackStartFrameIndex
+      : playback.state.frameIndex;
+  const playbackAnnouncement = `${playback.action?.name ?? "未选择动作"}，第 ${
+    frameCount === 0 ? 0 : announcedFrameIndex + 1
+  }/${frameCount} 帧，${playback.state.playing ? "播放中" : "已暂停"}${
+    announcedFacing === null ? "" : `，面向${announcedFacing === "left" ? "左" : "右"}`
+  }`;
+  const automaticFindings =
+    reviewEvidence.status === "ready" ? reviewEvidence.evidence.findings : [];
+  const qualityIssueCount = automaticFindings.length + manualIssues.length;
+
+  const movePanelFocus = (event: KeyboardEvent<HTMLButtonElement>, current: RightPanel) => {
+    const currentIndex = RIGHT_PANELS.findIndex(([value]) => value === current);
+    let nextIndex: number | null = null;
+    if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % RIGHT_PANELS.length;
+    else if (event.key === "ArrowLeft")
+      nextIndex = (currentIndex - 1 + RIGHT_PANELS.length) % RIGHT_PANELS.length;
+    else if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = RIGHT_PANELS.length - 1;
+    if (nextIndex === null) return;
+
+    event.preventDefault();
+    const nextPanel = RIGHT_PANELS[nextIndex]?.[0];
+    if (nextPanel === undefined) return;
+    setActiveRightPanel(nextPanel);
+    document.getElementById(`playtest-tool-tab-${nextPanel}`)?.focus();
+  };
+
+  const togglePlaying = useCallback(() => {
+    if (!playback.state.playing) setPlaybackStartFrameIndex(playback.state.frameIndex);
+    playback.togglePlaying();
+  }, [playback.state.frameIndex, playback.state.playing, playback.togglePlaying]);
+
+  const keyboardCommands = useMemo(
+    () => ({
+      togglePlaying,
+      previousFrame: playback.previousFrame,
+      nextFrame: playback.nextFrame,
+      firstFrame: playback.firstFrame,
+      lastFrame: playback.lastFrame,
+      toggleLoop: playback.toggleLoop,
+      playLeft: () => {
+        if (!walkAvailable) return;
+        if (horizontalHoldStartedPaused.current === null) {
+          horizontalHoldStartedPaused.current = !playback.state.playing;
+        }
+        stageMotion.setMirrored(true);
+        setAnnouncedFacing("left");
+        if (!playback.state.playing) setPlaybackStartFrameIndex(playback.state.frameIndex);
+        if (playback.action?.type !== "walk") setPlaybackStartFrameIndex(0);
+        playback.continueActionType("walk");
+      },
+      playRight: () => {
+        if (!walkAvailable) return;
+        if (horizontalHoldStartedPaused.current === null) {
+          horizontalHoldStartedPaused.current = !playback.state.playing;
+        }
+        stageMotion.setMirrored(false);
+        setAnnouncedFacing("right");
+        if (!playback.state.playing) setPlaybackStartFrameIndex(playback.state.frameIndex);
+        if (playback.action?.type !== "walk") setPlaybackStartFrameIndex(0);
+        playback.continueActionType("walk");
+      },
+      stopHorizontal: () => {
+        const shouldRestorePause = horizontalHoldStartedPaused.current === true;
+        horizontalHoldStartedPaused.current = null;
+        if (shouldRestorePause && playback.state.playing) playback.togglePlaying();
+      },
+      playJump: () => {
+        if (!jumpAvailable) return;
+        setPlaybackStartFrameIndex(0);
+        playback.playActionType("jump");
+      },
+      playCrouch: () => {
+        if (!crouchAvailable) return;
+        setPlaybackStartFrameIndex(0);
+        playback.playActionType("crouch");
+      },
+    }),
+    [
+      playback.firstFrame,
+      playback.lastFrame,
+      playback.nextFrame,
+      playback.previousFrame,
+      playback.playActionType,
+      playback.continueActionType,
+      playback.toggleLoop,
+      playback.action?.type,
+      playback.state.frameIndex,
+      playback.state.playing,
+      stageMotion.setMirrored,
+      togglePlaying,
+      walkAvailable,
+      jumpAvailable,
+      crouchAvailable,
+    ],
+  );
+  usePlaytestKeyboard(keyboardCommands, preview !== null);
+
+  const recordStatus = useCallback(
+    (status: PlaytestInspectionStatus) => {
+      if (inspectionMode === "demo") {
+        setDemoInspectionStatus(status);
+        return;
+      }
+      onRecordStatus?.(status);
+    },
+    [inspectionMode, onRecordStatus],
+  );
+
+  if (preview === null) {
+    return (
+      <main aria-label="Playtest">
+        <StatusPanel title="无法打开 Playtest" tone="warning">
+          找不到指定造型，无法构造只读预览。
+        </StatusPanel>
+      </main>
+    );
+  }
+
+  return (
+    <main aria-label="Playtest" className="mx-auto max-w-[1600px] space-y-4 p-4 text-slate-900">
+      <span aria-live="polite" className="sr-only">
+        {playbackAnnouncement}
+      </span>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <p className="text-[10px] font-semibold tracking-[0.18em] text-slate-400">PLAYTEST</p>
+          <h1 className="mt-1 text-xl font-semibold">
+            {preview.characterName} · {preview.outfitName}
+          </h1>
+        </div>
+        <p className="text-xs text-slate-500">只读预览，不写入角色、动作或帧</p>
+      </header>
+      <div
+        className={`grid items-stretch gap-4 xl:h-[calc(100vh-128px)] xl:min-h-[720px] xl:max-h-[880px] ${
+          actionSidebarCollapsed
+            ? "xl:grid-cols-[48px_minmax(0,1fr)_300px]"
+            : "xl:grid-cols-[190px_minmax(0,1fr)_300px]"
+        }`}
+      >
+        <nav
+          aria-label="动作列表"
+          className={
+            actionSidebarCollapsed ? "h-full min-h-0 w-12" : "flex h-full min-h-0 min-w-0 flex-col"
+          }
+        >
+          <button
+            type="button"
+            aria-label={actionSidebarCollapsed ? "展开动作栏" : "收起动作栏"}
+            aria-expanded={!actionSidebarCollapsed}
+            aria-controls="playtest-action-list"
+            onClick={() => setActionSidebarCollapsed((collapsed) => !collapsed)}
+            className="mb-2 grid h-10 w-full shrink-0 place-items-center rounded-lg border border-slate-300 bg-white text-lg font-semibold text-slate-600 shadow-sm hover:border-slate-500"
+          >
+            {actionSidebarCollapsed ? "›" : "‹"}
+          </button>
+          <div id="playtest-action-list" hidden={actionSidebarCollapsed} className="min-h-0 flex-1">
+            <ActionSelector
+              actions={preview.actions}
+              selectedActionId={playback.state.actionId}
+              onSelectAction={playback.selectAction}
+            />
+          </div>
+        </nav>
+        <section
+          aria-label="调试工作台"
+          className="flex h-full min-h-0 min-w-0 flex-col gap-4 overflow-hidden"
+        >
+          <div
+            role="group"
+            aria-label="方向选择"
+            className="flex flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
+          >
+            <span className="mr-1 text-xs font-semibold text-slate-500">方向</span>
+            {playback.action?.sequences.map((sequence) => (
+              <button
+                key={sequence.direction}
+                type="button"
+                aria-pressed={sequence.direction === playback.state.direction}
+                disabled={sequence.frames.length === 0}
+                onClick={() => playback.selectDirection(sequence.direction)}
+                className={`rounded-lg border px-3 py-2 text-xs font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+                  sequence.direction === playback.state.direction
+                    ? "border-emerald-900 bg-emerald-950 text-white"
+                    : "border-slate-200 bg-white text-slate-600 hover:border-slate-400"
+                }`}
+              >
+                {sequence.direction}
+              </button>
+            ))}
+          </div>
+          <div className="min-h-[320px] flex-1">
+            <AnimationStage
+              currentFrame={playback.frame}
+              motionOffset={stageMotion.offset}
+              mirrored={stageMotion.mirrored}
+              onHorizontalBoundsChange={stageMotion.setBounds}
+              showGrid
+              showChecker
+            />
+          </div>
+          <div role="group" aria-label="播放控制">
+            <PlaybackControls
+              playing={playback.state.playing}
+              loop={playback.state.loop}
+              frameIndex={playback.state.frameIndex}
+              frameCount={frameCount}
+              fps={playback.action?.fps ?? 0}
+              jumpAvailable={jumpAvailable}
+              crouchAvailable={crouchAvailable}
+              onFirstFrame={playback.firstFrame}
+              onPreviousFrame={playback.previousFrame}
+              onTogglePlaying={togglePlaying}
+              onNextFrame={playback.nextFrame}
+              onLastFrame={playback.lastFrame}
+              onToggleLoop={playback.toggleLoop}
+            />
+          </div>
+          <FrameTimeline
+            sequence={playback.sequence}
+            currentFrameIndex={playback.state.frameIndex}
+            onSelectFrame={playback.selectFrame}
+          />
+        </section>
+        <aside
+          aria-label="Playtest 工具栏"
+          className="flex h-full min-h-0 flex-col gap-4 overflow-hidden"
+        >
+          <div
+            role="tablist"
+            aria-label="Playtest 工具"
+            className="grid grid-cols-3 gap-1 rounded-xl border border-slate-200 bg-white p-1 shadow-sm"
+          >
+            {RIGHT_PANELS.map(([value, label]) => (
+              <button
+                key={value}
+                id={`playtest-tool-tab-${value}`}
+                type="button"
+                role="tab"
+                aria-selected={activeRightPanel === value}
+                aria-controls={`playtest-tool-panel-${value}`}
+                tabIndex={activeRightPanel === value ? 0 : -1}
+                onClick={() => setActiveRightPanel(value)}
+                onKeyDown={(event) => movePanelFocus(event, value)}
+                className={`rounded-lg px-2 py-2 text-[11px] font-semibold ${
+                  activeRightPanel === value
+                    ? "bg-slate-900 text-white"
+                    : "text-slate-500 hover:bg-slate-50"
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div
+            id="playtest-tool-panel-inspect"
+            role="tabpanel"
+            aria-labelledby="playtest-tool-tab-inspect"
+            hidden={activeRightPanel !== "inspect"}
+            className="min-h-0 flex-1 overflow-y-auto pr-1"
+          >
+            <Inspector
+              action={playback.action}
+              sequence={playback.sequence}
+              frame={playback.frame}
+              frameIndex={playback.state.frameIndex}
+              source={source}
+              inspectionStatus={currentInspectionStatus}
+              reviewEvidence={reviewEvidence}
+            />
+          </div>
+          <div
+            id="playtest-tool-panel-audit"
+            role="tabpanel"
+            aria-labelledby="playtest-tool-tab-audit"
+            hidden={activeRightPanel !== "audit"}
+            className="min-h-0 flex-1 overflow-y-auto pr-1"
+          >
+            <AuditPanel
+              actionId={playback.action?.id ?? null}
+              actionName={playback.action?.name ?? null}
+              direction={playback.sequence?.direction ?? null}
+              frameIndex={playback.state.frameIndex}
+              frame={playback.frame}
+              automaticFindings={automaticFindings}
+              issues={manualIssues}
+              onAdd={(issue) => dispatchAudit({ type: "add", issue })}
+              onUpdate={(id, category, note) =>
+                dispatchAudit({ type: "update", id, category, note })
+              }
+              onRemove={(id) => dispatchAudit({ type: "remove", id })}
+            />
+          </div>
+          <div
+            id="playtest-tool-panel-export"
+            role="tabpanel"
+            aria-labelledby="playtest-tool-tab-export"
+            hidden={activeRightPanel !== "export"}
+            className="min-h-0 flex-1 overflow-y-auto pr-1"
+          >
+            <ExportPanel model={preview} qualityIssueCount={qualityIssueCount} />
+          </div>
+          <Acceptance
+            inspectionMode={inspectionMode}
+            inspectionStatus={currentInspectionStatus}
+            saving={saving}
+            saveError={saveError}
+            onRecordStatus={recordStatus}
+          />
+        </aside>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/inspector.tsx b/frontend/src/pages/playtest/workbench/inspector.tsx
new file mode 100644
index 0000000..5d62d3d
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/inspector.tsx
@@ -0,0 +1,88 @@
+import type { PlaytestInspectionStatus } from "@/entities/playtest-inspection";
+
+import type { FrameReviewEvidenceState } from "./analysis/use-frame-review-evidence";
+import { FrameReviewEvidencePanel } from "./frame-review-evidence";
+import type { PreviewAction, PreviewFrame, PreviewSequence } from "./model/types";
+
+export interface InspectorProps {
+  action: PreviewAction | null;
+  sequence: PreviewSequence | null;
+  frame: PreviewFrame | null;
+  frameIndex: number;
+  source?: { runId: string; revisionId: string } | null;
+  inspectionStatus?: PlaytestInspectionStatus | null;
+  reviewEvidence?: FrameReviewEvidenceState | null;
+}
+
+function rootMotionText(frame: PreviewFrame | null): string {
+  if (frame?.rootMotion === null || frame === null) return "无";
+  return `x ${frame.rootMotion.dx}, y ${frame.rootMotion.dy}`;
+}
+
+export function Inspector({
+  action,
+  sequence,
+  frame,
+  frameIndex,
+  source = null,
+  inspectionStatus = null,
+  reviewEvidence = null,
+}: InspectorProps) {
+  const frameCount = sequence?.frames.length ?? 0;
+
+  return (
+    <aside aria-label="资产检查器" className="space-y-4">
+      <section className="space-y-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+        <header>
+          <p className="text-[10px] font-semibold tracking-[0.18em] text-slate-400">INSPECTOR</p>
+          <h2 className="mt-1 text-sm font-semibold text-slate-900">资产检查器</h2>
+        </header>
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-xs">
+          <dt className="text-slate-500">动作</dt>
+          <dd className="font-medium text-slate-900">{action?.name ?? "未选择"}</dd>
+          <dt className="text-slate-500">方向</dt>
+          <dd className="font-medium text-slate-900">{sequence?.direction ?? "—"}</dd>
+          <dt className="text-slate-500">帧序号</dt>
+          <dd className="font-medium text-slate-900">
+            {frameCount === 0 ? "0 / 0" : `${frameIndex + 1} / ${frameCount}`}
+          </dd>
+          <dt className="text-slate-500">时长</dt>
+          <dd className="font-medium text-slate-900">
+            {frame === null ? "—" : `${frame.durationMs} ms`}
+          </dd>
+          <dt className="text-slate-500">FPS</dt>
+          <dd className="font-medium text-slate-900">{action?.fps ?? "—"}</dd>
+          <dt className="text-slate-500">预期根位移</dt>
+          <dd className="font-medium text-slate-900">{rootMotionText(frame)}</dd>
+          <dt className="text-slate-500">QC</dt>
+          <dd className="font-medium text-slate-900">{frame?.qc ?? "—"}</dd>
+          <dt className="text-slate-500">关键帧</dt>
+          <dd className="font-medium text-slate-900">{frame?.keyFrame ? "是" : "否"}</dd>
+          {inspectionStatus !== null ? (
+            <>
+              <dt className="text-slate-500">最近核验</dt>
+              <dd className="font-medium text-slate-900">
+                {inspectionStatus === "passed" ? "通过" : "发现问题"}
+              </dd>
+            </>
+          ) : null}
+          {source !== null ? (
+            <>
+              <dt className="text-slate-500">流程来源</dt>
+              <dd className="break-all font-medium text-slate-900">
+                {source.runId} / {source.revisionId}
+              </dd>
+            </>
+          ) : null}
+        </dl>
+      </section>
+      {reviewEvidence !== null && action !== null ? (
+        <FrameReviewEvidencePanel
+          state={reviewEvidence}
+          frameIndex={frameIndex}
+          actionType={action.type}
+        />
+      ) : null}
+    </aside>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/model/create-preview-model.test.ts b/frontend/src/pages/playtest/workbench/model/create-preview-model.test.ts
new file mode 100644
index 0000000..ca3a70b
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/model/create-preview-model.test.ts
@@ -0,0 +1,157 @@
+import { describe, expect, it } from "vitest";
+
+import type { Character } from "../../../../entities";
+import { createPreviewModel } from "./create-preview-model";
+
+const character: Character = {
+  id: "character-1",
+  projectId: "project-1",
+  name: "Aster",
+  createdAt: "2026-07-30T00:00:00.000Z",
+  updatedAt: "2026-07-30T00:00:00.000Z",
+  outfits: [
+    {
+      id: "outfit-1",
+      characterId: "character-1",
+      name: "Explorer",
+      candidateCharacterTemplates: [],
+      characterTemplateUrl: "https://cdn.example.test/aster.png",
+      baseFrames: [
+        { direction: "south", imageUrl: "https://cdn.example.test/base-south.png" },
+        { direction: "north", imageUrl: "https://cdn.example.test/base-north.png" },
+      ],
+      actions: [
+        {
+          id: "walk",
+          outfitId: "outfit-1",
+          name: "Walk",
+          source: "action_template",
+          type: "walk",
+          status: "confirmed",
+          fps: 5,
+          sequences: [
+            {
+              direction: "south",
+              keyFrameIndex: 1,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/walk-south-0.png",
+                  durationMs: 125,
+                  rootMotion: { dx: 1, dy: 0 },
+                  qc: "passed",
+                  rejected: false,
+                },
+                {
+                  imageUrl: "https://cdn.example.test/walk-south-1.png",
+                  durationMs: null,
+                  rootMotion: null,
+                  qc: "failed",
+                  rejected: true,
+                },
+              ],
+            },
+            {
+              direction: "north",
+              keyFrameIndex: null,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/walk-north-0.png",
+                  durationMs: 0,
+                  rootMotion: { dx: 0, dy: 2 },
+                  qc: "pending",
+                  rejected: false,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: "idle",
+          outfitId: "outfit-1",
+          name: "Idle",
+          source: "custom",
+          type: "idle",
+          status: "candidate",
+          fps: 0,
+          sequences: [
+            {
+              direction: "default",
+              keyFrameIndex: 0,
+              frames: [
+                {
+                  imageUrl: "https://cdn.example.test/idle-0.png",
+                  durationMs: null,
+                  rootMotion: null,
+                  qc: "passed",
+                  rejected: false,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+describe("createPreviewModel", () => {
+  it("reports a missing outfit without constructing a preview model", () => {
+    expect(createPreviewModel(character, "missing-outfit")).toEqual({
+      ok: false,
+      reason: "outfit_not_found",
+    });
+  });
+
+  it("preserves action and direction order while deriving preview fields", () => {
+    const result = createPreviewModel(character, "outfit-1");
+
+    expect(result).toMatchObject({ ok: true });
+    if (!result.ok) throw new Error("expected preview model");
+
+    expect(result.model.actions.map((action) => action.id)).toEqual(["walk", "idle"]);
+    expect(result.model.actions[0].sequences.map((sequence) => sequence.direction)).toEqual([
+      "south",
+      "north",
+    ]);
+    expect(result.model).toMatchObject({
+      characterId: "character-1",
+      characterName: "Aster",
+      outfitId: "outfit-1",
+      outfitName: "Explorer",
+      characterTemplateUrl: "https://cdn.example.test/aster.png",
+      baseFrameCount: 2,
+    });
+  });
+
+  it("uses a positive frame duration before fps fallback and maps key frames", () => {
+    const result = createPreviewModel(character, "outfit-1");
+    if (!result.ok) throw new Error("expected preview model");
+
+    const [south, north] = result.model.actions[0].sequences;
+    expect(south.frames.map((frame) => frame.durationMs)).toEqual([125, 200]);
+    expect(south.frames.map((frame) => frame.keyFrame)).toEqual([false, true]);
+    expect(north.frames[0]).toMatchObject({
+      durationMs: 200,
+      keyFrame: false,
+      rootMotion: { dx: 0, dy: 2 },
+      qc: "pending",
+      rejected: false,
+    });
+  });
+
+  it("uses a 100ms display fallback for invalid fps without rewriting the action", () => {
+    const result = createPreviewModel(character, "outfit-1");
+    if (!result.ok) throw new Error("expected preview model");
+
+    expect(result.model.actions[1].sequences[0].frames[0].durationMs).toBe(100);
+    expect(character.outfits[0].actions[1].fps).toBe(0);
+  });
+
+  it("does not mutate the input character", () => {
+    const before = JSON.stringify(character);
+
+    createPreviewModel(character, "outfit-1");
+
+    expect(JSON.stringify(character)).toBe(before);
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/model/create-preview-model.ts b/frontend/src/pages/playtest/workbench/model/create-preview-model.ts
new file mode 100644
index 0000000..254da13
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/model/create-preview-model.ts
@@ -0,0 +1,78 @@
+import type { Action, Character, Frame } from "@/entities/character";
+
+import type {
+  PlaytestPreviewModel,
+  PreviewAction,
+  PreviewFrame,
+  PreviewModelResult,
+  PreviewSequence,
+} from "./types";
+
+const SAFE_DURATION_MS = 100;
+
+function getFallbackDurationMs(fps: Action["fps"]): number {
+  if (!Number.isFinite(fps) || fps <= 0) return SAFE_DURATION_MS;
+
+  const durationMs = Math.round(1000 / fps);
+  return durationMs > 0 ? durationMs : SAFE_DURATION_MS;
+}
+
+function createPreviewFrame(
+  frame: Frame,
+  frameIndex: number,
+  keyFrameIndex: number | null,
+  fallbackDurationMs: number,
+): PreviewFrame {
+  return {
+    imageUrl: frame.imageUrl,
+    durationMs:
+      frame.durationMs !== null && frame.durationMs > 0 ? frame.durationMs : fallbackDurationMs,
+    rootMotion: frame.rootMotion,
+    qc: frame.qc,
+    rejected: frame.rejected,
+    keyFrame: frameIndex === keyFrameIndex,
+  };
+}
+
+function createPreviewAction(action: Action): PreviewAction {
+  const fallbackDurationMs = getFallbackDurationMs(action.fps);
+
+  const sequences: readonly PreviewSequence[] = action.sequences.map((sequence) => ({
+    direction: sequence.direction,
+    frames: sequence.frames.map((frame, frameIndex) =>
+      createPreviewFrame(frame, frameIndex, sequence.keyFrameIndex, fallbackDurationMs),
+    ),
+  }));
+
+  return {
+    id: action.id,
+    name: action.name,
+    type: action.type,
+    status: action.status,
+    fps: action.fps,
+    sequences,
+  };
+}
+
+function createModel(
+  character: Character,
+  outfit: Character["outfits"][number],
+): PlaytestPreviewModel {
+  return {
+    characterId: character.id,
+    characterName: character.name,
+    outfitId: outfit.id,
+    outfitName: outfit.name,
+    characterTemplateUrl: outfit.characterTemplateUrl,
+    baseFrameCount: outfit.baseFrames.length,
+    actions: outfit.actions.map(createPreviewAction),
+  };
+}
+
+export function createPreviewModel(character: Character, outfitId: string): PreviewModelResult {
+  const outfit = character.outfits.find((candidate) => candidate.id === outfitId);
+
+  if (!outfit) return { ok: false, reason: "outfit_not_found" };
+
+  return { ok: true, model: createModel(character, outfit) };
+}
diff --git a/frontend/src/pages/playtest/workbench/model/types.ts b/frontend/src/pages/playtest/workbench/model/types.ts
new file mode 100644
index 0000000..35c0a31
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/model/types.ts
@@ -0,0 +1,47 @@
+import type { ActionStatus, ActionType, Character, Frame } from "@/entities/character";
+
+/**
+ * Playtest 需要识别的控制动作。
+ *
+ * `crouch` 暂时只属于预览控制语义，不借此修改 Character 的公共数据合同。
+ */
+export type PlaytestActionType = ActionType | "crouch";
+export type PlaytestDirection =
+  Character["outfits"][number]["actions"][number]["sequences"][number]["direction"];
+
+export interface PreviewFrame {
+  imageUrl: string;
+  durationMs: number;
+  rootMotion: Frame["rootMotion"];
+  qc: Frame["qc"];
+  rejected: boolean;
+  keyFrame: boolean;
+}
+
+export interface PreviewSequence {
+  direction: PlaytestDirection;
+  frames: readonly PreviewFrame[];
+}
+
+export interface PreviewAction {
+  id: string;
+  name: string;
+  type: PlaytestActionType;
+  status: ActionStatus;
+  fps: number;
+  sequences: readonly PreviewSequence[];
+}
+
+export interface PlaytestPreviewModel {
+  characterId: string;
+  characterName: string;
+  outfitId: string;
+  outfitName: string;
+  characterTemplateUrl: string | null;
+  baseFrameCount: number;
+  actions: readonly PreviewAction[];
+}
+
+export type PreviewModelResult =
+  | { ok: true; model: PlaytestPreviewModel }
+  | { ok: false; reason: "outfit_not_found" };
diff --git a/frontend/src/pages/playtest/workbench/playback-controls.tsx b/frontend/src/pages/playtest/workbench/playback-controls.tsx
new file mode 100644
index 0000000..a0aef58
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/playback-controls.tsx
@@ -0,0 +1,123 @@
+export interface PlaybackControlsProps {
+  playing: boolean;
+  loop: boolean;
+  frameIndex: number;
+  frameCount: number;
+  fps: number;
+  jumpAvailable: boolean;
+  crouchAvailable: boolean;
+  onFirstFrame(): void;
+  onPreviousFrame(): void;
+  onTogglePlaying(): void;
+  onNextFrame(): void;
+  onLastFrame(): void;
+  onToggleLoop(): void;
+}
+
+function AvailabilityBadge({ available, label }: { available: boolean; label: string }) {
+  return (
+    <span
+      className={`rounded-full border px-2 py-1 text-[11px] font-semibold ${
+        available
+          ? "border-emerald-200 bg-emerald-50 text-emerald-800"
+          : "border-amber-200 bg-amber-50 text-amber-800"
+      }`}
+    >
+      {label}
+    </span>
+  );
+}
+
+interface ControlButtonProps {
+  label: string;
+  text: string;
+  disabled?: boolean;
+  onPress(): void;
+}
+
+function ControlButton({ label, text, disabled = false, onPress }: ControlButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onPress}
+      className="grid h-9 w-9 place-items-center rounded-lg border border-slate-200 bg-white text-sm hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {text}
+    </button>
+  );
+}
+
+export function PlaybackControls({
+  playing,
+  loop,
+  frameIndex,
+  frameCount,
+  fps,
+  jumpAvailable,
+  crouchAvailable,
+  onFirstFrame,
+  onPreviousFrame,
+  onTogglePlaying,
+  onNextFrame,
+  onLastFrame,
+  onToggleLoop,
+}: PlaybackControlsProps) {
+  const disabled = frameCount === 0;
+
+  return (
+    <section
+      aria-label="播放控制"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
+    >
+      <ControlButton label="第一帧" text="|‹" disabled={disabled} onPress={onFirstFrame} />
+      <ControlButton label="上一帧" text="‹" disabled={disabled} onPress={onPreviousFrame} />
+      <button
+        type="button"
+        aria-label={playing ? "暂停" : "播放"}
+        disabled={disabled}
+        onClick={onTogglePlaying}
+        className="min-w-20 rounded-lg bg-orange-500 px-4 py-2 text-xs font-semibold text-white hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        {playing ? "暂停" : "播放"}
+      </button>
+      <ControlButton label="下一帧" text="›" disabled={disabled} onPress={onNextFrame} />
+      <ControlButton label="最后一帧" text="›|" disabled={disabled} onPress={onLastFrame} />
+      <span className="ml-1 border-l border-slate-200 pl-3 text-xs tabular-nums">
+        {frameCount === 0
+          ? "00 / 00"
+          : `${String(frameIndex + 1).padStart(2, "0")} / ${String(frameCount).padStart(2, "0")}`}
+      </span>
+      <span className="ml-auto text-[10px] font-semibold text-slate-500">FPS {fps || "—"}</span>
+      <button
+        type="button"
+        aria-pressed={loop}
+        onClick={onToggleLoop}
+        className={`rounded-lg border px-3 py-2 text-[10px] font-semibold ${
+          loop ? "border-emerald-900 bg-emerald-950 text-white" : "border-slate-200 text-slate-500"
+        }`}
+      >
+        循环
+      </button>
+      <div className="flex w-full flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-3">
+        <div className="flex flex-wrap gap-2 text-xs font-semibold text-slate-700">
+          <span>A 左行走</span>
+          <span>D 右行走</span>
+          <span>W 跳跃</span>
+          <span>S 下蹲</span>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <AvailabilityBadge
+            available={jumpAvailable}
+            label={jumpAvailable ? "跳跃动作可用" : "未提供跳跃动作"}
+          />
+          <AvailabilityBadge
+            available={crouchAvailable}
+            label={crouchAvailable ? "下蹲动作可用" : "未提供下蹲动作"}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/playback/playback-state.test.ts b/frontend/src/pages/playtest/workbench/playback/playback-state.test.ts
new file mode 100644
index 0000000..eb0a434
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/playback/playback-state.test.ts
@@ -0,0 +1,366 @@
+import { describe, expect, it } from "vitest";
+
+import type { PreviewAction } from "../model/types";
+import {
+  createPlaybackState,
+  firstFrame,
+  lastFrame,
+  nextFrame,
+  playActionType,
+  previousFrame,
+  selectAction,
+  selectDirection,
+  selectFrame,
+  toggleLoop,
+} from "./playback-state";
+import * as playbackState from "./playback-state";
+
+const actions: readonly PreviewAction[] = [
+  {
+    id: "walk",
+    name: "Walk",
+    type: "walk",
+    status: "confirmed",
+    fps: 12,
+    sequences: [
+      {
+        direction: "south",
+        frames: [
+          {
+            imageUrl: "/walk-s-0.png",
+            durationMs: 80,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+          {
+            imageUrl: "/walk-s-1.png",
+            durationMs: 160,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: false,
+          },
+          {
+            imageUrl: "/walk-s-2.png",
+            durationMs: 120,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: false,
+          },
+        ],
+      },
+      {
+        direction: "north",
+        frames: [
+          {
+            imageUrl: "/walk-n-0.png",
+            durationMs: 100,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+          {
+            imageUrl: "/walk-n-1.png",
+            durationMs: 100,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "idle",
+    name: "Idle",
+    type: "idle",
+    status: "confirmed",
+    fps: 10,
+    sequences: [
+      {
+        direction: "default",
+        frames: [
+          {
+            imageUrl: "/idle-0.png",
+            durationMs: 100,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "jump",
+    name: "Jump",
+    type: "jump",
+    status: "confirmed",
+    fps: 10,
+    sequences: [
+      {
+        direction: "default",
+        frames: [
+          {
+            imageUrl: "/jump-0.png",
+            durationMs: 100,
+            rootMotion: { dx: 0, dy: 12 },
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "crouch",
+    name: "Crouch",
+    type: "crouch",
+    status: "confirmed",
+    fps: 10,
+    sequences: [
+      {
+        direction: "default",
+        frames: [
+          {
+            imageUrl: "/crouch-0.png",
+            durationMs: 100,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+describe("playback state", () => {
+  it("initializes the requested action at its first direction and frame", () => {
+    // Catches a regression where initial selection uses a later action, direction, or frame.
+    expect(createPlaybackState(actions, "walk")).toEqual({
+      actionId: "walk",
+      direction: "south",
+      frameIndex: 0,
+      playing: false,
+      loop: true,
+    });
+  });
+
+  it("switches action or direction by pausing and returning to frame zero", () => {
+    // Catches selection preserving stale playback position or playing state.
+    const playingWalk = { ...createPlaybackState(actions, "walk"), frameIndex: 2, playing: true };
+    const selectedAction = selectAction(playingWalk, actions, "idle");
+    const selectedDirection = selectDirection({ ...playingWalk, playing: true }, actions, "north");
+
+    expect(selectedAction).toMatchObject({
+      actionId: "idle",
+      direction: "default",
+      frameIndex: 0,
+      playing: false,
+    });
+    expect(selectedDirection).toMatchObject({
+      actionId: "walk",
+      direction: "north",
+      frameIndex: 0,
+      playing: false,
+    });
+  });
+
+  it("pauses when a frame is selected manually", () => {
+    // Catches a manual scrub continuing the old timer-driven animation.
+    const state = selectFrame(
+      { ...createPlaybackState(actions, "walk"), playing: true },
+      actions,
+      2,
+    );
+
+    expect(state).toMatchObject({ frameIndex: 2, playing: false });
+  });
+
+  it("clamps at non-looping frame boundaries", () => {
+    // Catches non-loop playback wrapping around instead of stopping at the selected edge.
+    const start = { ...createPlaybackState(actions, "walk"), loop: false };
+    const end = { ...start, frameIndex: 2, playing: true };
+
+    expect(previousFrame(start, actions)).toMatchObject({ frameIndex: 0, playing: false });
+    expect(nextFrame(end, actions)).toMatchObject({ frameIndex: 2, playing: false });
+    expect(firstFrame(end, actions)).toMatchObject({ frameIndex: 0, playing: false });
+    expect(lastFrame(start, actions)).toMatchObject({ frameIndex: 2, playing: false });
+  });
+
+  it("wraps at looping frame boundaries", () => {
+    // Catches looping playback sticking on the first or last frame.
+    const looped = toggleLoop({ ...createPlaybackState(actions, "walk"), loop: false });
+
+    expect(previousFrame(looped, actions)).toMatchObject({ frameIndex: 2, playing: false });
+    expect(nextFrame({ ...looped, frameIndex: 2 }, actions)).toMatchObject({
+      frameIndex: 0,
+      playing: false,
+    });
+  });
+
+  it("returns a safe inactive state for an empty action collection", () => {
+    // Catches empty preview data dereferencing a missing action or sequence.
+    const state = createPlaybackState([], "walk");
+
+    expect(state).toEqual({
+      actionId: null,
+      direction: null,
+      frameIndex: 0,
+      playing: false,
+      loop: true,
+    });
+    expect(nextFrame(state, [])).toEqual(state);
+    expect(selectAction(state, [], "walk")).toEqual(state);
+  });
+
+  it("starts a playable action type at frame zero without changing the loop setting", () => {
+    // Catches W/S preserving a stale frame, pausing the target action, or silently changing loop.
+    const walk = { ...createPlaybackState(actions, "walk"), frameIndex: 2, loop: false };
+    const jumping = playActionType(walk, actions, "jump");
+    const crouching = playActionType(jumping, actions, "crouch");
+
+    expect(jumping).toMatchObject({
+      actionId: "jump",
+      direction: "default",
+      frameIndex: 0,
+      playing: true,
+      loop: false,
+    });
+    expect(crouching).toMatchObject({
+      actionId: "crouch",
+      direction: "default",
+      frameIndex: 0,
+      playing: true,
+      loop: false,
+    });
+  });
+
+  it("continues a playable current walk without resetting its direction, frame, or loop", () => {
+    // Catches A/D restarting an already selected walk instead of only resuming its playback.
+    const current = {
+      ...createPlaybackState(actions, "walk"),
+      direction: "north" as const,
+      frameIndex: 1,
+      playing: false,
+      loop: false,
+    };
+    const continueActionType = (
+      playbackState as typeof playbackState & {
+        continueActionType?: typeof playActionType;
+      }
+    ).continueActionType;
+
+    expect(continueActionType).toBeTypeOf("function");
+    expect(continueActionType?.(current, actions, "walk")).toEqual({ ...current, playing: true });
+  });
+
+  it("starts the first playable walk from its first frame when the current action is not walk", () => {
+    // Catches A/D trying to resume a non-walk action or selecting a walk sequence with no frames.
+    const current = { ...createPlaybackState(actions, "idle"), frameIndex: 0, loop: false };
+    const continueActionType = (
+      playbackState as typeof playbackState & {
+        continueActionType?: typeof playActionType;
+      }
+    ).continueActionType;
+
+    expect(continueActionType?.(current, actions, "walk")).toMatchObject({
+      actionId: "walk",
+      direction: "south",
+      frameIndex: 0,
+      playing: true,
+      loop: false,
+    });
+  });
+
+  it("starts the first non-empty sequence of the first playable walk", () => {
+    // Catches A/D selecting an empty first direction even though the chosen walk has playable frames.
+    const actionsWithEmptyFirstWalkSequence: readonly PreviewAction[] = [
+      {
+        ...actions[0],
+        sequences: [{ direction: "south", frames: [] }, actions[0].sequences[1]],
+      },
+      ...actions.slice(1),
+    ];
+    const continueActionType = (
+      playbackState as typeof playbackState & {
+        continueActionType?: typeof playActionType;
+      }
+    ).continueActionType;
+
+    expect(
+      continueActionType?.(
+        createPlaybackState(actionsWithEmptyFirstWalkSequence, "idle"),
+        actionsWithEmptyFirstWalkSequence,
+        "walk",
+      ),
+    ).toMatchObject({ actionId: "walk", direction: "north", frameIndex: 0, playing: true });
+  });
+
+  it("keeps the exact playback state when an action type has no playable frames", () => {
+    // Catches a missing W/S target clearing or replacing the action currently under inspection.
+    const current = { ...createPlaybackState(actions, "walk"), frameIndex: 1 };
+
+    expect(playActionType(current, actions, "attack")).toBe(current);
+  });
+
+  it("keeps the exact playback state when a matching action has only empty sequences", () => {
+    // Catches type lookup selecting an action that exists but cannot show any frame.
+    const current = { ...createPlaybackState(actions, "walk"), frameIndex: 1, playing: true };
+    const actionsWithEmptyAttack: readonly PreviewAction[] = [
+      ...actions,
+      {
+        id: "attack-empty",
+        name: "Attack",
+        type: "attack",
+        status: "confirmed",
+        fps: 10,
+        sequences: [{ direction: "default", frames: [] }],
+      },
+    ];
+
+    expect(playActionType(current, actionsWithEmptyAttack, "attack")).toBe(current);
+  });
+
+  it("chooses the first playable action when several actions share a type", () => {
+    // Catches type lookup choosing a later matching action instead of the source-order first match.
+    const actionsWithSecondJump: readonly PreviewAction[] = [
+      ...actions,
+      {
+        id: "jump-second",
+        name: "Second jump",
+        type: "jump",
+        status: "confirmed",
+        fps: 10,
+        sequences: [
+          {
+            direction: "default",
+            frames: [
+              {
+                imageUrl: "/jump-second-0.png",
+                durationMs: 100,
+                rootMotion: null,
+                qc: "passed",
+                rejected: false,
+                keyFrame: true,
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    expect(
+      playActionType(createPlaybackState(actions, "walk"), actionsWithSecondJump, "jump"),
+    ).toMatchObject({ actionId: "jump", direction: "default", frameIndex: 0, playing: true });
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/playback/playback-state.ts b/frontend/src/pages/playtest/workbench/playback/playback-state.ts
new file mode 100644
index 0000000..68837f8
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/playback/playback-state.ts
@@ -0,0 +1,155 @@
+import type {
+  PlaytestActionType,
+  PlaytestDirection,
+  PreviewAction,
+  PreviewSequence,
+} from "../model/types";
+
+export interface PlaybackState {
+  actionId: string | null;
+  direction: PlaytestDirection | null;
+  frameIndex: number;
+  playing: boolean;
+  loop: boolean;
+}
+
+export function selectedAction(
+  actions: readonly PreviewAction[],
+  actionId: string | null,
+): PreviewAction | null {
+  return actions.find((action) => action.id === actionId) ?? null;
+}
+
+export function selectedSequence(
+  actions: readonly PreviewAction[],
+  state: PlaybackState,
+): PreviewSequence | null {
+  const action = selectedAction(actions, state.actionId);
+  return action?.sequences.find((sequence) => sequence.direction === state.direction) ?? null;
+}
+
+function initialStateFor(action: PreviewAction | null, loop: boolean): PlaybackState {
+  return {
+    actionId: action?.id ?? null,
+    direction: action?.sequences[0]?.direction ?? null,
+    frameIndex: 0,
+    playing: false,
+    loop,
+  };
+}
+
+function initialPlayableStateFor(action: PreviewAction, loop: boolean): PlaybackState {
+  const sequence = action.sequences.find((candidate) => candidate.frames.length > 0);
+  return {
+    actionId: action.id,
+    direction: sequence?.direction ?? null,
+    frameIndex: 0,
+    playing: true,
+    loop,
+  };
+}
+
+function frameCount(actions: readonly PreviewAction[], state: PlaybackState): number {
+  return selectedSequence(actions, state)?.frames.length ?? 0;
+}
+
+export function createPlaybackState(
+  actions: readonly PreviewAction[],
+  initialActionId: string | null,
+): PlaybackState {
+  return initialStateFor(selectedAction(actions, initialActionId) ?? actions[0] ?? null, true);
+}
+
+export function selectAction(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+  actionId: string,
+): PlaybackState {
+  const action = selectedAction(actions, actionId);
+  return action === null ? state : initialStateFor(action, state.loop);
+}
+
+export function playActionType(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+  type: PlaytestActionType,
+): PlaybackState {
+  const action = actions.find(
+    (candidate) =>
+      candidate.type === type && candidate.sequences.some((sequence) => sequence.frames.length > 0),
+  );
+  return action === undefined ? state : initialPlayableStateFor(action, state.loop);
+}
+
+export function continueActionType(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+  type: PlaytestActionType,
+): PlaybackState {
+  const action = selectedAction(actions, state.actionId);
+  if (action?.type === type && frameCount(actions, state) > 0) {
+    return { ...state, playing: true };
+  }
+
+  return playActionType(state, actions, type);
+}
+
+export function selectDirection(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+  direction: PlaytestDirection,
+): PlaybackState {
+  const action = selectedAction(actions, state.actionId);
+  if (action?.sequences.some((sequence) => sequence.direction === direction) !== true) return state;
+
+  return { ...state, direction, frameIndex: 0, playing: false };
+}
+
+export function selectFrame(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+  index: number,
+): PlaybackState {
+  const count = frameCount(actions, state);
+  if (count === 0) return { ...state, frameIndex: 0, playing: false };
+
+  return { ...state, frameIndex: Math.min(Math.max(index, 0), count - 1), playing: false };
+}
+
+export function previousFrame(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+): PlaybackState {
+  const count = frameCount(actions, state);
+  if (count === 0) return { ...state, frameIndex: 0, playing: false };
+  if (state.frameIndex > 0) return { ...state, frameIndex: state.frameIndex - 1, playing: false };
+  return { ...state, frameIndex: state.loop ? count - 1 : 0, playing: false };
+}
+
+export function nextFrame(state: PlaybackState, actions: readonly PreviewAction[]): PlaybackState {
+  const count = frameCount(actions, state);
+  if (count === 0) return { ...state, frameIndex: 0, playing: false };
+  if (state.frameIndex < count - 1)
+    return { ...state, frameIndex: state.frameIndex + 1, playing: false };
+  return { ...state, frameIndex: state.loop ? 0 : count - 1, playing: false };
+}
+
+export function firstFrame(state: PlaybackState, actions: readonly PreviewAction[]): PlaybackState {
+  return selectFrame(state, actions, 0);
+}
+
+export function lastFrame(state: PlaybackState, actions: readonly PreviewAction[]): PlaybackState {
+  return selectFrame(state, actions, frameCount(actions, state) - 1);
+}
+
+export function togglePlaying(
+  state: PlaybackState,
+  actions: readonly PreviewAction[],
+): PlaybackState {
+  if (frameCount(actions, state) === 0) return { ...state, playing: false };
+  return { ...state, playing: !state.playing };
+}
+
+export function toggleLoop(state: PlaybackState): PlaybackState {
+  return { ...state, loop: !state.loop };
+}
diff --git a/frontend/src/pages/playtest/workbench/playback/use-playback-controller.test.tsx b/frontend/src/pages/playtest/workbench/playback/use-playback-controller.test.tsx
new file mode 100644
index 0000000..6024646
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/playback/use-playback-controller.test.tsx
@@ -0,0 +1,313 @@
+/** @vitest-environment jsdom */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { PreviewAction } from "../model/types";
+import { type PlaybackController, usePlaybackController } from "./use-playback-controller";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const actions: readonly PreviewAction[] = [
+  {
+    id: "walk",
+    name: "Walk",
+    type: "walk",
+    status: "confirmed",
+    fps: 12,
+    sequences: [
+      {
+        direction: "south",
+        frames: [
+          {
+            imageUrl: "/walk-0.png",
+            durationMs: 80,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+          {
+            imageUrl: "/walk-1.png",
+            durationMs: 160,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: false,
+          },
+          {
+            imageUrl: "/walk-2.png",
+            durationMs: 120,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "idle",
+    name: "Idle",
+    type: "idle",
+    status: "confirmed",
+    fps: 10,
+    sequences: [
+      {
+        direction: "default",
+        frames: [
+          {
+            imageUrl: "/idle-0.png",
+            durationMs: 100,
+            rootMotion: null,
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "jump",
+    name: "Jump",
+    type: "jump",
+    status: "confirmed",
+    fps: 10,
+    sequences: [
+      {
+        direction: "default",
+        frames: [
+          {
+            imageUrl: "/jump-0.png",
+            durationMs: 100,
+            rootMotion: { dx: 0, dy: 12 },
+            qc: "passed",
+            rejected: false,
+            keyFrame: true,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+interface MountedController {
+  readonly controller: PlaybackController;
+  unmount(): void;
+}
+
+function mountController(initialActionId = "walk"): MountedController {
+  const host = document.createElement("div");
+  const root: Root = createRoot(host);
+  let controller: PlaybackController | null = null;
+
+  function Probe() {
+    controller = usePlaybackController(actions, initialActionId);
+    return null;
+  }
+
+  act(() => {
+    root.render(<Probe />);
+  });
+
+  return {
+    get controller() {
+      if (controller === null) throw new Error("controller was not rendered");
+      return controller;
+    },
+    unmount() {
+      act(() => {
+        root.unmount();
+      });
+    },
+  };
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("usePlaybackController", () => {
+  it("plays the first playable action of a requested type without changing loop mode", () => {
+    // Catches typed shortcuts preserving stale position, pausing the target, or changing loop mode.
+    const mounted = mountController();
+
+    act(() => {
+      mounted.controller.toggleLoop();
+      mounted.controller.selectFrame(2);
+      mounted.controller.playActionType("jump");
+    });
+
+    expect(mounted.controller.state).toMatchObject({
+      actionId: "jump",
+      direction: "default",
+      frameIndex: 0,
+      playing: true,
+      loop: false,
+    });
+
+    const current = mounted.controller.state;
+    act(() => {
+      mounted.controller.playActionType("attack");
+    });
+    expect(mounted.controller.state).toBe(current);
+    mounted.unmount();
+  });
+
+  it("exposes walk continuation that resumes the current walk without resetting playback position", () => {
+    // Catches keyboard direction controls being forced through the restart-only action command.
+    const mounted = mountController();
+
+    act(() => {
+      mounted.controller.selectFrame(2);
+      mounted.controller.toggleLoop();
+    });
+
+    const controller = mounted.controller as PlaybackController & {
+      continueActionType?: (type: "walk") => void;
+    };
+    expect(controller.continueActionType).toBeTypeOf("function");
+    act(() => {
+      controller.continueActionType?.("walk");
+    });
+
+    expect(mounted.controller.state).toMatchObject({
+      actionId: "walk",
+      direction: "south",
+      frameIndex: 2,
+      playing: true,
+      loop: false,
+    });
+    mounted.unmount();
+  });
+
+  it("increments frameTick for every timed advance, including a single-frame loop", () => {
+    // Catches stage motion missing a loop iteration because its visible frame index remains zero.
+    vi.useFakeTimers();
+    const mounted = mountController();
+    const controller = mounted.controller as PlaybackController & { frameTick?: number };
+
+    expect(controller.frameTick).toBe(0);
+    act(() => {
+      mounted.controller.selectAction("idle");
+      mounted.controller.togglePlaying();
+    });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(mounted.controller.state).toMatchObject({
+      actionId: "idle",
+      frameIndex: 0,
+      playing: true,
+    });
+    expect((mounted.controller as PlaybackController & { frameTick?: number }).frameTick).toBe(1);
+    mounted.unmount();
+  });
+
+  it("waits for each current-frame duration before advancing", () => {
+    // Catches fixed-interval scheduling that skips the current frame's actual duration.
+    vi.useFakeTimers();
+    const mounted = mountController();
+
+    act(() => {
+      mounted.controller.togglePlaying();
+    });
+    act(() => {
+      vi.advanceTimersByTime(79);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(0);
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(159);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(2);
+    mounted.unmount();
+  });
+
+  it("clears playback when paused or when its action changes", () => {
+    // Catches old timers advancing a manually paused or newly selected action.
+    vi.useFakeTimers();
+    const mounted = mountController();
+
+    act(() => {
+      mounted.controller.togglePlaying();
+      mounted.controller.togglePlaying();
+      vi.advanceTimersByTime(500);
+    });
+    expect(mounted.controller.state).toMatchObject({
+      actionId: "walk",
+      frameIndex: 0,
+      playing: false,
+    });
+
+    act(() => {
+      mounted.controller.togglePlaying();
+      mounted.controller.selectAction("idle");
+      vi.advanceTimersByTime(500);
+    });
+    expect(mounted.controller.state).toMatchObject({
+      actionId: "idle",
+      frameIndex: 0,
+      playing: false,
+    });
+    mounted.unmount();
+  });
+
+  it("restarts the current-frame timeout when loop changes", () => {
+    // Catches a pending timeout surviving a loop-mode change near the frame boundary.
+    vi.useFakeTimers();
+    const mounted = mountController();
+
+    act(() => {
+      mounted.controller.togglePlaying();
+    });
+    act(() => {
+      vi.advanceTimersByTime(80);
+    });
+    act(() => {
+      vi.advanceTimersByTime(159);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(1);
+
+    act(() => {
+      mounted.controller.toggleLoop();
+    });
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(159);
+    });
+    expect(mounted.controller.state.frameIndex).toBe(2);
+    mounted.unmount();
+  });
+
+  it("cleans up a scheduled timeout when unmounted", () => {
+    // Catches a timeout retaining the controller after its React tree is gone.
+    vi.useFakeTimers();
+    const mounted = mountController();
+
+    act(() => {
+      mounted.controller.togglePlaying();
+    });
+    expect(vi.getTimerCount()).toBe(1);
+
+    mounted.unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/playback/use-playback-controller.ts b/frontend/src/pages/playtest/workbench/playback/use-playback-controller.ts
new file mode 100644
index 0000000..4a1287e
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/playback/use-playback-controller.ts
@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useState } from "react";
+
+import type {
+  PlaytestActionType,
+  PlaytestDirection,
+  PreviewAction,
+  PreviewFrame,
+  PreviewSequence,
+} from "../model/types";
+import {
+  createPlaybackState,
+  continueActionType,
+  firstFrame,
+  lastFrame,
+  nextFrame,
+  playActionType,
+  previousFrame,
+  selectAction,
+  selectDirection,
+  selectFrame,
+  selectedAction,
+  selectedSequence,
+  toggleLoop,
+  togglePlaying,
+  type PlaybackState,
+} from "./playback-state";
+
+export interface PlaybackController {
+  state: PlaybackState;
+  frameTick: number;
+  action: PreviewAction | null;
+  sequence: PreviewSequence | null;
+  frame: PreviewFrame | null;
+  playActionType(type: PlaytestActionType): void;
+  continueActionType(type: PlaytestActionType): void;
+  selectAction(actionId: string): void;
+  selectDirection(direction: PlaytestDirection): void;
+  selectFrame(index: number): void;
+  previousFrame(): void;
+  nextFrame(): void;
+  firstFrame(): void;
+  lastFrame(): void;
+  togglePlaying(): void;
+  toggleLoop(): void;
+}
+
+export function usePlaybackController(
+  actions: readonly PreviewAction[],
+  initialActionId: string | null,
+): PlaybackController {
+  const [state, setState] = useState(() => createPlaybackState(actions, initialActionId));
+  const [frameTick, setFrameTick] = useState(0);
+  const action = selectedAction(actions, state.actionId);
+  const sequence = selectedSequence(actions, state);
+  const frame = sequence?.frames[state.frameIndex] ?? null;
+
+  useEffect(() => {
+    if (!state.playing || frame === null) return;
+
+    const timeoutId = window.setTimeout(() => {
+      const finalFrameIndex = (sequence?.frames.length ?? 1) - 1;
+      if (state.loop || state.frameIndex < finalFrameIndex) {
+        setFrameTick((tick) => tick + 1);
+      }
+      setState((current) => {
+        const currentSequence = selectedSequence(actions, current);
+        const currentFinalFrameIndex = (currentSequence?.frames.length ?? 1) - 1;
+        const advanced = nextFrame(current, actions);
+
+        if (!current.loop && current.frameIndex >= currentFinalFrameIndex) return advanced;
+        return { ...advanced, playing: true };
+      });
+    }, frame.durationMs);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [actions, frame, sequence, state.frameIndex, state.loop, state.playing]);
+
+  const chooseAction = useCallback(
+    (actionId: string) => {
+      setState((current) => selectAction(current, actions, actionId));
+    },
+    [actions],
+  );
+
+  const chooseActionType = useCallback(
+    (type: PlaytestActionType) => {
+      setState((current) => playActionType(current, actions, type));
+    },
+    [actions],
+  );
+
+  const continueAction = useCallback(
+    (type: PlaytestActionType) => {
+      setState((current) => continueActionType(current, actions, type));
+    },
+    [actions],
+  );
+
+  const chooseDirection = useCallback(
+    (direction: PlaytestDirection) => {
+      setState((current) => selectDirection(current, actions, direction));
+    },
+    [actions],
+  );
+
+  const chooseFrame = useCallback(
+    (index: number) => {
+      setState((current) => selectFrame(current, actions, index));
+    },
+    [actions],
+  );
+
+  const choosePreviousFrame = useCallback(() => {
+    setState((current) => previousFrame(current, actions));
+  }, [actions]);
+
+  const chooseNextFrame = useCallback(() => {
+    setState((current) => nextFrame(current, actions));
+  }, [actions]);
+
+  const chooseFirstFrame = useCallback(() => {
+    setState((current) => firstFrame(current, actions));
+  }, [actions]);
+
+  const chooseLastFrame = useCallback(() => {
+    setState((current) => lastFrame(current, actions));
+  }, [actions]);
+
+  const choosePlaying = useCallback(() => {
+    setState((current) => togglePlaying(current, actions));
+  }, [actions]);
+
+  const chooseLoop = useCallback(() => {
+    setState((current) => toggleLoop(current));
+  }, []);
+
+  return {
+    state,
+    frameTick,
+    action,
+    sequence,
+    frame,
+    playActionType: chooseActionType,
+    continueActionType: continueAction,
+    selectAction: chooseAction,
+    selectDirection: chooseDirection,
+    selectFrame: chooseFrame,
+    previousFrame: choosePreviousFrame,
+    nextFrame: chooseNextFrame,
+    firstFrame: chooseFirstFrame,
+    lastFrame: chooseLastFrame,
+    togglePlaying: choosePlaying,
+    toggleLoop: chooseLoop,
+  };
+}
diff --git a/frontend/src/pages/playtest/workbench/stage-motion.test.tsx b/frontend/src/pages/playtest/workbench/stage-motion.test.tsx
new file mode 100644
index 0000000..bc2c0ea
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/stage-motion.test.tsx
@@ -0,0 +1,252 @@
+/** @vitest-environment jsdom */
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import type { PreviewFrame } from "./model/types";
+import { createStageMotionState, reduceStageMotion, useStageMotion } from "./stage-motion";
+
+const movingFrame: PreviewFrame = {
+  imageUrl: "https://cdn.example.test/walk.png",
+  durationMs: 100,
+  rootMotion: { dx: 4, dy: 3 },
+  qc: "passed",
+  rejected: false,
+  keyFrame: false,
+};
+
+afterEach(cleanup);
+
+function MotionProbe({
+  frame,
+  playing,
+  frameTick,
+  resetKey,
+}: {
+  frame: PreviewFrame | null;
+  playing: boolean;
+  frameTick: number;
+  resetKey: string;
+}) {
+  const motion = useStageMotion({ frame, playing, frameTick, resetKey });
+
+  return (
+    <>
+      <output>{`${motion.offset.x},${motion.offset.y}`}</output>
+      <button type="button" onClick={() => motion.setMirrored(true)}>
+        向左
+      </button>
+      <button type="button" onClick={() => motion.setMirrored(false)}>
+        向右
+      </button>
+    </>
+  );
+}
+
+describe("stage motion", () => {
+  it("clamps at the right edge, turns left, and keeps moving inward", () => {
+    const bounded = reduceStageMotion(createStageMotionState(0), {
+      type: "set-bounds",
+      bounds: { minX: -10, maxX: 10 },
+    });
+    const nearEdge = reduceStageMotion(bounded, {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 8, dy: 0 },
+    });
+    const hitEdge = reduceStageMotion(nearEdge, {
+      type: "consume-frame",
+      tick: 2,
+      rootMotion: { dx: 4, dy: 0 },
+    });
+    const movedInward = reduceStageMotion(hitEdge, {
+      type: "consume-frame",
+      tick: 3,
+      rootMotion: { dx: 3, dy: 0 },
+    });
+
+    expect(hitEdge).toMatchObject({ offset: { x: 10, y: 0 }, mirrored: true });
+    expect(movedInward).toMatchObject({ offset: { x: 7, y: 0 }, mirrored: true });
+  });
+
+  it("clamps at the left edge, turns right, and keeps moving inward", () => {
+    const bounded = reduceStageMotion(createStageMotionState(0), {
+      type: "set-bounds",
+      bounds: { minX: -10, maxX: 10 },
+    });
+    const facingLeft = reduceStageMotion(bounded, { type: "set-mirrored", mirrored: true });
+    const nearEdge = reduceStageMotion(facingLeft, {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 8, dy: 0 },
+    });
+    const hitEdge = reduceStageMotion(nearEdge, {
+      type: "consume-frame",
+      tick: 2,
+      rootMotion: { dx: 4, dy: 0 },
+    });
+    const movedInward = reduceStageMotion(hitEdge, {
+      type: "consume-frame",
+      tick: 3,
+      rootMotion: { dx: 3, dy: 0 },
+    });
+
+    expect(hitEdge).toMatchObject({ offset: { x: -10, y: 0 }, mirrored: false });
+    expect(movedInward).toMatchObject({ offset: { x: -7, y: 0 }, mirrored: false });
+  });
+
+  it("reclamps an existing position when the measured stage becomes narrower", () => {
+    const wide = reduceStageMotion(createStageMotionState(0), {
+      type: "set-bounds",
+      bounds: { minX: -20, maxX: 20 },
+    });
+    const moved = reduceStageMotion(wide, {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 16, dy: 0 },
+    });
+    const narrowed = reduceStageMotion(moved, {
+      type: "set-bounds",
+      bounds: { minX: -5, maxX: 5 },
+    });
+
+    expect(narrowed).toMatchObject({ offset: { x: 5, y: 0 }, mirrored: true });
+  });
+
+  it("adds each newly advanced playback tick once", () => {
+    // Catches a rerender applying a frame's incremental root motion more than once.
+    const first = reduceStageMotion(createStageMotionState(0), {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 4, dy: 3 },
+    });
+    const duplicate = reduceStageMotion(first, {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 4, dy: 3 },
+    });
+    const second = reduceStageMotion(duplicate, {
+      type: "consume-frame",
+      tick: 2,
+      rootMotion: { dx: -1, dy: 2 },
+    });
+
+    expect(second.offset).toEqual({ x: 3, y: 5 });
+    expect(second.consumedTick).toBe(2);
+  });
+
+  it("uses a fresh loop tick to continue accumulating when playback returns to the first frame", () => {
+    // Catches loop wraps being mistaken for a duplicate frame and dropping their root-motion increment.
+    const afterFirstPass = reduceStageMotion(createStageMotionState(0), {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 2, dy: 0 },
+    });
+    const afterLoop = reduceStageMotion(afterFirstPass, {
+      type: "consume-frame",
+      tick: 2,
+      rootMotion: { dx: 2, dy: 0 },
+    });
+
+    expect(afterLoop.offset).toEqual({ x: 4, y: 0 });
+  });
+
+  it("sets mirrored direction idempotently without resetting position and reverses future horizontal increments", () => {
+    // Catches repeated A/D presses flipping back to the opposite direction, resetting placement, or leaving mirrored locomotion moving right.
+    const movedRight = reduceStageMotion(createStageMotionState(0), {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: { dx: 5, dy: 1 },
+    });
+    const mirrored = reduceStageMotion(movedRight, { type: "set-mirrored", mirrored: true });
+    const mirroredAgain = reduceStageMotion(mirrored, { type: "set-mirrored", mirrored: true });
+    const movedLeft = reduceStageMotion(mirroredAgain, {
+      type: "consume-frame",
+      tick: 2,
+      rootMotion: { dx: 2, dy: 0 },
+    });
+    const restored = reduceStageMotion(movedLeft, { type: "set-mirrored", mirrored: false });
+
+    expect(mirrored).toMatchObject({ offset: { x: 5, y: 1 }, mirrored: true });
+    expect(mirroredAgain).toMatchObject({ offset: { x: 5, y: 1 }, mirrored: true });
+    expect(movedLeft.offset).toEqual({ x: 3, y: 1 });
+    expect(restored).toMatchObject({ offset: { x: 3, y: 1 }, mirrored: false });
+  });
+
+  it("treats absent root motion as stationary", () => {
+    // Catches missing rootMotion producing a non-zero offset or erasing the accumulated position.
+    const moved = reduceStageMotion(createStageMotionState(0), {
+      type: "consume-frame",
+      tick: 1,
+      rootMotion: movingFrame.rootMotion,
+    });
+    const stationary = reduceStageMotion(moved, {
+      type: "consume-frame",
+      tick: 2,
+      rootMotion: null,
+    });
+
+    expect(stationary.offset).toEqual({ x: 4, y: 3 });
+  });
+
+  it("does not consume on start, resume, direction change, or same-tick rerenders", () => {
+    // Catches playback state changes applying the current frame before an automatic tick reaches its target frame.
+    const { rerender } = render(
+      <MotionProbe
+        frame={movingFrame}
+        playing={false}
+        frameTick={0}
+        resetKey="character-a:outfit-a"
+      />,
+    );
+
+    expect(screen.getByRole("status").textContent).toBe("0,0");
+
+    rerender(
+      <MotionProbe frame={movingFrame} playing frameTick={0} resetKey="character-a:outfit-a" />,
+    );
+    expect(screen.getByRole("status").textContent).toBe("0,0");
+
+    fireEvent.click(screen.getByRole("button", { name: "向左" }));
+    expect(screen.getByRole("status").textContent).toBe("0,0");
+
+    rerender(
+      <MotionProbe frame={movingFrame} playing frameTick={1} resetKey="character-a:outfit-a" />,
+    );
+    expect(screen.getByRole("status").textContent).toBe("-4,3");
+
+    rerender(
+      <MotionProbe
+        frame={{ ...movingFrame, rootMotion: { dx: 100, dy: 100 } }}
+        playing={false}
+        frameTick={1}
+        resetKey="character-a:outfit-a"
+      />,
+    );
+    rerender(
+      <MotionProbe
+        frame={{ ...movingFrame, rootMotion: { dx: 100, dy: 100 } }}
+        playing
+        frameTick={1}
+        resetKey="character-a:outfit-a"
+      />,
+    );
+    expect(screen.getByRole("status").textContent).toBe("-4,3");
+  });
+
+  it("uses the current tick as a reset baseline for a new character or outfit", () => {
+    // Catches a reset immediately consuming the new preview's current frame or retaining the old preview position.
+    const { rerender } = render(
+      <MotionProbe frame={movingFrame} playing frameTick={4} resetKey="character-a:outfit-a" />,
+    );
+
+    rerender(
+      <MotionProbe frame={movingFrame} playing frameTick={5} resetKey="character-a:outfit-a" />,
+    );
+    expect(screen.getByRole("status").textContent).toBe("4,3");
+
+    rerender(
+      <MotionProbe frame={movingFrame} playing frameTick={5} resetKey="character-b:outfit-a" />,
+    );
+    expect(screen.getByRole("status").textContent).toBe("0,0");
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/stage-motion.ts b/frontend/src/pages/playtest/workbench/stage-motion.ts
new file mode 100644
index 0000000..b995024
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/stage-motion.ts
@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useReducer } from "react";
+
+import type { FrameRootMotion } from "@/entities/character";
+
+import type { PreviewFrame } from "./model/types";
+
+export interface StageOffset {
+  x: number;
+  /** Positive values move the character upward in world coordinates. */
+  y: number;
+}
+
+export interface HorizontalStageBounds {
+  minX: number;
+  maxX: number;
+}
+
+export interface StageMotionState {
+  offset: StageOffset;
+  /** The latest automatic playback tick already reflected in offset. */
+  consumedTick: number;
+  mirrored: boolean;
+  bounds: HorizontalStageBounds | null;
+}
+
+export type StageMotionAction =
+  | { type: "consume-frame"; tick: number; rootMotion: FrameRootMotion | null }
+  | { type: "set-mirrored"; mirrored: boolean }
+  | { type: "set-bounds"; bounds: HorizontalStageBounds | null }
+  | { type: "reset"; baselineTick: number };
+
+export function createStageMotionState(baselineTick = 0): StageMotionState {
+  return {
+    offset: { x: 0, y: 0 },
+    consumedTick: baselineTick,
+    mirrored: false,
+    bounds: null,
+  };
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.min(Math.max(value, minimum), maximum);
+}
+
+export function reduceStageMotion(
+  state: StageMotionState,
+  action: StageMotionAction,
+): StageMotionState {
+  if (action.type === "reset") {
+    return { ...createStageMotionState(action.baselineTick), bounds: state.bounds };
+  }
+  if (action.type === "set-mirrored") return { ...state, mirrored: action.mirrored };
+  if (action.type === "set-bounds") {
+    if (action.bounds === null) return { ...state, bounds: null };
+
+    const minX = Math.min(action.bounds.minX, action.bounds.maxX);
+    const maxX = Math.max(action.bounds.minX, action.bounds.maxX);
+    const x = clamp(state.offset.x, minX, maxX);
+    const mirrored = state.offset.x > maxX ? true : state.offset.x < minX ? false : state.mirrored;
+    return { ...state, offset: { ...state.offset, x }, mirrored, bounds: { minX, maxX } };
+  }
+  if (action.tick <= state.consumedTick) return state;
+
+  const rootMotion = action.rootMotion ?? { dx: 0, dy: 0 };
+  const horizontalIncrement = state.mirrored ? -rootMotion.dx : rootMotion.dx;
+  const candidateX = state.offset.x + horizontalIncrement;
+  const nextX =
+    state.bounds === null ? candidateX : clamp(candidateX, state.bounds.minX, state.bounds.maxX);
+  const mirrored =
+    state.bounds === null || horizontalIncrement === 0
+      ? state.mirrored
+      : horizontalIncrement > 0 && candidateX >= state.bounds.maxX
+        ? true
+        : horizontalIncrement < 0 && candidateX <= state.bounds.minX
+          ? false
+          : state.mirrored;
+  return {
+    ...state,
+    offset: {
+      x: nextX,
+      y: state.offset.y + rootMotion.dy,
+    },
+    mirrored,
+    consumedTick: action.tick,
+  };
+}
+
+export interface UseStageMotionInput {
+  frame: PreviewFrame | null;
+  /** Only timed playback contributes root-motion increments. */
+  playing: boolean;
+  /** Monotonically increases only when timed playback advances to a frame. */
+  frameTick: number;
+  /** A character/outfit identity supplied by the owner of the preview. */
+  resetKey: string;
+}
+
+export interface StageMotion {
+  offset: StageOffset;
+  mirrored: boolean;
+  setMirrored(mirrored: boolean): void;
+  setBounds(bounds: HorizontalStageBounds | null): void;
+}
+
+export function useStageMotion({
+  frame,
+  playing,
+  frameTick,
+  resetKey,
+}: UseStageMotionInput): StageMotion {
+  const [state, dispatch] = useReducer(reduceStageMotion, frameTick, createStageMotionState);
+
+  useEffect(() => {
+    dispatch({ type: "reset", baselineTick: frameTick });
+    // resetKey deliberately captures the tick at the identity transition only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resetKey]);
+
+  useEffect(() => {
+    if (!playing || frame === null) return;
+    dispatch({ type: "consume-frame", tick: frameTick, rootMotion: frame.rootMotion });
+  }, [frame, frameTick, playing]);
+
+  return {
+    offset: state.offset,
+    mirrored: state.mirrored,
+    setMirrored: useCallback(
+      (mirrored: boolean) => dispatch({ type: "set-mirrored", mirrored }),
+      [],
+    ),
+    setBounds: useCallback(
+      (bounds: HorizontalStageBounds | null) => dispatch({ type: "set-bounds", bounds }),
+      [],
+    ),
+  };
+}
diff --git a/frontend/src/pages/playtest/workbench/status-panel.tsx b/frontend/src/pages/playtest/workbench/status-panel.tsx
new file mode 100644
index 0000000..3d4bd7a
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/status-panel.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+export interface StatusPanelProps {
+  title: string;
+  tone?: "neutral" | "success" | "warning" | "danger";
+  children: ReactNode;
+}
+
+const toneClassNames = {
+  neutral: "border-slate-200 bg-slate-50 text-slate-700",
+  success: "border-emerald-200 bg-emerald-50 text-emerald-900",
+  warning: "border-amber-200 bg-amber-50 text-amber-900",
+  danger: "border-rose-200 bg-rose-50 text-rose-900",
+} as const;
+
+/**
+ * Playtest 内部状态提示，不作为 shared 公共组件向其他模块扩散。
+ */
+export function StatusPanel({ title, tone = "neutral", children }: StatusPanelProps) {
+  return (
+    <section className={`rounded-xl border p-3 text-sm ${toneClassNames[tone]}`}>
+      <strong className="block text-xs">{title}</strong>
+      <div className="mt-1">{children}</div>
+    </section>
+  );
+}
diff --git a/frontend/src/pages/playtest/workbench/use-playtest-keyboard.test.tsx b/frontend/src/pages/playtest/workbench/use-playtest-keyboard.test.tsx
new file mode 100644
index 0000000..c3b3b7c
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/use-playtest-keyboard.test.tsx
@@ -0,0 +1,265 @@
+/** @vitest-environment jsdom */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { type PlaytestKeyboardCommands, usePlaytestKeyboard } from "./use-playtest-keyboard";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const mountedRoots = new Set<Root>();
+
+function createCommands(): PlaytestKeyboardCommands {
+  return {
+    togglePlaying: vi.fn(),
+    previousFrame: vi.fn(),
+    nextFrame: vi.fn(),
+    firstFrame: vi.fn(),
+    lastFrame: vi.fn(),
+    toggleLoop: vi.fn(),
+    playLeft: vi.fn(),
+    playRight: vi.fn(),
+    stopHorizontal: vi.fn(),
+    playJump: vi.fn(),
+    playCrouch: vi.fn(),
+  };
+}
+
+const shortcutKeys = [" ", "ArrowLeft", "ArrowRight", "Home", "End", "L"] as const;
+const interactiveShortcutKeys = [...shortcutKeys, "a", "D", "w", "S"] as const;
+
+function dispatchKey(
+  key: string,
+  target: EventTarget = window,
+  options: KeyboardEventInit = {},
+): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelable: true,
+    key,
+    ...options,
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+function mountKeyboard(commands: PlaytestKeyboardCommands, enabled = true): () => void {
+  const host = document.createElement("div");
+  const root: Root = createRoot(host);
+
+  function Probe() {
+    usePlaytestKeyboard(commands, enabled);
+    return null;
+  }
+
+  act(() => {
+    root.render(<Probe />);
+  });
+  mountedRoots.add(root);
+
+  return () => {
+    if (!mountedRoots.delete(root)) return;
+
+    act(() => {
+      root.unmount();
+    });
+  };
+}
+
+afterEach(() => {
+  for (const root of mountedRoots) {
+    act(() => {
+      root.unmount();
+    });
+  }
+  mountedRoots.clear();
+  document.body.replaceChildren();
+});
+
+describe("usePlaytestKeyboard", () => {
+  it("maps the playback shortcuts to their commands", () => {
+    // Catches an incomplete or swapped shortcut map while the workbench is focused.
+    const commands = createCommands();
+    const unmount = mountKeyboard(commands);
+
+    const events = shortcutKeys.map((key) => dispatchKey(key));
+
+    expect(events.every((event) => event.defaultPrevented)).toBe(true);
+
+    expect(commands.togglePlaying).toHaveBeenCalledOnce();
+    expect(commands.previousFrame).toHaveBeenCalledOnce();
+    expect(commands.nextFrame).toHaveBeenCalledOnce();
+    expect(commands.firstFrame).toHaveBeenCalledOnce();
+    expect(commands.lastFrame).toHaveBeenCalledOnce();
+    expect(commands.toggleLoop).toHaveBeenCalledOnce();
+    unmount();
+  });
+
+  it("maps A/D to directional walk commands and W/S to action commands", () => {
+    // Catches A/D retaining their old frame-navigation semantics instead of selecting a walk direction.
+    const commands = createCommands();
+    const unmount = mountKeyboard(commands);
+
+    dispatchKey("a");
+    dispatchKey("D");
+    dispatchKey("w");
+    dispatchKey("S");
+
+    expect(commands.playLeft).toHaveBeenCalledOnce();
+    expect(commands.playRight).toHaveBeenCalledOnce();
+    expect(commands.playJump).toHaveBeenCalledOnce();
+    expect(commands.playCrouch).toHaveBeenCalledOnce();
+    unmount();
+  });
+
+  it("handles shortcuts dispatched from the body and ordinary elements", () => {
+    // Catches a missing editable ancestor being mistaken for an interactive editing surface.
+    const commands = createCommands();
+    const target = document.createElement("div");
+    document.body.append(target);
+    const unmount = mountKeyboard(commands);
+
+    const arrowEvent = dispatchKey("ArrowRight", document.body);
+    const spaceEvent = dispatchKey(" ", target);
+
+    expect(arrowEvent.defaultPrevented).toBe(true);
+    expect(spaceEvent.defaultPrevented).toBe(true);
+    expect(commands.nextFrame).toHaveBeenCalledOnce();
+    expect(commands.togglePlaying).toHaveBeenCalledOnce();
+    unmount();
+  });
+
+  it.each([
+    ["input", () => document.createElement("input")],
+    ["textarea", () => document.createElement("textarea")],
+    ["select", () => document.createElement("select")],
+    [
+      "contenteditable",
+      () => {
+        const element = document.createElement("div");
+        element.setAttribute("contenteditable", "true");
+        return element;
+      },
+    ],
+  ])("does not intercept any shortcut when focus is in %s", (_label, createElement) => {
+    // Catches global shortcuts stealing native control or text-editing input.
+    const commands = createCommands();
+    const target = createElement();
+    document.body.append(target);
+    const unmount = mountKeyboard(commands);
+
+    const events = interactiveShortcutKeys.map((key) => dispatchKey(key, target));
+
+    expect(events.every((event) => !event.defaultPrevented)).toBe(true);
+    expect(Object.values(commands).every((command) => !vi.mocked(command).mock.calls.length)).toBe(
+      true,
+    );
+    unmount();
+  });
+
+  it("keeps A/D/W/S active when a workbench button still owns focus", () => {
+    // Catches clicking Play/Pause leaving focus on its button and disabling the movement controls.
+    const commands = createCommands();
+    const button = document.createElement("button");
+    document.body.append(button);
+    const unmount = mountKeyboard(commands);
+
+    const actionEvents = ["a", "D", "w", "S"].map((key) => dispatchKey(key, button));
+    const spaceEvent = dispatchKey(" ", button);
+
+    expect(actionEvents.every((event) => event.defaultPrevented)).toBe(true);
+    expect(spaceEvent.defaultPrevented).toBe(false);
+    expect(commands.playLeft).toHaveBeenCalledOnce();
+    expect(commands.playRight).toHaveBeenCalledOnce();
+    expect(commands.playJump).toHaveBeenCalledOnce();
+    expect(commands.playCrouch).toHaveBeenCalledOnce();
+    expect(commands.togglePlaying).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  it("ignores repeated toggle shortcuts while keeping frame navigation repeatable", () => {
+    // Catches a held Space or L key repeatedly flipping state while arrow/home/end retain key repeat.
+    const commands = createCommands();
+    const unmount = mountKeyboard(commands);
+
+    expect(dispatchKey(" ", window, { repeat: true }).defaultPrevented).toBe(true);
+    expect(dispatchKey("L", window, { repeat: true }).defaultPrevented).toBe(true);
+    dispatchKey("ArrowLeft", window, { repeat: true });
+    dispatchKey("ArrowRight", window, { repeat: true });
+    dispatchKey("Home", window, { repeat: true });
+    dispatchKey("End", window, { repeat: true });
+
+    expect(commands.togglePlaying).not.toHaveBeenCalled();
+    expect(commands.toggleLoop).not.toHaveBeenCalled();
+    expect(commands.previousFrame).toHaveBeenCalledOnce();
+    expect(commands.nextFrame).toHaveBeenCalledOnce();
+    expect(commands.firstFrame).toHaveBeenCalledOnce();
+    expect(commands.lastFrame).toHaveBeenCalledOnce();
+    unmount();
+  });
+
+  it("keeps A/D repeatable while ignoring repeated W/S action shortcuts", () => {
+    // Catches held action keys replaying while held navigation keys remain repeatable.
+    const commands = createCommands();
+    const unmount = mountKeyboard(commands);
+
+    dispatchKey("a", window, { repeat: true });
+    dispatchKey("D", window, { repeat: true });
+    expect(dispatchKey("w", window, { repeat: true }).defaultPrevented).toBe(true);
+    expect(dispatchKey("S", window, { repeat: true }).defaultPrevented).toBe(true);
+
+    expect(commands.playLeft).toHaveBeenCalledOnce();
+    expect(commands.playRight).toHaveBeenCalledOnce();
+    expect(commands.playJump).not.toHaveBeenCalled();
+    expect(commands.playCrouch).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  it("ends transient horizontal playback after the last held A/D key is released", () => {
+    // Catches held movement starting Walk without restoring the previous paused state on keyup.
+    const commands = createCommands();
+    const unmount = mountKeyboard(commands);
+
+    dispatchKey("d");
+    window.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true, key: "d" }));
+
+    expect(commands.playRight).toHaveBeenCalledOnce();
+    expect(commands.stopHorizontal).toHaveBeenCalledOnce();
+    unmount();
+  });
+
+  it("handles shortcuts when contenteditable is explicitly false", () => {
+    // Catches the attribute selector treating a non-editable element as an editor.
+    const commands = createCommands();
+    const target = document.createElement("div");
+    target.setAttribute("contenteditable", "false");
+    document.body.append(target);
+    const unmount = mountKeyboard(commands);
+
+    const events = shortcutKeys.map((key) => dispatchKey(key, target));
+
+    expect(events.every((event) => event.defaultPrevented)).toBe(true);
+    expect(commands.togglePlaying).toHaveBeenCalledOnce();
+    expect(commands.previousFrame).toHaveBeenCalledOnce();
+    expect(commands.nextFrame).toHaveBeenCalledOnce();
+    expect(commands.firstFrame).toHaveBeenCalledOnce();
+    expect(commands.lastFrame).toHaveBeenCalledOnce();
+    expect(commands.toggleLoop).toHaveBeenCalledOnce();
+    unmount();
+  });
+
+  it("does not listen while disabled and removes its listener when unmounted", () => {
+    // Catches shortcuts escaping a disabled workbench or a detached React tree.
+    const commands = createCommands();
+    const disabledUnmount = mountKeyboard(commands, false);
+
+    expect(dispatchKey("ArrowRight").defaultPrevented).toBe(false);
+    expect(commands.nextFrame).not.toHaveBeenCalled();
+    disabledUnmount();
+
+    const unmount = mountKeyboard(commands);
+    unmount();
+    expect(dispatchKey("ArrowRight").defaultPrevented).toBe(false);
+    expect(commands.nextFrame).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/pages/playtest/workbench/use-playtest-keyboard.ts b/frontend/src/pages/playtest/workbench/use-playtest-keyboard.ts
new file mode 100644
index 0000000..c48cb52
--- /dev/null
+++ b/frontend/src/pages/playtest/workbench/use-playtest-keyboard.ts
@@ -0,0 +1,91 @@
+import { useEffect, useRef } from "react";
+
+export interface PlaytestKeyboardCommands {
+  togglePlaying(): void;
+  previousFrame(): void;
+  nextFrame(): void;
+  firstFrame(): void;
+  lastFrame(): void;
+  toggleLoop(): void;
+  playLeft(): void;
+  playRight(): void;
+  stopHorizontal(): void;
+  playJump(): void;
+  playCrouch(): void;
+}
+
+function isTextEditingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+
+  if (target.closest("input, textarea, select") !== null) return true;
+
+  const editableAncestor = target.closest("[contenteditable]");
+  return (
+    editableAncestor !== null &&
+    editableAncestor.getAttribute("contenteditable")?.toLowerCase() !== "false"
+  );
+}
+
+function isButtonTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLElement && target.closest("button") !== null;
+}
+
+export function usePlaytestKeyboard(commands: PlaytestKeyboardCommands, enabled: boolean): void {
+  const heldHorizontalKeys = useRef(new Set<"a" | "d">());
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+      if (isTextEditingTarget(event.target)) return;
+      if (isButtonTarget(event.target) && key !== "a" && key !== "d" && key !== "w" && key !== "s")
+        return;
+
+      const command = {
+        " ": commands.togglePlaying,
+        ArrowLeft: commands.previousFrame,
+        ArrowRight: commands.nextFrame,
+        Home: commands.firstFrame,
+        End: commands.lastFrame,
+        l: commands.toggleLoop,
+        a: commands.playLeft,
+        d: commands.playRight,
+        w: commands.playJump,
+        s: commands.playCrouch,
+      }[key];
+
+      if (command === undefined) return;
+
+      event.preventDefault();
+      if (event.repeat && (key === " " || key === "l" || key === "w" || key === "s")) {
+        return;
+      }
+      if (key === "a" || key === "d") heldHorizontalKeys.current.add(key);
+      command();
+    };
+
+    const stopHorizontal = () => {
+      if (heldHorizontalKeys.current.size === 0) return;
+      heldHorizontalKeys.current.clear();
+      commands.stopHorizontal();
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+      if (key !== "a" && key !== "d") return;
+      if (!heldHorizontalKeys.current.delete(key)) return;
+      event.preventDefault();
+      if (heldHorizontalKeys.current.size === 0) commands.stopHorizontal();
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", stopHorizontal);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", stopHorizontal);
+    };
+  }, [commands, enabled]);
+}